react-temporal-picker/dist/index.js

This package is no longer maintained, please use this one: [@temporal-picker/react](https://www.npmjs.com/package/@temporal-picker/react).

// src/index.ts
import { defineCustomElements } from "@temporal-picker/custom-elements";

// src/date.ts
import { memo, useRef, forwardRef, useEffect, useImperativeHandle, createElement } from "react";
import useEvent from "react-use-event-hook";
var DatePicker = memo(
  forwardRef(function TemporalPicker(props, ref) {
    const pickerRef = useRef(null);
    useImperativeHandle(ref, () => pickerRef.current);
    const {
      autoApply,
      resetButton,
      extraSelect,
      firstDay,
      customLayout,
      localeApply,
      localeCancel,
      localeClear,
      rowHeader,
      testId,
      className,
      onValueChange,
      onViewChange,
      ...pickerProps
    } = props;
    const handleValueChange = useEvent((event) => {
      onValueChange?.(event.detail.value);
    });
    useEffect(() => {
      const element = pickerRef.current;
      if (!element) {
        return;
      }
      element.addEventListener("t-value-change", handleValueChange);
      return () => {
        element.removeEventListener("t-value-change", handleValueChange);
      };
    }, []);
    const handleViewChange = useEvent((event) => {
      onViewChange?.(event);
    });
    useEffect(() => {
      const element = pickerRef.current;
      if (!element) {
        return;
      }
      element.addEventListener("t-layout", handleViewChange);
      if (customLayout) {
        element.addEventListener("t-render", handleViewChange);
        element.addEventListener("t-mount", handleViewChange);
        element.addEventListener("t-update", handleViewChange);
      }
      return () => {
        element.removeEventListener("t-layout", handleViewChange);
        if (customLayout) {
          element.removeEventListener("t-render", handleViewChange);
          element.removeEventListener("t-mount", handleViewChange);
          element.removeEventListener("t-update", handleViewChange);
        }
      };
    }, [customLayout]);
    return createElement("temporal-picker", {
      ...pickerProps,
      class: className,
      "auto-apply": autoApply,
      "reset-button": resetButton,
      "extra-select": extraSelect,
      "first-day": firstDay,
      "custom-layout": customLayout,
      "locale-apply": localeApply,
      "locale-cancel": localeCancel,
      "locale-clear": localeClear,
      "row-header": rowHeader,
      "data-testid": testId,
      ref: pickerRef
    });
  })
);

// src/range.ts
import { memo as memo2, useRef as useRef2, forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, createElement as createElement2 } from "react";
import useEvent2 from "react-use-event-hook";
var RangePicker = memo2(
  forwardRef2(function TemporalPicker2(props, ref) {
    const pickerRef = useRef2(null);
    useImperativeHandle2(ref, () => pickerRef.current);
    const {
      presets,
      autoApply,
      resetButton,
      extraSelect,
      presetPosition,
      firstDay,
      customLayout,
      localeApply,
      localeCancel,
      localeClear,
      rowHeader,
      testId,
      className,
      onRangeChange,
      onViewChange,
      ...pickerProps
    } = props;
    const handleRangeChange = useEvent2((event) => {
      const { start, end } = event.detail;
      onRangeChange?.(start, end);
    });
    useEffect2(() => {
      const element = pickerRef.current;
      if (!element) {
        return;
      }
      element.addEventListener("t-range-change", handleRangeChange);
      return () => {
        element.removeEventListener("t-range-change", handleRangeChange);
      };
    }, []);
    const handleViewChange = useEvent2((event) => {
      onViewChange?.(event);
    });
    useEffect2(() => {
      const element = pickerRef.current;
      if (!element) {
        return;
      }
      element.addEventListener("t-layout", handleViewChange);
      if (customLayout) {
        element.addEventListener("t-render", handleViewChange);
        element.addEventListener("t-mount", handleViewChange);
        element.addEventListener("t-update", handleViewChange);
      }
      return () => {
        element.removeEventListener("t-layout", handleViewChange);
        if (customLayout) {
          element.removeEventListener("t-render", handleViewChange);
          element.removeEventListener("t-mount", handleViewChange);
          element.removeEventListener("t-update", handleViewChange);
        }
      };
    }, [customLayout]);
    return createElement2(
      "temporal-picker",
      {
        ...pickerProps,
        class: className,
        "auto-apply": autoApply,
        "reset-button": resetButton,
        "extra-select": extraSelect,
        "preset-position": presetPosition,
        "first-day": firstDay,
        "custom-layout": customLayout,
        "locale-apply": localeApply,
        "locale-cancel": localeCancel,
        "locale-clear": localeClear,
        "row-header": rowHeader,
        "data-testid": testId,
        type: "range",
        ref: pickerRef
      },
      ...(presets || []).map(
        (preset) => createElement2("temporal-preset", { ...preset, key: preset.label })
      )
    );
  })
);

// src/index.ts
defineCustomElements();
var src_default = DatePicker;
export {
  DatePicker,
  RangePicker,
  src_default as default
};