@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.16

package/dist-cjs/dialog/useDialog.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@floating-ui/react');
+var core = require('@salt-ds/core');
+
+function useDialog(props) {
+  const { open, onOpenChange } = props;
+  const { context, floating } = core.useFloatingUI({
+    open,
+    onOpenChange
+  });
+  const click = react.useClick(context);
+  const role = react.useRole(context);
+  const dismiss = react.useDismiss(context);
+  const { getFloatingProps, getReferenceProps } = react.useInteractions([
+    role,
+    dismiss,
+    click
+  ]);
+  return {
+    getFloatingProps,
+    getReferenceProps,
+    floating,
+    context
+  };
+}
+
+exports.useDialog = useDialog;
+//# sourceMappingURL=useDialog.js.map

package/dist-cjs/dialog/useDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.js","sources":["../src/dialog/useDialog.ts"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"@salt-ds/core\";\n\nexport type UseDialogProps = Partial<\n  Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDialog(props: UseDialogProps) {\n  const { open, onOpenChange } = props;\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const click = useClick(context);\n  const role = useRole(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps, getReferenceProps } = useInteractions([\n    role,\n    dismiss,\n    click,\n  ]);\n\n  return {\n    getFloatingProps,\n    getReferenceProps,\n    floating,\n    context,\n  };\n}\n"],"names":["useFloatingUI","useClick","useRole","useDismiss","useInteractions"],"mappings":";;;;;;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAIA,kBAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQC,eAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAOC,cAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAUC,iBAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-cjs/drawer/Drawer.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Drawer component (root component if Scrim is disabled) */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  position: fixed;\n  top: 0;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Animation styles applied when the Scrim mounts */\n.saltScrim.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Animation styles applied when the Scrim unmounts */\n.saltScrim.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" or position = \"left\" */\n.saltDrawer-right,\n.saltDrawer-left {\n  width: calc(10 * var(--salt-size-base));\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  position: fixed;\n  top: 0;\n}\n\n.saltDrawer-overlay {\n  background: var(--salt-overlayable-background);\n  z-index: var(--salt-zIndex-drawer);\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" or position = \"left\" */\n.saltDrawer-right,\n.saltDrawer-left {\n  width: calc(10 * var(--salt-size-base));\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Drawer.css.js.map

package/dist-cjs/drawer/Drawer.js

@@ -5,25 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Scrim = require('../scrim/Scrim.js');
-require('../scrim/ScrimContext.js');
+var react = require('@floating-ui/react');
 var core = require('@salt-ds/core');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var useDrawer = require('./useDrawer.js');
 var Drawer$1 = require('./Drawer.css.js');
 
 const DRAWER_POSITIONS = ["left", "top", "right", "bottom"];
 const withBaseName = core.makePrefixer("saltDrawer");
-const ariaAttributes = { role: "dialog", "aria-modal": true };
 const Drawer = React.forwardRef(function Drawer2(props, ref) {
   const {
     children,
     className,
-    disableScrim = false,
     position = "left",
-    disableAnimations = false,
-    scrimProps,
-    isOpen = true,
+    open = true,
+    onOpenChange,
     variant = "primary",
     ...rest
   } = props;
@@ -34,47 +31,44 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
     window: targetWindow
   });
   const [showComponent, setShowComponent] = React.useState(false);
-  const [isAnimating, setIsAnimating] = React.useState(false);
+  const { floating, context } = useDrawer.useDrawer({
+    open,
+    onOpenChange
+  });
+  const floatingRef = core.useForkRef(floating, ref);
   React.useEffect(() => {
-    if (!isOpen && disableAnimations || !isOpen && !isAnimating) {
-      setShowComponent(false);
-    }
-    if (isOpen && !showComponent) {
+    if (open && !showComponent) {
       setShowComponent(true);
     }
-  }, [isOpen, showComponent, disableAnimations, isAnimating]);
-  const enterAnimation = !disableAnimations && isOpen;
-  const exitAnimation = !disableAnimations && !isOpen;
-  const drawer = showComponent ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ref,
-    className: clsx.clsx(
-      withBaseName(),
-      withBaseName(position),
-      {
-        [withBaseName("enterAnimation")]: enterAnimation,
-        [withBaseName("exitAnimation")]: exitAnimation,
-        [withBaseName(variant)]: variant
-      },
-      className
-    ),
-    onAnimationStart: () => setIsAnimating(true),
-    onAnimationEnd: () => {
-      if (!isOpen && showComponent) {
-        setShowComponent(false);
-      }
-    },
-    ...disableScrim && ariaAttributes,
-    ...rest,
-    children
-  }) : null;
-  return disableScrim ? drawer : /* @__PURE__ */ jsxRuntime.jsx(Scrim.Scrim, {
-    open: showComponent,
-    className: clsx.clsx({
-      [withBaseName("enterAnimation")]: enterAnimation,
-      [withBaseName("exitAnimation")]: exitAnimation
-    }),
-    ...scrimProps,
-    children: drawer
+  }, [open, showComponent]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
+    children: showComponent && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
+      className: withBaseName("overlay"),
+      lockScroll: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, {
+        context,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ref: floatingRef,
+          className: clsx.clsx(
+            withBaseName(),
+            withBaseName(position),
+            {
+              [withBaseName("enterAnimation")]: open,
+              [withBaseName("exitAnimation")]: !open,
+              [withBaseName(variant)]: variant
+            },
+            className
+          ),
+          onAnimationEnd: () => {
+            if (!open && showComponent) {
+              setShowComponent(false);
+            }
+          },
+          ...rest,
+          children
+        })
+      })
+    })
   });
 });
 

package/dist-cjs/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = typeof DRAWER_POSITIONS[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the drawer position within the screen.\n   */\n  position?: DrawerPositions;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    disableScrim = false,\n    position = \"left\",\n    disableAnimations = false,\n    scrimProps,\n    isOpen = true,\n    variant = \"primary\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  useEffect(() => {\n    if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n      setShowComponent(false);\n    }\n\n    if (isOpen && !showComponent) {\n      setShowComponent(true);\n    }\n  }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n  const enterAnimation = !disableAnimations && isOpen;\n\n  const exitAnimation = !disableAnimations && !isOpen;\n\n  const drawer = showComponent ? (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(position),\n        {\n          [withBaseName(\"enterAnimation\")]: enterAnimation,\n          [withBaseName(\"exitAnimation\")]: exitAnimation,\n          [withBaseName(variant)]: variant,\n        },\n        className\n      )}\n      onAnimationStart={() => setIsAnimating(true)}\n      onAnimationEnd={() => {\n        if (!isOpen && showComponent) {\n          setShowComponent(false);\n        }\n      }}\n      {...(disableScrim && ariaAttributes)}\n      {...rest}\n    >\n      {children}\n    </div>\n  ) : null;\n\n  return disableScrim ? (\n    drawer\n  ) : (\n    <Scrim\n      open={showComponent}\n      className={clsx({\n        [withBaseName(\"enterAnimation\")]: enterAnimation,\n        [withBaseName(\"exitAnimation\")]: exitAnimation,\n      })}\n      {...scrimProps}\n    >\n      {drawer}\n    </Scrim>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useEffect","jsx","clsx","Scrim"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = typeof DRAWER_POSITIONS[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Defines the drawer position within the screen.\n   */\n  position?: DrawerPositions;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    position = \"left\",\n    open = true,\n    onOpenChange,\n    variant = \"primary\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { floating, context } = useDrawer({\n    open,\n    onOpenChange,\n  });\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n  }, [open, showComponent]);\n\n  return (\n    <FloatingPortal>\n      {showComponent && (\n        <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n          <FloatingFocusManager context={context}>\n            <div\n              ref={floatingRef}\n              className={clsx(\n                withBaseName(),\n                withBaseName(position),\n                {\n                  [withBaseName(\"enterAnimation\")]: open,\n                  [withBaseName(\"exitAnimation\")]: !open,\n                  [withBaseName(variant)]: variant,\n                },\n                className\n              )}\n              onAnimationEnd={() => {\n                if (!open && showComponent) {\n                  setShowComponent(false);\n                }\n              }}\n              {...rest}\n            >\n              {children}\n            </div>\n          </FloatingFocusManager>\n        </FloatingOverlay>\n      )}\n    </FloatingPortal>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useDrawer","useForkRef","useEffect","jsx","FloatingPortal","FloatingOverlay","FloatingFocusManager","clsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAIC,mBAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IACE,2CACED,cAAA,CAAAE,qBAAA,EAAA;AAAA,MAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MAAG,UAAU,EAAA,IAAA;AAAA,MAC7D,QAAC,kBAAAF,cAAA,CAAAG,0BAAA,EAAA;AAAA,QAAqB,OAAA;AAAA,QACpB,QAAC,kBAAAH,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,GAAK,EAAA,WAAA;AAAA,UACL,SAAW,EAAAI,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,aAAa,QAAQ,CAAA;AAAA,YACrB;AAAA,cACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,cAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,cAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,aAC3B;AAAA,YACA,SAAA;AAAA,WACF;AAAA,UACA,gBAAgB,MAAM;AACpB,YAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,cAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,aACxB;AAAA,WACF;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;;"}

package/dist-cjs/drawer/useDrawer.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@floating-ui/react');
+var core = require('@salt-ds/core');
+
+function useDrawer(props) {
+  const { open, onOpenChange } = props;
+  const { context, floating } = core.useFloatingUI({
+    open,
+    onOpenChange
+  });
+  const click = react.useClick(context);
+  const role = react.useRole(context);
+  const dismiss = react.useDismiss(context);
+  const { getFloatingProps, getReferenceProps } = react.useInteractions([
+    role,
+    dismiss,
+    click
+  ]);
+  return {
+    getFloatingProps,
+    getReferenceProps,
+    floating,
+    context
+  };
+}
+
+exports.useDrawer = useDrawer;
+//# sourceMappingURL=useDrawer.js.map

package/dist-cjs/drawer/useDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawer.js","sources":["../src/drawer/useDrawer.ts"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"@salt-ds/core\";\n\nexport type UseDrawerProps = Partial<\n  Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDrawer(props: UseDrawerProps) {\n  const { open, onOpenChange } = props;\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const click = useClick(context);\n  const role = useRole(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps, getReferenceProps } = useInteractions([\n    role,\n    dismiss,\n    click,\n  ]);\n\n  return {\n    getFloatingProps,\n    getReferenceProps,\n    floating,\n    context,\n  };\n}\n"],"names":["useFloatingUI","useClick","useRole","useDismiss","useInteractions"],"mappings":";;;;;;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAIA,kBAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQC,eAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAOC,cAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAUC,iBAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-cjs/dropdown-next/DropdownNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDropdownNext-button {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n  color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDropdownNext-height, var(--salt-size-base));\n  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltDropdownNext-minWidth, 160px);\n  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  border: none;\n  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n  justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: var(--salt-spacing-100);\n  user-select: text;\n}\n\n.saltDropdownNext-list {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-selectable-cursor-disabled);\n  background: var(--dropdownNext-background-disabled);\n  color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled));\n  outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-editable-cursor-readonly);\n  background: var(--dropdownNext-background-readonly);\n  /* no padding-right when there's no dropdown button icon */\n  padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n  color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n  --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DropdownNext.css.js.map

package/dist-cjs/dropdown-next/DropdownNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/dropdown-next/DropdownNext.js

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var ListNext = require('../list-next/ListNext.js');
+require('../list-next/ListItemNext.js');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var React = require('react');
+var window = require('@salt-ds/window');
+var DropdownNext$1 = require('./DropdownNext.css.js');
+var styles = require('@salt-ds/styles');
+var react = require('@floating-ui/react');
+var useDropdownNext = require('./useDropdownNext.js');
+
+const withBaseName = core.makePrefixer("saltDropdownNext");
+const DropdownNext = React.forwardRef(function DropdownNext2(props, ref) {
+  const {
+    className,
+    disabled,
+    variant = "primary",
+    id: dropdownIdProp,
+    defaultSelected,
+    readOnly,
+    source,
+    placement = "bottom",
+    open: openControlProp,
+    selected: selectedControlProp,
+    highlightedItem: highlightedItemControlProp,
+    onFocus,
+    onKeyDown,
+    onBlur,
+    onMouseOver,
+    onMouseDown,
+    listRef: listRefProp,
+    ListProps,
+    ...restProps
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-dropdown-next",
+    css: DropdownNext$1,
+    window: targetWindow
+  });
+  const listId = core.useId(ListProps == null ? void 0 : ListProps.id);
+  const dropdownId = core.useId(dropdownIdProp);
+  const listRef = React.useRef(null);
+  const setListRef = core.useForkRef(listRefProp, listRef);
+  const listProps = {
+    defaultSelected,
+    disabled,
+    ref: listRef,
+    id: listId,
+    selected: selectedControlProp,
+    highlightedItem: highlightedItemControlProp
+  };
+  const {
+    handlers,
+    activeDescendant,
+    selectedItem,
+    highlightedItem,
+    getListItems,
+    portalProps
+  } = useDropdownNext.useDropdownNext({
+    listProps,
+    placement,
+    openControlProp
+  });
+  const { open, floating, reference, getDropdownNextProps } = portalProps;
+  const {
+    focusHandler,
+    keyDownHandler,
+    blurHandler,
+    mouseOverHandler,
+    mouseDownHandler
+  } = handlers;
+  const triggerRef = core.useForkRef(ref, reference);
+  const getIcon = () => {
+    if (readOnly)
+      return;
+    const iconClassName = clsx.clsx(withBaseName("icon"), {
+      [withBaseName("disabled")]: disabled
+    });
+    return open ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
+      className: iconClassName
+    }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {
+      className: iconClassName
+    });
+  };
+  const handleFocus = (event) => {
+    if (disabled)
+      return;
+    focusHandler(event);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled || readOnly)
+      return;
+    keyDownHandler(event);
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  const handleBlur = (event) => {
+    blurHandler();
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleMouseOver = (event) => {
+    mouseOverHandler();
+    onMouseOver == null ? void 0 : onMouseOver(event);
+  };
+  const handleMouseDown = (event) => {
+    if (disabled || readOnly)
+      return;
+    mouseDownHandler();
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: clsx.clsx(withBaseName()),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", {
+        id: dropdownId,
+        disabled,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onMouseOver: handleMouseOver,
+        onMouseDown: handleMouseDown,
+        onBlur: handleBlur,
+        value: selectedItem,
+        className: clsx.clsx(
+          withBaseName("button"),
+          withBaseName(variant),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly
+          },
+          className
+        ),
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-activedescendant": activeDescendant,
+        tabIndex: disabled ? -1 : 0,
+        "aria-owns": listId,
+        "aria-controls": listId,
+        "aria-disabled": disabled,
+        ...restProps,
+        ref: triggerRef,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: clsx.clsx(withBaseName("buttonText")),
+            children: selectedItem
+          }),
+          getIcon()
+        ]
+      }),
+      open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, {
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            ref: floating,
+            ...getDropdownNextProps(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ListNext.ListNext, {
+              id: listId,
+              className: clsx.clsx(withBaseName("list"), ListProps == null ? void 0 : ListProps.className),
+              disableFocus: true,
+              disabled: disabled || (ListProps == null ? void 0 : ListProps.disabled),
+              selected: selectedItem,
+              highlightedItem,
+              ...ListProps,
+              ref: setListRef,
+              children: getListItems(source)
+            })
+          })
+        })
+      })
+    ]
+  });
+});
+
+exports.DropdownNext = DropdownNext;
+//# sourceMappingURL=DropdownNext.js.map

package/dist-cjs/dropdown-next/DropdownNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n  makePrefixer,\n  useId,\n  useForkRef,\n  UseFloatingUIProps,\n  SaltProvider,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  useRef,\n  forwardRef,\n  HTMLAttributes,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  Ref,\n  ForwardedRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { FloatingPortal, Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    HTMLAttributes<HTMLButtonElement> {\n  /**\n   * If `true`, dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Initially selected value for the dropdown, for use only in uncontrolled component.\n   */\n  defaultSelected?: string;\n  /**\n   * List of options when using a dropdown.\n   */\n  source: string[];\n  /**\n   * If `true`, dropdown is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Background styling variant. Defaults to `primary` .\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Placement of dropdown list. Defaults to `bottom` .\n   */\n  placement?: Placement;\n  /**\n   * Optional ref for the list component.\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * Additional props for dropdown list.\n   */\n  ListProps?: ListNextProps;\n  /* Status open or close for use in controlled component.  */\n  open?: boolean;\n  /* Selected prop for use in controlled component. */\n  selected?: string;\n  /* Highlighted item prop for use in controlled component. */\n  highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n  props: DropdownNextProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    className,\n    disabled,\n    variant = \"primary\",\n    id: dropdownIdProp,\n    defaultSelected,\n    readOnly,\n    source,\n    placement = \"bottom\",\n    open: openControlProp,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n    onFocus,\n    onKeyDown,\n    onBlur,\n    onMouseOver,\n    onMouseDown,\n    listRef: listRefProp,\n    ListProps,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-next\",\n    css: dropdownNextCss,\n    window: targetWindow,\n  });\n\n  const listId = useId(ListProps?.id);\n  const dropdownId = useId(dropdownIdProp);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    defaultSelected,\n    disabled,\n    ref: listRef,\n    id: listId,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n  };\n\n  const {\n    handlers,\n    activeDescendant,\n    selectedItem,\n    highlightedItem,\n    getListItems,\n    portalProps,\n  } = useDropdownNext({\n    listProps,\n    placement,\n    openControlProp,\n  });\n\n  const { open, floating, reference, getDropdownNextProps } = portalProps;\n  const {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseOverHandler,\n    mouseDownHandler,\n  } = handlers;\n\n  const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n\n  const getIcon = () => {\n    if (readOnly) return;\n\n    const iconClassName = clsx(withBaseName(\"icon\"), {\n      [withBaseName(\"disabled\")]: disabled,\n    });\n\n    return open ? (\n      <ChevronUpIcon className={iconClassName} />\n    ) : (\n      <ChevronDownIcon className={iconClassName} />\n    );\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    focusHandler(event);\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    keyDownHandler(event);\n    onKeyDown?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    blurHandler();\n    onBlur?.(event);\n  };\n\n  const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n    mouseOverHandler();\n    onMouseOver?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    mouseDownHandler();\n    onMouseDown?.(event);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <button\n        id={dropdownId}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onMouseOver={handleMouseOver}\n        onMouseDown={handleMouseDown}\n        onBlur={handleBlur}\n        value={selectedItem}\n        className={clsx(\n          withBaseName(\"button\"),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n          },\n          className\n        )}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-activedescendant={activeDescendant}\n        tabIndex={disabled ? -1 : 0}\n        aria-owns={listId}\n        aria-controls={listId}\n        aria-disabled={disabled}\n        {...restProps}\n        ref={triggerRef}\n      >\n        <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n        {getIcon()}\n      </button>\n      {open && (\n        <FloatingPortal>\n          <SaltProvider>\n            <div ref={floating} {...getDropdownNextProps()}>\n              <ListNext\n                id={listId}\n                className={clsx(withBaseName(\"list\"), ListProps?.className)}\n                disableFocus\n                disabled={disabled || ListProps?.disabled}\n                selected={selectedItem}\n                highlightedItem={highlightedItem}\n                {...ListProps}\n                ref={setListRef}\n              >\n                {getListItems(source)}\n              </ListNext>\n            </div>\n          </SaltProvider>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownNextCss","useId","useRef","useForkRef","useDropdownNext","clsx","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","FloatingPortal","SaltProvider","ListNext"],"mappings":"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"}

package/dist-cjs/dropdown-next/useDropdownNext.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var core = require('@salt-ds/core');
+require('../list-next/ListNext.js');
+var ListItemNext = require('../list-next/ListItemNext.js');
+var useList = require('../list-next/useList.js');
+
+const useDropdownNext = ({
+  listProps,
+  openControlProp,
+  onOpenChange: onOpenChangeProp,
+  placement: placementProp
+}) => {
+  const [open, setOpen] = core.useControlled({
+    controlled: openControlProp,
+    default: false,
+    name: "DropdownNext",
+    state: "open"
+  });
+  const {
+    focusHandler: listFocusHandler,
+    keyDownHandler: listKeyDownHandler,
+    blurHandler: listBlurHandler,
+    mouseOverHandler: listMouseOverHandler,
+    activeDescendant,
+    selectedItem,
+    setSelectedItem,
+    highlightedItem,
+    setHighlightedItem,
+    contextValue: listContextValue,
+    focusVisibleRef
+  } = useList.useList({
+    ...listProps
+  });
+  const { select, highlight } = listContextValue;
+  const getListItems = (source) => {
+    if (!source)
+      return;
+    return source.map((item, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(ListItemNext.ListItemNext, {
+        value: item,
+        onMouseDown: (event) => {
+          select(event);
+        },
+        onMouseMove: (event) => {
+          highlight(event);
+        },
+        children: item
+      }, index);
+    });
+  };
+  const onOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
+  };
+  const { floating, reference, x, y, strategy, placement, context } = core.useFloatingUI({
+    open,
+    onOpenChange,
+    placement: placementProp,
+    middleware: [
+      react.offset(0),
+      react.size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      }),
+      react.flip(),
+      react.shift({ limiter: react.limitShift() })
+    ]
+  });
+  const { getFloatingProps } = react.useInteractions([
+    react.useDismiss(context),
+    react.useRole(context, { role: "listbox" })
+  ]);
+  const getDropdownNextProps = () => {
+    return getFloatingProps({
+      "data-placement": placement,
+      ref: floating,
+      style: {
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
+        position: strategy
+      }
+    });
+  };
+  const blurHandler = () => {
+    listBlurHandler();
+    setOpen(false);
+  };
+  const focusHandler = (event) => {
+    if (selectedItem) {
+      listFocusHandler(event);
+    }
+  };
+  const mouseDownHandler = () => {
+    setOpen(!open);
+  };
+  const mouseOverHandler = () => {
+    listMouseOverHandler();
+  };
+  const keyDownHandler = (event) => {
+    const { key } = event;
+    switch (key) {
+      case "ArrowUp":
+        listKeyDownHandler(event);
+        break;
+      case "ArrowDown":
+        setOpen(true);
+        listKeyDownHandler(event);
+        break;
+      case " ":
+      case "Enter":
+        if (!open) {
+          setOpen(true);
+          break;
+        }
+        if (open) {
+          listKeyDownHandler(event);
+          setOpen(false);
+          break;
+        }
+        break;
+      case "Escape":
+        setOpen(false);
+        break;
+      case "PageUp":
+      case "PageDown":
+      case "Home":
+      case "End":
+        if (open) {
+          listKeyDownHandler(event);
+          break;
+        }
+        break;
+    }
+  };
+  return {
+    handlers: {
+      focusHandler,
+      keyDownHandler,
+      blurHandler,
+      mouseOverHandler,
+      mouseDownHandler
+    },
+    activeDescendant,
+    selectedItem,
+    setSelectedItem,
+    highlightedItem,
+    setHighlightedItem,
+    focusVisibleRef,
+    getListItems,
+    portalProps: {
+      open,
+      setOpen,
+      floating,
+      reference,
+      getDropdownNextProps
+    }
+  };
+};
+
+exports.useDropdownNext = useDropdownNext;
+//# sourceMappingURL=useDropdownNext.js.map