@launchpad-ui/dropdown 0.3.5 → 0.4.0

package/dist/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAM1D,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,aAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,YAAY,GAAG;IACtE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,QAAQ,8EAoGb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAO1D,aAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,aAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,YAAY,GAAG;IACtE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,QAAQ,8EAoGb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/DropdownButton.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
 import type { ButtonKind, ButtonSize } from '@launchpad-ui/button';
+import type { MouseEvent, ReactNode } from 'react';
 declare type DropdownButtonProps = {
     hideCaret?: boolean;
     kind?: ButtonKind;
     size?: ButtonSize;
     className?: string;
     disabled?: boolean;
-    children?: React.ReactNode;
-    onClick?(v: React.MouseEvent): void;
+    children?: ReactNode;
+    onClick?(v: MouseEvent): void;
     testId?: string;
     'aria-label'?: string;
 };
-declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { DropdownButton };
 export type { DropdownButtonProps };
 //# sourceMappingURL=DropdownButton.d.ts.map

package/dist/DropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../src/DropdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMnE,aAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,cAAc,uIAUnB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../src/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAc,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/D,aAAK,mBAAmB,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,cAAc,mHAQlB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/index.es.js

@@ -1,12 +1,10 @@
-// ../../scripts/react-shim.js
-import * as React from "react";
-
-// src/Dropdown.tsx
 import { Popover } from "@launchpad-ui/popover";
-import cx from "clsx";
-import { Children, cloneElement, useEffect, useRef, useState } from "react";
-import { jsxs } from "react/jsx-runtime";
-var Dropdown = (props) => {
+import { cx } from "classix";
+import { useRef, useState, useEffect, cloneElement, Children, forwardRef } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "@launchpad-ui/button";
+import { ExpandMore, IconSize } from "@launchpad-ui/icons";
+const Dropdown = (props) => {
   const {
     placement,
     disabled,
@@ -20,7 +18,7 @@ var Dropdown = (props) => {
     ...rest
   } = props;
   const triggerRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(isOpenProp ?? false);
+  const [isOpen, setIsOpen] = useState(isOpenProp != null ? isOpenProp : false);
   const [hasOpened, setHasOpened] = useState(isOpen);
   useEffect(() => {
     if (isOpenProp !== void 0) {
@@ -30,25 +28,28 @@ var Dropdown = (props) => {
   useEffect(() => {
     if (hasOpened && isOpen === false) {
       setTimeout(() => {
+        var _a, _b;
         const current = triggerRef.current;
         if (!current) {
           return;
         }
-        const hasModal = current.closest?.(".has-modal");
-        !hasModal && current.focus?.();
+        const hasModal = (_a = current.closest) == null ? void 0 : _a.call(current, ".has-modal");
+        !hasModal && ((_b = current.focus) == null ? void 0 : _b.call(current));
       });
     }
   }, [isOpen, hasOpened]);
   useEffect(() => {
     setHasOpened(isOpen);
-    onStateChange?.({ isOpen });
+    onStateChange == null ? void 0 : onStateChange({
+      isOpen
+    });
   }, [isOpen]);
   const renderTrigger = () => {
     return cloneElement(parseChildren().target, {
       "aria-haspopup": true,
       "aria-expanded": isOpen ? true : false,
       ref: triggerRef,
-      isopen: isOpen?.toString()
+      isopen: isOpen == null ? void 0 : isOpen.toString()
     });
   };
   const renderContent = () => {
@@ -58,7 +59,9 @@ var Dropdown = (props) => {
   };
   const handleSelect = (item) => {
     setIsOpen(false);
-    onSelect?.(item, { isOpen: false });
+    onSelect == null ? void 0 : onSelect(item, {
+      isOpen: false
+    });
   };
   const handlePopoverInteraction = (nextIsOpen) => {
     setIsOpen(nextIsOpen);
@@ -81,34 +84,23 @@ var Dropdown = (props) => {
     targetClassName: popoverTargetClasses,
     popoverClassName: popoverClasses,
     ...rest,
-    children: [
-      renderTrigger(),
-      renderContent()
-    ]
+    children: [renderTrigger(), renderContent()]
   });
 };
-
-// src/DropdownButton.tsx
-import { Button } from "@launchpad-ui/button";
-import { ExpandMore, IconSize } from "@launchpad-ui/icons";
-import { forwardRef } from "react";
-import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
-var DropdownButton = forwardRef(
-  (props, ref) => {
-    const { children, hideCaret, ...rest } = props;
-    return /* @__PURE__ */ jsxs2(Button, {
-      ...rest,
-      ref,
-      children: [
-        children,
-        " ",
-        !hideCaret && /* @__PURE__ */ jsx(ExpandMore, {
-          size: IconSize.SMALL
-        })
-      ]
-    });
-  }
-);
+const DropdownButton = forwardRef((props, ref) => {
+  const {
+    children,
+    hideCaret,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(Button, {
+    ...rest,
+    ref,
+    children: [children, " ", !hideCaret && /* @__PURE__ */ jsx(ExpandMore, {
+      size: IconSize.SMALL
+    })]
+  });
+});
 DropdownButton.displayName = "DropdownButton";
 export {
   Dropdown,

package/dist/index.es.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../scripts/react-shim.js", "../src/Dropdown.tsx", "../src/DropdownButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { PopoverProps } from '@launchpad-ui/popover';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport cx from 'clsx';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n  isOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n  onSelect?: (item: T, stateChanges: DropdownState) => void;\n  onStateChange?: (state: DropdownState) => void;\n};\n\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n  const {\n    placement,\n    disabled,\n    targetClassName,\n    popoverClassName,\n    isOpen: isOpenProp,\n    onInteraction,\n    onSelect,\n    onStateChange,\n    children,\n    ...rest\n  } = props;\n\n  const triggerRef = useRef<HTMLElement>(null);\n  const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n  const [hasOpened, setHasOpened] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      setIsOpen(isOpenProp);\n    }\n  }, [isOpenProp]);\n\n  useEffect(() => {\n    // Focus the button upon closing for convenient tabbing\n    if (hasOpened && isOpen === false) {\n      setTimeout(() => {\n        const current = triggerRef.current;\n        if (!current) {\n          return;\n        }\n\n        // If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n        // we let the modal components control their own focus.\n        // Note that this is not ideal since closing the modal will not cause the dropdown trigger\n        // to regain focus.\n        const hasModal = current.closest?.('.has-modal');\n\n        !hasModal && current.focus?.();\n      });\n    }\n  }, [isOpen, hasOpened]);\n\n  useEffect(() => {\n    setHasOpened(isOpen);\n    onStateChange?.({ isOpen });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const renderTrigger = () => {\n    return cloneElement(parseChildren().target, {\n      'aria-haspopup': true,\n      'aria-expanded': isOpen ? true : false,\n      ref: triggerRef,\n      isopen: isOpen?.toString(),\n    });\n  };\n\n  const renderContent = () => {\n    return cloneElement(parseChildren().content, {\n      onSelect: handleSelect,\n    });\n  };\n\n  const handleSelect = (item: T) => {\n    setIsOpen(false);\n    onSelect?.(item, { isOpen: false });\n  };\n\n  const handlePopoverInteraction = (nextIsOpen: boolean) => {\n    setIsOpen(nextIsOpen);\n  };\n\n  const parseChildren = () => {\n    const [targetChild, contentChild] = Children.toArray(children);\n    return {\n      target: targetChild as React.ReactElement,\n      content: contentChild as React.ReactElement,\n    };\n  };\n\n  const popoverTargetClasses = cx('Dropdown-target', targetClassName);\n  const popoverClasses = cx('Dropdown', popoverClassName);\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      placement={placement}\n      onInteraction={onInteraction || handlePopoverInteraction}\n      restrictHeight={false}\n      disabled={disabled}\n      targetClassName={popoverTargetClasses}\n      popoverClassName={popoverClasses}\n      {...rest}\n    >\n      {renderTrigger()}\n      {renderContent()}\n    </Popover>\n  );\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n", "import type { ButtonKind, ButtonSize } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = {\n  hideCaret?: boolean;\n  kind?: ButtonKind;\n  size?: ButtonSize;\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  onClick?(v: React.MouseEvent): void;\n  testId?: string;\n  'aria-label'?: string;\n};\n\nconst DropdownButton = forwardRef<React.ElementRef<typeof Button>, DropdownButtonProps>(\n  (props, ref) => {\n    const { children, hideCaret, ...rest } = props;\n\n    return (\n      <Button {...rest} ref={ref}>\n        {children} {!hideCaret && <ExpandMore size={IconSize.SMALL} />}\n      </Button>\n    );\n  }\n);\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],
-  "mappings": ";AAAA,YAAY,WAAW;;;ACEvB,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,UAAU,cAAc,WAAW,QAAQ,gBAAgB;AAiGhE;AAtFJ,IAAM,WAAW,CAAqC,UAA4B;AAChF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,cAAc,KAAK;AACxD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAM;AAEjD,YAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AAEd,QAAI,aAAa,WAAW,OAAO;AACjC,iBAAW,MAAM;AACf,cAAM,UAAU,WAAW;AAC3B,YAAI,CAAC,SAAS;AACZ;AAAA,QACF;AAMA,cAAM,WAAW,QAAQ,UAAU,YAAY;AAE/C,SAAC,YAAY,QAAQ,QAAQ;AAAA,MAC/B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,YAAU,MAAM;AACd,iBAAa,MAAM;AACnB,oBAAgB,EAAE,OAAO,CAAC;AAAA,EAE5B,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB,MAAM;AAC1B,WAAO,aAAa,cAAc,EAAE,QAAQ;AAAA,MAC1C,iBAAiB;AAAA,MACjB,iBAAiB,SAAS,OAAO;AAAA,MACjC,KAAK;AAAA,MACL,QAAQ,QAAQ,SAAS;AAAA,IAC3B,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,MAAM;AAC1B,WAAO,aAAa,cAAc,EAAE,SAAS;AAAA,MAC3C,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,CAAC,SAAY;AAChC,cAAU,KAAK;AACf,eAAW,MAAM,EAAE,QAAQ,MAAM,CAAC;AAAA,EACpC;AAEA,QAAM,2BAA2B,CAAC,eAAwB;AACxD,cAAU,UAAU;AAAA,EACtB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,CAAC,aAAa,YAAY,IAAI,SAAS,QAAQ,QAAQ;AAC7D,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAEA,QAAM,uBAAuB,GAAG,mBAAmB,eAAe;AAClE,QAAM,iBAAiB,GAAG,YAAY,gBAAgB;AAEtD,SACE,qBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC,gBAAgB;AAAA,IAChB;AAAA,IACA,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IACjB,GAAG;AAAA,IAEH;AAAA,oBAAc;AAAA,MACd,cAAc;AAAA;AAAA,GACjB;AAEJ;;;ACjHA,SAAS,cAAc;AACvB,SAAS,YAAY,gBAAgB;AACrC,SAAS,kBAAkB;AAmBrB,SAC4B,KAD5B,QAAAA,aAAA;AALN,IAAM,iBAAiB;AAAA,EACrB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AAEzC,WACE,gBAAAA,MAAC;AAAA,MAAQ,GAAG;AAAA,MAAM;AAAA,MACf;AAAA;AAAA,QAAS;AAAA,QAAE,CAAC,aAAa,oBAAC;AAAA,UAAW,MAAM,SAAS;AAAA,SAAO;AAAA;AAAA,KAC9D;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;",
-  "names": ["jsxs"]
-}
+{"version":3,"file":"index.es.js","sources":["../src/Dropdown.tsx","../src/DropdownButton.tsx"],"sourcesContent":["import type { PopoverProps } from '@launchpad-ui/popover';\nimport type { ReactElement } from 'react';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport { cx } from 'classix';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n  isOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n  onSelect?: (item: T, stateChanges: DropdownState) => void;\n  onStateChange?: (state: DropdownState) => void;\n};\n\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n  const {\n    placement,\n    disabled,\n    targetClassName,\n    popoverClassName,\n    isOpen: isOpenProp,\n    onInteraction,\n    onSelect,\n    onStateChange,\n    children,\n    ...rest\n  } = props;\n\n  const triggerRef = useRef<HTMLElement>(null);\n  const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n  const [hasOpened, setHasOpened] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      setIsOpen(isOpenProp);\n    }\n  }, [isOpenProp]);\n\n  useEffect(() => {\n    // Focus the button upon closing for convenient tabbing\n    if (hasOpened && isOpen === false) {\n      setTimeout(() => {\n        const current = triggerRef.current;\n        if (!current) {\n          return;\n        }\n\n        // If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n        // we let the modal components control their own focus.\n        // Note that this is not ideal since closing the modal will not cause the dropdown trigger\n        // to regain focus.\n        const hasModal = current.closest?.('.has-modal');\n\n        !hasModal && current.focus?.();\n      });\n    }\n  }, [isOpen, hasOpened]);\n\n  useEffect(() => {\n    setHasOpened(isOpen);\n    onStateChange?.({ isOpen });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const renderTrigger = () => {\n    return cloneElement(parseChildren().target, {\n      'aria-haspopup': true,\n      'aria-expanded': isOpen ? true : false,\n      ref: triggerRef,\n      isopen: isOpen?.toString(),\n    });\n  };\n\n  const renderContent = () => {\n    return cloneElement(parseChildren().content, {\n      onSelect: handleSelect,\n    });\n  };\n\n  const handleSelect = (item: T) => {\n    setIsOpen(false);\n    onSelect?.(item, { isOpen: false });\n  };\n\n  const handlePopoverInteraction = (nextIsOpen: boolean) => {\n    setIsOpen(nextIsOpen);\n  };\n\n  const parseChildren = () => {\n    const [targetChild, contentChild] = Children.toArray(children);\n    return {\n      target: targetChild as ReactElement,\n      content: contentChild as ReactElement,\n    };\n  };\n\n  const popoverTargetClasses = cx('Dropdown-target', targetClassName);\n  const popoverClasses = cx('Dropdown', popoverClassName);\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      placement={placement}\n      onInteraction={onInteraction || handlePopoverInteraction}\n      restrictHeight={false}\n      disabled={disabled}\n      targetClassName={popoverTargetClasses}\n      popoverClassName={popoverClasses}\n      {...rest}\n    >\n      {renderTrigger()}\n      {renderContent()}\n    </Popover>\n  );\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonKind, ButtonSize } from '@launchpad-ui/button';\nimport type { ElementRef, MouseEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = {\n  hideCaret?: boolean;\n  kind?: ButtonKind;\n  size?: ButtonSize;\n  className?: string;\n  disabled?: boolean;\n  children?: ReactNode;\n  onClick?(v: MouseEvent): void;\n  testId?: string;\n  'aria-label'?: string;\n};\n\nconst DropdownButton = forwardRef<ElementRef<typeof Button>, DropdownButtonProps>((props, ref) => {\n  const { children, hideCaret, ...rest } = props;\n\n  return (\n    <Button {...rest} ref={ref}>\n      {children} {!hideCaret && <ExpandMore size={IconSize.SMALL} />}\n    </Button>\n  );\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],"names":["Dropdown","props","placement","disabled","targetClassName","popoverClassName","isOpen","isOpenProp","onInteraction","onSelect","onStateChange","children","rest","triggerRef","useRef","setIsOpen","useState","hasOpened","setHasOpened","useEffect","undefined","setTimeout","current","hasModal","closest","focus","renderTrigger","cloneElement","parseChildren","target","ref","isopen","toString","renderContent","content","handleSelect","item","handlePopoverInteraction","nextIsOpen","targetChild","contentChild","Children","toArray","popoverTargetClasses","cx","popoverClasses","DropdownButton","forwardRef","hideCaret","IconSize","SMALL","displayName"],"mappings":";;;;;;AAgBMA,MAAAA,WAAW,CAAqCC,UAA4B;AAC1E,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQC;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,MACDX;AAEEY,QAAAA,aAAaC,OAAoB,IAAd;AACzB,QAAM,CAACR,QAAQS,aAAaC,SAAST,kCAAc,KAAf;AACpC,QAAM,CAACU,WAAWC,gBAAgBF,SAASV,MAAD;AAE1Ca,YAAU,MAAM;AACd,QAAIZ,eAAea,QAAW;AAC5BL,gBAAUR,UAAD;AAAA,IACV;AAAA,EAAA,GACA,CAACA,UAAD,CAJM;AAMTY,YAAU,MAAM;AAEVF,QAAAA,aAAaX,WAAW,OAAO;AACjCe,iBAAW,MAAM;;AACf,cAAMC,UAAUT,WAAWS;AAC3B,YAAI,CAACA,SAAS;AACZ;AAAA,QACD;AAMKC,cAAAA,WAAWD,cAAQE,YAARF,iCAAkB;AAElCC,SAAAA,YAAYD,eAAQG,UAARH;AAAAA,MAAb,CAZQ;AAAA,IAcX;AAAA,EAAA,GACA,CAAChB,QAAQW,SAAT,CAlBM;AAoBTE,YAAU,MAAM;AACdD,iBAAaZ,MAAD;AACI,mDAAA;AAAA,MAAEA;AAAAA,IAAAA;AAAAA,EAAL,GAEZ,CAACA,MAAD,CAJM;AAMT,QAAMoB,gBAAgB,MAAM;AACnBC,WAAAA,aAAaC,cAAa,EAAGC,QAAQ;AAAA,MAC1C,iBAAiB;AAAA,MACjB,iBAAiBvB,SAAS,OAAO;AAAA,MACjCwB,KAAKjB;AAAAA,MACLkB,QAAQzB,iCAAQ0B;AAAAA,IAAR,CAJS;AAAA,EAAA;AAQrB,QAAMC,gBAAgB,MAAM;AACnBN,WAAAA,aAAaC,cAAa,EAAGM,SAAS;AAAA,MAC3CzB,UAAU0B;AAAAA,IAAAA,CADO;AAAA,EAAA;AAKfA,QAAAA,eAAe,CAACC,SAAY;AAChCrB,cAAU,KAAD;AACTN,yCAAW2B,MAAM;AAAA,MAAE9B,QAAQ;AAAA,IAAA;AAAA,EAAnB;AAGJ+B,QAAAA,2BAA2B,CAACC,eAAwB;AACxDvB,cAAUuB,UAAD;AAAA,EAAA;AAGX,QAAMV,gBAAgB,MAAM;AAC1B,UAAM,CAACW,aAAaC,gBAAgBC,SAASC,QAAQ/B,QAAjB;AAC7B,WAAA;AAAA,MACLkB,QAAQU;AAAAA,MACRL,SAASM;AAAAA,IAAAA;AAAAA,EAFJ;AAMHG,QAAAA,uBAAuBC,GAAG,mBAAmBxC,eAApB;AACzByC,QAAAA,iBAAiBD,GAAG,YAAYvC,gBAAb;AAEzB,8BACG,SAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAeG,iBAAiB6B;AAAAA,IAChC,gBAAgB;AAAA,IAChB;AAAA,IACA,iBAAiBM;AAAAA,IACjB,kBAAkBE;AAAAA,IAPpB,GAQMjC;AAAAA,IARN,UAAA,CAUGc,iBACAO,eAXH;AAAA,EAAA,CADF;AAeD;ACjGD,MAAMa,iBAAiBC,WAA2D,CAAC9C,OAAO6B,QAAQ;AAC1F,QAAA;AAAA,IAAEnB;AAAAA,IAAUqC;AAAAA,OAAcpC;AAAAA,MAASX;AAEzC,8BACG,QAAD;AAAA,IAAA,GAAYW;AAAAA,IAAM;AAAA,IAAlB,UAAA,CACGD,UAAW,KAAA,CAACqC,iCAAc,YAAD;AAAA,MAAY,MAAMC,SAASC;AAAAA,IAAAA,CADvD,CAAA;AAAA,EAAA,CADF;AAKD,CARgC;AAUjCJ,eAAeK,cAAc;"}

package/dist/index.js

@@ -1,45 +1,12 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Dropdown: () => Dropdown,
-  DropdownButton: () => DropdownButton
-});
-module.exports = __toCommonJS(src_exports);
-
-// ../../scripts/react-shim.js
-var React = __toESM(require("react"));
-
-// src/Dropdown.tsx
-var import_popover = require("@launchpad-ui/popover");
-var import_clsx = __toESM(require("clsx"));
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Dropdown = (props) => {
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const popover = require("@launchpad-ui/popover");
+const classix = require("classix");
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const button = require("@launchpad-ui/button");
+const icons = require("@launchpad-ui/icons");
+const Dropdown = (props) => {
   const {
     placement,
     disabled,
@@ -52,60 +19,65 @@ var Dropdown = (props) => {
     children,
     ...rest
   } = props;
-  const triggerRef = (0, import_react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react.useState)(isOpenProp ?? false);
-  const [hasOpened, setHasOpened] = (0, import_react.useState)(isOpen);
-  (0, import_react.useEffect)(() => {
+  const triggerRef = react.useRef(null);
+  const [isOpen, setIsOpen] = react.useState(isOpenProp != null ? isOpenProp : false);
+  const [hasOpened, setHasOpened] = react.useState(isOpen);
+  react.useEffect(() => {
     if (isOpenProp !== void 0) {
       setIsOpen(isOpenProp);
     }
   }, [isOpenProp]);
-  (0, import_react.useEffect)(() => {
+  react.useEffect(() => {
     if (hasOpened && isOpen === false) {
       setTimeout(() => {
+        var _a, _b;
         const current = triggerRef.current;
         if (!current) {
           return;
         }
-        const hasModal = current.closest?.(".has-modal");
-        !hasModal && current.focus?.();
+        const hasModal = (_a = current.closest) == null ? void 0 : _a.call(current, ".has-modal");
+        !hasModal && ((_b = current.focus) == null ? void 0 : _b.call(current));
       });
     }
   }, [isOpen, hasOpened]);
-  (0, import_react.useEffect)(() => {
+  react.useEffect(() => {
     setHasOpened(isOpen);
-    onStateChange?.({ isOpen });
+    onStateChange == null ? void 0 : onStateChange({
+      isOpen
+    });
   }, [isOpen]);
   const renderTrigger = () => {
-    return (0, import_react.cloneElement)(parseChildren().target, {
+    return react.cloneElement(parseChildren().target, {
       "aria-haspopup": true,
       "aria-expanded": isOpen ? true : false,
       ref: triggerRef,
-      isopen: isOpen?.toString()
+      isopen: isOpen == null ? void 0 : isOpen.toString()
     });
   };
   const renderContent = () => {
-    return (0, import_react.cloneElement)(parseChildren().content, {
+    return react.cloneElement(parseChildren().content, {
       onSelect: handleSelect
     });
   };
   const handleSelect = (item) => {
     setIsOpen(false);
-    onSelect?.(item, { isOpen: false });
+    onSelect == null ? void 0 : onSelect(item, {
+      isOpen: false
+    });
   };
   const handlePopoverInteraction = (nextIsOpen) => {
     setIsOpen(nextIsOpen);
   };
   const parseChildren = () => {
-    const [targetChild, contentChild] = import_react.Children.toArray(children);
+    const [targetChild, contentChild] = react.Children.toArray(children);
     return {
       target: targetChild,
       content: contentChild
     };
   };
-  const popoverTargetClasses = (0, import_clsx.default)("Dropdown-target", targetClassName);
-  const popoverClasses = (0, import_clsx.default)("Dropdown", popoverClassName);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, {
+  const popoverTargetClasses = classix.cx("Dropdown-target", targetClassName);
+  const popoverClasses = classix.cx("Dropdown", popoverClassName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, {
     isOpen,
     placement,
     onInteraction: onInteraction || handlePopoverInteraction,
@@ -114,38 +86,24 @@ var Dropdown = (props) => {
     targetClassName: popoverTargetClasses,
     popoverClassName: popoverClasses,
     ...rest,
-    children: [
-      renderTrigger(),
-      renderContent()
-    ]
+    children: [renderTrigger(), renderContent()]
   });
 };
-
-// src/DropdownButton.tsx
-var import_button = require("@launchpad-ui/button");
-var import_icons = require("@launchpad-ui/icons");
-var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DropdownButton = (0, import_react2.forwardRef)(
-  (props, ref) => {
-    const { children, hideCaret, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, {
-      ...rest,
-      ref,
-      children: [
-        children,
-        " ",
-        !hideCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExpandMore, {
-          size: import_icons.IconSize.SMALL
-        })
-      ]
-    });
-  }
-);
-DropdownButton.displayName = "DropdownButton";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Dropdown,
-  DropdownButton
+const DropdownButton = react.forwardRef((props, ref) => {
+  const {
+    children,
+    hideCaret,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(button.Button, {
+    ...rest,
+    ref,
+    children: [children, " ", !hideCaret && /* @__PURE__ */ jsxRuntime.jsx(icons.ExpandMore, {
+      size: icons.IconSize.SMALL
+    })]
+  });
 });
+DropdownButton.displayName = "DropdownButton";
+exports.Dropdown = Dropdown;
+exports.DropdownButton = DropdownButton;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../src/index.ts", "../../../scripts/react-shim.js", "../src/Dropdown.tsx", "../src/DropdownButton.tsx"],
-  "sourcesContent": ["export type { DropdownProps } from './Dropdown';\nexport type { DropdownButtonProps } from './DropdownButton';\nexport { Dropdown } from './Dropdown';\nexport { DropdownButton } from './DropdownButton';\n", "import * as React from 'react';\nexport { React };\n", "import type { PopoverProps } from '@launchpad-ui/popover';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport cx from 'clsx';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n  isOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n  onSelect?: (item: T, stateChanges: DropdownState) => void;\n  onStateChange?: (state: DropdownState) => void;\n};\n\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n  const {\n    placement,\n    disabled,\n    targetClassName,\n    popoverClassName,\n    isOpen: isOpenProp,\n    onInteraction,\n    onSelect,\n    onStateChange,\n    children,\n    ...rest\n  } = props;\n\n  const triggerRef = useRef<HTMLElement>(null);\n  const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n  const [hasOpened, setHasOpened] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      setIsOpen(isOpenProp);\n    }\n  }, [isOpenProp]);\n\n  useEffect(() => {\n    // Focus the button upon closing for convenient tabbing\n    if (hasOpened && isOpen === false) {\n      setTimeout(() => {\n        const current = triggerRef.current;\n        if (!current) {\n          return;\n        }\n\n        // If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n        // we let the modal components control their own focus.\n        // Note that this is not ideal since closing the modal will not cause the dropdown trigger\n        // to regain focus.\n        const hasModal = current.closest?.('.has-modal');\n\n        !hasModal && current.focus?.();\n      });\n    }\n  }, [isOpen, hasOpened]);\n\n  useEffect(() => {\n    setHasOpened(isOpen);\n    onStateChange?.({ isOpen });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const renderTrigger = () => {\n    return cloneElement(parseChildren().target, {\n      'aria-haspopup': true,\n      'aria-expanded': isOpen ? true : false,\n      ref: triggerRef,\n      isopen: isOpen?.toString(),\n    });\n  };\n\n  const renderContent = () => {\n    return cloneElement(parseChildren().content, {\n      onSelect: handleSelect,\n    });\n  };\n\n  const handleSelect = (item: T) => {\n    setIsOpen(false);\n    onSelect?.(item, { isOpen: false });\n  };\n\n  const handlePopoverInteraction = (nextIsOpen: boolean) => {\n    setIsOpen(nextIsOpen);\n  };\n\n  const parseChildren = () => {\n    const [targetChild, contentChild] = Children.toArray(children);\n    return {\n      target: targetChild as React.ReactElement,\n      content: contentChild as React.ReactElement,\n    };\n  };\n\n  const popoverTargetClasses = cx('Dropdown-target', targetClassName);\n  const popoverClasses = cx('Dropdown', popoverClassName);\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      placement={placement}\n      onInteraction={onInteraction || handlePopoverInteraction}\n      restrictHeight={false}\n      disabled={disabled}\n      targetClassName={popoverTargetClasses}\n      popoverClassName={popoverClasses}\n      {...rest}\n    >\n      {renderTrigger()}\n      {renderContent()}\n    </Popover>\n  );\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n", "import type { ButtonKind, ButtonSize } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = {\n  hideCaret?: boolean;\n  kind?: ButtonKind;\n  size?: ButtonSize;\n  className?: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  onClick?(v: React.MouseEvent): void;\n  testId?: string;\n  'aria-label'?: string;\n};\n\nconst DropdownButton = forwardRef<React.ElementRef<typeof Button>, DropdownButtonProps>(\n  (props, ref) => {\n    const { children, hideCaret, ...rest } = props;\n\n    return (\n      <Button {...rest} ref={ref}>\n        {children} {!hideCaret && <ExpandMore size={IconSize.SMALL} />}\n      </Button>\n    );\n  }\n);\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACEvB,qBAAwB;AACxB,kBAAe;AACf,mBAAoE;AAiGhE;AAtFJ,IAAM,WAAW,CAAqC,UAA4B;AAChF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,cAAc,KAAK;AACxD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,MAAM;AAEjD,8BAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,8BAAU,MAAM;AAEd,QAAI,aAAa,WAAW,OAAO;AACjC,iBAAW,MAAM;AACf,cAAM,UAAU,WAAW;AAC3B,YAAI,CAAC,SAAS;AACZ;AAAA,QACF;AAMA,cAAM,WAAW,QAAQ,UAAU,YAAY;AAE/C,SAAC,YAAY,QAAQ,QAAQ;AAAA,MAC/B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,8BAAU,MAAM;AACd,iBAAa,MAAM;AACnB,oBAAgB,EAAE,OAAO,CAAC;AAAA,EAE5B,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB,MAAM;AAC1B,eAAO,2BAAa,cAAc,EAAE,QAAQ;AAAA,MAC1C,iBAAiB;AAAA,MACjB,iBAAiB,SAAS,OAAO;AAAA,MACjC,KAAK;AAAA,MACL,QAAQ,QAAQ,SAAS;AAAA,IAC3B,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,MAAM;AAC1B,eAAO,2BAAa,cAAc,EAAE,SAAS;AAAA,MAC3C,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,CAAC,SAAY;AAChC,cAAU,KAAK;AACf,eAAW,MAAM,EAAE,QAAQ,MAAM,CAAC;AAAA,EACpC;AAEA,QAAM,2BAA2B,CAAC,eAAwB;AACxD,cAAU,UAAU;AAAA,EACtB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,CAAC,aAAa,YAAY,IAAI,sBAAS,QAAQ,QAAQ;AAC7D,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAEA,QAAM,2BAAuB,YAAAA,SAAG,mBAAmB,eAAe;AAClE,QAAM,qBAAiB,YAAAA,SAAG,YAAY,gBAAgB;AAEtD,SACE,6CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC,gBAAgB;AAAA,IAChB;AAAA,IACA,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IACjB,GAAG;AAAA,IAEH;AAAA,oBAAc;AAAA,MACd,cAAc;AAAA;AAAA,GACjB;AAEJ;;;ACjHA,oBAAuB;AACvB,mBAAqC;AACrC,IAAAC,gBAA2B;AAmBrB;AALN,IAAM,qBAAiB;AAAA,EACrB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AAEzC,WACE,6CAAC;AAAA,MAAQ,GAAG;AAAA,MAAM;AAAA,MACf;AAAA;AAAA,QAAS;AAAA,QAAE,CAAC,aAAa,4CAAC;AAAA,UAAW,MAAM,sBAAS;AAAA,SAAO;AAAA;AAAA,KAC9D;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;",
-  "names": ["cx", "import_react"]
-}
+{"version":3,"file":"index.js","sources":["../src/Dropdown.tsx","../src/DropdownButton.tsx"],"sourcesContent":["import type { PopoverProps } from '@launchpad-ui/popover';\nimport type { ReactElement } from 'react';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport { cx } from 'classix';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n  isOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n  onSelect?: (item: T, stateChanges: DropdownState) => void;\n  onStateChange?: (state: DropdownState) => void;\n};\n\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n  const {\n    placement,\n    disabled,\n    targetClassName,\n    popoverClassName,\n    isOpen: isOpenProp,\n    onInteraction,\n    onSelect,\n    onStateChange,\n    children,\n    ...rest\n  } = props;\n\n  const triggerRef = useRef<HTMLElement>(null);\n  const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n  const [hasOpened, setHasOpened] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      setIsOpen(isOpenProp);\n    }\n  }, [isOpenProp]);\n\n  useEffect(() => {\n    // Focus the button upon closing for convenient tabbing\n    if (hasOpened && isOpen === false) {\n      setTimeout(() => {\n        const current = triggerRef.current;\n        if (!current) {\n          return;\n        }\n\n        // If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n        // we let the modal components control their own focus.\n        // Note that this is not ideal since closing the modal will not cause the dropdown trigger\n        // to regain focus.\n        const hasModal = current.closest?.('.has-modal');\n\n        !hasModal && current.focus?.();\n      });\n    }\n  }, [isOpen, hasOpened]);\n\n  useEffect(() => {\n    setHasOpened(isOpen);\n    onStateChange?.({ isOpen });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const renderTrigger = () => {\n    return cloneElement(parseChildren().target, {\n      'aria-haspopup': true,\n      'aria-expanded': isOpen ? true : false,\n      ref: triggerRef,\n      isopen: isOpen?.toString(),\n    });\n  };\n\n  const renderContent = () => {\n    return cloneElement(parseChildren().content, {\n      onSelect: handleSelect,\n    });\n  };\n\n  const handleSelect = (item: T) => {\n    setIsOpen(false);\n    onSelect?.(item, { isOpen: false });\n  };\n\n  const handlePopoverInteraction = (nextIsOpen: boolean) => {\n    setIsOpen(nextIsOpen);\n  };\n\n  const parseChildren = () => {\n    const [targetChild, contentChild] = Children.toArray(children);\n    return {\n      target: targetChild as ReactElement,\n      content: contentChild as ReactElement,\n    };\n  };\n\n  const popoverTargetClasses = cx('Dropdown-target', targetClassName);\n  const popoverClasses = cx('Dropdown', popoverClassName);\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      placement={placement}\n      onInteraction={onInteraction || handlePopoverInteraction}\n      restrictHeight={false}\n      disabled={disabled}\n      targetClassName={popoverTargetClasses}\n      popoverClassName={popoverClasses}\n      {...rest}\n    >\n      {renderTrigger()}\n      {renderContent()}\n    </Popover>\n  );\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonKind, ButtonSize } from '@launchpad-ui/button';\nimport type { ElementRef, MouseEvent, ReactNode } from 'react';\n\nimport { Button } from '@launchpad-ui/button';\nimport { ExpandMore, IconSize } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = {\n  hideCaret?: boolean;\n  kind?: ButtonKind;\n  size?: ButtonSize;\n  className?: string;\n  disabled?: boolean;\n  children?: ReactNode;\n  onClick?(v: MouseEvent): void;\n  testId?: string;\n  'aria-label'?: string;\n};\n\nconst DropdownButton = forwardRef<ElementRef<typeof Button>, DropdownButtonProps>((props, ref) => {\n  const { children, hideCaret, ...rest } = props;\n\n  return (\n    <Button {...rest} ref={ref}>\n      {children} {!hideCaret && <ExpandMore size={IconSize.SMALL} />}\n    </Button>\n  );\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],"names":["Dropdown","props","placement","disabled","targetClassName","popoverClassName","isOpen","isOpenProp","onInteraction","onSelect","onStateChange","children","rest","triggerRef","useRef","setIsOpen","useState","hasOpened","setHasOpened","useEffect","undefined","setTimeout","current","hasModal","closest","focus","renderTrigger","cloneElement","parseChildren","target","ref","isopen","toString","renderContent","content","handleSelect","item","handlePopoverInteraction","nextIsOpen","targetChild","contentChild","Children","toArray","popoverTargetClasses","cx","popoverClasses","Popover","DropdownButton","forwardRef","hideCaret","Button","ExpandMore","IconSize","SMALL","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/dropdown",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "status": "beta",
   "publishConfig": {
     "access": "public"
@@ -25,11 +25,11 @@
   },
   "source": "src/index.ts",
   "dependencies": {
-    "@launchpad-ui/button": "~0.4.0",
-    "@launchpad-ui/icons": "~0.3.2",
-    "@launchpad-ui/popover": "~0.6.4",
+    "@launchpad-ui/button": "~0.6.0",
+    "@launchpad-ui/icons": "~0.4.0",
+    "@launchpad-ui/popover": "~0.7.0",
     "@launchpad-ui/tokens": "~0.1.5",
-    "clsx": "^1.2.0"
+    "classix": "^2.1.13"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -40,7 +40,7 @@
     "react-dom": "^18.2.0"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.build.json && node ../../scripts/build.js",
+    "build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
     "e2e": "playwright test --config=../../playwright.config.ct.ts",
     "lint": "eslint '**/*.{ts,tsx,js}'",