@orbe-agro/client-core 5.3.261 → 5.3.264

package/dist/@ecme/components/ui/TimeInput/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/TimeInput.tsx"],"sourcesContent":["import { useState, useRef } from 'react'\nimport useUniqueId from '../hooks/useUniqueId'\nimport useMergedRef from '../hooks/useMergeRef'\nimport useDidUpdate from '../hooks/useDidUpdate'\nimport { useFormItem } from '../Form/context'\nimport TimeInputField from './TimeInputField'\nimport AmPmInput from './AmPmInput'\nimport CloseButton from '../CloseButton'\nimport { Input } from '../Input'\nimport {\n    getTimeValues,\n    getDate,\n    createAmPmHandler,\n    createTimeHandler,\n} from './utils'\nimport { HiOutlineClock } from 'react-icons/hi'\nimport type { CommonProps, TypeAttributes } from '../@types/common'\nimport type { ReactNode, RefObject, Ref } from 'react'\n\ntype Value = Date | null\n\nexport interface TimeInputProps extends CommonProps {\n    amLabel?: string\n    amPmPlaceholder?: string\n    clearable?: boolean\n    defaultValue?: Value\n    disabled?: boolean\n    format?: '12' | '24'\n    id?: string\n    invalid?: boolean\n    name?: string\n    nextRef?: RefObject<HTMLInputElement | null>\n    onChange?: (value: Value) => void\n    pmLabel?: string\n    prefix?: string | ReactNode\n    ref?: Ref<HTMLInputElement>\n    showSeconds?: boolean\n    size?: TypeAttributes.ControlSize\n    suffix?: string | ReactNode\n    timeFieldPlaceholder?: string\n    timeFieldClass?: string\n    unstyle?: boolean\n    value?: Value\n}\n\nconst TimeInput = (props: TimeInputProps) => {\n    const {\n        amLabel = 'am',\n        amPmPlaceholder = 'am',\n        className,\n        clearable = true,\n        defaultValue,\n        disabled = false,\n        format = '24',\n        id,\n        invalid,\n        name,\n        nextRef,\n        onChange,\n        pmLabel = 'pm',\n        prefix,\n        ref = null,\n        showSeconds = false,\n        size = 'md',\n        style,\n        suffix = <HiOutlineClock className=\"text-lg\" />,\n        timeFieldPlaceholder = '--',\n        timeFieldClass,\n        value,\n        ...rest\n    } = props\n\n    const uuid = useUniqueId(id)\n\n    const hoursRef = useRef<HTMLInputElement>(undefined)\n    const minutesRef = useRef<HTMLInputElement>(undefined)\n    const secondsRef = useRef<HTMLInputElement>(undefined)\n    const amPmRef = useRef<HTMLInputElement>(undefined)\n    const [time, setTime] = useState(\n        getTimeValues(\n            value || (defaultValue as Date),\n            format,\n            amLabel,\n            pmLabel,\n        ),\n    )\n    const [_value, setValue] = useState<Value>(\n        (value as Date) || (defaultValue as Date),\n    )\n\n    const formItemInvalid = useFormItem()?.invalid\n    const isTimeInputInvalid = invalid || formItemInvalid\n\n    useDidUpdate(() => {\n        setTime(getTimeValues(_value as Date, format, amLabel, pmLabel))\n    }, [_value, format, amLabel, pmLabel])\n\n    useDidUpdate(() => {\n        if (value?.getTime() !== _value?.getTime()) {\n            setValue(value as Date | null)\n        }\n    }, [value])\n\n    const setDate = (change: Partial<typeof time>) => {\n        const timeWithChange = { ...time, ...change }\n        const newDate = getDate(\n            timeWithChange.hours,\n            timeWithChange.minutes,\n            timeWithChange.seconds,\n            format,\n            pmLabel,\n            timeWithChange.amPm,\n        )\n        setValue(newDate)\n        typeof onChange === 'function' && onChange(newDate)\n    }\n\n    const handleHoursChange = createTimeHandler({\n        onChange: (val, carryOver) => {\n            setDate({\n                hours: val,\n                minutes: carryOver ?? time.minutes,\n            })\n        },\n        min: format === '12' ? 1 : 0,\n        max: format === '12' ? 12 : 23,\n        nextRef: minutesRef as RefObject<HTMLInputElement | null>,\n        nextMax: 59,\n    })\n\n    const handleMinutesChange = createTimeHandler({\n        onChange: (val, carryOver) => {\n            setDate({\n                minutes: val,\n                seconds: carryOver ?? time.seconds,\n            })\n        },\n        min: 0,\n        max: 59,\n        nextRef: showSeconds\n            ? (secondsRef as RefObject<HTMLInputElement | null>)\n            : format === '12'\n              ? (amPmRef as RefObject<HTMLInputElement | null>)\n              : (nextRef as RefObject<HTMLInputElement | null>),\n        nextMax: showSeconds ? 59 : undefined,\n    })\n\n    const handleSecondsChange = createTimeHandler({\n        onChange: (val) => {\n            setDate({ seconds: val })\n        },\n        min: 0,\n        max: 59,\n        nextRef:\n            format === '12'\n                ? (amPmRef as RefObject<HTMLInputElement | null>)\n                : (nextRef as RefObject<HTMLInputElement | null>),\n    })\n\n    const handleAmPmChange = createAmPmHandler({\n        amLabel,\n        pmLabel,\n        onChange: (val) => {\n            setDate({ amPm: val })\n        },\n        nextRef,\n    })\n\n    const handleClear = () => {\n        setTime({ hours: '', minutes: '', seconds: '', amPm: '' })\n        setValue(null)\n        onChange?.(null)\n        hoursRef?.current?.focus()\n    }\n\n    const suffixSlot =\n        clearable && _value ? <CloseButton onClick={handleClear} /> : suffix\n\n    return (\n        <Input\n            asElement=\"div\"\n            invalid={isTimeInputInvalid}\n            disabled={disabled}\n            style={style}\n            className={className}\n            size={size}\n            prefix={prefix}\n            suffix={suffixSlot}\n            onClick={() => hoursRef?.current?.focus()}\n            {...rest}\n        >\n            <div className=\"time-input-wrapper\">\n                <TimeInputField\n                    ref={useMergedRef(hoursRef as Ref<HTMLInputElement>, ref)}\n                    withSeparator\n                    value={time.hours}\n                    setValue={(val) =>\n                        setTime((current) => ({ ...current, hours: val }))\n                    }\n                    id={uuid}\n                    className={timeFieldClass}\n                    max={format === '12' ? 12 : 23}\n                    placeholder={timeFieldPlaceholder}\n                    aria-label=\"hours\"\n                    disabled={disabled}\n                    name={name}\n                    onChange={handleHoursChange}\n                />\n                <TimeInputField\n                    ref={minutesRef as Ref<HTMLInputElement>}\n                    value={time.minutes}\n                    setValue={(val) =>\n                        setTime((current) => ({ ...current, minutes: val }))\n                    }\n                    className={timeFieldClass}\n                    withSeparator={showSeconds}\n                    max={59}\n                    placeholder={timeFieldPlaceholder}\n                    aria-label=\"minutes\"\n                    disabled={disabled}\n                    onChange={handleMinutesChange}\n                />\n                {showSeconds && (\n                    <TimeInputField\n                        ref={secondsRef as Ref<HTMLInputElement>}\n                        value={time.seconds}\n                        setValue={(val) =>\n                            setTime((current) => ({ ...current, seconds: val }))\n                        }\n                        className={timeFieldClass}\n                        max={59}\n                        placeholder={timeFieldPlaceholder}\n                        aria-label=\"seconds\"\n                        disabled={disabled}\n                        onChange={handleSecondsChange}\n                    />\n                )}\n                {format === '12' && (\n                    <AmPmInput\n                        ref={amPmRef as Ref<HTMLInputElement>}\n                        value={time.amPm}\n                        placeholder={amPmPlaceholder}\n                        amLabel={amLabel}\n                        pmLabel={pmLabel}\n                        aria-label=\"am pm\"\n                        disabled={disabled}\n                        onChange={handleAmPmChange}\n                    />\n                )}\n            </div>\n        </Input>\n    )\n}\n\nexport default TimeInput\n"],"names":["TimeInput","props","amLabel","amPmPlaceholder","className","clearable","defaultValue","disabled","format","id","invalid","name","nextRef","onChange","pmLabel","prefix","ref","showSeconds","size","style","suffix","jsx","HiOutlineClock","timeFieldPlaceholder","timeFieldClass","value","rest","uuid","useUniqueId","hoursRef","useRef","minutesRef","secondsRef","amPmRef","time","setTime","useState","getTimeValues","_value","setValue","formItemInvalid","useFormItem","isTimeInputInvalid","useDidUpdate","setDate","change","timeWithChange","newDate","getDate","handleHoursChange","createTimeHandler","val","carryOver","handleMinutesChange","handleSecondsChange","handleAmPmChange","createAmPmHandler","Input","CloseButton","jsxs","TimeInputField","useMergedRef","current","AmPmInput"],"mappings":"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"}
+{"version":3,"file":"TimeInput.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/TimeInput.tsx"],"sourcesContent":["import { useState, useRef } from 'react'\nimport useUniqueId from '../hooks/useUniqueId'\nimport useMergedRef from '../hooks/useMergeRef'\nimport useDidUpdate from '../hooks/useDidUpdate'\nimport { useFormItem } from '../Form/context'\nimport TimeInputField from './TimeInputField'\nimport AmPmInput from './AmPmInput'\nimport CloseButton from '../CloseButton'\nimport { Input } from '../Input'\nimport {\n    getTimeValues,\n    getDate,\n    createAmPmHandler,\n    createTimeHandler,\n} from './utils'\nimport { HiOutlineClock } from 'react-icons/hi'\nimport type { CommonProps, TypeAttributes } from '../@types/common'\nimport type { ReactNode, RefObject, Ref } from 'react'\n\ntype Value = Date | null\n\nexport interface TimeInputProps extends CommonProps {\n    amLabel?: string\n    amPmPlaceholder?: string\n    clearable?: boolean\n    defaultValue?: Value\n    disabled?: boolean\n    format?: '12' | '24'\n    id?: string\n    invalid?: boolean\n    name?: string\n    nextRef?: RefObject<HTMLInputElement | null>\n    onChange?: (value: Value) => void\n    pmLabel?: string\n    prefix?: string | ReactNode\n    ref?: Ref<HTMLInputElement>\n    showSeconds?: boolean\n    size?: TypeAttributes.ControlSize\n    suffix?: string | ReactNode\n    timeFieldPlaceholder?: string\n    timeFieldClass?: string\n    unstyle?: boolean\n    value?: Value\n}\n\nconst TimeInput = (props: TimeInputProps) => {\n    const {\n        amLabel = 'am',\n        amPmPlaceholder = 'am',\n        className,\n        clearable = true,\n        defaultValue,\n        disabled = false,\n        format = '24',\n        id,\n        invalid,\n        name,\n        nextRef,\n        onChange,\n        pmLabel = 'pm',\n        prefix,\n        ref = null,\n        showSeconds = false,\n        size = 'md',\n        style,\n        suffix = <HiOutlineClock className=\"text-lg\" />,\n        timeFieldPlaceholder = '--',\n        timeFieldClass,\n        value,\n        ...rest\n    } = props\n\n    const uuid = useUniqueId(id)\n\n    const hoursRef = useRef<HTMLInputElement>(undefined)\n    const minutesRef = useRef<HTMLInputElement>(undefined)\n    const secondsRef = useRef<HTMLInputElement>(undefined)\n    const amPmRef = useRef<HTMLInputElement>(undefined)\n    const [time, setTime] = useState(\n        getTimeValues(\n            value || (defaultValue as Date),\n            format,\n            amLabel,\n            pmLabel,\n        ),\n    )\n    const [_value, setValue] = useState<Value>(\n        (value as Date) || (defaultValue as Date),\n    )\n\n    const formItemInvalid = useFormItem()?.invalid\n    const isTimeInputInvalid = invalid || formItemInvalid\n\n    useDidUpdate(() => {\n        setTime(getTimeValues(_value as Date, format, amLabel, pmLabel))\n    }, [_value, format, amLabel, pmLabel])\n\n    useDidUpdate(() => {\n        if (value?.getTime() !== _value?.getTime()) {\n            setValue(value as Date | null)\n        }\n    }, [value])\n\n    const setDate = (change: Partial<typeof time>) => {\n        const timeWithChange = { ...time, ...change }\n        const newDate = getDate(\n            timeWithChange.hours,\n            timeWithChange.minutes,\n            timeWithChange.seconds,\n            format,\n            pmLabel,\n            timeWithChange.amPm,\n        )\n        setValue(newDate)\n        typeof onChange === 'function' && onChange(newDate)\n    }\n\n    const handleHoursChange = createTimeHandler({\n        onChange: (val, carryOver) => {\n            setDate({\n                hours: val,\n                minutes: carryOver ?? time.minutes,\n            })\n        },\n        min: format === '12' ? 1 : 0,\n        max: format === '12' ? 12 : 23,\n        nextRef: minutesRef as RefObject<HTMLInputElement | null>,\n        nextMax: 59,\n    })\n\n    const handleMinutesChange = createTimeHandler({\n        onChange: (val, carryOver) => {\n            setDate({\n                minutes: val,\n                seconds: carryOver ?? time.seconds,\n            })\n        },\n        min: 0,\n        max: 59,\n        nextRef: showSeconds\n            ? (secondsRef as RefObject<HTMLInputElement | null>)\n            : format === '12'\n              ? (amPmRef as RefObject<HTMLInputElement | null>)\n              : (nextRef as RefObject<HTMLInputElement | null>),\n        nextMax: showSeconds ? 59 : undefined,\n    })\n\n    const handleSecondsChange = createTimeHandler({\n        onChange: (val) => {\n            setDate({ seconds: val })\n        },\n        min: 0,\n        max: 59,\n        nextRef:\n            format === '12'\n                ? (amPmRef as RefObject<HTMLInputElement | null>)\n                : (nextRef as RefObject<HTMLInputElement | null>),\n    })\n\n    const handleAmPmChange = createAmPmHandler({\n        amLabel,\n        pmLabel,\n        onChange: (val) => {\n            setDate({ amPm: val })\n        },\n        nextRef,\n    })\n\n    const handleClear = () => {\n        setTime({ hours: '', minutes: '', seconds: '', amPm: '' })\n        setValue(null)\n        onChange?.(null)\n        hoursRef?.current?.focus()\n    }\n\n    const suffixSlot =\n        clearable && _value ? <CloseButton onClick={handleClear} /> : suffix\n\n    return (\n        <Input\n            asElement=\"div\"\n            invalid={isTimeInputInvalid}\n            disabled={disabled}\n            style={style}\n            className={className}\n            size={size}\n            prefix={prefix}\n            suffix={suffixSlot}\n            onClick={() => hoursRef?.current?.focus()}\n            {...rest}\n        >\n            <div className=\"time-input-wrapper\">\n                <TimeInputField\n                    ref={useMergedRef(hoursRef as Ref<HTMLInputElement>, ref)}\n                    withSeparator\n                    value={time.hours}\n                    setValue={(val) =>\n                        setTime((current) => ({ ...current, hours: val }))\n                    }\n                    id={uuid}\n                    className={timeFieldClass}\n                    max={format === '12' ? 12 : 23}\n                    placeholder={timeFieldPlaceholder}\n                    aria-label=\"hours\"\n                    disabled={disabled}\n                    name={name}\n                    onChange={handleHoursChange}\n                />\n                <TimeInputField\n                    ref={minutesRef as Ref<HTMLInputElement>}\n                    value={time.minutes}\n                    setValue={(val) =>\n                        setTime((current) => ({ ...current, minutes: val }))\n                    }\n                    className={timeFieldClass}\n                    withSeparator={showSeconds}\n                    max={59}\n                    placeholder={timeFieldPlaceholder}\n                    aria-label=\"minutes\"\n                    disabled={disabled}\n                    onChange={handleMinutesChange}\n                />\n                {showSeconds && (\n                    <TimeInputField\n                        ref={secondsRef as Ref<HTMLInputElement>}\n                        value={time.seconds}\n                        setValue={(val) =>\n                            setTime((current) => ({ ...current, seconds: val }))\n                        }\n                        className={timeFieldClass}\n                        max={59}\n                        placeholder={timeFieldPlaceholder}\n                        aria-label=\"seconds\"\n                        disabled={disabled}\n                        onChange={handleSecondsChange}\n                    />\n                )}\n                {format === '12' && (\n                    <AmPmInput\n                        ref={amPmRef as Ref<HTMLInputElement>}\n                        value={time.amPm}\n                        placeholder={amPmPlaceholder}\n                        amLabel={amLabel}\n                        pmLabel={pmLabel}\n                        aria-label=\"am pm\"\n                        disabled={disabled}\n                        onChange={handleAmPmChange}\n                    />\n                )}\n            </div>\n        </Input>\n    )\n}\n\nexport default TimeInput\n"],"names":["useMergedRef"],"mappings":"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"}

package/dist/@ecme/components/ui/TimeInput/TimeInputField.js

@@ -1,82 +1,99 @@
-import { jsxs as k, Fragment as I, jsx as f } from "react/jsx-runtime";
-import { useState as v, useRef as B } from "react";
-import N from "classnames";
-import R from "../hooks/useMergeRef.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import classNames from "classnames";
+import useMergeRef from "../hooks/useMergeRef.js";
 import "./utils/index.js";
-import { padTime as p } from "./utils/padTime.js";
-import { clamp as m } from "./utils/clamp.js";
-const V = (d) => {
+import { padTime } from "./utils/padTime.js";
+import { clamp } from "./utils/clamp.js";
+const TimeInputField = (props) => {
   const {
-    className: g,
-    onFocus: s,
-    onBlur: i,
-    onChange: r,
-    ref: h = null,
-    setValue: y,
-    withSeparator: w = !1,
-    max: u,
-    min: l = 0,
-    value: o,
-    ...D
-  } = d, [n, c] = v(0), a = B(void 0), T = (e) => {
-    typeof s == "function" && s(e), a?.current?.select(), c(0);
-  }, x = (e) => {
-    typeof i == "function" && i(e), n === 1 && typeof r == "function" && r(e.currentTarget.value, !1);
-  }, C = (e) => {
-    e.stopPropagation(), a?.current?.select();
-  }, F = (e) => {
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      const t = p(
-        m(
-          parseInt(e.currentTarget.value, 10) + 1,
-          l,
-          u
+    className,
+    onFocus,
+    onBlur,
+    onChange,
+    ref = null,
+    setValue,
+    withSeparator = false,
+    max,
+    min = 0,
+    value,
+    ...rest
+  } = props;
+  const [digitsEntered, setDigitsEntered] = useState(0);
+  const inputRef = useRef(void 0);
+  const handleFocus = (event) => {
+    typeof onFocus === "function" && onFocus(event);
+    inputRef?.current?.select();
+    setDigitsEntered(0);
+  };
+  const handleBlur = (event) => {
+    typeof onBlur === "function" && onBlur(event);
+    if (digitsEntered === 1) {
+      typeof onChange === "function" && onChange(event.currentTarget.value, false);
+    }
+  };
+  const handleClick = (event) => {
+    event.stopPropagation();
+    inputRef?.current?.select();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const padded = padTime(
+        clamp(
+          parseInt(event.currentTarget.value, 10) + 1,
+          min,
+          max
         ).toString()
       );
-      o !== t && r(t, !1);
+      if (value !== padded) {
+        onChange(padded, false);
+      }
     }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      const t = p(
-        m(
-          parseInt(e.currentTarget.value, 10) - 1,
-          l,
-          u
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const padded = padTime(
+        clamp(
+          parseInt(event.currentTarget.value, 10) - 1,
+          min,
+          max
         ).toString()
       );
-      o !== t && r(t, !1);
+      if (value !== padded) {
+        onChange(padded, false);
+      }
     }
-  }, S = (e) => {
-    c(n + 1);
-    const t = parseInt(e.currentTarget.value, 10).toString();
-    if (t === "0" && n === 0) {
-      y("00");
+  };
+  const handleChange = (event) => {
+    setDigitsEntered(digitsEntered + 1);
+    const _val = parseInt(event.currentTarget.value, 10).toString();
+    if (_val === "0" && digitsEntered === 0) {
+      setValue("00");
       return;
     }
-    r(t, !0, n > 0);
+    onChange(_val, true, digitsEntered > 0);
   };
-  return /* @__PURE__ */ k(I, { children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "input",
       {
-        ref: R(a, h),
+        ref: useMergeRef(inputRef, ref),
         type: "text",
         inputMode: "numeric",
-        value: o,
-        className: N("time-input-field", g),
-        onChange: S,
-        onClick: C,
-        onFocus: T,
-        onBlur: x,
-        onKeyDown: F,
-        ...D
+        value,
+        className: classNames("time-input-field", className),
+        onChange: handleChange,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        ...rest
       }
     ),
-    w && /* @__PURE__ */ f("span", { children: " : " })
+    withSeparator && /* @__PURE__ */ jsx("span", { children: " : " })
   ] });
 };
 export {
-  V as default
+  TimeInputField as default
 };
 //# sourceMappingURL=TimeInputField.js.map

package/dist/@ecme/components/ui/TimeInput/TimeInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInputField.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/TimeInputField.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport classNames from 'classnames'\nimport useMergedRef from '../hooks/useMergeRef'\nimport { clamp, padTime, createTimeHandler } from './utils'\nimport type { CommonProps } from '../@types/common'\nimport type {\n    FocusEvent,\n    Ref,\n    KeyboardEvent,\n    MouseEvent,\n    ChangeEvent,\n} from 'react'\n\ninterface TimeInputFieldProps extends CommonProps {\n    disabled?: boolean\n    id?: string\n    name?: string\n    max?: number\n    min?: number\n    onChange: ReturnType<typeof createTimeHandler>\n    onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void\n    onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void\n    placeholder?: string\n    ref?: Ref<HTMLInputElement>\n    setValue: (value: string) => void\n    withSeparator?: boolean\n    value: string | number | readonly string[]\n}\n\nconst TimeInputField = (props: TimeInputFieldProps) => {\n    const {\n        className,\n        onFocus,\n        onBlur,\n        onChange,\n        ref = null,\n        setValue,\n        withSeparator = false,\n        max,\n        min = 0,\n        value,\n        ...rest\n    } = props\n\n    const [digitsEntered, setDigitsEntered] = useState(0)\n\n    const inputRef = useRef<HTMLInputElement>(undefined)\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n        typeof onFocus === 'function' && onFocus(event)\n        inputRef?.current?.select()\n        setDigitsEntered(0)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement, Element>) => {\n        typeof onBlur === 'function' && onBlur(event)\n        if (digitsEntered === 1) {\n            typeof onChange === 'function' &&\n                onChange(event.currentTarget.value, false)\n        }\n    }\n\n    const handleClick = (event: MouseEvent<HTMLInputElement>) => {\n        event.stopPropagation()\n        inputRef?.current?.select()\n    }\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'ArrowUp') {\n            event.preventDefault()\n            const padded = padTime(\n                clamp(\n                    parseInt(event.currentTarget.value, 10) + 1,\n                    min,\n                    max as number,\n                ).toString(),\n            )\n\n            if (value !== padded) {\n                onChange(padded, false)\n            }\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault()\n            const padded = padTime(\n                clamp(\n                    parseInt(event.currentTarget.value, 10) - 1,\n                    min,\n                    max as number,\n                ).toString(),\n            )\n\n            if (value !== padded) {\n                onChange(padded, false)\n            }\n        }\n    }\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setDigitsEntered(digitsEntered + 1)\n\n        const _val = parseInt(event.currentTarget.value, 10).toString()\n\n        if (_val === '0' && digitsEntered === 0) {\n            setValue('00')\n            return\n        }\n        onChange(_val, true, digitsEntered > 0)\n    }\n\n    return (\n        <>\n            <input\n                ref={useMergedRef(inputRef as Ref<HTMLInputElement>, ref)}\n                type=\"text\"\n                inputMode=\"numeric\"\n                value={value}\n                className={classNames('time-input-field', className)}\n                onChange={handleChange}\n                onClick={handleClick}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onKeyDown={handleKeyDown}\n                {...rest}\n            />\n            {withSeparator && <span> : </span>}\n        </>\n    )\n}\n\nexport default TimeInputField\n"],"names":["TimeInputField","props","className","onFocus","onBlur","onChange","ref","setValue","withSeparator","max","min","value","rest","digitsEntered","setDigitsEntered","useState","inputRef","useRef","handleFocus","event","handleBlur","handleClick","handleKeyDown","padded","padTime","clamp","handleChange","_val","jsxs","Fragment","jsx","useMergedRef","classNames"],"mappings":";;;;;;;AA6BM,MAAAA,IAAiB,CAACC,MAA+B;AAC7C,QAAA;AAAA,IACF,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,KAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEE,CAACY,GAAeC,CAAgB,IAAIC,EAAS,CAAC,GAE9CC,IAAWC,EAAyB,MAAS,GAE7CC,IAAc,CAACC,MAAwC;AAClD,WAAAhB,KAAY,cAAcA,EAAQgB,CAAK,GAC9CH,GAAU,SAAS,OAAO,GAC1BF,EAAiB,CAAC;AAAA,EACtB,GAEMM,IAAa,CAACD,MAAiD;AAC1D,WAAAf,KAAW,cAAcA,EAAOe,CAAK,GACxCN,MAAkB,KAClB,OAAOR,KAAa,cAChBA,EAASc,EAAM,cAAc,OAAO,EAAK;AAAA,EAErD,GAEME,IAAc,CAACF,MAAwC;AACzD,IAAAA,EAAM,gBAAgB,GACtBH,GAAU,SAAS,OAAO;AAAA,EAC9B,GAEMM,IAAgB,CAACH,MAA2C;AAC1D,QAAAA,EAAM,QAAQ,WAAW;AACzB,MAAAA,EAAM,eAAe;AACrB,YAAMI,IAASC;AAAA,QACXC;AAAA,UACI,SAASN,EAAM,cAAc,OAAO,EAAE,IAAI;AAAA,UAC1CT;AAAA,UACAD;AAAA,QAAA,EACF,SAAS;AAAA,MACf;AAEA,MAAIE,MAAUY,KACVlB,EAASkB,GAAQ,EAAK;AAAA,IAC1B;AAGA,QAAAJ,EAAM,QAAQ,aAAa;AAC3B,MAAAA,EAAM,eAAe;AACrB,YAAMI,IAASC;AAAA,QACXC;AAAA,UACI,SAASN,EAAM,cAAc,OAAO,EAAE,IAAI;AAAA,UAC1CT;AAAA,UACAD;AAAA,QAAA,EACF,SAAS;AAAA,MACf;AAEA,MAAIE,MAAUY,KACVlB,EAASkB,GAAQ,EAAK;AAAA,IAC1B;AAAA,EAER,GAEMG,IAAe,CAACP,MAAyC;AAC3D,IAAAL,EAAiBD,IAAgB,CAAC;AAElC,UAAMc,IAAO,SAASR,EAAM,cAAc,OAAO,EAAE,EAAE,SAAS;AAE1D,QAAAQ,MAAS,OAAOd,MAAkB,GAAG;AACrC,MAAAN,EAAS,IAAI;AACb;AAAA,IAAA;AAEK,IAAAF,EAAAsB,GAAM,IAAMd,IAAgB,CAAC;AAAA,EAC1C;AAEA,SAEQ,gBAAAe,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKC,EAAaf,GAAmCV,CAAG;AAAA,QACxD,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAAK;AAAA,QACA,WAAWqB,EAAW,oBAAoB9B,CAAS;AAAA,QACnD,UAAUwB;AAAA,QACV,SAASL;AAAA,QACT,SAASH;AAAA,QACT,QAAQE;AAAA,QACR,WAAWE;AAAA,QACV,GAAGV;AAAA,MAAA;AAAA,IACR;AAAA,IACCJ,KAAkB,gBAAAsB,EAAA,QAAA,EAAK,UAAG,MAAA,CAAA;AAAA,EAAA,GAC/B;AAER;"}
+{"version":3,"file":"TimeInputField.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/TimeInputField.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport classNames from 'classnames'\nimport useMergedRef from '../hooks/useMergeRef'\nimport { clamp, padTime, createTimeHandler } from './utils'\nimport type { CommonProps } from '../@types/common'\nimport type {\n    FocusEvent,\n    Ref,\n    KeyboardEvent,\n    MouseEvent,\n    ChangeEvent,\n} from 'react'\n\ninterface TimeInputFieldProps extends CommonProps {\n    disabled?: boolean\n    id?: string\n    name?: string\n    max?: number\n    min?: number\n    onChange: ReturnType<typeof createTimeHandler>\n    onFocus?: (event: FocusEvent<HTMLInputElement, Element>) => void\n    onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void\n    placeholder?: string\n    ref?: Ref<HTMLInputElement>\n    setValue: (value: string) => void\n    withSeparator?: boolean\n    value: string | number | readonly string[]\n}\n\nconst TimeInputField = (props: TimeInputFieldProps) => {\n    const {\n        className,\n        onFocus,\n        onBlur,\n        onChange,\n        ref = null,\n        setValue,\n        withSeparator = false,\n        max,\n        min = 0,\n        value,\n        ...rest\n    } = props\n\n    const [digitsEntered, setDigitsEntered] = useState(0)\n\n    const inputRef = useRef<HTMLInputElement>(undefined)\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n        typeof onFocus === 'function' && onFocus(event)\n        inputRef?.current?.select()\n        setDigitsEntered(0)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement, Element>) => {\n        typeof onBlur === 'function' && onBlur(event)\n        if (digitsEntered === 1) {\n            typeof onChange === 'function' &&\n                onChange(event.currentTarget.value, false)\n        }\n    }\n\n    const handleClick = (event: MouseEvent<HTMLInputElement>) => {\n        event.stopPropagation()\n        inputRef?.current?.select()\n    }\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'ArrowUp') {\n            event.preventDefault()\n            const padded = padTime(\n                clamp(\n                    parseInt(event.currentTarget.value, 10) + 1,\n                    min,\n                    max as number,\n                ).toString(),\n            )\n\n            if (value !== padded) {\n                onChange(padded, false)\n            }\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault()\n            const padded = padTime(\n                clamp(\n                    parseInt(event.currentTarget.value, 10) - 1,\n                    min,\n                    max as number,\n                ).toString(),\n            )\n\n            if (value !== padded) {\n                onChange(padded, false)\n            }\n        }\n    }\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setDigitsEntered(digitsEntered + 1)\n\n        const _val = parseInt(event.currentTarget.value, 10).toString()\n\n        if (_val === '0' && digitsEntered === 0) {\n            setValue('00')\n            return\n        }\n        onChange(_val, true, digitsEntered > 0)\n    }\n\n    return (\n        <>\n            <input\n                ref={useMergedRef(inputRef as Ref<HTMLInputElement>, ref)}\n                type=\"text\"\n                inputMode=\"numeric\"\n                value={value}\n                className={classNames('time-input-field', className)}\n                onChange={handleChange}\n                onClick={handleClick}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onKeyDown={handleKeyDown}\n                {...rest}\n            />\n            {withSeparator && <span> : </span>}\n        </>\n    )\n}\n\nexport default TimeInputField\n"],"names":["useMergedRef"],"mappings":";;;;;;;AA6BM,MAAA,iBAAiB,CAAC,UAA+B;AAC7C,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAE9C,QAAA,WAAW,OAAyB,MAAS;AAE7C,QAAA,cAAc,CAAC,UAAwC;AAClD,WAAA,YAAY,cAAc,QAAQ,KAAK;AAC9C,cAAU,SAAS,OAAO;AAC1B,qBAAiB,CAAC;AAAA,EACtB;AAEM,QAAA,aAAa,CAAC,UAAiD;AAC1D,WAAA,WAAW,cAAc,OAAO,KAAK;AAC5C,QAAI,kBAAkB,GAAG;AACrB,aAAO,aAAa,cAChB,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,IAAA;AAAA,EAErD;AAEM,QAAA,cAAc,CAAC,UAAwC;AACzD,UAAM,gBAAgB;AACtB,cAAU,SAAS,OAAO;AAAA,EAC9B;AAEM,QAAA,gBAAgB,CAAC,UAA2C;AAC1D,QAAA,MAAM,QAAQ,WAAW;AACzB,YAAM,eAAe;AACrB,YAAM,SAAS;AAAA,QACX;AAAA,UACI,SAAS,MAAM,cAAc,OAAO,EAAE,IAAI;AAAA,UAC1C;AAAA,UACA;AAAA,QAAA,EACF,SAAS;AAAA,MACf;AAEA,UAAI,UAAU,QAAQ;AAClB,iBAAS,QAAQ,KAAK;AAAA,MAAA;AAAA,IAC1B;AAGA,QAAA,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAe;AACrB,YAAM,SAAS;AAAA,QACX;AAAA,UACI,SAAS,MAAM,cAAc,OAAO,EAAE,IAAI;AAAA,UAC1C;AAAA,UACA;AAAA,QAAA,EACF,SAAS;AAAA,MACf;AAEA,UAAI,UAAU,QAAQ;AAClB,iBAAS,QAAQ,KAAK;AAAA,MAAA;AAAA,IAC1B;AAAA,EAER;AAEM,QAAA,eAAe,CAAC,UAAyC;AAC3D,qBAAiB,gBAAgB,CAAC;AAElC,UAAM,OAAO,SAAS,MAAM,cAAc,OAAO,EAAE,EAAE,SAAS;AAE1D,QAAA,SAAS,OAAO,kBAAkB,GAAG;AACrC,eAAS,IAAI;AACb;AAAA,IAAA;AAEK,aAAA,MAAM,MAAM,gBAAgB,CAAC;AAAA,EAC1C;AAEA,SAEQ,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKA,YAAa,UAAmC,GAAG;AAAA,QACxD,MAAK;AAAA,QACL,WAAU;AAAA,QACV;AAAA,QACA,WAAW,WAAW,oBAAoB,SAAS;AAAA,QACnD,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IACR;AAAA,IACC,iBAAkB,oBAAA,QAAA,EAAK,UAAG,MAAA,CAAA;AAAA,EAAA,GAC/B;AAER;"}

package/dist/@ecme/components/ui/TimeInput/TimeInputRange.js

@@ -1,96 +1,106 @@
-import { jsx as l, Fragment as V, jsxs as q } from "react/jsx-runtime";
-import { useRef as m, useState as z } from "react";
-import B from "../hooks/useUniqueId.js";
-import D from "../hooks/useMergeRef.js";
-import c from "../hooks/useDidUpdate.js";
-import d from "./TimeInput.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import useUniqueId from "../hooks/useUniqueId.js";
+import useMergeRef from "../hooks/useMergeRef.js";
+import useDidUpdate from "../hooks/useDidUpdate.js";
+import TimeInput from "./TimeInput.js";
 import "../CloseButton/index.js";
-import { HiOutlineClock as E } from "react-icons/hi";
-import H from "../Input/Input.js";
-import M from "../CloseButton/CloseButton.js";
-const Z = (p) => {
+import { HiOutlineClock } from "react-icons/hi";
+import Input from "../Input/Input.js";
+import CloseButton from "../CloseButton/CloseButton.js";
+const TimeInputRange = (props) => {
   const {
-    amPmPlaceholder: h = "am",
-    clearable: g = !1,
-    className: x,
-    defaultValue: v = [null, null],
-    disabled: i = !1,
-    format: C = "24",
-    id: T,
-    invalid: R,
-    name: b,
-    onChange: n,
-    prefix: y,
-    ref: I = null,
-    seperator: N = "~",
-    showSeconds: P = !1,
-    size: s,
-    style: k,
-    suffix: w = /* @__PURE__ */ l(E, { className: "text-lg" }),
-    timeFieldPlaceholder: S = "--",
-    value: t,
-    ...j
-  } = p, F = B(T), o = m(void 0), u = m(void 0), [e, r] = z(t ?? v);
-  c(() => {
-    typeof n == "function" && n(e);
-  }, [e]), c(() => {
-    t && (t[0]?.getTime() !== e[0]?.getTime() || t[1]?.getTime() !== e[1]?.getTime()) && r(t);
-  }, [t]);
-  const U = g && e ? /* @__PURE__ */ l(M, { onClick: () => {
-    r([null, null]), o.current?.focus();
-  } }) : /* @__PURE__ */ l(V, { children: w }), f = {
-    amPmPlaceholder: h,
-    disabled: i,
-    format: C,
-    size: s,
-    timeFieldPlaceholder: S,
-    showSeconds: P
+    amPmPlaceholder = "am",
+    clearable = false,
+    className,
+    defaultValue = [null, null],
+    disabled = false,
+    format = "24",
+    id,
+    invalid,
+    name,
+    onChange,
+    prefix,
+    ref = null,
+    seperator = "~",
+    showSeconds = false,
+    size,
+    style,
+    suffix = /* @__PURE__ */ jsx(HiOutlineClock, { className: "text-lg" }),
+    timeFieldPlaceholder = "--",
+    value,
+    ...rest
+  } = props;
+  const uuid = useUniqueId(id);
+  const fromTimeRef = useRef(void 0);
+  const toTimeRef = useRef(void 0);
+  const [_value, setValue] = useState(value ?? defaultValue);
+  useDidUpdate(() => {
+    typeof onChange === "function" && onChange(_value);
+  }, [_value]);
+  useDidUpdate(() => {
+    if (value && (value[0]?.getTime() !== _value[0]?.getTime() || value[1]?.getTime() !== _value[1]?.getTime())) {
+      setValue(value);
+    }
+  }, [value]);
+  const handleClear = () => {
+    setValue([null, null]);
+    fromTimeRef.current?.focus();
+  };
+  const suffixSlot = clearable && _value ? /* @__PURE__ */ jsx(CloseButton, { onClick: handleClear }) : /* @__PURE__ */ jsx(Fragment, { children: suffix });
+  const forwardProps = {
+    amPmPlaceholder,
+    disabled,
+    format,
+    size,
+    timeFieldPlaceholder,
+    showSeconds
   };
-  return /* @__PURE__ */ l(
-    H,
+  return /* @__PURE__ */ jsx(
+    Input,
     {
       asElement: "div",
-      invalid: R,
-      size: s,
-      className: x,
-      style: k,
-      disabled: i,
-      suffix: U,
-      prefix: y,
+      invalid,
+      size,
+      className,
+      style,
+      disabled,
+      suffix: suffixSlot,
+      prefix,
       onClick: () => {
-        o.current?.focus();
+        fromTimeRef.current?.focus();
       },
-      ...j,
-      children: /* @__PURE__ */ q("div", { className: "time-input-wrapper", children: [
-        /* @__PURE__ */ l(
-          d,
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: "time-input-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          TimeInput,
           {
-            ref: D(
-              o,
-              I
+            ref: useMergeRef(
+              fromTimeRef,
+              ref
             ),
-            unstyle: !0,
-            value: e[0],
-            name: b,
-            nextRef: u,
-            id: F,
-            clearable: !1,
+            unstyle: true,
+            value: _value[0],
+            name,
+            nextRef: toTimeRef,
+            id: uuid,
+            clearable: false,
             suffix: null,
-            onChange: (a) => r([a, e[1]]),
-            ...f
+            onChange: (date) => setValue([date, _value[1]]),
+            ...forwardProps
           }
         ),
-        /* @__PURE__ */ l("span", { className: "time-input-separator", children: N }),
-        /* @__PURE__ */ l(
-          d,
+        /* @__PURE__ */ jsx("span", { className: "time-input-separator", children: seperator }),
+        /* @__PURE__ */ jsx(
+          TimeInput,
           {
-            ref: u,
-            unstyle: !0,
-            value: e[1],
-            clearable: !1,
+            ref: toTimeRef,
+            unstyle: true,
+            value: _value[1],
+            clearable: false,
             suffix: null,
-            onChange: (a) => r([e[0], a]),
-            ...f
+            onChange: (date) => setValue([_value[0], date]),
+            ...forwardProps
           }
         )
       ] })
@@ -98,6 +108,6 @@ const Z = (p) => {
   );
 };
 export {
-  Z as default
+  TimeInputRange as default
 };
 //# sourceMappingURL=TimeInputRange.js.map

package/dist/@ecme/components/ui/TimeInput/TimeInputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInputRange.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/TimeInputRange.tsx"],"sourcesContent":["import { useState, useRef } from 'react'\nimport useUniqueId from '../hooks/useUniqueId'\nimport useMergedRef from '../hooks/useMergeRef'\nimport useDidUpdate from '../hooks/useDidUpdate'\nimport TimeInput from './TimeInput'\nimport CloseButton from '../CloseButton'\nimport { HiOutlineClock } from 'react-icons/hi'\nimport Input from '../Input/Input'\nimport type { CommonProps, TypeAttributes } from '../@types/common'\nimport type { RefObject, Ref, ReactNode } from 'react'\n\ntype Value = [Date | null, Date | null]\n\nexport interface TimeInputRangeProps extends CommonProps {\n    amLabel?: string\n    amPmPlaceholder?: string\n    clearable?: boolean\n    defaultValue?: Value\n    disabled?: boolean\n    format?: '12' | '24'\n    id?: string\n    invalid?: boolean\n    name?: string\n    nextRef?: RefObject<HTMLInputElement | null>\n    onChange?: (value: Value) => void\n    pmLabel?: string\n    prefix?: string | ReactNode\n    ref?: Ref<HTMLInputElement>\n    showSeconds?: boolean\n    seperator?: string\n    size?: TypeAttributes.ControlSize\n    suffix?: string | ReactNode\n    timeFieldPlaceholder?: string\n    timeFieldClass?: string\n    value?: Value\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    field?: any\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    form?: any\n}\n\nconst TimeInputRange = (props: TimeInputRangeProps) => {\n    const {\n        amPmPlaceholder = 'am',\n        clearable = false,\n        className,\n        defaultValue = [null, null],\n        disabled = false,\n        format = '24',\n        id,\n        invalid,\n        name,\n        onChange,\n        prefix,\n        ref = null,\n        seperator = '~',\n        showSeconds = false,\n        size,\n        style,\n        suffix = <HiOutlineClock className=\"text-lg\" />,\n        timeFieldPlaceholder = '--',\n        value,\n        ...rest\n    } = props\n\n    const uuid = useUniqueId(id)\n\n    const fromTimeRef = useRef<HTMLInputElement>(undefined)\n    const toTimeRef = useRef<HTMLInputElement>(undefined)\n    const [_value, setValue] = useState(value ?? defaultValue)\n\n    useDidUpdate(() => {\n        typeof onChange === 'function' && onChange(_value)\n    }, [_value])\n\n    useDidUpdate(() => {\n        if (\n            value &&\n            (value[0]?.getTime() !== _value[0]?.getTime() ||\n                value[1]?.getTime() !== _value[1]?.getTime())\n        ) {\n            setValue(value)\n        }\n    }, [value])\n\n    const handleClear = () => {\n        setValue([null, null])\n        fromTimeRef.current?.focus()\n    }\n\n    const suffixSlot =\n        clearable && _value ? (\n            <CloseButton onClick={handleClear} />\n        ) : (\n            <>{suffix}</>\n        )\n\n    const forwardProps = {\n        amPmPlaceholder,\n        disabled,\n        format,\n        size,\n        timeFieldPlaceholder,\n        showSeconds,\n    }\n\n    return (\n        <Input\n            asElement=\"div\"\n            invalid={invalid}\n            size={size}\n            className={className}\n            style={style}\n            disabled={disabled}\n            suffix={suffixSlot}\n            prefix={prefix}\n            onClick={() => {\n                fromTimeRef.current?.focus()\n            }}\n            {...rest}\n        >\n            <div className=\"time-input-wrapper\">\n                <TimeInput\n                    ref={useMergedRef(\n                        fromTimeRef as Ref<HTMLInputElement>,\n                        ref,\n                    )}\n                    unstyle\n                    value={_value[0]}\n                    name={name}\n                    nextRef={toTimeRef as RefObject<HTMLInputElement | null>}\n                    id={uuid}\n                    clearable={false}\n                    suffix={null}\n                    onChange={(date) => setValue([date, _value[1]])}\n                    {...forwardProps}\n                />\n\n                <span className=\"time-input-separator\">{seperator}</span>\n\n                <TimeInput\n                    ref={toTimeRef as Ref<HTMLInputElement>}\n                    unstyle\n                    value={_value[1]}\n                    clearable={false}\n                    suffix={null}\n                    onChange={(date) => setValue([_value[0], date])}\n                    {...forwardProps}\n                />\n            </div>\n        </Input>\n    )\n}\n\nexport default TimeInputRange\n"],"names":["TimeInputRange","props","amPmPlaceholder","clearable","className","defaultValue","disabled","format","id","invalid","name","onChange","prefix","ref","seperator","showSeconds","size","style","suffix","jsx","HiOutlineClock","timeFieldPlaceholder","value","rest","uuid","useUniqueId","fromTimeRef","useRef","toTimeRef","_value","setValue","useState","useDidUpdate","suffixSlot","CloseButton","Fragment","forwardProps","Input","jsxs","TimeInput","useMergedRef","date"],"mappings":"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"}
+{"version":3,"file":"TimeInputRange.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/TimeInputRange.tsx"],"sourcesContent":["import { useState, useRef } from 'react'\nimport useUniqueId from '../hooks/useUniqueId'\nimport useMergedRef from '../hooks/useMergeRef'\nimport useDidUpdate from '../hooks/useDidUpdate'\nimport TimeInput from './TimeInput'\nimport CloseButton from '../CloseButton'\nimport { HiOutlineClock } from 'react-icons/hi'\nimport Input from '../Input/Input'\nimport type { CommonProps, TypeAttributes } from '../@types/common'\nimport type { RefObject, Ref, ReactNode } from 'react'\n\ntype Value = [Date | null, Date | null]\n\nexport interface TimeInputRangeProps extends CommonProps {\n    amLabel?: string\n    amPmPlaceholder?: string\n    clearable?: boolean\n    defaultValue?: Value\n    disabled?: boolean\n    format?: '12' | '24'\n    id?: string\n    invalid?: boolean\n    name?: string\n    nextRef?: RefObject<HTMLInputElement | null>\n    onChange?: (value: Value) => void\n    pmLabel?: string\n    prefix?: string | ReactNode\n    ref?: Ref<HTMLInputElement>\n    showSeconds?: boolean\n    seperator?: string\n    size?: TypeAttributes.ControlSize\n    suffix?: string | ReactNode\n    timeFieldPlaceholder?: string\n    timeFieldClass?: string\n    value?: Value\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    field?: any\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    form?: any\n}\n\nconst TimeInputRange = (props: TimeInputRangeProps) => {\n    const {\n        amPmPlaceholder = 'am',\n        clearable = false,\n        className,\n        defaultValue = [null, null],\n        disabled = false,\n        format = '24',\n        id,\n        invalid,\n        name,\n        onChange,\n        prefix,\n        ref = null,\n        seperator = '~',\n        showSeconds = false,\n        size,\n        style,\n        suffix = <HiOutlineClock className=\"text-lg\" />,\n        timeFieldPlaceholder = '--',\n        value,\n        ...rest\n    } = props\n\n    const uuid = useUniqueId(id)\n\n    const fromTimeRef = useRef<HTMLInputElement>(undefined)\n    const toTimeRef = useRef<HTMLInputElement>(undefined)\n    const [_value, setValue] = useState(value ?? defaultValue)\n\n    useDidUpdate(() => {\n        typeof onChange === 'function' && onChange(_value)\n    }, [_value])\n\n    useDidUpdate(() => {\n        if (\n            value &&\n            (value[0]?.getTime() !== _value[0]?.getTime() ||\n                value[1]?.getTime() !== _value[1]?.getTime())\n        ) {\n            setValue(value)\n        }\n    }, [value])\n\n    const handleClear = () => {\n        setValue([null, null])\n        fromTimeRef.current?.focus()\n    }\n\n    const suffixSlot =\n        clearable && _value ? (\n            <CloseButton onClick={handleClear} />\n        ) : (\n            <>{suffix}</>\n        )\n\n    const forwardProps = {\n        amPmPlaceholder,\n        disabled,\n        format,\n        size,\n        timeFieldPlaceholder,\n        showSeconds,\n    }\n\n    return (\n        <Input\n            asElement=\"div\"\n            invalid={invalid}\n            size={size}\n            className={className}\n            style={style}\n            disabled={disabled}\n            suffix={suffixSlot}\n            prefix={prefix}\n            onClick={() => {\n                fromTimeRef.current?.focus()\n            }}\n            {...rest}\n        >\n            <div className=\"time-input-wrapper\">\n                <TimeInput\n                    ref={useMergedRef(\n                        fromTimeRef as Ref<HTMLInputElement>,\n                        ref,\n                    )}\n                    unstyle\n                    value={_value[0]}\n                    name={name}\n                    nextRef={toTimeRef as RefObject<HTMLInputElement | null>}\n                    id={uuid}\n                    clearable={false}\n                    suffix={null}\n                    onChange={(date) => setValue([date, _value[1]])}\n                    {...forwardProps}\n                />\n\n                <span className=\"time-input-separator\">{seperator}</span>\n\n                <TimeInput\n                    ref={toTimeRef as Ref<HTMLInputElement>}\n                    unstyle\n                    value={_value[1]}\n                    clearable={false}\n                    suffix={null}\n                    onChange={(date) => setValue([_value[0], date])}\n                    {...forwardProps}\n                />\n            </div>\n        </Input>\n    )\n}\n\nexport default TimeInputRange\n"],"names":["useMergedRef"],"mappings":";;;;;;;;;;AAyCM,MAAA,iBAAiB,CAAC,UAA+B;AAC7C,QAAA;AAAA,IACF,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ;AAAA,IACA,eAAe,CAAC,MAAM,IAAI;AAAA,IAC1B,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,SAAS,oBAAC,gBAAe,EAAA,WAAU,UAAU,CAAA;AAAA,IAC7C,uBAAuB;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEE,QAAA,OAAO,YAAY,EAAE;AAErB,QAAA,cAAc,OAAyB,MAAS;AAChD,QAAA,YAAY,OAAyB,MAAS;AACpD,QAAM,CAAC,QAAQ,QAAQ,IAAI,SAAS,SAAS,YAAY;AAEzD,eAAa,MAAM;AACR,WAAA,aAAa,cAAc,SAAS,MAAM;AAAA,EAAA,GAClD,CAAC,MAAM,CAAC;AAEX,eAAa,MAAM;AAEX,QAAA,UACC,MAAM,CAAC,GAAG,cAAc,OAAO,CAAC,GAAG,aAChC,MAAM,CAAC,GAAG,QAAQ,MAAM,OAAO,CAAC,GAAG,YACzC;AACE,eAAS,KAAK;AAAA,IAAA;AAAA,EAClB,GACD,CAAC,KAAK,CAAC;AAEV,QAAM,cAAc,MAAM;AACb,aAAA,CAAC,MAAM,IAAI,CAAC;AACrB,gBAAY,SAAS,MAAM;AAAA,EAC/B;AAEM,QAAA,aACF,aAAa,SACT,oBAAC,eAAY,SAAS,YAAa,CAAA,IAEnC,oBAAA,UAAA,EAAG,UAAO,OAAA,CAAA;AAGlB,QAAM,eAAe;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAGI,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,SAAS,MAAM;AACX,oBAAY,SAAS,MAAM;AAAA,MAC/B;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAI,EAAA,WAAU,sBACX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKA;AAAAA,cACD;AAAA,cACA;AAAA,YACJ;AAAA,YACA,SAAO;AAAA,YACP,OAAO,OAAO,CAAC;AAAA,YACf;AAAA,YACA,SAAS;AAAA,YACT,IAAI;AAAA,YACJ,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,UAAU,CAAC,SAAS,SAAS,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC;AAAA,YAC7C,GAAG;AAAA,UAAA;AAAA,QACR;AAAA,QAEC,oBAAA,QAAA,EAAK,WAAU,wBAAwB,UAAU,WAAA;AAAA,QAElD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAK;AAAA,YACL,SAAO;AAAA,YACP,OAAO,OAAO,CAAC;AAAA,YACf,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,UAAU,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAAA,YAC7C,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACR,EACJ,CAAA;AAAA,IAAA;AAAA,EACJ;AAER;"}

package/dist/@ecme/components/ui/TimeInput/index.js

@@ -1,9 +1,9 @@
-import t from "./TimeInput.js";
-import e from "./TimeInputRange.js";
-const m = t;
-m.TimeInputRange = e;
+import TimeInput$1 from "./TimeInput.js";
+import TimeInputRange from "./TimeInputRange.js";
+const TimeInput = TimeInput$1;
+TimeInput.TimeInputRange = TimeInputRange;
 export {
-  m as TimeInput,
-  m as default
+  TimeInput,
+  TimeInput as default
 };
 //# sourceMappingURL=index.js.map

package/dist/@ecme/components/ui/TimeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/index.tsx"],"sourcesContent":["import type { ForwardRefExoticComponent, RefAttributes } from 'react'\nimport _TimeInput, { TimeInputProps } from './TimeInput'\nimport TimeInputRange from './TimeInputRange'\n\nexport type { TimeInputProps } from './TimeInput'\nexport type { TimeInputRangeProps } from './TimeInputRange'\n\ntype CompoundedComponent = ForwardRefExoticComponent<\n    TimeInputProps & RefAttributes<HTMLSpanElement>\n> & {\n    TimeInputRange: typeof TimeInputRange\n}\n\nconst TimeInput = _TimeInput as CompoundedComponent\n\nTimeInput.TimeInputRange = TimeInputRange\n\nexport { TimeInput }\n\nexport default TimeInput\n"],"names":["TimeInput","_TimeInput","TimeInputRange"],"mappings":";;AAaA,MAAMA,IAAYC;AAElBD,EAAU,iBAAiBE;"}
+{"version":3,"file":"index.js","sources":["../../../../../lib/@ecme/components/ui/TimeInput/index.tsx"],"sourcesContent":["import type { ForwardRefExoticComponent, RefAttributes } from 'react'\nimport _TimeInput, { TimeInputProps } from './TimeInput'\nimport TimeInputRange from './TimeInputRange'\n\nexport type { TimeInputProps } from './TimeInput'\nexport type { TimeInputRangeProps } from './TimeInputRange'\n\ntype CompoundedComponent = ForwardRefExoticComponent<\n    TimeInputProps & RefAttributes<HTMLSpanElement>\n> & {\n    TimeInputRange: typeof TimeInputRange\n}\n\nconst TimeInput = _TimeInput as CompoundedComponent\n\nTimeInput.TimeInputRange = TimeInputRange\n\nexport { TimeInput }\n\nexport default TimeInput\n"],"names":["_TimeInput"],"mappings":";;AAaA,MAAM,YAAYA;AAElB,UAAU,iBAAiB;"}

package/dist/@ecme/components/ui/TimeInput/utils/clamp.js

@@ -1,7 +1,7 @@
-function m(t, a, n) {
-  return Math.min(Math.max(t, a), n);
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
 }
 export {
-  m as clamp
+  clamp
 };
 //# sourceMappingURL=clamp.js.map

package/dist/@ecme/components/ui/TimeInput/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"clamp.js","sources":["../../../../../../lib/@ecme/components/ui/TimeInput/utils/clamp.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max)\n}\n"],"names":["clamp","value","min","max"],"mappings":"AAAgB,SAAAA,EAAMC,GAAeC,GAAaC,GAAa;AAC3D,SAAO,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG;AAC7C;"}
+{"version":3,"file":"clamp.js","sources":["../../../../../../lib/@ecme/components/ui/TimeInput/utils/clamp.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max)\n}\n"],"names":[],"mappings":"AAAgB,SAAA,MAAM,OAAe,KAAa,KAAa;AAC3D,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC7C;"}

package/dist/@ecme/components/ui/TimeInput/utils/createAmPmHandler.js

@@ -1,19 +1,25 @@
-function w({
-  amLabel: r,
-  pmLabel: t,
-  onChange: c,
-  nextRef: n
+function createAmPmHandler({
+  amLabel,
+  pmLabel,
+  onChange,
+  nextRef
 }) {
-  return (s, o) => {
-    const u = new RegExp(`(^(${r}|${t})?$)`), e = s.toLowerCase();
-    if (e === r || e === t) {
-      c(e), o && n?.current?.focus(), o && n?.current?.select();
+  return (value, triggerShift) => {
+    const testRegex = new RegExp(`(^(${amLabel}|${pmLabel})?$)`);
+    const valLower = value.toLowerCase();
+    if (valLower === amLabel || valLower === pmLabel) {
+      onChange(valLower);
+      triggerShift && nextRef?.current?.focus();
+      triggerShift && nextRef?.current?.select();
       return;
     }
-    u.test(e) && c(e);
+    if (!testRegex.test(valLower)) {
+      return;
+    }
+    onChange(valLower);
   };
 }
 export {
-  w as createAmPmHandler
+  createAmPmHandler
 };
 //# sourceMappingURL=createAmPmHandler.js.map

package/dist/@ecme/components/ui/TimeInput/utils/createAmPmHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"createAmPmHandler.js","sources":["../../../../../../lib/@ecme/components/ui/TimeInput/utils/createAmPmHandler.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\ntype CreateAmPmHandlerParams = {\n    amLabel: string\n    pmLabel: string\n    onChange(value: string): void\n    nextRef?: RefObject<HTMLInputElement | null>\n}\n\nexport function createAmPmHandler({\n    amLabel,\n    pmLabel,\n    onChange,\n    nextRef,\n}: CreateAmPmHandlerParams) {\n    return (value: string, triggerShift: boolean) => {\n        const testRegex = new RegExp(`(^(${amLabel}|${pmLabel})?$)`)\n        const valLower = value.toLowerCase()\n\n        if (valLower === amLabel || valLower === pmLabel) {\n            onChange(valLower)\n            triggerShift && nextRef?.current?.focus()\n            triggerShift && nextRef?.current?.select()\n            return\n        }\n\n        if (!testRegex.test(valLower)) {\n            return\n        }\n\n        onChange(valLower)\n    }\n}\n"],"names":["createAmPmHandler","amLabel","pmLabel","onChange","nextRef","value","triggerShift","testRegex","valLower"],"mappings":"AASO,SAASA,EAAkB;AAAA,EAC9B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACJ,GAA4B;AACjB,SAAA,CAACC,GAAeC,MAA0B;AAC7C,UAAMC,IAAY,IAAI,OAAO,MAAMN,CAAO,IAAIC,CAAO,MAAM,GACrDM,IAAWH,EAAM,YAAY;AAE/B,QAAAG,MAAaP,KAAWO,MAAaN,GAAS;AAC9C,MAAAC,EAASK,CAAQ,GACDF,KAAAF,GAAS,SAAS,MAAM,GACxBE,KAAAF,GAAS,SAAS,OAAO;AACzC;AAAA,IAAA;AAGJ,IAAKG,EAAU,KAAKC,CAAQ,KAI5BL,EAASK,CAAQ;AAAA,EACrB;AACJ;"}
+{"version":3,"file":"createAmPmHandler.js","sources":["../../../../../../lib/@ecme/components/ui/TimeInput/utils/createAmPmHandler.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\ntype CreateAmPmHandlerParams = {\n    amLabel: string\n    pmLabel: string\n    onChange(value: string): void\n    nextRef?: RefObject<HTMLInputElement | null>\n}\n\nexport function createAmPmHandler({\n    amLabel,\n    pmLabel,\n    onChange,\n    nextRef,\n}: CreateAmPmHandlerParams) {\n    return (value: string, triggerShift: boolean) => {\n        const testRegex = new RegExp(`(^(${amLabel}|${pmLabel})?$)`)\n        const valLower = value.toLowerCase()\n\n        if (valLower === amLabel || valLower === pmLabel) {\n            onChange(valLower)\n            triggerShift && nextRef?.current?.focus()\n            triggerShift && nextRef?.current?.select()\n            return\n        }\n\n        if (!testRegex.test(valLower)) {\n            return\n        }\n\n        onChange(valLower)\n    }\n}\n"],"names":[],"mappings":"AASO,SAAS,kBAAkB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAA4B;AACjB,SAAA,CAAC,OAAe,iBAA0B;AAC7C,UAAM,YAAY,IAAI,OAAO,MAAM,OAAO,IAAI,OAAO,MAAM;AACrD,UAAA,WAAW,MAAM,YAAY;AAE/B,QAAA,aAAa,WAAW,aAAa,SAAS;AAC9C,eAAS,QAAQ;AACD,sBAAA,SAAS,SAAS,MAAM;AACxB,sBAAA,SAAS,SAAS,OAAO;AACzC;AAAA,IAAA;AAGJ,QAAI,CAAC,UAAU,KAAK,QAAQ,GAAG;AAC3B;AAAA,IAAA;AAGJ,aAAS,QAAQ;AAAA,EACrB;AACJ;"}