sellmate-design-system-react 0.6.0 → 0.7.0

package/dist/components/STimeRangePicker/STimeRangePicker.cjs

@@ -3280,6 +3280,7 @@ var SField = react.forwardRef(function SField2({
   disabled = false,
   readOnly = false,
   width,
+  minWidth,
   multiline = false,
   borderless = false,
   children,
@@ -3376,6 +3377,7 @@ var SField = react.forwardRef(function SField2({
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
                 ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
+                "minWidth": cssLen(minWidth),
                 "width": cssLen(width),
                 "borderRadius": s.radius,
                 "background": bgColor,
@@ -3489,6 +3491,11 @@ function formatTimeRangeDisplay(value, type) {
   if (value == null || value[0] === "" || value[1] === "") return "";
   return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
 }
+var TIME_RANGE_SELECTOR_WIDTH = 345;
+var MIDDAY_FIELD_MIN_WIDTH = {
+  sm: 178,
+  md: 216
+};
 function RangeTimeSelector({
   value,
   useMeridiem,
@@ -3778,7 +3785,9 @@ function STimeRangePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
+  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const [popoverAlignOffset, setPopoverAlignOffset] = react.useState(0);
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -3802,6 +3811,10 @@ function STimeRangePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
+    if (next) {
+      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
+      setPopoverAlignOffset(Math.max(0, (triggerWidth - TIME_RANGE_SELECTOR_WIDTH) / 2));
+    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -3828,19 +3841,32 @@ function STimeRangePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: effectiveUseMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
       disabled,
       className,
-      style: { minWidth: dims.fieldMinWidth, ...style },
+      style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
         /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            name,
-            disabled,
+            ref: triggerRef,
+            role: "button",
+            "aria-disabled": disabled,
+            tabIndex: disabled ? -1 : 0,
+            "data-name": name,
             onFocus: () => setFocused(true),
             onBlur: () => setFocused(false),
-            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                commitOpen(!open);
+              }
+            },
+            className: cn(
+              "flex h-full w-full items-center overflow-hidden bg-transparent outline-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
             style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -3886,6 +3912,7 @@ function STimeRangePicker({
             side: "bottom",
             align: "start",
             sideOffset: 4,
+            alignOffset: popoverAlignOffset,
             className: cn("z-50", FLOATING_SLIDE_ANIM),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RangeTimeSelector,