@hitachivantara/uikit-react-core 5.36.4 → 5.36.6

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 (90) hide show
  1. package/dist/cjs/components/AppSwitcher/Action/Action.cjs +4 -2
  2. package/dist/cjs/components/AppSwitcher/Action/Action.cjs.map +1 -1
  3. package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs +6 -8
  4. package/dist/cjs/components/AppSwitcher/Action/Action.styles.cjs.map +1 -1
  5. package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs +4 -2
  6. package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs.map +1 -1
  7. package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs +4 -3
  8. package/dist/cjs/components/AppSwitcher/AppSwitcher.styles.cjs.map +1 -1
  9. package/dist/cjs/components/BreadCrumb/Page/Page.cjs +1 -1
  10. package/dist/cjs/components/Button/Button.cjs +0 -3
  11. package/dist/cjs/components/Button/Button.cjs.map +1 -1
  12. package/dist/cjs/components/Calendar/utils.cjs.map +1 -1
  13. package/dist/cjs/components/Dialog/Dialog.cjs +2 -5
  14. package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
  15. package/dist/cjs/components/Dropdown/Dropdown.cjs +0 -3
  16. package/dist/cjs/components/Dropdown/Dropdown.cjs.map +1 -1
  17. package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs +9 -2
  18. package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs.map +1 -1
  19. package/dist/cjs/components/OverflowTooltip/OverflowTooltip.styles.cjs +2 -2
  20. package/dist/cjs/components/OverflowTooltip/OverflowTooltip.styles.cjs.map +1 -1
  21. package/dist/cjs/components/Table/TableCell/TableCell.cjs +5 -8
  22. package/dist/cjs/components/Table/TableCell/TableCell.cjs.map +1 -1
  23. package/dist/cjs/components/Table/TableRow/TableRow.cjs +3 -20
  24. package/dist/cjs/components/Table/TableRow/TableRow.cjs.map +1 -1
  25. package/dist/cjs/components/Tooltip/Tooltip.cjs +2 -1
  26. package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
  27. package/dist/cjs/components/TreeView/internals/DescendantProvider.cjs +0 -3
  28. package/dist/cjs/components/TreeView/internals/DescendantProvider.cjs.map +1 -1
  29. package/dist/cjs/components/TreeView/internals/TreeViewProvider.cjs +0 -3
  30. package/dist/cjs/components/TreeView/internals/TreeViewProvider.cjs.map +1 -1
  31. package/dist/cjs/components/Typography/utils.cjs +3 -13
  32. package/dist/cjs/components/Typography/utils.cjs.map +1 -1
  33. package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs +0 -3
  34. package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs.map +1 -1
  35. package/dist/cjs/hooks/useControlled.cjs +0 -3
  36. package/dist/cjs/hooks/useControlled.cjs.map +1 -1
  37. package/dist/cjs/providers/Provider.cjs +3 -2
  38. package/dist/cjs/providers/Provider.cjs.map +1 -1
  39. package/dist/cjs/utils/document.cjs +11 -0
  40. package/dist/cjs/utils/document.cjs.map +1 -0
  41. package/dist/cjs/utils/theme.cjs +5 -7
  42. package/dist/cjs/utils/theme.cjs.map +1 -1
  43. package/dist/esm/components/AppSwitcher/Action/Action.js +4 -2
  44. package/dist/esm/components/AppSwitcher/Action/Action.js.map +1 -1
  45. package/dist/esm/components/AppSwitcher/Action/Action.styles.js +6 -8
  46. package/dist/esm/components/AppSwitcher/Action/Action.styles.js.map +1 -1
  47. package/dist/esm/components/AppSwitcher/AppSwitcher.js +4 -2
  48. package/dist/esm/components/AppSwitcher/AppSwitcher.js.map +1 -1
  49. package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js +4 -3
  50. package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js.map +1 -1
  51. package/dist/esm/components/BreadCrumb/Page/Page.js +1 -1
  52. package/dist/esm/components/Button/Button.js +0 -3
  53. package/dist/esm/components/Button/Button.js.map +1 -1
  54. package/dist/esm/components/Calendar/utils.js.map +1 -1
  55. package/dist/esm/components/Dialog/Dialog.js +2 -5
  56. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  57. package/dist/esm/components/Dropdown/Dropdown.js +0 -3
  58. package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
  59. package/dist/esm/components/OverflowTooltip/OverflowTooltip.js +9 -2
  60. package/dist/esm/components/OverflowTooltip/OverflowTooltip.js.map +1 -1
  61. package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js +2 -2
  62. package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js.map +1 -1
  63. package/dist/esm/components/Table/TableCell/TableCell.js +6 -9
  64. package/dist/esm/components/Table/TableCell/TableCell.js.map +1 -1
  65. package/dist/esm/components/Table/TableRow/TableRow.js +4 -21
  66. package/dist/esm/components/Table/TableRow/TableRow.js.map +1 -1
  67. package/dist/esm/components/Tooltip/Tooltip.js +2 -1
  68. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  69. package/dist/esm/components/TreeView/internals/DescendantProvider.js +0 -3
  70. package/dist/esm/components/TreeView/internals/DescendantProvider.js.map +1 -1
  71. package/dist/esm/components/TreeView/internals/TreeViewProvider.js +0 -3
  72. package/dist/esm/components/TreeView/internals/TreeViewProvider.js.map +1 -1
  73. package/dist/esm/components/Typography/utils.js +3 -13
  74. package/dist/esm/components/Typography/utils.js.map +1 -1
  75. package/dist/esm/components/VerticalNavigation/TreeView/descendants.js +0 -3
  76. package/dist/esm/components/VerticalNavigation/TreeView/descendants.js.map +1 -1
  77. package/dist/esm/hooks/useControlled.js +0 -3
  78. package/dist/esm/hooks/useControlled.js.map +1 -1
  79. package/dist/esm/providers/Provider.js +4 -3
  80. package/dist/esm/providers/Provider.js.map +1 -1
  81. package/dist/esm/utils/document.js +11 -0
  82. package/dist/esm/utils/document.js.map +1 -0
  83. package/dist/esm/utils/theme.js +5 -7
  84. package/dist/esm/utils/theme.js.map +1 -1
  85. package/dist/types/index.d.ts +7 -3
  86. package/package.json +5 -5
  87. package/dist/cjs/components/AppSwitcher/TitleWithTooltip.cjs +0 -22
  88. package/dist/cjs/components/AppSwitcher/TitleWithTooltip.cjs.map +0 -1
  89. package/dist/esm/components/AppSwitcher/TitleWithTooltip.js +0 -22
  90. package/dist/esm/components/AppSwitcher/TitleWithTooltip.js.map +0 -1
@@ -5,8 +5,8 @@ const React = require("react");
5
5
  const uikitStyles = require("@hitachivantara/uikit-styles");
6
6
  const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
7
7
  const useUniqueId = require("../../../hooks/useUniqueId.cjs");
8
- const TitleWithTooltip = require("../TitleWithTooltip.cjs");
9
8
  const Action_styles = require("./Action.styles.cjs");
9
+ const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
10
10
  const Avatar = require("../../Avatar/Avatar.cjs");
11
11
  const Typography = require("../../Typography/Typography.cjs");
12
12
  const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
@@ -83,7 +83,9 @@ const HvAppSwitcherAction = ({
83
83
  [classes.selected]: isSelected
84
84
  }, className), children: renderApplication(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
85
85
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
86
- /* @__PURE__ */ jsxRuntime.jsx(TitleWithTooltip.default, { title: name, className: classes.title }),
86
+ /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { paragraphOverflow: true, className: classes.title, placement: "top-start", data: name, classes: {
87
+ tooltipAnchorParagraph: classes.titleAnchor
88
+ } }),
87
89
  description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { disableFocusListener: true, disableTouchListener: true, title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { children: description }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { className: classes.iconInfo, role: "img", "aria-label": description, id: descriptionElementId }) }) })
88
90
  ] })) });
89
91
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. */\n id?: string;\n /** Name of the application, this is the value that will be displayed on the component. */\n name: string;\n /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n iconUrl?: string;\n /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n iconElement?: React.ReactElement;\n /** Small description of the application. */\n description?: string;\n /** URL where the application is accessible. */\n url?: string;\n /** Defines if the application should be opened in the same tab or in a new one. */\n target?: \"_top\" | \"_blank\";\n /** If true, the item will be disabled. */\n disabled?: boolean;\n /** True when the application is selected, false otherwise. */\n isSelected?: boolean;\n /** The color of the application. */\n color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /** The application data to be used to render the Action object. */\n application: HvAppSwitcherActionApplication;\n /** Callback triggered when the action is clicked. */\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /** Must return a boolean stating if the action element is selected or not. */\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = disabled\n ? theme.colors.secondary_60\n : getColor(application?.color, theme.colors.secondary);\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /**\n * Handles the onClick event and triggers the appropriate callback if it exists.\n */\n const handleOnClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n },\n [application, disabled, isSelected, onClickCallback]\n );\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n const renderApplication = useCallback(\n (children: React.ReactNode) => {\n const typographyProps = {\n className: classes.typography,\n onClick: handleOnClick,\n style: { borderColor: color },\n \"aria-label\": name,\n ...(description && { \"aria-describedby\": descriptionElementId }),\n };\n\n if (isLink) {\n return (\n <HvTypography\n component=\"a\"\n href={url}\n target={target || \"_top\"}\n {...typographyProps}\n >\n {children}\n </HvTypography>\n );\n }\n\n return (\n <HvTypography component=\"button\" {...typographyProps}>\n {children}\n </HvTypography>\n );\n },\n [\n classes.typography,\n color,\n description,\n descriptionElementId,\n handleOnClick,\n isLink,\n name,\n target,\n url,\n ]\n );\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className\n )}\n >\n {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n In substitution is used the aria-label with the \"title\" value */}\n {renderApplication(\n <>\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <TitleWithTooltip title={name} className={classes.title} />\n\n {description && (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={<HvTypography>{description}</HvTypography>}\n >\n <div>\n <Info\n className={classes.iconInfo}\n role=\"img\"\n aria-label={description}\n id={descriptionElementId}\n />\n </div>\n </HvTooltip>\n )}\n </>\n )}\n </HvListItem>\n );\n};\n"],"names":["HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","color","theme","colors","secondary_60","getColor","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","jsx","brokenTitle","split","initials","substring","HvAvatar","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","children","typographyProps","typography","onClick","style","borderColor","HvTypography","HvListItem","root","selected","jsxs","Fragment","icon","TitleWithTooltip","title","HvTooltip","Info","iconInfo"],"mappings":"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"}
1
+ {"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. */\n id?: string;\n /** Name of the application, this is the value that will be displayed on the component. */\n name: string;\n /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n iconUrl?: string;\n /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n iconElement?: React.ReactElement;\n /** Small description of the application. */\n description?: string;\n /** URL where the application is accessible. */\n url?: string;\n /** Defines if the application should be opened in the same tab or in a new one. */\n target?: \"_top\" | \"_blank\";\n /** If true, the item will be disabled. */\n disabled?: boolean;\n /** True when the application is selected, false otherwise. */\n isSelected?: boolean;\n /** The color of the application. */\n color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /** The application data to be used to render the Action object. */\n application: HvAppSwitcherActionApplication;\n /** Callback triggered when the action is clicked. */\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /** Must return a boolean stating if the action element is selected or not. */\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = disabled\n ? theme.colors.secondary_60\n : getColor(application?.color, theme.colors.secondary);\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /**\n * Handles the onClick event and triggers the appropriate callback if it exists.\n */\n const handleOnClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n },\n [application, disabled, isSelected, onClickCallback]\n );\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n const renderApplication = useCallback(\n (children: React.ReactNode) => {\n const typographyProps = {\n className: classes.typography,\n onClick: handleOnClick,\n style: { borderColor: color },\n \"aria-label\": name,\n ...(description && { \"aria-describedby\": descriptionElementId }),\n };\n\n if (isLink) {\n return (\n <HvTypography\n component=\"a\"\n href={url}\n target={target || \"_top\"}\n {...typographyProps}\n >\n {children}\n </HvTypography>\n );\n }\n\n return (\n <HvTypography component=\"button\" {...typographyProps}>\n {children}\n </HvTypography>\n );\n },\n [\n classes.typography,\n color,\n description,\n descriptionElementId,\n handleOnClick,\n isLink,\n name,\n target,\n url,\n ]\n );\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className\n )}\n >\n {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n In substitution is used the aria-label with the \"title\" value */}\n {renderApplication(\n <>\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <HvOverflowTooltip\n paragraphOverflow\n className={classes.title}\n placement=\"top-start\"\n data={name}\n classes={{\n tooltipAnchorParagraph: classes.titleAnchor,\n }}\n />\n\n {description && (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={<HvTypography>{description}</HvTypography>}\n >\n <div>\n <Info\n className={classes.iconInfo}\n role=\"img\"\n aria-label={description}\n id={descriptionElementId}\n />\n </div>\n </HvTooltip>\n )}\n </>\n )}\n </HvListItem>\n );\n};\n"],"names":["HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","color","theme","colors","secondary_60","getColor","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","jsx","brokenTitle","split","initials","substring","HvAvatar","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","children","typographyProps","typography","onClick","style","borderColor","HvTypography","HvListItem","root","selected","jsxs","Fragment","icon","HvOverflowTooltip","title","tooltipAnchorParagraph","titleAnchor","HvTooltip","Info","iconInfo"],"mappings":"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"}
@@ -44,16 +44,14 @@ const {
44
44
  },
45
45
  title: {
46
46
  flexGrow: 1,
47
- margin: `0 ${uikitStyles.theme.space.xs}`,
48
- textAlign: "left",
49
- overflow: "hidden",
50
47
  whiteSpace: "normal",
51
- textOverflow: "ellipsis",
52
- display: "-webkit-box",
53
- "-webkit-line-clamp": "2",
54
- "-webkit-box-orient": "vertical",
48
+ textAlign: "left",
49
+ margin: `0 ${uikitStyles.theme.space.xs}`,
55
50
  textWrap: "balance",
56
- color: "inherit"
51
+ ...uikitStyles.theme.typography.label
52
+ },
53
+ titleAnchor: {
54
+ WebkitLineClamp: 2
57
55
  }
58
56
  });
59
57
  exports.staticClasses = staticClasses;
@@ -1 +1 @@
1
- {"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvAppSwitcher-Action\",\n {\n root: {\n width: \"100%\",\n maxWidth: 280,\n minHeight: 52,\n marginRight: theme.space.sm,\n },\n icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n iconUrl: { width: 32 },\n iconInfo: { minWidth: 32 },\n disabled: {},\n selected: {},\n typography: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n width: \"100%\",\n minHeight: 52,\n\n padding: `6px ${theme.space.xs}`,\n\n border: \"none\",\n borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n cursor: \"pointer\",\n\n textDecoration: \"inherit\",\n color: \"inherit\",\n backgroundColor: \"inherit\",\n\n \"$disabled &\": {\n cursor: \"not-allowed\",\n },\n },\n title: {\n flexGrow: 1,\n margin: `0 ${theme.space.xs}`,\n\n textAlign: \"left\",\n\n overflow: \"hidden\",\n whiteSpace: \"normal\",\n textOverflow: \"ellipsis\",\n display: \"-webkit-box\",\n \"-webkit-line-clamp\": \"2\",\n \"-webkit-box-orient\": \"vertical\",\n textWrap: \"balance\",\n\n color: \"inherit\",\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","margin","textAlign","overflow","whiteSpace","textOverflow","textWrap"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE/BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,YAAMiB,MAAAA,OAAOC,SAAU;AAAA,IAEhDC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,QAAS,KAAIzB,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE5BY,WAAW;AAAA,IAEXC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,cAAc;AAAA,IACdzB,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,IACtB0B,UAAU;AAAA,IAEVT,OAAO;AAAA,EACT;AACF,CACF;;;"}
1
+ {"version":3,"file":"Action.styles.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvAppSwitcher-Action\",\n {\n root: {\n width: \"100%\",\n maxWidth: 280,\n minHeight: 52,\n marginRight: theme.space.sm,\n },\n icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n iconUrl: { width: 32 },\n iconInfo: { minWidth: 32 },\n disabled: {},\n selected: {},\n typography: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n width: \"100%\",\n minHeight: 52,\n\n padding: `6px ${theme.space.xs}`,\n\n border: \"none\",\n borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n cursor: \"pointer\",\n\n textDecoration: \"inherit\",\n color: \"inherit\",\n backgroundColor: \"inherit\",\n\n \"$disabled &\": {\n cursor: \"not-allowed\",\n },\n },\n title: {\n flexGrow: 1,\n whiteSpace: \"normal\",\n textAlign: \"left\",\n margin: `0 ${theme.space.xs}`,\n textWrap: \"balance\",\n ...theme.typography.label,\n },\n titleAnchor: {\n WebkitLineClamp: 2,\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","whiteSpace","textAlign","margin","textWrap","label","titleAnchor","WebkitLineClamp"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAE/BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,YAAMiB,MAAAA,OAAOC,SAAU;AAAA,IAEhDC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAS,KAAI3B,YAAMC,MAAAA,MAAMa,EAAG;AAAA,IAC5Bc,UAAU;AAAA,IACV,GAAG5B,YAAAA,MAAMW,WAAWkB;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AACF,CACF;;;"}
@@ -4,9 +4,9 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
6
6
  const AppSwitcher_styles = require("./AppSwitcher.styles.cjs");
7
- const TitleWithTooltip = require("./TitleWithTooltip.cjs");
8
7
  const Action = require("./Action/Action.cjs");
9
8
  const Typography = require("../Typography/Typography.cjs");
9
+ const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
10
10
  const ListContainer = require("../ListContainer/ListContainer.cjs");
11
11
  const HvAppSwitcher = (props) => {
12
12
  const {
@@ -45,7 +45,9 @@ const HvAppSwitcher = (props) => {
45
45
  [classes.open]: !!isOpen,
46
46
  [classes.closed]: isOpen === false
47
47
  }, className), children: [
48
- header && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsxRuntime.jsx(TitleWithTooltip.default, { className: classes.title, title }),
48
+ header && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { className: classes.title, data: title, placement: "top-start", classes: {
49
+ tooltipAnchorParagraph: classes.titleAnchor
50
+ } }),
49
51
  /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { disableGutters: true, className: classes.actionsContainer, children: panelActions }),
50
52
  footer && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.footerContainer, children: footer })
51
53
  ] });
@@ -1 +1 @@
1
- {"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n /** Number of columns to render. One, two, or whatever fits the component's width. */\n layout?: \"single\" | \"dual\" | \"fluid\";\n /** Title to be displayed on the header of the component. */\n title?: string;\n /** The list of applications to be used to render the actions on the component. */\n applications?: HvAppSwitcherActionApplication[];\n /** Triggered when an action is clicked. */\n onActionClickedCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /** Must return a boolean stating if the action element is selected or not. */\n isActionSelectedCallback?: (\n application: HvAppSwitcherActionApplication\n ) => boolean;\n /** Element to be added to the header container, if none is provided a label with the title will be added. */\n header?: React.ReactNode;\n /** Element to be added to the footer container. */\n footer?: React.ReactNode;\n /**\n * Flag stating if the panel is opened or closed.\n *\n * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n */\n isOpen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n const {\n id,\n className,\n classes: classesProp,\n layout = \"single\",\n title,\n applications,\n onActionClickedCallback = () => {},\n isActionSelectedCallback = () => false,\n header,\n footer,\n isOpen,\n } = useDefaultProps(\"HvAppSwitcher\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const panelActions = useMemo(\n () =>\n applications &&\n applications?.map((application) => {\n if (application.name) {\n return (\n <HvAppSwitcherAction\n key={application.id || `${application.name}_${application.url}`}\n application={application}\n onClickCallback={onActionClickedCallback}\n isSelectedCallback={isActionSelectedCallback}\n classes={{\n root: classes.item,\n selected: classes.itemSelected,\n disabled: classes.itemDisabled,\n typography: classes.itemTrigger,\n icon: classes.itemIcon,\n title: classes.itemTitle,\n iconInfo: classes.itemInfoIcon,\n }}\n />\n );\n }\n\n return undefined;\n }),\n [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n classes[layout],\n { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n className\n )}\n >\n {(header && (\n <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n {header}\n </HvTypography>\n )) ||\n (title && <TitleWithTooltip className={classes.title} title={title} />)}\n <HvListContainer disableGutters className={classes.actionsContainer}>\n {panelActions}\n </HvListContainer>\n {footer && (\n <HvTypography\n component=\"div\"\n variant=\"label\"\n className={classes.footerContainer}\n >\n {footer}\n </HvTypography>\n )}\n </div>\n );\n};\n"],"names":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","jsxs","open","closed","HvTypography","jsx","TitleWithTooltip","HvListContainer","actionsContainer","footerContainer"],"mappings":";;;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,MAAAA,QACnB,MACEV,gBACAA,cAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,4CACGC,OAEC,qBAAA,EAAA,aACA,iBAAiBb,yBACjB,oBAAoBC,0BACpB,SAAS;AAAA,QACPa,MAAMnB,QAAQoB;AAAAA,QACdC,UAAUrB,QAAQsB;AAAAA,QAClBC,UAAUvB,QAAQwB;AAAAA,QAClBC,YAAYzB,QAAQ0B;AAAAA,QACpBC,MAAM3B,QAAQ4B;AAAAA,QACdzB,OAAOH,QAAQ6B;AAAAA,QACfC,UAAU9B,QAAQ+B;AAAAA,MACpB,EAAA,GAZKf,YAAYlB,MAAO,GAAEkB,YAAYC,IAAK,IAAGD,YAAYgB,GAAI,EAa9D;AAAA,IAEN;AAEOC,WAAAA;AAAAA,EAAAA,CACR,GACH,CAAC7B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAGE,SAAA6B,gCAAC,SACC,IACA,WAAWvB,GACTX,QAAQmB,MACRnB,QAAQE,MAAM,GACd;AAAA,IAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,IAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,EAAA,GACzDV,SACF,GAEEQ,UAAAA;AAAAA,IAAAA,yCACC8B,WAAa,cAAA,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAWrC,QAAQG,OAC9DI,UAAAA,OACH,CAAA,KAECJ,SAASmC,+BAACC,iBAAAA,WAAiB,WAAWvC,QAAQG,OAAO,OAAiB;AAAA,mCACxEqC,cAAAA,iBAAgB,EAAA,gBAAc,MAAC,WAAWxC,QAAQyC,kBAChD5B,UACH,cAAA;AAAA,IACCL,UACE8B,2BAAAA,IAAAD,WAAAA,cAAA,EACC,WAAU,OACV,SAAQ,SACR,WAAWrC,QAAQ0C,iBAElBlC,UACH,OAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
1
+ {"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n /** Number of columns to render. One, two, or whatever fits the component's width. */\n layout?: \"single\" | \"dual\" | \"fluid\";\n /** Title to be displayed on the header of the component. */\n title?: string;\n /** The list of applications to be used to render the actions on the component. */\n applications?: HvAppSwitcherActionApplication[];\n /** Triggered when an action is clicked. */\n onActionClickedCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /** Must return a boolean stating if the action element is selected or not. */\n isActionSelectedCallback?: (\n application: HvAppSwitcherActionApplication\n ) => boolean;\n /** Element to be added to the header container, if none is provided a label with the title will be added. */\n header?: React.ReactNode;\n /** Element to be added to the footer container. */\n footer?: React.ReactNode;\n /**\n * Flag stating if the panel is opened or closed.\n *\n * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n */\n isOpen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n const {\n id,\n className,\n classes: classesProp,\n layout = \"single\",\n title,\n applications,\n onActionClickedCallback = () => {},\n isActionSelectedCallback = () => false,\n header,\n footer,\n isOpen,\n } = useDefaultProps(\"HvAppSwitcher\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const panelActions = useMemo(\n () =>\n applications &&\n applications?.map((application) => {\n if (application.name) {\n return (\n <HvAppSwitcherAction\n key={application.id || `${application.name}_${application.url}`}\n application={application}\n onClickCallback={onActionClickedCallback}\n isSelectedCallback={isActionSelectedCallback}\n classes={{\n root: classes.item,\n selected: classes.itemSelected,\n disabled: classes.itemDisabled,\n typography: classes.itemTrigger,\n icon: classes.itemIcon,\n title: classes.itemTitle,\n iconInfo: classes.itemInfoIcon,\n }}\n />\n );\n }\n\n return undefined;\n }),\n [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n classes[layout],\n { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n className\n )}\n >\n {(header && (\n <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n {header}\n </HvTypography>\n )) ||\n (title && (\n <HvOverflowTooltip\n className={classes.title}\n data={title}\n placement=\"top-start\"\n classes={{\n tooltipAnchorParagraph: classes.titleAnchor,\n }}\n />\n ))}\n <HvListContainer disableGutters className={classes.actionsContainer}>\n {panelActions}\n </HvListContainer>\n {footer && (\n <HvTypography\n component=\"div\"\n variant=\"label\"\n className={classes.footerContainer}\n >\n {footer}\n </HvTypography>\n )}\n </div>\n );\n};\n"],"names":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","jsxs","open","closed","jsx","HvTypography","HvOverflowTooltip","tooltipAnchorParagraph","titleAnchor","HvListContainer","actionsContainer","footerContainer"],"mappings":";;;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,MAAAA,QACnB,MACEV,gBACAA,cAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,4CACGC,OAEC,qBAAA,EAAA,aACA,iBAAiBb,yBACjB,oBAAoBC,0BACpB,SAAS;AAAA,QACPa,MAAMnB,QAAQoB;AAAAA,QACdC,UAAUrB,QAAQsB;AAAAA,QAClBC,UAAUvB,QAAQwB;AAAAA,QAClBC,YAAYzB,QAAQ0B;AAAAA,QACpBC,MAAM3B,QAAQ4B;AAAAA,QACdzB,OAAOH,QAAQ6B;AAAAA,QACfC,UAAU9B,QAAQ+B;AAAAA,MACpB,EAAA,GAZKf,YAAYlB,MAAO,GAAEkB,YAAYC,IAAK,IAAGD,YAAYgB,GAAI,EAa9D;AAAA,IAEN;AAEOC,WAAAA;AAAAA,EAAAA,CACR,GACH,CAAC7B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAGE,SAAA6B,gCAAC,SACC,IACA,WAAWvB,GACTX,QAAQmB,MACRnB,QAAQE,MAAM,GACd;AAAA,IAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,IAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,EAAA,GACzDV,SACF,GAEEQ,UAAAA;AAAAA,IACA,UAAA8B,2BAAA,IAACC,2BAAa,WAAU,OAAM,SAAQ,SAAQ,WAAWtC,QAAQG,OAC9DI,UAAAA,QACH,KAECJ,SACCkC,2BAAAA,IAACE,qCACC,WAAWvC,QAAQG,OACnB,MAAMA,OACN,WAAU,aACV,SAAS;AAAA,MACPqC,wBAAwBxC,QAAQyC;AAAAA,IAAAA,GAGpC;AAAA,mCACHC,cAAAA,iBAAgB,EAAA,gBAAc,MAAC,WAAW1C,QAAQ2C,kBAChD9B,UACH,cAAA;AAAA,IACCL,UACE6B,2BAAAA,IAAAC,WAAAA,cAAA,EACC,WAAU,OACV,SAAQ,SACR,WAAWtC,QAAQ4C,iBAElBpC,UACH,OAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
@@ -56,9 +56,10 @@ const {
56
56
  // we need to play with the 4px because of the focus ring
57
57
  // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,
58
58
  padding: `4px ${uikitStyles.theme.space.sm} ${uikitStyles.theme.space.sm} 4px`,
59
- overflow: "hidden",
60
- whiteSpace: "nowrap",
61
- textOverflow: "ellipsis"
59
+ ...uikitStyles.theme.typography.label
60
+ },
61
+ titleAnchor: {
62
+ WebkitLineClamp: 2
62
63
  },
63
64
  single: {
64
65
  width: 320
@@ -1 +1 @@
1
- {"version":3,"file":"AppSwitcher.styles.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n // theme.spacing(2) - 4\n // }px`,\n padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n },\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTrigger: {},\n itemIcon: {},\n itemTitle: {},\n itemInfoIcon: {},\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // We need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n marginTop: \"auto\",\n height: 52,\n\n // We need to play with the 4px because of the focus ring\n // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.colors.shadow,\n },\n closed: { display: \"none\" },\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n textOverflow: \"ellipsis\",\n },\n single: { width: 320 },\n dual: { width: 640 },\n fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","spacing","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","space","sm","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","whiteSpace","textOverflow","single","width","dual","fluid"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAASJ,YAAMK,MAAAA,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBhB,SAAS;AAAA,IACTiB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXZ,SAAS;AAAA,EACX;AAAA,EACAa,iBAAiB;AAAA,IACfpB,SAAS;AAAA,IACTqB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRhB,SAAU,GAAEJ,YAAMqB,MAAAA,MAAMC,EAAG,IAAGtB,kBAAMqB,MAAMC,EAAG;AAAA,EAC/C;AAAA,EACAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW5B,YAAAA,MAAMC,OAAO4B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEjC,SAAS;AAAA,EAAO;AAAA,EAC1BkC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX5B,SAAU,OAAMJ,YAAMqB,MAAAA,MAAMC,EAAG,IAAGtB,kBAAMqB,MAAMC,EAAG;AAAA,IAEjDnB,UAAU;AAAA,IACV8B,YAAY;AAAA,IACZC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;;;"}
1
+ {"version":3,"file":"AppSwitcher.styles.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n overflow: \"hidden\",\n\n // we need to play with the 4px because of the focus ring\n // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n // theme.spacing(2) - 4\n // }px`,\n padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n },\n item: {},\n itemSelected: {},\n itemDisabled: {},\n itemTrigger: {},\n itemIcon: {},\n itemTitle: {},\n itemInfoIcon: {},\n actionsContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"flex-start\",\n\n overflowY: \"auto\",\n\n // We need to play with the 4px because of the focus ring\n padding: \"4px 0 4px 4px\",\n },\n footerContainer: {\n display: \"flex\",\n alignItems: \"center\",\n marginTop: \"auto\",\n height: 52,\n\n // We need to play with the 4px because of the focus ring\n // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n },\n open: {\n zIndex: \"1200\",\n position: \"absolute\",\n top: \"50px\",\n overflowX: \"hidden\",\n boxShadow: theme.colors.shadow,\n },\n closed: { display: \"none\" },\n title: {\n minHeight: 36,\n\n // we need to play with the 4px because of the focus ring\n // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n ...theme.typography.label,\n },\n titleAnchor: {\n WebkitLineClamp: 2,\n },\n single: { width: 320 },\n dual: { width: 640 },\n fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","spacing","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","space","sm","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","typography","label","titleAnchor","WebkitLineClamp","single","width","dual","fluid"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAASJ,YAAMK,MAAAA,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBhB,SAAS;AAAA,IACTiB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXZ,SAAS;AAAA,EACX;AAAA,EACAa,iBAAiB;AAAA,IACfpB,SAAS;AAAA,IACTqB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRhB,SAAU,GAAEJ,YAAMqB,MAAAA,MAAMC,EAAG,IAAGtB,kBAAMqB,MAAMC,EAAG;AAAA,EAC/C;AAAA,EACAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW5B,YAAAA,MAAMC,OAAO4B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEjC,SAAS;AAAA,EAAO;AAAA,EAC1BkC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX5B,SAAU,OAAMJ,YAAMqB,MAAAA,MAAMC,EAAG,IAAGtB,kBAAMqB,MAAMC,EAAG;AAAA,IACjD,GAAGtB,YAAAA,MAAMiC,WAAWC;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;;;"}
@@ -2,9 +2,9 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("@emotion/react/jsx-runtime");
4
4
  const Page_styles = require("./Page.styles.cjs");
5
- const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
6
5
  const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
7
6
  const Typography = require("../../Typography/Typography.cjs");
7
+ const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
8
8
  const HvBreadCrumbPage = (props) => {
9
9
  const {
10
10
  component,
@@ -13,9 +13,6 @@ const mapVariant = (variant, theme) => {
13
13
  ghost: "primaryGhost"
14
14
  };
15
15
  const mappedVariant = deprecatedVariantMap[variant];
16
- if (mappedVariant) {
17
- console.warn(`Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`);
18
- }
19
16
  return mappedVariant || variant;
20
17
  };
21
18
  const HvButton = React.forwardRef((props, ref) => {
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n staticClasses as buttonClasses,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Button. */\n variant?: HvButtonVariant;\n /** Whether the Button is an icon-only button. */\n icon?: boolean;\n /** Whether the Button is disabled or not. */\n disabled?: boolean;\n /** Class names to be applied. */\n className?: string;\n /** Element placed before the children. */\n startIcon?: ReactElement;\n /** Element placed after the children. */\n endIcon?: ReactElement;\n /** Button size. */\n size?: HvButtonSize;\n /** Button border radius. */\n radius?: HvButtonRadius;\n /** Defines the default colors of the button are forced into the icon. */\n overrideIconColors?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvButtonClasses;\n /** Whether the Button is selected or not. */\n selected?: boolean;\n }\n >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: string\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n );\n }\n\n return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n <C extends React.ElementType = \"button\">(\n props: HvButtonProps<C>,\n ref: PolymorphicRef<C>\n ) => {\n const {\n id,\n classes: classesProp,\n children,\n variant: variantProp,\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n ...others\n } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.name\n );\n\n return (\n <Component\n ref={ref}\n className={cx(\n classes.root,\n classes[variant],\n size && css(getSizeStyles(size)),\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n className\n )}\n {...(Component === \"button\" && { type: \"button\" })}\n {...(disabled && {\n disabled: true,\n tabIndex: -1,\n \"aria-disabled\": true,\n })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","console","warn","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","jsxs","root","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex","jsx"],"mappings":";;;;;;;AAsDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AAElD,MAAIK,eAAe;AAEjBC,YAAQC,KACL,mBAAkBP,OAAQ,gCAA+BK,aAAc,IAC1E;AAAA,EACF;AAEA,SAAOA,iBAAiBL;AAC1B;AAKO,MAAMQ,WAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAf,SAASgB;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS,SAAA;AACjC,QAAMjC,UAAUD,WACdiB,gBAAgBK,OAAO,mBAAmB,YAC1CW,aAAaE,IACf;AAGE,SAAAC,gCAAC,WACC,EAAA,KACA,WAAWL,GACTjB,QAAQuB,MACRvB,QAAQb,OAAO,GACfsB,QAAQO,IAAIQ,cAAAA,cAAcf,IAAI,CAAC,GAC/BC,UAAUM,IAAIS,cAAgBf,gBAAAA,MAAM,CAAC,GACrCC,sBAAsBK,IAAIU,cAAAA,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAAC1B,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEc,MAAM;AAAA,EAAS,GAC3CvB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVwB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEfd,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAcuB,2BAAAA,IAAA,QAAA,EAAK,WAAW7B,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAYsB,2BAAAA,IAAA,QAAA,EAAK,WAAW7B,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;;;"}
1
+ {"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport {\n staticClasses as buttonClasses,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Button. */\n variant?: HvButtonVariant;\n /** Whether the Button is an icon-only button. */\n icon?: boolean;\n /** Whether the Button is disabled or not. */\n disabled?: boolean;\n /** Class names to be applied. */\n className?: string;\n /** Element placed before the children. */\n startIcon?: ReactElement;\n /** Element placed after the children. */\n endIcon?: ReactElement;\n /** Button size. */\n size?: HvButtonSize;\n /** Button border radius. */\n radius?: HvButtonRadius;\n /** Defines the default colors of the button are forced into the icon. */\n overrideIconColors?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvButtonClasses;\n /** Whether the Button is selected or not. */\n selected?: boolean;\n }\n >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: string\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (import.meta.env.DEV && mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n );\n }\n\n return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton: <C extends React.ElementType = \"button\">(\n props: HvButtonProps<C>\n) => React.ReactElement | null = forwardRef(\n <C extends React.ElementType = \"button\">(\n props: HvButtonProps<C>,\n ref: PolymorphicRef<C>\n ) => {\n const {\n id,\n classes: classesProp,\n children,\n variant: variantProp,\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n ...others\n } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.name\n );\n\n return (\n <Component\n ref={ref}\n className={cx(\n classes.root,\n classes[variant],\n size && css(getSizeStyles(size)),\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n className\n )}\n {...(Component === \"button\" && { type: \"button\" })}\n {...(disabled && {\n disabled: true,\n tabIndex: -1,\n \"aria-disabled\": true,\n })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n }\n);\n"],"names":["mapVariant","variant","theme","deprecatedVariantMap","secondary","ghost","mappedVariant","HvButton","forwardRef","props","ref","id","classes","classesProp","children","variantProp","disabled","className","startIcon","endIcon","icon","size","radius","overrideIconColors","component","Component","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","name","jsxs","root","getSizeStyles","getRadiusStyles","getOverrideColors","type","tabIndex","jsx"],"mappings":";;;;;;;AAsDA,MAAMA,aAAaA,CACjBC,SACAC,UACoB;AACpB,MAAIA,UAAU;AAAcD,WAAAA;AAE5B,QAAME,uBAAwD;AAAA,IAC5DC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA;AAGHC,QAAAA,gBAAgBH,qBAAqBF,OAAO;AASlD,SAAOK,iBAAiBL;AAC1B;AAKO,MAAMM,WAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAb,SAASc;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,qBAAqB;AAAA,IACrBC,WAAWC,YAAY;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYlB,KAAK;AAC/B,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWjB,WAAW;AAC7C,QAAA;AAAA,IAAEkB;AAAAA,MAAgBC,SAAS,SAAA;AACjC,QAAM/B,UAAUD,WACde,gBAAgBK,OAAO,mBAAmB,YAC1CW,aAAaE,IACf;AAGE,SAAAC,gCAAC,WACC,EAAA,KACA,WAAWL,GACTjB,QAAQuB,MACRvB,QAAQX,OAAO,GACfoB,QAAQO,IAAIQ,cAAAA,cAAcf,IAAI,CAAC,GAC/BC,UAAUM,IAAIS,cAAgBf,gBAAAA,MAAM,CAAC,GACrCC,sBAAsBK,IAAIU,cAAAA,kBAAmB,CAAA,GAC7C;AAAA,IACE,CAAC1B,QAAQQ,IAAI,GAAGA;AAAAA,IAChB,CAACR,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBC,GAAAA,SACF,GACKQ,GAAAA,cAAc,YAAY;AAAA,IAAEc,MAAM;AAAA,EAAS,GAC3CvB,GAAAA,YAAY;AAAA,IACfA,UAAU;AAAA,IACVwB,UAAU;AAAA,IACV,iBAAiB;AAAA,EAAA,GAEfd,GAAAA,QAEHR,UAAAA;AAAAA,IAAAA,aAAcuB,2BAAAA,IAAA,QAAA,EAAK,WAAW7B,QAAQM,WAAYA,UAAU,WAAA;AAAA,IAC5DJ;AAAAA,IACAK,WAAYsB,2BAAAA,IAAA,QAAA,EAAK,WAAW7B,QAAQO,SAAUA,UAAQ,SAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CACF;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.cjs","sources":["../../../../src/components/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { DateRangeProp } from \"./types\";\n\n/**\n * Constant with the number of weeks to be displayed on the calendar.\n */\nexport const CALENDAR_WEEKS = 6;\n\n/**\n * Constant with the default locale that should be used as the default.\n */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Pads a string value with leading zeroes(0) until length is reached.\n *\n * @param value - Value to be padded.\n * @param length - Length of the value after the padding is added.\n * @returns The value as a string with the received amount of padding.\n *\n * @example zeroPad(5, 2) => \"05\"\n */\nexport const zeroPad = (value: number, length: number) =>\n `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n year: number,\n monthIndex: number,\n day: number,\n hour = 1\n) => new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param date - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): date is Date =>\n Object.prototype.toString.call(date) === \"[object Date]\" &&\n !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n \"startDate\" in date;\n\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1: any, date2: any) => {\n if (!(isDate(date1) && isDate(date2))) return false;\n\n return (\n date1.getMonth() === date2.getMonth() &&\n date1.getFullYear() === date2.getFullYear()\n );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\n if (!(isDate(date1) && isDate(date2))) return false;\n\n return (\n date1.getDate() === date2.getDate() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getFullYear() === date2.getFullYear()\n );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param date - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date?: Date) => {\n if (!isDate(date)) return null;\n\n return [\n date.getFullYear(),\n zeroPad(date.getMonth() + 1, 2),\n zeroPad(date.getDate(), 2),\n ].join(\"-\");\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\n const prevMonth = month > 1 ? month - 1 : 12;\n const prevMonthYear = month > 1 ? year : year - 1;\n\n return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\n const nextMonth = month < 12 ? month + 1 : 1;\n const nextMonthYear = month < 12 ? year : year + 1;\n\n return { month: nextMonth, year: nextMonthYear };\n};\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n locale: string | undefined,\n representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) => {\n const options = { month: representationValue, timeZone: \"UTC\" };\n\n return [...new Array(12)].map((n, index) => {\n const auxDate = makeUTCDate(1970, index, 1);\n return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\n });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n const formatter = new Intl.DateTimeFormat(locale, {\n weekday: \"narrow\",\n timeZone: \"UTC\",\n });\n\n return [...new Array(7)].map((n, index) => {\n return formatter.format(makeUTCDate(1970, 0, 4 + index));\n });\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param date - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n date: Date,\n locale: string,\n representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) =>\n new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to Design System specifications.\n * Currently: day month, year => `14 Aug, 2019`.\n *\n * @param date - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (\n // TODO: fix this\n date: any,\n locale: any,\n rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) =>\n `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\n // Initializes the variables needed to calculate the dates for the received month and year\n const monthDays = getMonthDays(month, year);\n const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n const daysFromNextMonth =\n CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n const prevMonthYear = getPreviousMonth(month, year);\n const nextMonthYear = getNextMonth(month, year);\n const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n // Creates the arrays for the dates for previous, current and next months\n const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {\n const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n });\n const currentMonthDates = [...new Array(monthDays)].map((n, index) => {\n const day = index + 1;\n return new Date(year, month - 1, day);\n });\n const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {\n const day = index + 1;\n return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n });\n\n return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\n/**\n * Checks if the received locale is valid according to Intl.\n *\n * @param locale - The locale to be checked\n * @returns True if the locale is valid, false otherwise.\n */\nexport const isValidLocale = (locale: string) => {\n try {\n if (Intl.DateTimeFormat.supportedLocalesOf(locale).length > 0) {\n return true;\n }\n // eslint-disable-next-line no-console\n console.warn(`${locale} is not supported. Falling back to a known locale.`);\n return false;\n } catch (error) {\n if (\n error != null &&\n typeof error === \"object\" &&\n \"name\" in error &&\n error?.name === \"RangeError\"\n ) {\n // eslint-disable-next-line no-console\n console.error(`Invalid locale: ${locale}`);\n return false;\n }\n if (error != null && typeof error === \"object\" && \"message\" in error) {\n // eslint-disable-next-line no-console\n console.error(error?.message);\n return false;\n }\n\n return false;\n }\n};\n\nexport const isRange = (date): date is DateRangeProp =>\n date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param date - The date to be evaluated.\n * @param providedValueRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n date: any,\n providedValueRange: any\n) => {\n const { startDate, endDate } = providedValueRange;\n\n if (!isRange(providedValueRange) || endDate == null) return false;\n const localEndDate = endDate;\n\n const modStartDate = dayjs(startDate).format(\"YYYY-MM-DD\");\n const modEndDate = dayjs(localEndDate).format(\"YYYY-MM-DD\");\n\n const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n date?: string | number | Date | dayjs.Dayjs,\n minimumDate?: string | number | Date | dayjs.Dayjs,\n maximumDate?: string | number | Date | dayjs.Dayjs\n) => {\n if (!minimumDate && !maximumDate) return false;\n const modStartDate = minimumDate\n ? dayjs(minimumDate).format(\"YYYY-MM-DD\")\n : undefined;\n const modEndDate = maximumDate\n ? dayjs(maximumDate).format(\"YYYY-MM-DD\")\n : undefined;\n\n const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n return (\n (modStartDate !== undefined && convertedDate < modStartDate) ||\n (modEndDate !== undefined && convertedDate > modEndDate)\n );\n};\n\nexport const formatToLocale = (date, locale) => {\n return new Intl.DateTimeFormat(locale, {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n }).format(date);\n};\n"],"names":["CALENDAR_WEEKS","getMonthDays","month","year","Date","getDate","getMonthFirstWeekday","getDay","makeUTCDate","monthIndex","day","hour","UTC","isDate","date","Object","prototype","toString","call","Number","isNaN","valueOf","isDateRangeProp","isSameMonth","date1","date2","getMonth","getFullYear","isSameDay","getPreviousMonth","prevMonth","prevMonthYear","getNextMonth","nextMonth","nextMonthYear","getMonthNamesList","locale","representationValue","options","timeZone","Array","map","n","index","auxDate","capitalize","Intl","DateTimeFormat","format","getWeekdayNamesList","formatter","weekday","getMonthName","getFormattedDate","rep","createDatesArray","monthDays","daysFromPrevMonth","daysFromNextMonth","prevMonthDays","prevMonthDates","currentMonthDates","nextMonthDates","isRange","dateInProvidedValueRange","providedValueRange","startDate","endDate","localEndDate","modStartDate","dayjs","modEndDate","convertedDate","checkIfDateIsDisabled","minimumDate","maximumDate","undefined","formatToLocale"],"mappings":";;;;;;;AASO,MAAMA,iBAAiB;AA0BjBC,MAAAA,eAAeA,CAACC,OAAeC,SAC1C,IAAIC,KAAKD,MAAMD,OAAO,CAAC,EAAEG,QAAQ;AAUtBC,MAAAA,uBAAuBA,CAACJ,OAAeC,SAClD,IAAIC,KAAKD,MAAMD,QAAQ,GAAG,CAAC,EAAEK,OAAO;AAW/B,MAAMC,cAAcA,CACzBL,MACAM,YACAC,KACAC,OAAO,MACJ,IAAIP,KAAKA,KAAKQ,IAAIT,MAAMM,YAAYC,KAAKC,IAAI,CAAC;AAQ5C,MAAME,SAASA,CAACC,SACrBC,OAAOC,UAAUC,SAASC,KAAKJ,IAAI,MAAM,mBACzC,CAACK,OAAOC,MAAMN,KAAKO,SAAS;AAEjBC,MAAAA,kBAAkBA,CAACR,SAC9B,eAAeA;AASJS,MAAAA,cAAcA,CAACC,OAAYC,UAAe;AACrD,MAAI,EAAEZ,OAAOW,KAAK,KAAKX,OAAOY,KAAK;AAAW,WAAA;AAG5CD,SAAAA,MAAME,eAAeD,MAAMC,SAAAA,KAC3BF,MAAMG,YAAkBF,MAAAA,MAAME;AAElC;AASaC,MAAAA,YAAYA,CAACJ,OAAYC,UAAe;AACnD,MAAI,EAAEZ,OAAOW,KAAK,KAAKX,OAAOY,KAAK;AAAW,WAAA;AAE9C,SACED,MAAMnB,QAAQ,MAAMoB,MAAMpB,QAAAA,KAC1BmB,MAAME,SAAAA,MAAeD,MAAMC,SAC3BF,KAAAA,MAAMG,YAAY,MAAMF,MAAME;AAElC;AA0BaE,MAAAA,mBAAmBA,CAAC3B,OAAeC,SAAiB;AAC/D,QAAM2B,YAAY5B,QAAQ,IAAIA,QAAQ,IAAI;AAC1C,QAAM6B,gBAAgB7B,QAAQ,IAAIC,OAAOA,OAAO;AAEzC,SAAA;AAAA,IAAED,OAAO4B;AAAAA,IAAW3B,MAAM4B;AAAAA,EAAAA;AACnC;AAUaC,MAAAA,eAAeA,CAAC9B,OAAeC,SAAiB;AAC3D,QAAM8B,YAAY/B,QAAQ,KAAKA,QAAQ,IAAI;AAC3C,QAAMgC,gBAAgBhC,QAAQ,KAAKC,OAAOA,OAAO;AAE1C,SAAA;AAAA,IAAED,OAAO+B;AAAAA,IAAW9B,MAAM+B;AAAAA,EAAAA;AACnC;AASO,MAAMC,oBAAoBA,CAC/BC,QACAC,sBAA2D,WACxD;AACH,QAAMC,UAAU;AAAA,IAAEpC,OAAOmC;AAAAA,IAAqBE,UAAU;AAAA,EAAA;AAEjD,SAAA,CAAC,GAAG,IAAIC,MAAM,EAAE,CAAC,EAAEC,IAAI,CAACC,GAAGC,UAAU;AAC1C,UAAMC,UAAUpC,YAAY,MAAMmC,OAAO,CAAC;AACnCE,WAAAA,oBAAAA,QAAWC,KAAKC,eAAeX,QAAQE,OAAO,EAAEU,OAAOJ,OAAO,CAAC;AAAA,EAAA,CACvE;AACH;AAQaK,MAAAA,sBAAsBA,CAACb,WAAmB;AACrD,QAAMc,YAAY,IAAIJ,KAAKC,eAAeX,QAAQ;AAAA,IAChDe,SAAS;AAAA,IACTZ,UAAU;AAAA,EAAA,CACX;AAEM,SAAA,CAAC,GAAG,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAGC,UAAU;AACzC,WAAOO,UAAUF,OAAOxC,YAAY,MAAM,GAAG,IAAImC,KAAK,CAAC;AAAA,EAAA,CACxD;AACH;AAUaS,MAAAA,eAAeA,CAC1BtC,MACAsB,QACAC,sBAA2D,WAE3D,IAAIS,KAAKC,eAAeX,QAAQ;AAAA,EAAElC,OAAOmC;AAAoB,CAAC,EAAEW,OAAOlC,IAAI;AAUtE,MAAMuC,mBAAmBA,CAE9BvC,MACAsB,QACAkB,MAA2C,YAE1C,GAAExC,KAAKT,QAAU,CAAA,IAAG+C,aAAatC,MAAMsB,QAAQkB,GAAG,CAAE,IAAGxC,KAAKa,aAAc;AAUhE4B,MAAAA,mBAAmBA,CAACrD,OAAeC,SAAiB;AAEzDqD,QAAAA,YAAYvD,aAAaC,OAAOC,IAAI;AACpCsD,QAAAA,oBAAoBnD,qBAAqBJ,OAAOC,IAAI;AACpDuD,QAAAA,oBACJ1D,iBAAiB,KAAKyD,oBAAoBD;AACtCzB,QAAAA,gBAAgBF,iBAAiB3B,OAAOC,IAAI;AAC5C+B,QAAAA,gBAAgBF,aAAa9B,OAAOC,IAAI;AAC9C,QAAMwD,gBAAgB1D,aAAa8B,cAAc7B,OAAO6B,cAAc5B,IAAI;AAGpEyD,QAAAA,iBAAiB,CAAC,GAAG,IAAIpB,MAAMiB,iBAAiB,CAAC,EAAEhB,IAAI,CAACC,GAAGC,UAAU;AACnEjC,UAAAA,MAAMiC,QAAQ,KAAKgB,gBAAgBF;AACzC,WAAO,IAAIrD,KAAK2B,cAAc5B,MAAM4B,cAAc7B,QAAQ,GAAGQ,GAAG;AAAA,EAAA,CACjE;AACKmD,QAAAA,oBAAoB,CAAC,GAAG,IAAIrB,MAAMgB,SAAS,CAAC,EAAEf,IAAI,CAACC,GAAGC,UAAU;AACpE,UAAMjC,MAAMiC,QAAQ;AACpB,WAAO,IAAIvC,KAAKD,MAAMD,QAAQ,GAAGQ,GAAG;AAAA,EAAA,CACrC;AACKoD,QAAAA,iBAAiB,CAAC,GAAG,IAAItB,MAAMkB,iBAAiB,CAAC,EAAEjB,IAAI,CAACC,GAAGC,UAAU;AACzE,UAAMjC,MAAMiC,QAAQ;AACpB,WAAO,IAAIvC,KAAK8B,cAAc/B,MAAM+B,cAAchC,QAAQ,GAAGQ,GAAG;AAAA,EAAA,CACjE;AAED,SAAO,CAAC,GAAGkD,gBAAgB,GAAGC,mBAAmB,GAAGC,cAAc;AACpE;AAqCaC,MAAAA,UAAUA,CAACjD,SACtBA,QAAQ,QAAQ,OAAOA,SAAS,YAAY,eAAeA;AAShDkD,MAAAA,2BAA2BA,CACtClD,MACAmD,uBACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,EAAYF,IAAAA;AAE/B,MAAI,CAACF,QAAQE,kBAAkB,KAAKE,WAAW;AAAa,WAAA;AAC5D,QAAMC,eAAeD;AAErB,QAAME,eAAeC,eAAAA,QAAMJ,SAAS,EAAElB,OAAO,YAAY;AACzD,QAAMuB,aAAaD,eAAAA,QAAMF,YAAY,EAAEpB,OAAO,YAAY;AAE1D,QAAMwB,gBAAgBF,eAAAA,QAAMxD,IAAI,EAAEkC,OAAO,YAAY;AAE9CwB,SAAAA,iBAAiBH,gBAAgBG,iBAAiBD;AAC3D;AAEO,MAAME,wBAAwBA,CACnC3D,MACA4D,aACAC,gBACG;AACC,MAAA,CAACD,eAAe,CAACC;AAAoB,WAAA;AACzC,QAAMN,eAAeK,cACjBJ,uBAAMI,WAAW,EAAE1B,OAAO,YAAY,IACtC4B;AACJ,QAAML,aAAaI,cACfL,uBAAMK,WAAW,EAAE3B,OAAO,YAAY,IACtC4B;AAEJ,QAAMJ,gBAAgBF,eAAAA,QAAMxD,IAAI,EAAEkC,OAAO,YAAY;AAErD,SACGqB,iBAAiBO,UAAaJ,gBAAgBH,gBAC9CE,eAAeK,UAAaJ,gBAAgBD;AAEjD;AAEaM,MAAAA,iBAAiBA,CAAC/D,MAAMsB,WAAW;AACvC,SAAA,IAAIU,KAAKC,eAAeX,QAAQ;AAAA,IACrC1B,KAAK;AAAA,IACLR,OAAO;AAAA,IACPC,MAAM;AAAA,EAAA,CACP,EAAE6C,OAAOlC,IAAI;AAChB;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"utils.cjs","sources":["../../../../src/components/Calendar/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { DateRangeProp } from \"./types\";\n\n/**\n * Constant with the number of weeks to be displayed on the calendar.\n */\nexport const CALENDAR_WEEKS = 6;\n\n/**\n * Constant with the default locale that should be used as the default.\n */\nexport const DEFAULT_LOCALE = \"en\";\n\n/**\n * Pads a string value with leading zeroes(0) until length is reached.\n *\n * @param value - Value to be padded.\n * @param length - Length of the value after the padding is added.\n * @returns The value as a string with the received amount of padding.\n *\n * @example zeroPad(5, 2) => \"05\"\n */\nexport const zeroPad = (value: number, length: number) =>\n `${value}`.padStart(length, \"0\");\n\n/**\n * Returns the number of days in the month given a month and year.\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The number of days in a month for the received year.\n */\nexport const getMonthDays = (month: number, year: number) =>\n new Date(year, month, 0).getDate();\n\n/**\n * Gets the week day of the first day of a given month and year.\n * From 0 (Sunday) to 6 (Saturday).\n *\n * @param month - Number of the month (1 to 12).\n * @param year - Number of the year.\n * @returns The zero indexed week day where 0 is Sunday (0 to 6).\n */\nexport const getMonthFirstWeekday = (month: number, year: number) =>\n new Date(year, month - 1, 1).getDay();\n\n/**\n * Creates a `Date` instance in UTC timezone.\n *\n * @param year - The year of the date.\n * @param monthIndex - The zero indexed month of the year (0 to 11).\n * @param day - The day of the month.\n * @param [hour=1] - The hour of the day.\n * @returns A `Date` instance in UTC timezone.\n */\nexport const makeUTCDate = (\n year: number,\n monthIndex: number,\n day: number,\n hour = 1\n) => new Date(Date.UTC(year, monthIndex, day, hour));\n\n/**\n * Checks if the received date is a valid date.\n *\n * @param date - The date to be validated.\n * @returns A flag stating if the date is valid or not.\n */\nexport const isDate = (date: any): date is Date =>\n Object.prototype.toString.call(date) === \"[object Date]\" &&\n !Number.isNaN(date.valueOf());\n\nexport const isDateRangeProp = (date: any): date is DateRangeProp =>\n \"startDate\" in date;\n\n/**\n * Checks if two dates are in the same month and year.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same month and year or not.\n */\nexport const isSameMonth = (date1: any, date2: any) => {\n if (!(isDate(date1) && isDate(date2))) return false;\n\n return (\n date1.getMonth() === date2.getMonth() &&\n date1.getFullYear() === date2.getFullYear()\n );\n};\n\n/**\n * Checks if two dates are on the same day.\n *\n * @param date1 - First date.\n * @param date2 - Second date.\n * @returns A flag stating if the dates are in the same day or not.\n */\nexport const isSameDay = (date1: any, date2: any) => {\n if (!(isDate(date1) && isDate(date2))) return false;\n\n return (\n date1.getDate() === date2.getDate() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getFullYear() === date2.getFullYear()\n );\n};\n\n/**\n * Formats the received date using the ISO format (YYYY-MM-DD).\n *\n * @param date - The date to be formatted.\n * @returns The formatted date in ISO format.\n */\nexport const getDateISO = (date?: Date) => {\n if (!isDate(date)) return null;\n\n return [\n date.getFullYear(),\n zeroPad(date.getMonth() + 1, 2),\n zeroPad(date.getDate(), 2),\n ].join(\"-\");\n};\n\n/**\n * Returns an object with the previous month taking also into consideration the year.\n * For example the previous month of January 2000 will be December 1999.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getPreviousMonth = (month: number, year: number) => {\n const prevMonth = month > 1 ? month - 1 : 12;\n const prevMonthYear = month > 1 ? year : year - 1;\n\n return { month: prevMonth, year: prevMonthYear };\n};\n\n/**\n * Returns an object with the next month taking also into consideration the year.\n * For example the next month of December 2000 will be January 2001.\n *\n * @param month - Number of the month.\n * @param year - Number of the year.\n * @returns Object with new month and year defined.\n */\nexport const getNextMonth = (month: number, year: number) => {\n const nextMonth = month < 12 ? month + 1 : 1;\n const nextMonthYear = month < 12 ? year : year + 1;\n\n return { month: nextMonth, year: nextMonthYear };\n};\n\n/**\n * Returns a list with the names of all the months localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The representation value for the month.\n * @returns An array with all the months names.\n */\nexport const getMonthNamesList = (\n locale: string | undefined,\n representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) => {\n const options = { month: representationValue, timeZone: \"UTC\" };\n\n return [...new Array(12)].map((n, index) => {\n const auxDate = makeUTCDate(1970, index, 1);\n return capitalize(Intl.DateTimeFormat(locale, options).format(auxDate));\n });\n};\n\n/**\n * Returns a list with the names of all the weekdays localized in the received locale and representation value.\n *\n * @param locale - The locale to be applied.\n * @returns An array with all the weekday names.\n */\nexport const getWeekdayNamesList = (locale: string) => {\n const formatter = new Intl.DateTimeFormat(locale, {\n weekday: \"narrow\",\n timeZone: \"UTC\",\n });\n\n return [...new Array(7)].map((n, index) => {\n return formatter.format(makeUTCDate(1970, 0, 4 + index));\n });\n};\n\n/**\n * Returns the name of the month for the supplied month localized in the received locale and representation value.\n *\n * @param date - The date from which the month name is extracted.\n * @param locale - The locale to be applied to the Intl format.\n * @param representationValue - The locale to be applied to the Intl format.\n * @returns The name of the month.\n */\nexport const getMonthName = (\n date: Date,\n locale: string,\n representationValue: Intl.DateTimeFormatOptions[\"month\"] = \"long\"\n) =>\n new Intl.DateTimeFormat(locale, { month: representationValue }).format(date);\n\n/**\n * Formats the received date according to Design System specifications.\n * Currently: day month, year => `14 Aug, 2019`.\n *\n * @param date - UTC date to be formatted.\n * @param locale - The locale to be applied to the Intl format.\n * @returns The formatted date as a string.\n */\nexport const getFormattedDate = (\n // TODO: fix this\n date: any,\n locale: any,\n rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) =>\n `${date.getDate()} ${getMonthName(date, locale, rep)} ${date.getFullYear()}`;\n\n/**\n * Creates an array of 42 days. The complete current month and enough days from the previous and next months to fill\n * the 42 positions.\n *\n * @param month - The number of the month (1 to 12).\n * @param year - The number of the year.\n * @returns The array of dates.\n */\nexport const createDatesArray = (month: number, year: number) => {\n // Initializes the variables needed to calculate the dates for the received month and year\n const monthDays = getMonthDays(month, year);\n const daysFromPrevMonth = getMonthFirstWeekday(month, year);\n const daysFromNextMonth =\n CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);\n const prevMonthYear = getPreviousMonth(month, year);\n const nextMonthYear = getNextMonth(month, year);\n const prevMonthDays = getMonthDays(prevMonthYear.month, prevMonthYear.year);\n\n // Creates the arrays for the dates for previous, current and next months\n const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {\n const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\n return new Date(prevMonthYear.year, prevMonthYear.month - 1, day);\n });\n const currentMonthDates = [...new Array(monthDays)].map((n, index) => {\n const day = index + 1;\n return new Date(year, month - 1, day);\n });\n const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {\n const day = index + 1;\n return new Date(nextMonthYear.year, nextMonthYear.month - 1, day);\n });\n\n return [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];\n};\n\nexport const isRange = (date): date is DateRangeProp =>\n date != null && typeof date === \"object\" && \"startDate\" in date;\n\n/**\n * Checks if the date falls within a specified date range.\n *\n * @param date - The date to be evaluated.\n * @param providedValueRange - Provided selection range.\n * @returns - True if the date falls within the range, false otherwise.\n */\nexport const dateInProvidedValueRange = (\n date: any,\n providedValueRange: any\n) => {\n const { startDate, endDate } = providedValueRange;\n\n if (!isRange(providedValueRange) || endDate == null) return false;\n const localEndDate = endDate;\n\n const modStartDate = dayjs(startDate).format(\"YYYY-MM-DD\");\n const modEndDate = dayjs(localEndDate).format(\"YYYY-MM-DD\");\n\n const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n return convertedDate >= modStartDate && convertedDate <= modEndDate;\n};\n\nexport const checkIfDateIsDisabled = (\n date?: string | number | Date | dayjs.Dayjs,\n minimumDate?: string | number | Date | dayjs.Dayjs,\n maximumDate?: string | number | Date | dayjs.Dayjs\n) => {\n if (!minimumDate && !maximumDate) return false;\n const modStartDate = minimumDate\n ? dayjs(minimumDate).format(\"YYYY-MM-DD\")\n : undefined;\n const modEndDate = maximumDate\n ? dayjs(maximumDate).format(\"YYYY-MM-DD\")\n : undefined;\n\n const convertedDate = dayjs(date).format(\"YYYY-MM-DD\");\n\n return (\n (modStartDate !== undefined && convertedDate < modStartDate) ||\n (modEndDate !== undefined && convertedDate > modEndDate)\n );\n};\n\nexport const formatToLocale = (date, locale) => {\n return new Intl.DateTimeFormat(locale, {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n }).format(date);\n};\n"],"names":["CALENDAR_WEEKS","getMonthDays","month","year","Date","getDate","getMonthFirstWeekday","getDay","makeUTCDate","monthIndex","day","hour","UTC","isDate","date","Object","prototype","toString","call","Number","isNaN","valueOf","isDateRangeProp","isSameMonth","date1","date2","getMonth","getFullYear","isSameDay","getPreviousMonth","prevMonth","prevMonthYear","getNextMonth","nextMonth","nextMonthYear","getMonthNamesList","locale","representationValue","options","timeZone","Array","map","n","index","auxDate","capitalize","Intl","DateTimeFormat","format","getWeekdayNamesList","formatter","weekday","getMonthName","getFormattedDate","rep","createDatesArray","monthDays","daysFromPrevMonth","daysFromNextMonth","prevMonthDays","prevMonthDates","currentMonthDates","nextMonthDates","isRange","dateInProvidedValueRange","providedValueRange","startDate","endDate","localEndDate","modStartDate","dayjs","modEndDate","convertedDate","checkIfDateIsDisabled","minimumDate","maximumDate","undefined","formatToLocale"],"mappings":"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"}
@@ -6,6 +6,7 @@ const MuiDialog = require("@mui/material/Dialog");
6
6
  const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
7
7
  const uikitStyles = require("@hitachivantara/uikit-styles");
8
8
  const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
9
+ const document$1 = require("../../utils/document.cjs");
9
10
  const setId = require("../../utils/setId.cjs");
10
11
  const useTheme = require("../../hooks/useTheme.cjs");
11
12
  const hexToRgbA = require("../../utils/hexToRgbA.cjs");
@@ -48,11 +49,7 @@ const HvDialog = (props) => {
48
49
  const contextValue = React.useMemo(() => ({
49
50
  fullscreen
50
51
  }), [fullscreen]);
51
- return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, { container: typeof window !== "undefined" ? (
52
- // TODO: review
53
- // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
54
- document.getElementById(rootId || "") || document.body
55
- ) : void 0, className: cx(classes.root, className), classes: {
52
+ return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, { container: document$1.getElementById(rootId), className: cx(classes.root, className), classes: {
56
53
  container: css({
57
54
  position: "relative"
58
55
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Current state of the Dialog. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. */\n onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /**\n * Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n variant?: \"success\" | \"error\" | \"warning\";\n /** @ignore */\n ref?: MuiDialogProps[\"ref\"];\n /** @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId, colors } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n return (\n <MuiDialog\n container={\n typeof window !== \"undefined\"\n ? // TODO: review\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n document.getElementById(rootId || \"\") || document.body\n : undefined\n }\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: cx(\n css({\n background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n }),\n classes.background\n ),\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n }\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <HvTooltip placement=\"top\" title={buttonTitle}>\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close role=\"none\" />\n </HvButton>\n </HvTooltip>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","jsxs","MuiDialog","window","body","undefined","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","jsx","HvTooltip","HvButton","setId","closeButton","Close","DialogContext"],"mappings":";;;;;;;;;;;;;;;;;AAyDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS,SAAA;AAE9BC,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,aAASG,MAAM;AAAA,EAAA,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,MAAAA,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACGkB,2BAAA,KAAAC,mBAAA,SAAA,EACC,WACE,OAAOC,WAAW;AAAA;AAAA;AAAA,IAGdP,SAASC,eAAeP,UAAU,EAAE,KAAKM,SAASQ;AAAAA,MAClDC,QAEN,WAAWjB,GAAGd,QAAQgC,MAAM9B,SAAS,GACrC,SAAS;AAAA,IAAE+B,WAAWpB,IAAI;AAAA,MAAEqB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKf,aACL,MACA,YAAYV,YACZ,SAAS,CAAC0B,OAAOC,WAAW;AAGtB1B,QAAAA;AAAsB;AAE1BJ,cAAU6B,OAAOC,MAAM;AAAA,KAEzB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRrC,SAAS;AAAA,QACPgC,MAAMlB,GACJD,IAAI;AAAA,UACFyB,YAAYC,UAAUtB,UAAAA,QAAQuB,SAASC,YAAAA,MAAMxB,OAAOuB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDxC,QAAQsC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVtC,SAAS;AAAA,MACPgC,MAAMlB,GACJD,IAAI;AAAA,QAAEqB,UAAU;AAAA,MAAA,CAAY,GAC5BlC,QAAQ0C,OACR3C,WAAWe,GAAGd,QAAQ2C,WAAW3C,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAAiC,2BAAA,IAACC,QAAU,WAAA,EAAA,WAAU,OAAM,OAAOrC,aAChC,UAAAoC,2BAAA,IAACE,OACC,UAAA,EAAA,IAAIC,MAAM5C,MAAAA,IAAI,OAAO,GACrB,WAAWH,QAAQgD,aACnB,SAAQ,kBACR,SAAUb,CAAU7B,UAAAA,UAAU6B,OAAOJ,MAAS,GAE9C,UAAAa,2BAAAA,IAACK,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,mCACCC,QAAc,cAAA,UAAd,EAAuB,OAAOzB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
1
+ {"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Current state of the Dialog. */\n open?: boolean;\n /** Callback fired when the component requests to be closed. */\n onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n /** @inheritdoc */\n maxWidth?: MuiDialogProps[\"maxWidth\"];\n /** @inheritdoc */\n fullWidth?: MuiDialogProps[\"fullWidth\"];\n /**\n * Element id that should be focus when the Dialog opens.\n * Auto-focusing elements can cause usability issues, so this should be avoided.\n * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n variant?: \"success\" | \"error\" | \"warning\";\n /** @ignore */\n ref?: MuiDialogProps[\"ref\"];\n /** @ignore */\n component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n const {\n variant,\n classes: classesProp,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n } = useDefaultProps(\"HvDialog\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { rootId, colors } = useTheme();\n\n const measuredRef = useCallback(() => {\n if (!firstFocusable) return;\n\n const element = document.getElementById(firstFocusable);\n element?.focus();\n }, [firstFocusable]);\n\n const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n return (\n <MuiDialog\n container={getElementById(rootId)}\n className={cx(classes.root, className)}\n classes={{ container: css({ position: \"relative\" }) }}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => {\n // `disableBackdropClick` property was removed in MUI5\n // and we want to maintain that functionality\n if (disableBackdropClick) return;\n\n onClose?.(event, reason);\n }}\n slotProps={{\n backdrop: {\n classes: {\n root: cx(\n css({\n background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n }),\n classes.background\n ),\n },\n },\n }}\n PaperProps={{\n classes: {\n root: cx(\n css({ position: \"absolute\" }),\n classes.paper,\n variant && cx(classes.statusBar, classes[variant]),\n {\n [classes.fullscreen]: fullscreen,\n }\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <HvTooltip placement=\"top\" title={buttonTitle}>\n <HvButton\n id={setId(id, \"close\")}\n className={classes.closeButton}\n variant=\"secondaryGhost\"\n onClick={(event) => onClose?.(event, undefined)}\n >\n <Close role=\"none\" />\n </HvButton>\n </HvTooltip>\n <DialogContext.Provider value={contextValue}>\n {children}\n </DialogContext.Provider>\n </MuiDialog>\n );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","jsxs","MuiDialog","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","jsx","HvTooltip","HvButton","setId","closeButton","undefined","Close","DialogContext"],"mappings":";;;;;;;;;;;;;;;;;;AA0DaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS,SAAA;AAE9BC,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,aAASG,MAAM;AAAA,EAAA,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,MAAAA,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACGkB,2BAAA,KAAAC,mBAAA,SAAA,EACC,WAAWL,WAAAA,eAAeP,MAAM,GAChC,WAAWF,GAAGd,QAAQ6B,MAAM3B,SAAS,GACrC,SAAS;AAAA,IAAE4B,WAAWjB,IAAI;AAAA,MAAEkB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKZ,aACL,MACA,YAAYV,YACZ,SAAS,CAACuB,OAAOC,WAAW;AAGtBvB,QAAAA;AAAsB;AAE1BJ,cAAU0B,OAAOC,MAAM;AAAA,KAEzB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRlC,SAAS;AAAA,QACP6B,MAAMf,GACJD,IAAI;AAAA,UACFsB,YAAYC,UAAUnB,UAAAA,QAAQoB,SAASC,YAAAA,MAAMrB,OAAOoB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDrC,QAAQmC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVnC,SAAS;AAAA,MACP6B,MAAMf,GACJD,IAAI;AAAA,QAAEkB,UAAU;AAAA,MAAA,CAAY,GAC5B/B,QAAQuC,OACRxC,WAAWe,GAAGd,QAAQwC,WAAWxC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA8B,2BAAA,IAACC,QAAU,WAAA,EAAA,WAAU,OAAM,OAAOlC,aAChC,UAAAiC,2BAAA,IAACE,OACC,UAAA,EAAA,IAAIC,MAAMzC,MAAAA,IAAI,OAAO,GACrB,WAAWH,QAAQ6C,aACnB,SAAQ,kBACR,SAAUb,CAAU1B,UAAAA,UAAU0B,OAAOc,MAAS,GAE9C,UAAAL,2BAAAA,IAACM,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,mCACCC,QAAc,cAAA,UAAd,EAAuB,OAAOvB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
@@ -87,9 +87,6 @@ const HvDropdown = React.forwardRef((props, ref) => {
87
87
  React.useEffect(() => {
88
88
  setSelectionLabel(utils.getSelectionLabel(labels, placeholder, multiSelect, values));
89
89
  }, [labels, multiSelect, placeholder, values]);
90
- if (virtualized && !height && process.env.NODE_ENV !== "production") {
91
- console.error("Dropdown/List in virtualized mode requires a height. Please define it.");
92
- }
93
90
  const dropdownHeaderRef = React.useRef();
94
91
  const {
95
92
  ref: refProp,
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps, useForkRef } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n isInvalid,\n HvInfoMessage,\n HvWarningText,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDropdownClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: any;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: any;\n /**\n * The placeholder value when nothing is selected.\n */\n placeholder?: string;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is in read only mode.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvDropdownStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: any;\n /**\n * Identifies the element that provides an error message for the dropdown.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n /**\n * The list to be rendered by the dropdown.\n */\n values?: HvListValue[];\n /**\n * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n */\n multiSelect?: boolean;\n /**\n * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n */\n showSearch?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabelsProps;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps>;\n /**\n * Callback called when the user cancels the changes.\n *\n * Called when the cancel button is used and when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onCancel?: (event: Event) => void;\n /**\n * Callback called when dropdown changes the expanded state.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * Callback called when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * @ignore\n */\n onFocus?: React.FocusEventHandler<any>;\n /**\n * @ignore\n */\n onBlur?: React.FocusEventHandler<any>;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n /**\n * Extra props passed to the dropdown.\n */\n baseDropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * Extra props passed to the list.\n */\n listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n select: undefined,\n selectAll: \"All\",\n cancelLabel: \"Cancel\",\n applyLabel: \"Apply\",\n searchPlaceholder: \"Search\",\n multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdropdown\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded)\n );\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n const [internalValues, setInternalValues] = useState(values);\n\n useEffect(() => {\n setInternalValues(values);\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const {\n ref: refProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n ...otherBaseDropdownProps\n } = baseDropdownProps;\n const headerForkedRef = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderRef\n );\n\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection = getSelected(internalValues).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /** Applies the selected values to the state */\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues)\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null\n ? [...containerRef.getElementsByTagName(\"li\")]\n : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select || !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n [classes.placeholderClosed]: !(isOpen || hasSelection),\n })}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n },\n className\n )}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={dropdownForkedRef}\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(classes.dropdown, {\n [classes.readOnly]: readOnly,\n }),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={headerForkedRef}\n {...otherBaseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","forwardRef","props","ref","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","refProp","dropdownHeaderRefProp","otherBaseDropdownProps","headerForkedRef","useForkRef","dropdownForkedRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","jsx","HvTypography","selectionDisabled","placeholderClosed","jsxs","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps, useForkRef } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n isInvalid,\n HvInfoMessage,\n HvWarningText,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDropdownClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: any;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: any;\n /**\n * The placeholder value when nothing is selected.\n */\n placeholder?: string;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is in read only mode.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvDropdownStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: any;\n /**\n * Identifies the element that provides an error message for the dropdown.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n /**\n * The list to be rendered by the dropdown.\n */\n values?: HvListValue[];\n /**\n * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n */\n multiSelect?: boolean;\n /**\n * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n */\n showSearch?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabelsProps;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps>;\n /**\n * Callback called when the user cancels the changes.\n *\n * Called when the cancel button is used and when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onCancel?: (event: Event) => void;\n /**\n * Callback called when dropdown changes the expanded state.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * Callback called when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * @ignore\n */\n onFocus?: React.FocusEventHandler<any>;\n /**\n * @ignore\n */\n onBlur?: React.FocusEventHandler<any>;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n /**\n * Extra props passed to the dropdown.\n */\n baseDropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * Extra props passed to the list.\n */\n listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n select: undefined,\n selectAll: \"All\",\n cancelLabel: \"Cancel\",\n applyLabel: \"Apply\",\n searchPlaceholder: \"Search\",\n multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdropdown\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded)\n );\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n const [internalValues, setInternalValues] = useState(values);\n\n useEffect(() => {\n setInternalValues(values);\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (import.meta.env.DEV && virtualized && !height) {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const {\n ref: refProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n ...otherBaseDropdownProps\n } = baseDropdownProps;\n const headerForkedRef = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderRef\n );\n\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection = getSelected(internalValues).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /** Applies the selected values to the state */\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues)\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null\n ? [...containerRef.getElementsByTagName(\"li\")]\n : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select || !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n [classes.placeholderClosed]: !(isOpen || hasSelection),\n })}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n },\n className\n )}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={dropdownForkedRef}\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(classes.dropdown, {\n [classes.readOnly]: readOnly,\n }),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={headerForkedRef}\n {...otherBaseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","forwardRef","props","ref","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","dropdownHeaderRef","useRef","refProp","dropdownHeaderRefProp","otherBaseDropdownProps","headerForkedRef","useForkRef","dropdownForkedRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","jsx","HvTypography","selectionDisabled","placeholderClosed","jsxs","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","error"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuMA,MAAMA,iBAAwC;AAAA,EAC5CC,QAAQC;AAAAA,EACRC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC,YAAY;AAAA,EACZC,mBAAmB;AAAA,EACnBC,2BAA2B;AAC7B;AAKO,MAAMC,aAAaC,MAAAA,WACxB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IAEpBC,cAAc;AAAA,IAEdC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACA,qBAAqBC;AAAAA,IAErBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,6BAA6B;AAAA,IAC7BC,QAAQC;AAAAA,IACRC,cAAc;AAAA,IACdC,gBAAgB;AAAA,IAChBC,wBAAwB;AAAA,IACxBC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,cAAc,CAAC;AAAA,IACfC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,oBAAoB,CAAC;AAAA,IACrBC,YAAY,CAAC;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,cAAc7C,KAAK;AAEjC,QAAA;AAAA,IAAEE;AAAAA,IAAS4C;AAAAA,EAAAA,IAAOC,gBAAAA,WAAW5C,WAAW;AAExC4B,QAAAA,SAASiB,UAAAA,UAAU1D,gBAAgB0C,UAAU;AAE7CiB,QAAAA,YAAYC,YAAAA,YAAY7C,IAAI,YAAY;AAE9C,QAAM,CAAC8C,iBAAiBC,kBAAkB,IAAIC,cAAAA,cAC5CpC,QACA,SACF;AAEA,QAAM,CAACqC,iBAAiB,IAAID,cAAAA,cAAcnC,eAAe,UAAU;AAE7D,QAAA,CAACqC,QAAQC,SAAS,IAAIH,cAAAA,cAC1BzB,UACA6B,QAAQ5B,eAAe,CACzB;AACM,QAAA,CAAC6B,gBAAgBC,iBAAiB,IAAIC,eAC1CC,MAAAA,kBAAkB9B,QAAQhB,aAAaW,aAAaD,MAAM,CAC5D;AACA,QAAM,CAACqC,gBAAgBC,iBAAiB,IAAIH,eAASnC,MAAM;AAE3DuC,QAAAA,UAAU,MAAM;AACdD,sBAAkBtC,MAAM;AAAA,EAAA,GACvB,CAACA,MAAM,CAAC;AAEXuC,QAAAA,UAAU,MAAM;AACdL,sBACEE,MAAkB9B,kBAAAA,QAAQhB,aAAaW,aAAaD,MAAM,CAC5D;AAAA,KACC,CAACM,QAAQL,aAAaX,aAAaU,MAAM,CAAC;AAS7C,QAAMwC,oBAAoBC,MAAAA;AAEpB,QAAA;AAAA,IACJjE,KAAKkE;AAAAA,IACLF,mBAAmBG;AAAAA,IACnB,GAAGC;AAAAA,EACD3B,IAAAA;AACE4B,QAAAA,kBAAkBC,SAAAA,WACtBH,uBACAH,iBACF;AAEMO,QAAAA,oBAAoBD,SAAAA,WAAWtE,KAAKkE,OAAO;AAE3CM,QAAAA,eAAgDA,CAACC,OAAOC,SAAS;AACrEtD,eAAWqD,OAAOC,IAAI;AAEtBnB,cAAUmB,IAAI;AAEd,QAAI,CAACA,MAAM;AAGTvB,yBAAmB,MAAM;AAEvB,YAAI7C,UAAU;AACZ,gBAAMqE,eAAeC,MAAAA,YAAYf,cAAc,EAAEgB,SAAS;AAE1D,cAAI,CAACF,cAAc;AACV,mBAAA;AAAA,UACT;AAAA,QACF;AAEO,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAAA,EAAA;AAIF,QAAMG,kBAAmDA,CACvDC,YACAC,eACAC,QACAC,gBAAgB,SACb;AACGC,UAAAA,WAAWP,kBAAYG,UAAU;AAEvC,QAAIC,eAAe;AACjBlB,wBAAkBiB,UAAU;AAC5BrB,wBACEE,MAAkB9B,kBAAAA,QAAQhB,aAAaW,aAAasD,UAAU,CAChE;AAEA5B,yBAAmB,MAAM;AAEnB7C,YAAAA,YAAY6E,SAASN,WAAW,GAAG;AAC9B,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AACIK,QAAAA;AAAenE,iBAAWU,cAAc0D,WAAWA,SAAS,CAAC,CAAC;AAClE,QAAIF,QAAQ;AACVT,mBAAajF,QAAkB,KAAK;AAIpCyE,wBAAkBoB,SAASC,MAAM;AAAA,QAAEC,eAAe;AAAA,MAAA,CAAM;AAAA,IAC1D;AAAA,EAAA;AAMF,QAAMC,eAAiDC,CAAQ,QAAA;AAC7DrE,eAAWqE,GAAW;AAEtBhB,iBAAagB,KAAY,KAAK;AAI9BxB,sBAAkBoB,SAASC,MAAM;AAAA,MAAEC,eAAe;AAAA,IAAA,CAAM;AAAA,EAAA;AAG1D,QAAMG,qBAA6DD,CAAQ,QAAA;AACzEnE,qBAAiBmE,GAAG;AACpBrE,eAAWqE,GAAG;AAAA,EAAA;AAGhB,QAAME,oBACJC,CACG,iBAAA;AACGC,UAAAA,SAASD,cAAcE,qBAAqB,OAAO;AACrDD,QAAAA,UAAUA,OAAOf,SAAS,GAAG;AACxB,aAAA,CAAC,EAAEQ;AACV;AAAA,IACF;AACMS,UAAAA,YACJH,gBAAgB,OACZ,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAC3C;AACNC,cAAUC,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASX,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,QAAMa,mBAAmBA,MAAM;AAC7B,UAAMvB,eAAeC,MAAAA,YAAYf,cAAc,EAAEgB,SAAS;AAC1D,WAAO/C,QAAQxC,UAAU,CAACmC,cACvB0E,2BAAA,IAAAC,WAAA,cAAA,EACC,WAAU,OACV,SAAQ,QACR,WAAWvD,GAAG5C,QAAQa,aAAa;AAAA,MACjC,CAACb,QAAQoG,iBAAiB,GAAG9F;AAAAA,MAC7B,CAACN,QAAQqG,iBAAiB,GAAG,EAAEhD,UAAUqB;AAAAA,IAC1C,CAAA,GAEAlB,UAAe0B,eAAAA,SAClB,CAAA,IAEAoB,2BAAAA,KAACH,WAAAA,cACC,EAAA,WAAU,OACV,WAAWvD,GAAG5C,QAAQa,aAAa;AAAA,MACjC,CAACb,QAAQoG,iBAAiB,GAAG9F;AAAAA,IAAAA,CAC9B,GACD,SAAQ,QAER,UAAA;AAAA,MAAC4F,2BAAAA,IAAA,KAAA,EAAG1C,yBAAe0B,SAAS,CAAA;AAAA,MAC1B,IAAGrD,QAAQlC,yBAA0B,IAAG6D,eAAe+C,KAAM;AAAA,IACjE,EAAA,CAAA;AAAA,EAAA;AAIJ,QAAMC,WAAWhG,SAAS;AAC1B,QAAMiG,iBAAiB9F,eAAe;AAMhC+F,QAAAA,eACJzF,oBAAoB,SAClBF,WAAWzB,UAAa0B,kBAAkB1B,UACzCyB,WAAWzB,UAAae;AAEvBsG,QAAAA,iBAAiBC,2BAAU3D,eAAe;AAE5C4D,MAAAA;AACJ,MAAIF,gBAAgB;AAClBE,qBAAiBH,eACbI,MAAAA,MAAM/D,WAAW,OAAO,IACxB9B;AAAAA,EACN;AAEA,SACGqF,2BAAA,KAAAS,YAAA,eAAA,EACC,IACA,MACA,QAAQ9D,iBACR,UACA,UACA,UACA,WAAWL,GACT5C,QAAQgH,MACR;AAAA,IACE,CAAChH,QAAQM,QAAQ,GAAGA;AAAAA,EAEtBJ,GAAAA,SACF,GACA,GAAIwC,QAEF8D,UAAAA;AAAAA,KAAAA,YAAYC,mBACZH,gCAAC,OAAI,EAAA,WAAWtG,QAAQiH,gBACrBT,UAAAA;AAAAA,MACC,YAAAN,2BAAAA,IAACgB,MAAAA,SACC,EAAA,IAAIJ,MAAAA,MAAM/D,WAAW,OAAO,GAC5B,OACA,WAAW/C,QAAQQ,MAEtB,CAAA;AAAA,MAEAiG,kBACEP,2BAAAA,IAAAiB,YAAAA,eAAA,EACC,IAAIL,MAAAA,MAAM/D,WAAW,aAAa,GAClC,WAAW/C,QAAQW,aAElBA,UACH,YAAA,CAAA;AAAA,IAAA,GAEJ;AAAA,IAEFuF,+BAACkB,aAAAA,kBACC,KAAK9C,mBACL,IAAIwC,MAAAA,MAAM3G,IAAI,UAAU,GACxB,SAAS;AAAA,MACP6G,MAAMpE,GAAG5C,QAAQqH,UAAU;AAAA,QACzB,CAACrH,QAAQO,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD+G,OAAOtH,QAAQsH;AAAAA,MACfC,QAAQ3E,GAAG5C,QAAQwH,gBAAgB;AAAA,QACjC,CAACxH,QAAQyH,qBAAqB,GAAGd;AAAAA,MAAAA,CAClC;AAAA,MACDe,YAAY1H,QAAQ2H;AAAAA,IAAAA,GAEtB,UAAUtE,QACV,UACA,UACA,UACA,eACA,WACA,aACA,aAAa4C,iBAAiB,GAC9B,UAAU1B,cACV,gBAAgBiB,oBAChB,qBAAqBC,mBACrB,MAAK,YACL,eACA,cAAYhF,WACZ,mBACE,CAACD,SAASsG,MAAAA,MAAM/D,WAAW,OAAO,GAAGrC,cAAc,EAChDkH,KAAK,GAAG,EACRC,UAAUvI,QAEf,gBAAcqH,iBAAiB,OAAOrH,QACtC,qBAAmBuH,gBACnB,oBACE,CAAClG,eAAemG,MAAAA,MAAM/D,WAAW,aAAa,GAAGnC,eAAe,EAC7DgH,KAAK,GAAG,EACRC,KAAAA,KAAUvI,QAEf,SACA,QACA,mBAAmB8E,iBACnB,GAAID,wBAEJ,UAAA+B,2BAAAA,IAAC4B,KAAAA,kBACC,IAAIhB,MAAAA,MAAM/D,WAAW,QAAQ,GAC7B,SAAS;AAAA,MACPgF,UAAU/H,QAAQ+H;AAAAA,MAClBC,uBAAuBhI,QAAQgI;AAAAA,IACjC,GACA,QAAQpE,gBACR,aACA,YACA,UAAUiB,iBACV,UAAUS,cACV,QACA,4BACA,aACA,uBACA,cAAY7E,WACZ,mBAAiB+F,WAAWM,MAAAA,MAAM/D,WAAW,OAAO,IAAIzD,QACxD,QACA,WACA,aACImD,GAAAA,UAAAA,CAAU,EAElB,CAAA;AAAA,IACCiE,gBACCR,2BAAA,IAAC+B,YACC,eAAA,EAAA,IAAInB,MAAAA,MAAM/D,WAAW,OAAO,GAC5B,eAAa,MACb,WAAW/C,QAAQkI,OAElB9E,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;;;"}