@launchpad-ui/dropdown 0.5.4-alpha.0 → 0.5.4-alpha.1

package/dist/Dropdown.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { PopoverProps } from '@launchpad-ui/popover';
+declare type DropdownState = {
+    isOpen?: boolean;
+};
+declare type DropdownProps<T extends string | object | number> = PopoverProps & {
+    onSelect?: (item: T, stateChanges: DropdownState) => void;
+    onStateChange?: (state: DropdownState) => void;
+};
+declare const Dropdown: <T extends string | number | object>(props: DropdownProps<T>) => JSX.Element;
+export { Dropdown };
+export type { DropdownProps };
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"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,8EAsGb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/DropdownButton.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { ButtonProps } from '@launchpad-ui/button';
+declare type DropdownButtonProps = ButtonProps & {
+    hideCaret?: boolean;
+};
+declare const DropdownButton: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLoading?: boolean | undefined;
+    loadingText?: string | JSX.Element | undefined;
+    size?: "big" | "small" | "normal" | "tiny" | undefined;
+    kind?: "link" | "default" | "close" | "primary" | "destructive" | "minimal" | undefined;
+    fit?: boolean | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<{
+        size?: string | undefined;
+        key: string;
+        'aria-hidden': boolean;
+    }, string | import("react").JSXElementConstructor<any>> | undefined;
+    renderIconFirst?: boolean | undefined;
+    asChild?: boolean | undefined;
+    'data-test-id'?: string | undefined;
+} & {
+    hideCaret?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export { DropdownButton };
+export type { DropdownButtonProps };
+//# sourceMappingURL=DropdownButton.d.ts.map

package/dist/DropdownButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../src/DropdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,aAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;qDAQlB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { DropdownProps } from './Dropdown';
+export type { DropdownButtonProps } from './DropdownButton';
+export { Dropdown } from './Dropdown';
+export { DropdownButton } from './DropdownButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,113 @@
+import { Popover } from "@launchpad-ui/popover";
+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 } from "@launchpad-ui/icons";
+const Dropdown = (props) => {
+  const {
+    placement,
+    disabled,
+    targetClassName,
+    popoverClassName,
+    isOpen: isOpenProp,
+    onInteraction,
+    onSelect,
+    onStateChange,
+    children,
+    "data-test-id": testId = "dropdown",
+    ...rest
+  } = props;
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(isOpenProp != null ? isOpenProp : false);
+  const [hasOpened, setHasOpened] = useState(isOpen);
+  useEffect(() => {
+    if (isOpenProp !== void 0) {
+      setIsOpen(isOpenProp);
+    }
+  }, [isOpenProp]);
+  useEffect(() => {
+    if (hasOpened && isOpen === false) {
+      setTimeout(() => {
+        var _a, _b;
+        const current = triggerRef.current;
+        if (!current) {
+          return;
+        }
+        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 == null ? void 0 : onStateChange({
+      isOpen
+    });
+  }, [isOpen]);
+  const renderTrigger = () => {
+    return cloneElement(parseChildren().target, {
+      "aria-haspopup": true,
+      "aria-expanded": isOpen ? true : false,
+      ref: triggerRef,
+      isopen: isOpen == null ? void 0 : isOpen.toString()
+    });
+  };
+  const renderContent = () => {
+    return cloneElement(parseChildren().content, {
+      onSelect: handleSelect
+    });
+  };
+  const handleSelect = (item) => {
+    setIsOpen(false);
+    onSelect == null ? void 0 : onSelect(item, {
+      isOpen: false
+    });
+  };
+  const handlePopoverInteraction = (nextIsOpen) => {
+    setIsOpen(nextIsOpen);
+  };
+  const parseChildren = () => {
+    const [targetChild, contentChild] = Children.toArray(children);
+    return {
+      target: targetChild,
+      content: contentChild
+    };
+  };
+  const popoverTargetClasses = cx("Dropdown-target", targetClassName);
+  const popoverClasses = cx("Dropdown", popoverClassName);
+  return /* @__PURE__ */ jsxs(Popover, {
+    isOpen,
+    placement,
+    onInteraction: onInteraction || handlePopoverInteraction,
+    restrictHeight: false,
+    disabled,
+    targetClassName: popoverTargetClasses,
+    popoverClassName: popoverClasses,
+    "data-test-id": testId,
+    ...rest,
+    children: [renderTrigger(), renderContent()]
+  });
+};
+const DropdownButton = forwardRef((props, ref) => {
+  const {
+    children,
+    hideCaret,
+    "data-test-id": testId = "dropdown-button",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(Button, {
+    ...rest,
+    "data-test-id": testId,
+    ref,
+    children: [children, " ", !hideCaret && /* @__PURE__ */ jsx(ExpandMore, {
+      size: "small"
+    })]
+  });
+});
+DropdownButton.displayName = "DropdownButton";
+export {
+  Dropdown,
+  DropdownButton
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"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    'data-test-id': testId = 'dropdown',\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      data-test-id={testId}\n      {...rest}\n    >\n      {renderTrigger()}\n      {renderContent()}\n    </Popover>\n  );\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonProps } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { ExpandMore } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = ButtonProps & {\n  hideCaret?: boolean;\n};\n\nconst DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => {\n  const { children, hideCaret, 'data-test-id': testId = 'dropdown-button', ...rest } = props;\n\n  return (\n    <Button {...rest} data-test-id={testId} ref={ref}>\n      {children} {!hideCaret && <ExpandMore size=\"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","testId","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","displayName"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,113 @@
+"use strict";
+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,
+    targetClassName,
+    popoverClassName,
+    isOpen: isOpenProp,
+    onInteraction,
+    onSelect,
+    onStateChange,
+    children,
+    "data-test-id": testId = "dropdown",
+    ...rest
+  } = props;
+  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]);
+  react.useEffect(() => {
+    if (hasOpened && isOpen === false) {
+      setTimeout(() => {
+        var _a, _b;
+        const current = triggerRef.current;
+        if (!current) {
+          return;
+        }
+        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]);
+  react.useEffect(() => {
+    setHasOpened(isOpen);
+    onStateChange == null ? void 0 : onStateChange({
+      isOpen
+    });
+  }, [isOpen]);
+  const renderTrigger = () => {
+    return react.cloneElement(parseChildren().target, {
+      "aria-haspopup": true,
+      "aria-expanded": isOpen ? true : false,
+      ref: triggerRef,
+      isopen: isOpen == null ? void 0 : isOpen.toString()
+    });
+  };
+  const renderContent = () => {
+    return react.cloneElement(parseChildren().content, {
+      onSelect: handleSelect
+    });
+  };
+  const handleSelect = (item) => {
+    setIsOpen(false);
+    onSelect == null ? void 0 : onSelect(item, {
+      isOpen: false
+    });
+  };
+  const handlePopoverInteraction = (nextIsOpen) => {
+    setIsOpen(nextIsOpen);
+  };
+  const parseChildren = () => {
+    const [targetChild, contentChild] = react.Children.toArray(children);
+    return {
+      target: targetChild,
+      content: contentChild
+    };
+  };
+  const popoverTargetClasses = classix.cx("Dropdown-target", targetClassName);
+  const popoverClasses = classix.cx("Dropdown", popoverClassName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, {
+    isOpen,
+    placement,
+    onInteraction: onInteraction || handlePopoverInteraction,
+    restrictHeight: false,
+    disabled,
+    targetClassName: popoverTargetClasses,
+    popoverClassName: popoverClasses,
+    "data-test-id": testId,
+    ...rest,
+    children: [renderTrigger(), renderContent()]
+  });
+};
+const DropdownButton = react.forwardRef((props, ref) => {
+  const {
+    children,
+    hideCaret,
+    "data-test-id": testId = "dropdown-button",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(button.Button, {
+    ...rest,
+    "data-test-id": testId,
+    ref,
+    children: [children, " ", !hideCaret && /* @__PURE__ */ jsxRuntime.jsx(icons.ExpandMore, {
+      size: "small"
+    })]
+  });
+});
+DropdownButton.displayName = "DropdownButton";
+exports.Dropdown = Dropdown;
+exports.DropdownButton = DropdownButton;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"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    'data-test-id': testId = 'dropdown',\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      data-test-id={testId}\n      {...rest}\n    >\n      {renderTrigger()}\n      {renderContent()}\n    </Popover>\n  );\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonProps } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { ExpandMore } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = ButtonProps & {\n  hideCaret?: boolean;\n};\n\nconst DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => {\n  const { children, hideCaret, 'data-test-id': testId = 'dropdown-button', ...rest } = props;\n\n  return (\n    <Button {...rest} data-test-id={testId} ref={ref}>\n      {children} {!hideCaret && <ExpandMore size=\"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","testId","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","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/dropdown",
-  "version": "0.5.4-alpha.0",
+  "version": "0.5.4-alpha.1",
   "status": "beta",
   "publishConfig": {
     "access": "public"
@@ -26,8 +26,8 @@
   "source": "src/index.ts",
   "dependencies": {
     "@launchpad-ui/button": "~0.7.1",
-    "@launchpad-ui/icons": "~0.5.4-alpha.0",
-    "@launchpad-ui/popover": "~0.8.4-alpha.0",
+    "@launchpad-ui/icons": "~0.5.4-alpha.1",
+    "@launchpad-ui/popover": "~0.8.4-alpha.1",
     "@launchpad-ui/tokens": "~0.1.5",
     "classix": "^2.1.13"
   },