@dmsi/wedgekit-react 0.0.1242 → 1.0.0

package/dist/components/Time.js

@@ -1,373 +0,0 @@
-import {
-  InputBase
-} from "../chunk-PABII472.js";
-import "../chunk-4UGMSWWA.js";
-import {
-  findDocumentRoot
-} from "../chunk-VXWSAIB5.js";
-import "../chunk-TBZ243DS.js";
-import "../chunk-5UH6QUFB.js";
-import {
-  Stack
-} from "../chunk-MVDGHWKO.js";
-import "../chunk-7MBRCM3M.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
-import {
-  typography
-} from "../chunk-SATCWGO7.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-
-// src/components/Time.tsx
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
-var Time = (_a) => {
-  var _b = _a, { onChange, format = "12h", id, testid } = _b, props = __objRest(_b, ["onChange", "format", "id", "testid"]);
-  const [showTimePicker, setShowTimePicker] = useState(false);
-  const [hasInteracted, setHasInteracted] = useState(false);
-  const inputRef = useRef(null);
-  const inputContainerRef = useRef(null);
-  const timeRef = useRef(null);
-  const [timePosition, setTimePosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0
-  });
-  const [hour, setHour] = useState(null);
-  const [minute, setMinute] = useState(null);
-  const [meridiem, setMeridiem] = useState(null);
-  const [inputValue, setInputValue] = useState("");
-  const is12HourFormat = format === "12h";
-  const formattedTime = hour && minute ? is12HourFormat ? meridiem ? `${hour}:${minute} ${meridiem}` : `${hour}:${minute}` : `${hour}:${minute}` : "";
-  const updatePosition = () => {
-    if (inputContainerRef.current) {
-      const rect = inputContainerRef.current.getBoundingClientRect();
-      setTimePosition({
-        top: rect.bottom + window.scrollY + 6,
-        left: rect.left + window.scrollX,
-        width: rect.width
-      });
-    }
-  };
-  useEffect(() => {
-    if (showTimePicker) {
-      updatePosition();
-    }
-  }, [showTimePicker, is12HourFormat]);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (inputRef.current && timeRef.current && !inputRef.current.contains(event.target) && !timeRef.current.contains(event.target)) {
-        setShowTimePicker(false);
-      }
-    };
-    if (showTimePicker) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showTimePicker, is12HourFormat]);
-  useEffect(() => {
-    if (formattedTime && hasInteracted) {
-      setInputValue(formattedTime);
-      onChange == null ? void 0 : onChange({
-        target: { value: formattedTime }
-      });
-    }
-  }, [formattedTime, hasInteracted, onChange]);
-  const handleFocus = () => {
-    if (!props.disabled && !props.readOnly) {
-      setHasInteracted(true);
-      setShowTimePicker(true);
-      if (is12HourFormat && meridiem === null) {
-        setMeridiem("AM");
-      }
-    }
-  };
-  const handleSelect = (type, value) => {
-    if (type === "hour") setHour(value);
-    if (type === "minute") setMinute(value);
-    if (type === "meridiem") setMeridiem(value);
-    setTimeout(() => {
-      const allSet = (type === "hour" ? value : hour) && (type === "minute" ? value : minute) && (is12HourFormat ? type === "meridiem" ? value : meridiem : true);
-      if (allSet) {
-        setShowTimePicker(false);
-      }
-    }, 100);
-  };
-  useEffect(() => {
-    if (!showTimePicker && formattedTime) {
-      setInputValue(formattedTime);
-    }
-  }, [showTimePicker, formattedTime]);
-  const handleInputChange = (e) => {
-    const value = e.target.value.toUpperCase().replace(/[^0-9:APM ]/gi, "").trim();
-    setInputValue(value);
-    if (value === "") {
-      setHour(null);
-      setMinute(null);
-      setMeridiem(null);
-      setShowTimePicker(true);
-    }
-    const match = value.match(
-      is12HourFormat ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/ : /^(\d{1,2}):(\d{2})$/
-    );
-    if (match) {
-      const [, hRaw, mRaw, mer] = match;
-      const h = parseInt(hRaw, 10);
-      const m = parseInt(mRaw, 10);
-      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
-        let hStr;
-        const mStr = m.toString().padStart(2, "0");
-        let meridiemValue = mer;
-        if (is12HourFormat) {
-          hStr = (h % 12 || 12).toString().padStart(2, "0");
-          if (h > 12) {
-            meridiemValue = "PM";
-          }
-          setHour(hStr);
-          setMinute(mStr);
-          if (meridiemValue) {
-            setMeridiem(meridiemValue);
-          }
-        } else {
-          hStr = h.toString().padStart(2, "0");
-          setHour(hStr);
-          setMinute(mStr);
-        }
-      }
-    }
-    onChange == null ? void 0 : onChange(e);
-  };
-  const selectedRefs = {
-    hour: useRef(null),
-    minute: useRef(null),
-    meridiem: useRef(null)
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      setShowTimePicker(false);
-      return;
-    }
-    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-    e.preventDefault();
-    let h;
-    let m;
-    let mer;
-    if (hour === null || minute === null || is12HourFormat && meridiem === null) {
-      const now = /* @__PURE__ */ new Date();
-      h = now.getHours();
-      m = Math.round(now.getMinutes() / 5) * 5;
-      if (m === 60) {
-        m = 0;
-        h += 1;
-      }
-      if (is12HourFormat) {
-        mer = h >= 12 ? "PM" : "AM";
-        h = h % 12 || 12;
-      } else {
-        mer = "AM";
-      }
-    } else {
-      h = parseInt(hour, 10);
-      m = parseInt(minute, 10);
-      mer = meridiem || "AM";
-    }
-    const step = 5;
-    const remainder = m % step;
-    m += e.key === "ArrowDown" ? remainder === 0 ? step : step - remainder : -(remainder === 0 ? step : remainder);
-    if (m >= 60) {
-      m -= 60;
-      h += 1;
-    } else if (m < 0) {
-      m += 60;
-      h -= 1;
-    }
-    if (is12HourFormat) {
-      if (h > 12) {
-        h = 1;
-        mer = mer === "AM" ? "PM" : "AM";
-      } else if (h <= 0) {
-        h = 12;
-        mer = mer === "AM" ? "PM" : "AM";
-      }
-    } else {
-      h = (h + 24) % 24;
-    }
-    setHour(h.toString().padStart(2, "0"));
-    setMinute(m.toString().padStart(2, "0"));
-    if (is12HourFormat) setMeridiem(mer);
-  };
-  useEffect(() => {
-    if (showTimePicker) {
-      setTimeout(() => {
-        var _a2, _b2, _c;
-        (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
-          block: "nearest",
-          behavior: "instant"
-        });
-        (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
-          block: "nearest",
-          behavior: "instant"
-        });
-        if (is12HourFormat) {
-          (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
-            block: "nearest",
-            behavior: "instant"
-          });
-        }
-      }, 0);
-    }
-  }, [
-    showTimePicker,
-    is12HourFormat,
-    selectedRefs.hour,
-    selectedRefs.minute,
-    selectedRefs.meridiem
-  ]);
-  const renderOptions = (items, type) => items.map((val) => {
-    const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
-    return /* @__PURE__ */ jsx(
-      TimeCell,
-      {
-        id: id ? `${id}-${type}-${val}` : void 0,
-        testid: testid ? `${testid}-${type}-${val}` : void 0,
-        selected: isSelected,
-        ref: isSelected ? (el) => {
-          selectedRefs[type].current = el;
-        } : null,
-        onClick: () => handleSelect(type, val),
-        className: clsx("!size-10 cursor-pointer", typography.caption),
-        children: val
-      },
-      val
-    );
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "relative max-w-38", children: [
-    /* @__PURE__ */ jsx(
-      InputBase,
-      __spreadProps(__spreadValues({}, props), {
-        id,
-        testid,
-        ref: inputRef,
-        inputContainerRef,
-        value: inputValue,
-        placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
-        after: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "schedule" }) }),
-        onFocus: handleFocus,
-        caption: props.caption,
-        onChange: handleInputChange,
-        onKeyDown: handleKeyDown,
-        type: "text"
-      })
-    ),
-    showTimePicker && createPortal(
-      /* @__PURE__ */ jsx(
-        Stack,
-        {
-          id: id ? `${id}-timepicker` : void 0,
-          elevation: 4,
-          height: 240,
-          position: "absolute",
-          backgroundColor: "background-grouped-primary-normal",
-          overflowX: "hidden",
-          overflowY: "hidden",
-          zIndex: 50,
-          top: timePosition.top,
-          left: timePosition.left,
-          minWidth: timePosition.width,
-          maxWidth: 0,
-          rounded: true,
-          children: /* @__PURE__ */ jsxs("div", { ref: timeRef, className: "px-4 flex h-60", children: [
-            /* @__PURE__ */ jsx("div", { className: clsx(timePickerScrollableStyle), children: renderOptions(
-              Array.from(
-                { length: is12HourFormat ? 12 : 24 },
-                (_, i) => (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0")
-              ),
-              "hour"
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: clsx(timePickerScrollableStyle), children: renderOptions(
-              Array.from(
-                { length: 12 },
-                (_, i) => (i * 5).toString().padStart(2, "0")
-              ),
-              "minute"
-            ) }),
-            is12HourFormat && /* @__PURE__ */ jsx("div", { className: "py-4", children: renderOptions(["AM", "PM"], "meridiem") })
-          ] })
-        }
-      ),
-      findDocumentRoot(timeRef.current)
-    )
-  ] });
-};
-function TimeCell(_a) {
-  var _b = _a, {
-    id,
-    testid,
-    selected = false,
-    start = false,
-    intermediate = false,
-    end = false,
-    today = false,
-    disabled = false,
-    onClick,
-    onHover,
-    onKeyDown,
-    children,
-    className,
-    ref
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "selected",
-    "start",
-    "intermediate",
-    "end",
-    "today",
-    "disabled",
-    "onClick",
-    "onHover",
-    "onKeyDown",
-    "children",
-    "className",
-    "ref"
-  ]);
-  const isDefault = !selected && !start && !intermediate && !end && !today;
-  const isToday = today && !selected && !start && !intermediate && !end;
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      onPointerOver: onHover,
-      onClick,
-      onKeyDown,
-      disabled,
-      ref,
-      className: clsx(
-        "w-full h-full aspect-square flex items-center justify-center ",
-        isDefault && "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
-        isToday && "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
-        selected && "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
-        start && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
-        end && "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
-        intermediate && "bg-action-100 border-y border-action-400",
-        className
-      )
-    }, props), {
-      children
-    })
-  );
-}
-export {
-  Time
-};