@launchpad-ui/dropdown 0.6.146 → 0.6.147

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.es.js +83 -100
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +108 -103
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -1,110 +1,93 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
1
  import { Popover } from "@launchpad-ui/popover";
3
2
  import { mergeRefs } from "@react-aria/utils";
4
3
  import { cx } from "classix";
5
- import { useRef, useState, useEffect, cloneElement, Children, forwardRef } from "react";
4
+ import { Children, cloneElement, forwardRef, useEffect, useRef, useState } from "react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
6
  import { Button } from "@launchpad-ui/button";
7
7
  import { Icon } from "@launchpad-ui/icons";
8
+ /**
9
+ * @deprecated use `Menu` from `@launchpad-ui/components` instead
10
+ *
11
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
12
+ */
8
13
  const Dropdown = (props) => {
9
- const {
10
- placement,
11
- disabled,
12
- targetClassName,
13
- popoverClassName,
14
- isOpen: isOpenProp,
15
- onInteraction,
16
- onSelect,
17
- onStateChange,
18
- children,
19
- "data-test-id": testId = "dropdown",
20
- ...rest
21
- } = props;
22
- const triggerRef = useRef(null);
23
- const [isOpen, setIsOpen] = useState(isOpenProp ?? false);
24
- const [hasOpened, setHasOpened] = useState(isOpen);
25
- useEffect(() => {
26
- if (isOpenProp !== void 0) {
27
- setIsOpen(isOpenProp);
28
- }
29
- }, [isOpenProp]);
30
- useEffect(() => {
31
- if (hasOpened && isOpen === false) {
32
- setTimeout(() => {
33
- var _a, _b;
34
- const current = triggerRef.current;
35
- if (!current) {
36
- return;
37
- }
38
- const hasModal = (_a = current.closest) == null ? void 0 : _a.call(current, ".has-overlay");
39
- !hasModal && ((_b = current.focus) == null ? void 0 : _b.call(current));
40
- });
41
- }
42
- }, [isOpen, hasOpened]);
43
- useEffect(() => {
44
- setHasOpened(isOpen);
45
- onStateChange == null ? void 0 : onStateChange({ isOpen });
46
- }, [isOpen]);
47
- const renderTrigger = () => {
48
- const { target } = parseChildren();
49
- return /* @__PURE__ */ cloneElement(target, {
50
- "aria-haspopup": true,
51
- "aria-expanded": !!isOpen,
52
- ref: target.ref ? mergeRefs(target.ref, triggerRef) : triggerRef,
53
- isopen: isOpen == null ? void 0 : isOpen.toString()
54
- });
55
- };
56
- const renderContent = () => {
57
- return /* @__PURE__ */ cloneElement(parseChildren().content, {
58
- onSelect: handleSelect
59
- });
60
- };
61
- const handleSelect = (item) => {
62
- setIsOpen(false);
63
- onSelect == null ? void 0 : onSelect(item, { isOpen: false });
64
- };
65
- const handlePopoverInteraction = (nextIsOpen) => {
66
- setIsOpen(nextIsOpen);
67
- };
68
- const parseChildren = () => {
69
- const [targetChild, contentChild] = Children.toArray(children);
70
- return {
71
- target: targetChild,
72
- // biome-ignore lint/suspicious/noExplicitAny: <explanation>
73
- content: contentChild
74
- };
75
- };
76
- const popoverTargetClasses = cx("Dropdown-target", targetClassName);
77
- const popoverClasses = cx("Dropdown", popoverClassName);
78
- return /* @__PURE__ */ jsxs(
79
- Popover,
80
- {
81
- isOpen,
82
- placement,
83
- onInteraction: onInteraction || handlePopoverInteraction,
84
- restrictHeight: false,
85
- disabled,
86
- targetClassName: popoverTargetClasses,
87
- popoverClassName: popoverClasses,
88
- "data-test-id": testId,
89
- ...rest,
90
- children: [
91
- renderTrigger(),
92
- renderContent()
93
- ]
94
- }
95
- );
14
+ const { placement, disabled, targetClassName, popoverClassName, isOpen: isOpenProp, onInteraction, onSelect, onStateChange, children, "data-test-id": testId = "dropdown",...rest } = props;
15
+ const triggerRef = useRef(null);
16
+ const [isOpen, setIsOpen] = useState(isOpenProp ?? false);
17
+ const [hasOpened, setHasOpened] = useState(isOpen);
18
+ useEffect(() => {
19
+ if (isOpenProp !== void 0) setIsOpen(isOpenProp);
20
+ }, [isOpenProp]);
21
+ useEffect(() => {
22
+ if (hasOpened && isOpen === false) setTimeout(() => {
23
+ const current = triggerRef.current;
24
+ if (!current) return;
25
+ const hasModal = current.closest?.(".has-overlay");
26
+ !hasModal && current.focus?.();
27
+ });
28
+ }, [isOpen, hasOpened]);
29
+ useEffect(() => {
30
+ setHasOpened(isOpen);
31
+ onStateChange?.({ isOpen });
32
+ }, [isOpen]);
33
+ const renderTrigger = () => {
34
+ const { target } = parseChildren();
35
+ return /* @__PURE__ */ cloneElement(target, {
36
+ "aria-haspopup": true,
37
+ "aria-expanded": !!isOpen,
38
+ ref: target.ref ? mergeRefs(target.ref, triggerRef) : triggerRef,
39
+ isopen: isOpen?.toString()
40
+ });
41
+ };
42
+ const renderContent = () => {
43
+ return /* @__PURE__ */ cloneElement(parseChildren().content, { onSelect: handleSelect });
44
+ };
45
+ const handleSelect = (item) => {
46
+ setIsOpen(false);
47
+ onSelect?.(item, { isOpen: false });
48
+ };
49
+ const handlePopoverInteraction = (nextIsOpen) => {
50
+ setIsOpen(nextIsOpen);
51
+ };
52
+ const parseChildren = () => {
53
+ const [targetChild, contentChild] = Children.toArray(children);
54
+ return {
55
+ target: targetChild,
56
+ content: contentChild
57
+ };
58
+ };
59
+ const popoverTargetClasses = cx("Dropdown-target", targetClassName);
60
+ const popoverClasses = cx("Dropdown", popoverClassName);
61
+ return /* @__PURE__ */ jsxs(Popover, {
62
+ isOpen,
63
+ placement,
64
+ onInteraction: onInteraction || handlePopoverInteraction,
65
+ restrictHeight: false,
66
+ disabled,
67
+ targetClassName: popoverTargetClasses,
68
+ popoverClassName: popoverClasses,
69
+ "data-test-id": testId,
70
+ ...rest,
71
+ children: [renderTrigger(), renderContent()]
72
+ });
96
73
  };
97
74
  const DropdownButton = /* @__PURE__ */ forwardRef((props, ref) => {
98
- const { children, hideCaret, "data-test-id": testId = "dropdown-button", ...rest } = props;
99
- return /* @__PURE__ */ jsxs(Button, { ...rest, "data-test-id": testId, ref, children: [
100
- children,
101
- " ",
102
- !hideCaret && /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "small" })
103
- ] });
75
+ const { children, hideCaret, "data-test-id": testId = "dropdown-button",...rest } = props;
76
+ return /* @__PURE__ */ jsxs(Button, {
77
+ ...rest,
78
+ "data-test-id": testId,
79
+ ref,
80
+ children: [
81
+ children,
82
+ " ",
83
+ !hideCaret && /* @__PURE__ */ jsx(Icon, {
84
+ name: "chevron-down",
85
+ size: "small"
86
+ })
87
+ ]
88
+ });
104
89
  });
105
90
  DropdownButton.displayName = "DropdownButton";
106
- export {
107
- Dropdown,
108
- DropdownButton
109
- };
110
- //# sourceMappingURL=index.es.js.map
91
+ export { Dropdown, DropdownButton };
92
+
93
+ //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/Dropdown.tsx","../src/DropdownButton.tsx"],"sourcesContent":["import type { PopoverProps } from '@launchpad-ui/popover';\nimport type { AriaAttributes, ForwardedRef, FunctionComponentElement, ReactElement } from 'react';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport { mergeRefs } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n\tisOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n\tonSelect?: (item: T, stateChanges: DropdownState) => void;\n\tonStateChange?: (state: DropdownState) => void;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n\tconst {\n\t\tplacement,\n\t\tdisabled,\n\t\ttargetClassName,\n\t\tpopoverClassName,\n\t\tisOpen: isOpenProp,\n\t\tonInteraction,\n\t\tonSelect,\n\t\tonStateChange,\n\t\tchildren,\n\t\t'data-test-id': testId = 'dropdown',\n\t\t...rest\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement | null>(null);\n\tconst [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n\tconst [hasOpened, setHasOpened] = useState(isOpen);\n\n\tuseEffect(() => {\n\t\tif (isOpenProp !== undefined) {\n\t\t\tsetIsOpen(isOpenProp);\n\t\t}\n\t}, [isOpenProp]);\n\n\tuseEffect(() => {\n\t\t// Focus the button upon closing for convenient tabbing\n\t\tif (hasOpened && isOpen === false) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst current = triggerRef.current;\n\t\t\t\tif (!current) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n\t\t\t\t// we let the modal components control their own focus.\n\t\t\t\t// Note that this is not ideal since closing the modal will not cause the dropdown trigger\n\t\t\t\t// to regain focus.\n\t\t\t\tconst hasModal = current.closest?.('.has-overlay');\n\n\t\t\t\t!hasModal && current.focus?.();\n\t\t\t});\n\t\t}\n\t}, [isOpen, hasOpened]);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n\tuseEffect(() => {\n\t\tsetHasOpened(isOpen);\n\t\tonStateChange?.({ isOpen });\n\t}, [isOpen]);\n\n\tconst renderTrigger = () => {\n\t\tconst { target } = parseChildren();\n\t\treturn cloneElement(target, {\n\t\t\t'aria-haspopup': true,\n\t\t\t'aria-expanded': !!isOpen,\n\t\t\tref: target.ref ? mergeRefs(target.ref, triggerRef) : triggerRef,\n\t\t\tisopen: isOpen?.toString(),\n\t\t});\n\t};\n\n\tconst renderContent = () => {\n\t\treturn cloneElement(parseChildren().content, {\n\t\t\tonSelect: handleSelect,\n\t\t});\n\t};\n\n\tconst handleSelect = (item: T) => {\n\t\tsetIsOpen(false);\n\t\tonSelect?.(item, { isOpen: false });\n\t};\n\n\tconst handlePopoverInteraction = (nextIsOpen: boolean) => {\n\t\tsetIsOpen(nextIsOpen);\n\t};\n\n\tconst parseChildren = () => {\n\t\tconst [targetChild, contentChild] = Children.toArray(children);\n\t\treturn {\n\t\t\ttarget: targetChild as FunctionComponentElement<\n\t\t\t\tAriaAttributes & { ref: ForwardedRef<HTMLElement | undefined>; isopen: string }\n\t\t\t>,\n\t\t\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\n\t\t\tcontent: contentChild as ReactElement<any>,\n\t\t};\n\t};\n\n\tconst popoverTargetClasses = cx('Dropdown-target', targetClassName);\n\tconst popoverClasses = cx('Dropdown', popoverClassName);\n\n\treturn (\n\t\t<Popover\n\t\t\tisOpen={isOpen}\n\t\t\tplacement={placement}\n\t\t\tonInteraction={onInteraction || handlePopoverInteraction}\n\t\t\trestrictHeight={false}\n\t\t\tdisabled={disabled}\n\t\t\ttargetClassName={popoverTargetClasses}\n\t\t\tpopoverClassName={popoverClasses}\n\t\t\tdata-test-id={testId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{renderTrigger()}\n\t\t\t{renderContent()}\n\t\t</Popover>\n\t);\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonProps } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = ButtonProps & {\n\thideCaret?: boolean;\n};\n\nconst DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => {\n\tconst { children, hideCaret, 'data-test-id': testId = 'dropdown-button', ...rest } = props;\n\n\treturn (\n\t\t<Button {...rest} data-test-id={testId} ref={ref}>\n\t\t\t{children} {!hideCaret && <Icon name=\"chevron-down\" size=\"small\" />}\n\t\t</Button>\n\t);\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],"names":[],"mappings":";;;;;;;AAsBM,MAAA,WAAW,CAAqC,UAA4B;AAC3E,QAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,SAAS;AAAA,IACzB,GAAG;AAAA,EAAA,IACA;AAEE,QAAA,aAAa,OAA2B,IAAI;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,cAAc,KAAK;AACxD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAM;AAEjD,YAAU,MAAM;AACf,QAAI,eAAe,QAAW;AAC7B,gBAAU,UAAU;AAAA,IAAA;AAAA,EACrB,GACE,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AAEX,QAAA,aAAa,WAAW,OAAO;AAClC,iBAAW,MAAM;;AAChB,cAAM,UAAU,WAAW;AAC3B,YAAI,CAAC,SAAS;AACb;AAAA,QAAA;AAOK,cAAA,YAAW,aAAQ,YAAR,iCAAkB;AAElC,SAAA,cAAY,aAAQ,UAAR;AAAA,MAAgB,CAC7B;AAAA,IAAA;AAAA,EACF,GACE,CAAC,QAAQ,SAAS,CAAC;AAGtB,YAAU,MAAM;AACf,iBAAa,MAAM;AACH,mDAAA,EAAE;EAAQ,GACxB,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB,MAAM;AACrB,UAAA,EAAE,OAAO,IAAI,cAAc;AACjC,WAAO,6BAAa,QAAQ;AAAA,MAC3B,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,CAAC;AAAA,MACnB,KAAK,OAAO,MAAM,UAAU,OAAO,KAAK,UAAU,IAAI;AAAA,MACtD,QAAQ,iCAAQ;AAAA,IAAS,CACzB;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AACpB,WAAA,6BAAa,cAAc,EAAE,SAAS;AAAA,MAC5C,UAAU;AAAA,IAAA,CACV;AAAA,EACF;AAEM,QAAA,eAAe,CAAC,SAAY;AACjC,cAAU,KAAK;AACf,yCAAW,MAAM,EAAE,QAAQ,MAAA;AAAA,EAC5B;AAEM,QAAA,2BAA2B,CAAC,eAAwB;AACzD,cAAU,UAAU;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC3B,UAAM,CAAC,aAAa,YAAY,IAAI,SAAS,QAAQ,QAAQ;AACtD,WAAA;AAAA,MACN,QAAQ;AAAA;AAAA,MAIR,SAAS;AAAA,IACV;AAAA,EACD;AAEM,QAAA,uBAAuB,GAAG,mBAAmB,eAAe;AAC5D,QAAA,iBAAiB,GAAG,YAAY,gBAAgB;AAGrD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,iBAAiB;AAAA,MAChC,gBAAgB;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,MACjB,kBAAkB;AAAA,MAClB,gBAAc;AAAA,MACb,GAAG;AAAA,MAEH,UAAA;AAAA,QAAc,cAAA;AAAA,QACd,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB;AAEF;ACtHA,MAAM,iBAAiB,2BAAmD,CAAC,OAAO,QAAQ;AACnF,QAAA,EAAE,UAAU,WAAW,gBAAgB,SAAS,mBAAmB,GAAG,SAAS;AAErF,8BACE,QAAQ,EAAA,GAAG,MAAM,gBAAc,QAAQ,KACtC,UAAA;AAAA,IAAA;AAAA,IAAS;AAAA,IAAE,CAAC,aAAa,oBAAC,QAAK,MAAK,gBAAe,MAAK,QAAQ,CAAA;AAAA,EAAA,GAClE;AAEF,CAAC;AAED,eAAe,cAAc;"}
1
+ {"version":3,"file":"index.es.js","names":["props: DropdownProps<T>","item: T","nextIsOpen: boolean"],"sources":["../src/Dropdown.tsx","../src/DropdownButton.tsx"],"sourcesContent":["import type { PopoverProps } from '@launchpad-ui/popover';\nimport type { AriaAttributes, ForwardedRef, FunctionComponentElement, ReactElement } from 'react';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport { mergeRefs } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n\tisOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n\tonSelect?: (item: T, stateChanges: DropdownState) => void;\n\tonStateChange?: (state: DropdownState) => void;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n\tconst {\n\t\tplacement,\n\t\tdisabled,\n\t\ttargetClassName,\n\t\tpopoverClassName,\n\t\tisOpen: isOpenProp,\n\t\tonInteraction,\n\t\tonSelect,\n\t\tonStateChange,\n\t\tchildren,\n\t\t'data-test-id': testId = 'dropdown',\n\t\t...rest\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement | null>(null);\n\tconst [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n\tconst [hasOpened, setHasOpened] = useState(isOpen);\n\n\tuseEffect(() => {\n\t\tif (isOpenProp !== undefined) {\n\t\t\tsetIsOpen(isOpenProp);\n\t\t}\n\t}, [isOpenProp]);\n\n\tuseEffect(() => {\n\t\t// Focus the button upon closing for convenient tabbing\n\t\tif (hasOpened && isOpen === false) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst current = triggerRef.current;\n\t\t\t\tif (!current) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n\t\t\t\t// we let the modal components control their own focus.\n\t\t\t\t// Note that this is not ideal since closing the modal will not cause the dropdown trigger\n\t\t\t\t// to regain focus.\n\t\t\t\tconst hasModal = current.closest?.('.has-overlay');\n\n\t\t\t\t!hasModal && current.focus?.();\n\t\t\t});\n\t\t}\n\t}, [isOpen, hasOpened]);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n\tuseEffect(() => {\n\t\tsetHasOpened(isOpen);\n\t\tonStateChange?.({ isOpen });\n\t}, [isOpen]);\n\n\tconst renderTrigger = () => {\n\t\tconst { target } = parseChildren();\n\t\treturn cloneElement(target, {\n\t\t\t'aria-haspopup': true,\n\t\t\t'aria-expanded': !!isOpen,\n\t\t\tref: target.ref ? mergeRefs(target.ref, triggerRef) : triggerRef,\n\t\t\tisopen: isOpen?.toString(),\n\t\t});\n\t};\n\n\tconst renderContent = () => {\n\t\treturn cloneElement(parseChildren().content, {\n\t\t\tonSelect: handleSelect,\n\t\t});\n\t};\n\n\tconst handleSelect = (item: T) => {\n\t\tsetIsOpen(false);\n\t\tonSelect?.(item, { isOpen: false });\n\t};\n\n\tconst handlePopoverInteraction = (nextIsOpen: boolean) => {\n\t\tsetIsOpen(nextIsOpen);\n\t};\n\n\tconst parseChildren = () => {\n\t\tconst [targetChild, contentChild] = Children.toArray(children);\n\t\treturn {\n\t\t\ttarget: targetChild as FunctionComponentElement<\n\t\t\t\tAriaAttributes & { ref: ForwardedRef<HTMLElement | undefined>; isopen: string }\n\t\t\t>,\n\t\t\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\n\t\t\tcontent: contentChild as ReactElement<any>,\n\t\t};\n\t};\n\n\tconst popoverTargetClasses = cx('Dropdown-target', targetClassName);\n\tconst popoverClasses = cx('Dropdown', popoverClassName);\n\n\treturn (\n\t\t<Popover\n\t\t\tisOpen={isOpen}\n\t\t\tplacement={placement}\n\t\t\tonInteraction={onInteraction || handlePopoverInteraction}\n\t\t\trestrictHeight={false}\n\t\t\tdisabled={disabled}\n\t\t\ttargetClassName={popoverTargetClasses}\n\t\t\tpopoverClassName={popoverClasses}\n\t\t\tdata-test-id={testId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{renderTrigger()}\n\t\t\t{renderContent()}\n\t\t</Popover>\n\t);\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonProps } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = ButtonProps & {\n\thideCaret?: boolean;\n};\n\nconst DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => {\n\tconst { children, hideCaret, 'data-test-id': testId = 'dropdown-button', ...rest } = props;\n\n\treturn (\n\t\t<Button {...rest} data-test-id={testId} ref={ref}>\n\t\t\t{children} {!hideCaret && <Icon name=\"chevron-down\" size=\"small\" />}\n\t\t</Button>\n\t);\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,WAAW,CAAqCA,UAA4B;CACjF,MAAM,EACL,WACA,UACA,iBACA,kBACA,QAAQ,YACR,eACA,UACA,eACA,UACA,gBAAgB,SAAS,WACzB,GAAG,MACH,GAAG;CAEJ,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,CAAC,QAAQ,UAAU,GAAG,SAAS,cAAc,MAAM;CACzD,MAAM,CAAC,WAAW,aAAa,GAAG,SAAS,OAAO;AAElD,WAAU,MAAM;AACf,MAAI,oBAAA,EACH,WAAU,WAAW;CAEtB,GAAE,CAAC,UAAW,EAAC;AAEhB,WAAU,MAAM;AAEf,MAAI,aAAa,WAAW,MAC3B,YAAW,MAAM;GAChB,MAAM,UAAU,WAAW;AAC3B,QAAK,QACJ;GAOD,MAAM,WAAW,QAAQ,UAAU,eAAe;AAElD,IAAC,YAAY,QAAQ,SAAS;EAC9B,EAAC;CAEH,GAAE,CAAC,QAAQ,SAAU,EAAC;AAGvB,WAAU,MAAM;AACf,eAAa,OAAO;AACpB,kBAAgB,EAAE,OAAQ,EAAC;CAC3B,GAAE,CAAC,MAAO,EAAC;CAEZ,MAAM,gBAAgB,MAAM;EAC3B,MAAM,EAAE,QAAQ,GAAG,eAAe;AAClC,yBAAO,aAAa,QAAQ;GAC3B,iBAAiB;GACjB,mBAAmB;GACnB,KAAK,OAAO,MAAM,UAAU,OAAO,KAAK,WAAW,GAAG;GACtD,QAAQ,QAAQ,UAAA;EAChB,EAAC;CACF;CAED,MAAM,gBAAgB,MAAM;AAC3B,yBAAO,aAAa,eAAe,CAAC,SAAS,EAC5C,UAAU,aACV,EAAC;CACF;CAED,MAAM,eAAe,CAACC,SAAY;AACjC,YAAU,MAAM;AAChB,aAAW,MAAM,EAAE,QAAQ,MAAO,EAAC;CACnC;CAED,MAAM,2BAA2B,CAACC,eAAwB;AACzD,YAAU,WAAW;CACrB;CAED,MAAM,gBAAgB,MAAM;EAC3B,MAAM,CAAC,aAAa,aAAa,GAAG,SAAS,QAAQ,SAAS;AAC9D,SAAO;GACN,QAAQ;GAIR,SAAS;EACT;CACD;CAED,MAAM,uBAAuB,GAAG,mBAAmB,gBAAgB;CACnE,MAAM,iBAAiB,GAAG,YAAY,iBAAiB;AAEvD,wBACC,KAAC,SAAA;EACQ;EACG;EACX,eAAe,iBAAiB;EAChC,gBAAgB;EACN;EACV,iBAAiB;EACjB,kBAAkB;EAClB,gBAAc;EACd,GAAI;aAEH,eAAe,EACf,eAAe;GACP;AAEX;ACtHD,MAAM,iCAAiB,WAAmD,CAAC,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,WAAW,gBAAgB,SAAS,kBAAmB,GAAG,MAAM,GAAG;AAErF,wBACC,KAAC,QAAA;EAAO,GAAI;EAAM,gBAAc;EAAa;;GAC3C;GAAS;IAAG,6BAAa,IAAC,MAAA;IAAK,MAAK;IAAe,MAAK;;;GACjD;AAEV,EAAC;AAEF,eAAe,cAAc"}
package/dist/index.js CHANGED
@@ -1,110 +1,115 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const popover = require("@launchpad-ui/popover");
5
- const utils = require("@react-aria/utils");
6
- const classix = require("classix");
7
- const react = require("react");
8
- const button = require("@launchpad-ui/button");
9
- const icons = require("@launchpad-ui/icons");
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __copyProps = (to, from, except, desc) => {
9
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
10
+ key = keys[i];
11
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
12
+ get: ((k) => from[k]).bind(null, key),
13
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
14
+ });
15
+ }
16
+ return to;
17
+ };
18
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
19
+ value: mod,
20
+ enumerable: true
21
+ }) : target, mod));
22
+ const __launchpad_ui_popover = __toESM(require("@launchpad-ui/popover"));
23
+ const __react_aria_utils = __toESM(require("@react-aria/utils"));
24
+ const classix = __toESM(require("classix"));
25
+ const react = __toESM(require("react"));
26
+ const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
27
+ const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
28
+ const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
29
+ /**
30
+ * @deprecated use `Menu` from `@launchpad-ui/components` instead
31
+ *
32
+ * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
33
+ */
10
34
  const Dropdown = (props) => {
11
- const {
12
- placement,
13
- disabled,
14
- targetClassName,
15
- popoverClassName,
16
- isOpen: isOpenProp,
17
- onInteraction,
18
- onSelect,
19
- onStateChange,
20
- children,
21
- "data-test-id": testId = "dropdown",
22
- ...rest
23
- } = props;
24
- const triggerRef = react.useRef(null);
25
- const [isOpen, setIsOpen] = react.useState(isOpenProp ?? false);
26
- const [hasOpened, setHasOpened] = react.useState(isOpen);
27
- react.useEffect(() => {
28
- if (isOpenProp !== void 0) {
29
- setIsOpen(isOpenProp);
30
- }
31
- }, [isOpenProp]);
32
- react.useEffect(() => {
33
- if (hasOpened && isOpen === false) {
34
- setTimeout(() => {
35
- var _a, _b;
36
- const current = triggerRef.current;
37
- if (!current) {
38
- return;
39
- }
40
- const hasModal = (_a = current.closest) == null ? void 0 : _a.call(current, ".has-overlay");
41
- !hasModal && ((_b = current.focus) == null ? void 0 : _b.call(current));
42
- });
43
- }
44
- }, [isOpen, hasOpened]);
45
- react.useEffect(() => {
46
- setHasOpened(isOpen);
47
- onStateChange == null ? void 0 : onStateChange({ isOpen });
48
- }, [isOpen]);
49
- const renderTrigger = () => {
50
- const { target } = parseChildren();
51
- return /* @__PURE__ */ react.cloneElement(target, {
52
- "aria-haspopup": true,
53
- "aria-expanded": !!isOpen,
54
- ref: target.ref ? utils.mergeRefs(target.ref, triggerRef) : triggerRef,
55
- isopen: isOpen == null ? void 0 : isOpen.toString()
56
- });
57
- };
58
- const renderContent = () => {
59
- return /* @__PURE__ */ react.cloneElement(parseChildren().content, {
60
- onSelect: handleSelect
61
- });
62
- };
63
- const handleSelect = (item) => {
64
- setIsOpen(false);
65
- onSelect == null ? void 0 : onSelect(item, { isOpen: false });
66
- };
67
- const handlePopoverInteraction = (nextIsOpen) => {
68
- setIsOpen(nextIsOpen);
69
- };
70
- const parseChildren = () => {
71
- const [targetChild, contentChild] = react.Children.toArray(children);
72
- return {
73
- target: targetChild,
74
- // biome-ignore lint/suspicious/noExplicitAny: <explanation>
75
- content: contentChild
76
- };
77
- };
78
- const popoverTargetClasses = classix.cx("Dropdown-target", targetClassName);
79
- const popoverClasses = classix.cx("Dropdown", popoverClassName);
80
- return /* @__PURE__ */ jsxRuntime.jsxs(
81
- popover.Popover,
82
- {
83
- isOpen,
84
- placement,
85
- onInteraction: onInteraction || handlePopoverInteraction,
86
- restrictHeight: false,
87
- disabled,
88
- targetClassName: popoverTargetClasses,
89
- popoverClassName: popoverClasses,
90
- "data-test-id": testId,
91
- ...rest,
92
- children: [
93
- renderTrigger(),
94
- renderContent()
95
- ]
96
- }
97
- );
35
+ const { placement, disabled, targetClassName, popoverClassName, isOpen: isOpenProp, onInteraction, onSelect, onStateChange, children, "data-test-id": testId = "dropdown",...rest } = props;
36
+ const triggerRef = (0, react.useRef)(null);
37
+ const [isOpen, setIsOpen] = (0, react.useState)(isOpenProp ?? false);
38
+ const [hasOpened, setHasOpened] = (0, react.useState)(isOpen);
39
+ (0, react.useEffect)(() => {
40
+ if (isOpenProp !== void 0) setIsOpen(isOpenProp);
41
+ }, [isOpenProp]);
42
+ (0, react.useEffect)(() => {
43
+ if (hasOpened && isOpen === false) setTimeout(() => {
44
+ const current = triggerRef.current;
45
+ if (!current) return;
46
+ const hasModal = current.closest?.(".has-overlay");
47
+ !hasModal && current.focus?.();
48
+ });
49
+ }, [isOpen, hasOpened]);
50
+ (0, react.useEffect)(() => {
51
+ setHasOpened(isOpen);
52
+ onStateChange?.({ isOpen });
53
+ }, [isOpen]);
54
+ const renderTrigger = () => {
55
+ const { target } = parseChildren();
56
+ return /* @__PURE__ */ (0, react.cloneElement)(target, {
57
+ "aria-haspopup": true,
58
+ "aria-expanded": !!isOpen,
59
+ ref: target.ref ? (0, __react_aria_utils.mergeRefs)(target.ref, triggerRef) : triggerRef,
60
+ isopen: isOpen?.toString()
61
+ });
62
+ };
63
+ const renderContent = () => {
64
+ return /* @__PURE__ */ (0, react.cloneElement)(parseChildren().content, { onSelect: handleSelect });
65
+ };
66
+ const handleSelect = (item) => {
67
+ setIsOpen(false);
68
+ onSelect?.(item, { isOpen: false });
69
+ };
70
+ const handlePopoverInteraction = (nextIsOpen) => {
71
+ setIsOpen(nextIsOpen);
72
+ };
73
+ const parseChildren = () => {
74
+ const [targetChild, contentChild] = react.Children.toArray(children);
75
+ return {
76
+ target: targetChild,
77
+ content: contentChild
78
+ };
79
+ };
80
+ const popoverTargetClasses = (0, classix.cx)("Dropdown-target", targetClassName);
81
+ const popoverClasses = (0, classix.cx)("Dropdown", popoverClassName);
82
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_popover.Popover, {
83
+ isOpen,
84
+ placement,
85
+ onInteraction: onInteraction || handlePopoverInteraction,
86
+ restrictHeight: false,
87
+ disabled,
88
+ targetClassName: popoverTargetClasses,
89
+ popoverClassName: popoverClasses,
90
+ "data-test-id": testId,
91
+ ...rest,
92
+ children: [renderTrigger(), renderContent()]
93
+ });
98
94
  };
99
- const DropdownButton = /* @__PURE__ */ react.forwardRef((props, ref) => {
100
- const { children, hideCaret, "data-test-id": testId = "dropdown-button", ...rest } = props;
101
- return /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { ...rest, "data-test-id": testId, ref, children: [
102
- children,
103
- " ",
104
- !hideCaret && /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down", size: "small" })
105
- ] });
95
+ const DropdownButton = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
96
+ const { children, hideCaret, "data-test-id": testId = "dropdown-button",...rest } = props;
97
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_button.Button, {
98
+ ...rest,
99
+ "data-test-id": testId,
100
+ ref,
101
+ children: [
102
+ children,
103
+ " ",
104
+ !hideCaret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
105
+ name: "chevron-down",
106
+ size: "small"
107
+ })
108
+ ]
109
+ });
106
110
  });
107
111
  DropdownButton.displayName = "DropdownButton";
108
112
  exports.Dropdown = Dropdown;
109
113
  exports.DropdownButton = DropdownButton;
110
- //# sourceMappingURL=index.js.map
114
+
115
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/Dropdown.tsx","../src/DropdownButton.tsx"],"sourcesContent":["import type { PopoverProps } from '@launchpad-ui/popover';\nimport type { AriaAttributes, ForwardedRef, FunctionComponentElement, ReactElement } from 'react';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport { mergeRefs } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n\tisOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n\tonSelect?: (item: T, stateChanges: DropdownState) => void;\n\tonStateChange?: (state: DropdownState) => void;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n\tconst {\n\t\tplacement,\n\t\tdisabled,\n\t\ttargetClassName,\n\t\tpopoverClassName,\n\t\tisOpen: isOpenProp,\n\t\tonInteraction,\n\t\tonSelect,\n\t\tonStateChange,\n\t\tchildren,\n\t\t'data-test-id': testId = 'dropdown',\n\t\t...rest\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement | null>(null);\n\tconst [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n\tconst [hasOpened, setHasOpened] = useState(isOpen);\n\n\tuseEffect(() => {\n\t\tif (isOpenProp !== undefined) {\n\t\t\tsetIsOpen(isOpenProp);\n\t\t}\n\t}, [isOpenProp]);\n\n\tuseEffect(() => {\n\t\t// Focus the button upon closing for convenient tabbing\n\t\tif (hasOpened && isOpen === false) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst current = triggerRef.current;\n\t\t\t\tif (!current) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n\t\t\t\t// we let the modal components control their own focus.\n\t\t\t\t// Note that this is not ideal since closing the modal will not cause the dropdown trigger\n\t\t\t\t// to regain focus.\n\t\t\t\tconst hasModal = current.closest?.('.has-overlay');\n\n\t\t\t\t!hasModal && current.focus?.();\n\t\t\t});\n\t\t}\n\t}, [isOpen, hasOpened]);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n\tuseEffect(() => {\n\t\tsetHasOpened(isOpen);\n\t\tonStateChange?.({ isOpen });\n\t}, [isOpen]);\n\n\tconst renderTrigger = () => {\n\t\tconst { target } = parseChildren();\n\t\treturn cloneElement(target, {\n\t\t\t'aria-haspopup': true,\n\t\t\t'aria-expanded': !!isOpen,\n\t\t\tref: target.ref ? mergeRefs(target.ref, triggerRef) : triggerRef,\n\t\t\tisopen: isOpen?.toString(),\n\t\t});\n\t};\n\n\tconst renderContent = () => {\n\t\treturn cloneElement(parseChildren().content, {\n\t\t\tonSelect: handleSelect,\n\t\t});\n\t};\n\n\tconst handleSelect = (item: T) => {\n\t\tsetIsOpen(false);\n\t\tonSelect?.(item, { isOpen: false });\n\t};\n\n\tconst handlePopoverInteraction = (nextIsOpen: boolean) => {\n\t\tsetIsOpen(nextIsOpen);\n\t};\n\n\tconst parseChildren = () => {\n\t\tconst [targetChild, contentChild] = Children.toArray(children);\n\t\treturn {\n\t\t\ttarget: targetChild as FunctionComponentElement<\n\t\t\t\tAriaAttributes & { ref: ForwardedRef<HTMLElement | undefined>; isopen: string }\n\t\t\t>,\n\t\t\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\n\t\t\tcontent: contentChild as ReactElement<any>,\n\t\t};\n\t};\n\n\tconst popoverTargetClasses = cx('Dropdown-target', targetClassName);\n\tconst popoverClasses = cx('Dropdown', popoverClassName);\n\n\treturn (\n\t\t<Popover\n\t\t\tisOpen={isOpen}\n\t\t\tplacement={placement}\n\t\t\tonInteraction={onInteraction || handlePopoverInteraction}\n\t\t\trestrictHeight={false}\n\t\t\tdisabled={disabled}\n\t\t\ttargetClassName={popoverTargetClasses}\n\t\t\tpopoverClassName={popoverClasses}\n\t\t\tdata-test-id={testId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{renderTrigger()}\n\t\t\t{renderContent()}\n\t\t</Popover>\n\t);\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonProps } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = ButtonProps & {\n\thideCaret?: boolean;\n};\n\nconst DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => {\n\tconst { children, hideCaret, 'data-test-id': testId = 'dropdown-button', ...rest } = props;\n\n\treturn (\n\t\t<Button {...rest} data-test-id={testId} ref={ref}>\n\t\t\t{children} {!hideCaret && <Icon name=\"chevron-down\" size=\"small\" />}\n\t\t</Button>\n\t);\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],"names":["useRef","useState","useEffect","cloneElement","mergeRefs","Children","cx","jsxs","Popover","forwardRef","Button","jsx","Icon"],"mappings":";;;;;;;;;AAsBM,MAAA,WAAW,CAAqC,UAA4B;AAC3E,QAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,SAAS;AAAA,IACzB,GAAG;AAAA,EAAA,IACA;AAEE,QAAA,aAAaA,aAA2B,IAAI;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAS,cAAc,KAAK;AACxD,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,MAAM;AAEjDC,QAAAA,UAAU,MAAM;AACf,QAAI,eAAe,QAAW;AAC7B,gBAAU,UAAU;AAAA,IAAA;AAAA,EACrB,GACE,CAAC,UAAU,CAAC;AAEfA,QAAAA,UAAU,MAAM;AAEX,QAAA,aAAa,WAAW,OAAO;AAClC,iBAAW,MAAM;;AAChB,cAAM,UAAU,WAAW;AAC3B,YAAI,CAAC,SAAS;AACb;AAAA,QAAA;AAOK,cAAA,YAAW,aAAQ,YAAR,iCAAkB;AAElC,SAAA,cAAY,aAAQ,UAAR;AAAA,MAAgB,CAC7B;AAAA,IAAA;AAAA,EACF,GACE,CAAC,QAAQ,SAAS,CAAC;AAGtBA,QAAAA,UAAU,MAAM;AACf,iBAAa,MAAM;AACH,mDAAA,EAAE;EAAQ,GACxB,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB,MAAM;AACrB,UAAA,EAAE,OAAO,IAAI,cAAc;AACjC,WAAOC,sBAAAA,aAAa,QAAQ;AAAA,MAC3B,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,CAAC;AAAA,MACnB,KAAK,OAAO,MAAMC,MAAAA,UAAU,OAAO,KAAK,UAAU,IAAI;AAAA,MACtD,QAAQ,iCAAQ;AAAA,IAAS,CACzB;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AACpB,WAAAD,sBAAA,aAAa,cAAc,EAAE,SAAS;AAAA,MAC5C,UAAU;AAAA,IAAA,CACV;AAAA,EACF;AAEM,QAAA,eAAe,CAAC,SAAY;AACjC,cAAU,KAAK;AACf,yCAAW,MAAM,EAAE,QAAQ,MAAA;AAAA,EAC5B;AAEM,QAAA,2BAA2B,CAAC,eAAwB;AACzD,cAAU,UAAU;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC3B,UAAM,CAAC,aAAa,YAAY,IAAIE,MAAAA,SAAS,QAAQ,QAAQ;AACtD,WAAA;AAAA,MACN,QAAQ;AAAA;AAAA,MAIR,SAAS;AAAA,IACV;AAAA,EACD;AAEM,QAAA,uBAAuBC,QAAAA,GAAG,mBAAmB,eAAe;AAC5D,QAAA,iBAAiBA,QAAAA,GAAG,YAAY,gBAAgB;AAGrD,SAAAC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,iBAAiB;AAAA,MAChC,gBAAgB;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,MACjB,kBAAkB;AAAA,MAClB,gBAAc;AAAA,MACb,GAAG;AAAA,MAEH,UAAA;AAAA,QAAc,cAAA;AAAA,QACd,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB;AAEF;ACtHA,MAAM,iBAAiBC,sBAAA,WAAmD,CAAC,OAAO,QAAQ;AACnF,QAAA,EAAE,UAAU,WAAW,gBAAgB,SAAS,mBAAmB,GAAG,SAAS;AAErF,yCACEC,OAAQ,QAAA,EAAA,GAAG,MAAM,gBAAc,QAAQ,KACtC,UAAA;AAAA,IAAA;AAAA,IAAS;AAAA,IAAE,CAAC,aAAaC,2BAAAA,IAACC,cAAK,MAAK,gBAAe,MAAK,QAAQ,CAAA;AAAA,EAAA,GAClE;AAEF,CAAC;AAED,eAAe,cAAc;;;"}
1
+ {"version":3,"file":"index.js","names":["props: DropdownProps<T>","item: T","nextIsOpen: boolean"],"sources":["../src/Dropdown.tsx","../src/DropdownButton.tsx"],"sourcesContent":["import type { PopoverProps } from '@launchpad-ui/popover';\nimport type { AriaAttributes, ForwardedRef, FunctionComponentElement, ReactElement } from 'react';\n\nimport { Popover } from '@launchpad-ui/popover';\nimport { mergeRefs } from '@react-aria/utils';\nimport { cx } from 'classix';\nimport { Children, cloneElement, useEffect, useRef, useState } from 'react';\n\ntype DropdownState = {\n\tisOpen?: boolean;\n};\n\ntype DropdownProps<T extends string | object | number> = PopoverProps & {\n\tonSelect?: (item: T, stateChanges: DropdownState) => void;\n\tonStateChange?: (state: DropdownState) => void;\n};\n\n/**\n * @deprecated use `Menu` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs\n */\nconst Dropdown = <T extends string | object | number>(props: DropdownProps<T>) => {\n\tconst {\n\t\tplacement,\n\t\tdisabled,\n\t\ttargetClassName,\n\t\tpopoverClassName,\n\t\tisOpen: isOpenProp,\n\t\tonInteraction,\n\t\tonSelect,\n\t\tonStateChange,\n\t\tchildren,\n\t\t'data-test-id': testId = 'dropdown',\n\t\t...rest\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement | null>(null);\n\tconst [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n\tconst [hasOpened, setHasOpened] = useState(isOpen);\n\n\tuseEffect(() => {\n\t\tif (isOpenProp !== undefined) {\n\t\t\tsetIsOpen(isOpenProp);\n\t\t}\n\t}, [isOpenProp]);\n\n\tuseEffect(() => {\n\t\t// Focus the button upon closing for convenient tabbing\n\t\tif (hasOpened && isOpen === false) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst current = triggerRef.current;\n\t\t\t\tif (!current) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// If a dropdown menu item triggers a modal, we do not want to focus the trigger. Instead\n\t\t\t\t// we let the modal components control their own focus.\n\t\t\t\t// Note that this is not ideal since closing the modal will not cause the dropdown trigger\n\t\t\t\t// to regain focus.\n\t\t\t\tconst hasModal = current.closest?.('.has-overlay');\n\n\t\t\t\t!hasModal && current.focus?.();\n\t\t\t});\n\t\t}\n\t}, [isOpen, hasOpened]);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n\tuseEffect(() => {\n\t\tsetHasOpened(isOpen);\n\t\tonStateChange?.({ isOpen });\n\t}, [isOpen]);\n\n\tconst renderTrigger = () => {\n\t\tconst { target } = parseChildren();\n\t\treturn cloneElement(target, {\n\t\t\t'aria-haspopup': true,\n\t\t\t'aria-expanded': !!isOpen,\n\t\t\tref: target.ref ? mergeRefs(target.ref, triggerRef) : triggerRef,\n\t\t\tisopen: isOpen?.toString(),\n\t\t});\n\t};\n\n\tconst renderContent = () => {\n\t\treturn cloneElement(parseChildren().content, {\n\t\t\tonSelect: handleSelect,\n\t\t});\n\t};\n\n\tconst handleSelect = (item: T) => {\n\t\tsetIsOpen(false);\n\t\tonSelect?.(item, { isOpen: false });\n\t};\n\n\tconst handlePopoverInteraction = (nextIsOpen: boolean) => {\n\t\tsetIsOpen(nextIsOpen);\n\t};\n\n\tconst parseChildren = () => {\n\t\tconst [targetChild, contentChild] = Children.toArray(children);\n\t\treturn {\n\t\t\ttarget: targetChild as FunctionComponentElement<\n\t\t\t\tAriaAttributes & { ref: ForwardedRef<HTMLElement | undefined>; isopen: string }\n\t\t\t>,\n\t\t\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\n\t\t\tcontent: contentChild as ReactElement<any>,\n\t\t};\n\t};\n\n\tconst popoverTargetClasses = cx('Dropdown-target', targetClassName);\n\tconst popoverClasses = cx('Dropdown', popoverClassName);\n\n\treturn (\n\t\t<Popover\n\t\t\tisOpen={isOpen}\n\t\t\tplacement={placement}\n\t\t\tonInteraction={onInteraction || handlePopoverInteraction}\n\t\t\trestrictHeight={false}\n\t\t\tdisabled={disabled}\n\t\t\ttargetClassName={popoverTargetClasses}\n\t\t\tpopoverClassName={popoverClasses}\n\t\t\tdata-test-id={testId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{renderTrigger()}\n\t\t\t{renderContent()}\n\t\t</Popover>\n\t);\n};\n\nexport { Dropdown };\nexport type { DropdownProps };\n","import type { ButtonProps } from '@launchpad-ui/button';\n\nimport { Button } from '@launchpad-ui/button';\nimport { Icon } from '@launchpad-ui/icons';\nimport { forwardRef } from 'react';\n\ntype DropdownButtonProps = ButtonProps & {\n\thideCaret?: boolean;\n};\n\nconst DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => {\n\tconst { children, hideCaret, 'data-test-id': testId = 'dropdown-button', ...rest } = props;\n\n\treturn (\n\t\t<Button {...rest} data-test-id={testId} ref={ref}>\n\t\t\t{children} {!hideCaret && <Icon name=\"chevron-down\" size=\"small\" />}\n\t\t</Button>\n\t);\n});\n\nDropdownButton.displayName = 'DropdownButton';\n\nexport { DropdownButton };\nexport type { DropdownButtonProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,WAAW,CAAqCA,UAA4B;CACjF,MAAM,EACL,WACA,UACA,iBACA,kBACA,QAAQ,YACR,eACA,UACA,eACA,UACA,gBAAgB,SAAS,WACzB,GAAG,MACH,GAAG;CAEJ,MAAM,aAAa,CAAA,GAAA,MAAA,QAA2B,KAAK;CACnD,MAAM,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,MAAA,UAAS,cAAc,MAAM;CACzD,MAAM,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,MAAA,UAAS,OAAO;AAElD,EAAA,GAAA,MAAA,WAAU,MAAM;AACf,MAAI,oBAAA,EACH,WAAU,WAAW;CAEtB,GAAE,CAAC,UAAW,EAAC;AAEhB,EAAA,GAAA,MAAA,WAAU,MAAM;AAEf,MAAI,aAAa,WAAW,MAC3B,YAAW,MAAM;GAChB,MAAM,UAAU,WAAW;AAC3B,QAAK,QACJ;GAOD,MAAM,WAAW,QAAQ,UAAU,eAAe;AAElD,IAAC,YAAY,QAAQ,SAAS;EAC9B,EAAC;CAEH,GAAE,CAAC,QAAQ,SAAU,EAAC;AAGvB,EAAA,GAAA,MAAA,WAAU,MAAM;AACf,eAAa,OAAO;AACpB,kBAAgB,EAAE,OAAQ,EAAC;CAC3B,GAAE,CAAC,MAAO,EAAC;CAEZ,MAAM,gBAAgB,MAAM;EAC3B,MAAM,EAAE,QAAQ,GAAG,eAAe;AAClC,yBAAO,CAAA,GAAA,MAAA,cAAa,QAAQ;GAC3B,iBAAiB;GACjB,mBAAmB;GACnB,KAAK,OAAO,MAAM,CAAA,GAAA,mBAAA,WAAU,OAAO,KAAK,WAAW,GAAG;GACtD,QAAQ,QAAQ,UAAA;EAChB,EAAC;CACF;CAED,MAAM,gBAAgB,MAAM;AAC3B,yBAAO,CAAA,GAAA,MAAA,cAAa,eAAe,CAAC,SAAS,EAC5C,UAAU,aACV,EAAC;CACF;CAED,MAAM,eAAe,CAACC,SAAY;AACjC,YAAU,MAAM;AAChB,aAAW,MAAM,EAAE,QAAQ,MAAO,EAAC;CACnC;CAED,MAAM,2BAA2B,CAACC,eAAwB;AACzD,YAAU,WAAW;CACrB;CAED,MAAM,gBAAgB,MAAM;EAC3B,MAAM,CAAC,aAAa,aAAa,GAAG,MAAA,SAAS,QAAQ,SAAS;AAC9D,SAAO;GACN,QAAQ;GAIR,SAAS;EACT;CACD;CAED,MAAM,uBAAuB,CAAA,GAAA,QAAA,IAAG,mBAAmB,gBAAgB;CACnE,MAAM,iBAAiB,CAAA,GAAA,QAAA,IAAG,YAAY,iBAAiB;AAEvD,wBACC,CAAA,GAAA,kBAAA,MAAC,uBAAA,SAAA;EACQ;EACG;EACX,eAAe,iBAAiB;EAChC,gBAAgB;EACN;EACV,iBAAiB;EACjB,kBAAkB;EAClB,gBAAc;EACd,GAAI;aAEH,eAAe,EACf,eAAe;GACP;AAEX;ACtHD,MAAM,iCAAiB,CAAA,GAAA,MAAA,YAAmD,CAAC,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,WAAW,gBAAgB,SAAS,kBAAmB,GAAG,MAAM,GAAG;AAErF,wBACC,CAAA,GAAA,kBAAA,MAAC,sBAAA,QAAA;EAAO,GAAI;EAAM,gBAAc;EAAa;;GAC3C;GAAS;IAAG,6BAAa,CAAA,GAAA,kBAAA,KAAC,qBAAA,MAAA;IAAK,MAAK;IAAe,MAAK;;;GACjD;AAEV,EAAC;AAEF,eAAe,cAAc"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/dropdown",
3
- "version": "0.6.146",
3
+ "version": "0.6.147",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -32,8 +32,8 @@
32
32
  "dependencies": {
33
33
  "@react-aria/utils": "3.28.2",
34
34
  "classix": "2.2.0",
35
- "@launchpad-ui/button": "~0.12.50",
36
- "@launchpad-ui/icons": "~0.21.9",
35
+ "@launchpad-ui/button": "~0.12.51",
36
+ "@launchpad-ui/icons": "~0.21.10",
37
37
  "@launchpad-ui/popover": "~0.11.41",
38
38
  "@launchpad-ui/tokens": "~0.12.3"
39
39
  },