@lumx/react 3.20.1-alpha.29 → 3.20.1-alpha.30

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 (183) hide show
  1. package/_internal/Button-4b67daa8.js +98 -0
  2. package/_internal/Button-4b67daa8.js.map +1 -0
  3. package/_internal/ButtonRoot-a70baf82.js +118 -0
  4. package/_internal/ButtonRoot-a70baf82.js.map +1 -0
  5. package/_internal/Chip-70af04b4.js +144 -0
  6. package/_internal/Chip-70af04b4.js.map +1 -0
  7. package/_internal/ClickAwayProvider-1204f237.js +95 -0
  8. package/_internal/ClickAwayProvider-1204f237.js.map +1 -0
  9. package/_internal/DisabledStateContext-ea04260d.js +29 -0
  10. package/_internal/DisabledStateContext-ea04260d.js.map +1 -0
  11. package/_internal/HeadingLevelProvider-ebdcb0c7.js +61 -0
  12. package/_internal/HeadingLevelProvider-ebdcb0c7.js.map +1 -0
  13. package/_internal/IconButton-8d61f5be.js +77 -0
  14. package/_internal/IconButton-8d61f5be.js.map +1 -0
  15. package/_internal/ImageCaption-db44ec9e.js +75 -0
  16. package/_internal/ImageCaption-db44ec9e.js.map +1 -0
  17. package/_internal/List-c75646f2.js +818 -0
  18. package/_internal/List-c75646f2.js.map +1 -0
  19. package/_internal/PopoverDialog-35b2d87d.js +657 -0
  20. package/_internal/PopoverDialog-35b2d87d.js.map +1 -0
  21. package/_internal/Portal-3f86608e.js +45 -0
  22. package/_internal/Portal-3f86608e.js.map +1 -0
  23. package/_internal/RawClickable-2c2b6a89.js +52 -0
  24. package/_internal/RawClickable-2c2b6a89.js.map +1 -0
  25. package/_internal/Slides-ce641b5f.js +679 -0
  26. package/_internal/Slides-ce641b5f.js.map +1 -0
  27. package/_internal/ThemeContext-3181f000.js +14 -0
  28. package/_internal/ThemeContext-3181f000.js.map +1 -0
  29. package/_internal/Thumbnail-02bd6869.js +314 -0
  30. package/_internal/Thumbnail-02bd6869.js.map +1 -0
  31. package/_internal/components/alert-dialog-a24330ed.js +166 -0
  32. package/_internal/components/alert-dialog-a24330ed.js.map +1 -0
  33. package/_internal/components/autocomplete-70749e51.js +262 -0
  34. package/_internal/components/autocomplete-70749e51.js.map +1 -0
  35. package/_internal/components/avatar-ed9f4869.js +84 -0
  36. package/_internal/components/avatar-ed9f4869.js.map +1 -0
  37. package/_internal/components/badge-ccf47147.js +82 -0
  38. package/_internal/components/badge-ccf47147.js.map +1 -0
  39. package/_internal/components/button-9f710830.js +48 -0
  40. package/_internal/components/button-9f710830.js.map +1 -0
  41. package/_internal/components/checkbox-8ab51ef9.js +142 -0
  42. package/_internal/components/checkbox-8ab51ef9.js.map +1 -0
  43. package/_internal/components/chip-19e40755.js +103 -0
  44. package/_internal/components/chip-19e40755.js.map +1 -0
  45. package/_internal/components/comment-block-bb6a0603.js +139 -0
  46. package/_internal/components/comment-block-bb6a0603.js.map +1 -0
  47. package/_internal/components/date-picker-e4209b01.js +2 -0
  48. package/_internal/components/date-picker-e4209b01.js.map +1 -0
  49. package/_internal/components/dialog-30336ccb.js +239 -0
  50. package/_internal/components/dialog-30336ccb.js.map +1 -0
  51. package/_internal/components/divider-0e93aa3d.js +51 -0
  52. package/_internal/components/divider-0e93aa3d.js.map +1 -0
  53. package/_internal/components/drag-handle-ba2e7e67.js +52 -0
  54. package/_internal/components/drag-handle-ba2e7e67.js.map +1 -0
  55. package/_internal/components/dropdown-d18122d7.js +148 -0
  56. package/_internal/components/dropdown-d18122d7.js.map +1 -0
  57. package/_internal/components/expansion-panel-0b263437.js +169 -0
  58. package/_internal/components/expansion-panel-0b263437.js.map +1 -0
  59. package/_internal/components/flag-8f9a498a.js +60 -0
  60. package/_internal/components/flag-8f9a498a.js.map +1 -0
  61. package/_internal/components/flex-box-15be92f6.js +57 -0
  62. package/_internal/components/flex-box-15be92f6.js.map +1 -0
  63. package/_internal/components/generic-block-5d843f1e.js +128 -0
  64. package/_internal/components/generic-block-5d843f1e.js.map +1 -0
  65. package/_internal/components/grid-8c08dc4b.js +105 -0
  66. package/_internal/components/grid-8c08dc4b.js.map +1 -0
  67. package/_internal/components/grid-column-85e305e7.js +59 -0
  68. package/_internal/components/grid-column-85e305e7.js.map +1 -0
  69. package/_internal/components/heading-7bfafd7d.js +54 -0
  70. package/_internal/components/heading-7bfafd7d.js.map +1 -0
  71. package/_internal/components/icon-ee15673b.js +103 -0
  72. package/_internal/components/icon-ee15673b.js.map +1 -0
  73. package/_internal/components/image-block-3479abda.js +111 -0
  74. package/_internal/components/image-block-3479abda.js.map +1 -0
  75. package/_internal/components/image-lightbox-1d7ca133.js +758 -0
  76. package/_internal/components/image-lightbox-1d7ca133.js.map +1 -0
  77. package/_internal/components/inline-list-5ba8bb0f.js +75 -0
  78. package/_internal/components/inline-list-5ba8bb0f.js.map +1 -0
  79. package/_internal/components/input-helper-2e4e49fd.js +72 -0
  80. package/_internal/components/input-helper-2e4e49fd.js.map +1 -0
  81. package/_internal/components/input-label-30d199c3.js +60 -0
  82. package/_internal/components/input-label-30d199c3.js.map +1 -0
  83. package/_internal/components/lightbox-c5f9afd0.js +156 -0
  84. package/_internal/components/lightbox-c5f9afd0.js.map +1 -0
  85. package/_internal/components/link-43ee103e.js +73 -0
  86. package/_internal/components/link-43ee103e.js.map +1 -0
  87. package/_internal/components/link-preview-db0ee2d6.js +118 -0
  88. package/_internal/components/link-preview-db0ee2d6.js.map +1 -0
  89. package/_internal/components/list-2f256244.js +72 -0
  90. package/_internal/components/list-2f256244.js.map +1 -0
  91. package/_internal/components/message-f7674e0e.js +101 -0
  92. package/_internal/components/message-f7674e0e.js.map +1 -0
  93. package/_internal/components/mosaic-3effd0cf.js +95 -0
  94. package/_internal/components/mosaic-3effd0cf.js.map +1 -0
  95. package/_internal/components/navigation-3a5dc270.js +227 -0
  96. package/_internal/components/navigation-3a5dc270.js.map +1 -0
  97. package/_internal/components/notification-098c5600.js +146 -0
  98. package/_internal/components/notification-098c5600.js.map +1 -0
  99. package/_internal/components/popover-dfcddda4.js +3 -0
  100. package/_internal/components/popover-dfcddda4.js.map +1 -0
  101. package/_internal/components/post-block-69797e4d.js +110 -0
  102. package/_internal/components/post-block-69797e4d.js.map +1 -0
  103. package/_internal/components/progress-44bb0301.js +183 -0
  104. package/_internal/components/progress-44bb0301.js.map +1 -0
  105. package/_internal/components/progress-tracker-e0981fcc.js +309 -0
  106. package/_internal/components/progress-tracker-e0981fcc.js.map +1 -0
  107. package/_internal/components/radio-button-929c7bee.js +150 -0
  108. package/_internal/components/radio-button-929c7bee.js.map +1 -0
  109. package/_internal/components/select-64bc72a0.js +458 -0
  110. package/_internal/components/select-64bc72a0.js.map +1 -0
  111. package/_internal/components/side-navigation-c610c689.js +166 -0
  112. package/_internal/components/side-navigation-c610c689.js.map +1 -0
  113. package/_internal/components/skeleton-1ea8c82a.js +167 -0
  114. package/_internal/components/skeleton-1ea8c82a.js.map +1 -0
  115. package/_internal/components/slider-78cfaa67.js +312 -0
  116. package/_internal/components/slider-78cfaa67.js.map +1 -0
  117. package/_internal/components/slideshow-d8a943a7.js +151 -0
  118. package/_internal/components/slideshow-d8a943a7.js.map +1 -0
  119. package/_internal/components/switch-25b65051.js +122 -0
  120. package/_internal/components/switch-25b65051.js.map +1 -0
  121. package/_internal/components/table-ec20c66c.js +296 -0
  122. package/_internal/components/table-ec20c66c.js.map +1 -0
  123. package/_internal/components/tabs-89c055bd.js +299 -0
  124. package/_internal/components/tabs-89c055bd.js.map +1 -0
  125. package/_internal/components/text-d04d0f1b.js +2 -0
  126. package/_internal/components/text-d04d0f1b.js.map +1 -0
  127. package/_internal/components/text-field-8f13957e.js +361 -0
  128. package/_internal/components/text-field-8f13957e.js.map +1 -0
  129. package/_internal/components/thumbnail-1255957f.js +42 -0
  130. package/_internal/components/thumbnail-1255957f.js.map +1 -0
  131. package/_internal/components/toolbar-e7c984e6.js +62 -0
  132. package/_internal/components/toolbar-e7c984e6.js.map +1 -0
  133. package/_internal/components/tooltip-dcb43bbe.js +328 -0
  134. package/_internal/components/tooltip-dcb43bbe.js.map +1 -0
  135. package/_internal/components/uploader-7ef4db39.js +154 -0
  136. package/_internal/components/uploader-7ef4db39.js.map +1 -0
  137. package/_internal/components/user-block-24d97650.js +145 -0
  138. package/_internal/components/user-block-24d97650.js.map +1 -0
  139. package/_internal/constants-43721918.js +2170 -0
  140. package/_internal/constants-43721918.js.map +1 -0
  141. package/_internal/constants-d0e3f49e.js +24 -0
  142. package/_internal/constants-d0e3f49e.js.map +1 -0
  143. package/_internal/context-9d1336a1.js +19 -0
  144. package/_internal/context-9d1336a1.js.map +1 -0
  145. package/_internal/forwardRef-8bce732e.js +9 -0
  146. package/_internal/forwardRef-8bce732e.js.map +1 -0
  147. package/_internal/getFocusableElements-230173a8.js +13 -0
  148. package/_internal/getFocusableElements-230173a8.js.map +1 -0
  149. package/_internal/index-25c9e8c2.js +118 -0
  150. package/_internal/index-25c9e8c2.js.map +1 -0
  151. package/_internal/index-25d2a45e.js +437 -0
  152. package/_internal/index-25d2a45e.js.map +1 -0
  153. package/_internal/isComponent-b9762ff1.js +18 -0
  154. package/_internal/isComponent-b9762ff1.js.map +1 -0
  155. package/_internal/isComponentType-e806b848.js +9 -0
  156. package/_internal/isComponentType-e806b848.js.map +1 -0
  157. package/_internal/mergeRefs-f0d7d6ea.js +30 -0
  158. package/_internal/mergeRefs-f0d7d6ea.js.map +1 -0
  159. package/_internal/state-db358714.js +130 -0
  160. package/_internal/state-db358714.js.map +1 -0
  161. package/_internal/useBooleanState-2a3d237c.js +12 -0
  162. package/_internal/useBooleanState-2a3d237c.js.map +1 -0
  163. package/_internal/useCallbackOnEscape-b956a85d.js +64 -0
  164. package/_internal/useCallbackOnEscape-b956a85d.js.map +1 -0
  165. package/_internal/useDisableBodyScroll-36bd7352.js +219 -0
  166. package/_internal/useDisableBodyScroll-36bd7352.js.map +1 -0
  167. package/_internal/useDisableStateProps-69e16b7c.js +36 -0
  168. package/_internal/useDisableStateProps-69e16b7c.js.map +1 -0
  169. package/_internal/useFocusTrap-2dbae79e.js +112 -0
  170. package/_internal/useFocusTrap-2dbae79e.js.map +1 -0
  171. package/_internal/useId-3a1facc0.js +18 -0
  172. package/_internal/useId-3a1facc0.js.map +1 -0
  173. package/_internal/useRovingTabIndex-7daf0f24.js +77 -0
  174. package/_internal/useRovingTabIndex-7daf0f24.js.map +1 -0
  175. package/_internal/useTransitionVisibility-321fdbfa.js +50 -0
  176. package/_internal/useTransitionVisibility-321fdbfa.js.map +1 -0
  177. package/_internal/wrapChildrenIconWithSpaces-50d705e6.js +20 -0
  178. package/_internal/wrapChildrenIconWithSpaces-50d705e6.js.map +1 -0
  179. package/index.js +63 -14033
  180. package/index.js.map +1 -1
  181. package/package.json +3 -3
  182. package/utils/index.js +3 -158
  183. package/utils/index.js.map +1 -1
@@ -0,0 +1,118 @@
1
+ import classNames from 'classnames';
2
+ import { getRootClassName, getTypographyClassName, handleBasicClasses, fontColorClass } from '@lumx/core/js/utils/className';
3
+ import React__default from 'react';
4
+ import { u as useTooltipContext } from './context-9d1336a1.js';
5
+ import { V as VISUALLY_HIDDEN } from './constants-d0e3f49e.js';
6
+ import { u as useMergeRefs } from './mergeRefs-f0d7d6ea.js';
7
+ import { f as forwardRef } from './forwardRef-8bce732e.js';
8
+ import { w as wrapChildrenIconWithSpaces } from './wrapChildrenIconWithSpaces-50d705e6.js';
9
+ import { jsx } from 'react/jsx-runtime';
10
+
11
+ /**
12
+ * Compute a tooltip label based on a label element `innerText` if the text overflows.
13
+ * Updates dynamically on content changes (but not on resize!)
14
+ */
15
+ const useOverflowTooltipLabel = content => {
16
+ const parentTooltip = useTooltipContext();
17
+ const [tooltipLabel, setTooltipLabel] = React__default.useState(undefined);
18
+ const [labelElement, setLabelElement] = React__default.useState(null);
19
+ React__default.useLayoutEffect(() => {
20
+ if (
21
+ // Not inside a tooltip
22
+ !parentTooltip && labelElement &&
23
+ // Not inside a visually hidden
24
+ !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
25
+ // Text overflows
26
+ labelElement.offsetWidth < labelElement.scrollWidth) {
27
+ // Set tooltip label
28
+ setTooltipLabel(labelElement.innerText);
29
+ } else {
30
+ setTooltipLabel(undefined);
31
+ }
32
+ }, [labelElement, parentTooltip, content]);
33
+ return {
34
+ labelRef: setLabelElement,
35
+ tooltipLabel
36
+ };
37
+ };
38
+
39
+ /**
40
+ * Component display name.
41
+ */
42
+ const COMPONENT_NAME = 'Text';
43
+
44
+ /**
45
+ * Component default class name and class prefix.
46
+ */
47
+ const CLASSNAME = getRootClassName(COMPONENT_NAME);
48
+
49
+ /**
50
+ * Component default props.
51
+ */
52
+ const DEFAULT_PROPS = {};
53
+
54
+ /**
55
+ * Text component.
56
+ *
57
+ * @param props Component props.
58
+ * @param ref Component ref.
59
+ * @return React element.
60
+ */
61
+ const Text = forwardRef((props, ref) => {
62
+ const {
63
+ as: Component,
64
+ children,
65
+ className,
66
+ color,
67
+ colorVariant,
68
+ noWrap,
69
+ typography,
70
+ truncate,
71
+ whiteSpace,
72
+ style,
73
+ ...forwardedProps
74
+ } = props;
75
+ const typographyClass = typography && getTypographyClassName(typography);
76
+
77
+ // Truncate mode
78
+ const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
79
+ '--lumx-text-truncate-lines': truncate.lines
80
+ };
81
+ const isTruncatedMultiline = !!truncateLinesStyle;
82
+ const isTruncated = !!truncate;
83
+
84
+ /**
85
+ * Add custom white-space style if specified
86
+ * Disabled if noWrap is specified
87
+ * Disabled if truncated on one-line
88
+ * */
89
+ const whiteSpaceStyle = !noWrap && !(isTruncated && !isTruncatedMultiline) && whiteSpace && {
90
+ '--lumx-text-white-space': whiteSpace
91
+ };
92
+ const {
93
+ tooltipLabel,
94
+ labelRef
95
+ } = useOverflowTooltipLabel(children);
96
+ return /*#__PURE__*/jsx(Component, {
97
+ ref: useMergeRefs(ref, labelRef),
98
+ className: classNames(className, handleBasicClasses({
99
+ prefix: CLASSNAME,
100
+ isTruncated: isTruncated && !isTruncatedMultiline,
101
+ isTruncatedMultiline
102
+ }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME}--no-wrap`),
103
+ title: tooltipLabel,
104
+ style: {
105
+ ...truncateLinesStyle,
106
+ ...whiteSpaceStyle,
107
+ ...style
108
+ },
109
+ ...forwardedProps,
110
+ children: wrapChildrenIconWithSpaces(children)
111
+ });
112
+ });
113
+ Text.displayName = COMPONENT_NAME;
114
+ Text.className = CLASSNAME;
115
+ Text.defaultProps = DEFAULT_PROPS;
116
+
117
+ export { Text as T, useOverflowTooltipLabel as u };
118
+ //# sourceMappingURL=index-25c9e8c2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-25c9e8c2.js","sources":["../../src/hooks/useOverflowTooltipLabel.tsx","../../src/components/text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport { useTooltipContext } from '@lumx/react/components/tooltip/context';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Compute a tooltip label based on a label element `innerText` if the text overflows.\n * Updates dynamically on content changes (but not on resize!)\n */\nexport const useOverflowTooltipLabel = (content: React.ReactNode) => {\n const parentTooltip = useTooltipContext();\n const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);\n const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);\n\n React.useLayoutEffect(() => {\n if (\n // Not inside a tooltip\n !parentTooltip &&\n labelElement &&\n // Not inside a visually hidden\n !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&\n // Text overflows\n labelElement.offsetWidth < labelElement.scrollWidth\n ) {\n // Set tooltip label\n setTooltipLabel(labelElement.innerText);\n } else {\n setTooltipLabel(undefined);\n }\n }, [labelElement, parentTooltip, content]);\n\n return { labelRef: setLabelElement, tooltipLabel };\n};\n","import classNames from 'classnames';\n\nimport { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';\nimport { GenericProps, TextElement } from '@lumx/react/utils/type';\nimport {\n fontColorClass,\n getRootClassName,\n handleBasicClasses,\n getTypographyClassName,\n} from '@lumx/core/js/utils/className';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextProps extends GenericProps {\n /**\n * Color variant.\n */\n color?: ColorWithVariants;\n /**\n * Lightened or darkened variant of the selected color.\n */\n colorVariant?: ColorVariant;\n /**\n * Typography variant.\n */\n typography?: Typography;\n /**\n * Custom component to render the text.\n */\n as: TextElement;\n /**\n * Control whether the text should truncate or not.\n * Setting as `true` will make the text truncate on a single line.\n * Setting as `{ lines: number }` will make the text truncate on a multiple lines.\n */\n truncate?: boolean | { lines: number };\n /**\n * Prevents text to wrap on multiple lines\n * (automatically activated when single line text truncate is activated).\n */\n noWrap?: boolean;\n /**\n * WhiteSpace variant\n * Ignored when `noWrap` is set to true\n * Ignored when `truncate` is set to true or lines: 1\n * */\n whiteSpace?: WhiteSpace;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Text';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {} as const;\n\n/**\n * Text component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Text = forwardRef<TextProps>((props, ref) => {\n const {\n as: Component,\n children,\n className,\n color,\n colorVariant,\n noWrap,\n typography,\n truncate,\n whiteSpace,\n style,\n ...forwardedProps\n } = props;\n\n const typographyClass = typography && getTypographyClassName(typography);\n\n // Truncate mode\n const truncateLinesStyle = typeof truncate === 'object' &&\n truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };\n const isTruncatedMultiline = !!truncateLinesStyle;\n const isTruncated = !!truncate;\n\n /**\n * Add custom white-space style if specified\n * Disabled if noWrap is specified\n * Disabled if truncated on one-line\n * */\n const whiteSpaceStyle = !noWrap &&\n !(isTruncated && !isTruncatedMultiline) &&\n whiteSpace && { '--lumx-text-white-space': whiteSpace };\n\n const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);\n\n return (\n <Component\n ref={useMergeRefs(ref as React.Ref<any>, labelRef)}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isTruncated: isTruncated && !isTruncatedMultiline,\n isTruncatedMultiline,\n }),\n typographyClass,\n fontColorClass(color, colorVariant),\n noWrap && `${CLASSNAME}--no-wrap`,\n )}\n title={tooltipLabel}\n style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}\n {...forwardedProps}\n >\n {wrapChildrenIconWithSpaces(children)}\n </Component>\n );\n});\nText.displayName = COMPONENT_NAME;\nText.className = CLASSNAME;\nText.defaultProps = DEFAULT_PROPS;\n"],"names":["useOverflowTooltipLabel","content","parentTooltip","useTooltipContext","tooltipLabel","setTooltipLabel","React","useState","undefined","labelElement","setLabelElement","useLayoutEffect","closest","VISUALLY_HIDDEN","offsetWidth","scrollWidth","innerText","labelRef","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Text","forwardRef","props","ref","as","Component","children","className","color","colorVariant","noWrap","typography","truncate","whiteSpace","style","forwardedProps","typographyClass","getTypographyClassName","truncateLinesStyle","lines","isTruncatedMultiline","isTruncated","whiteSpaceStyle","_jsx","useMergeRefs","classNames","handleBasicClasses","prefix","fontColorClass","title","wrapChildrenIconWithSpaces","displayName","defaultProps"],"mappings":"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"}
@@ -0,0 +1,437 @@
1
+ import React__default, { useState, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
2
+ import classNames from 'classnames';
3
+ import { u as useCallbackOnEscape } from './useCallbackOnEscape-b956a85d.js';
4
+ import { C as ClickAwayProvider } from './ClickAwayProvider-1204f237.js';
5
+ import { D as DOCUMENT, W as WINDOW } from './constants-d0e3f49e.js';
6
+ import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
7
+ import { u as useMergeRefs } from './mergeRefs-f0d7d6ea.js';
8
+ import { g as getFirstAndLastFocusable, u as useFocusTrap } from './useFocusTrap-2dbae79e.js';
9
+ import { jsx, jsxs } from 'react/jsx-runtime';
10
+ import { f as forwardRef } from './forwardRef-8bce732e.js';
11
+ import { T as ThemeProvider } from './ThemeContext-3181f000.js';
12
+ import memoize from 'lodash/memoize';
13
+ import { A as ARROW_SIZE, u as usePopper, d as detectOverflow, F as FitAnchorWidth, P as Placement, a as POPOVER_ZINDEX } from './constants-43721918.js';
14
+ import { P as Portal } from './Portal-3f86608e.js';
15
+
16
+ /**
17
+ * Hook focusing an element when defined and `focus` boolean `true`.
18
+ *
19
+ * @param element Element to focus.
20
+ * @param shouldFocus Boolean flag to trigger the focus
21
+ */
22
+ function useFocus(element, shouldFocus = true) {
23
+ const [wasFocus, setWasFocus] = useState(false);
24
+ useEffect(() => {
25
+ if (shouldFocus && wasFocus !== shouldFocus && element) {
26
+ element.focus();
27
+ setWasFocus(shouldFocus);
28
+ }
29
+ },
30
+ // eslint-disable-next-line react-hooks/exhaustive-deps
31
+ [element, shouldFocus]);
32
+ }
33
+
34
+ /**
35
+ * HOC component wrapping a component to skip render if predicate return falsy
36
+ */
37
+ const skipRender = (predicate, Component) => {
38
+ const Wrapper = /*#__PURE__*/React__default.forwardRef((props, ref) => {
39
+ if (!DOCUMENT) {
40
+ // Can't render in SSR.
41
+ return null;
42
+ }
43
+ return /*#__PURE__*/jsx(Component, {
44
+ ref: ref,
45
+ ...props
46
+ });
47
+ });
48
+ Wrapper.displayName = Component.displayName;
49
+ return Wrapper;
50
+ };
51
+
52
+ /**
53
+ * Helper component using useLayoutEffect to trigger a callback on before unmount.
54
+ *
55
+ * The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount
56
+ */
57
+ const OnBeforeUnmount = ({
58
+ callbackRef
59
+ }) => {
60
+ useLayoutEffect(() => {
61
+ return () => {
62
+ // On unmount
63
+ // eslint-disable-next-line react-hooks/exhaustive-deps
64
+ callbackRef.current?.();
65
+ };
66
+ },
67
+ // eslint-disable-next-line react-hooks/exhaustive-deps
68
+ []);
69
+ return null;
70
+ };
71
+
72
+ /**
73
+ * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the
74
+ * anchor if needed.
75
+ */
76
+ function useRestoreFocusOnClose({
77
+ focusAnchorOnClose,
78
+ anchorRef,
79
+ parentElement
80
+ }, popoverElement) {
81
+ const onBeforeUnmountRef = React__default.useRef();
82
+ React__default.useEffect(() => {
83
+ if (!popoverElement || !focusAnchorOnClose) {
84
+ onBeforeUnmountRef.current = undefined;
85
+ return;
86
+ }
87
+ onBeforeUnmountRef.current = () => {
88
+ const isFocusWithin = popoverElement?.contains(document.activeElement);
89
+ if (!isFocusWithin) return;
90
+
91
+ // On next render
92
+ setTimeout(() => {
93
+ const anchor = anchorRef.current;
94
+ const elementToFocus =
95
+ // Provided parent element
96
+ parentElement?.current || (
97
+ // Or first focusable element in anchor
98
+ anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
99
+ // Fallback to anchor
100
+ anchor;
101
+ elementToFocus?.focus({
102
+ preventScroll: true
103
+ });
104
+ }, 0);
105
+ };
106
+ }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);
107
+ return /*#__PURE__*/jsx(OnBeforeUnmount, {
108
+ callbackRef: onBeforeUnmountRef
109
+ });
110
+ }
111
+
112
+ /**
113
+ * Popper js modifier to fit popover min width to the anchor width.
114
+ */
115
+ const sameWidth = memoize(anchorWidthOption => ({
116
+ name: 'sameWidth',
117
+ enabled: true,
118
+ phase: 'beforeWrite',
119
+ requires: ['computeStyles'],
120
+ fn({
121
+ state
122
+ }) {
123
+ // eslint-disable-next-line no-param-reassign
124
+ state.styles.popper[anchorWidthOption] = `${state.rects.reference.width}px`;
125
+ },
126
+ effect({
127
+ state
128
+ }) {
129
+ // eslint-disable-next-line no-param-reassign
130
+ state.elements.popper.style[anchorWidthOption] = `${state.elements.reference.offsetWidth}px`;
131
+ }
132
+ }));
133
+
134
+ /**
135
+ * Popper js modifier to compute max size of the popover.
136
+ */
137
+ const maxSize = {
138
+ name: 'maxSize',
139
+ enabled: true,
140
+ phase: 'main',
141
+ requiresIfExists: ['offset', 'preventOverflow', 'flip'],
142
+ fn({
143
+ state,
144
+ name,
145
+ options
146
+ }) {
147
+ const overflow = detectOverflow(state, options);
148
+ const {
149
+ y = 0,
150
+ x = 0
151
+ } = state.modifiersData.preventOverflow;
152
+ const {
153
+ width,
154
+ height
155
+ } = state.rects.popper;
156
+ const [basePlacement] = state.placement.split('-');
157
+ const widthProp = basePlacement === 'left' ? 'left' : 'right';
158
+ const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
159
+ // eslint-disable-next-line no-param-reassign
160
+ state.modifiersData[name] = {
161
+ width: width - overflow[widthProp] - x,
162
+ height: height - overflow[heightProp] - y
163
+ };
164
+ }
165
+ };
166
+
167
+ /**
168
+ * Popper js modifier to apply the max height.
169
+ */
170
+ const applyMaxHeight = {
171
+ name: 'applyMaxHeight',
172
+ enabled: true,
173
+ phase: 'beforeWrite',
174
+ requires: ['maxSize'],
175
+ fn({
176
+ state
177
+ }) {
178
+ const {
179
+ height
180
+ } = state.modifiersData.maxSize;
181
+ // eslint-disable-next-line no-param-reassign
182
+ state.elements.popper.style.maxHeight = `${height - ARROW_SIZE}px`;
183
+ }
184
+ };
185
+ function usePopoverStyle({
186
+ offset,
187
+ hasArrow,
188
+ fitToAnchorWidth,
189
+ fitWithinViewportHeight,
190
+ boundaryRef,
191
+ anchorRef,
192
+ placement,
193
+ style,
194
+ zIndex
195
+ }) {
196
+ const [popperElement, setPopperElement] = useState(null);
197
+ const [arrowElement, setArrowElement] = useState(null);
198
+ const actualOffset = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
199
+ const modifiers = [{
200
+ name: 'offset',
201
+ options: {
202
+ offset: actualOffset
203
+ }
204
+ }];
205
+ if (hasArrow && arrowElement) {
206
+ modifiers.push({
207
+ name: 'arrow',
208
+ options: {
209
+ element: arrowElement,
210
+ padding: ARROW_SIZE / 2
211
+ }
212
+ });
213
+ }
214
+ if (fitToAnchorWidth) {
215
+ const fitWidth = typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : FitAnchorWidth.MIN_WIDTH;
216
+ modifiers.push(sameWidth(fitWidth));
217
+ }
218
+ if (fitWithinViewportHeight) {
219
+ modifiers.push({
220
+ ...maxSize,
221
+ options: {
222
+ boundary: boundaryRef?.current
223
+ }
224
+ }, applyMaxHeight);
225
+ }
226
+ if (boundaryRef) {
227
+ modifiers.push({
228
+ name: 'flip',
229
+ options: {
230
+ boundary: boundaryRef.current
231
+ }
232
+ }, {
233
+ name: 'preventOverflow',
234
+ options: {
235
+ boundary: boundaryRef.current
236
+ }
237
+ });
238
+ }
239
+ const {
240
+ styles,
241
+ attributes,
242
+ state,
243
+ update
244
+ } = usePopper(anchorRef.current, popperElement, {
245
+ placement,
246
+ modifiers
247
+ });
248
+
249
+ // Auto update popover
250
+ useEffect(() => {
251
+ const {
252
+ current: anchorElement
253
+ } = anchorRef;
254
+ if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {
255
+ return undefined;
256
+ }
257
+ let running;
258
+ function updateRateLimited() {
259
+ if (running) return;
260
+ update?.();
261
+ running = setTimeout(() => {
262
+ running = undefined;
263
+ }, 100);
264
+ }
265
+ updateRateLimited();
266
+
267
+ // On anchor or popover resize
268
+ const resizeObserver = new ResizeObserver(updateRateLimited);
269
+ resizeObserver.observe(anchorElement);
270
+ resizeObserver.observe(popperElement);
271
+ return () => {
272
+ resizeObserver.disconnect();
273
+ };
274
+ }, [anchorRef, popperElement, update]);
275
+ const position = state?.placement ?? placement;
276
+ const popoverStyle = useMemo(() => {
277
+ const newStyles = {
278
+ ...style,
279
+ ...styles.popper,
280
+ zIndex
281
+ };
282
+ if (fitWithinViewportHeight && !newStyles.maxHeight) {
283
+ newStyles.maxHeight = WINDOW?.innerHeight || DOCUMENT?.documentElement.clientHeight;
284
+ }
285
+ return newStyles;
286
+ }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
287
+ return {
288
+ styles: {
289
+ arrow: styles.arrow,
290
+ popover: popoverStyle
291
+ },
292
+ attributes,
293
+ isPositioned: (state?.rects?.popper?.y ?? -1) >= 0,
294
+ position,
295
+ setArrowElement,
296
+ setPopperElement,
297
+ popperElement
298
+ };
299
+ }
300
+
301
+ /**
302
+ * Component display name.
303
+ */
304
+ const COMPONENT_NAME = 'Popover';
305
+
306
+ /**
307
+ * Component default class name and class prefix.
308
+ */
309
+ const CLASSNAME = getRootClassName(COMPONENT_NAME);
310
+
311
+ /**
312
+ * Component default props.
313
+ */
314
+ const DEFAULT_PROPS = {
315
+ elevation: 3,
316
+ placement: Placement.AUTO,
317
+ focusAnchorOnClose: true,
318
+ usePortal: true,
319
+ zIndex: POPOVER_ZINDEX
320
+ };
321
+
322
+ // Inner component (must be wrapped before export)
323
+ const _InnerPopover = forwardRef((props, ref) => {
324
+ const {
325
+ anchorRef,
326
+ as: Component = 'div',
327
+ children,
328
+ className,
329
+ closeOnClickAway,
330
+ closeOnEscape,
331
+ elevation = DEFAULT_PROPS.elevation,
332
+ focusElement,
333
+ hasArrow,
334
+ isOpen,
335
+ onClose,
336
+ parentElement,
337
+ usePortal = DEFAULT_PROPS.usePortal,
338
+ focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
339
+ withFocusTrap,
340
+ boundaryRef,
341
+ fitToAnchorWidth,
342
+ fitWithinViewportHeight,
343
+ focusTrapZoneElement,
344
+ offset,
345
+ placement = DEFAULT_PROPS.placement,
346
+ style,
347
+ theme,
348
+ zIndex = DEFAULT_PROPS.zIndex,
349
+ ...forwardedProps
350
+ } = props;
351
+ const popoverRef = useRef(null);
352
+ const {
353
+ styles,
354
+ attributes,
355
+ isPositioned,
356
+ position,
357
+ setArrowElement,
358
+ setPopperElement,
359
+ popperElement
360
+ } = usePopoverStyle({
361
+ offset,
362
+ hasArrow,
363
+ fitToAnchorWidth,
364
+ fitWithinViewportHeight,
365
+ boundaryRef,
366
+ anchorRef,
367
+ placement,
368
+ style,
369
+ zIndex
370
+ });
371
+ const unmountSentinel = useRestoreFocusOnClose({
372
+ focusAnchorOnClose,
373
+ anchorRef,
374
+ parentElement
375
+ }, popperElement);
376
+ const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
377
+ useCallbackOnEscape(onClose, isOpen && closeOnEscape);
378
+
379
+ /** Only set focus within if the focus trap is disabled as they interfere with one another. */
380
+ useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
381
+ useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
382
+ const clickAwayRefs = useRef([popoverRef, anchorRef]);
383
+ const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
384
+ return isOpen ? /*#__PURE__*/jsx(Portal, {
385
+ enabled: usePortal,
386
+ children: /*#__PURE__*/jsxs(Component, {
387
+ ...forwardedProps,
388
+ ref: mergedRefs,
389
+ className: classNames(className, handleBasicClasses({
390
+ prefix: CLASSNAME,
391
+ theme,
392
+ elevation: Math.min(elevation || 0, 5),
393
+ position,
394
+ isInitializing: !styles.popover?.transform
395
+ })),
396
+ style: styles.popover,
397
+ ...attributes.popper,
398
+ children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
399
+ callback: closeOnClickAway && onClose,
400
+ childrenRefs: clickAwayRefs,
401
+ children: [hasArrow && /*#__PURE__*/jsx("div", {
402
+ ref: setArrowElement,
403
+ className: `${CLASSNAME}__arrow`,
404
+ style: styles.arrow,
405
+ children: /*#__PURE__*/jsx("svg", {
406
+ viewBox: "0 0 14 14",
407
+ "aria-hidden": true,
408
+ children: /*#__PURE__*/jsx("path", {
409
+ d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
410
+ })
411
+ })
412
+ }), /*#__PURE__*/jsx(ThemeProvider, {
413
+ value: theme,
414
+ children: children
415
+ })]
416
+ })]
417
+ })
418
+ }) : null;
419
+ });
420
+ _InnerPopover.displayName = COMPONENT_NAME;
421
+
422
+ /**
423
+ * Popover component.
424
+ *
425
+ * @param props Component props.
426
+ * @param ref Component ref.
427
+ * @return React element.
428
+ */
429
+ const Popover = skipRender(
430
+ // Skip render in SSR
431
+ () => Boolean(DOCUMENT), _InnerPopover);
432
+ Popover.displayName = COMPONENT_NAME;
433
+ Popover.className = CLASSNAME;
434
+ Popover.defaultProps = DEFAULT_PROPS;
435
+
436
+ export { Popover as P, useFocus as u };
437
+ //# sourceMappingURL=index-25d2a45e.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-25d2a45e.js","sources":["../../src/hooks/useFocus.tsx","../../src/utils/react/skipRender.tsx","../../src/utils/react/OnBeforeUnmount.tsx","../../src/components/popover/useRestoreFocusOnClose.tsx","../../src/components/popover/usePopoverStyle.tsx","../../src/components/popover/Popover.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Hook focusing an element when defined and `focus` boolean `true`.\n *\n * @param element Element to focus.\n * @param shouldFocus Boolean flag to trigger the focus\n */\nexport function useFocus(element: HTMLElement | null | undefined, shouldFocus = true): void {\n const [wasFocus, setWasFocus] = useState(false);\n useEffect(\n () => {\n if (shouldFocus && wasFocus !== shouldFocus && element) {\n element.focus();\n setWasFocus(shouldFocus);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [element, shouldFocus],\n );\n}\n","import React from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport type { Comp } from '@lumx/react/utils/type';\n/**\n * HOC component wrapping a component to skip render if predicate return falsy\n */\nexport const skipRender = <P, T>(predicate: (props: P) => any, Component: Comp<P, T>) => {\n const Wrapper = React.forwardRef<T, P>((props, ref) => {\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n return <Component ref={ref} {...props} />;\n });\n Wrapper.displayName = Component.displayName;\n return Wrapper;\n};\n","import { useLayoutEffect } from 'react';\n\n/**\n * Helper component using useLayoutEffect to trigger a callback on before unmount.\n *\n * The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount\n */\nexport const OnBeforeUnmount = ({ callbackRef }: { callbackRef: React.RefObject<(() => void) | undefined> }) => {\n useLayoutEffect(\n () => {\n return () => {\n // On unmount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n callbackRef.current?.();\n };\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n return null;\n};\n","import React from 'react';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';\nimport { OnBeforeUnmount } from '@lumx/react/utils/react/OnBeforeUnmount';\nimport type { PopoverProps } from './Popover';\n\n/**\n * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the\n * anchor if needed.\n */\nexport function useRestoreFocusOnClose(\n {\n focusAnchorOnClose,\n anchorRef,\n parentElement,\n }: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,\n popoverElement?: HTMLElement | null,\n) {\n const onBeforeUnmountRef = React.useRef<(() => void) | undefined>();\n\n React.useEffect(() => {\n if (!popoverElement || !focusAnchorOnClose) {\n onBeforeUnmountRef.current = undefined;\n return;\n }\n\n onBeforeUnmountRef.current = () => {\n const isFocusWithin = popoverElement?.contains(document.activeElement);\n if (!isFocusWithin) return;\n\n // On next render\n setTimeout(() => {\n const anchor = anchorRef.current;\n const elementToFocus =\n // Provided parent element\n parentElement?.current ||\n // Or first focusable element in anchor\n (anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||\n // Fallback to anchor\n anchor;\n\n elementToFocus?.focus({ preventScroll: true });\n }, 0);\n };\n }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);\n\n return <OnBeforeUnmount callbackRef={onBeforeUnmountRef} />;\n}\n","import { useEffect, useMemo, useState } from 'react';\nimport memoize from 'lodash/memoize';\nimport { detectOverflow } from '@popperjs/core';\n\nimport { DOCUMENT, WINDOW } from '@lumx/react/constants';\nimport { PopoverProps } from '@lumx/react/components/popover/Popover';\nimport { usePopper } from '@lumx/react/hooks/usePopper';\nimport { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';\n\n/**\n * Popper js modifier to fit popover min width to the anchor width.\n */\nconst sameWidth = memoize((anchorWidthOption: FitAnchorWidth) => ({\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn({ state }: any) {\n // eslint-disable-next-line no-param-reassign\n state.styles.popper[anchorWidthOption] = `${state.rects.reference.width}px`;\n },\n effect({ state }: any) {\n // eslint-disable-next-line no-param-reassign\n state.elements.popper.style[anchorWidthOption] = `${state.elements.reference.offsetWidth}px`;\n },\n}));\n\n/**\n * Popper js modifier to compute max size of the popover.\n */\nconst maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn({ state, name, options }: any) {\n const overflow = detectOverflow(state, options);\n\n const { y = 0, x = 0 } = state.modifiersData.preventOverflow;\n const { width, height } = state.rects.popper;\n\n const [basePlacement] = state.placement.split('-');\n\n const widthProp = basePlacement === 'left' ? 'left' : 'right';\n const heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n // eslint-disable-next-line no-param-reassign\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y,\n };\n },\n};\n\n/**\n * Popper js modifier to apply the max height.\n */\nconst applyMaxHeight = {\n name: 'applyMaxHeight',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['maxSize'],\n fn({ state }: any) {\n const { height } = state.modifiersData.maxSize;\n // eslint-disable-next-line no-param-reassign\n state.elements.popper.style.maxHeight = `${height - ARROW_SIZE}px`;\n },\n};\n\ntype Options = Pick<\n PopoverProps,\n | 'offset'\n | 'hasArrow'\n | 'fitToAnchorWidth'\n | 'fitWithinViewportHeight'\n | 'boundaryRef'\n | 'anchorRef'\n | 'placement'\n | 'style'\n | 'zIndex'\n>;\n\ninterface Output {\n styles: { arrow?: React.CSSProperties; popover?: React.CSSProperties };\n attributes: any;\n isPositioned: boolean;\n position?: Placement;\n setArrowElement?: React.Ref<HTMLDivElement>;\n setPopperElement?: React.Ref<HTMLDivElement>;\n popperElement: HTMLElement | null;\n}\n\nexport function usePopoverStyle({\n offset,\n hasArrow,\n fitToAnchorWidth,\n fitWithinViewportHeight,\n boundaryRef,\n anchorRef,\n placement,\n style,\n zIndex,\n}: Options): Output {\n const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);\n\n const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];\n const modifiers: any = [\n {\n name: 'offset',\n options: { offset: actualOffset },\n },\n ];\n if (hasArrow && arrowElement) {\n modifiers.push({\n name: 'arrow',\n options: {\n element: arrowElement,\n padding: ARROW_SIZE / 2,\n },\n });\n }\n if (fitToAnchorWidth) {\n const fitWidth = typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : FitAnchorWidth.MIN_WIDTH;\n modifiers.push(sameWidth(fitWidth));\n }\n if (fitWithinViewportHeight) {\n modifiers.push({ ...maxSize, options: { boundary: boundaryRef?.current } }, applyMaxHeight);\n }\n if (boundaryRef) {\n modifiers.push(\n { name: 'flip', options: { boundary: boundaryRef.current } },\n { name: 'preventOverflow', options: { boundary: boundaryRef.current } },\n );\n }\n\n const { styles, attributes, state, update } = usePopper(anchorRef.current, popperElement, { placement, modifiers });\n\n // Auto update popover\n useEffect(() => {\n const { current: anchorElement } = anchorRef;\n if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {\n return undefined;\n }\n let running: ReturnType<typeof setTimeout> | undefined;\n function updateRateLimited() {\n if (running) return;\n update?.();\n running = setTimeout(() => {\n running = undefined;\n }, 100);\n }\n updateRateLimited();\n\n // On anchor or popover resize\n const resizeObserver = new ResizeObserver(updateRateLimited);\n resizeObserver.observe(anchorElement);\n resizeObserver.observe(popperElement);\n return () => {\n resizeObserver.disconnect();\n };\n }, [anchorRef, popperElement, update]);\n\n const position = state?.placement ?? placement;\n\n const popoverStyle = useMemo(() => {\n const newStyles = { ...style, ...styles.popper, zIndex };\n\n if (fitWithinViewportHeight && !newStyles.maxHeight) {\n newStyles.maxHeight = WINDOW?.innerHeight || DOCUMENT?.documentElement.clientHeight;\n }\n\n return newStyles;\n }, [style, styles.popper, zIndex, fitWithinViewportHeight]);\n\n return {\n styles: { arrow: styles.arrow, popover: popoverStyle },\n attributes,\n isPositioned: (state?.rects?.popper?.y ?? -1) >= 0,\n position,\n setArrowElement,\n setPopperElement,\n popperElement,\n };\n}\n","import { ReactNode, RefObject, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { skipRender } from '@lumx/react/utils/react/skipRender';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { Portal } from '@lumx/react/utils';\nimport { useRestoreFocusOnClose } from './useRestoreFocusOnClose';\nimport { usePopoverStyle } from './usePopoverStyle';\nimport { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface PopoverProps extends GenericProps, HasTheme {\n /** Reference to the DOM element used to set the position of the popover. */\n anchorRef: React.RefObject<HTMLElement>;\n /** Customize the root element. (Must accept ref forwarding and props forwarding!). */\n as?: React.ElementType;\n /** Element which will act as boundary when opening the popover. */\n boundaryRef?: RefObject<HTMLElement>;\n /** Content. */\n children: ReactNode;\n /** Whether a click anywhere out of the popover would close it. */\n closeOnClickAway?: boolean;\n /** Whether an escape key press would close the popover. */\n closeOnEscape?: boolean;\n /** Shadow elevation. */\n elevation?: Elevation;\n /**\n * Manage popover width:\n * - `maxWidth`: popover not bigger than anchor\n * - `minWidth` or `true`: popover not smaller than anchor\n * - `width`: popover equal to the anchor.\n */\n fitToAnchorWidth?: FitAnchorWidth | boolean;\n /** Shrink popover if even after flipping there is not enough space. */\n fitWithinViewportHeight?: boolean;\n /** Element to focus when opening the popover. */\n focusElement?: RefObject<HTMLElement>;\n /** Whether the focus should go back on the anchor when popover closes and focus is within. */\n focusAnchorOnClose?: boolean;\n /** Whether we put an arrow or not. */\n hasArrow?: boolean;\n /** Whether the popover is open or not. */\n isOpen: boolean;\n /** Offset placement relative to anchor. */\n offset?: Offset;\n /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */\n parentElement?: RefObject<HTMLElement>;\n /** Placement relative to anchor. */\n placement?: Placement;\n /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */\n usePortal?: boolean;\n /** The element in which the focus trap should be set. Default to popover. */\n focusTrapZoneElement?: RefObject<HTMLElement>;\n /** Z-axis position. */\n zIndex?: number;\n /** On close callback (on click away or Escape pressed). */\n onClose?(): void;\n /** Whether the popover should trap the focus within itself. Default to false. */\n withFocusTrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Popover';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<PopoverProps> = {\n elevation: 3,\n placement: Placement.AUTO,\n focusAnchorOnClose: true,\n usePortal: true,\n zIndex: POPOVER_ZINDEX,\n};\n\n// Inner component (must be wrapped before export)\nconst _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {\n const {\n anchorRef,\n as: Component = 'div',\n children,\n className,\n closeOnClickAway,\n closeOnEscape,\n elevation = DEFAULT_PROPS.elevation,\n focusElement,\n hasArrow,\n isOpen,\n onClose,\n parentElement,\n usePortal = DEFAULT_PROPS.usePortal,\n focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,\n withFocusTrap,\n boundaryRef,\n fitToAnchorWidth,\n fitWithinViewportHeight,\n focusTrapZoneElement,\n offset,\n placement = DEFAULT_PROPS.placement,\n style,\n theme,\n zIndex = DEFAULT_PROPS.zIndex,\n ...forwardedProps\n } = props;\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const { styles, attributes, isPositioned, position, setArrowElement, setPopperElement, popperElement } =\n usePopoverStyle({\n offset,\n hasArrow,\n fitToAnchorWidth,\n fitWithinViewportHeight,\n boundaryRef,\n anchorRef,\n placement,\n style,\n zIndex,\n });\n\n const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);\n const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;\n\n useCallbackOnEscape(onClose, isOpen && closeOnEscape);\n\n /** Only set focus within if the focus trap is disabled as they interfere with one another. */\n useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);\n useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);\n\n const clickAwayRefs = useRef([popoverRef, anchorRef]);\n const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);\n\n return isOpen ? (\n <Portal enabled={usePortal}>\n <Component\n {...forwardedProps}\n ref={mergedRefs}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n elevation: Math.min(elevation || 0, 5),\n position,\n isInitializing: !styles.popover?.transform,\n }),\n )}\n style={styles.popover}\n {...attributes.popper}\n >\n {unmountSentinel}\n <ClickAwayProvider callback={closeOnClickAway && onClose} childrenRefs={clickAwayRefs}>\n {hasArrow && (\n <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>\n <svg viewBox=\"0 0 14 14\" aria-hidden>\n <path d=\"M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z\" />\n </svg>\n </div>\n )}\n <ThemeProvider value={theme}>{children}</ThemeProvider>\n </ClickAwayProvider>\n </Component>\n </Portal>\n ) : null;\n});\n_InnerPopover.displayName = COMPONENT_NAME;\n\n/**\n * Popover component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Popover: Comp<PopoverProps, HTMLDivElement> = skipRender(\n // Skip render in SSR\n () => Boolean(DOCUMENT),\n _InnerPopover,\n);\nPopover.displayName = COMPONENT_NAME;\nPopover.className = CLASSNAME;\nPopover.defaultProps = DEFAULT_PROPS;\n"],"names":["useFocus","element","shouldFocus","wasFocus","setWasFocus","useState","useEffect","focus","skipRender","predicate","Component","Wrapper","React","forwardRef","props","ref","DOCUMENT","_jsx","displayName","OnBeforeUnmount","callbackRef","useLayoutEffect","current","useRestoreFocusOnClose","focusAnchorOnClose","anchorRef","parentElement","popoverElement","onBeforeUnmountRef","useRef","undefined","isFocusWithin","contains","document","activeElement","setTimeout","anchor","elementToFocus","getFirstAndLastFocusable","first","preventScroll","sameWidth","memoize","anchorWidthOption","name","enabled","phase","requires","fn","state","styles","popper","rects","reference","width","effect","elements","style","offsetWidth","maxSize","requiresIfExists","options","overflow","detectOverflow","y","x","modifiersData","preventOverflow","height","basePlacement","placement","split","widthProp","heightProp","applyMaxHeight","maxHeight","ARROW_SIZE","usePopoverStyle","offset","hasArrow","fitToAnchorWidth","fitWithinViewportHeight","boundaryRef","zIndex","popperElement","setPopperElement","arrowElement","setArrowElement","actualOffset","along","away","modifiers","push","padding","fitWidth","FitAnchorWidth","MIN_WIDTH","boundary","attributes","update","usePopper","anchorElement","WINDOW","ResizeObserver","running","updateRateLimited","resizeObserver","observe","disconnect","position","popoverStyle","useMemo","newStyles","innerHeight","documentElement","clientHeight","arrow","popover","isPositioned","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","elevation","Placement","AUTO","usePortal","POPOVER_ZINDEX","_InnerPopover","as","children","className","closeOnClickAway","closeOnEscape","focusElement","isOpen","onClose","withFocusTrap","focusTrapZoneElement","theme","forwardedProps","popoverRef","unmountSentinel","focusZoneElement","useCallbackOnEscape","useFocusTrap","clickAwayRefs","mergedRefs","useMergeRefs","Portal","_jsxs","classNames","handleBasicClasses","prefix","Math","min","isInitializing","transform","ClickAwayProvider","callback","childrenRefs","viewBox","d","ThemeProvider","value","Popover","Boolean","defaultProps"],"mappings":"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"}
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Properties of a component to use to determine its name.
3
+ * In the order of preference.
4
+ */
5
+ const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
6
+ /**
7
+ * Create a predicate function that checks if a ReactNode is a react element from the given component.
8
+ *
9
+ * @param component React function component or the component name
10
+ * @return predicate returning true if value is instance of the component
11
+ */
12
+ const isComponent = component => instance => {
13
+ const componentName = typeof component === 'string' ? component : component.displayName;
14
+ return !!instance.$$typeof && NAME_PROPERTIES.some(nameProperty => instance[nameProperty] === componentName);
15
+ };
16
+
17
+ export { isComponent as i };
18
+ //# sourceMappingURL=isComponent-b9762ff1.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"isComponent-b9762ff1.js","sources":["../../src/utils/type/isComponent.ts"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { Comp } from './Comp';\n\n/**\n * Properties of a component to use to determine its name.\n * In the order of preference.\n */\nconst NAME_PROPERTIES: string[] = [\n 'type',\n 'type.displayName',\n 'displayName',\n 'name',\n 'type.name',\n 'props.mdxType',\n '_reactInternalFiber.elementType.name',\n];\n/**\n * Create a predicate function that checks if a ReactNode is a react element from the given component.\n *\n * @param component React function component or the component name\n * @return predicate returning true if value is instance of the component\n */\nexport const isComponent =\n <C>(component: Comp<C, any> | string) =>\n (instance: ReactNode): instance is ReactElement => {\n const componentName = typeof component === 'string' ? component : component.displayName;\n\n return (\n !!(instance as any).$$typeof &&\n NAME_PROPERTIES.some((nameProperty: string): boolean => (instance as any)[nameProperty] === componentName)\n );\n };\n"],"names":["NAME_PROPERTIES","isComponent","component","instance","componentName","displayName","$$typeof","some","nameProperty"],"mappings":"AAGA;AACA;AACA;AACA;AACA,MAAMA,eAAyB,GAAG,CAC9B,MAAM,EACN,kBAAkB,EAClB,aAAa,EACb,MAAM,EACN,WAAW,EACX,eAAe,EACf,sCAAsC,CACzC,CAAA;AACD;AACA;AACA;AACA;AACA;AACA;MACaC,WAAW,GAChBC,SAAgC,IACnCC,QAAmB,IAA+B;EAC/C,MAAMC,aAAa,GAAG,OAAOF,SAAS,KAAK,QAAQ,GAAGA,SAAS,GAAGA,SAAS,CAACG,WAAW,CAAA;AAEvF,EAAA,OACI,CAAC,CAAEF,QAAQ,CAASG,QAAQ,IAC5BN,eAAe,CAACO,IAAI,CAAEC,YAAoB,IAAeL,QAAQ,CAASK,YAAY,CAAC,KAAKJ,aAAa,CAAC,CAAA;AAElH;;;;"}