@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.
Files changed (70) hide show
  1. package/dist/cjs/atoms/Button/index.d.ts +1 -1
  2. package/dist/cjs/molecules/Dropdown/Dropdown.d.ts +1 -1
  3. package/dist/cjs/molecules/Dropdown/Dropdown.js +20 -16
  4. package/dist/cjs/molecules/Dropdown/Dropdown.js.map +1 -1
  5. package/dist/cjs/molecules/Dropdown/DropdownButton.d.ts +23 -5
  6. package/dist/cjs/molecules/Dropdown/DropdownButton.js +7 -7
  7. package/dist/cjs/molecules/Dropdown/DropdownButton.js.map +1 -1
  8. package/dist/cjs/molecules/Dropdown/DropdownItem.d.ts +9 -0
  9. package/dist/cjs/molecules/Dropdown/DropdownItem.js +8 -23
  10. package/dist/cjs/molecules/Dropdown/DropdownItem.js.map +1 -1
  11. package/dist/cjs/molecules/Dropdown/DropdownMenu.d.ts +7 -3
  12. package/dist/cjs/molecules/Dropdown/DropdownMenu.js +39 -11
  13. package/dist/cjs/molecules/Dropdown/DropdownMenu.js.map +1 -1
  14. package/dist/cjs/molecules/Dropdown/contexts/DropdownContext.d.ts +8 -8
  15. package/dist/cjs/molecules/Dropdown/contexts/DropdownContext.js +1 -1
  16. package/dist/cjs/molecules/Dropdown/contexts/DropdownContext.js.map +1 -1
  17. package/dist/cjs/molecules/Dropdown/hooks/useDropdown.d.ts +1 -1
  18. package/dist/cjs/molecules/Dropdown/hooks/useDropdown.js.map +1 -1
  19. package/dist/cjs/molecules/Dropdown/hooks/useDropdownItem.d.ts +15 -0
  20. package/dist/cjs/molecules/Dropdown/hooks/useDropdownItem.js +37 -0
  21. package/dist/cjs/molecules/Dropdown/hooks/useDropdownItem.js.map +1 -0
  22. package/dist/cjs/molecules/Dropdown/hooks/useDropdownPosition.d.ts +4 -2
  23. package/dist/cjs/molecules/Dropdown/hooks/useDropdownPosition.js +55 -18
  24. package/dist/cjs/molecules/Dropdown/hooks/useDropdownPosition.js.map +1 -1
  25. package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.d.ts +13 -0
  26. package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.js +20 -0
  27. package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.js.map +1 -0
  28. package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js +6 -2
  29. package/dist/cjs/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
  30. package/dist/esm/atoms/Button/index.d.ts +1 -1
  31. package/dist/esm/molecules/Dropdown/Dropdown.d.ts +1 -1
  32. package/dist/esm/molecules/Dropdown/Dropdown.js +20 -16
  33. package/dist/esm/molecules/Dropdown/Dropdown.js.map +1 -1
  34. package/dist/esm/molecules/Dropdown/DropdownButton.d.ts +23 -5
  35. package/dist/esm/molecules/Dropdown/DropdownButton.js +8 -8
  36. package/dist/esm/molecules/Dropdown/DropdownButton.js.map +1 -1
  37. package/dist/esm/molecules/Dropdown/DropdownItem.d.ts +9 -0
  38. package/dist/esm/molecules/Dropdown/DropdownItem.js +9 -24
  39. package/dist/esm/molecules/Dropdown/DropdownItem.js.map +1 -1
  40. package/dist/esm/molecules/Dropdown/DropdownMenu.d.ts +7 -3
  41. package/dist/esm/molecules/Dropdown/DropdownMenu.js +39 -11
  42. package/dist/esm/molecules/Dropdown/DropdownMenu.js.map +1 -1
  43. package/dist/esm/molecules/Dropdown/contexts/DropdownContext.d.ts +8 -8
  44. package/dist/esm/molecules/Dropdown/contexts/DropdownContext.js +1 -1
  45. package/dist/esm/molecules/Dropdown/contexts/DropdownContext.js.map +1 -1
  46. package/dist/esm/molecules/Dropdown/hooks/useDropdown.d.ts +1 -1
  47. package/dist/esm/molecules/Dropdown/hooks/useDropdown.js.map +1 -1
  48. package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.d.ts +15 -0
  49. package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.js +33 -0
  50. package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.js.map +1 -0
  51. package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.d.ts +4 -2
  52. package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js +55 -18
  53. package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js.map +1 -1
  54. package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.d.ts +13 -0
  55. package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.js +16 -0
  56. package/dist/esm/molecules/Dropdown/hooks/useDropdownTrigger.js.map +1 -0
  57. package/dist/esm/molecules/QuantitySelector/QuantitySelector.js +6 -2
  58. package/dist/esm/molecules/QuantitySelector/QuantitySelector.js.map +1 -1
  59. package/package.json +2 -2
  60. package/src/atoms/Button/index.ts +1 -1
  61. package/src/molecules/Dropdown/Dropdown.tsx +27 -18
  62. package/src/molecules/Dropdown/DropdownButton.tsx +45 -32
  63. package/src/molecules/Dropdown/DropdownItem.tsx +39 -47
  64. package/src/molecules/Dropdown/DropdownMenu.tsx +58 -18
  65. package/src/molecules/Dropdown/contexts/DropdownContext.ts +11 -9
  66. package/src/molecules/Dropdown/hooks/useDropdown.ts +3 -3
  67. package/src/molecules/Dropdown/hooks/useDropdownItem.ts +56 -0
  68. package/src/molecules/Dropdown/hooks/useDropdownPosition.ts +62 -19
  69. package/src/molecules/Dropdown/hooks/useDropdownTrigger.ts +26 -0
  70. 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
- setQuantity(Number(e.currentTarget.value));
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, disabled: disabled }),
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":"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"}
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: isOpenDefault, onDismiss, id, }: PropsWithChildren<DropdownProps>) => React.JSX.Element;
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: isOpenDefault = false, onDismiss, id = 'fs-dropdown', }) => {
4
- const [isOpen, setIsOpen] = useState(isOpenDefault);
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 dropdownButtonRef = useRef(null);
7
+ const dropdownTriggerRef = useRef(null);
8
+ const isOpen = isOpenControlled ?? isOpenInternal;
8
9
  const close = useCallback(() => {
9
- setIsOpen(false);
10
+ setIsOpenInternal(false);
10
11
  onDismiss?.();
11
12
  }, [onDismiss]);
12
13
  const open = () => {
13
- setIsOpen(true);
14
+ setIsOpenInternal(true);
14
15
  };
15
16
  const toggle = useCallback(() => {
16
- setIsOpen((old) => {
17
- if (old) {
17
+ setIsOpenInternal((currentIsOpen) => {
18
+ if (currentIsOpen) {
18
19
  onDismiss?.();
19
- dropdownButtonRef.current?.focus();
20
+ dropdownTriggerRef.current?.focus();
20
21
  }
21
- return !old;
22
+ return !currentIsOpen;
22
23
  });
23
24
  }, [onDismiss]);
25
+ const addDropdownTriggerRef = useCallback((ref) => {
26
+ dropdownTriggerRef.current = ref;
27
+ }, []);
24
28
  useEffect(() => {
25
- setIsOpen(isOpenDefault);
26
- }, [isOpenDefault]);
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 someItemWasClicked = dropdownItemsRef?.current.some((item) => e.target === item);
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
- !someItemWasClicked && close();
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
- dropdownButtonRef,
57
- onDismiss,
60
+ dropdownTriggerRef,
61
+ addDropdownTriggerRef,
58
62
  selectedDropdownItemIndexRef,
59
63
  dropdownItemsRef,
60
64
  id,
61
65
  };
62
- }, [close, id, isOpen, onDismiss, toggle]);
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":"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"}
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, { AriaAttributes } from '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
- * For accessibility purposes, add an ARIA label to the element when it doesn't have a label.
9
+ * Replace the default rendered element with the provided child element, merging their props and behavior.
10
10
  */
11
- 'aria-label'?: AriaAttributes['aria-label'];
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, { forwardRef, useImperativeHandle } from 'react';
1
+ import React, { cloneElement, forwardRef } from 'react';
2
2
  import Button from '../../atoms/Button';
3
- import { useDropdown } from './hooks/useDropdown';
4
- const DropdownButton = forwardRef(function DropdownButton({ testId = 'fs-dropdown-button', 'aria-label': ariaLabel, children, ...otherProps }, ref) {
5
- const { toggle, dropdownButtonRef, isOpen, id } = useDropdown();
6
- useImperativeHandle(ref, () => dropdownButtonRef.current, [
7
- dropdownButtonRef,
8
- ]);
9
- return (React.createElement(Button, { "data-fs-dropdown-button": true, onClick: toggle, "data-testid": testId, ref: dropdownButtonRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-controls": id, variant: "tertiary", ...otherProps }, children));
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,UAAU,EAAE,mBAAmB,EAAkB,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAuB,MAAM,oBAAoB,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAcjD,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EACE,MAAM,GAAG,oBAAoB,EAC7B,YAAY,EAAE,SAAS,EACtB,QAAQ,EACT,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,CAAA;IAE/D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,iBAAkB,CAAC,OAAQ,EAAE;QAC1D,iBAAiB;KAClB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,MAAM,qCAEL,OAAO,EAAE,MAAM,iBACF,MAAM,EACnB,GAAG,EAAE,iBAAiB,gBACV,SAAS,mBACN,MAAM,mBACP,MAAM,mBACL,EAAE,EACjB,OAAO,EAAC,UAAU,KACd,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}
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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
2
- import { useDropdown } from './hooks/useDropdown';
3
- const DropdownItem = forwardRef(function Button({ children, icon, onClick, testId = 'fs-dropdown-item', ...otherProps }, ref) {
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
- 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,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAcjD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,MAAM,CACb,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,EAAE,GAAG,UAAU,EAAE,EACvE,GAAG;IAEH,MAAM,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,KAAK,EAAE,GAC7D,WAAW,EAAE,CAAA;IAEf,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7D,MAAM,eAAe,GAAG,MAAM,EAAqB,CAAA;IAEnD,MAAM,SAAS,GAAG,CAAC,EAAqB,EAAE,EAAE;QAC1C,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,CACxB,KAAsD,EACtD,EAAE;QACF,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAChB,KAAK,EAAE,EAAE,CAAA;IACX,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO,CACL,8EAEe,MAAM,EACnB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,WAAW,EACzB,OAAO,EAAE,iBAAiB,EAC1B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,gBACA,iBAAiB,KACzB,UAAU;QAEb,CAAC,CAAC,IAAI,IAAI,IAAI;QACd,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}
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
- * Specifies the size variant.
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, dropdownButtonRef, id } = useDropdown();
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
- dropdownButtonRef?.current?.focus();
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 === 'Escape' && handleEscapePress();
50
- event.key === 'ArrowDown' && handleDownPress();
51
- event.key === 'ArrowUp' && handleUpPress();
52
- event.key === 'Home' && handleHomePress();
53
- event.key === 'End' && handleEndPress();
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;AA4BjE;;;;GAIG;AAEH,MAAM,YAAY,GAAG,CAAC,EACpB,QAAQ,EACR,MAAM,GAAG,kBAAkB,EAC3B,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,GAAG,UAAU,EACwB,EAAE,EAAE;IACzC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,EAAE,EAAE,GAC5F,WAAW,EAAE,CAAA;IAEf,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAA;IAE9C,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAA;IAE9D,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,4BAA6B,CAAC,OAAO,GAAG,cAAc,GAAG,CAAC,EAAE;YAC9D,4BAA6B,CAAC,OAAO,EAAE,CAAA;SACxC;aAAM;YACL,4BAA6B,CAAC,OAAO,GAAG,CAAC,CAAA;SAC1C;QAED,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,4BAA6B,CAAC,OAAO,GAAG,CAAC,EAAE;YAC7C,4BAA6B,CAAC,OAAO,EAAE,CAAA;SACxC;aAAM;YACL,4BAA6B,CAAC,OAAO,GAAG,cAAc,GAAG,CAAC,CAAA;SAC3D;QAED,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,4BAA6B,CAAC,OAAO,GAAG,CAAC,CAAA;QACzC,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,4BAA6B,CAAC,OAAO,GAAG,cAAc,GAAG,CAAC,CAAA;QAC1D,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,KAAK,EAAE,EAAE,CAAA;QACT,iBAAiB,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;IACrC,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACnD,OAAM;SACP;QAED,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,iBAAiB,EAAE,CAAA;QAE7C,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,eAAe,EAAE,CAAA;QAE9C,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,aAAa,EAAE,CAAA;QAE1C,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,eAAe,EAAE,CAAA;QAEzC,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,cAAc,EAAE,CAAA;QAEvC,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,gBAAiB,CAAC,OAAO,GAAG,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,6BACE,IAAI,EAAC,cAAc,oCAEnB,SAAS,EAAE,qBAAqB,iBACnB,GAAG,MAAM,UAAU;YAEhC,6BACE,IAAI,EAAC,MAAM,sBACM,UAAU,+DAEC,IAAI,iBACnB,MAAM,EACnB,KAAK,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,KAAK,EAAE,EACxC,EAAE,EAAE,EAAE,KACF,UAAU,IAEb,QAAQ,CACL,CACF,EACN,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,uBAAuB,EAAE,CAAA;AAC/B,CAAC,CAAA;AAED,eAAe,YAAY,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
- dropdownButtonRef: React.RefObject<HTMLButtonElement> | null;
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<HTMLButtonElement[]> | null;
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,7 +1,7 @@
1
1
  import { createContext } from 'react';
2
2
  const defaultState = {
3
3
  isOpen: false,
4
- dropdownButtonRef: null,
4
+ dropdownTriggerRef: null,
5
5
  selectedDropdownItemIndexRef: null,
6
6
  dropdownItemsRef: null,
7
7
  id: 'fs-dropdown',
@@ -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;AA0CrC,MAAM,YAAY,GAAyB;IACzC,MAAM,EAAE,KAAK;IACb,iBAAiB,EAAE,IAAI;IACvB,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"}
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,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAuB,eAAe,CAAC,CAAA;IAEjE,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAA;KAC7E;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
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 = Pick<React.CSSProperties, 'position' | 'top' | 'left'>;
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 {};