@lumx/react 3.18.1 → 3.18.2-alpha.1

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 (47) hide show
  1. package/_internal/index.js +236 -0
  2. package/_internal/index.js.map +1 -0
  3. package/index.d.ts +13 -8
  4. package/index.js +219 -226
  5. package/index.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/components/autocomplete/Autocomplete.tsx +5 -4
  8. package/src/components/autocomplete/AutocompleteMultiple.tsx +5 -3
  9. package/src/components/button/Button.stories.tsx +1 -0
  10. package/src/components/button/Button.test.tsx +41 -2
  11. package/src/components/button/ButtonRoot.tsx +10 -11
  12. package/src/components/checkbox/Checkbox.stories.tsx +13 -2
  13. package/src/components/checkbox/Checkbox.test.tsx +29 -0
  14. package/src/components/checkbox/Checkbox.tsx +8 -7
  15. package/src/components/chip/Chip.stories.tsx +17 -0
  16. package/src/components/chip/Chip.test.tsx +44 -0
  17. package/src/components/chip/Chip.tsx +10 -9
  18. package/src/components/date-picker/DatePickerField.stories.tsx +18 -0
  19. package/src/components/date-picker/DatePickerField.tsx +4 -4
  20. package/src/components/link/Link.stories.tsx +4 -1
  21. package/src/components/link/Link.test.tsx +45 -6
  22. package/src/components/link/Link.tsx +7 -6
  23. package/src/components/list/ListItem.stories.tsx +14 -48
  24. package/src/components/list/ListItem.test.tsx +78 -7
  25. package/src/components/list/ListItem.tsx +11 -9
  26. package/src/components/progress-tracker/ProgressTrackerStep.tsx +7 -7
  27. package/src/components/radio-button/RadioButton.stories.tsx +32 -0
  28. package/src/components/radio-button/RadioButton.test.tsx +30 -0
  29. package/src/components/radio-button/RadioButton.tsx +8 -7
  30. package/src/components/slider/Slider.tsx +6 -7
  31. package/src/components/switch/Switch.stories.tsx +11 -1
  32. package/src/components/switch/Switch.test.tsx +30 -0
  33. package/src/components/switch/Switch.tsx +8 -7
  34. package/src/components/table/TableRow.tsx +8 -6
  35. package/src/components/tabs/Tab.tsx +12 -9
  36. package/src/components/text-field/TextField.stories.tsx +22 -0
  37. package/src/components/text-field/TextField.test.tsx +56 -0
  38. package/src/components/text-field/TextField.tsx +12 -10
  39. package/src/utils/disabled/DisabledStateContext.tsx +29 -0
  40. package/src/utils/disabled/DisabledStateProvider.stories.tsx +88 -0
  41. package/src/utils/disabled/index.ts +2 -0
  42. package/src/utils/disabled/useDisableStateProps.tsx +37 -0
  43. package/src/utils/index.ts +1 -0
  44. package/src/utils/type/HasAriaDisabled.ts +6 -0
  45. package/utils/index.d.ts +20 -1
  46. package/utils/index.js +1 -134
  47. package/utils/index.js.map +1 -1
package/utils/index.js CHANGED
@@ -1,135 +1,2 @@
1
- import React__default, { useEffect, useContext, useMemo, useRef, createContext } from 'react';
2
- import isEmpty from 'lodash/isEmpty';
3
- import { createPortal } from 'react-dom';
4
-
5
- const EVENT_TYPES = ['mousedown', 'touchstart'];
6
- function isClickAway(targets, refs) {
7
- // The targets elements are not contained in any of the listed element references.
8
- return !refs.some(ref => targets.some(target => {
9
- var _ref$current;
10
- return ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(target);
11
- }));
12
- }
13
- /**
14
- * Listen to clicks away from the given elements and callback the passed in function.
15
- *
16
- * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
17
- */
18
- function useClickAway({
19
- callback,
20
- childrenRefs
21
- }) {
22
- useEffect(() => {
23
- const {
24
- current: currentRefs
25
- } = childrenRefs;
26
- if (!callback || !currentRefs || isEmpty(currentRefs)) {
27
- return undefined;
28
- }
29
- const listener = evt => {
30
- var _evt$composedPath;
31
- const targets = [(_evt$composedPath = evt.composedPath) === null || _evt$composedPath === void 0 ? void 0 : _evt$composedPath.call(evt)[0], evt.target];
32
- if (isClickAway(targets, currentRefs)) {
33
- callback(evt);
34
- }
35
- };
36
- EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
37
- return () => {
38
- EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
39
- };
40
- }, [callback, childrenRefs]);
41
- }
42
-
43
- const ClickAwayAncestorContext = /*#__PURE__*/createContext(null);
44
- /**
45
- * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
46
- * we take into account both the DOM tree and the React tree to detect click away.
47
- *
48
- * @return the react component.
49
- */
50
- const ClickAwayProvider = ({
51
- children,
52
- callback,
53
- childrenRefs,
54
- parentRef
55
- }) => {
56
- const parentContext = useContext(ClickAwayAncestorContext);
57
- const currentContext = useMemo(() => {
58
- const context = {
59
- childrenRefs: [],
60
- /**
61
- * Add element refs to the current context and propagate to the parent context.
62
- */
63
- addRefs(...newChildrenRefs) {
64
- // Add element refs that should be considered as inside the click away context.
65
- context.childrenRefs.push(...newChildrenRefs);
66
- if (parentContext) {
67
- // Also add then to the parent context
68
- parentContext.addRefs(...newChildrenRefs);
69
- if (parentRef) {
70
- // The parent element is also considered as inside the parent click away context but not inside the current context
71
- parentContext.addRefs(parentRef);
72
- }
73
- }
74
- }
75
- };
76
- return context;
77
- }, [parentContext, parentRef]);
78
- useEffect(() => {
79
- const {
80
- current: currentRefs
81
- } = childrenRefs;
82
- if (!currentRefs) {
83
- return;
84
- }
85
- currentContext.addRefs(...currentRefs);
86
- }, [currentContext, childrenRefs]);
87
- useClickAway({
88
- callback,
89
- childrenRefs: useRef(currentContext.childrenRefs)
90
- });
91
- return /*#__PURE__*/React__default.createElement(ClickAwayAncestorContext.Provider, {
92
- value: currentContext
93
- }, children);
94
- };
95
- ClickAwayProvider.displayName = 'ClickAwayProvider';
96
-
97
- /**
98
- * Portal initializing function.
99
- * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
100
- */
101
-
102
- const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
103
- container: document.body
104
- }));
105
- /**
106
- * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
107
- */
108
- const PortalProvider = PortalContext.Provider;
109
-
110
- /**
111
- * Render children in a portal outside the current DOM position
112
- * (defaults to `document.body` but can be customized with the PortalContextProvider)
113
- */
114
- const Portal = ({
115
- children,
116
- enabled = true
117
- }) => {
118
- const init = React__default.useContext(PortalContext);
119
- const context = React__default.useMemo(() => {
120
- return enabled ? init() : null;
121
- },
122
- // Only update on 'enabled'
123
- // eslint-disable-next-line react-hooks/exhaustive-deps
124
- [enabled]);
125
- React__default.useLayoutEffect(() => {
126
- return context === null || context === void 0 ? void 0 : context.teardown;
127
- }, [context === null || context === void 0 ? void 0 : context.teardown, enabled]);
128
- if (!(context !== null && context !== void 0 && context.container)) {
129
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
130
- }
131
- return /*#__PURE__*/createPortal(children, context.container);
132
- };
133
-
134
- export { ClickAwayProvider, Portal, PortalProvider };
1
+ export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, c as PortalProvider, u as useDisabledStateContext } from '../_internal/index.js';
135
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n // The targets elements are not contained in any of the listed element references.\n return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\n\nexport interface ClickAwayParameters {\n /**\n * A callback function to call when the user clicks away from the elements.\n */\n callback: EventListener | Falsy;\n /**\n * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n */\n childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n useEffect(() => {\n const { current: currentRefs } = childrenRefs;\n if (!callback || !currentRefs || isEmpty(currentRefs)) {\n return undefined;\n }\n const listener: EventListener = (evt) => {\n const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n if (isClickAway(targets, currentRefs)) {\n callback(evt);\n }\n };\n\n EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n return () => {\n EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n };\n }, [callback, childrenRefs]);\n}\n","import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n childrenRefs: Array<RefObject<HTMLElement>>;\n addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n /**\n * (Optional) Element that should be considered as part of the parent\n */\n parentRef?: RefObject<HTMLElement>;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n children,\n callback,\n childrenRefs,\n parentRef,\n}) => {\n const parentContext = useContext(ClickAwayAncestorContext);\n const currentContext = useMemo(() => {\n const context: ContextValue = {\n childrenRefs: [],\n /**\n * Add element refs to the current context and propagate to the parent context.\n */\n addRefs(...newChildrenRefs) {\n // Add element refs that should be considered as inside the click away context.\n context.childrenRefs.push(...newChildrenRefs);\n\n if (parentContext) {\n // Also add then to the parent context\n parentContext.addRefs(...newChildrenRefs);\n if (parentRef) {\n // The parent element is also considered as inside the parent click away context but not inside the current context\n parentContext.addRefs(parentRef);\n }\n }\n },\n };\n return context;\n }, [parentContext, parentRef]);\n\n useEffect(() => {\n const { current: currentRefs } = childrenRefs;\n if (!currentRefs) {\n return;\n }\n currentContext.addRefs(...currentRefs);\n }, [currentContext, childrenRefs]);\n\n useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n container?: Container;\n teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n children?: React.ReactNode;\n value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n enabled?: boolean;\n children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n const init = React.useContext(PortalContext);\n const context = React.useMemo(\n () => {\n return enabled ? init() : null;\n },\n // Only update on 'enabled'\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [enabled],\n );\n\n React.useLayoutEffect(() => {\n return context?.teardown;\n }, [context?.teardown, enabled]);\n\n if (!context?.container) {\n return <>{children}</>;\n }\n return createPortal(children, context.container);\n};\n"],"names":["EVENT_TYPES","isClickAway","targets","refs","some","ref","target","_ref$current","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","_evt$composedPath","composedPath","call","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","React","createElement","Provider","value","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","Fragment","createPortal"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}