@ctlyst.id/internal-ui 3.3.1 → 3.3.3

package/dist/index.js

@@ -4785,10 +4785,82 @@ var import_react81 = require("@chakra-ui/react");
 var import_react82 = require("@chakra-ui/react");
 
 // src/components/time-input/components/index.tsx
-var import_react83 = require("@chakra-ui/react");
+var import_react84 = require("@chakra-ui/react");
 var import_internal_icon10 = require("@ctlyst.id/internal-icon");
-var import_react84 = require("react");
-var import_react85 = require("timescape/react");
+var import_react85 = require("react");
+
+// src/components/time-input/components/integration.tsx
+var import_react83 = require("react");
+var import_timescape = require("timescape");
+var import_timescape2 = require("timescape");
+var useTimescape = (options = {}) => {
+  var _a;
+  const { date, onChangeDate, ...rest } = options;
+  const [manager] = (0, import_react83.useState)(() => new import_timescape.TimescapeManager(date, rest));
+  const onChangeDateRef = (0, import_react83.useRef)(onChangeDate);
+  (0, import_react83.useLayoutEffect)(() => {
+    onChangeDateRef.current = onChangeDate;
+  }, [onChangeDate]);
+  const [optionsState, update] = (0, import_react83.useState)(() => ({
+    date,
+    ...rest
+  }));
+  (0, import_react83.useEffect)(() => {
+    manager.resync();
+    return () => {
+      manager.remove();
+    };
+  }, [manager]);
+  (0, import_react83.useEffect)(() => {
+    return manager.on("changeDate", (nextDate) => {
+      var _a2;
+      (_a2 = onChangeDateRef.current) == null ? void 0 : _a2.call(onChangeDateRef, nextDate);
+      update((value) => ({ ...value, date: nextDate }));
+    });
+  }, [manager]);
+  const timestamp = (_a = optionsState.date) == null ? void 0 : _a.getTime();
+  (0, import_react83.useEffect)(() => {
+    manager.date = timestamp;
+    manager.minDate = optionsState.minDate;
+    manager.maxDate = optionsState.maxDate;
+    manager.hour12 = optionsState.hour12;
+    manager.wrapAround = optionsState.wrapAround;
+    manager.digits = optionsState.digits;
+    manager.snapToStep = optionsState.snapToStep;
+  }, [
+    manager,
+    timestamp,
+    optionsState.minDate,
+    optionsState.maxDate,
+    optionsState.hour12,
+    optionsState.wrapAround,
+    optionsState.digits,
+    optionsState.snapToStep
+  ]);
+  return {
+    _manager: manager,
+    getInputProps: (type, opts) => ({
+      _ref: (element) => {
+        if (!element) return;
+        manager.registerElement(element, type, opts == null ? void 0 : opts.autofocus);
+        if (opts == null ? void 0 : opts.ref) opts.ref.current = element;
+      },
+      get ref() {
+        return this._ref;
+      },
+      set ref(value) {
+        this._ref = value;
+      }
+    }),
+    getRootProps: () => ({
+      ref: (element) => element && manager.registerRoot(element)
+    }),
+    options: optionsState,
+    update
+  };
+};
+
+// src/components/time-input/components/index.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Time = class {
   constructor(hours, minutes, seconds) {
@@ -4803,9 +4875,9 @@ var Time = class {
     return `${this.hours}:${this.minutes}:${this.seconds}`;
   }
 };
-var InputTimeArea = (0, import_react83.forwardRef)((props, ref) => {
+var InputTimeArea = (0, import_react84.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    import_react83.Input,
+    import_react84.Input,
     {
       _focusWithin: {
         bg: "neutral.300"
@@ -4821,7 +4893,7 @@ var InputTimeArea = (0, import_react83.forwardRef)((props, ref) => {
     }
   );
 });
-var TimeInput2 = (0, import_react83.forwardRef)(
+var TimeInput2 = (0, import_react84.forwardRef)(
   ({
     config: config2,
     label,
@@ -4841,11 +4913,11 @@ var TimeInput2 = (0, import_react83.forwardRef)(
     defaultDate.setHours(0, 0, 0, 0);
     const date = dateVal ? new Date(dateVal) : defaultDate;
     const timeValue = new Time();
-    const { getRootProps, getInputProps, options, update, _manager } = (0, import_react85.useTimescape)({
+    const { getRootProps, getInputProps, options, update, _manager } = useTimescape({
       date,
       ...config2
     });
-    (0, import_react84.useEffect)(() => {
+    (0, import_react85.useEffect)(() => {
       var _a, _b, _c, _d, _e, _f;
       timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
       timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
@@ -4854,14 +4926,14 @@ var TimeInput2 = (0, import_react83.forwardRef)(
         onChangeTime(timeValue);
       }
     }, [options.date]);
-    (0, import_react84.useImperativeHandle)(ref, () => ({
+    (0, import_react85.useImperativeHandle)(ref, () => ({
       focus() {
         _manager.focusField("hours");
       }
     }));
     const rootProps = getRootProps();
     const hoursProps = getInputProps("hours");
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react83.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       field_default,
       {
         isError,
@@ -4871,7 +4943,7 @@ var TimeInput2 = (0, import_react83.forwardRef)(
         isDisabled,
         isSuccess,
         children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-          import_react83.InputGroup,
+          import_react84.InputGroup,
           {
             borderRadius: "sm",
             backgroundColor: isDisabled ? "neutral.300" : "white.high",
@@ -4879,7 +4951,7 @@ var TimeInput2 = (0, import_react83.forwardRef)(
             alignItems: "center",
             gap: 3,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react83.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
                 /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
                 /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
@@ -4887,7 +4959,7 @@ var TimeInput2 = (0, import_react83.forwardRef)(
                   /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
                   /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
                 ] }),
-                options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { ...getInputProps("am/pm") })
+                options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
               addOnRight