@launchpad-ui/dropdown 0.10.10 → 0.10.12
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.
- package/package.json +3 -3
- package/dist/Dropdown.d.ts +0 -17
- package/dist/Dropdown.d.ts.map +0 -1
- package/dist/DropdownButton.d.ts +0 -21
- package/dist/DropdownButton.d.ts.map +0 -1
- package/dist/index.d.ts +0 -5
- package/dist/index.d.ts.map +0 -1
- package/dist/index.es.js +0 -93
- package/dist/index.es.js.map +0 -1
- package/dist/index.js +0 -114
- package/dist/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launchpad-ui/dropdown",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.12",
|
|
4
4
|
"description": "An element that displays a list of actions or options to a user.",
|
|
5
5
|
"repository": "launchdarkly/launchpad-ui",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"classix": "2.2.0",
|
|
23
|
-
"@launchpad-ui/button": "~0.15.
|
|
24
|
-
"@launchpad-ui/icons": "~0.25.
|
|
23
|
+
"@launchpad-ui/button": "~0.15.12",
|
|
24
|
+
"@launchpad-ui/icons": "~0.25.3",
|
|
25
25
|
"@launchpad-ui/popover": "~0.14.2",
|
|
26
26
|
"@launchpad-ui/tokens": "~0.15.1"
|
|
27
27
|
},
|
package/dist/Dropdown.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { PopoverProps } from '@launchpad-ui/popover';
|
|
2
|
-
type DropdownState = {
|
|
3
|
-
isOpen?: boolean;
|
|
4
|
-
};
|
|
5
|
-
type DropdownProps<T extends string | object | number> = PopoverProps & {
|
|
6
|
-
onSelect?: (item: T, stateChanges: DropdownState) => void;
|
|
7
|
-
onStateChange?: (state: DropdownState) => void;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated use `Menu` from `@launchpad-ui/components` instead
|
|
11
|
-
*
|
|
12
|
-
* https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
|
|
13
|
-
*/
|
|
14
|
-
declare const Dropdown: <T extends string | object | number>(props: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export { Dropdown };
|
|
16
|
-
export type { DropdownProps };
|
|
17
|
-
//# sourceMappingURL=Dropdown.d.ts.map
|
package/dist/Dropdown.d.ts.map
DELETED
|
@@ -1 +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;AAQ1D,KAAK,aAAa,GAAG;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,YAAY,GAAG;IACvE,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;CAC/C,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,aAAa,CAAC,CAAC,CAAC,4CA0G5E,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/DropdownButton.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { ButtonProps } from '@launchpad-ui/button';
|
|
2
|
-
type DropdownButtonProps = ButtonProps & {
|
|
3
|
-
hideCaret?: boolean;
|
|
4
|
-
};
|
|
5
|
-
declare const DropdownButton: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
6
|
-
isLoading?: boolean;
|
|
7
|
-
loadingText?: string | import("react").JSX.Element;
|
|
8
|
-
size?: "tiny" | "small" | "medium" | "big";
|
|
9
|
-
kind?: "default" | "primary" | "destructive" | "minimal" | "link" | "close" | "primaryFlair" | "defaultFlair" | "minimalFlair";
|
|
10
|
-
fit?: boolean;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
icon?: import("react").ReactElement<Omit<import("@launchpad-ui/icons").IconProps, "size">>;
|
|
13
|
-
renderIconFirst?: boolean;
|
|
14
|
-
asChild?: boolean;
|
|
15
|
-
'data-test-id'?: string;
|
|
16
|
-
} & {
|
|
17
|
-
hideCaret?: boolean;
|
|
18
|
-
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
19
|
-
export { DropdownButton };
|
|
20
|
-
export type { DropdownButtonProps };
|
|
21
|
-
//# sourceMappingURL=DropdownButton.d.ts.map
|
|
@@ -1 +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,KAAK,mBAAmB,GAAG,WAAW,GAAG;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;;gBAHP,OAAO;qDAWlB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}
|
package/dist/index.d.ts
DELETED
package/dist/index.d.ts.map
DELETED
|
@@ -1 +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;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/index.es.js
DELETED
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { Popover } from "@launchpad-ui/popover";
|
|
2
|
-
import { mergeRefs } from "@react-aria/utils";
|
|
3
|
-
import { cx } from "classix";
|
|
4
|
-
import { Children, cloneElement, forwardRef, useEffect, useRef, useState } from "react";
|
|
5
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { Button } from "@launchpad-ui/button";
|
|
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
|
-
*/
|
|
13
|
-
const Dropdown = (props) => {
|
|
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
|
-
});
|
|
73
|
-
};
|
|
74
|
-
const DropdownButton = /* @__PURE__ */ forwardRef((props, ref) => {
|
|
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
|
-
});
|
|
89
|
-
});
|
|
90
|
-
DropdownButton.displayName = "DropdownButton";
|
|
91
|
-
export { Dropdown, DropdownButton };
|
|
92
|
-
|
|
93
|
-
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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: ignore\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: ignore\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
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
9
|
-
key = keys[i];
|
|
10
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
-
get: ((k) => from[k]).bind(null, key),
|
|
12
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
18
|
-
value: mod,
|
|
19
|
-
enumerable: true
|
|
20
|
-
}) : target, mod));
|
|
21
|
-
const __launchpad_ui_popover = __toESM(require("@launchpad-ui/popover"));
|
|
22
|
-
const __react_aria_utils = __toESM(require("@react-aria/utils"));
|
|
23
|
-
const classix = __toESM(require("classix"));
|
|
24
|
-
const react = __toESM(require("react"));
|
|
25
|
-
const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
|
|
26
|
-
const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
|
|
27
|
-
const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
|
|
28
|
-
/**
|
|
29
|
-
* @deprecated use `Menu` from `@launchpad-ui/components` instead
|
|
30
|
-
*
|
|
31
|
-
* https://launchpad.launchdarkly.com/?path=/docs/components-collections-menu--docs
|
|
32
|
-
*/
|
|
33
|
-
const Dropdown = (props) => {
|
|
34
|
-
const { placement, disabled, targetClassName, popoverClassName, isOpen: isOpenProp, onInteraction, onSelect, onStateChange, children, "data-test-id": testId = "dropdown",...rest } = props;
|
|
35
|
-
const triggerRef = (0, react.useRef)(null);
|
|
36
|
-
const [isOpen, setIsOpen] = (0, react.useState)(isOpenProp ?? false);
|
|
37
|
-
const [hasOpened, setHasOpened] = (0, react.useState)(isOpen);
|
|
38
|
-
(0, react.useEffect)(() => {
|
|
39
|
-
if (isOpenProp !== void 0) setIsOpen(isOpenProp);
|
|
40
|
-
}, [isOpenProp]);
|
|
41
|
-
(0, react.useEffect)(() => {
|
|
42
|
-
if (hasOpened && isOpen === false) setTimeout(() => {
|
|
43
|
-
const current = triggerRef.current;
|
|
44
|
-
if (!current) return;
|
|
45
|
-
const hasModal = current.closest?.(".has-overlay");
|
|
46
|
-
!hasModal && current.focus?.();
|
|
47
|
-
});
|
|
48
|
-
}, [isOpen, hasOpened]);
|
|
49
|
-
(0, react.useEffect)(() => {
|
|
50
|
-
setHasOpened(isOpen);
|
|
51
|
-
onStateChange?.({ isOpen });
|
|
52
|
-
}, [isOpen]);
|
|
53
|
-
const renderTrigger = () => {
|
|
54
|
-
const { target } = parseChildren();
|
|
55
|
-
return /* @__PURE__ */ (0, react.cloneElement)(target, {
|
|
56
|
-
"aria-haspopup": true,
|
|
57
|
-
"aria-expanded": !!isOpen,
|
|
58
|
-
ref: target.ref ? (0, __react_aria_utils.mergeRefs)(target.ref, triggerRef) : triggerRef,
|
|
59
|
-
isopen: isOpen?.toString()
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
const renderContent = () => {
|
|
63
|
-
return /* @__PURE__ */ (0, react.cloneElement)(parseChildren().content, { onSelect: handleSelect });
|
|
64
|
-
};
|
|
65
|
-
const handleSelect = (item) => {
|
|
66
|
-
setIsOpen(false);
|
|
67
|
-
onSelect?.(item, { isOpen: false });
|
|
68
|
-
};
|
|
69
|
-
const handlePopoverInteraction = (nextIsOpen) => {
|
|
70
|
-
setIsOpen(nextIsOpen);
|
|
71
|
-
};
|
|
72
|
-
const parseChildren = () => {
|
|
73
|
-
const [targetChild, contentChild] = react.Children.toArray(children);
|
|
74
|
-
return {
|
|
75
|
-
target: targetChild,
|
|
76
|
-
content: contentChild
|
|
77
|
-
};
|
|
78
|
-
};
|
|
79
|
-
const popoverTargetClasses = (0, classix.cx)("Dropdown-target", targetClassName);
|
|
80
|
-
const popoverClasses = (0, classix.cx)("Dropdown", popoverClassName);
|
|
81
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_popover.Popover, {
|
|
82
|
-
isOpen,
|
|
83
|
-
placement,
|
|
84
|
-
onInteraction: onInteraction || handlePopoverInteraction,
|
|
85
|
-
restrictHeight: false,
|
|
86
|
-
disabled,
|
|
87
|
-
targetClassName: popoverTargetClasses,
|
|
88
|
-
popoverClassName: popoverClasses,
|
|
89
|
-
"data-test-id": testId,
|
|
90
|
-
...rest,
|
|
91
|
-
children: [renderTrigger(), renderContent()]
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
const DropdownButton = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => {
|
|
95
|
-
const { children, hideCaret, "data-test-id": testId = "dropdown-button",...rest } = props;
|
|
96
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__launchpad_ui_button.Button, {
|
|
97
|
-
...rest,
|
|
98
|
-
"data-test-id": testId,
|
|
99
|
-
ref,
|
|
100
|
-
children: [
|
|
101
|
-
children,
|
|
102
|
-
" ",
|
|
103
|
-
!hideCaret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
|
|
104
|
-
name: "chevron-down",
|
|
105
|
-
size: "small"
|
|
106
|
-
})
|
|
107
|
-
]
|
|
108
|
-
});
|
|
109
|
-
});
|
|
110
|
-
DropdownButton.displayName = "DropdownButton";
|
|
111
|
-
exports.Dropdown = Dropdown;
|
|
112
|
-
exports.DropdownButton = DropdownButton;
|
|
113
|
-
|
|
114
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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: ignore\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: ignore\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"}
|