@flanksource/clicky-ui/dist/components/DateTimePicker.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useRef } from "react";
import { Icon } from "../data/Icon.js";
import { cn } from "../lib/utils.js";
const DateTimePicker = forwardRef(
  ({
    value = "",
    onChange,
    className,
    inputClassName,
    buttonClassName,
    openButtonLabel = "Open time picker",
    ...props
  }, ref) => {
    const visibleRef = useRef(null);
    const pickerRef = useRef(null);
    function assignRef(node) {
      visibleRef.current = node;
      if (typeof ref === "function") {
        ref(node);
      } else if (ref) {
        ref.current = node;
      }
    }
    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          ...props,
          ref: assignRef,
          type: "text",
          value,
          className: cn(
            "h-8 w-full rounded-md border border-input bg-background px-2 pr-8 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
            inputClassName
          ),
          onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
        }
      ),
      /* @__PURE__ */ jsx(
        "input",
        {
          ref: pickerRef,
          type: "datetime-local",
          tabIndex: -1,
          "aria-hidden": "true",
          className: "pointer-events-none absolute left-0 top-0 h-0 w-0 opacity-0",
          value: toDateTimeLocalValue(value),
          onChange: (event) => onChange == null ? void 0 : onChange(event.target.value)
        }
      ),
      /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          "aria-label": openButtonLabel,
          disabled: props.disabled,
          className: cn(
            "absolute inset-y-0 right-1 inline-flex items-center text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
            buttonClassName
          ),
          onClick: () => {
            var _a, _b, _c;
            (_a = visibleRef.current) == null ? void 0 : _a.focus();
            (_c = (_b = pickerRef.current) == null ? void 0 : _b.showPicker) == null ? void 0 : _c.call(_b);
          },
          children: /* @__PURE__ */ jsx(Icon, { name: "codicon:calendar", className: "text-sm" })
        }
      )
    ] });
  }
);
DateTimePicker.displayName = "DateTimePicker";
function toDateTimeLocalValue(value) {
  const trimmed = value.trim();
  if (!trimmed) return "";
  if (trimmed === "now" || trimmed.startsWith("now")) return "";
  const withTime = /^\d{4}-\d{2}-\d{2}$/.test(trimmed) ? `${trimmed}T00:00` : trimmed;
  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(withTime) ? withTime.slice(0, 16) : "";
}
export {
  DateTimePicker
};
//# sourceMappingURL=DateTimePicker.js.map