@lumx/react 3.20.1-alpha.11 → 3.20.1-alpha.12

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/{8fcceef3.js → 0420e67b.js} +13 -14
  2. package/_internal/{8fcceef3.js.map → 0420e67b.js.map} +1 -1
  3. package/_internal/{7b214f74.js → 0a490b07.js} +29 -24
  4. package/_internal/{7b214f74.js.map → 0a490b07.js.map} +1 -1
  5. package/_internal/{4d92e13b.js → 0be1006e.js} +25 -25
  6. package/_internal/{4d92e13b.js.map → 0be1006e.js.map} +1 -1
  7. package/_internal/{dd0a245d.js → 0d1a078c.js} +44 -42
  8. package/_internal/{dd0a245d.js.map → 0d1a078c.js.map} +1 -1
  9. package/_internal/{1eab656b.js → 15eab19b.js} +25 -25
  10. package/_internal/{1eab656b.js.map → 15eab19b.js.map} +1 -1
  11. package/_internal/{87bada02.js → 179a84d1.js} +64 -67
  12. package/_internal/{87bada02.js.map → 179a84d1.js.map} +1 -1
  13. package/_internal/{4c5a7b63.js → 193521fa.js} +11 -12
  14. package/_internal/{4c5a7b63.js.map → 193521fa.js.map} +1 -1
  15. package/_internal/{f57d4eb8.js → 1a90ea3d.js} +15 -17
  16. package/_internal/{f57d4eb8.js.map → 1a90ea3d.js.map} +1 -1
  17. package/_internal/1deba7d7.js +224 -0
  18. package/_internal/{2d6bde7d.js.map → 1deba7d7.js.map} +1 -1
  19. package/_internal/{2938a251.js → 1ea72630.js} +16 -17
  20. package/_internal/{2938a251.js.map → 1ea72630.js.map} +1 -1
  21. package/_internal/21b83d16.js +137 -0
  22. package/_internal/{5ba8fae8.js.map → 21b83d16.js.map} +1 -1
  23. package/_internal/297bed8f.js +457 -0
  24. package/_internal/{e53b5a39.js.map → 297bed8f.js.map} +1 -1
  25. package/_internal/{432c85a7.js → 2c2b6a89.js} +9 -7
  26. package/_internal/{432c85a7.js.map → 2c2b6a89.js.map} +1 -1
  27. package/_internal/{bba7d4c4.js → 2f1716fa.js} +75 -63
  28. package/_internal/{bba7d4c4.js.map → 2f1716fa.js.map} +1 -1
  29. package/_internal/{2c7942af.js → 2f6c7f84.js} +16 -21
  30. package/_internal/{2c7942af.js.map → 2f6c7f84.js.map} +1 -1
  31. package/_internal/{64046d7a.js → 329b5f12.js} +10 -12
  32. package/_internal/{64046d7a.js.map → 329b5f12.js.map} +1 -1
  33. package/_internal/332e9844.js +2 -0
  34. package/_internal/332e9844.js.map +1 -0
  35. package/_internal/{85d992d2.js → 34c59f5b.js} +101 -98
  36. package/_internal/{85d992d2.js.map → 34c59f5b.js.map} +1 -1
  37. package/_internal/{30f4c83c.js → 370bdaed.js} +7 -5
  38. package/_internal/{30f4c83c.js.map → 370bdaed.js.map} +1 -1
  39. package/_internal/{7c4f4643.js → 37b007a4.js} +2 -2
  40. package/_internal/{7c4f4643.js.map → 37b007a4.js.map} +1 -1
  41. package/_internal/{07e0bd90.js → 3a4e4636.js} +51 -36
  42. package/_internal/{07e0bd90.js.map → 3a4e4636.js.map} +1 -1
  43. package/_internal/{3683d267.js → 3e653144.js} +8 -11
  44. package/_internal/{3683d267.js.map → 3e653144.js.map} +1 -1
  45. package/_internal/{c43d098b.js → 3f86608e.js} +5 -2
  46. package/_internal/{c43d098b.js.map → 3f86608e.js.map} +1 -1
  47. package/_internal/{b3bfbe72.js → 478b5c92.js} +2 -2
  48. package/_internal/{b3bfbe72.js.map → 478b5c92.js.map} +1 -1
  49. package/_internal/4962be5b.js +121 -0
  50. package/_internal/{70cf341b.js.map → 4962be5b.js.map} +1 -1
  51. package/_internal/{407735b4.js → 4cd870a5.js} +2 -2
  52. package/_internal/{407735b4.js.map → 4cd870a5.js.map} +1 -1
  53. package/_internal/{e4613195.js → 501f2f9f.js} +8 -9
  54. package/_internal/{e4613195.js.map → 501f2f9f.js.map} +1 -1
  55. package/_internal/5e7b90e2.js +2 -0
  56. package/_internal/5e7b90e2.js.map +1 -0
  57. package/_internal/{18334f0d.js → 5ec059fe.js} +48 -43
  58. package/_internal/{18334f0d.js.map → 5ec059fe.js.map} +1 -1
  59. package/_internal/{fc47f2da.js → 5f8f9454.js} +10 -12
  60. package/_internal/{fc47f2da.js.map → 5f8f9454.js.map} +1 -1
  61. package/_internal/{3f3de25e.js → 5fe09341.js} +3 -3
  62. package/_internal/{3f3de25e.js.map → 5fe09341.js.map} +1 -1
  63. package/_internal/{714809cc.js → 628468c4.js} +47 -46
  64. package/_internal/{714809cc.js.map → 628468c4.js.map} +1 -1
  65. package/_internal/{d3321a86.js → 6589b796.js} +2 -12
  66. package/_internal/{d3321a86.js.map → 6589b796.js.map} +1 -1
  67. package/_internal/{2368cb68.js → 65f91970.js} +43 -43
  68. package/_internal/{2368cb68.js.map → 65f91970.js.map} +1 -1
  69. package/_internal/66f691d3.js +74 -0
  70. package/_internal/{1921f348.js.map → 66f691d3.js.map} +1 -1
  71. package/_internal/{bdd41804.js → 68c10f98.js} +50 -41
  72. package/_internal/{bdd41804.js.map → 68c10f98.js.map} +1 -1
  73. package/_internal/{9cfa3e10.js → 690ca33e.js} +36 -35
  74. package/_internal/{9cfa3e10.js.map → 690ca33e.js.map} +1 -1
  75. package/_internal/6ca04271.js +108 -0
  76. package/_internal/{a67f26a8.js.map → 6ca04271.js.map} +1 -1
  77. package/_internal/{cdc3efab.js → 6da19518.js} +24 -32
  78. package/_internal/{cdc3efab.js.map → 6da19518.js.map} +1 -1
  79. package/_internal/{bcce6ceb.js → 7093ba23.js} +6 -4
  80. package/_internal/{bcce6ceb.js.map → 7093ba23.js.map} +1 -1
  81. package/_internal/{bc4cb4c0.js → 74a4a214.js} +29 -33
  82. package/_internal/{bc4cb4c0.js.map → 74a4a214.js.map} +1 -1
  83. package/_internal/{95a2e851.js → 76be70dd.js} +3 -3
  84. package/_internal/{95a2e851.js.map → 76be70dd.js.map} +1 -1
  85. package/_internal/{60f8e509.js → 7f54e947.js} +114 -101
  86. package/_internal/{60f8e509.js.map → 7f54e947.js.map} +1 -1
  87. package/_internal/{72407886.js → 84dfe68f.js} +50 -44
  88. package/_internal/{72407886.js.map → 84dfe68f.js.map} +1 -1
  89. package/_internal/{e2440593.js → 85e3a5ca.js} +32 -35
  90. package/_internal/{e2440593.js.map → 85e3a5ca.js.map} +1 -1
  91. package/_internal/{742d4906.js → 86aa4aa4.js} +60 -54
  92. package/_internal/{742d4906.js.map → 86aa4aa4.js.map} +1 -1
  93. package/_internal/{4e1dde79.js → 8ab42752.js} +25 -26
  94. package/_internal/{4e1dde79.js.map → 8ab42752.js.map} +1 -1
  95. package/_internal/{0f4b35b2.js → 95cfd814.js} +14 -20
  96. package/_internal/{0f4b35b2.js.map → 95cfd814.js.map} +1 -1
  97. package/_internal/{d6b3a3c0.js → 9a4dfad0.js} +48 -39
  98. package/_internal/{d6b3a3c0.js.map → 9a4dfad0.js.map} +1 -1
  99. package/_internal/{80e5c950.js → 9c9df5f2.js} +19 -19
  100. package/_internal/{80e5c950.js.map → 9c9df5f2.js.map} +1 -1
  101. package/_internal/{21aeb1c7.js → 9d1336a1.js} +6 -6
  102. package/_internal/{21aeb1c7.js.map → 9d1336a1.js.map} +1 -1
  103. package/_internal/{ee64ab0d.js → 9fdc715b.js} +37 -34
  104. package/_internal/{ee64ab0d.js.map → 9fdc715b.js.map} +1 -1
  105. package/_internal/a003602b.js +116 -0
  106. package/_internal/{32698205.js.map → a003602b.js.map} +1 -1
  107. package/_internal/{baa0a23b.js → a34639bd.js} +31 -29
  108. package/_internal/{baa0a23b.js.map → a34639bd.js.map} +1 -1
  109. package/_internal/{cb036703.js → a84f4981.js} +35 -26
  110. package/_internal/{cb036703.js.map → a84f4981.js.map} +1 -1
  111. package/_internal/{9210e2f3.js → b0a7a999.js} +10 -12
  112. package/_internal/{9210e2f3.js.map → b0a7a999.js.map} +1 -1
  113. package/_internal/{3646abc3.js → b0b2e33d.js} +117 -104
  114. package/_internal/{3646abc3.js.map → b0b2e33d.js.map} +1 -1
  115. package/_internal/{1aaa0341.js → b1af5979.js} +168 -160
  116. package/_internal/{1aaa0341.js.map → b1af5979.js.map} +1 -1
  117. package/_internal/{21cf275f.js → b477da26.js} +63 -57
  118. package/_internal/{21cf275f.js.map → b477da26.js.map} +1 -1
  119. package/_internal/{60923026.js → b8667090.js} +2 -2
  120. package/_internal/{60923026.js.map → b8667090.js.map} +1 -1
  121. package/_internal/{1e4b7ad5.js → bae266a9.js} +19 -18
  122. package/_internal/{1e4b7ad5.js.map → bae266a9.js.map} +1 -1
  123. package/_internal/{9d8130ae.js → be6da9b0.js} +69 -74
  124. package/_internal/{9d8130ae.js.map → be6da9b0.js.map} +1 -1
  125. package/_internal/{9452daf7.js → c0414b89.js} +10 -12
  126. package/_internal/{9452daf7.js.map → c0414b89.js.map} +1 -1
  127. package/_internal/{e566d502.js → c2388b10.js} +21 -17
  128. package/_internal/{e566d502.js.map → c2388b10.js.map} +1 -1
  129. package/_internal/{9cf0d217.js → c459a04d.js} +55 -54
  130. package/_internal/{9cf0d217.js.map → c459a04d.js.map} +1 -1
  131. package/_internal/c6ca7494.js +2 -0
  132. package/_internal/c6ca7494.js.map +1 -0
  133. package/_internal/{01bc8fcf.js → cdddaed8.js} +20 -18
  134. package/_internal/{01bc8fcf.js.map → cdddaed8.js.map} +1 -1
  135. package/_internal/{0361b7fb.js → d45e3f16.js} +2 -2
  136. package/_internal/{0361b7fb.js.map → d45e3f16.js.map} +1 -1
  137. package/_internal/{d66c4375.js → d5f316cb.js} +2 -2
  138. package/_internal/{d66c4375.js.map → d5f316cb.js.map} +1 -1
  139. package/_internal/{0a31e895.js → db4fdc7b.js} +63 -57
  140. package/_internal/{0a31e895.js.map → db4fdc7b.js.map} +1 -1
  141. package/_internal/dbe0cf24.js +75 -0
  142. package/_internal/{803945f7.js.map → dbe0cf24.js.map} +1 -1
  143. package/_internal/{4ceaf17c.js → e2afb13f.js} +2 -2
  144. package/_internal/{4ceaf17c.js.map → e2afb13f.js.map} +1 -1
  145. package/_internal/{b925072d.js → e52f0d3f.js} +37 -34
  146. package/_internal/{b925072d.js.map → e52f0d3f.js.map} +1 -1
  147. package/_internal/{aa8c5d9b.js → e6dd117e.js} +2 -2
  148. package/_internal/{aa8c5d9b.js.map → e6dd117e.js.map} +1 -1
  149. package/_internal/{077b7bef.js → ea04260d.js} +6 -6
  150. package/_internal/{077b7bef.js.map → ea04260d.js.map} +1 -1
  151. package/_internal/{77eb8ef3.js → eaa8b1d8.js} +39 -38
  152. package/_internal/{77eb8ef3.js.map → eaa8b1d8.js.map} +1 -1
  153. package/_internal/{aafcf80e.js → edab29ce.js} +61 -65
  154. package/_internal/{aafcf80e.js.map → edab29ce.js.map} +1 -1
  155. package/_internal/{38b3ecf3.js → f0900583.js} +54 -45
  156. package/_internal/{38b3ecf3.js.map → f0900583.js.map} +1 -1
  157. package/_internal/{881714a1.js → f23cdf84.js} +45 -51
  158. package/_internal/{881714a1.js.map → f23cdf84.js.map} +1 -1
  159. package/_internal/f52e979e.js +3 -0
  160. package/_internal/f52e979e.js.map +1 -0
  161. package/_internal/{1ce667fb.js → f5508d3d.js} +53 -51
  162. package/_internal/{1ce667fb.js.map → f5508d3d.js.map} +1 -1
  163. package/_internal/{43262bfe.js → f93fe83e.js} +11 -13
  164. package/_internal/{43262bfe.js.map → f93fe83e.js.map} +1 -1
  165. package/index.js +63 -63
  166. package/package.json +3 -11
  167. package/utils/index.js +3 -3
  168. package/_internal/1921f348.js +0 -72
  169. package/_internal/286fc728.js +0 -2
  170. package/_internal/286fc728.js.map +0 -1
  171. package/_internal/2d6bde7d.js +0 -209
  172. package/_internal/32698205.js +0 -107
  173. package/_internal/5ba8fae8.js +0 -120
  174. package/_internal/70cf341b.js +0 -117
  175. package/_internal/803945f7.js +0 -65
  176. package/_internal/a67f26a8.js +0 -98
  177. package/_internal/ac3bc511.js +0 -2
  178. package/_internal/ac3bc511.js.map +0 -1
  179. package/_internal/cc995526.js +0 -2
  180. package/_internal/cc995526.js.map +0 -1
  181. package/_internal/e2122a37.js +0 -3
  182. package/_internal/e2122a37.js.map +0 -1
  183. package/_internal/e53b5a39.js +0 -407
@@ -1,12 +1,13 @@
1
- import { m as getRootClassName, n as forwardRef, _ as _extends, l as classNames } from './d3321a86.js';
2
- import { h as handleBasicClasses } from './4ceaf17c.js';
1
+ import { m as getRootClassName, n as forwardRef, l as classNames } from './6589b796.js';
2
+ import { h as handleBasicClasses } from './e2afb13f.js';
3
3
  import { g as getTypographyClassName } from './d0dd1815.js';
4
- import { f as fontColorClass } from './0361b7fb.js';
4
+ import { f as fontColorClass } from './d45e3f16.js';
5
5
  import React__default from 'react';
6
- import { u as useTooltipContext } from './21aeb1c7.js';
7
- import { V as VISUALLY_HIDDEN } from './b3bfbe72.js';
6
+ import { u as useTooltipContext } from './9d1336a1.js';
7
+ import { V as VISUALLY_HIDDEN } from './478b5c92.js';
8
8
  import { u as useMergeRefs } from './f0d7d6ea.js';
9
- import { w as wrapChildrenIconWithSpaces } from './7c4f4643.js';
9
+ import { w as wrapChildrenIconWithSpaces } from './37b007a4.js';
10
+ import { jsx } from 'react/jsx-runtime';
10
11
 
11
12
  /**
12
13
  * Compute a tooltip label based on a label element `innerText` if the text overflows.
@@ -36,10 +37,6 @@ const useOverflowTooltipLabel = content => {
36
37
  };
37
38
  };
38
39
 
39
- /**
40
- * Defines the props of the component.
41
- */
42
-
43
40
  /**
44
41
  * Component display name.
45
42
  */
@@ -97,7 +94,7 @@ const Text = forwardRef((props, ref) => {
97
94
  tooltipLabel,
98
95
  labelRef
99
96
  } = useOverflowTooltipLabel(children);
100
- return /*#__PURE__*/React.createElement(Component, _extends({
97
+ return /*#__PURE__*/jsx(Component, {
101
98
  ref: useMergeRefs(ref, labelRef),
102
99
  className: classNames(className, handleBasicClasses({
103
100
  prefix: CLASSNAME,
@@ -109,12 +106,14 @@ const Text = forwardRef((props, ref) => {
109
106
  ...truncateLinesStyle,
110
107
  ...whiteSpaceStyle,
111
108
  ...style
112
- }
113
- }, forwardedProps), wrapChildrenIconWithSpaces(children));
109
+ },
110
+ ...forwardedProps,
111
+ children: wrapChildrenIconWithSpaces(children)
112
+ });
114
113
  });
115
114
  Text.displayName = COMPONENT_NAME;
116
115
  Text.className = CLASSNAME;
117
116
  Text.defaultProps = DEFAULT_PROPS;
118
117
 
119
118
  export { Text as T, useOverflowTooltipLabel as u };
120
- //# sourceMappingURL=8fcceef3.js.map
119
+ //# sourceMappingURL=0420e67b.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"8fcceef3.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","createElement","_extends","useMergeRefs","classNames","handleBasicClasses","prefix","fontColorClass","title","wrapChildrenIconWithSpaces","displayName","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"0420e67b.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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"}
@@ -1,8 +1,9 @@
1
- import { m as getRootClassName, d as Emphasis, c as Size, n as forwardRef, b as Theme, _ as _extends } from './d3321a86.js';
2
- import { B as ButtonRoot } from './01bc8fcf.js';
1
+ import { B as ButtonRoot } from './cdddaed8.js';
2
+ import { m as getRootClassName, d as Emphasis, c as Size, n as forwardRef, b as Theme } from './6589b796.js';
3
3
  import { u as useTheme, T as ThemeProvider } from './3181f000.js';
4
- import { Tooltip } from './d6b3a3c0.js';
5
- import { I as Icon } from './4e1dde79.js';
4
+ import { jsx } from 'react/jsx-runtime';
5
+ import { Tooltip } from './9a4dfad0.js';
6
+ import { I as Icon } from './8ab42752.js';
6
7
 
7
8
  /**
8
9
  * Component display name.
@@ -42,29 +43,33 @@ const IconButton = forwardRef((props, ref) => {
42
43
  hideTooltip,
43
44
  ...forwardedProps
44
45
  } = props;
45
- return /*#__PURE__*/React.createElement(Tooltip, _extends({
46
- label: hideTooltip ? '' : label
47
- }, tooltipProps), /*#__PURE__*/React.createElement(ButtonRoot, _extends({
48
- ref: ref,
49
- emphasis,
50
- size,
51
- theme
52
- }, forwardedProps, {
53
- "aria-label": label,
54
- variant: "icon"
55
- }), image ? /*#__PURE__*/React.createElement("img", {
56
- // no need to set alt as an aria-label is already set on the button
57
- alt: "",
58
- src: image
59
- }) : /*#__PURE__*/React.createElement(ThemeProvider, {
60
- value: undefined
61
- }, /*#__PURE__*/React.createElement(Icon, {
62
- icon: icon
63
- }))));
46
+ return /*#__PURE__*/jsx(Tooltip, {
47
+ label: hideTooltip ? '' : label,
48
+ ...tooltipProps,
49
+ children: /*#__PURE__*/jsx(ButtonRoot, {
50
+ ref: ref,
51
+ emphasis,
52
+ size,
53
+ theme,
54
+ ...forwardedProps,
55
+ "aria-label": label,
56
+ variant: "icon",
57
+ children: image ? /*#__PURE__*/jsx("img", {
58
+ // no need to set alt as an aria-label is already set on the button
59
+ alt: "",
60
+ src: image
61
+ }) : /*#__PURE__*/jsx(ThemeProvider, {
62
+ value: undefined,
63
+ children: /*#__PURE__*/jsx(Icon, {
64
+ icon: icon
65
+ })
66
+ })
67
+ })
68
+ });
64
69
  });
65
70
  IconButton.displayName = COMPONENT_NAME;
66
71
  IconButton.className = CLASSNAME;
67
72
  IconButton.defaultProps = DEFAULT_PROPS;
68
73
 
69
74
  export { IconButton as I };
70
- //# sourceMappingURL=7b214f74.js.map
75
+ //# sourceMappingURL=0a490b07.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"7b214f74.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon (SVG path).\n * If `image` is also set, `image` will be used instead.\n */\n icon?: string;\n /**\n * Image (image url).\n * Has priority over `icon`.\n */\n image?: string;\n /**\n * Label text (required for a11y purpose).\n * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n */\n label: string;\n /**\n * Props to pass to the tooltip.\n * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n * */\n tooltipProps?: Partial<TooltipProps>;\n /** Whether the tooltip should be hidden or not. */\n hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\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<IconButtonProps> = {\n emphasis: Emphasis.high,\n size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n emphasis = DEFAULT_PROPS.emphasis,\n image,\n icon,\n label,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n tooltipProps,\n hideTooltip,\n ...forwardedProps\n } = props;\n\n return (\n <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n {image ? (\n <img\n // no need to set alt as an aria-label is already set on the button\n alt=\"\"\n src={image}\n />\n ) : (\n <ThemeProvider value={undefined}>\n <Icon icon={icon as string} />\n </ThemeProvider>\n )}\n </ButtonRoot>\n </Tooltip>\n );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","React","createElement","Tooltip","_extends","ButtonRoot","variant","alt","src","ThemeProvider","value","undefined","Icon","displayName","className","defaultProps"],"mappings":";;;;;;AA+BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFb,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCc,KAAK;IACLC,IAAI;IACJC,KAAK;IACLb,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBc,IAAAA,KAAK,GAAGP,YAAY;IACpBQ,YAAY;IACZC,WAAW;IACX,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;AAET,EAAA,oBACIa,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AAACR,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAAA;GAAWE,EAAAA,YAAY,gBACtDG,KAAA,CAAAC,aAAA,CAACG,UAAU,EAAAD,QAAA,CAAA;AAACf,IAAAA,GAAG,EAAEA,GAAI;IAAOT,QAAQ;IAAEG,IAAI;AAAEc,IAAAA,KAAAA;AAAK,GAAA,EAAKG,cAAc,EAAA;AAAI,IAAA,YAAA,EAAYJ,KAAM;AAACU,IAAAA,OAAO,EAAC,MAAA;AAAM,GAAA,CAAA,EACpGZ,KAAK,gBACFO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACI;AACAK,IAAAA,GAAG,EAAC,EAAE;AACNC,IAAAA,GAAG,EAAEd,KAAAA;AAAM,GACd,CAAC,gBAEFO,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAEC,SAAAA;AAAU,GAAA,eAC5BV,KAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;AAACjB,IAAAA,IAAI,EAAEA,IAAAA;GAAiB,CAClB,CAEX,CACP,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC2B,WAAW,GAAGrC,cAAc,CAAA;AACvCU,UAAU,CAAC4B,SAAS,GAAGrC,SAAS,CAAA;AAChCS,UAAU,CAAC6B,YAAY,GAAGpC,aAAa;;;;"}
1
+ {"version":3,"file":"0a490b07.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon (SVG path).\n * If `image` is also set, `image` will be used instead.\n */\n icon?: string;\n /**\n * Image (image url).\n * Has priority over `icon`.\n */\n image?: string;\n /**\n * Label text (required for a11y purpose).\n * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n */\n label: string;\n /**\n * Props to pass to the tooltip.\n * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n * */\n tooltipProps?: Partial<TooltipProps>;\n /** Whether the tooltip should be hidden or not. */\n hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\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<IconButtonProps> = {\n emphasis: Emphasis.high,\n size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n emphasis = DEFAULT_PROPS.emphasis,\n image,\n icon,\n label,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n tooltipProps,\n hideTooltip,\n ...forwardedProps\n } = props;\n\n return (\n <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n {image ? (\n <img\n // no need to set alt as an aria-label is already set on the button\n alt=\"\"\n src={image}\n />\n ) : (\n <ThemeProvider value={undefined}>\n <Icon icon={icon as string} />\n </ThemeProvider>\n )}\n </ButtonRoot>\n </Tooltip>\n );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","_jsx","Tooltip","children","ButtonRoot","variant","alt","src","ThemeProvider","value","undefined","Icon","displayName","className","defaultProps"],"mappings":";;;;;;;AA+BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFb,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCc,KAAK;IACLC,IAAI;IACJC,KAAK;IACLb,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBc,IAAAA,KAAK,GAAGP,YAAY;IACpBQ,YAAY;IACZC,WAAW;IACX,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;EAET,oBACIa,GAAA,CAACC,OAAO,EAAA;AAACN,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAM;AAAA,IAAA,GAAKE,YAAY;IAAAK,QAAA,eACtDF,GAAA,CAACG,UAAU,EAAA;AAACf,MAAAA,GAAG,EAAEA,GAAI;MAAOT,QAAQ;MAAEG,IAAI;MAAEc,KAAK;AAAE,MAAA,GAAGG,cAAc;AAAI,MAAA,YAAA,EAAYJ,KAAM;AAACS,MAAAA,OAAO,EAAC,MAAM;MAAAF,QAAA,EACpGT,KAAK,gBACFO,GAAA,CAAA,KAAA,EAAA;AACI;AACAK,QAAAA,GAAG,EAAC,EAAE;AACNC,QAAAA,GAAG,EAAEb,KAAAA;AAAM,OACd,CAAC,gBAEFO,GAAA,CAACO,aAAa,EAAA;AAACC,QAAAA,KAAK,EAAEC,SAAU;QAAAP,QAAA,eAC5BF,GAAA,CAACU,IAAI,EAAA;AAAChB,UAAAA,IAAI,EAAEA,IAAAA;SAAiB,CAAA;OAClB,CAAA;KAEX,CAAA;AAAC,GACR,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC0B,WAAW,GAAGpC,cAAc,CAAA;AACvCU,UAAU,CAAC2B,SAAS,GAAGpC,SAAS,CAAA;AAChCS,UAAU,CAAC4B,YAAY,GAAGnC,aAAa;;;;"}
@@ -1,15 +1,12 @@
1
- import { m as getRootClassName, K as Kind, j as ColorPalette, n as forwardRef, _ as _extends, l as classNames, c as Size, d as Emphasis } from './d3321a86.js';
2
- import { h as handleBasicClasses } from './4ceaf17c.js';
1
+ import { m as getRootClassName, K as Kind, j as ColorPalette, n as forwardRef, l as classNames, c as Size, d as Emphasis } from './6589b796.js';
2
+ import { h as handleBasicClasses } from './e2afb13f.js';
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
4
  import { m as mdiAlert, a as mdiInformation } from './49bbeed3.js';
4
5
  import { m as mdiCheckCircle } from './de24f857.js';
5
- import { m as mdiAlertCircle, I as Icon } from './4e1dde79.js';
6
- import { I as IconButton } from './7b214f74.js';
6
+ import { m as mdiAlertCircle, I as Icon } from './8ab42752.js';
7
+ import { I as IconButton } from './0a490b07.js';
7
8
  import { m as mdiClose } from './eaf6c45a.js';
8
9
 
9
- /**
10
- * Defines the props of the component.
11
- */
12
-
13
10
  /**
14
11
  * Component display name.
15
12
  */
@@ -68,30 +65,33 @@ const Message = forwardRef((props, ref) => {
68
65
  label: closeButtonLabel
69
66
  } = closeButtonProps || {};
70
67
  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
71
- return /*#__PURE__*/React.createElement("div", _extends({
68
+ return /*#__PURE__*/jsxs("div", {
72
69
  ref: ref,
73
70
  className: classNames(className, handleBasicClasses({
74
71
  color,
75
72
  hasBackground,
76
73
  prefix: CLASSNAME
77
- }))
78
- }, forwardedProps), (customIcon || icon) && /*#__PURE__*/React.createElement(Icon, {
79
- className: `${CLASSNAME}__icon`,
80
- icon: customIcon || icon,
81
- size: Size.xs,
82
- color: color
83
- }), /*#__PURE__*/React.createElement("div", {
84
- className: `${CLASSNAME}__text`
85
- }, children), isCloseButtonDisplayed && /*#__PURE__*/React.createElement(IconButton, {
86
- className: `${CLASSNAME}__close-button`,
87
- icon: mdiClose,
88
- onClick: onClick,
89
- label: closeButtonLabel,
90
- emphasis: Emphasis.low
91
- }));
74
+ })),
75
+ ...forwardedProps,
76
+ children: [(customIcon || icon) && /*#__PURE__*/jsx(Icon, {
77
+ className: `${CLASSNAME}__icon`,
78
+ icon: customIcon || icon,
79
+ size: Size.xs,
80
+ color: color
81
+ }), /*#__PURE__*/jsx("div", {
82
+ className: `${CLASSNAME}__text`,
83
+ children: children
84
+ }), isCloseButtonDisplayed && /*#__PURE__*/jsx(IconButton, {
85
+ className: `${CLASSNAME}__close-button`,
86
+ icon: mdiClose,
87
+ onClick: onClick,
88
+ label: closeButtonLabel,
89
+ emphasis: Emphasis.low
90
+ })]
91
+ });
92
92
  });
93
93
  Message.displayName = COMPONENT_NAME;
94
94
  Message.className = CLASSNAME;
95
95
 
96
96
  export { Message };
97
- //# sourceMappingURL=4d92e13b.js.map
97
+ //# sourceMappingURL=0be1006e.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"4d92e13b.js","sources":["../../src/components/message/Message.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n /** Content. */\n children?: ReactNode;\n /** Whether the message has a background or not. */\n hasBackground?: boolean;\n /** Message variant. */\n kind?: Kind;\n /** Message custom icon SVG path. */\n icon?: string;\n /**\n * Displays a close button.\n *\n * NB: only available if `kind === 'info' && hasBackground === true`\n */\n closeButtonProps?: {\n /** The callback called when the button is clicked */\n onClick: () => void;\n /** The label of the close button. */\n label: string;\n };\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {\n const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;\n const { color, icon } = CONFIG[kind as Kind] || {};\n const { onClick, label: closeButtonLabel } = closeButtonProps || {};\n const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n color,\n hasBackground,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n {(customIcon || icon) && (\n <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />\n )}\n <div className={`${CLASSNAME}__text`}>{children}</div>\n {isCloseButtonDisplayed && (\n <IconButton\n className={`${CLASSNAME}__close-button`}\n icon={mdiClose}\n onClick={onClick}\n label={closeButtonLabel}\n emphasis={Emphasis.low}\n />\n )}\n </div>\n );\n});\n\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","closeButtonProps","forwardedProps","onClick","label","closeButtonLabel","isCloseButtonDisplayed","React","createElement","_extends","classNames","handleBasicClasses","prefix","Icon","size","Size","xs","IconButton","mdiClose","emphasis","Emphasis","low","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"0be1006e.js","sources":["../../src/components/message/Message.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n /** Content. */\n children?: ReactNode;\n /** Whether the message has a background or not. */\n hasBackground?: boolean;\n /** Message variant. */\n kind?: Kind;\n /** Message custom icon SVG path. */\n icon?: string;\n /**\n * Displays a close button.\n *\n * NB: only available if `kind === 'info' && hasBackground === true`\n */\n closeButtonProps?: {\n /** The callback called when the button is clicked */\n onClick: () => void;\n /** The label of the close button. */\n label: string;\n };\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {\n const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;\n const { color, icon } = CONFIG[kind as Kind] || {};\n const { onClick, label: closeButtonLabel } = closeButtonProps || {};\n const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n color,\n hasBackground,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n {(customIcon || icon) && (\n <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />\n )}\n <div className={`${CLASSNAME}__text`}>{children}</div>\n {isCloseButtonDisplayed && (\n <IconButton\n className={`${CLASSNAME}__close-button`}\n icon={mdiClose}\n onClick={onClick}\n label={closeButtonLabel}\n emphasis={Emphasis.low}\n />\n )}\n </div>\n );\n});\n\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","closeButtonProps","forwardedProps","onClick","label","closeButtonLabel","isCloseButtonDisplayed","_jsxs","classNames","handleBasicClasses","prefix","_jsx","Icon","size","Size","xs","IconButton","mdiClose","emphasis","Emphasis","low","displayName"],"mappings":";;;;;;;;;AAmCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,MAAM,GAAG;EACX,CAACC,IAAI,CAACC,KAAK,GAAG;IAAEC,KAAK,EAAEC,YAAY,CAACC,GAAG;AAAEC,IAAAA,IAAI,EAAEC,QAAAA;GAAU;EACzD,CAACN,IAAI,CAACO,IAAI,GAAG;IAAEL,KAAK,EAAEC,YAAY,CAACK,IAAI;AAAEH,IAAAA,IAAI,EAAEI,cAAAA;GAAgB;EAC/D,CAACT,IAAI,CAACU,OAAO,GAAG;IAAER,KAAK,EAAEC,YAAY,CAACQ,KAAK;AAAEN,IAAAA,IAAI,EAAEO,cAAAA;GAAgB;EACnE,CAACZ,IAAI,CAACa,OAAO,GAAG;IAAEX,KAAK,EAAEC,YAAY,CAACW,MAAM;AAAET,IAAAA,IAAI,EAAEU,cAAAA;AAAe,GAAA;AACvE,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAA+B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5E,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,aAAa;IAAEC,IAAI;AAAElB,IAAAA,IAAI,EAAEmB,UAAU;IAAEC,gBAAgB;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;EACjH,MAAM;IAAEhB,KAAK;AAAEG,IAAAA,IAAAA;AAAK,GAAC,GAAGN,MAAM,CAACwB,IAAI,CAAS,IAAI,EAAE,CAAA;EAClD,MAAM;IAAEI,OAAO;AAAEC,IAAAA,KAAK,EAAEC,gBAAAA;AAAiB,GAAC,GAAGJ,gBAAgB,IAAI,EAAE,CAAA;EACnE,MAAMK,sBAAsB,GAAGR,aAAa,IAAIC,IAAI,KAAK,MAAM,IAAII,OAAO,IAAIE,gBAAgB,CAAA;AAE9F,EAAA,oBACIE,IAAA,CAAA,KAAA,EAAA;AACIZ,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,SAAS,EAAEW,UAAU,CACjBX,SAAS,EACTY,kBAAkB,CAAC;MACf/B,KAAK;MACLoB,aAAa;AACbY,MAAAA,MAAM,EAAErC,SAAAA;AACZ,KAAC,CACL,CAAE;AAAA,IAAA,GACE6B,cAAc;IAAAN,QAAA,EAAA,CAEjB,CAACI,UAAU,IAAInB,IAAI,kBAChB8B,GAAA,CAACC,IAAI,EAAA;MAACf,SAAS,EAAE,CAAGxB,EAAAA,SAAS,CAAS,MAAA,CAAA;MAACQ,IAAI,EAAEmB,UAAU,IAAInB,IAAK;MAACgC,IAAI,EAAEC,IAAI,CAACC,EAAG;AAACrC,MAAAA,KAAK,EAAEA,KAAAA;KAAQ,CAClG,eACDiC,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGxB,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAAuB,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,EACrDU,sBAAsB,iBACnBK,GAAA,CAACK,UAAU,EAAA;MACPnB,SAAS,EAAE,CAAGxB,EAAAA,SAAS,CAAiB,cAAA,CAAA;AACxCQ,MAAAA,IAAI,EAAEoC,QAAS;AACfd,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,KAAK,EAAEC,gBAAiB;MACxBa,QAAQ,EAAEC,QAAQ,CAACC,GAAAA;AAAI,KAC1B,CACJ,CAAA;AAAA,GACA,CAAC,CAAA;AAEd,CAAC,EAAC;AAEF5B,OAAO,CAAC6B,WAAW,GAAGjD,cAAc,CAAA;AACpCoB,OAAO,CAACK,SAAS,GAAGxB,SAAS;;;;"}
@@ -1,19 +1,12 @@
1
- import { m as getRootClassName, O as Orientation, c as Size, n as forwardRef, b as Theme, l as classNames, j as ColorPalette, _ as _extends } from './d3321a86.js';
2
1
  import React__default from 'react';
2
+ import { m as getRootClassName, O as Orientation, c as Size, n as forwardRef, b as Theme, l as classNames, j as ColorPalette } from './6589b796.js';
3
3
  import isEmpty from 'lodash/isEmpty';
4
4
  import set from 'lodash/set';
5
- import { h as handleBasicClasses } from './4ceaf17c.js';
5
+ import { h as handleBasicClasses } from './e2afb13f.js';
6
6
  import { u as useTheme } from './3181f000.js';
7
- import { Avatar } from './bc4cb4c0.js';
8
- import { Link } from './1921f348.js';
9
-
10
- /**
11
- * User block sizes.
12
- */
13
-
14
- /**
15
- * Defines the props of the component.
16
- */
7
+ import { jsx, jsxs } from 'react/jsx-runtime';
8
+ import { Avatar } from './74a4a214.js';
9
+ import { Link } from './66f691d3.js';
17
10
 
18
11
  /**
19
12
  * Component display name.
@@ -94,18 +87,22 @@ const UserBlock = forwardRef((props, ref) => {
94
87
  if (avatarProps) {
95
88
  set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
96
89
  }
97
- return /*#__PURE__*/React__default.createElement(NameComponent, nProps, name);
90
+ return /*#__PURE__*/jsx(NameComponent, {
91
+ ...nProps,
92
+ children: name
93
+ });
98
94
  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
99
95
  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
100
- const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/React__default.createElement("div", {
101
- className: `${CLASSNAME}__fields`
102
- }, fields.map((field, idx) => /*#__PURE__*/React__default.createElement("span", {
103
- key: idx,
104
- className: `${CLASSNAME}__field`
105
- }, field)));
106
- return /*#__PURE__*/React__default.createElement("div", _extends({
107
- ref: ref
108
- }, forwardedProps, {
96
+ const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
97
+ className: `${CLASSNAME}__fields`,
98
+ children: fields.map((field, idx) => /*#__PURE__*/jsx("span", {
99
+ className: `${CLASSNAME}__field`,
100
+ children: field
101
+ }, idx))
102
+ });
103
+ return /*#__PURE__*/jsxs("div", {
104
+ ref: ref,
105
+ ...forwardedProps,
109
106
  className: classNames(className, handleBasicClasses({
110
107
  prefix: CLASSNAME,
111
108
  orientation,
@@ -114,29 +111,34 @@ const UserBlock = forwardRef((props, ref) => {
114
111
  isClickable
115
112
  })),
116
113
  onMouseLeave: onMouseLeave,
117
- onMouseEnter: onMouseEnter
118
- }), avatarProps && /*#__PURE__*/React__default.createElement(Avatar, _extends({
119
- linkAs: linkAs,
120
- linkProps: linkProps,
121
- alt: ""
122
- }, avatarProps, {
123
- className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
124
- size: componentSize,
125
- onClick: onClick,
126
- theme: theme
127
- })), (fields || name || children || additionalFields) && /*#__PURE__*/React__default.createElement("div", {
128
- className: `${CLASSNAME}__wrapper`
129
- }, children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null), shouldDisplayActions && simpleAction && /*#__PURE__*/React__default.createElement("div", {
130
- className: `${CLASSNAME}__action`
131
- }, simpleAction), shouldDisplayActions && multipleActions && /*#__PURE__*/React__default.createElement("div", {
132
- className: `${CLASSNAME}__actions`
133
- }, multipleActions), after ? /*#__PURE__*/React__default.createElement("div", {
134
- className: `${CLASSNAME}__after`
135
- }, after) : null);
114
+ onMouseEnter: onMouseEnter,
115
+ children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
116
+ linkAs: linkAs,
117
+ linkProps: linkProps,
118
+ alt: "",
119
+ ...avatarProps,
120
+ className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
121
+ size: componentSize,
122
+ onClick: onClick,
123
+ theme: theme
124
+ }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
125
+ className: `${CLASSNAME}__wrapper`,
126
+ children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
127
+ }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
128
+ className: `${CLASSNAME}__action`,
129
+ children: simpleAction
130
+ }), shouldDisplayActions && multipleActions && /*#__PURE__*/jsx("div", {
131
+ className: `${CLASSNAME}__actions`,
132
+ children: multipleActions
133
+ }), after ? /*#__PURE__*/jsx("div", {
134
+ className: `${CLASSNAME}__after`,
135
+ children: after
136
+ }) : null]
137
+ });
136
138
  });
137
139
  UserBlock.displayName = COMPONENT_NAME;
138
140
  UserBlock.className = CLASSNAME;
139
141
  UserBlock.defaultProps = DEFAULT_PROPS;
140
142
 
141
143
  export { UserBlock };
142
- //# sourceMappingURL=dd0a245d.js.map
144
+ //# sourceMappingURL=0d1a078c.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dd0a245d.js","sources":["../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport set from 'lodash/set';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps, HasTheme {\n /** Props to pass to the avatar. */\n avatarProps?: Omit<AvatarProps, 'alt'>;\n /** Additional fields used to describe the user. */\n fields?: string[];\n /** Props to pass to the link wrapping the avatar thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Multiple action toolbar content. */\n multipleActions?: ReactNode;\n /** User name. */\n name?: React.ReactNode;\n /** Props to pass to the name block. */\n nameProps?: GenericProps;\n /** Orientation. */\n orientation?: Orientation;\n /** Simple action toolbar content. */\n simpleAction?: ReactNode;\n /** Size variant. */\n size?: UserBlockSize;\n /** On click callback. */\n onClick?(): void;\n /** On mouse enter callback. */\n onMouseEnter?(): void;\n /** On mouse leave callback. */\n onMouseLeave?(): void;\n /** Display additional fields below the original name and fields */\n additionalFields?: React.ReactNode;\n /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */\n after?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n orientation: Orientation.horizontal,\n size: Size.m,\n};\n\n/**\n * UserBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n avatarProps,\n className,\n fields,\n linkProps,\n linkAs,\n multipleActions,\n name,\n nameProps,\n onClick,\n onMouseEnter,\n onMouseLeave,\n orientation = DEFAULT_PROPS.orientation,\n simpleAction,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n children,\n additionalFields,\n after,\n ...forwardedProps\n } = props;\n let componentSize = size;\n\n // Special case - When using vertical orientation force the size to be Sizes.l.\n if (orientation === Orientation.vertical) {\n componentSize = Size.l;\n }\n\n const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isClickable = !!onClick || isLink;\n\n const nameBlock: ReactNode = React.useMemo(() => {\n if (isEmpty(name)) {\n return null;\n }\n let NameComponent: any = 'span';\n const nProps: any = {\n ...nameProps,\n className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n };\n if (isClickable) {\n NameComponent = Link;\n Object.assign(nProps, {\n ...linkProps,\n onClick,\n linkAs,\n color: ColorPalette.dark,\n });\n }\n // Disable avatar focus since the name block is the same link / same button.\n if (avatarProps) {\n set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);\n }\n return <NameComponent {...nProps}>{name}</NameComponent>;\n }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;\n\n const fieldsBlock: ReactNode = fields && shouldDisplayFields && (\n <div className={`${CLASSNAME}__fields`}>\n {fields.map((field: string, idx: number) => (\n <span key={idx} className={`${CLASSNAME}__field`}>\n {field}\n </span>\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n )}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n >\n {avatarProps && (\n <Avatar\n linkAs={linkAs}\n linkProps={linkProps}\n alt=\"\"\n {...(avatarProps as any)}\n className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n size={componentSize}\n onClick={onClick}\n theme={theme}\n />\n )}\n {(fields || name || children || additionalFields) && (\n <div className={`${CLASSNAME}__wrapper`}>\n {children || nameBlock}\n {fieldsBlock}\n {shouldDisplayFields ? additionalFields : null}\n </div>\n )}\n {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n {shouldDisplayActions && multipleActions && (\n <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n )}\n {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}\n </div>\n );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","UserBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","theme","children","additionalFields","after","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","set","createElement","shouldDisplayFields","s","xs","fieldsBlock","map","field","idx","key","_extends","handleBasicClasses","prefix","Avatar","alt","displayName","defaultProps"],"mappings":";;;;;;;;;AAcA;AACA;AACA;;AAGA;AACA;AACA;;AAkCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,WAAW,CAAA;;AAElC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAsC,GAAG;EAC3CC,WAAW,EAAEC,WAAW,CAACC,UAAU;EACnCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,SAAS,GAAGC,UAAU,CAAiC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,WAAW;IACXC,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,MAAM;IACNC,eAAe;IACfC,IAAI;IACJC,SAAS;IACTC,OAAO;IACPC,YAAY;IACZC,YAAY;IACZxB,WAAW,GAAGD,aAAa,CAACC,WAAW;IACvCyB,YAAY;IACZtB,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBuB,IAAAA,KAAK,GAAGhB,YAAY;IACpBiB,QAAQ;IACRC,gBAAgB;IAChBC,KAAK;IACL,GAAGC,cAAAA;AACP,GAAC,GAAGtB,KAAK,CAAA;EACT,IAAIuB,aAAa,GAAG5B,IAAI,CAAA;;AAExB;AACA,EAAA,IAAIH,WAAW,KAAKC,WAAW,CAAC+B,QAAQ,EAAE;IACtCD,aAAa,GAAG3B,IAAI,CAAC6B,CAAC,CAAA;AAC1B,GAAA;AAEA,EAAA,MAAMC,oBAA6B,GAAGlC,WAAW,KAAKC,WAAW,CAAC+B,QAAQ,CAAA;EAE1E,MAAMG,MAAM,GAAGC,OAAO,CAACnB,SAAS,EAAEoB,IAAI,IAAInB,MAAM,CAAC,CAAA;AACjD,EAAA,MAAMoB,WAAW,GAAG,CAAC,CAAChB,OAAO,IAAIa,MAAM,CAAA;AAEvC,EAAA,MAAMI,SAAoB,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAM;AAC7C,IAAA,IAAIC,OAAO,CAACtB,IAAI,CAAC,EAAE;AACf,MAAA,OAAO,IAAI,CAAA;AACf,KAAA;IACA,IAAIuB,aAAkB,GAAG,MAAM,CAAA;AAC/B,IAAA,MAAMC,MAAW,GAAG;AAChB,MAAA,GAAGvB,SAAS;AACZN,MAAAA,SAAS,EAAE8B,UAAU,CAAC,CAAA,EAAGhD,SAAS,CAAA,MAAA,CAAQ,EAAEoB,SAAS,EAAEF,SAAS,EAAEM,SAAS,EAAEN,SAAS,CAAA;KACzF,CAAA;AACD,IAAA,IAAIuB,WAAW,EAAE;AACbK,MAAAA,aAAa,GAAGG,IAAI,CAAA;AACpBC,MAAAA,MAAM,CAACC,MAAM,CAACJ,MAAM,EAAE;AAClB,QAAA,GAAG3B,SAAS;QACZK,OAAO;QACPJ,MAAM;QACN+B,KAAK,EAAEC,YAAY,CAACC,IAAAA;AACxB,OAAC,CAAC,CAAA;AACN,KAAA;AACA;AACA,IAAA,IAAIrC,WAAW,EAAE;MACbsC,GAAG,CAACtC,WAAW,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AACxD,KAAA;IACA,oBAAO0B,cAAA,CAAAa,aAAA,CAACV,aAAa,EAAKC,MAAM,EAAGxB,IAAoB,CAAC,CAAA;AAC5D,GAAC,EAAE,CAACN,WAAW,EAAEwB,WAAW,EAAEpB,MAAM,EAAED,SAAS,EAAEG,IAAI,EAAEC,SAAS,EAAEC,OAAO,CAAC,CAAC,CAAA;AAE3E,EAAA,MAAMgC,mBAAmB,GAAGvB,aAAa,KAAK3B,IAAI,CAACmD,CAAC,IAAIxB,aAAa,KAAK3B,IAAI,CAACoD,EAAE,CAAA;EAEjF,MAAMC,WAAsB,GAAGzC,MAAM,IAAIsC,mBAAmB,iBACxDd,cAAA,CAAAa,aAAA,CAAA,KAAA,EAAA;IAAKtC,SAAS,EAAE,GAAGlB,SAAS,CAAA,QAAA,CAAA;GACvBmB,EAAAA,MAAM,CAAC0C,GAAG,CAAC,CAACC,KAAa,EAAEC,GAAW,kBACnCpB,cAAA,CAAAa,aAAA,CAAA,MAAA,EAAA;AAAMQ,IAAAA,GAAG,EAAED,GAAI;IAAC7C,SAAS,EAAE,GAAGlB,SAAS,CAAA,OAAA,CAAA;GAClC8D,EAAAA,KACC,CACT,CACA,CACR,CAAA;AAED,EAAA,oBACInB,cAAA,CAAAa,aAAA,CAAA,KAAA,EAAAS,QAAA,CAAA;AACIrD,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLqB,cAAc,EAAA;AAClBf,IAAAA,SAAS,EAAE8B,UAAU,CACjB9B,SAAS,EACTgD,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEnE,SAAS;MAAEG,WAAW;AAAEG,MAAAA,IAAI,EAAE4B,aAAa;MAAEL,KAAK;AAAEY,MAAAA,WAAAA;AAAY,KAAC,CAClG,CAAE;AACFd,IAAAA,YAAY,EAAEA,YAAa;AAC3BD,IAAAA,YAAY,EAAEA,YAAAA;GAEbT,CAAAA,EAAAA,WAAW,iBACR0B,cAAA,CAAAa,aAAA,CAACY,MAAM,EAAAH,QAAA,CAAA;AACH5C,IAAAA,MAAM,EAAEA,MAAO;AACfD,IAAAA,SAAS,EAAEA,SAAU;AACrBiD,IAAAA,GAAG,EAAC,EAAA;AAAE,GAAA,EACDpD,WAAW,EAAA;IAChBC,SAAS,EAAE8B,UAAU,CAAC,CAAGhD,EAAAA,SAAS,UAAU,EAAEiB,WAAW,CAACC,SAAS,CAAE;AACrEZ,IAAAA,IAAI,EAAE4B,aAAc;AACpBT,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,CAChB,CACJ,EACA,CAACV,MAAM,IAAII,IAAI,IAAIO,QAAQ,IAAIC,gBAAgB,kBAC5CY,cAAA,CAAAa,aAAA,CAAA,KAAA,EAAA;IAAKtC,SAAS,EAAE,GAAGlB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EACnC8B,QAAQ,IAAIY,SAAS,EACrBkB,WAAW,EACXH,mBAAmB,GAAG1B,gBAAgB,GAAG,IACzC,CACR,EACAM,oBAAoB,IAAIT,YAAY,iBAAIe,cAAA,CAAAa,aAAA,CAAA,KAAA,EAAA;IAAKtC,SAAS,EAAE,GAAGlB,SAAS,CAAA,QAAA,CAAA;GAAa4B,EAAAA,YAAkB,CAAC,EACpGS,oBAAoB,IAAIf,eAAe,iBACpCqB,cAAA,CAAAa,aAAA,CAAA,KAAA,EAAA;IAAKtC,SAAS,EAAE,GAAGlB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EAAEsB,eAAqB,CAClE,EACAU,KAAK,gBAAGW,cAAA,CAAAa,aAAA,CAAA,KAAA,EAAA;IAAKtC,SAAS,EAAE,GAAGlB,SAAS,CAAA,OAAA,CAAA;AAAU,GAAA,EAAEgC,KAAW,CAAC,GAAG,IAC/D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFvB,SAAS,CAAC6D,WAAW,GAAGvE,cAAc,CAAA;AACtCU,SAAS,CAACS,SAAS,GAAGlB,SAAS,CAAA;AAC/BS,SAAS,CAAC8D,YAAY,GAAGrE,aAAa;;;;"}
1
+ {"version":3,"file":"0d1a078c.js","sources":["../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport set from 'lodash/set';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps, HasTheme {\n /** Props to pass to the avatar. */\n avatarProps?: Omit<AvatarProps, 'alt'>;\n /** Additional fields used to describe the user. */\n fields?: string[];\n /** Props to pass to the link wrapping the avatar thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Multiple action toolbar content. */\n multipleActions?: ReactNode;\n /** User name. */\n name?: React.ReactNode;\n /** Props to pass to the name block. */\n nameProps?: GenericProps;\n /** Orientation. */\n orientation?: Orientation;\n /** Simple action toolbar content. */\n simpleAction?: ReactNode;\n /** Size variant. */\n size?: UserBlockSize;\n /** On click callback. */\n onClick?(): void;\n /** On mouse enter callback. */\n onMouseEnter?(): void;\n /** On mouse leave callback. */\n onMouseLeave?(): void;\n /** Display additional fields below the original name and fields */\n additionalFields?: React.ReactNode;\n /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */\n after?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n orientation: Orientation.horizontal,\n size: Size.m,\n};\n\n/**\n * UserBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n avatarProps,\n className,\n fields,\n linkProps,\n linkAs,\n multipleActions,\n name,\n nameProps,\n onClick,\n onMouseEnter,\n onMouseLeave,\n orientation = DEFAULT_PROPS.orientation,\n simpleAction,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n children,\n additionalFields,\n after,\n ...forwardedProps\n } = props;\n let componentSize = size;\n\n // Special case - When using vertical orientation force the size to be Sizes.l.\n if (orientation === Orientation.vertical) {\n componentSize = Size.l;\n }\n\n const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isClickable = !!onClick || isLink;\n\n const nameBlock: ReactNode = React.useMemo(() => {\n if (isEmpty(name)) {\n return null;\n }\n let NameComponent: any = 'span';\n const nProps: any = {\n ...nameProps,\n className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n };\n if (isClickable) {\n NameComponent = Link;\n Object.assign(nProps, {\n ...linkProps,\n onClick,\n linkAs,\n color: ColorPalette.dark,\n });\n }\n // Disable avatar focus since the name block is the same link / same button.\n if (avatarProps) {\n set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);\n }\n return <NameComponent {...nProps}>{name}</NameComponent>;\n }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;\n\n const fieldsBlock: ReactNode = fields && shouldDisplayFields && (\n <div className={`${CLASSNAME}__fields`}>\n {fields.map((field: string, idx: number) => (\n <span key={idx} className={`${CLASSNAME}__field`}>\n {field}\n </span>\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n )}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n >\n {avatarProps && (\n <Avatar\n linkAs={linkAs}\n linkProps={linkProps}\n alt=\"\"\n {...(avatarProps as any)}\n className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n size={componentSize}\n onClick={onClick}\n theme={theme}\n />\n )}\n {(fields || name || children || additionalFields) && (\n <div className={`${CLASSNAME}__wrapper`}>\n {children || nameBlock}\n {fieldsBlock}\n {shouldDisplayFields ? additionalFields : null}\n </div>\n )}\n {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n {shouldDisplayActions && multipleActions && (\n <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n )}\n {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}\n </div>\n );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","UserBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","theme","children","additionalFields","after","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","set","_jsx","shouldDisplayFields","s","xs","fieldsBlock","map","field","idx","_jsxs","handleBasicClasses","prefix","Avatar","alt","displayName","defaultProps"],"mappings":"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"}
@@ -1,11 +1,8 @@
1
- import { m as getRootClassName, n as forwardRef, _ as _extends, l as classNames } from './d3321a86.js';
2
1
  import { Children, isValidElement } from 'react';
2
+ import { m as getRootClassName, n as forwardRef, l as classNames } from './6589b796.js';
3
3
  import { g as getTypographyClassName } from './d0dd1815.js';
4
- import { f as fontColorClass } from './0361b7fb.js';
5
-
6
- /**
7
- * Defines the props of the component.
8
- */
4
+ import { f as fontColorClass } from './d45e3f16.js';
5
+ import { jsx, jsxs } from 'react/jsx-runtime';
9
6
 
10
7
  /**
11
8
  * Component display name.
@@ -43,28 +40,31 @@ const InlineList = forwardRef((props, ref) => {
43
40
  return (
44
41
  /*#__PURE__*/
45
42
  // eslint-disable-next-line jsx-a11y/no-redundant-roles
46
- React.createElement("ul", _extends({}, forwardedProps, {
43
+ jsx("ul", {
44
+ ...forwardedProps,
47
45
  ref: ref,
48
46
  className: classNames(className, CLASSNAME, wrap && `${CLASSNAME}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
49
47
  // Lists with removed bullet style can lose their a11y list role on some browsers
50
48
  ,
51
- role: "list"
52
- }), Children.toArray(children).map((child, index) => {
53
- const key = /*#__PURE__*/isValidElement(child) && child.key || index;
54
- return (
55
- /*#__PURE__*/
56
- // We need to item is set as display: contents which removes the semantic.
57
- // eslint-disable-next-line jsx-a11y/no-redundant-roles
58
- React.createElement("li", {
59
- key: key,
60
- role: "listitem",
61
- className: `${CLASSNAME}__item`
62
- }, index !== 0 && /*#__PURE__*/React.createElement("span", {
63
- className: `${CLASSNAME}__item-separator`,
64
- "aria-hidden": "true"
65
- }, '\u00A0•\u00A0'), child)
66
- );
67
- }))
49
+ role: "list",
50
+ children: Children.toArray(children).map((child, index) => {
51
+ const key = /*#__PURE__*/isValidElement(child) && child.key || index;
52
+ return (
53
+ /*#__PURE__*/
54
+ // We need to item is set as display: contents which removes the semantic.
55
+ // eslint-disable-next-line jsx-a11y/no-redundant-roles
56
+ jsxs("li", {
57
+ role: "listitem",
58
+ className: `${CLASSNAME}__item`,
59
+ children: [index !== 0 && /*#__PURE__*/jsx("span", {
60
+ className: `${CLASSNAME}__item-separator`,
61
+ "aria-hidden": "true",
62
+ children: '\u00A0•\u00A0'
63
+ }), child]
64
+ }, key)
65
+ );
66
+ })
67
+ })
68
68
  );
69
69
  });
70
70
  InlineList.displayName = COMPONENT_NAME;
@@ -72,4 +72,4 @@ InlineList.className = CLASSNAME;
72
72
  InlineList.defaultProps = DEFAULT_PROPS;
73
73
 
74
74
  export { InlineList };
75
- //# sourceMappingURL=1eab656b.js.map
75
+ //# sourceMappingURL=15eab19b.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"1eab656b.js","sources":["../../src/components/inline-list/InlineList.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface InlineListProps extends GenericProps {\n /**\n * Text color.\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 * Activate line wrap on overflow.\n */\n wrap?: boolean;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InlineList';\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 * InlineList component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InlineList = forwardRef<InlineListProps>((props, ref) => {\n const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;\n const typographyClassName = typography && getTypographyClassName(typography);\n return (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n {...forwardedProps}\n ref={ref as any}\n className={classNames(\n className,\n CLASSNAME,\n wrap && `${CLASSNAME}--wrap`,\n fontColorClass(color, colorVariant),\n typographyClassName,\n )}\n // Lists with removed bullet style can lose their a11y list role on some browsers\n role=\"list\"\n >\n {Children.toArray(children).map((child, index) => {\n const key = (isValidElement(child) && child.key) || index;\n return (\n // We need to item is set as display: contents which removes the semantic.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li key={key} role=\"listitem\" className={`${CLASSNAME}__item`}>\n {index !== 0 && (\n <span className={`${CLASSNAME}__item-separator`} aria-hidden=\"true\">\n {'\\u00A0•\\u00A0'}\n </span>\n )}\n {child}\n </li>\n );\n })}\n </ul>\n );\n});\nInlineList.displayName = COMPONENT_NAME;\nInlineList.className = CLASSNAME;\nInlineList.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InlineList","forwardRef","props","ref","className","color","colorVariant","typography","children","wrap","forwardedProps","typographyClassName","getTypographyClassName","React","createElement","_extends","classNames","fontColorClass","role","Children","toArray","map","child","index","key","isValidElement","displayName","defaultProps"],"mappings":";;;;;AASA;AACA;AACA;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClE,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,YAAY;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,IAAI;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAC/F,EAAA,MAAMS,mBAAmB,GAAGJ,UAAU,IAAIK,sBAAsB,CAACL,UAAU,CAAC,CAAA;AAC5E,EAAA;AAAA;AACI;AACAM,IAAAA,KAAA,CAAAC,aAAA,CAAAC,IAAAA,EAAAA,QAAA,KACQL,cAAc,EAAA;AAClBP,MAAAA,GAAG,EAAEA,GAAW;MAChBC,SAAS,EAAEY,UAAU,CACjBZ,SAAS,EACTP,SAAS,EACTY,IAAI,IAAI,CAAA,EAAGZ,SAAS,CAAQ,MAAA,CAAA,EAC5BoB,cAAc,CAACZ,KAAK,EAAEC,YAAY,CAAC,EACnCK,mBACJ,CAAA;AACA;AAAA;AACAO,MAAAA,IAAI,EAAC,MAAA;AAAM,KAAA,CAAA,EAEVC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,CAAC,CAACa,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;AAC9C,MAAA,MAAMC,GAAG,gBAAIC,cAAc,CAACH,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,IAAKD,KAAK,CAAA;AACzD,MAAA;AAAA;AACI;AACA;AACAV,QAAAA,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAIU,UAAAA,GAAG,EAAEA,GAAI;AAACN,UAAAA,IAAI,EAAC,UAAU;UAACd,SAAS,EAAE,GAAGP,SAAS,CAAA,MAAA,CAAA;AAAS,SAAA,EACzD0B,KAAK,KAAK,CAAC,iBACRV,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;UAAMV,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAmB,gBAAA,CAAA;UAAC,aAAY,EAAA,MAAA;SACxD,EAAA,eACC,CACT,EACAyB,KACD,CAAA;AAAC,QAAA;AAEb,KAAC,CACD,CAAA;AAAC,IAAA;AAEb,CAAC,EAAC;AACFtB,UAAU,CAAC0B,WAAW,GAAG9B,cAAc,CAAA;AACvCI,UAAU,CAACI,SAAS,GAAGP,SAAS,CAAA;AAChCG,UAAU,CAAC2B,YAAY,GAAG5B,aAAa;;;;"}
1
+ {"version":3,"file":"15eab19b.js","sources":["../../src/components/inline-list/InlineList.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface InlineListProps extends GenericProps {\n /**\n * Text color.\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 * Activate line wrap on overflow.\n */\n wrap?: boolean;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InlineList';\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 * InlineList component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InlineList = forwardRef<InlineListProps>((props, ref) => {\n const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;\n const typographyClassName = typography && getTypographyClassName(typography);\n return (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n {...forwardedProps}\n ref={ref as any}\n className={classNames(\n className,\n CLASSNAME,\n wrap && `${CLASSNAME}--wrap`,\n fontColorClass(color, colorVariant),\n typographyClassName,\n )}\n // Lists with removed bullet style can lose their a11y list role on some browsers\n role=\"list\"\n >\n {Children.toArray(children).map((child, index) => {\n const key = (isValidElement(child) && child.key) || index;\n return (\n // We need to item is set as display: contents which removes the semantic.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li key={key} role=\"listitem\" className={`${CLASSNAME}__item`}>\n {index !== 0 && (\n <span className={`${CLASSNAME}__item-separator`} aria-hidden=\"true\">\n {'\\u00A0•\\u00A0'}\n </span>\n )}\n {child}\n </li>\n );\n })}\n </ul>\n );\n});\nInlineList.displayName = COMPONENT_NAME;\nInlineList.className = CLASSNAME;\nInlineList.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InlineList","forwardRef","props","ref","className","color","colorVariant","typography","children","wrap","forwardedProps","typographyClassName","getTypographyClassName","_jsx","classNames","fontColorClass","role","Children","toArray","map","child","index","key","isValidElement","_jsxs","displayName","defaultProps"],"mappings":";;;;;;AAmCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClE,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,YAAY;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,IAAI;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAC/F,EAAA,MAAMS,mBAAmB,GAAGJ,UAAU,IAAIK,sBAAsB,CAACL,UAAU,CAAC,CAAA;AAC5E,EAAA;AAAA;AACI;IACAM,GAAA,CAAA,IAAA,EAAA;AAAA,MAAA,GACQH,cAAc;AAClBP,MAAAA,GAAG,EAAEA,GAAW;MAChBC,SAAS,EAAEU,UAAU,CACjBV,SAAS,EACTP,SAAS,EACTY,IAAI,IAAI,CAAA,EAAGZ,SAAS,CAAQ,MAAA,CAAA,EAC5BkB,cAAc,CAACV,KAAK,EAAEC,YAAY,CAAC,EACnCK,mBACJ,CAAA;AACA;AAAA;AACAK,MAAAA,IAAI,EAAC,MAAM;AAAAR,MAAAA,QAAA,EAEVS,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC,CAACW,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;AAC9C,QAAA,MAAMC,GAAG,gBAAIC,cAAc,CAACH,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,IAAKD,KAAK,CAAA;AACzD,QAAA;AAAA;AACI;AACA;UACAG,IAAA,CAAA,IAAA,EAAA;AAAcR,YAAAA,IAAI,EAAC,UAAU;YAACZ,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAAW,YAAAA,QAAA,EACzDa,CAAAA,KAAK,KAAK,CAAC,iBACRR,GAAA,CAAA,MAAA,EAAA;cAAMT,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAmB,gBAAA,CAAA;AAAC,cAAA,aAAA,EAAY,MAAM;AAAAW,cAAAA,QAAA,EAC9D,eAAA;aACC,CACT,EACAY,KAAK,CAAA;AAAA,WAAA,EANDE,GAOL,CAAA;AAAC,UAAA;OAEZ,CAAA;KACD,CAAA;AAAC,IAAA;AAEb,CAAC,EAAC;AACFtB,UAAU,CAACyB,WAAW,GAAG7B,cAAc,CAAA;AACvCI,UAAU,CAACI,SAAS,GAAGP,SAAS,CAAA;AAChCG,UAAU,CAAC0B,YAAY,GAAG3B,aAAa;;;;"}