@hitachivantara/uikit-react-core 5.42.1 → 5.43.0

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 (139) hide show
  1. package/dist/cjs/Accordion/Accordion.cjs +3 -1
  2. package/dist/cjs/Accordion/Accordion.cjs.map +1 -1
  3. package/dist/cjs/AppSwitcher/AppSwitcher.cjs +3 -3
  4. package/dist/cjs/AppSwitcher/AppSwitcher.cjs.map +1 -1
  5. package/dist/cjs/BaseDropdown/BaseDropdown.cjs +1 -0
  6. package/dist/cjs/BaseDropdown/BaseDropdown.cjs.map +1 -1
  7. package/dist/cjs/Button/Button.styles.cjs +1 -0
  8. package/dist/cjs/Button/Button.styles.cjs.map +1 -1
  9. package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs.map +1 -1
  10. package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs.map +1 -1
  11. package/dist/cjs/Calendar/model.cjs.map +1 -1
  12. package/dist/cjs/Calendar/utils.cjs.map +1 -1
  13. package/dist/cjs/Card/Card.cjs +1 -1
  14. package/dist/cjs/Card/Card.cjs.map +1 -1
  15. package/dist/cjs/ColorPicker/Fields/Fields.cjs.map +1 -1
  16. package/dist/cjs/DatePicker/useVisibleDate.cjs.map +1 -1
  17. package/dist/cjs/Dialog/Content/Content.cjs +3 -1
  18. package/dist/cjs/Dialog/Content/Content.cjs.map +1 -1
  19. package/dist/cjs/Drawer/Drawer.cjs +2 -4
  20. package/dist/cjs/Drawer/Drawer.cjs.map +1 -1
  21. package/dist/cjs/FileUploader/DropZone/DropZone.cjs +3 -4
  22. package/dist/cjs/FileUploader/DropZone/DropZone.cjs.map +1 -1
  23. package/dist/cjs/Focus/utils.cjs.map +1 -1
  24. package/dist/cjs/Forms/FormElement/utils/FormUtils.cjs.map +1 -1
  25. package/dist/cjs/Header/Navigation/utils/FocusContext.cjs +1 -2
  26. package/dist/cjs/Header/Navigation/utils/FocusContext.cjs.map +1 -1
  27. package/dist/cjs/Link/Link.cjs +6 -5
  28. package/dist/cjs/Link/Link.cjs.map +1 -1
  29. package/dist/cjs/List/utils.cjs.map +1 -1
  30. package/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.cjs.map +1 -1
  31. package/dist/cjs/ScrollTo/useScrollTo.cjs.map +1 -1
  32. package/dist/cjs/Slider/Slider.cjs +1 -1
  33. package/dist/cjs/Slider/Slider.cjs.map +1 -1
  34. package/dist/cjs/Snackbar/Snackbar.cjs +8 -8
  35. package/dist/cjs/Snackbar/Snackbar.cjs.map +1 -1
  36. package/dist/cjs/Stack/Stack.cjs.map +1 -1
  37. package/dist/cjs/Switch/Switch.cjs.map +1 -1
  38. package/dist/cjs/Table/Table.cjs.map +1 -1
  39. package/dist/cjs/Table/TableCell/TableCell.styles.cjs +2 -5
  40. package/dist/cjs/Table/TableCell/TableCell.styles.cjs.map +1 -1
  41. package/dist/cjs/Table/TableHeader/utils.cjs +1 -3
  42. package/dist/cjs/Table/TableHeader/utils.cjs.map +1 -1
  43. package/dist/cjs/Table/hooks/useTable.cjs +0 -4
  44. package/dist/cjs/Table/hooks/useTable.cjs.map +1 -1
  45. package/dist/cjs/Tag/Tag.cjs +7 -8
  46. package/dist/cjs/Tag/Tag.cjs.map +1 -1
  47. package/dist/cjs/TextArea/TextArea.cjs +2 -2
  48. package/dist/cjs/TextArea/TextArea.cjs.map +1 -1
  49. package/dist/cjs/TimeAgo/formatUtils.cjs.map +1 -1
  50. package/dist/cjs/TimeAgo/useTimeAgo.cjs +1 -1
  51. package/dist/cjs/TimeAgo/useTimeAgo.cjs.map +1 -1
  52. package/dist/cjs/TimeAgo/useTimeout.cjs.map +1 -1
  53. package/dist/cjs/TimePicker/Placeholder.cjs.map +1 -1
  54. package/dist/cjs/Typography/Typography.styles.cjs +1 -0
  55. package/dist/cjs/Typography/Typography.styles.cjs.map +1 -1
  56. package/dist/cjs/hooks/useUniqueId.cjs +29 -4
  57. package/dist/cjs/hooks/useUniqueId.cjs.map +1 -1
  58. package/dist/cjs/index.cjs +0 -4
  59. package/dist/cjs/index.cjs.map +1 -1
  60. package/dist/cjs/utils/ConditionalWrapper.cjs +5 -1
  61. package/dist/cjs/utils/ConditionalWrapper.cjs.map +1 -1
  62. package/dist/cjs/utils/browser.cjs.map +1 -1
  63. package/dist/cjs/utils/focusableElementFinder.cjs.map +1 -1
  64. package/dist/cjs/utils/getComponentName.cjs.map +1 -1
  65. package/dist/cjs/utils/hexToRgbA.cjs.map +1 -1
  66. package/dist/cjs/utils/multiSelectionEventHandler.cjs.map +1 -1
  67. package/dist/cjs/utils/setId.cjs.map +1 -1
  68. package/dist/cjs/utils/theme.cjs.map +1 -1
  69. package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
  70. package/dist/esm/Accordion/Accordion.mjs +3 -1
  71. package/dist/esm/Accordion/Accordion.mjs.map +1 -1
  72. package/dist/esm/AppSwitcher/AppSwitcher.mjs +3 -3
  73. package/dist/esm/AppSwitcher/AppSwitcher.mjs.map +1 -1
  74. package/dist/esm/BaseDropdown/BaseDropdown.mjs +1 -0
  75. package/dist/esm/BaseDropdown/BaseDropdown.mjs.map +1 -1
  76. package/dist/esm/Button/Button.styles.mjs +1 -0
  77. package/dist/esm/Button/Button.styles.mjs.map +1 -1
  78. package/dist/esm/Calendar/SingleCalendar/CalendarCell.mjs.map +1 -1
  79. package/dist/esm/Calendar/SingleCalendar/SingleCalendar.mjs.map +1 -1
  80. package/dist/esm/Calendar/model.mjs.map +1 -1
  81. package/dist/esm/Calendar/utils.mjs.map +1 -1
  82. package/dist/esm/Card/Card.mjs +2 -2
  83. package/dist/esm/Card/Card.mjs.map +1 -1
  84. package/dist/esm/ColorPicker/Fields/Fields.mjs.map +1 -1
  85. package/dist/esm/DatePicker/useVisibleDate.mjs.map +1 -1
  86. package/dist/esm/Dialog/Content/Content.mjs +3 -1
  87. package/dist/esm/Dialog/Content/Content.mjs.map +1 -1
  88. package/dist/esm/Drawer/Drawer.mjs +2 -4
  89. package/dist/esm/Drawer/Drawer.mjs.map +1 -1
  90. package/dist/esm/FileUploader/DropZone/DropZone.mjs +3 -4
  91. package/dist/esm/FileUploader/DropZone/DropZone.mjs.map +1 -1
  92. package/dist/esm/Focus/utils.mjs.map +1 -1
  93. package/dist/esm/Forms/FormElement/utils/FormUtils.mjs.map +1 -1
  94. package/dist/esm/Header/Navigation/utils/FocusContext.mjs +1 -2
  95. package/dist/esm/Header/Navigation/utils/FocusContext.mjs.map +1 -1
  96. package/dist/esm/Link/Link.mjs +6 -5
  97. package/dist/esm/Link/Link.mjs.map +1 -1
  98. package/dist/esm/List/utils.mjs.map +1 -1
  99. package/dist/esm/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.mjs.map +1 -1
  100. package/dist/esm/ScrollTo/useScrollTo.mjs.map +1 -1
  101. package/dist/esm/Slider/Slider.mjs +1 -1
  102. package/dist/esm/Slider/Slider.mjs.map +1 -1
  103. package/dist/esm/Snackbar/Snackbar.mjs +8 -8
  104. package/dist/esm/Snackbar/Snackbar.mjs.map +1 -1
  105. package/dist/esm/Stack/Stack.mjs.map +1 -1
  106. package/dist/esm/Switch/Switch.mjs.map +1 -1
  107. package/dist/esm/Table/Table.mjs.map +1 -1
  108. package/dist/esm/Table/TableCell/TableCell.styles.mjs +2 -5
  109. package/dist/esm/Table/TableCell/TableCell.styles.mjs.map +1 -1
  110. package/dist/esm/Table/TableHeader/utils.mjs +1 -3
  111. package/dist/esm/Table/TableHeader/utils.mjs.map +1 -1
  112. package/dist/esm/Table/hooks/useTable.mjs +0 -2
  113. package/dist/esm/Table/hooks/useTable.mjs.map +1 -1
  114. package/dist/esm/Tag/Tag.mjs +7 -8
  115. package/dist/esm/Tag/Tag.mjs.map +1 -1
  116. package/dist/esm/TextArea/TextArea.mjs +2 -2
  117. package/dist/esm/TextArea/TextArea.mjs.map +1 -1
  118. package/dist/esm/TimeAgo/formatUtils.mjs.map +1 -1
  119. package/dist/esm/TimeAgo/useTimeAgo.mjs +1 -1
  120. package/dist/esm/TimeAgo/useTimeAgo.mjs.map +1 -1
  121. package/dist/esm/TimeAgo/useTimeout.mjs.map +1 -1
  122. package/dist/esm/TimePicker/Placeholder.mjs.map +1 -1
  123. package/dist/esm/Typography/Typography.styles.mjs +1 -0
  124. package/dist/esm/Typography/Typography.styles.mjs.map +1 -1
  125. package/dist/esm/hooks/useUniqueId.mjs +11 -3
  126. package/dist/esm/hooks/useUniqueId.mjs.map +1 -1
  127. package/dist/esm/index.mjs +1 -2
  128. package/dist/esm/utils/ConditionalWrapper.mjs +5 -1
  129. package/dist/esm/utils/ConditionalWrapper.mjs.map +1 -1
  130. package/dist/esm/utils/browser.mjs.map +1 -1
  131. package/dist/esm/utils/focusableElementFinder.mjs.map +1 -1
  132. package/dist/esm/utils/getComponentName.mjs.map +1 -1
  133. package/dist/esm/utils/hexToRgbA.mjs.map +1 -1
  134. package/dist/esm/utils/multiSelectionEventHandler.mjs.map +1 -1
  135. package/dist/esm/utils/setId.mjs.map +1 -1
  136. package/dist/esm/utils/theme.mjs.map +1 -1
  137. package/dist/esm/utils/wrapperTooltip.mjs.map +1 -1
  138. package/dist/types/index.d.ts +19 -37
  139. package/package.json +5 -5
@@ -1 +1 @@
1
- {"version":3,"file":"Stack.mjs","sources":["../../../src/Stack/Stack.tsx"],"sourcesContent":["import React, { useMemo, useRef, useCallback } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\n\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvFocus } from \"../Focus\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" | \"row\" | Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. */\n direction?: HvStackDirection;\n /** The spacing between elements of the stack. */\n spacing?: HvBreakpoints;\n /** The divider component to be used between the stack elements.\n * - If `true` the Material-UI Divider component will be used.\n * - If a React node is passed then the custom divider will be used.\n */\n divider?: boolean | React.ReactNode;\n /** The properties to pass on to the Material-UI component. */\n dividerProps?: MuiDividerProps;\n /** Sets whether or not there should be arrow navigation between the stack elements. */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvStackClasses;\n}\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n * `direction` property is a string and a valid direction then we\n * use it. If it's an object with multiple directions by breakpoint\n * we use the appropriate one or search for the nearest breakpoint\n * smaller than the current one to use.\n */\nconst getDirection = (direction, width, breakpoints) => {\n if (isString(direction)) return direction;\n\n for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n if (direction[breakpoints[i]] !== undefined) {\n return direction[breakpoints[i]];\n }\n }\n return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n */\nexport const HvStack = (props: HvStackProps) => {\n const {\n classes: classesProp,\n className,\n children,\n direction = \"column\",\n spacing = \"sm\",\n divider = false,\n withNavigation = false,\n dividerProps = {},\n ...others\n } = useDefaultProps(\"HvStack\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const width = useWidth();\n const containerRef = useRef(null);\n const { breakpoints } = useTheme();\n\n const processedDirection = useMemo(\n () => getDirection(direction, width, breakpoints.keys),\n [direction, width, breakpoints]\n );\n\n /**\n * @returns {node} - The divider component to use. If the property `divider` is\n * set to `true` then the Material-UI divider is used, otherwise\n * we use the custom divider the user passed.\n */\n const getDividerComponent = useCallback(() => {\n if (isBoolean(divider) && divider) {\n return (\n <MuiDivider\n orientation={\n processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n }\n flexItem={processedDirection === \"row\"}\n role=\"separator\"\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [divider, dividerProps, processedDirection]);\n\n return (\n <div\n ref={containerRef}\n className={cx(\n classes.root,\n classes[processedDirection],\n classes[spacing],\n className\n )}\n {...others}\n >\n {React.Children.map(children, (child, i) => {\n return (\n <>\n {divider && i !== 0 && getDividerComponent()}\n {withNavigation ? (\n <HvFocus\n rootRef={containerRef}\n focusDisabled={false}\n strategy=\"grid\"\n navigationJump={\n processedDirection === \"column\"\n ? 1\n : React.Children.count(children) || 0\n }\n filterClass=\"child\"\n >\n <div className=\"child\">{child}</div>\n </HvFocus>\n ) : (\n child\n )}\n </>\n );\n })}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAoDA,MAAM,eAAe,CAAC,WAAW,OAAO,gBAAgB;AACtD,MAAI,SAAS,SAAS;AAAU,WAAA;AAEvB,WAAA,IAAI,YAAY,QAAQ,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG;AACvD,QAAI,UAAU,YAAY,CAAC,CAAC,MAAM,QAAW;AACpC,aAAA,UAAU,YAAY,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,eAAe,CAAC;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,QAAQ;AACR,QAAA,eAAe,OAAO,IAAI;AAC1B,QAAA,EAAE,gBAAgB;AAExB,QAAM,qBAAqB;AAAA,IACzB,MAAM,aAAa,WAAW,OAAO,YAAY,IAAI;AAAA,IACrD,CAAC,WAAW,OAAO,WAAW;AAAA,EAAA;AAQ1B,QAAA,sBAAsB,YAAY,MAAM;AACxC,QAAA,UAAU,OAAO,KAAK,SAAS;AAE/B,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aACE,uBAAuB,WAAW,eAAe;AAAA,UAEnD,UAAU,uBAAuB;AAAA,UACjC,MAAK;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AACO,WAAA;AAAA,EACN,GAAA,CAAC,SAAS,cAAc,kBAAkB,CAAC;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,kBAAkB;AAAA,QAC1B,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,MAAM;AAC1C,eAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAW,WAAA,MAAM,KAAK,oBAAoB;AAAA,UAC1C,iBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAS;AAAA,cACT,gBACE,uBAAuB,WACnB,IACAA,eAAM,SAAS,MAAM,QAAQ,KAAK;AAAA,cAExC,aAAY;AAAA,cAEZ,UAAC,oBAAA,OAAA,EAAI,WAAU,SAAS,UAAM,OAAA;AAAA,YAAA;AAAA,UAAA,IAGhC;AAAA,QAEJ,EAAA,CAAA;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"Stack.mjs","sources":["../../../src/Stack/Stack.tsx"],"sourcesContent":["import React, { useMemo, useRef, useCallback } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\n\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvFocus } from \"../Focus\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" | \"row\" | Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. */\n direction?: HvStackDirection;\n /** The spacing between elements of the stack. */\n spacing?: HvBreakpoints;\n /** The divider component to be used between the stack elements.\n * - If `true` the Material-UI Divider component will be used.\n * - If a React node is passed then the custom divider will be used.\n */\n divider?: boolean | React.ReactNode;\n /** The properties to pass on to the Material-UI component. */\n dividerProps?: MuiDividerProps;\n /** Sets whether or not there should be arrow navigation between the stack elements. */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvStackClasses;\n}\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n * `direction` property is a string and a valid direction then we\n * use it. If it's an object with multiple directions by breakpoint\n * we use the appropriate one or search for the nearest breakpoint\n * smaller than the current one to use.\n */\nconst getDirection = (direction: any, width: any, breakpoints: any) => {\n if (isString(direction)) return direction;\n\n for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n if (direction[breakpoints[i]] !== undefined) {\n return direction[breakpoints[i]];\n }\n }\n return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n */\nexport const HvStack = (props: HvStackProps) => {\n const {\n classes: classesProp,\n className,\n children,\n direction = \"column\",\n spacing = \"sm\",\n divider = false,\n withNavigation = false,\n dividerProps = {},\n ...others\n } = useDefaultProps(\"HvStack\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const width = useWidth();\n const containerRef = useRef(null);\n const { breakpoints } = useTheme();\n\n const processedDirection = useMemo(\n () => getDirection(direction, width, breakpoints.keys),\n [direction, width, breakpoints]\n );\n\n /**\n * @returns {node} - The divider component to use. If the property `divider` is\n * set to `true` then the Material-UI divider is used, otherwise\n * we use the custom divider the user passed.\n */\n const getDividerComponent = useCallback(() => {\n if (isBoolean(divider) && divider) {\n return (\n <MuiDivider\n orientation={\n processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n }\n flexItem={processedDirection === \"row\"}\n role=\"separator\"\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [divider, dividerProps, processedDirection]);\n\n return (\n <div\n ref={containerRef}\n className={cx(\n classes.root,\n classes[processedDirection],\n classes[spacing],\n className\n )}\n {...others}\n >\n {React.Children.map(children, (child, i) => {\n return (\n <>\n {divider && i !== 0 && getDividerComponent()}\n {withNavigation ? (\n <HvFocus\n rootRef={containerRef}\n focusDisabled={false}\n strategy=\"grid\"\n navigationJump={\n processedDirection === \"column\"\n ? 1\n : React.Children.count(children) || 0\n }\n filterClass=\"child\"\n >\n <div className=\"child\">{child}</div>\n </HvFocus>\n ) : (\n child\n )}\n </>\n );\n })}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAoDA,MAAM,eAAe,CAAC,WAAgB,OAAY,gBAAqB;AACrE,MAAI,SAAS,SAAS;AAAU,WAAA;AAEvB,WAAA,IAAI,YAAY,QAAQ,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG;AACvD,QAAI,UAAU,YAAY,CAAC,CAAC,MAAM,QAAW;AACpC,aAAA,UAAU,YAAY,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,eAAe,CAAC;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,QAAQ;AACR,QAAA,eAAe,OAAO,IAAI;AAC1B,QAAA,EAAE,gBAAgB;AAExB,QAAM,qBAAqB;AAAA,IACzB,MAAM,aAAa,WAAW,OAAO,YAAY,IAAI;AAAA,IACrD,CAAC,WAAW,OAAO,WAAW;AAAA,EAAA;AAQ1B,QAAA,sBAAsB,YAAY,MAAM;AACxC,QAAA,UAAU,OAAO,KAAK,SAAS;AAE/B,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aACE,uBAAuB,WAAW,eAAe;AAAA,UAEnD,UAAU,uBAAuB;AAAA,UACjC,MAAK;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AACO,WAAA;AAAA,EACN,GAAA,CAAC,SAAS,cAAc,kBAAkB,CAAC;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,kBAAkB;AAAA,QAC1B,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,MAAM;AAC1C,eAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAW,WAAA,MAAM,KAAK,oBAAoB;AAAA,UAC1C,iBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAS;AAAA,cACT,gBACE,uBAAuB,WACnB,IACAA,eAAM,SAAS,MAAM,QAAQ,KAAK;AAAA,cAExC,aAAY;AAAA,cAEZ,UAAC,oBAAA,OAAA,EAAI,WAAU,SAAS,UAAM,OAAA;AAAA,YAAA;AAAA,UAAA,IAGhC;AAAA,QAEJ,EAAA,CAAA;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.mjs","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n HvWarningText,\n HvLabelProps,\n HvFormStatus,\n HvFormElement,\n HvLabel,\n} from \"../Forms\";\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvSwitchClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The value of the form element.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\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 inputted via inputProps.\n */\n label?: React.ReactNode;\n /**\n * Properties passed on to the label element.\n */\n labelProps?: HvLabelProps;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: 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 `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\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?: string;\n /**\n * Identifies the element that provides an error message for the switch.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** @ignore */\n ref?: MuiSwitchProps[\"ref\"];\n /** @ignore */\n component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvswitch\");\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt, newChecked) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value]\n );\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: string | undefined;\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 required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Switch.mjs","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n HvWarningText,\n HvLabelProps,\n HvFormStatus,\n HvFormElement,\n HvLabel,\n} from \"../Forms\";\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvSwitchClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The value of the form element.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\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 inputted via inputProps.\n */\n label?: React.ReactNode;\n /**\n * Properties passed on to the label element.\n */\n labelProps?: HvLabelProps;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: 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 `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\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?: string;\n /**\n * Identifies the element that provides an error message for the switch.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** @ignore */\n ref?: MuiSwitchProps[\"ref\"];\n /** @ignore */\n component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvswitch\");\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value]\n );\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: string | undefined;\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 required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Table.mjs","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, TableHTMLAttributes, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport TableContext from \"./TableContext\";\nimport { staticClasses, useClasses } from \"./Table.styles\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n | \"center\"\n | \"inherit\"\n | \"justify\"\n | \"left\"\n | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n | \"checkbox\"\n | \"expand\"\n | \"actions\"\n | \"default\"\n | \"none\";\n\nexport interface HvTableProps extends TableHTMLAttributes<HTMLTableElement> {\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to `table`.\n *\n * When using non-table elements, layout is up to the developer using the component.\n */\n component?: React.ElementType;\n /** Content to be rendered */\n children: React.ReactNode;\n /** Whether the `HvTable` has a sticky header row. */\n stickyHeader?: boolean;\n /** Whether the `HvTable` has sticky columns. */\n stickyColumns?: boolean;\n /** Whether the `HvTable` has the list row styles or the default. */\n variant?: HvTableVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent) => {\n if (rootComponent === \"table\") {\n return {\n Table: \"table\",\n THead: \"thead\",\n TBody: \"tbody\",\n Tr: \"tr\",\n Th: \"th\",\n Td: \"td\",\n };\n }\n\n return {\n Table: rootComponent,\n THead: rootComponent,\n TBody: rootComponent,\n Tr: rootComponent,\n Th: rootComponent,\n Td: rootComponent,\n };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n const {\n classes: classesProp,\n className,\n component = defaultComponent,\n stickyHeader = false,\n stickyColumns = false,\n variant = \"default\",\n ...others\n } = useDefaultProps(\"HvTable\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const containerRef = useRef(ref);\n\n const components = useMemo(\n () => computeTablePartComponents(component),\n [component]\n );\n\n const tableContext = useMemo(\n () => ({ components, variant, containerRef }),\n [components, variant, containerRef]\n );\n\n const Table = useMemo(() => components.Table, [components]);\n\n return (\n <TableContext.Provider value={tableContext}>\n <Table\n ref={ref}\n role={component === defaultComponent ? null : \"table\"}\n className={cx(\n classes.root,\n {\n [classes.stickyHeader]: stickyHeader,\n [classes.stickyColumns]: stickyColumns,\n [classes.listRow]: variant === \"listrow\",\n },\n className\n )}\n {...others}\n />\n </TableContext.Provider>\n );\n});\n"],"names":[],"mappings":";;;;;;AA+CA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAAkB;AACpD,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}
1
+ {"version":3,"file":"Table.mjs","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, TableHTMLAttributes, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport TableContext from \"./TableContext\";\nimport { staticClasses, useClasses } from \"./Table.styles\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n | \"center\"\n | \"inherit\"\n | \"justify\"\n | \"left\"\n | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n | \"checkbox\"\n | \"expand\"\n | \"actions\"\n | \"default\"\n | \"none\";\n\nexport interface HvTableProps extends TableHTMLAttributes<HTMLTableElement> {\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to `table`.\n *\n * When using non-table elements, layout is up to the developer using the component.\n */\n component?: React.ElementType;\n /** Content to be rendered */\n children: React.ReactNode;\n /** Whether the `HvTable` has a sticky header row. */\n stickyHeader?: boolean;\n /** Whether the `HvTable` has sticky columns. */\n stickyColumns?: boolean;\n /** Whether the `HvTable` has the list row styles or the default. */\n variant?: HvTableVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent: React.ElementType<any>) => {\n if (rootComponent === \"table\") {\n return {\n Table: \"table\",\n THead: \"thead\",\n TBody: \"tbody\",\n Tr: \"tr\",\n Th: \"th\",\n Td: \"td\",\n };\n }\n\n return {\n Table: rootComponent,\n THead: rootComponent,\n TBody: rootComponent,\n Tr: rootComponent,\n Th: rootComponent,\n Td: rootComponent,\n };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n const {\n classes: classesProp,\n className,\n component = defaultComponent,\n stickyHeader = false,\n stickyColumns = false,\n variant = \"default\",\n ...others\n } = useDefaultProps(\"HvTable\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const containerRef = useRef(ref);\n\n const components = useMemo(\n () => computeTablePartComponents(component),\n [component]\n );\n\n const tableContext = useMemo(\n () => ({ components, variant, containerRef }),\n [components, variant, containerRef]\n );\n\n const Table = useMemo(() => components.Table, [components]);\n\n return (\n <TableContext.Provider value={tableContext}>\n <Table\n ref={ref}\n role={component === defaultComponent ? null : \"table\"}\n className={cx(\n classes.root,\n {\n [classes.stickyHeader]: stickyHeader,\n [classes.stickyColumns]: stickyColumns,\n [classes.listRow]: variant === \"listrow\",\n },\n className\n )}\n {...others}\n />\n </TableContext.Provider>\n );\n});\n"],"names":[],"mappings":";;;;;;AA+CA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}
@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
28
28
  ...theme.typography.body,
29
29
  fontFamily: theme.fontFamily.body,
30
30
  "&$sorted": {
31
- backgroundColor: sortedColor
31
+ backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`
32
32
  }
33
33
  },
34
34
  /** Styles applied to the cell when it's in the table footer. */
@@ -115,12 +115,9 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
115
115
  stickyColumn: {
116
116
  position: "sticky",
117
117
  zIndex: 2,
118
- background: theme.colors.atmo2,
118
+ backgroundColor: theme.colors.atmo2,
119
119
  "&$groupColumnMostRight+$stickyColumn": {
120
120
  borderLeft: 0
121
- },
122
- "&$sorted": {
123
- backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`
124
121
  }
125
122
  },
126
123
  /** Styles applied to the cell when it's part of the last sticky to the left column. */
@@ -1 +1 @@
1
- {"version":3,"file":"TableCell.styles.mjs","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst sortedColor = theme.alpha(\"primary\", 0.1);\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n /** Styles applied to the component root class. */\n root: {\n verticalAlign: \"inherit\",\n textAlign: \"left\",\n padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n theme.space.xs\n } - 3px ) ${theme.spacing(4)}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's in the table head. */\n head: {\n height: 52,\n verticalAlign: \"top\",\n\n backgroundColor: theme.colors.atmo1,\n borderTop: \"1px solid transparent\",\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n ...(theme.typography.label as CSSProperties),\n },\n /** Styles applied to the cell when it's in the table body. */\n body: {\n minHeight: 32,\n \"td&\": {\n height: 32,\n },\n backgroundColor: \"inherit\",\n ...(theme.typography.body as CSSProperties),\n fontFamily: theme.fontFamily.body,\n\n \"&$sorted\": {\n backgroundColor: sortedColor,\n },\n },\n /** Styles applied to the cell when it's in the table footer. */\n footer: {},\n /** Styles applied to the cell when it's part of a sorted column. */\n sorted: {},\n /** Styles applied to the component root when it is left aligned */\n alignLeft: {\n textAlign: \"left\",\n },\n /** Styles applied to the component root when it is center aligned */\n alignCenter: {\n textAlign: \"center\",\n },\n /** Styles applied to the component root when it is right aligned */\n alignRight: {\n textAlign: \"right\",\n flexDirection: \"row-reverse\",\n },\n /** Styles applied to the component root when it is justified */\n alignJustify: {\n textAlign: \"justify\",\n },\n\n /** Styles applied to the component root when its variant is none */\n variantNone: {\n padding: 0,\n },\n /** Styles applied to the component root when its variant is checkbox */\n variantCheckbox: {\n boxSizing: \"content-box\",\n padding: 0,\n width: 32,\n maxWidth: 32,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the component root when its variant is actions */\n variantActions: {\n boxSizing: \"content-box\",\n padding: 0,\n width: 32,\n maxWidth: 32,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the component root when its variant is expand */\n variantExpand: {\n paddingLeft: 0,\n paddingTop: 0,\n paddingBottom: 0,\n },\n /** Styles applied to the component root when its variant is list */\n variantList: {\n minHeight: 52,\n \"td&\": {\n height: 52,\n },\n padding: \"0, 0, 0, 32px\",\n border: 0,\n },\n /** Styles applied to the cell when its variant is list and the type is head. */\n variantListHead: {\n backgroundColor: \"inherit\",\n \"td&\": {\n height: 16,\n },\n },\n /** Styles applied to the cell when its variant is list and actions. */\n variantListactions: {\n verticalAlign: \"middle\",\n borderLeft: \"none\",\n paddingLeft: \"0\",\n textAlign: \"center\",\n width: 130,\n maxWidth: 130,\n },\n /** Styles applied to the cell when its variant is list and checkbox. */\n variantListcheckbox: {\n borderRight: \"none\",\n padding: 0,\n textAlign: \"center\",\n width: 34,\n maxWidth: 34,\n },\n /** Styles applied to the cell when it's part of a sticky column. */\n stickyColumn: {\n position: \"sticky\",\n zIndex: 2,\n background: theme.colors.atmo2,\n\n \"&$groupColumnMostRight+$stickyColumn\": {\n borderLeft: 0,\n },\n\n \"&$sorted\": {\n backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n },\n },\n /** Styles applied to the cell when it's part of the last sticky to the left column. */\n stickyColumnMostLeft: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's part of the first right sticky column. */\n stickyColumnLeastRight: {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n\n /** Styles applied to the cell when it's part of the first column in the group. */\n groupColumnMostLeft: {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n \"&:first-of-type\": {\n borderLeft: 0,\n },\n },\n /** Styles applied to the cell when it's part of the last column in the group. */\n groupColumnMostRight: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n // due to the \":has()\" selector not being supported in browsers,\n // this need to be managed with inline styles\n // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n \"&:last-child\": {\n borderRight: 0,\n },\n\n \"&+:not($stickyColumn)\": {\n borderLeft: 0,\n },\n },\n\n /** Styles applied to the cell when it's part of a resizable column. */\n resizable: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's part of a resizing column. */\n resizing: {\n borderRight: `solid 2px ${theme.colors.secondary}`,\n },\n});\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TableCell.styles.mjs","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst sortedColor = theme.alpha(\"primary\", 0.1);\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n /** Styles applied to the component root class. */\n root: {\n verticalAlign: \"inherit\",\n textAlign: \"left\",\n padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n theme.space.xs\n } - 3px ) ${theme.spacing(4)}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's in the table head. */\n head: {\n height: 52,\n verticalAlign: \"top\",\n\n backgroundColor: theme.colors.atmo1,\n borderTop: \"1px solid transparent\",\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n ...(theme.typography.label as CSSProperties),\n },\n /** Styles applied to the cell when it's in the table body. */\n body: {\n minHeight: 32,\n \"td&\": {\n height: 32,\n },\n backgroundColor: \"inherit\",\n ...(theme.typography.body as CSSProperties),\n fontFamily: theme.fontFamily.body,\n\n \"&$sorted\": {\n backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n },\n },\n /** Styles applied to the cell when it's in the table footer. */\n footer: {},\n /** Styles applied to the cell when it's part of a sorted column. */\n sorted: {},\n /** Styles applied to the component root when it is left aligned */\n alignLeft: {\n textAlign: \"left\",\n },\n /** Styles applied to the component root when it is center aligned */\n alignCenter: {\n textAlign: \"center\",\n },\n /** Styles applied to the component root when it is right aligned */\n alignRight: {\n textAlign: \"right\",\n flexDirection: \"row-reverse\",\n },\n /** Styles applied to the component root when it is justified */\n alignJustify: {\n textAlign: \"justify\",\n },\n\n /** Styles applied to the component root when its variant is none */\n variantNone: {\n padding: 0,\n },\n /** Styles applied to the component root when its variant is checkbox */\n variantCheckbox: {\n boxSizing: \"content-box\",\n padding: 0,\n width: 32,\n maxWidth: 32,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the component root when its variant is actions */\n variantActions: {\n boxSizing: \"content-box\",\n padding: 0,\n width: 32,\n maxWidth: 32,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the component root when its variant is expand */\n variantExpand: {\n paddingLeft: 0,\n paddingTop: 0,\n paddingBottom: 0,\n },\n /** Styles applied to the component root when its variant is list */\n variantList: {\n minHeight: 52,\n \"td&\": {\n height: 52,\n },\n padding: \"0, 0, 0, 32px\",\n border: 0,\n },\n /** Styles applied to the cell when its variant is list and the type is head. */\n variantListHead: {\n backgroundColor: \"inherit\",\n \"td&\": {\n height: 16,\n },\n },\n /** Styles applied to the cell when its variant is list and actions. */\n variantListactions: {\n verticalAlign: \"middle\",\n borderLeft: \"none\",\n paddingLeft: \"0\",\n textAlign: \"center\",\n width: 130,\n maxWidth: 130,\n },\n /** Styles applied to the cell when its variant is list and checkbox. */\n variantListcheckbox: {\n borderRight: \"none\",\n padding: 0,\n textAlign: \"center\",\n width: 34,\n maxWidth: 34,\n },\n /** Styles applied to the cell when it's part of a sticky column. */\n stickyColumn: {\n position: \"sticky\",\n zIndex: 2,\n backgroundColor: theme.colors.atmo2,\n\n \"&$groupColumnMostRight+$stickyColumn\": {\n borderLeft: 0,\n },\n },\n /** Styles applied to the cell when it's part of the last sticky to the left column. */\n stickyColumnMostLeft: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's part of the first right sticky column. */\n stickyColumnLeastRight: {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n\n /** Styles applied to the cell when it's part of the first column in the group. */\n groupColumnMostLeft: {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n \"&:first-of-type\": {\n borderLeft: 0,\n },\n },\n /** Styles applied to the cell when it's part of the last column in the group. */\n groupColumnMostRight: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n // due to the \":has()\" selector not being supported in browsers,\n // this need to be managed with inline styles\n // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n \"&:last-child\": {\n borderRight: 0,\n },\n\n \"&+:not($stickyColumn)\": {\n borderLeft: 0,\n },\n },\n\n /** Styles applied to the cell when it's part of a resizable column. */\n resizable: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's part of a resizing column. */\n resizing: {\n borderRight: `solid 2px ${theme.colors.secondary}`,\n },\n});\n"],"names":[],"mappings":"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"}
@@ -10,9 +10,7 @@ const getSortIcon = (dir) => {
10
10
  }
11
11
  };
12
12
  const isParagraph = (children) => {
13
- if (typeof children === "string" && /\s/.test(children))
14
- return true;
15
- return false;
13
+ return typeof children === "string" && /\s/.test(children);
16
14
  };
17
15
  export {
18
16
  getSortIcon,
@@ -1 +1 @@
1
- {"version":3,"file":"utils.mjs","sources":["../../../../src/Table/TableHeader/utils.ts"],"sourcesContent":["import {\n SortXS,\n SortAscendingXS,\n SortDescendingXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport const getSortIcon = (dir) => {\n switch (dir) {\n case \"ascending\":\n return SortAscendingXS;\n case \"descending\":\n return SortDescendingXS;\n default:\n return SortXS;\n }\n};\n\nexport const getSortDir = (sortDirection) => {\n switch (sortDirection) {\n case \"asc\":\n return \"ascending\";\n case \"desc\":\n return \"descending\";\n default:\n return null;\n }\n};\n\nexport const isParagraph = (children) => {\n if (typeof children === \"string\" && /\\s/.test(children)) return true;\n return false;\n};\n"],"names":[],"mappings":";AAMa,MAAA,cAAc,CAAC,QAAQ;AAClC,UAAQ,KAAK;AAAA,IACX,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF;AAaa,MAAA,cAAc,CAAC,aAAa;AACvC,MAAI,OAAO,aAAa,YAAY,KAAK,KAAK,QAAQ;AAAU,WAAA;AACzD,SAAA;AACT;"}
1
+ {"version":3,"file":"utils.mjs","sources":["../../../../src/Table/TableHeader/utils.ts"],"sourcesContent":["import {\n SortXS,\n SortAscendingXS,\n SortDescendingXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport const getSortIcon = (dir?: string | false) => {\n switch (dir) {\n case \"ascending\":\n return SortAscendingXS;\n case \"descending\":\n return SortDescendingXS;\n default:\n return SortXS;\n }\n};\n\nexport const isParagraph = (children: React.ReactNode) => {\n return typeof children === \"string\" && /\\s/.test(children);\n};\n"],"names":[],"mappings":";AAMa,MAAA,cAAc,CAAC,QAAyB;AACnD,UAAQ,KAAK;AAAA,IACX,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF;AAEa,MAAA,cAAc,CAAC,aAA8B;AACxD,SAAO,OAAO,aAAa,YAAY,KAAK,KAAK,QAAQ;AAC3D;"}
@@ -1,6 +1,5 @@
1
1
  import { useMemo } from "react";
2
2
  import { useTable, usePagination, useExpanded, useSortBy, useResizeColumns } from "react-table";
3
- import { PluginHook } from "react-table";
4
3
  import useHvTableStyles from "./useTableStyles.mjs";
5
4
  const toTitleCase = (str) => {
6
5
  return str.replace(/([^A-Z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").toLowerCase().replace(/(^\w|\b\w)/g, (m) => m.toUpperCase()).replace(/\s+/g, " ").trim();
@@ -75,7 +74,6 @@ function useHvTable(options, ...plugins) {
75
74
  );
76
75
  }
77
76
  export {
78
- PluginHook as HvTablePluginHook,
79
77
  useHvTable as default
80
78
  };
81
79
  //# sourceMappingURL=useTable.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTable.mjs","sources":["../../../../src/Table/hooks/useTable.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n useTable,\n usePagination,\n useExpanded,\n useSortBy,\n useResizeColumns,\n Cell,\n ColumnInstance,\n ColumnInterface,\n Hooks,\n Renderer,\n Row,\n TableCellProps,\n TableFooterProps,\n TableHeaderProps,\n TableInstance,\n TableOptions,\n TableProps,\n TableRowProps,\n TableState,\n UseColumnOrderInstanceProps,\n UseColumnOrderState,\n UseExpandedHooks,\n UseExpandedInstanceProps,\n UseExpandedOptions,\n UseExpandedState,\n UseFiltersColumnOptions,\n UseFiltersColumnProps,\n UseFiltersInstanceProps,\n UseFiltersOptions,\n UseFiltersState,\n UseGlobalFiltersInstanceProps,\n UseGlobalFiltersOptions,\n UseGlobalFiltersState,\n UseGroupByCellProps,\n UseGroupByColumnOptions,\n UseGroupByColumnProps,\n UseGroupByHooks,\n UseGroupByInstanceProps,\n UseGroupByOptions,\n UseGroupByRowProps,\n UseGroupByState,\n UsePaginationInstanceProps,\n UsePaginationOptions,\n UsePaginationState,\n UseResizeColumnsColumnOptions,\n UseResizeColumnsColumnProps,\n UseResizeColumnsOptions,\n UseResizeColumnsState,\n UseSortByColumnOptions,\n UseSortByColumnProps,\n UseSortByHooks,\n UseSortByInstanceProps,\n UseSortByOptions,\n UseSortByState,\n UseRowStateState,\n UseRowStateOptions,\n UseGlobalFiltersColumnOptions,\n UseRowStateInstanceProps,\n UseRowStateRowProps,\n UseTableHeaderGroupProps,\n PluginHook,\n ActionType,\n ReducerTableState,\n} from \"react-table\";\n\nimport useHvTableStyles, {\n UseHvTableStylesTableOptions,\n UseHvTableStylesColumnOptions,\n UseHvTableStylesTableCellProps,\n UseHvTableStylesTableRowProps,\n} from \"./useTableStyles\";\nimport {\n UseHvTableStickyCellProps,\n UseHvTableStickyColumnProps,\n UseHvTableStickyHooks,\n UseHvTableStickyTableInstance,\n UseHvTableStickyTableOptions,\n UseHvTableStickyTableProps,\n} from \"./useSticky\";\nimport { UseHvSortByColumnProps, UseHvSortByTableCellProps } from \"./useSortBy\";\nimport {\n UseHvRowSelectionHooks,\n UseHvRowSelectionRowInstance,\n UseHvRowSelectionState,\n UseHvRowSelectionTableInstance,\n UseHvRowSelectionTableOptions,\n UseHvRowSelectionTableRowProps,\n} from \"./useRowSelection\";\nimport {\n UseHvPaginationHooks,\n UseHvPaginationTableInstance,\n} from \"./usePagination\";\nimport {\n UseHvBulkActionsHooks,\n UseHvBulkActionsTableInstanceProps,\n UseHvBulkActionsTableOptions,\n} from \"./useBulkActions\";\nimport {\n UseHvRowExpandTableOptions,\n UseHvRowExpandRowInstance,\n UseHvRowExpandTableRowProps,\n} from \"./useRowExpand\";\nimport {\n UseHvHeaderGroupsColumnProps,\n UseHvHeaderGroupsCellProps,\n UseHvHeaderGroupsInstance,\n} from \"./useHeaderGroups\";\nimport {\n UseHvResizeColumnProps,\n UseHvResizeTableCellProps,\n} from \"./useResizeColumns\";\nimport { HvTableRowProps } from \"../TableRow\";\nimport { HvTableProps } from \"../Table\";\nimport { HvTableCellProps } from \"../TableCell\";\nimport { HvTableHeaderProps } from \"../TableHeader\";\n\n// #region ##### TYPES #####\n\ntype Accessor<D extends object> = (\n originalRow: D,\n index: number,\n sub: {\n subRows: D[];\n depth: number;\n data: D[];\n }\n) => CellValue;\n\ntype ValueOf<T> = T[keyof T];\ntype StringKey<D> = Extract<keyof D, string>;\ntype IdType<D> = StringKey<D> | string;\ntype CellValue<V = any> = V;\n\ntype HvHeaderProps<D extends object = Record<string, unknown>> =\n HvTableInstance<D> & {\n column: HvColumnInstance<D>;\n };\n\ninterface HvMetaBase<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> {\n instance: HvTableInstance<D, H>;\n userProps: any;\n}\n\nexport type HvMeta<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n Extension = never,\n M = HvMetaBase<D, H>\n> = [Extension] extends [never] ? M : M & Extension;\n\nexport type HvPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n Props extends object = Record<string, unknown>,\n T extends object = never,\n P = Partial<Props>\n> = ((props: P, meta: HvMeta<D, H, T>) => P | P[]) | P | P[];\n\nexport type HvTableHeaderRenderer<D extends object = Record<string, unknown>> =\n Renderer<HvHeaderProps<D>>;\n\ntype HvFooterProps<D extends object = Record<string, unknown>> =\n HvTableInstance<D> & {\n column: HvColumnInstance<D>;\n };\n\ninterface HvHeaderGroup<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends HvColumnInstance<D, H>,\n Omit<UseTableHeaderGroupProps<D>, \"headers\"> {\n headers: Array<HvHeaderGroup<D, H>>;\n}\n\ntype HvRowPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableRowProps, { row: HvRowInstance<D, H> }>;\n\ntype HvTablePropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableProps>;\n\ntype HvCellPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableCellProps, { cell: HvCellInstance<D, H> }>;\n\ntype HvHeaderPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableHeaderProps, { column: HvHeaderGroup<D, H> }>;\n\ntype HvFooterPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableFooterProps, { column: HvHeaderGroup<D, H> }>;\n\nexport interface HvCellProps<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n V = any\n> extends HvTableInstance<D, H> {\n column: HvColumnInstance<D, H>;\n row: HvRowInstance<D, H>;\n cell: HvCellInstance<D, H, V>;\n value: CellValue<V>;\n}\n\nexport type HvTableDefinitionConfig<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableOptions<D, H>;\n\ninterface HvColumnInterfaceBasedOnValue<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n V = any\n> {\n Cell?: Renderer<HvCellProps<D, H, V>>;\n}\n\ninterface HvColumnGroupInterface<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> {\n columns: Array<HvTableColumnConfig<D, H>>;\n}\n\ntype HvColumnGroup<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableColumnOptions<D, H> &\n HvColumnGroupInterface<D, H> &\n (\n | { Header: H }\n | ({ id: IdType<D> } & {\n Header: H;\n })\n ) & { accessor?: Accessor<D> };\n\ntype HvColumnWithStrictAccessor<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableColumnOptions<D, H> &\n ValueOf<{\n [K in keyof D]: {\n accessor: K;\n } & HvColumnInterfaceBasedOnValue<D, H, D[K]>;\n }>;\n\ntype HvColumnWithLooseAccessor<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableColumnOptions<D, H> &\n HvColumnInterfaceBasedOnValue<D, H> &\n (\n | { Header: H }\n | { id: IdType<D> }\n | { accessor: keyof D extends never ? IdType<D> : never }\n ) & {\n accessor?: keyof D extends never ? IdType<D> | Accessor<D> : Accessor<D>;\n };\n\nexport type HvTableColumnConfig<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> =\n | HvColumnGroup<D, H>\n | HvColumnWithLooseAccessor<D, H>\n | HvColumnWithStrictAccessor<D, H>;\n\n// #region HOOKS\nexport interface HvHooks<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<Hooks<D>, \"useOptions\">,\n Partial<UseExpandedHooks<D>>,\n Partial<UseGroupByHooks<D>>,\n Partial<UseSortByHooks<D>>,\n Partial<UseHvRowSelectionHooks<D>>,\n Partial<UseHvTableStickyHooks<D>>,\n Partial<UseHvPaginationHooks<D>>,\n Partial<UseHvBulkActionsHooks<D>> {\n useOptions: Array<\n (\n options: HvTableOptions<D, H>,\n args: HvTableOptions<D, H>\n ) => HvTableOptions<D, H>\n >;\n stateReducers: Array<\n (\n newState: HvTableState<D>,\n action: ActionType,\n previousState?: HvTableState<D>,\n instance?: HvTableState<D>\n ) => ReducerTableState<D> | undefined\n >;\n columns: Array<\n (\n columns: Array<HvTableColumnConfig<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvTableColumnConfig<D, H>>\n >;\n allColumns: Array<\n (\n allColumns: Array<HvColumnInstance<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvTableColumnConfig<D, H>>\n >;\n visibleColumns: Array<\n (\n allColumns: Array<HvColumnInstance<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvTableColumnConfig<D, H>>\n >;\n headerGroups: Array<\n (\n allColumns: Array<HvHeaderGroup<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvHeaderGroup<D, H>>\n >;\n useInstanceBeforeDimensions: Array<(instance: HvTableInstance<D, H>) => void>;\n useInstance: Array<(instance: HvTableInstance<D, H>) => void>;\n useControlledState: Array<\n (state: HvTableState<D>, meta: HvMeta<D, H>) => HvTableState<D>\n >;\n getTableProps: Array<HvTablePropGetter<D, H>>;\n getHeaderProps: Array<HvHeaderPropGetter<D>>;\n getFooterProps: Array<HvFooterPropGetter<D>>;\n getRowProps: Array<HvRowPropGetter<D>>;\n getCellProps: Array<HvCellPropGetter<D>>;\n useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;\n}\n// #endregion\n\n// #region STATE\nexport interface HvTableState<D extends object = Record<string, unknown>>\n extends TableState<D>,\n Partial<UseColumnOrderState<D>>,\n Partial<UseExpandedState<D>>,\n Partial<UseFiltersState<D>>,\n Partial<UseGlobalFiltersState<D>>,\n Partial<UseGroupByState<D>>,\n Partial<UsePaginationState<D>>,\n Partial<UseResizeColumnsState<D>>,\n Partial<UseSortByState<D>>,\n Partial<UseRowStateState<D>>,\n Partial<UseHvRowSelectionState<D>> {\n rowCount: number;\n}\n// #endregion\n\n// #region OPTIONS\nexport interface HvTableOptions<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<\n TableOptions<D>,\n | \"columns\"\n | \"data\"\n | \"defaultColumn\"\n | \"stateReducer\"\n | \"useControlledState\"\n | \"getRowId\"\n >,\n Partial<UseExpandedOptions<D>>,\n Partial<UseFiltersOptions<D>>,\n Partial<UseGlobalFiltersOptions<D>>,\n Partial<UseGroupByOptions<D>>,\n Partial<UsePaginationOptions<D>>,\n Partial<UseResizeColumnsOptions<D>>,\n Partial<UseSortByOptions<D>>,\n Partial<UseRowStateOptions<D>>,\n Partial<UseHvTableStylesTableOptions>,\n Partial<UseHvRowSelectionTableOptions>,\n Partial<UseHvTableStickyTableOptions>,\n Partial<UseHvBulkActionsTableOptions>,\n Partial<UseHvRowExpandTableOptions> {\n columns?: Array<HvTableColumnConfig<D, H>>;\n data?: D[];\n initialState?: Partial<HvTableState<D>>;\n labels?: Record<string, string>;\n defaultColumn?: Partial<HvTableColumnConfig<D, H>>;\n stateReducer?: (\n newState: HvTableState<D>,\n action: ActionType,\n previousState: HvTableState<D>,\n instance?: HvTableInstance<D, H>\n ) => HvTableState<D>;\n useControlledState?: (\n state: HvTableState<D>,\n meta: HvMeta<D, H>\n ) => HvTableState<D>;\n getRowId?: (\n originalRow: D,\n relativeIndex: number,\n parent?: HvRowInstance<D, H>\n ) => string;\n}\n\nexport interface HvTableColumnOptions<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<ColumnInterface<D>, \"Header\" | \"Footer\">,\n Partial<UseFiltersColumnOptions<D>>,\n Partial<UseGroupByColumnOptions<D>>,\n Partial<UseResizeColumnsColumnOptions<D>>,\n Partial<UseSortByColumnOptions<D>>,\n Partial<UseGlobalFiltersColumnOptions<D>>,\n Partial<UseHvTableStylesColumnOptions> {\n Header?: H;\n Footer?: Renderer<HvFooterProps<D>>;\n originalId?: IdType<D>;\n}\n// #endregion\n\n// #region INSTANCE\nexport interface HvTableInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<\n TableInstance<D>,\n | \"pageCount\"\n | \"data\"\n | \"columns\"\n | \"rows\"\n | \"allColumns\"\n | \"visibleColumns\"\n | \"headers\"\n | \"flatHeaders\"\n | \"rowsById\"\n | \"prepareRow\"\n | \"flatRows\"\n | \"headerGroups\"\n | \"footerGroups\"\n | \"defaultColumn\"\n | \"stateReducer\"\n | \"useControlledState\"\n | \"getRowId\"\n | \"getHooks\"\n | \"getTableProps\"\n >,\n Omit<HvTableOptions<D, H>, \"pageCount\" | \"columns\">,\n Partial<UseColumnOrderInstanceProps<D>>,\n Partial<Omit<UseExpandedInstanceProps<D>, \"rows\">>,\n Partial<Omit<UseFiltersInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">>,\n Partial<\n Omit<UseGlobalFiltersInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">\n >,\n Partial<Omit<UseGroupByInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">>,\n Partial<Omit<UsePaginationInstanceProps<D>, \"page\">>,\n Partial<Omit<UseSortByInstanceProps<D>, \"rows\">>,\n Partial<UseRowStateInstanceProps<D>>,\n Partial<Omit<UseHvRowSelectionTableInstance<D>, \"selectedFlatRows\">>,\n Partial<UseHvTableStickyTableInstance<D>>,\n Partial<UseHvHeaderGroupsInstance>,\n Partial<UseHvPaginationTableInstance<D>>,\n Partial<UseHvBulkActionsTableInstanceProps<D>> {\n initialState: Partial<HvTableState<D>>;\n state: HvTableState<D>;\n columns: Array<HvColumnInstance<D, H>>;\n allColumns: Array<HvColumnInstance<D, H>>;\n visibleColumns: Array<HvColumnInstance<D, H>>;\n headers: Array<HvColumnInstance<D, H>>;\n flatHeaders: Array<HvColumnInstance<D, H>>;\n rows: Array<HvRowInstance<D, H>>;\n page: Array<HvRowInstance<D, H>>;\n rowsById: Record<string, HvRowInstance<D, H>>;\n flatRows: Array<HvRowInstance<D, H>>;\n getHooks: () => HvHooks<D>;\n getTableProps: (propGetter?: HvTablePropGetter<D, H>) => HvUseTableProps;\n prepareRow: (row: HvRowInstance<D, H>) => void;\n selectedFlatRows: Array<HvRowInstance<D, H>>;\n initialRows: Array<HvRowInstance<D, H>>;\n initialRowsById: Record<string, HvRowInstance<D, H>>;\n labels: Record<string, string>;\n headerGroups: Array<HvHeaderGroup<D, H>>;\n footerGroups: Array<HvHeaderGroup<D, H>>;\n}\n\nexport interface HvColumnInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<\n ColumnInstance<D>,\n | \"Cell\"\n | \"columns\"\n | \"parent\"\n | \"placeholderOf\"\n | \"id\"\n | \"Header\"\n | \"getHeaderProps\"\n | \"getFooterProps\"\n | \"Footer\"\n >,\n HvTableColumnOptions<D, H>,\n Partial<UseFiltersColumnProps<D>>,\n Partial<UseGroupByColumnProps<D>>,\n Partial<UseResizeColumnsColumnProps<D>>,\n Partial<UseSortByColumnProps<D>> {\n Cell?: Renderer<HvCellProps<D, H>>;\n columns: Array<HvColumnInstance<D, H>>;\n parent: HvColumnInstance<D, H>;\n placeholderOf?: HvColumnInstance<D, H>;\n getHeaderProps: (\n propGetter?: HvHeaderPropGetter<D, H>\n ) => HvUseTableHeaderProps;\n getFooterProps: (\n propGetter?: HvFooterPropGetter<D, H>\n ) => HvUseTableFooterProps;\n}\n\nexport interface HvRowInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<Row<D>, \"cells\" | \"allCells\" | \"subRows\" | \"getRowProps\">,\n Partial<Omit<UseGroupByRowProps<D>, \"subRows\" | \"values\">>,\n Partial<UseRowStateRowProps<D>>,\n Partial<Omit<UseHvRowExpandRowInstance<D>, \"subRows\">>,\n Partial<UseHvRowSelectionRowInstance> {\n cells: Array<HvCellInstance<D, H>>;\n allCells: Array<HvCellInstance<D, H>>;\n getRowProps: (propGetter?: HvRowPropGetter<D, H>) => HvUseTableRowProps;\n index: number;\n original: D;\n id: string;\n subRows: Array<HvRowInstance<D, H>>;\n}\n\nexport interface HvCellInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n V = any\n> extends Omit<Cell<D, V>, \"column\" | \"row\" | \"getCellProps\">,\n Partial<UseGroupByCellProps<D>> {\n column: HvColumnInstance<D, H>;\n row: HvRowInstance<D, H>;\n getCellProps: (propGetter?: HvCellPropGetter<D, H>) => HvUseTableCellProps;\n}\n// #endregion\n\n// #region PROPS\nexport interface HvUseTableProps\n extends Omit<TableProps, \"role\">,\n UseHvTableStickyTableProps,\n HvTableProps {}\n\nexport interface HvUseTableHeaderProps\n extends Omit<TableHeaderProps, \"role\">,\n Omit<UseHvTableStylesTableCellProps, \"classes\">,\n UseHvTableStickyColumnProps,\n UseHvHeaderGroupsColumnProps,\n UseHvResizeColumnProps,\n Omit<UseHvSortByColumnProps, \"sortDirection\">,\n HvTableHeaderProps {}\n\nexport interface HvUseTableFooterProps\n extends TableFooterProps,\n UseHvTableStylesTableCellProps {}\n\nexport interface HvUseTableRowProps\n extends Omit<TableRowProps, \"role\">,\n UseHvTableStylesTableRowProps,\n UseHvRowSelectionTableRowProps,\n UseHvRowExpandTableRowProps,\n HvTableRowProps {}\n\nexport interface HvUseTableCellProps\n extends Omit<TableCellProps, \"role\">,\n Omit<UseHvTableStylesTableCellProps, \"variant\" | \"classes\">,\n UseHvTableStickyCellProps,\n UseHvHeaderGroupsCellProps,\n UseHvResizeTableCellProps,\n UseHvSortByTableCellProps,\n HvTableCellProps {}\n\n// #endregion\n\nexport type UseHvTableProps = <\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n options: HvTableOptions<D, H>,\n ...plugins: Array<PluginHook<D>>\n) => HvTableInstance<D, H>;\n\nexport { PluginHook as HvTablePluginHook };\n\n// #endregion ##### TYPES #####\n\nconst toTitleCase = (str: string) => {\n return str\n .replace(/([^A-Z])([A-Z])/g, \"$1 $2\") // split cameCase\n .replace(/[_-]+/g, \" \") // split snake_case and lisp-case\n .toLowerCase()\n .replace(/(^\\w|\\b\\w)/g, (m) => m.toUpperCase()) // title case words\n .replace(/\\s+/g, \" \") // collapse repeated whitespace\n .trim(); // remove leading/trailing whitespace\n};\n\nfunction useDefaultData<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(data?: HvTableOptions<D, H>[\"data\"]) {\n return useMemo(() => {\n return data || [];\n }, [data]);\n}\n\nfunction useDefaultColumns<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n data: NonNullable<HvTableOptions<D, H>[\"data\"]>,\n columns?: HvTableOptions<D, H>[\"columns\"]\n) {\n return useMemo(() => {\n if (columns != null) {\n return columns;\n }\n\n const uniqueKeys = Object.keys(Object.assign({}, ...data));\n\n return uniqueKeys\n .filter((key) => ![\"subRows\", \"subComponent\"].includes(key))\n .map((key) => ({\n accessor: key,\n Header: toTitleCase(key),\n }));\n }, [columns, data]);\n}\n\nfunction ensureCorePluginInstallation<\n D extends object = Record<string, unknown>\n>(\n plugins: PluginHook<D>[],\n hvPluginName: string,\n corePluginToInstall: PluginHook<D>\n) {\n const indexOfCorePlugin = plugins.findIndex(\n (plugin) => plugin.pluginName === corePluginToInstall.pluginName\n );\n const indexOfHvPlugin = plugins.findIndex(\n (plugin) => plugin.pluginName === hvPluginName\n );\n\n if (\n indexOfHvPlugin !== -1 &&\n (indexOfCorePlugin === -1 || indexOfCorePlugin > indexOfHvPlugin)\n ) {\n if (indexOfCorePlugin > -1) {\n plugins.splice(indexOfCorePlugin, 1);\n }\n\n plugins.splice(indexOfHvPlugin, 0, corePluginToInstall);\n }\n}\n\nfunction useInstanceHook<D extends object = Record<string, unknown>>(\n instance: TableInstance<D>\n) {\n const { rowsById } = instance;\n\n Object.assign(instance, {\n initialRowsById: rowsById,\n });\n}\n\nfunction useHvTableSetup<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>\n) {\n hooks.useInstance.push(useInstanceHook);\n}\nuseHvTableSetup.pluginName = \"useHvTableSetup\";\n\nfunction useHvTable<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n options: HvTableOptions<D, H>,\n ...plugins: PluginHook<D>[]\n): HvTableInstance<D, H> {\n const { data: dataProp, columns: columnsProp, ...others } = options;\n\n const data = useDefaultData<D, H>(dataProp);\n const columns = useDefaultColumns<D, H>(data, columnsProp);\n\n ensureCorePluginInstallation<D>(plugins, \"useHvPagination\", usePagination);\n ensureCorePluginInstallation<D>(plugins, \"useHvRowExpand\", useExpanded);\n ensureCorePluginInstallation<D>(plugins, \"useHvSortBy\", useSortBy);\n ensureCorePluginInstallation<D>(\n plugins,\n \"useHvResizeColumns\",\n useResizeColumns\n );\n\n const indexOfHvTableStylesPlugin = plugins.findIndex(\n (plugin) => plugin.pluginName === \"useHvTableStyles\"\n );\n if (indexOfHvTableStylesPlugin === -1) {\n plugins.push(useHvTableStyles);\n }\n\n // Main hook call\n return useTable<D>(\n {\n data,\n columns,\n ...others,\n } as any,\n useHvTableSetup,\n ...plugins\n ) as any;\n}\n\nexport default useHvTable;\n"],"names":[],"mappings":";;;;AAqlBA,MAAM,cAAc,CAAC,QAAgB;AAC5B,SAAA,IACJ,QAAQ,oBAAoB,OAAO,EACnC,QAAQ,UAAU,GAAG,EACrB,cACA,QAAQ,eAAe,CAAC,MAAM,EAAE,YAAa,CAAA,EAC7C,QAAQ,QAAQ,GAAG,EACnB;AACL;AAEA,SAAS,eAGP,MAAqC;AACrC,SAAO,QAAQ,MAAM;AACnB,WAAO,QAAQ,CAAA;AAAA,EAAC,GACf,CAAC,IAAI,CAAC;AACX;AAEA,SAAS,kBAIP,MACA,SACA;AACA,SAAO,QAAQ,MAAM;AACnB,QAAI,WAAW,MAAM;AACZ,aAAA;AAAA,IACT;AAEM,UAAA,aAAa,OAAO,KAAK,OAAO,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC;AAEzD,WAAO,WACJ,OAAO,CAAC,QAAQ,CAAC,CAAC,WAAW,cAAc,EAAE,SAAS,GAAG,CAAC,EAC1D,IAAI,CAAC,SAAS;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,YAAY,GAAG;AAAA,IACvB,EAAA;AAAA,EAAA,GACH,CAAC,SAAS,IAAI,CAAC;AACpB;AAEA,SAAS,6BAGP,SACA,cACA,qBACA;AACA,QAAM,oBAAoB,QAAQ;AAAA,IAChC,CAAC,WAAW,OAAO,eAAe,oBAAoB;AAAA,EAAA;AAExD,QAAM,kBAAkB,QAAQ;AAAA,IAC9B,CAAC,WAAW,OAAO,eAAe;AAAA,EAAA;AAGpC,MACE,oBAAoB,OACnB,sBAAsB,MAAM,oBAAoB,kBACjD;AACA,QAAI,oBAAoB,IAAI;AAClB,cAAA,OAAO,mBAAmB,CAAC;AAAA,IACrC;AAEQ,YAAA,OAAO,iBAAiB,GAAG,mBAAmB;AAAA,EACxD;AACF;AAEA,SAAS,gBACP,UACA;AACM,QAAA,EAAE,SAAa,IAAA;AAErB,SAAO,OAAO,UAAU;AAAA,IACtB,iBAAiB;AAAA,EAAA,CAClB;AACH;AAEA,SAAS,gBACP,OACA;AACM,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,gBAAgB,aAAa;AAE7B,SAAS,WAIP,YACG,SACoB;AACvB,QAAM,EAAE,MAAM,UAAU,SAAS,aAAa,GAAG,OAAW,IAAA;AAEtD,QAAA,OAAO,eAAqB,QAAQ;AACpC,QAAA,UAAU,kBAAwB,MAAM,WAAW;AAEzB,+BAAA,SAAS,mBAAmB,aAAa;AACzC,+BAAA,SAAS,kBAAkB,WAAW;AACtC,+BAAA,SAAS,eAAe,SAAS;AACjE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,6BAA6B,QAAQ;AAAA,IACzC,CAAC,WAAW,OAAO,eAAe;AAAA,EAAA;AAEpC,MAAI,+BAA+B,IAAI;AACrC,YAAQ,KAAK,gBAAgB;AAAA,EAC/B;AAGO,SAAA;AAAA,IACL;AAAA,MACE;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAEP;"}
1
+ {"version":3,"file":"useTable.mjs","sources":["../../../../src/Table/hooks/useTable.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n useTable,\n usePagination,\n useExpanded,\n useSortBy,\n useResizeColumns,\n Cell,\n ColumnInstance,\n ColumnInterface,\n Hooks,\n Renderer,\n Row,\n TableCellProps,\n TableFooterProps,\n TableHeaderProps,\n TableInstance,\n TableOptions,\n TableProps,\n TableRowProps,\n TableState,\n UseColumnOrderInstanceProps,\n UseColumnOrderState,\n UseExpandedHooks,\n UseExpandedInstanceProps,\n UseExpandedOptions,\n UseExpandedState,\n UseFiltersColumnOptions,\n UseFiltersColumnProps,\n UseFiltersInstanceProps,\n UseFiltersOptions,\n UseFiltersState,\n UseGlobalFiltersInstanceProps,\n UseGlobalFiltersOptions,\n UseGlobalFiltersState,\n UseGroupByCellProps,\n UseGroupByColumnOptions,\n UseGroupByColumnProps,\n UseGroupByHooks,\n UseGroupByInstanceProps,\n UseGroupByOptions,\n UseGroupByRowProps,\n UseGroupByState,\n UsePaginationInstanceProps,\n UsePaginationOptions,\n UsePaginationState,\n UseResizeColumnsColumnOptions,\n UseResizeColumnsColumnProps,\n UseResizeColumnsOptions,\n UseResizeColumnsState,\n UseSortByColumnOptions,\n UseSortByColumnProps,\n UseSortByHooks,\n UseSortByInstanceProps,\n UseSortByOptions,\n UseSortByState,\n UseRowStateState,\n UseRowStateOptions,\n UseGlobalFiltersColumnOptions,\n UseRowStateInstanceProps,\n UseRowStateRowProps,\n UseTableHeaderGroupProps,\n PluginHook,\n ActionType,\n ReducerTableState,\n} from \"react-table\";\n\nimport useHvTableStyles, {\n UseHvTableStylesTableOptions,\n UseHvTableStylesColumnOptions,\n UseHvTableStylesTableCellProps,\n UseHvTableStylesTableRowProps,\n} from \"./useTableStyles\";\nimport {\n UseHvTableStickyCellProps,\n UseHvTableStickyColumnProps,\n UseHvTableStickyHooks,\n UseHvTableStickyTableInstance,\n UseHvTableStickyTableOptions,\n UseHvTableStickyTableProps,\n} from \"./useSticky\";\nimport { UseHvSortByColumnProps, UseHvSortByTableCellProps } from \"./useSortBy\";\nimport {\n UseHvRowSelectionHooks,\n UseHvRowSelectionRowInstance,\n UseHvRowSelectionState,\n UseHvRowSelectionTableInstance,\n UseHvRowSelectionTableOptions,\n UseHvRowSelectionTableRowProps,\n} from \"./useRowSelection\";\nimport {\n UseHvPaginationHooks,\n UseHvPaginationTableInstance,\n} from \"./usePagination\";\nimport {\n UseHvBulkActionsHooks,\n UseHvBulkActionsTableInstanceProps,\n UseHvBulkActionsTableOptions,\n} from \"./useBulkActions\";\nimport {\n UseHvRowExpandTableOptions,\n UseHvRowExpandRowInstance,\n UseHvRowExpandTableRowProps,\n} from \"./useRowExpand\";\nimport {\n UseHvHeaderGroupsColumnProps,\n UseHvHeaderGroupsCellProps,\n UseHvHeaderGroupsInstance,\n} from \"./useHeaderGroups\";\nimport {\n UseHvResizeColumnProps,\n UseHvResizeTableCellProps,\n} from \"./useResizeColumns\";\nimport { HvTableRowProps } from \"../TableRow\";\nimport { HvTableProps } from \"../Table\";\nimport { HvTableCellProps } from \"../TableCell\";\nimport { HvTableHeaderProps } from \"../TableHeader\";\n\n// #region ##### TYPES #####\n\ntype Accessor<D extends object> = (\n originalRow: D,\n index: number,\n sub: {\n subRows: D[];\n depth: number;\n data: D[];\n }\n) => CellValue;\n\ntype ValueOf<T> = T[keyof T];\ntype StringKey<D> = Extract<keyof D, string>;\ntype IdType<D> = StringKey<D> | string;\ntype CellValue<V = any> = V;\n\ntype HvHeaderProps<D extends object = Record<string, unknown>> =\n HvTableInstance<D> & {\n column: HvColumnInstance<D>;\n };\n\ninterface HvMetaBase<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> {\n instance: HvTableInstance<D, H>;\n userProps: any;\n}\n\nexport type HvMeta<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n Extension = never,\n M = HvMetaBase<D, H>\n> = [Extension] extends [never] ? M : M & Extension;\n\nexport type HvPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n Props extends object = Record<string, unknown>,\n T extends object = never,\n P = Partial<Props>\n> = ((props: P, meta: HvMeta<D, H, T>) => P | P[]) | P | P[];\n\nexport type HvTableHeaderRenderer<D extends object = Record<string, unknown>> =\n Renderer<HvHeaderProps<D>>;\n\ntype HvFooterProps<D extends object = Record<string, unknown>> =\n HvTableInstance<D> & {\n column: HvColumnInstance<D>;\n };\n\ninterface HvHeaderGroup<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends HvColumnInstance<D, H>,\n Omit<UseTableHeaderGroupProps<D>, \"headers\"> {\n headers: Array<HvHeaderGroup<D, H>>;\n}\n\ntype HvRowPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableRowProps, { row: HvRowInstance<D, H> }>;\n\ntype HvTablePropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableProps>;\n\ntype HvCellPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableCellProps, { cell: HvCellInstance<D, H> }>;\n\ntype HvHeaderPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableHeaderProps, { column: HvHeaderGroup<D, H> }>;\n\ntype HvFooterPropGetter<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvPropGetter<D, H, HvUseTableFooterProps, { column: HvHeaderGroup<D, H> }>;\n\nexport interface HvCellProps<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n V = any\n> extends HvTableInstance<D, H> {\n column: HvColumnInstance<D, H>;\n row: HvRowInstance<D, H>;\n cell: HvCellInstance<D, H, V>;\n value: CellValue<V>;\n}\n\nexport type HvTableDefinitionConfig<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableOptions<D, H>;\n\ninterface HvColumnInterfaceBasedOnValue<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n V = any\n> {\n Cell?: Renderer<HvCellProps<D, H, V>>;\n}\n\ninterface HvColumnGroupInterface<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> {\n columns: Array<HvTableColumnConfig<D, H>>;\n}\n\ntype HvColumnGroup<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableColumnOptions<D, H> &\n HvColumnGroupInterface<D, H> &\n (\n | { Header: H }\n | ({ id: IdType<D> } & {\n Header: H;\n })\n ) & { accessor?: Accessor<D> };\n\ntype HvColumnWithStrictAccessor<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableColumnOptions<D, H> &\n ValueOf<{\n [K in keyof D]: {\n accessor: K;\n } & HvColumnInterfaceBasedOnValue<D, H, D[K]>;\n }>;\n\ntype HvColumnWithLooseAccessor<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> = HvTableColumnOptions<D, H> &\n HvColumnInterfaceBasedOnValue<D, H> &\n (\n | { Header: H }\n | { id: IdType<D> }\n | { accessor: keyof D extends never ? IdType<D> : never }\n ) & {\n accessor?: keyof D extends never ? IdType<D> | Accessor<D> : Accessor<D>;\n };\n\nexport type HvTableColumnConfig<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> =\n | HvColumnGroup<D, H>\n | HvColumnWithLooseAccessor<D, H>\n | HvColumnWithStrictAccessor<D, H>;\n\n// #region HOOKS\nexport interface HvHooks<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<Hooks<D>, \"useOptions\">,\n Partial<UseExpandedHooks<D>>,\n Partial<UseGroupByHooks<D>>,\n Partial<UseSortByHooks<D>>,\n Partial<UseHvRowSelectionHooks<D>>,\n Partial<UseHvTableStickyHooks<D>>,\n Partial<UseHvPaginationHooks<D>>,\n Partial<UseHvBulkActionsHooks<D>> {\n useOptions: Array<\n (\n options: HvTableOptions<D, H>,\n args: HvTableOptions<D, H>\n ) => HvTableOptions<D, H>\n >;\n stateReducers: Array<\n (\n newState: HvTableState<D>,\n action: ActionType,\n previousState?: HvTableState<D>,\n instance?: HvTableState<D>\n ) => ReducerTableState<D> | undefined\n >;\n columns: Array<\n (\n columns: Array<HvTableColumnConfig<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvTableColumnConfig<D, H>>\n >;\n allColumns: Array<\n (\n allColumns: Array<HvColumnInstance<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvTableColumnConfig<D, H>>\n >;\n visibleColumns: Array<\n (\n allColumns: Array<HvColumnInstance<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvTableColumnConfig<D, H>>\n >;\n headerGroups: Array<\n (\n allColumns: Array<HvHeaderGroup<D, H>>,\n meta: HvMeta<D, H>\n ) => Array<HvHeaderGroup<D, H>>\n >;\n useInstanceBeforeDimensions: Array<(instance: HvTableInstance<D, H>) => void>;\n useInstance: Array<(instance: HvTableInstance<D, H>) => void>;\n useControlledState: Array<\n (state: HvTableState<D>, meta: HvMeta<D, H>) => HvTableState<D>\n >;\n getTableProps: Array<HvTablePropGetter<D, H>>;\n getHeaderProps: Array<HvHeaderPropGetter<D>>;\n getFooterProps: Array<HvFooterPropGetter<D>>;\n getRowProps: Array<HvRowPropGetter<D>>;\n getCellProps: Array<HvCellPropGetter<D>>;\n useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;\n}\n// #endregion\n\n// #region STATE\nexport interface HvTableState<D extends object = Record<string, unknown>>\n extends TableState<D>,\n Partial<UseColumnOrderState<D>>,\n Partial<UseExpandedState<D>>,\n Partial<UseFiltersState<D>>,\n Partial<UseGlobalFiltersState<D>>,\n Partial<UseGroupByState<D>>,\n Partial<UsePaginationState<D>>,\n Partial<UseResizeColumnsState<D>>,\n Partial<UseSortByState<D>>,\n Partial<UseRowStateState<D>>,\n Partial<UseHvRowSelectionState<D>> {\n rowCount: number;\n}\n// #endregion\n\n// #region OPTIONS\nexport interface HvTableOptions<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<\n TableOptions<D>,\n | \"columns\"\n | \"data\"\n | \"defaultColumn\"\n | \"stateReducer\"\n | \"useControlledState\"\n | \"getRowId\"\n >,\n Partial<UseExpandedOptions<D>>,\n Partial<UseFiltersOptions<D>>,\n Partial<UseGlobalFiltersOptions<D>>,\n Partial<UseGroupByOptions<D>>,\n Partial<UsePaginationOptions<D>>,\n Partial<UseResizeColumnsOptions<D>>,\n Partial<UseSortByOptions<D>>,\n Partial<UseRowStateOptions<D>>,\n Partial<UseHvTableStylesTableOptions>,\n Partial<UseHvRowSelectionTableOptions>,\n Partial<UseHvTableStickyTableOptions>,\n Partial<UseHvBulkActionsTableOptions>,\n Partial<UseHvRowExpandTableOptions> {\n columns?: Array<HvTableColumnConfig<D, H>>;\n data?: D[];\n initialState?: Partial<HvTableState<D>>;\n labels?: Record<string, string>;\n defaultColumn?: Partial<HvTableColumnConfig<D, H>>;\n stateReducer?: (\n newState: HvTableState<D>,\n action: ActionType,\n previousState: HvTableState<D>,\n instance?: HvTableInstance<D, H>\n ) => HvTableState<D>;\n useControlledState?: (\n state: HvTableState<D>,\n meta: HvMeta<D, H>\n ) => HvTableState<D>;\n getRowId?: (\n originalRow: D,\n relativeIndex: number,\n parent?: HvRowInstance<D, H>\n ) => string;\n}\n\nexport interface HvTableColumnOptions<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<ColumnInterface<D>, \"Header\" | \"Footer\">,\n Partial<UseFiltersColumnOptions<D>>,\n Partial<UseGroupByColumnOptions<D>>,\n Partial<UseResizeColumnsColumnOptions<D>>,\n Partial<UseSortByColumnOptions<D>>,\n Partial<UseGlobalFiltersColumnOptions<D>>,\n Partial<UseHvTableStylesColumnOptions> {\n Header?: H;\n Footer?: Renderer<HvFooterProps<D>>;\n originalId?: IdType<D>;\n}\n// #endregion\n\n// #region INSTANCE\nexport interface HvTableInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<\n TableInstance<D>,\n | \"pageCount\"\n | \"data\"\n | \"columns\"\n | \"rows\"\n | \"allColumns\"\n | \"visibleColumns\"\n | \"headers\"\n | \"flatHeaders\"\n | \"rowsById\"\n | \"prepareRow\"\n | \"flatRows\"\n | \"headerGroups\"\n | \"footerGroups\"\n | \"defaultColumn\"\n | \"stateReducer\"\n | \"useControlledState\"\n | \"getRowId\"\n | \"getHooks\"\n | \"getTableProps\"\n >,\n Omit<HvTableOptions<D, H>, \"pageCount\" | \"columns\">,\n Partial<UseColumnOrderInstanceProps<D>>,\n Partial<Omit<UseExpandedInstanceProps<D>, \"rows\">>,\n Partial<Omit<UseFiltersInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">>,\n Partial<\n Omit<UseGlobalFiltersInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">\n >,\n Partial<Omit<UseGroupByInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">>,\n Partial<Omit<UsePaginationInstanceProps<D>, \"page\">>,\n Partial<Omit<UseSortByInstanceProps<D>, \"rows\">>,\n Partial<UseRowStateInstanceProps<D>>,\n Partial<Omit<UseHvRowSelectionTableInstance<D>, \"selectedFlatRows\">>,\n Partial<UseHvTableStickyTableInstance<D>>,\n Partial<UseHvHeaderGroupsInstance>,\n Partial<UseHvPaginationTableInstance<D>>,\n Partial<UseHvBulkActionsTableInstanceProps<D>> {\n initialState: Partial<HvTableState<D>>;\n state: HvTableState<D>;\n columns: Array<HvColumnInstance<D, H>>;\n allColumns: Array<HvColumnInstance<D, H>>;\n visibleColumns: Array<HvColumnInstance<D, H>>;\n headers: Array<HvColumnInstance<D, H>>;\n flatHeaders: Array<HvColumnInstance<D, H>>;\n rows: Array<HvRowInstance<D, H>>;\n page: Array<HvRowInstance<D, H>>;\n rowsById: Record<string, HvRowInstance<D, H>>;\n flatRows: Array<HvRowInstance<D, H>>;\n getHooks: () => HvHooks<D>;\n getTableProps: (propGetter?: HvTablePropGetter<D, H>) => HvUseTableProps;\n prepareRow: (row: HvRowInstance<D, H>) => void;\n selectedFlatRows: Array<HvRowInstance<D, H>>;\n initialRows: Array<HvRowInstance<D, H>>;\n initialRowsById: Record<string, HvRowInstance<D, H>>;\n labels: Record<string, string>;\n headerGroups: Array<HvHeaderGroup<D, H>>;\n footerGroups: Array<HvHeaderGroup<D, H>>;\n}\n\nexport interface HvColumnInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<\n ColumnInstance<D>,\n | \"Cell\"\n | \"columns\"\n | \"parent\"\n | \"placeholderOf\"\n | \"id\"\n | \"Header\"\n | \"getHeaderProps\"\n | \"getFooterProps\"\n | \"Footer\"\n >,\n HvTableColumnOptions<D, H>,\n Partial<UseFiltersColumnProps<D>>,\n Partial<UseGroupByColumnProps<D>>,\n Partial<UseResizeColumnsColumnProps<D>>,\n Partial<UseSortByColumnProps<D>> {\n Cell?: Renderer<HvCellProps<D, H>>;\n columns: Array<HvColumnInstance<D, H>>;\n parent: HvColumnInstance<D, H>;\n placeholderOf?: HvColumnInstance<D, H>;\n getHeaderProps: (\n propGetter?: HvHeaderPropGetter<D, H>\n ) => HvUseTableHeaderProps;\n getFooterProps: (\n propGetter?: HvFooterPropGetter<D, H>\n ) => HvUseTableFooterProps;\n}\n\nexport interface HvRowInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n> extends Omit<Row<D>, \"cells\" | \"allCells\" | \"subRows\" | \"getRowProps\">,\n Partial<Omit<UseGroupByRowProps<D>, \"subRows\" | \"values\">>,\n Partial<UseRowStateRowProps<D>>,\n Partial<Omit<UseHvRowExpandRowInstance<D>, \"subRows\">>,\n Partial<UseHvRowSelectionRowInstance> {\n cells: Array<HvCellInstance<D, H>>;\n allCells: Array<HvCellInstance<D, H>>;\n getRowProps: (propGetter?: HvRowPropGetter<D, H>) => HvUseTableRowProps;\n index: number;\n original: D;\n id: string;\n subRows: Array<HvRowInstance<D, H>>;\n}\n\nexport interface HvCellInstance<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n V = any\n> extends Omit<Cell<D, V>, \"column\" | \"row\" | \"getCellProps\">,\n Partial<UseGroupByCellProps<D>> {\n column: HvColumnInstance<D, H>;\n row: HvRowInstance<D, H>;\n getCellProps: (propGetter?: HvCellPropGetter<D, H>) => HvUseTableCellProps;\n}\n// #endregion\n\n// #region PROPS\nexport interface HvUseTableProps\n extends Omit<TableProps, \"role\">,\n UseHvTableStickyTableProps,\n HvTableProps {}\n\nexport interface HvUseTableHeaderProps\n extends Omit<TableHeaderProps, \"role\">,\n Omit<UseHvTableStylesTableCellProps, \"classes\">,\n UseHvTableStickyColumnProps,\n UseHvHeaderGroupsColumnProps,\n UseHvResizeColumnProps,\n Omit<UseHvSortByColumnProps, \"sortDirection\">,\n HvTableHeaderProps {}\n\nexport interface HvUseTableFooterProps\n extends TableFooterProps,\n UseHvTableStylesTableCellProps {}\n\nexport interface HvUseTableRowProps\n extends Omit<TableRowProps, \"role\">,\n UseHvTableStylesTableRowProps,\n UseHvRowSelectionTableRowProps,\n UseHvRowExpandTableRowProps,\n HvTableRowProps {}\n\nexport interface HvUseTableCellProps\n extends Omit<TableCellProps, \"role\">,\n Omit<UseHvTableStylesTableCellProps, \"variant\" | \"classes\">,\n UseHvTableStickyCellProps,\n UseHvHeaderGroupsCellProps,\n UseHvResizeTableCellProps,\n UseHvSortByTableCellProps,\n HvTableCellProps {}\n\n// #endregion\n\nexport type UseHvTableProps = <\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n options: HvTableOptions<D, H>,\n ...plugins: Array<PluginHook<D>>\n) => HvTableInstance<D, H>;\n\nexport type { PluginHook as HvTablePluginHook };\n\n// #endregion ##### TYPES #####\n\nconst toTitleCase = (str: string) => {\n return str\n .replace(/([^A-Z])([A-Z])/g, \"$1 $2\") // split cameCase\n .replace(/[_-]+/g, \" \") // split snake_case and lisp-case\n .toLowerCase()\n .replace(/(^\\w|\\b\\w)/g, (m) => m.toUpperCase()) // title case words\n .replace(/\\s+/g, \" \") // collapse repeated whitespace\n .trim(); // remove leading/trailing whitespace\n};\n\nfunction useDefaultData<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(data?: HvTableOptions<D, H>[\"data\"]) {\n return useMemo(() => {\n return data || [];\n }, [data]);\n}\n\nfunction useDefaultColumns<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n data: NonNullable<HvTableOptions<D, H>[\"data\"]>,\n columns?: HvTableOptions<D, H>[\"columns\"]\n) {\n return useMemo(() => {\n if (columns != null) {\n return columns;\n }\n\n const uniqueKeys = Object.keys(Object.assign({}, ...data));\n\n return uniqueKeys\n .filter((key) => ![\"subRows\", \"subComponent\"].includes(key))\n .map((key) => ({\n accessor: key,\n Header: toTitleCase(key),\n }));\n }, [columns, data]);\n}\n\nfunction ensureCorePluginInstallation<\n D extends object = Record<string, unknown>\n>(\n plugins: PluginHook<D>[],\n hvPluginName: string,\n corePluginToInstall: PluginHook<D>\n) {\n const indexOfCorePlugin = plugins.findIndex(\n (plugin) => plugin.pluginName === corePluginToInstall.pluginName\n );\n const indexOfHvPlugin = plugins.findIndex(\n (plugin) => plugin.pluginName === hvPluginName\n );\n\n if (\n indexOfHvPlugin !== -1 &&\n (indexOfCorePlugin === -1 || indexOfCorePlugin > indexOfHvPlugin)\n ) {\n if (indexOfCorePlugin > -1) {\n plugins.splice(indexOfCorePlugin, 1);\n }\n\n plugins.splice(indexOfHvPlugin, 0, corePluginToInstall);\n }\n}\n\nfunction useInstanceHook<D extends object = Record<string, unknown>>(\n instance: TableInstance<D>\n) {\n const { rowsById } = instance;\n\n Object.assign(instance, {\n initialRowsById: rowsById,\n });\n}\n\nfunction useHvTableSetup<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>\n) {\n hooks.useInstance.push(useInstanceHook);\n}\nuseHvTableSetup.pluginName = \"useHvTableSetup\";\n\nfunction useHvTable<\n D extends object = Record<string, unknown>,\n H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n options: HvTableOptions<D, H>,\n ...plugins: PluginHook<D>[]\n): HvTableInstance<D, H> {\n const { data: dataProp, columns: columnsProp, ...others } = options;\n\n const data = useDefaultData<D, H>(dataProp);\n const columns = useDefaultColumns<D, H>(data, columnsProp);\n\n ensureCorePluginInstallation<D>(plugins, \"useHvPagination\", usePagination);\n ensureCorePluginInstallation<D>(plugins, \"useHvRowExpand\", useExpanded);\n ensureCorePluginInstallation<D>(plugins, \"useHvSortBy\", useSortBy);\n ensureCorePluginInstallation<D>(\n plugins,\n \"useHvResizeColumns\",\n useResizeColumns\n );\n\n const indexOfHvTableStylesPlugin = plugins.findIndex(\n (plugin) => plugin.pluginName === \"useHvTableStyles\"\n );\n if (indexOfHvTableStylesPlugin === -1) {\n plugins.push(useHvTableStyles);\n }\n\n // Main hook call\n return useTable<D>(\n {\n data,\n columns,\n ...others,\n } as any,\n useHvTableSetup,\n ...plugins\n ) as any;\n}\n\nexport default useHvTable;\n"],"names":[],"mappings":";;;AAqlBA,MAAM,cAAc,CAAC,QAAgB;AAC5B,SAAA,IACJ,QAAQ,oBAAoB,OAAO,EACnC,QAAQ,UAAU,GAAG,EACrB,cACA,QAAQ,eAAe,CAAC,MAAM,EAAE,YAAa,CAAA,EAC7C,QAAQ,QAAQ,GAAG,EACnB;AACL;AAEA,SAAS,eAGP,MAAqC;AACrC,SAAO,QAAQ,MAAM;AACnB,WAAO,QAAQ,CAAA;AAAA,EAAC,GACf,CAAC,IAAI,CAAC;AACX;AAEA,SAAS,kBAIP,MACA,SACA;AACA,SAAO,QAAQ,MAAM;AACnB,QAAI,WAAW,MAAM;AACZ,aAAA;AAAA,IACT;AAEM,UAAA,aAAa,OAAO,KAAK,OAAO,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC;AAEzD,WAAO,WACJ,OAAO,CAAC,QAAQ,CAAC,CAAC,WAAW,cAAc,EAAE,SAAS,GAAG,CAAC,EAC1D,IAAI,CAAC,SAAS;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,YAAY,GAAG;AAAA,IACvB,EAAA;AAAA,EAAA,GACH,CAAC,SAAS,IAAI,CAAC;AACpB;AAEA,SAAS,6BAGP,SACA,cACA,qBACA;AACA,QAAM,oBAAoB,QAAQ;AAAA,IAChC,CAAC,WAAW,OAAO,eAAe,oBAAoB;AAAA,EAAA;AAExD,QAAM,kBAAkB,QAAQ;AAAA,IAC9B,CAAC,WAAW,OAAO,eAAe;AAAA,EAAA;AAGpC,MACE,oBAAoB,OACnB,sBAAsB,MAAM,oBAAoB,kBACjD;AACA,QAAI,oBAAoB,IAAI;AAClB,cAAA,OAAO,mBAAmB,CAAC;AAAA,IACrC;AAEQ,YAAA,OAAO,iBAAiB,GAAG,mBAAmB;AAAA,EACxD;AACF;AAEA,SAAS,gBACP,UACA;AACM,QAAA,EAAE,SAAa,IAAA;AAErB,SAAO,OAAO,UAAU;AAAA,IACtB,iBAAiB;AAAA,EAAA,CAClB;AACH;AAEA,SAAS,gBACP,OACA;AACM,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,gBAAgB,aAAa;AAE7B,SAAS,WAIP,YACG,SACoB;AACvB,QAAM,EAAE,MAAM,UAAU,SAAS,aAAa,GAAG,OAAW,IAAA;AAEtD,QAAA,OAAO,eAAqB,QAAQ;AACpC,QAAA,UAAU,kBAAwB,MAAM,WAAW;AAEzB,+BAAA,SAAS,mBAAmB,aAAa;AACzC,+BAAA,SAAS,kBAAkB,WAAW;AACtC,+BAAA,SAAS,eAAe,SAAS;AACjE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,6BAA6B,QAAQ;AAAA,IACzC,CAAC,WAAW,OAAO,eAAe;AAAA,EAAA;AAEpC,MAAI,+BAA+B,IAAI;AACrC,YAAQ,KAAK,gBAAgB;AAAA,EAC/B;AAGO,SAAA;AAAA,IACL;AAAA,MACE;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAEP;"}
@@ -54,13 +54,6 @@ const HvTag = (props) => {
54
54
  boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
55
55
  }
56
56
  });
57
- const onClickHandler = (event) => {
58
- if (disabled)
59
- return;
60
- if (selectable)
61
- setIsSelected(!isSelected);
62
- onClick?.(event, !isSelected);
63
- };
64
57
  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
65
58
  const avatarIcon = isSelected ? /* @__PURE__ */ jsx(CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsx(Checkbox, { color: colorOverride, iconSize: "XS" });
66
59
  return /* @__PURE__ */ jsx(
@@ -88,7 +81,13 @@ const HvTag = (props) => {
88
81
  },
89
82
  deleteIcon: deleteIcon || defaultDeleteIcon,
90
83
  onDelete: disabled ? void 0 : onDelete,
91
- onClick: onClickHandler,
84
+ onClick: (event) => {
85
+ if (disabled)
86
+ return;
87
+ if (selectable)
88
+ setIsSelected(!isSelected);
89
+ onClick?.(event, !isSelected);
90
+ },
92
91
  "aria-pressed": isSelected,
93
92
  ...selectable && type === "semantic" && {
94
93
  avatar: avatarIcon
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.mjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n /** The label of the tag element. */\n label?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** The type of the tag element. A tag can be of semantic or categoric type. */\n type?: \"semantic\" | \"categorical\";\n /** Background color to be applied to the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon in the Chip element */\n deleteIcon?: React.ReactElement;\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component, in order to render the delete icon\n * */\n onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n /** Callback triggered when any item is clicked. */\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /** Aria properties to apply to delete button in tag\n * @deprecated no longer used\n */\n deleteButtonArialLabel?: string;\n /** Props to apply to delete icon */\n deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagClasses;\n /** @ignore */\n ref?: MuiChipProps[\"ref\"];\n /** @ignore */\n component?: MuiChipProps[\"component\"];\n /** Determines whether or not the tag is selectable. */\n selectable?: boolean;\n /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n selected?: boolean;\n /** When uncontrolled, defines the initial selected state. */\n defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n const {\n classes: classesProp,\n className,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon,\n onDelete,\n onClick,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { colors } = useTheme();\n const { classes, cx, css } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected)\n );\n\n const defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n {...deleteButtonProps}\n />\n );\n\n const categoricalBackgroundColor =\n type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete) && !disabled;\n\n const clickableClass = css({\n \"&:hover\": {\n boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n },\n });\n\n const onClickHandler = (event) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n };\n\n const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n const avatarIcon = isSelected ? (\n <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n ) : (\n <Checkbox color={colorOverride} iconSize=\"XS\" />\n );\n\n return (\n <Chip\n label={label}\n disabled={disabled}\n className={cx({ [clickableClass]: isClickable }, className)}\n style={{\n ...(disabled ? null : { backgroundColor }),\n ...style,\n }}\n classes={{\n root: cx(classes.root, classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: isClickable,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={deleteIcon || defaultDeleteIcon}\n onDelete={disabled ? undefined : onDelete}\n onClick={onClickHandler}\n aria-pressed={isSelected}\n {...(selectable &&\n type === \"semantic\" && {\n avatar: avatarIcon,\n })}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAAa,WAAW;AACnD,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAEK,QAAA,iBAAiB,CAAC,UAAU;AAC5B,QAAA;AAAU;AACV,QAAA;AAAY,oBAAc,CAAC,UAAU;AAC/B,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAG9B,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS;AAAA,MACT,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
1
+ {"version":3,"file":"Tag.mjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n /** The label of the tag element. */\n label?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** The type of the tag element. A tag can be of semantic or categoric type. */\n type?: \"semantic\" | \"categorical\";\n /** Background color to be applied to the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon in the Chip element */\n deleteIcon?: React.ReactElement;\n /**\n * The callback fired when the delete icon is pressed.\n * This function has to be provided to the component, in order to render the delete icon\n * */\n onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n /** Callback triggered when any item is clicked. */\n onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n /** Aria properties to apply to delete button in tag\n * @deprecated no longer used\n */\n deleteButtonArialLabel?: string;\n /** Props to apply to delete icon */\n deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagClasses;\n /** @ignore */\n ref?: MuiChipProps[\"ref\"];\n /** @ignore */\n component?: MuiChipProps[\"component\"];\n /** Determines whether or not the tag is selectable. */\n selectable?: boolean;\n /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n selected?: boolean;\n /** When uncontrolled, defines the initial selected state. */\n defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n const {\n classes: classesProp,\n className,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon,\n onDelete,\n onClick,\n // TODO: remove from API\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n deleteButtonArialLabel = \"Delete tag\",\n deleteButtonProps = {},\n ...others\n } = useDefaultProps(\"HvTag\", props);\n const { colors } = useTheme();\n const { classes, cx, css } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected)\n );\n\n const defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n {...deleteButtonProps}\n />\n );\n\n const categoricalBackgroundColor =\n type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete) && !disabled;\n\n const clickableClass = css({\n \"&:hover\": {\n boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n },\n });\n\n const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n const avatarIcon = isSelected ? (\n <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n ) : (\n <Checkbox color={colorOverride} iconSize=\"XS\" />\n );\n\n return (\n <Chip\n label={label}\n disabled={disabled}\n className={cx({ [clickableClass]: isClickable }, className)}\n style={{\n ...(disabled ? null : { backgroundColor }),\n ...style,\n }}\n classes={{\n root: cx(classes.root, classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: isClickable,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={deleteIcon || defaultDeleteIcon}\n onDelete={disabled ? undefined : onDelete}\n onClick={(event) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n aria-pressed={isSelected}\n {...(selectable &&\n type === \"semantic\" && {\n avatar: avatarIcon,\n })}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
@@ -106,11 +106,11 @@ const HvTextArea = forwardRef((props, ref) => {
106
106
  validation,
107
107
  value
108
108
  ]);
109
- const isOverflow = (currentValue) => maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;
110
109
  const limitValue = (currentValue) => {
111
110
  if (currentValue === void 0 || !blockMax)
112
111
  return currentValue;
113
- return !isOverflow(currentValue) ? currentValue : currentValue.substring(0, maxCharQuantity);
112
+ const isOverflow = maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;
113
+ return !isOverflow ? currentValue : currentValue.substring(0, maxCharQuantity);
114
114
  };
115
115
  const onContainerBlurHandler = (event) => {
116
116
  setFocused(false);
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.mjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import {\n useCallback,\n useRef,\n useState,\n useMemo,\n useEffect,\n forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport validationStates, {\n isInvalid,\n} from \"../Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"../types/forms\";\nimport {\n computeValidationMessage,\n computeValidationState,\n DEFAULT_ERROR_MESSAGES,\n hasBuiltInValidations,\n HvInputValidity,\n validateInput,\n validationTypes,\n} from \"../BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n HvCharCounter,\n HvCharCounterProps,\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n extends Omit<\n HvBaseInputProps,\n \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\" | \"placeholder\"\n > {\n /** The placeholder value of the text area. */\n placeholder?: 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?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\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?: HvFormStatus;\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * Text between the current char counter and max value.\n */\n middleCountLabel?: string;\n /**\n * An Object containing the various texts associated with the input.\n */\n validationMessages?: HvValidationMessages;\n /**\n * The custom validation function, it receives the value and must return\n * either `true` for valid or `false` for invalid, default validations would only\n * occur if this function is null or undefined\n */\n validation?: (value: string) => boolean;\n /**\n * The maximum allowed length of the characters, if this value is null no check\n * will be performed.\n */\n maxCharQuantity?: number;\n /**\n * The minimum allowed length of the characters, if this value is null no check\n * will be perform.\n */\n minCharQuantity?: number;\n /**\n * If `true` it should autofocus.\n */\n autoFocus?: boolean;\n /**\n * The number of rows of the text area\n */\n rows?: number;\n /**\n * If `true` the component is resizable.\n */\n resizable?: boolean;\n /**\n * Auto-scroll: automatically scroll to the end on value changes.\n * Will stop if the user scrolls up and resume if scrolled to the bottom.\n */\n autoScroll?: boolean;\n /**\n * If true it isn't possible to pass the `maxCharQuantity`\n */\n blockMax?: boolean;\n /**\n * If `true` the character counter isn't shown even if maxCharQuantity is set.\n */\n hideCounter?: boolean;\n /**\n * Props passed to the char count.\n */\n countCharProps?: Partial<HvCharCounterProps>;\n /**\n * Called back when the value is changed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLTextAreaElement>,\n value: string\n ) => void;\n /**\n * Called back when the value is changed.\n */\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement>,\n value: string,\n validationState: HvInputValidity\n ) => void;\n /**\n * The function that will be executed onBlur, allows checking the value state,\n * it receives the value.\n */\n onFocus?: (\n event: React.FocusEvent<HTMLTextAreaElement>,\n value: string\n ) => void;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<any, HvTextAreaProps>((props, ref) => {\n const {\n id,\n className,\n classes: classesProp,\n name,\n label,\n description,\n placeholder,\n status,\n statusMessage,\n validationMessages,\n maxCharQuantity,\n minCharQuantity,\n value: valueProp,\n inputRef: inputRefProp,\n rows = 1,\n defaultValue = \"\",\n middleCountLabel = \"/\",\n countCharProps = {},\n inputProps = {},\n required = false,\n readOnly = false,\n disabled = false,\n autoFocus = false,\n resizable = false,\n autoScroll = false,\n hideCounter = false,\n blockMax = false,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n validation,\n onChange,\n onBlur,\n onFocus,\n ...others\n } = useDefaultProps(\"HvTextArea\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvtextarea\");\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef<boolean>(false);\n\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n const [focused, setFocused] = useState<boolean>(false);\n\n const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const isStateInvalid = isInvalid(validationState);\n\n const isEmptyValue = value == null || value === \"\";\n\n const hasLabel = label != null;\n\n const hasDescription = description != null;\n\n const hasCounter = maxCharQuantity != null && !hideCounter;\n\n // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n // Dependencies must be more explicit so we set\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n [validationMessages]\n );\n\n // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n // and returns the validity state of the input.\n const performValidation = useCallback(() => {\n const inputValidity = validateInput(\n inputRef.current,\n value,\n required,\n minCharQuantity,\n maxCharQuantity,\n validationTypes.none,\n validation\n );\n\n // This will only run if status is uncontrolled\n setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n // This will only run if statusMessage is uncontrolled\n setValidationMessage(\n computeValidationMessage(inputValidity, errorMessages)\n );\n\n return inputValidity;\n }, [\n errorMessages,\n inputRef,\n isEmptyValue,\n maxCharQuantity,\n minCharQuantity,\n required,\n setValidationMessage,\n setValidationState,\n validation,\n value,\n ]);\n\n const isOverflow = (currentValue) =>\n maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;\n\n /**\n * Limit the string to the maxCharQuantity length.\n *\n * @param value - string to evaluate\n * @returns {string|*} - string according the limit\n */\n const limitValue = (currentValue) => {\n if (currentValue === undefined || !blockMax) return currentValue;\n return !isOverflow(currentValue)\n ? currentValue\n : currentValue.substring(0, maxCharQuantity);\n };\n\n /**\n * Validates the text area updating the state and modifying the warning text, also executes\n * the user provided onBlur passing the current validation status and value.\n *\n * @returns {undefined}\n */\n const onContainerBlurHandler = (event) => {\n setFocused(false);\n\n const inputValidity = performValidation();\n\n onBlur?.(event, value, inputValidity);\n };\n\n /**\n * Updates the length of the string while is being inputted, also executes the user onChange\n * allowing the customization of the input if required.\n *\n * @param {String} value - The value provided by the HvInput\n */\n const onChangeHandler = (event, currentValue) => {\n isDirty.current = true;\n\n const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n // Set the input value (only when value is uncontrolled)\n setValue(limitedValue);\n\n onChange?.(event, limitedValue);\n };\n\n /**\n * Updates the state putting again the value from the state because the input value is\n * not automatically manage, it also executes the onFocus function from the user passing the value\n */\n const onFocusHandler = (event) => {\n setFocused(true);\n\n // Reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n onFocus?.(event, value);\n };\n\n const isScrolledDown = useCallback(() => {\n const el = inputRef.current;\n return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n }, [inputRef]);\n\n const scrollDown = useCallback(() => {\n const el = inputRef.current;\n if (el != null) {\n el.scrollTop = el.scrollHeight - el.clientHeight;\n }\n }, [inputRef]);\n\n const addScrollListener = useCallback(() => {\n const scrollHandler = {\n handleEvent: () => {\n setAutoScrolling(isScrolledDown());\n },\n };\n inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n }, [inputRef, isScrolledDown]);\n\n useEffect(() => {\n if (autoScroll) {\n addScrollListener();\n }\n }, [autoScroll, addScrollListener]);\n\n useEffect(() => {\n if (autoScrolling) {\n scrollDown();\n }\n }, [valueProp, autoScrolling, scrollDown]);\n\n // Run initial validation after first render\n // and also when any validation condition changes\n useEffect(() => {\n if (focused || (!isDirty.current && isEmptyValue)) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [focused, isEmptyValue, performValidation]);\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 any of the built-in validations are active\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined &&\n hasBuiltInValidations(\n required,\n validationTypes.none,\n minCharQuantity,\n // If blockMax is true maxCharQuantity will never produce an error\n // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n maxCharQuantity != null && (blockMax !== true || value != null)\n ? maxCharQuantity\n : null,\n validation,\n inputProps\n )));\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 required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n {\n [classes.resizable]: resizable,\n [classes.disabled]: disabled,\n [classes.invalid]: isStateInvalid,\n },\n className\n )}\n onBlur={onContainerBlurHandler}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n className={classes.label}\n id={setId(id, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n className={classes.description}\n id={setId(elementId, \"description\")}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n {hasCounter && (\n <HvCharCounter\n id={setId(elementId, \"charCounter\")}\n className={classes.characterCounter}\n separator={middleCountLabel}\n currentCharQuantity={value.length}\n maxCharQuantity={maxCharQuantity}\n {...countCharProps}\n />\n )}\n\n <HvBaseInput\n classes={{\n root: classes.baseInput,\n input: classes.input,\n inputResizable: classes.inputResizable,\n }}\n id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n value={value}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChangeHandler}\n autoFocus={autoFocus}\n onFocus={onFocusHandler}\n placeholder={placeholder}\n invalid={isStateInvalid}\n resizable={resizable}\n multiline\n rows={rows}\n inputProps={{\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : (description && setId(elementId, \"description\")) || undefined,\n \"aria-controls\": maxCharQuantity\n ? setId(elementId, \"charCounter\")\n : undefined,\n ...inputProps,\n }}\n inputRef={forkedRef}\n {...others}\n />\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["validationState","validationStates"],"mappings":"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"}
1
+ {"version":3,"file":"TextArea.mjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import {\n useCallback,\n useRef,\n useState,\n useMemo,\n useEffect,\n forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport validationStates, {\n isInvalid,\n} from \"../Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"../types/forms\";\nimport {\n computeValidationMessage,\n computeValidationState,\n DEFAULT_ERROR_MESSAGES,\n hasBuiltInValidations,\n HvInputValidity,\n validateInput,\n validationTypes,\n} from \"../BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n HvCharCounter,\n HvCharCounterProps,\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n extends Omit<\n HvBaseInputProps,\n \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\" | \"placeholder\"\n > {\n /** The placeholder value of the text area. */\n placeholder?: 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?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\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?: HvFormStatus;\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * Text between the current char counter and max value.\n */\n middleCountLabel?: string;\n /**\n * An Object containing the various texts associated with the input.\n */\n validationMessages?: HvValidationMessages;\n /**\n * The custom validation function, it receives the value and must return\n * either `true` for valid or `false` for invalid, default validations would only\n * occur if this function is null or undefined\n */\n validation?: (value: string) => boolean;\n /**\n * The maximum allowed length of the characters, if this value is null no check\n * will be performed.\n */\n maxCharQuantity?: number;\n /**\n * The minimum allowed length of the characters, if this value is null no check\n * will be perform.\n */\n minCharQuantity?: number;\n /**\n * If `true` it should autofocus.\n */\n autoFocus?: boolean;\n /**\n * The number of rows of the text area\n */\n rows?: number;\n /**\n * If `true` the component is resizable.\n */\n resizable?: boolean;\n /**\n * Auto-scroll: automatically scroll to the end on value changes.\n * Will stop if the user scrolls up and resume if scrolled to the bottom.\n */\n autoScroll?: boolean;\n /**\n * If true it isn't possible to pass the `maxCharQuantity`\n */\n blockMax?: boolean;\n /**\n * If `true` the character counter isn't shown even if maxCharQuantity is set.\n */\n hideCounter?: boolean;\n /**\n * Props passed to the char count.\n */\n countCharProps?: Partial<HvCharCounterProps>;\n /**\n * Called back when the value is changed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLTextAreaElement>,\n value: string\n ) => void;\n /**\n * Called back when the value is changed.\n */\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement>,\n value: string,\n validationState: HvInputValidity\n ) => void;\n /**\n * The function that will be executed onBlur, allows checking the value state,\n * it receives the value.\n */\n onFocus?: (\n event: React.FocusEvent<HTMLTextAreaElement>,\n value: string\n ) => void;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<any, HvTextAreaProps>((props, ref) => {\n const {\n id,\n className,\n classes: classesProp,\n name,\n label,\n description,\n placeholder,\n status,\n statusMessage,\n validationMessages,\n maxCharQuantity,\n minCharQuantity,\n value: valueProp,\n inputRef: inputRefProp,\n rows = 1,\n defaultValue = \"\",\n middleCountLabel = \"/\",\n countCharProps = {},\n inputProps = {},\n required = false,\n readOnly = false,\n disabled = false,\n autoFocus = false,\n resizable = false,\n autoScroll = false,\n hideCounter = false,\n blockMax = false,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": ariaErrorMessage,\n validation,\n onChange,\n onBlur,\n onFocus,\n ...others\n } = useDefaultProps(\"HvTextArea\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvtextarea\");\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef<boolean>(false);\n\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n const [focused, setFocused] = useState<boolean>(false);\n\n const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const isStateInvalid = isInvalid(validationState);\n\n const isEmptyValue = value == null || value === \"\";\n\n const hasLabel = label != null;\n\n const hasDescription = description != null;\n\n const hasCounter = maxCharQuantity != null && !hideCounter;\n\n // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n // Dependencies must be more explicit so we set\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n [validationMessages]\n );\n\n // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n // and returns the validity state of the input.\n const performValidation = useCallback(() => {\n const inputValidity = validateInput(\n inputRef.current,\n value,\n required,\n minCharQuantity,\n maxCharQuantity,\n validationTypes.none,\n validation\n );\n\n // This will only run if status is uncontrolled\n setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n // This will only run if statusMessage is uncontrolled\n setValidationMessage(\n computeValidationMessage(inputValidity, errorMessages)\n );\n\n return inputValidity;\n }, [\n errorMessages,\n inputRef,\n isEmptyValue,\n maxCharQuantity,\n minCharQuantity,\n required,\n setValidationMessage,\n setValidationState,\n validation,\n value,\n ]);\n\n /**\n * Limit the string to the maxCharQuantity length.\n */\n const limitValue = (currentValue: string) => {\n if (currentValue === undefined || !blockMax) return currentValue;\n const isOverflow =\n maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;\n\n return !isOverflow\n ? currentValue\n : currentValue.substring(0, maxCharQuantity);\n };\n\n /**\n * Validates the text area updating the state and modifying the warning text, also executes\n * the user provided onBlur passing the current validation status and value.\n */\n const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n setFocused(false);\n\n const inputValidity = performValidation();\n\n onBlur?.(event as any, value, inputValidity);\n };\n\n /**\n * Updates the length of the string while is being inputted, also executes the user onChange\n * allowing the customization of the input if required.\n */\n const onChangeHandler: HvBaseInputProps[\"onChange\"] = (\n event,\n currentValue\n ) => {\n isDirty.current = true;\n\n const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n // Set the input value (only when value is uncontrolled)\n setValue(limitedValue);\n\n onChange?.(event as any, limitedValue);\n };\n\n /**\n * Updates the state putting again the value from the state because the input value is\n * not automatically manage, it also executes the onFocus function from the user passing the value\n */\n const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n setFocused(true);\n\n // Reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n onFocus?.(event as any, value);\n };\n\n const isScrolledDown = useCallback(() => {\n const el = inputRef.current;\n return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n }, [inputRef]);\n\n const scrollDown = useCallback(() => {\n const el = inputRef.current;\n if (el != null) {\n el.scrollTop = el.scrollHeight - el.clientHeight;\n }\n }, [inputRef]);\n\n const addScrollListener = useCallback(() => {\n const scrollHandler = {\n handleEvent: () => {\n setAutoScrolling(isScrolledDown());\n },\n };\n inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n }, [inputRef, isScrolledDown]);\n\n useEffect(() => {\n if (autoScroll) {\n addScrollListener();\n }\n }, [autoScroll, addScrollListener]);\n\n useEffect(() => {\n if (autoScrolling) {\n scrollDown();\n }\n }, [valueProp, autoScrolling, scrollDown]);\n\n // Run initial validation after first render\n // and also when any validation condition changes\n useEffect(() => {\n if (focused || (!isDirty.current && isEmptyValue)) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [focused, isEmptyValue, performValidation]);\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 any of the built-in validations are active\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined &&\n hasBuiltInValidations(\n required,\n validationTypes.none,\n minCharQuantity,\n // If blockMax is true maxCharQuantity will never produce an error\n // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n maxCharQuantity != null && (blockMax !== true || value != null)\n ? maxCharQuantity\n : null,\n validation,\n inputProps\n )));\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 required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n {\n [classes.resizable]: resizable,\n [classes.disabled]: disabled,\n [classes.invalid]: isStateInvalid,\n },\n className\n )}\n onBlur={onContainerBlurHandler}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n className={classes.label}\n id={setId(id, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n className={classes.description}\n id={setId(elementId, \"description\")}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n {hasCounter && (\n <HvCharCounter\n id={setId(elementId, \"charCounter\")}\n className={classes.characterCounter}\n separator={middleCountLabel}\n currentCharQuantity={value.length}\n maxCharQuantity={maxCharQuantity}\n {...countCharProps}\n />\n )}\n\n <HvBaseInput\n classes={{\n root: classes.baseInput,\n input: classes.input,\n inputResizable: classes.inputResizable,\n }}\n id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n value={value}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChangeHandler}\n autoFocus={autoFocus}\n onFocus={onFocusHandler}\n placeholder={placeholder}\n invalid={isStateInvalid}\n resizable={resizable}\n multiline\n rows={rows}\n inputProps={{\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : (description && setId(elementId, \"description\")) || undefined,\n \"aria-controls\": maxCharQuantity\n ? setId(elementId, \"charCounter\")\n : undefined,\n ...inputProps,\n }}\n inputRef={forkedRef}\n {...others}\n />\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["validationState","validationStates"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"formatUtils.mjs","sources":["../../../src/TimeAgo/formatUtils.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport calendar from \"dayjs/plugin/calendar\";\nimport duration from \"dayjs/plugin/duration\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport updateLocale from \"dayjs/plugin/updateLocale\";\n\n/**\n * Relative time thresholds defined by\n * {@link https://xd.adobe.com/view/1b7df235-5cf8-4b51-a2f0-0be1bb591c55-4e2e/ Design System}\n *\n * Implementation using day.js {@link https://day.js.org/docs/en/customization/relative-time relativeTime}\n */\nconst thresholds = [\n { l: \"s\", r: 119, d: \"second\" },\n { l: \"m\", r: 1 },\n { l: \"mm\", r: 59, d: \"minute\" },\n { l: \"h\", r: 1 },\n { l: \"hh\", r: 23, d: \"hour\" },\n { l: \"d\", r: 1 },\n { l: \"dd\", r: 29, d: \"day\" },\n { l: \"M\", r: 1 },\n { l: \"MM\", r: 11, d: \"month\" },\n { l: \"y\", r: 17 },\n { l: \"yy\", d: \"year\" },\n];\n\ndayjs.extend(localeData);\ndayjs.extend(duration);\ndayjs.extend(calendar);\ndayjs.extend(localizedFormat);\ndayjs.extend(relativeTime, { thresholds });\ndayjs.extend(updateLocale);\n\nexport const secondsUntilNextDay = (date = new Date()) => {\n const midnight = new Date(date.getTime());\n\n midnight.setDate(midnight.getDate() + 1);\n midnight.setHours(0);\n midnight.setMinutes(0);\n midnight.setSeconds(0);\n midnight.setMilliseconds(0);\n\n return (midnight.getTime() - date.getTime()) / 1000;\n};\n\nconst secondsUntilNextWeek = (date = new Date()) => {\n const firstMonthDayOfWeek = date.getDate() - date.getDay();\n const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7; // auto roll over to next month if needed\n\n const firstDayNextWeek = new Date(date.getTime());\n\n firstDayNextWeek.setDate(firstMonthDayOfNextWeek);\n firstDayNextWeek.setHours(0);\n firstDayNextWeek.setMinutes(0);\n firstDayNextWeek.setSeconds(0);\n firstDayNextWeek.setMilliseconds(0);\n\n return (firstDayNextWeek.getTime() - date.getTime()) / 1000;\n};\n\n/**\n * @typedef {Object} TimeAgo\n * @property {string} timeAgo - the formatted date using the \"time ago format\"\n * @property {number} delay - the time until the date needs to be updated\n */\n\n/**\n * Formats a date to the a relative time format using dayjs.\n *\n * @param {Date} date - date to format.\n * @param {String} locale - locale to use.\n * @param {Boolean} [showSeconds=false] - if seconds should be part of the result.\n * @param {Date} referenceDate - reference date to use when formatting (defaults to current date).\n *\n * @return {TimeAgo} the formatted date using the \"time ago format\" and the time until it needs to be updated\n */\nexport const formatTimeAgo = (\n date,\n locale,\n showSeconds = false,\n referenceDate = new Date()\n) => {\n const dayReferenceDate = dayjs(referenceDate);\n const dayDate = dayjs(date).locale(locale);\n\n const dayDiffSeconds = dayReferenceDate.diff(dayDate, \"second\");\n\n const formatUseSeconds = showSeconds ? \"LTS\" : \"LT\";\n\n // check if the date is after the reference date\n if (date.getTime() > referenceDate.getTime()) {\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: (date.getTime() - referenceDate.getTime()) / 1000,\n };\n }\n\n // just now, until the 2 minutes\n if (dayDiffSeconds < 120) {\n return {\n timeAgo: dayjs\n .duration(dayDiffSeconds, \"second\")\n .locale(locale)\n .humanize(),\n delay: 120 - dayDiffSeconds,\n };\n }\n\n // ago in minutes, until the 1 hour mark\n const dayDiffMinutes = dayReferenceDate.diff(dayDate, \"minute\");\n\n if (dayDiffMinutes < 60) {\n return {\n timeAgo: dayjs\n .duration(-dayDiffMinutes, \"minute\")\n .locale(locale)\n .humanize(true),\n delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds,\n };\n }\n\n // formatted date with text description for today\n if (dayReferenceDate.isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with text description for yesterday\n if (dayReferenceDate.subtract(1, \"day\").isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with week during the current week\n if (dayDate.isSame(dayReferenceDate, \"week\")) {\n return {\n timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),\n delay: secondsUntilNextWeek(date),\n };\n }\n\n // formatted without special gimmicks\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: 0,\n };\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"formatUtils.mjs","sources":["../../../src/TimeAgo/formatUtils.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport calendar from \"dayjs/plugin/calendar\";\nimport duration from \"dayjs/plugin/duration\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport updateLocale from \"dayjs/plugin/updateLocale\";\n\n/**\n * Relative time thresholds defined by\n * {@link https://xd.adobe.com/view/1b7df235-5cf8-4b51-a2f0-0be1bb591c55-4e2e/ Design System}\n *\n * Implementation using day.js {@link https://day.js.org/docs/en/customization/relative-time relativeTime}\n */\nconst thresholds = [\n { l: \"s\", r: 119, d: \"second\" },\n { l: \"m\", r: 1 },\n { l: \"mm\", r: 59, d: \"minute\" },\n { l: \"h\", r: 1 },\n { l: \"hh\", r: 23, d: \"hour\" },\n { l: \"d\", r: 1 },\n { l: \"dd\", r: 29, d: \"day\" },\n { l: \"M\", r: 1 },\n { l: \"MM\", r: 11, d: \"month\" },\n { l: \"y\", r: 17 },\n { l: \"yy\", d: \"year\" },\n];\n\ndayjs.extend(localeData);\ndayjs.extend(duration);\ndayjs.extend(calendar);\ndayjs.extend(localizedFormat);\ndayjs.extend(relativeTime, { thresholds });\ndayjs.extend(updateLocale);\n\nexport const secondsUntilNextDay = (date = new Date()) => {\n const midnight = new Date(date.getTime());\n\n midnight.setDate(midnight.getDate() + 1);\n midnight.setHours(0);\n midnight.setMinutes(0);\n midnight.setSeconds(0);\n midnight.setMilliseconds(0);\n\n return (midnight.getTime() - date.getTime()) / 1000;\n};\n\nconst secondsUntilNextWeek = (date = new Date()) => {\n const firstMonthDayOfWeek = date.getDate() - date.getDay();\n const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7; // auto roll over to next month if needed\n\n const firstDayNextWeek = new Date(date.getTime());\n\n firstDayNextWeek.setDate(firstMonthDayOfNextWeek);\n firstDayNextWeek.setHours(0);\n firstDayNextWeek.setMinutes(0);\n firstDayNextWeek.setSeconds(0);\n firstDayNextWeek.setMilliseconds(0);\n\n return (firstDayNextWeek.getTime() - date.getTime()) / 1000;\n};\n\n/**\n * @typedef {Object} TimeAgo\n * @property {string} timeAgo - the formatted date using the \"time ago format\"\n * @property {number} delay - the time until the date needs to be updated\n */\n\n/**\n * Formats a date to the a relative time format using dayjs.\n *\n * @param {Date} date - date to format.\n * @param {String} locale - locale to use.\n * @param {Boolean} [showSeconds=false] - if seconds should be part of the result.\n * @param {Date} referenceDate - reference date to use when formatting (defaults to current date).\n *\n * @return {TimeAgo} the formatted date using the \"time ago format\" and the time until it needs to be updated\n */\nexport const formatTimeAgo = (\n date: Date,\n locale: string,\n showSeconds = false,\n referenceDate = new Date()\n) => {\n const dayReferenceDate = dayjs(referenceDate);\n const dayDate = dayjs(date).locale(locale);\n\n const dayDiffSeconds = dayReferenceDate.diff(dayDate, \"second\");\n\n const formatUseSeconds = showSeconds ? \"LTS\" : \"LT\";\n\n // check if the date is after the reference date\n if (date.getTime() > referenceDate.getTime()) {\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: (date.getTime() - referenceDate.getTime()) / 1000,\n };\n }\n\n // just now, until the 2 minutes\n if (dayDiffSeconds < 120) {\n return {\n timeAgo: dayjs\n .duration(dayDiffSeconds, \"second\")\n .locale(locale)\n .humanize(),\n delay: 120 - dayDiffSeconds,\n };\n }\n\n // ago in minutes, until the 1 hour mark\n const dayDiffMinutes = dayReferenceDate.diff(dayDate, \"minute\");\n\n if (dayDiffMinutes < 60) {\n return {\n timeAgo: dayjs\n .duration(-dayDiffMinutes, \"minute\")\n .locale(locale)\n .humanize(true),\n delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds,\n };\n }\n\n // formatted date with text description for today\n if (dayReferenceDate.isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with text description for yesterday\n if (dayReferenceDate.subtract(1, \"day\").isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with week during the current week\n if (dayDate.isSame(dayReferenceDate, \"week\")) {\n return {\n timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),\n delay: secondsUntilNextWeek(date),\n };\n }\n\n // formatted without special gimmicks\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: 0,\n };\n};\n"],"names":[],"mappings":"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"}
@@ -6,7 +6,7 @@ const fmt = (timestamp, locale, showSeconds) => {
6
6
  return formatTimeAgo(new Date(timestampMs), locale, showSeconds);
7
7
  };
8
8
  function useTimeAgo(timestamp, options) {
9
- const { locale, disableRefresh = false, showSeconds = false } = options;
9
+ const { locale, disableRefresh = false, showSeconds = false } = options || {};
10
10
  const [timeAgo, setTimeAgo] = useState(fmt(timestamp, locale, showSeconds));
11
11
  const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1e3;
12
12
  useEffect(() => {