sellmate-design-system-react 0.1.7 → 0.1.8

package/dist/components/SDropdownButton/SDropdownButton.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, forwardRef, useState, useImperativeHandle, useContext } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect, useImperativeHandle, useContext } from 'react';
 import * as RDropdown from '@radix-ui/react-dropdown-menu';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -15,6 +15,26 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(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 = createContext(null);
 PortalContainerContext.Provider;
 function usePortalContainer() {
@@ -3034,6 +3054,25 @@ var SDropdownButton = forwardRef(
   }, ref) {
     const portalContainer = usePortalContainer();
     const [open, setOpen] = useState(false);
+    const splitWrapRef = useRef(null);
+    const splitToggleRef = useRef(null);
+    const [splitAlignOffset, setSplitAlignOffset] = useState(0);
+    const [splitWidth, setSplitWidth] = useState(0);
+    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]);
     useImperativeHandle(
       ref,
       () => ({
@@ -3071,7 +3110,13 @@ var SDropdownButton = 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__ */ jsxs(
           RDropdown.Item,
           {
@@ -3105,6 +3150,7 @@ var SDropdownButton = forwardRef(
           split ? /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: splitWrapRef,
               className: cn("inline-flex items-stretch", className),
               style: { minWidth: s.splitMinWidth, ...style },
               children: [
@@ -3127,6 +3173,7 @@ var SDropdownButton = forwardRef(
                 /* @__PURE__ */ jsx(RDropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                   "button",
                   {
+                    ref: splitToggleRef,
                     type: "button",
                     disabled,
                     "aria-label": "\uBA54\uB274 \uC5F4\uAE30",