@launchpad-ui/dropdown 0.6.134 → 0.6.136
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/dist/Dropdown.d.ts.map +1 -1
- package/dist/DropdownButton.d.ts +1 -1
- package/dist/DropdownButton.d.ts.map +1 -1
- package/dist/index.es.js +2 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +10 -9
package/dist/Dropdown.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,SAAS,aAAa,CAAC,CAAC,CAAC,
|
|
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,SAAS,aAAa,CAAC,CAAC,CAAC,4CA0G5E,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/DropdownButton.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ type DropdownButtonProps = ButtonProps & {
|
|
|
4
4
|
};
|
|
5
5
|
declare const DropdownButton: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
6
6
|
isLoading?: boolean;
|
|
7
|
-
loadingText?: string | JSX.Element;
|
|
7
|
+
loadingText?: string | import("react").JSX.Element;
|
|
8
8
|
size?: "tiny" | "small" | "medium" | "big";
|
|
9
9
|
kind?: "default" | "primary" | "destructive" | "minimal" | "link" | "close" | "primaryFlair" | "defaultFlair" | "minimalFlair";
|
|
10
10
|
fit?: boolean;
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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.es.js
CHANGED
|
@@ -19,7 +19,7 @@ const Dropdown = (props) => {
|
|
|
19
19
|
"data-test-id": testId = "dropdown",
|
|
20
20
|
...rest
|
|
21
21
|
} = props;
|
|
22
|
-
const triggerRef = useRef();
|
|
22
|
+
const triggerRef = useRef(null);
|
|
23
23
|
const [isOpen, setIsOpen] = useState(isOpenProp ?? false);
|
|
24
24
|
const [hasOpened, setHasOpened] = useState(isOpen);
|
|
25
25
|
useEffect(() => {
|
|
@@ -69,6 +69,7 @@ const Dropdown = (props) => {
|
|
|
69
69
|
const [targetChild, contentChild] = Children.toArray(children);
|
|
70
70
|
return {
|
|
71
71
|
target: targetChild,
|
|
72
|
+
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
|
72
73
|
content: contentChild
|
|
73
74
|
};
|
|
74
75
|
};
|
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>();\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\tcontent: contentChild as ReactElement
|
|
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,iBAAoE,2BAAA,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;"}
|
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ const Dropdown = (props) => {
|
|
|
21
21
|
"data-test-id": testId = "dropdown",
|
|
22
22
|
...rest
|
|
23
23
|
} = props;
|
|
24
|
-
const triggerRef = react.useRef();
|
|
24
|
+
const triggerRef = react.useRef(null);
|
|
25
25
|
const [isOpen, setIsOpen] = react.useState(isOpenProp ?? false);
|
|
26
26
|
const [hasOpened, setHasOpened] = react.useState(isOpen);
|
|
27
27
|
react.useEffect(() => {
|
|
@@ -71,6 +71,7 @@ const Dropdown = (props) => {
|
|
|
71
71
|
const [targetChild, contentChild] = react.Children.toArray(children);
|
|
72
72
|
return {
|
|
73
73
|
target: targetChild,
|
|
74
|
+
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
|
74
75
|
content: contentChild
|
|
75
76
|
};
|
|
76
77
|
};
|
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>();\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\tcontent: contentChild as ReactElement
|
|
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,iBAAoEC,sBAAA,WAAA,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;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launchpad-ui/dropdown",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.136",
|
|
4
4
|
"status": "beta",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -30,20 +30,21 @@
|
|
|
30
30
|
},
|
|
31
31
|
"source": "src/index.ts",
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@react-aria/utils": "3.
|
|
33
|
+
"@react-aria/utils": "3.27.0",
|
|
34
34
|
"classix": "2.2.0",
|
|
35
|
-
"@launchpad-ui/button": "~0.12.
|
|
36
|
-
"@launchpad-ui/icons": "~0.
|
|
37
|
-
"@launchpad-ui/popover": "~0.11.
|
|
35
|
+
"@launchpad-ui/button": "~0.12.41",
|
|
36
|
+
"@launchpad-ui/icons": "~0.21.1",
|
|
37
|
+
"@launchpad-ui/popover": "~0.11.37",
|
|
38
38
|
"@launchpad-ui/tokens": "~0.12.1"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"react": "18.
|
|
42
|
-
"react-dom": "18.
|
|
41
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
42
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"react": "
|
|
46
|
-
"react
|
|
45
|
+
"@react-types/shared": "3.27.0",
|
|
46
|
+
"react": "19.0.0",
|
|
47
|
+
"react-dom": "19.0.0"
|
|
47
48
|
},
|
|
48
49
|
"scripts": {
|
|
49
50
|
"build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
|