sellmate-design-system-react 0.1.7 → 0.1.8

package/dist/components/SDropdownButton/SDropdownButton.cjs

@@ -37,6 +37,26 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
+
+// src/lib/floating-anim.ts
+var FLOATING_SLIDE_ANIM = [
+  "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
+  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
+  "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
+  "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
+].join(" ");
 var PortalContainerContext = react.createContext(null);
 PortalContainerContext.Provider;
 function usePortalContainer() {
@@ -3056,6 +3076,25 @@ var SDropdownButton = react.forwardRef(
   }, ref) {
     const portalContainer = usePortalContainer();
     const [open, setOpen] = react.useState(false);
+    const splitWrapRef = react.useRef(null);
+    const splitToggleRef = react.useRef(null);
+    const [splitAlignOffset, setSplitAlignOffset] = react.useState(0);
+    const [splitWidth, setSplitWidth] = react.useState(0);
+    react.useEffect(() => {
+      if (!split) return;
+      const update = () => {
+        if (splitWrapRef.current && splitToggleRef.current) {
+          setSplitAlignOffset(
+            -(splitWrapRef.current.offsetWidth - splitToggleRef.current.offsetWidth)
+          );
+          setSplitWidth(splitWrapRef.current.offsetWidth);
+        }
+      };
+      update();
+      const ro = new ResizeObserver(update);
+      ro.observe(splitWrapRef.current);
+      return () => ro.disconnect();
+    }, [split, label]);
     react.useImperativeHandle(
       ref,
       () => ({
@@ -3093,7 +3132,13 @@ var SDropdownButton = react.forwardRef(
       {
         sideOffset: 4,
         align: "start",
-        className: "z-50 min-w-[var(--radix-dropdown-menu-trigger-width)] overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-normal-sm",
+        alignOffset: split ? splitAlignOffset : 0,
+        className: cn(
+          "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-normal-sm",
+          !split && "min-w-[var(--radix-dropdown-menu-trigger-width)]",
+          FLOATING_SLIDE_ANIM
+        ),
+        style: split ? { minWidth: splitWidth } : void 0,
         children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
           RDropdown__namespace.Item,
           {
@@ -3127,6 +3172,7 @@ var SDropdownButton = react.forwardRef(
           split ? /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
+              ref: splitWrapRef,
               className: cn("inline-flex items-stretch", className),
               style: { minWidth: s.splitMinWidth, ...style },
               children: [
@@ -3149,6 +3195,7 @@ var SDropdownButton = react.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(RDropdown__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
+                    ref: splitToggleRef,
                     type: "button",
                     disabled,
                     "aria-label": "\uBA54\uB274 \uC5F4\uAE30",