@faststore/components 3.0.135 → 3.0.144
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/cjs/atoms/Button/index.d.ts +1 -1
- package/dist/cjs/molecules/Dropdown/Dropdown.d.ts +1 -1
- package/dist/cjs/molecules/Dropdown/Dropdown.js +20 -16
- package/dist/cjs/molecules/Dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/DropdownButton.d.ts +23 -5
- package/dist/cjs/molecules/Dropdown/DropdownButton.js +7 -7
- package/dist/cjs/molecules/Dropdown/DropdownButton.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/DropdownItem.d.ts +9 -0
- package/dist/cjs/molecules/Dropdown/DropdownItem.js +8 -23
- package/dist/cjs/molecules/Dropdown/DropdownItem.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/DropdownMenu.d.ts +7 -3
- package/dist/cjs/molecules/Dropdown/DropdownMenu.js +39 -11
- package/dist/cjs/molecules/Dropdown/DropdownMenu.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/contexts/DropdownContext.d.ts +8 -8
- package/dist/cjs/molecules/Dropdown/contexts/DropdownContext.js +1 -1
- package/dist/cjs/molecules/Dropdown/contexts/DropdownContext.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/hooks/useDropdown.d.ts +1 -1
- package/dist/cjs/molecules/Dropdown/hooks/useDropdown.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownItem.d.ts +15 -0
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownItem.js +37 -0
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownItem.js.map +1 -0
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownPosition.d.ts +4 -2
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownPosition.js +55 -18
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownPosition.js.map +1 -1
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.d.ts +13 -0
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.js +20 -0
- package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.js.map +1 -0
- package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js +6 -2
- package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
- package/dist/esm/atoms/Button/index.d.ts +1 -1
- package/dist/esm/molecules/Dropdown/Dropdown.d.ts +1 -1
- package/dist/esm/molecules/Dropdown/Dropdown.js +20 -16
- package/dist/esm/molecules/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/molecules/Dropdown/DropdownButton.d.ts +23 -5
- package/dist/esm/molecules/Dropdown/DropdownButton.js +8 -8
- package/dist/esm/molecules/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/molecules/Dropdown/DropdownItem.d.ts +9 -0
- package/dist/esm/molecules/Dropdown/DropdownItem.js +9 -24
- package/dist/esm/molecules/Dropdown/DropdownItem.js.map +1 -1
- package/dist/esm/molecules/Dropdown/DropdownMenu.d.ts +7 -3
- package/dist/esm/molecules/Dropdown/DropdownMenu.js +39 -11
- package/dist/esm/molecules/Dropdown/DropdownMenu.js.map +1 -1
- package/dist/esm/molecules/Dropdown/contexts/DropdownContext.d.ts +8 -8
- package/dist/esm/molecules/Dropdown/contexts/DropdownContext.js +1 -1
- package/dist/esm/molecules/Dropdown/contexts/DropdownContext.js.map +1 -1
- package/dist/esm/molecules/Dropdown/hooks/useDropdown.d.ts +1 -1
- package/dist/esm/molecules/Dropdown/hooks/useDropdown.js.map +1 -1
- package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.d.ts +15 -0
- package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.js +33 -0
- package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.js.map +1 -0
- package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.d.ts +4 -2
- package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js +55 -18
- package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js.map +1 -1
- package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.d.ts +13 -0
- package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.js +16 -0
- package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.js.map +1 -0
- package/dist/esm/molecules/QuantitySelector/QuantitySelector.js +6 -2
- package/dist/esm/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
- package/package.json +2 -2
- package/src/atoms/Button/index.ts +1 -1
- package/src/molecules/Dropdown/Dropdown.tsx +27 -18
- package/src/molecules/Dropdown/DropdownButton.tsx +45 -32
- package/src/molecules/Dropdown/DropdownItem.tsx +39 -47
- package/src/molecules/Dropdown/DropdownMenu.tsx +58 -18
- package/src/molecules/Dropdown/contexts/DropdownContext.ts +11 -9
- package/src/molecules/Dropdown/hooks/useDropdown.ts +3 -3
- package/src/molecules/Dropdown/hooks/useDropdownItem.ts +56 -0
- package/src/molecules/Dropdown/hooks/useDropdownPosition.ts +62 -19
- package/src/molecules/Dropdown/hooks/useDropdownTrigger.ts +26 -0
- package/src/molecules/QuantitySelector/QuantitySelector.tsx +6 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useDropdownTrigger = void 0;
|
|
4
|
+
const useDropdown_1 = require("./useDropdown");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const useDropdownTrigger = ({ triggerRef, }) => {
|
|
7
|
+
const { toggle, dropdownTriggerRef, addDropdownTriggerRef, isOpen, id } = (0, useDropdown_1.useDropdown)();
|
|
8
|
+
(0, react_1.useImperativeHandle)(triggerRef, () => dropdownTriggerRef.current, [
|
|
9
|
+
dropdownTriggerRef,
|
|
10
|
+
]);
|
|
11
|
+
return {
|
|
12
|
+
onClick: toggle,
|
|
13
|
+
ref: addDropdownTriggerRef,
|
|
14
|
+
'aria-expanded': isOpen,
|
|
15
|
+
'aria-controls': id,
|
|
16
|
+
'aria-haspopup': 'menu',
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
exports.useDropdownTrigger = useDropdownTrigger;
|
|
20
|
+
//# sourceMappingURL=useDropdownTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDropdownTrigger.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownTrigger.ts"],"names":[],"mappings":";;;AAAA,+CAA2C;AAC3C,iCAAkD;AAO3C,MAAM,kBAAkB,GAAG,CAAsC,EACtE,UAAU,GACiB,EAAE,EAAE;IAC/B,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,EAAE,GACrE,IAAA,yBAAW,GAAK,CAAA;IAElB,IAAA,2BAAmB,EAAC,UAAU,EAAE,GAAG,EAAE,CAAC,kBAAmB,CAAC,OAAQ,EAAE;QAClE,kBAAkB;KACnB,CAAC,CAAA;IAEF,OAAO;QACL,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,qBAAqB;QAC1B,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,MAAe;KACjC,CAAA;AACH,CAAC,CAAA;AAjBY,QAAA,kBAAkB,sBAiB9B"}
|
|
@@ -46,11 +46,15 @@ const QuantitySelector = ({ max, min = 1, unitMultiplier = 1, useUnitMultiplier,
|
|
|
46
46
|
initial && setQuantity(initial);
|
|
47
47
|
}, [initial]);
|
|
48
48
|
const changeInputValue = (e) => {
|
|
49
|
-
|
|
49
|
+
const numericValue = e.target.value.replace(/\D/g, '');
|
|
50
|
+
setQuantity(Number(numericValue));
|
|
50
51
|
};
|
|
51
52
|
return (react_1.default.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
|
|
52
53
|
react_1.default.createElement(__1.IconButton, { "data-quantity-selector-button": "left", icon: react_1.default.createElement(__1.Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
|
|
53
|
-
react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur,
|
|
54
|
+
react_1.default.createElement(__1.Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: useUnitMultiplier ? multipliedUnit : quantity, onChange: changeInputValue, onBlur: validateBlur, onInput: (event) => {
|
|
55
|
+
const input = event.currentTarget;
|
|
56
|
+
input.value = input.value.replace(/\D/g, '');
|
|
57
|
+
}, disabled: disabled }),
|
|
54
58
|
react_1.default.createElement(__1.IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: react_1.default.createElement(__1.Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
|
|
55
59
|
};
|
|
56
60
|
exports.default = QuantitySelector;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":";;;AAAA,uDAAkD;AAElD,8BAAgD;AA2ChD,MAAM,gBAAgB,GAAG,CAAC,EACxB,GAAG,EACH,GAAG,GAAG,CAAC,EACP,cAAc,GAAG,CAAC,EAClB,iBAAiB,EACjB,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,cAAc,EACd,MAAM,GAAG,sBAAsB,EAC/B,GAAG,UAAU,EACS,EAAE,EAAE;IAC1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAS,OAAO,IAAI,GAAG,CAAC,CAAA;IAChE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAClD,QAAQ,GAAG,cAAc,CAC1B,CAAA;IAED,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACnD,IAAI,CAAC,iBAAiB,EAAE;YACtB,OAAO,QAAQ,CAAA;SAChB;QACD,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,GAAG,cAAc,CAAA;IAC9D,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,QAAQ,KAAK,GAAG,CAAA;IACvC,MAAM,eAAe,GAAG,QAAQ,KAAK,GAAG,CAAA;IAExC,MAAM,cAAc,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC/C,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,GAAG,aAAa,CAAC,CAAA;QAEtE,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAA;QACzB,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,iBAAiB,CAAC,aAAa,GAAG,cAAc,CAAC,CAAA;IACnD,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;IAExC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAEzC,SAAS,sBAAsB,CAAC,CAAS;QACvC,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAE3C,OAAO,GAAG;YACR,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC;YACpE,CAAC,CAAC,QAAQ,CAAA;IACd,CAAC;IAED,SAAS,YAAY;QACnB,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAA;QACtD,MAAM,eAAe,GAAG,uBAAuB,CAAC,aAAa,CAAC,CAAA;QAE9D,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;QAClE,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,IAAI,QAAQ,GAAG,GAAG,CAAA;QAC3D,IAAI,aAAa,EAAE;YACjB,cAAc,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAA;SACjD;QAED,WAAW,CAAC,GAAG,EAAE;YACf,iBAAiB,CAAC,eAAe,CAAC,CAAA;YAClC,QAAQ,EAAE,CAAC,eAAe,GAAG,cAAc,CAAC,CAAA;YAE5C,OAAO,eAAe,GAAG,cAAc,CAAA;QACzC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,gBAAgB,GAAG,CAAC,CAAsC,EAAE,EAAE;QAClE,
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from './Button';
|
|
2
|
-
export type { ButtonProps } from './Button';
|
|
2
|
+
export type { ButtonProps, Variant as ButtonVariant, Size as ButtonSize, IconPosition as ButtonIconPosition } from './Button';
|
|
@@ -14,5 +14,5 @@ export interface DropdownProps {
|
|
|
14
14
|
*/
|
|
15
15
|
id?: string;
|
|
16
16
|
}
|
|
17
|
-
declare const Dropdown: ({ children, isOpen:
|
|
17
|
+
declare const Dropdown: ({ children, isOpen: isOpenControlled, onDismiss, id, }: PropsWithChildren<DropdownProps>) => React.JSX.Element;
|
|
18
18
|
export default Dropdown;
|
|
@@ -1,41 +1,45 @@
|
|
|
1
1
|
import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
|
|
2
2
|
import DropdownContext from '../Dropdown/contexts/DropdownContext';
|
|
3
|
-
const Dropdown = ({ children, isOpen:
|
|
4
|
-
const [
|
|
3
|
+
const Dropdown = ({ children, isOpen: isOpenControlled, onDismiss, id = 'fs-dropdown', }) => {
|
|
4
|
+
const [isOpenInternal, setIsOpenInternal] = useState(false);
|
|
5
5
|
const dropdownItemsRef = useRef([]);
|
|
6
6
|
const selectedDropdownItemIndexRef = useRef(0);
|
|
7
|
-
const
|
|
7
|
+
const dropdownTriggerRef = useRef(null);
|
|
8
|
+
const isOpen = isOpenControlled ?? isOpenInternal;
|
|
8
9
|
const close = useCallback(() => {
|
|
9
|
-
|
|
10
|
+
setIsOpenInternal(false);
|
|
10
11
|
onDismiss?.();
|
|
11
12
|
}, [onDismiss]);
|
|
12
13
|
const open = () => {
|
|
13
|
-
|
|
14
|
+
setIsOpenInternal(true);
|
|
14
15
|
};
|
|
15
16
|
const toggle = useCallback(() => {
|
|
16
|
-
|
|
17
|
-
if (
|
|
17
|
+
setIsOpenInternal((currentIsOpen) => {
|
|
18
|
+
if (currentIsOpen) {
|
|
18
19
|
onDismiss?.();
|
|
19
|
-
|
|
20
|
+
dropdownTriggerRef.current?.focus();
|
|
20
21
|
}
|
|
21
|
-
return !
|
|
22
|
+
return !currentIsOpen;
|
|
22
23
|
});
|
|
23
24
|
}, [onDismiss]);
|
|
25
|
+
const addDropdownTriggerRef = useCallback((ref) => {
|
|
26
|
+
dropdownTriggerRef.current = ref;
|
|
27
|
+
}, []);
|
|
24
28
|
useEffect(() => {
|
|
25
|
-
|
|
26
|
-
}, [
|
|
29
|
+
setIsOpenInternal(isOpenControlled ?? false);
|
|
30
|
+
}, [isOpenControlled]);
|
|
27
31
|
useEffect(() => {
|
|
28
32
|
isOpen && dropdownItemsRef?.current[0]?.focus();
|
|
29
33
|
}, [isOpen]);
|
|
30
34
|
useEffect(() => {
|
|
31
35
|
let firstClick = true;
|
|
32
36
|
const event = (e) => {
|
|
33
|
-
const
|
|
37
|
+
const wasSomeItemClicked = dropdownItemsRef?.current.some((item) => e.target === item || item.contains(e.target));
|
|
34
38
|
if (firstClick) {
|
|
35
39
|
firstClick = false;
|
|
36
40
|
return;
|
|
37
41
|
}
|
|
38
|
-
!
|
|
42
|
+
!wasSomeItemClicked && close();
|
|
39
43
|
};
|
|
40
44
|
if (isOpen) {
|
|
41
45
|
document.addEventListener('click', event);
|
|
@@ -53,13 +57,13 @@ const Dropdown = ({ children, isOpen: isOpenDefault = false, onDismiss, id = 'fs
|
|
|
53
57
|
close,
|
|
54
58
|
open,
|
|
55
59
|
toggle,
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
dropdownTriggerRef,
|
|
61
|
+
addDropdownTriggerRef,
|
|
58
62
|
selectedDropdownItemIndexRef,
|
|
59
63
|
dropdownItemsRef,
|
|
60
64
|
id,
|
|
61
65
|
};
|
|
62
|
-
}, [
|
|
66
|
+
}, [isOpen, close, toggle, addDropdownTriggerRef, id]);
|
|
63
67
|
return (React.createElement(DropdownContext.Provider, { value: value }, children));
|
|
64
68
|
};
|
|
65
69
|
export default Dropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEhF,OAAO,eAAe,MAAM,sCAAsC,CAAA;AAiBlE,MAAM,QAAQ,GAAG,CAAC,EAChB,QAAQ,EACR,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,32 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { ButtonProps } from '../../atoms/Button';
|
|
3
|
-
export interface DropdownButtonProps extends Omit<ButtonProps, 'variant' | 'inverse'> {
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { ButtonProps, ButtonIconPosition } from '../../atoms/Button';
|
|
3
|
+
export interface DropdownButtonProps extends Omit<ButtonProps, 'variant' | 'inverse' | 'icon' | 'iconPosition'> {
|
|
4
4
|
/**
|
|
5
5
|
* ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
|
|
6
6
|
*/
|
|
7
7
|
testId?: string;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Replace the default rendered element with the provided child element, merging their props and behavior.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
asChild?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Boolean that represents a loading state.
|
|
14
|
+
*/
|
|
15
|
+
loading?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Specifies a label for loading state.
|
|
18
|
+
*/
|
|
19
|
+
loadingLabel?: string;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated
|
|
22
|
+
* A React component that will be rendered as an icon.
|
|
23
|
+
*/
|
|
24
|
+
icon?: ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated
|
|
27
|
+
* Specifies where the icon should be positioned
|
|
28
|
+
*/
|
|
29
|
+
iconPosition?: ButtonIconPosition;
|
|
12
30
|
}
|
|
13
31
|
declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
32
|
export default DropdownButton;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { cloneElement, forwardRef } from 'react';
|
|
2
2
|
import Button from '../../atoms/Button';
|
|
3
|
-
import {
|
|
4
|
-
const DropdownButton = forwardRef(function DropdownButton({ testId = 'fs-dropdown-button',
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return (React.createElement(Button, { "data-fs-dropdown-button": true,
|
|
3
|
+
import { useDropdownTrigger } from './hooks/useDropdownTrigger';
|
|
4
|
+
const DropdownButton = forwardRef(function DropdownButton({ testId = 'fs-dropdown-button', children, asChild = false, ...otherProps }, triggerRef) {
|
|
5
|
+
const triggerProps = useDropdownTrigger({ triggerRef });
|
|
6
|
+
const asChildrenTrigger = React.isValidElement(children)
|
|
7
|
+
? cloneElement(children, { ...triggerProps, ...children.props })
|
|
8
|
+
: children;
|
|
9
|
+
return (React.createElement(React.Fragment, null, asChild ? (asChildrenTrigger) : (React.createElement(Button, { "data-fs-dropdown-button": true, "data-testid": testId, variant: "tertiary", ...triggerProps, ...otherProps }, children))));
|
|
10
10
|
});
|
|
11
11
|
export default DropdownButton;
|
|
12
12
|
//# sourceMappingURL=DropdownButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AAClE,OAAO,MAA2C,MAAM,oBAAoB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAgC/D,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,UAAU,EAAE,EAC3E,UAAU;IAEV,MAAM,YAAY,GAAG,kBAAkB,CAAC,EAAE,UAAU,EAAE,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;QACtD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;QAChE,CAAC,CAAC,QAAQ,CAAA;IAEZ,OAAO,CACL,0CACG,OAAO,CAAC,CAAC,CAAC,CACT,iBAAiB,CAClB,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,oDAEQ,MAAM,EACnB,OAAO,EAAC,UAAU,KACd,YAAY,KACZ,UAAU,IAEb,QAAQ,CACF,CACV,CACA,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -6,9 +6,18 @@ export interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
6
6
|
*/
|
|
7
7
|
testId?: string;
|
|
8
8
|
/**
|
|
9
|
+
* @deprecated
|
|
9
10
|
* A React component that will be rendered as an icon.
|
|
10
11
|
*/
|
|
11
12
|
icon?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Replace the default rendered element with the one passed as a child, merging their props and behavior.
|
|
15
|
+
* */
|
|
16
|
+
asChild?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Emit onDismiss event when the component is clicked.
|
|
19
|
+
*/
|
|
20
|
+
dismissOnClick?: boolean;
|
|
12
21
|
}
|
|
13
22
|
declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
23
|
export default DropdownItem;
|
|
@@ -1,28 +1,13 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import {
|
|
3
|
-
const DropdownItem = forwardRef(function Button({ children, icon, onClick, testId = 'fs-dropdown-item', ...otherProps }, ref) {
|
|
4
|
-
const {
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
dropdownItemsRef?.current.push(el);
|
|
10
|
-
setDropdownItemIndex(dropdownItemsRef?.current.findIndex((element) => element === el) ?? 0);
|
|
11
|
-
}
|
|
12
|
-
dropdownItemRef.current = el;
|
|
13
|
-
};
|
|
14
|
-
const onFocusItem = () => {
|
|
15
|
-
selectedDropdownItemIndexRef.current = dropdownItemIndex;
|
|
16
|
-
dropdownItemsRef?.current[selectedDropdownItemIndexRef.current]?.focus();
|
|
17
|
-
};
|
|
18
|
-
const handleOnClickItem = (event) => {
|
|
19
|
-
onClick?.(event);
|
|
20
|
-
close?.();
|
|
21
|
-
};
|
|
22
|
-
useImperativeHandle(ref, () => dropdownItemRef.current, []);
|
|
23
|
-
return (React.createElement("button", { "data-fs-dropdown-item": true, "data-testid": testId, ref: addToRefs, onFocus: onFocusItem, onMouseEnter: onFocusItem, onClick: handleOnClickItem, role: "menuitem", tabIndex: -1, "data-index": dropdownItemIndex, ...otherProps },
|
|
1
|
+
import React, { cloneElement, forwardRef } from 'react';
|
|
2
|
+
import { useDropdownItem } from './hooks/useDropdownItem';
|
|
3
|
+
const DropdownItem = forwardRef(function Button({ children, asChild, icon, onClick, dismissOnClick = true, testId = 'fs-dropdown-item', ...otherProps }, ref) {
|
|
4
|
+
const itemProps = useDropdownItem({ ref, onClick, dismissOnClick });
|
|
5
|
+
const asChildrenItem = React.isValidElement(children)
|
|
6
|
+
? cloneElement(children, { ...itemProps, ...children.props })
|
|
7
|
+
: children;
|
|
8
|
+
return (React.createElement(React.Fragment, null, asChild ? (asChildrenItem) : (React.createElement("button", { "data-fs-dropdown-item": true, "data-testid": testId, ...itemProps, ...otherProps },
|
|
24
9
|
!!icon && icon,
|
|
25
|
-
children));
|
|
10
|
+
children))));
|
|
26
11
|
});
|
|
27
12
|
export default DropdownItem;
|
|
28
13
|
//# sourceMappingURL=DropdownItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAuBzD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,MAAM,CACb,EACE,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,cAAc,GAAG,IAAI,EACrB,MAAM,GAAG,kBAAkB,EAC3B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,eAAe,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAA;IAEnE,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;QACnD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;QAC7D,CAAC,CAAC,QAAQ,CAAA;IAEZ,OAAO,CACL,0CACG,OAAO,CAAC,CAAC,CAAC,CACT,cAAc,CACf,CAAC,CAAC,CAAC,CACF,8EAEe,MAAM,KACf,SAAS,KACT,UAAU;QAEb,CAAC,CAAC,IAAI,IAAI,IAAI;QACd,QAAQ,CACF,CACV,CACA,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -17,10 +17,14 @@ export interface DropdownMenuProps extends ModalContentProps {
|
|
|
17
17
|
*/
|
|
18
18
|
onDismiss?: (event: MouseEvent | KeyboardEvent) => void;
|
|
19
19
|
/**
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
* Specifies the size variant.
|
|
21
|
+
*/
|
|
22
22
|
size?: 'small' | 'regular';
|
|
23
|
+
/**
|
|
24
|
+
* Alignment for the dropdown
|
|
25
|
+
*/
|
|
26
|
+
align?: 'left' | 'right' | 'center';
|
|
23
27
|
children: ReactNode[] | ReactNode;
|
|
24
28
|
}
|
|
25
|
-
declare const DropdownMenu: ({ children, testId, size, style, ...otherProps }: PropsWithChildren<DropdownMenuProps>) => React.ReactPortal | null;
|
|
29
|
+
declare const DropdownMenu: ({ children, testId, size, align, style, ...otherProps }: PropsWithChildren<DropdownMenuProps>) => React.ReactPortal | null;
|
|
26
30
|
export default DropdownMenu;
|
|
@@ -7,9 +7,9 @@ import { useDropdownPosition } from './hooks/useDropdownPosition';
|
|
|
7
7
|
* https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
|
|
8
8
|
* https://reach.tech/dialog
|
|
9
9
|
*/
|
|
10
|
-
const DropdownMenu = ({ children, testId = 'fs-dropdown-menu', size = 'regular', style, ...otherProps }) => {
|
|
11
|
-
const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef,
|
|
12
|
-
const dropdownPosition = useDropdownPosition();
|
|
10
|
+
const DropdownMenu = ({ children, testId = 'fs-dropdown-menu', size = 'regular', align = 'left', style, ...otherProps }) => {
|
|
11
|
+
const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, dropdownTriggerRef, id, } = useDropdown();
|
|
12
|
+
const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition(align);
|
|
13
13
|
const childrenLength = React.Children.toArray(children).length;
|
|
14
14
|
const handleDownPress = () => {
|
|
15
15
|
if (selectedDropdownItemIndexRef.current < childrenLength - 1) {
|
|
@@ -39,25 +39,53 @@ const DropdownMenu = ({ children, testId = 'fs-dropdown-menu', size = 'regular',
|
|
|
39
39
|
};
|
|
40
40
|
const handleEscapePress = () => {
|
|
41
41
|
close?.();
|
|
42
|
-
|
|
42
|
+
dropdownTriggerRef?.current?.focus();
|
|
43
|
+
};
|
|
44
|
+
const handleKeyNavigatePress = (key) => {
|
|
45
|
+
const dropdownItems = dropdownItemsRef?.current ?? [];
|
|
46
|
+
const selectedIndex = selectedDropdownItemIndexRef.current;
|
|
47
|
+
const rearrangedDropdownItems = [
|
|
48
|
+
...dropdownItems.slice(selectedIndex + 1),
|
|
49
|
+
...dropdownItems.slice(0, selectedIndex + 1),
|
|
50
|
+
];
|
|
51
|
+
const matchItem = rearrangedDropdownItems.find((item) => item.textContent?.[0]?.toLowerCase() === key.toLowerCase());
|
|
52
|
+
if (matchItem) {
|
|
53
|
+
selectedDropdownItemIndexRef.current = dropdownItems.indexOf(matchItem);
|
|
54
|
+
matchItem.focus();
|
|
55
|
+
}
|
|
43
56
|
};
|
|
44
57
|
const handleBackdropKeyDown = (event) => {
|
|
45
|
-
if (event.defaultPrevented || event.key === 'Enter') {
|
|
58
|
+
if (event.defaultPrevented || event.key === 'Enter' || event.key === ' ') {
|
|
46
59
|
return;
|
|
47
60
|
}
|
|
48
61
|
event.preventDefault();
|
|
49
|
-
event.key
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
62
|
+
switch (event.key) {
|
|
63
|
+
case 'Escape':
|
|
64
|
+
handleEscapePress();
|
|
65
|
+
break;
|
|
66
|
+
case 'ArrowDown':
|
|
67
|
+
handleDownPress();
|
|
68
|
+
break;
|
|
69
|
+
case 'ArrowUp':
|
|
70
|
+
handleUpPress();
|
|
71
|
+
break;
|
|
72
|
+
case 'Home':
|
|
73
|
+
handleHomePress();
|
|
74
|
+
break;
|
|
75
|
+
case 'End':
|
|
76
|
+
handleEndPress();
|
|
77
|
+
break;
|
|
78
|
+
default:
|
|
79
|
+
handleKeyNavigatePress(event.key);
|
|
80
|
+
break;
|
|
81
|
+
}
|
|
54
82
|
event.stopPropagation();
|
|
55
83
|
};
|
|
56
84
|
const clearChildrenReferences = () => {
|
|
57
85
|
dropdownItemsRef.current = [];
|
|
58
86
|
return null;
|
|
59
87
|
};
|
|
60
|
-
return isOpen
|
|
88
|
+
return (isOpen && !loadingPosition)
|
|
61
89
|
? createPortal(React.createElement("div", { role: "presentation", "data-fs-dropdown-overlay": true, onKeyDown: handleBackdropKeyDown, "data-testid": `${testId}-overlay` },
|
|
62
90
|
React.createElement("div", { role: "menu", "aria-orientation": "vertical", "data-fs-dropdown-menu": true, "data-fs-dropdown-menu-size": size, "data-testid": testId, style: { ...dropdownPosition, ...style }, id: id, ...otherProps }, children)), document.body)
|
|
63
91
|
: clearChildrenReferences();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type DropdownContextState = {
|
|
1
|
+
export type DropdownContextState<T extends HTMLElement = HTMLElement, E extends HTMLElement = HTMLElement> = {
|
|
2
2
|
/**
|
|
3
3
|
* Control de Dropdown state as Opened (true) or Closed (false).
|
|
4
4
|
*/
|
|
@@ -6,7 +6,7 @@ export type DropdownContextState = {
|
|
|
6
6
|
/**
|
|
7
7
|
* Reference to DropdownButton, used to calculate a position for the DropdownMenu.
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
dropdownTriggerRef: React.MutableRefObject<T | null> | null;
|
|
10
10
|
/**
|
|
11
11
|
* Reference to a selected DropdownItem, used to manipulate focus.
|
|
12
12
|
*/
|
|
@@ -14,11 +14,7 @@ export type DropdownContextState = {
|
|
|
14
14
|
/**
|
|
15
15
|
* Array of References to dropdownItems in a DropdownMenu.
|
|
16
16
|
*/
|
|
17
|
-
dropdownItemsRef: React.MutableRefObject<
|
|
18
|
-
/**
|
|
19
|
-
* Close DropdownMenu event inherited from Modal.
|
|
20
|
-
*/
|
|
21
|
-
onDismiss?(): void;
|
|
17
|
+
dropdownItemsRef: React.MutableRefObject<E[]> | null;
|
|
22
18
|
/**
|
|
23
19
|
* Function responsible for close the DropdownMenu in this context.
|
|
24
20
|
*/
|
|
@@ -35,6 +31,10 @@ export type DropdownContextState = {
|
|
|
35
31
|
* Identifier to be used in aria-controls
|
|
36
32
|
*/
|
|
37
33
|
id: string;
|
|
34
|
+
/**
|
|
35
|
+
* Associates the dropdown trigger element's ref for managing its position and interaction events.
|
|
36
|
+
*/
|
|
37
|
+
addDropdownTriggerRef?(ref: T | null): void;
|
|
38
38
|
};
|
|
39
|
-
declare const DropdownContext: import("react").Context<DropdownContextState
|
|
39
|
+
declare const DropdownContext: import("react").Context<DropdownContextState<HTMLElement, HTMLElement>>;
|
|
40
40
|
export default DropdownContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownContext.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/contexts/DropdownContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"DropdownContext.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/contexts/DropdownContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AA4CrC,MAAM,YAAY,GAAyB;IACzC,MAAM,EAAE,KAAK;IACb,kBAAkB,EAAE,IAAI;IACxB,4BAA4B,EAAE,IAAI;IAClC,gBAAgB,EAAE,IAAI;IACtB,EAAE,EAAE,aAAa;CAClB,CAAA;AAED,MAAM,eAAe,GAAG,aAAa,CAAuB,YAAY,CAAC,CAAA;AAEzE,eAAe,eAAe,CAAA"}
|
|
@@ -3,4 +3,4 @@ import type { DropdownContextState } from '../contexts/DropdownContext';
|
|
|
3
3
|
* Hook to use the Dropdown context.
|
|
4
4
|
* @returns Dropdown context.
|
|
5
5
|
*/
|
|
6
|
-
export declare const useDropdown: () => DropdownContextState
|
|
6
|
+
export declare const useDropdown: <T extends HTMLElement = HTMLElement, E extends HTMLElement = HTMLElement>() => DropdownContextState<T, E>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDropdown.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAEzD;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"useDropdown.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAEzD;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAA6E,EAAE;IACxG,MAAM,OAAO,GAAG,UAAU,CAAiD,eAAe,CAAC,CAAA;IAE3F,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAA;KAC7E;IAED,OAAO,OAAqC,CAAA;AAC9C,CAAC,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type UseDropdownItemProps<E extends HTMLElement = HTMLElement> = {
|
|
3
|
+
ref: React.ForwardedRef<E>;
|
|
4
|
+
onClick?: React.MouseEventHandler<E>;
|
|
5
|
+
dismissOnClick?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare const useDropdownItem: <E extends HTMLElement = HTMLElement>({ ref, onClick, dismissOnClick, }: UseDropdownItemProps<E>) => {
|
|
8
|
+
ref: (el: E) => void;
|
|
9
|
+
onFocus: () => void;
|
|
10
|
+
onMouseEnter: () => void;
|
|
11
|
+
onClick: (event: React.MouseEvent<E, MouseEvent>) => void;
|
|
12
|
+
role: string;
|
|
13
|
+
tabIndex: number;
|
|
14
|
+
'data-index': number;
|
|
15
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useImperativeHandle, useRef, useState } from 'react';
|
|
2
|
+
import { useDropdown } from './useDropdown';
|
|
3
|
+
export const useDropdownItem = ({ ref, onClick, dismissOnClick = true, }) => {
|
|
4
|
+
const { dropdownItemsRef, selectedDropdownItemIndexRef, close } = useDropdown();
|
|
5
|
+
const [dropdownItemIndex, setDropdownItemIndex] = useState(0);
|
|
6
|
+
const dropdownItemRef = useRef();
|
|
7
|
+
const addToRefs = (el) => {
|
|
8
|
+
if (el && !dropdownItemsRef?.current.includes(el)) {
|
|
9
|
+
dropdownItemsRef?.current.push(el);
|
|
10
|
+
setDropdownItemIndex(dropdownItemsRef?.current.findIndex((element) => element === el) ?? 0);
|
|
11
|
+
}
|
|
12
|
+
dropdownItemRef.current = el;
|
|
13
|
+
};
|
|
14
|
+
const onFocusItem = () => {
|
|
15
|
+
selectedDropdownItemIndexRef.current = dropdownItemIndex;
|
|
16
|
+
dropdownItemsRef?.current[selectedDropdownItemIndexRef.current]?.focus();
|
|
17
|
+
};
|
|
18
|
+
const handleOnClickItem = (event) => {
|
|
19
|
+
onClick?.(event);
|
|
20
|
+
dismissOnClick && close?.();
|
|
21
|
+
};
|
|
22
|
+
useImperativeHandle(ref, () => dropdownItemRef.current, []);
|
|
23
|
+
return {
|
|
24
|
+
ref: addToRefs,
|
|
25
|
+
onFocus: onFocusItem,
|
|
26
|
+
onMouseEnter: onFocusItem,
|
|
27
|
+
onClick: handleOnClickItem,
|
|
28
|
+
role: 'menuitem',
|
|
29
|
+
tabIndex: -1,
|
|
30
|
+
'data-index': dropdownItemIndex,
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=useDropdownItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDropdownItem.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownItem.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAQ3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAsC,EACnE,GAAG,EACH,OAAO,EACP,cAAc,GAAG,IAAI,GACG,EAAE,EAAE;IAC5B,MAAM,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,KAAK,EAAE,GAAG,WAAW,EAG1E,CAAA;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7D,MAAM,eAAe,GAAG,MAAM,EAAK,CAAA;IAEnC,MAAM,SAAS,GAAG,CAAC,EAAK,EAAE,EAAE;QAC1B,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YACjD,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAClC,oBAAoB,CAClB,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,EAAE,CAAC,IAAI,CAAC,CACtE,CAAA;SACF;QAED,eAAe,CAAC,OAAO,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,4BAA6B,CAAC,OAAO,GAAG,iBAAiB,CAAA;QACzD,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAsC,EAAE,EAAE;QACnE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAChB,cAAc,IAAI,KAAK,EAAE,EAAE,CAAA;IAC7B,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO;QACL,GAAG,EAAE,SAAS;QACd,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,WAAW;QACzB,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,CAAC,CAAC;QACZ,YAAY,EAAE,iBAAiB;KAChC,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
type DropdownPosition =
|
|
1
|
+
type DropdownPosition = {
|
|
2
|
+
loading: boolean;
|
|
3
|
+
} & Pick<React.CSSProperties, 'position' | 'top' | 'left' | 'right' | 'transform'>;
|
|
2
4
|
/**
|
|
3
5
|
* Hook used to find the DropdownMenu position in relation to DropdownButton
|
|
4
6
|
* @returns Style with positions.
|
|
5
7
|
*/
|
|
6
|
-
export declare const useDropdownPosition: () => DropdownPosition;
|
|
8
|
+
export declare const useDropdownPosition: (align?: 'left' | 'center' | 'right') => DropdownPosition;
|
|
7
9
|
export {};
|