@hitachivantara/uikit-react-core 5.26.6 → 5.27.0

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs

@@ -29,13 +29,11 @@ const HvActionsGeneric = (props) => {
     css
   } = ActionsGeneric_styles.useClasses(classesProp);
   const {
-    activeTheme,
-    selectedMode
+    colors
   } = useTheme.useTheme();
   if (!Array.isArray(actions))
     return React.isValidElement(actions) ? actions : null;
   const renderButton = (action, idx) => {
-    var _a;
     const {
       disabled: actDisabled,
       id: actId,
@@ -52,7 +50,7 @@ const HvActionsGeneric = (props) => {
       variant: category,
       className: cx(css({
         "&:hover": {
-          backgroundColor: hexToRgbA.hexToRgbA(((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].base_light) || uikitStyles.theme.colors.base_light, 0.3)
+          backgroundColor: hexToRgbA.hexToRgbA((colors == null ? void 0 : colors.base_light) || uikitStyles.theme.colors.base_light, 0.3)
         }
       }), classes.button),
       disabled: actDisabled ?? disabled,

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                activeTheme?.colors?.modes[selectedMode].base_light ||\n                  theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","props","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","HvButton","variant","backgroundColor","hexToRgbA","colors","modes","base_light","theme","button","onClick","event","startIcon","children","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","_Fragment","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","color","placement","dataList","keepOpened","disablePortal","actionOverflow","length","actionContainer"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { colors } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                colors?.base_light || theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","props","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","useDefaultProps","cx","css","useClasses","colors","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","HvButton","variant","backgroundColor","hexToRgbA","base_light","theme","button","onClick","event","startIcon","children","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","_Fragment","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","color","placement","dataList","keepOpened","disablePortal","actionOverflow","length","actionContainer"],"mappings":"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"}

package/dist/cjs/components/BulkActions/BulkActions.cjs

@@ -12,7 +12,6 @@ const Typography = require("../Typography/Typography.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
 const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
 const HvBulkActions = (props) => {
-  var _a;
   const {
     id,
     className,
@@ -40,9 +39,9 @@ const HvBulkActions = (props) => {
   } = BulkActions_styles.useClasses(classesProp);
   const {
     activeTheme,
-    selectedMode
+    colors
   } = useTheme.useTheme();
-  const baseColor = ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].base_light) || uikitStyles.theme.colors.base_light;
+  const baseColor = (colors == null ? void 0 : colors.base_light) || uikitStyles.theme.colors.base_light;
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
   const selectAllLabelComponent = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {

package/dist/cjs/components/BulkActions/BulkActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.cjs","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvButton,\n  HvButtonProps,\n  HvButtonVariant,\n} from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const baseColor =\n    activeTheme?.colors?.modes[selectedMode].base_light ||\n    theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              color: theme.bulkActions.semanticColor,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.bulkActions.semanticColor,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","staticClasses","selectAll","color","bulkActions","semanticColor","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","actionButtonVariant","onClick","HvActionsGeneric","category"],"mappings":"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"}
+{"version":3,"file":"BulkActions.cjs","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvButton,\n  HvButtonProps,\n  HvButtonVariant,\n} from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, colors } = useTheme();\n\n  const baseColor = colors?.base_light || theme.colors.base_light;\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        isSemantic &&\n          css({\n            [`& .${staticClasses.selectAll} div`]: {\n              color: theme.bulkActions.semanticColor,\n\n              \"&:hover:not(:disabled)\": {\n                backgroundColor: hexToRgbA(baseColor, 0.3),\n              },\n\n              \"& *\": {\n                color: theme.bulkActions.semanticColor,\n                backgroundColor: \"transparent\",\n              },\n            },\n\n            [`& .${staticClasses.selectAll}:focus-within div`]: {\n              backgroundColor: hexToRgbA(baseColor, 0.3),\n            },\n          }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","colors","useTheme","baseColor","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","staticClasses","selectAll","color","bulkActions","semanticColor","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","actionButtonVariant","onClick","HvActionsGeneric","category"],"mappings":"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"}

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -18,7 +18,6 @@ const React__default = /* @__PURE__ */ _interopDefault(React);
 const MuiDialog__default = /* @__PURE__ */ _interopDefault(MuiDialog);
 const MuiBackdrop__default = /* @__PURE__ */ _interopDefault(MuiBackdrop);
 const HvDialog = (props) => {
-  var _a;
   const {
     variant,
     classes: classesProp,
@@ -41,8 +40,7 @@ const HvDialog = (props) => {
   delete others.fullScreen;
   const {
     rootId,
-    activeTheme,
-    selectedMode
+    colors
   } = useTheme.useTheme();
   const wrappedClose = React.useCallback((event, bypassValidation = false, reason) => {
     if (bypassValidation || !disableBackdropClick) {
@@ -88,7 +86,7 @@ const HvDialog = (props) => {
       backdrop: {
         classes: {
           root: cx(css({
-            background: hexToRgbA.hexToRgbA(((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4, 0.8)
+            background: hexToRgbA.hexToRgbA((colors == null ? void 0 : colors.atmo4) || uikitStyles.theme.colors.atmo4, 0.8)
           }), classes.background)
         }
       }

package/dist/cjs/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId, activeTheme, selectedMode } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={\n        typeof window !== \"undefined\"\n          ? // TODO: review\n            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n            document.getElementById(rootId || \"\") || document.body\n          : undefined\n      }\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(\n                  activeTheme?.colors?.modes[selectedMode].atmo4 ||\n                    theme.colors.atmo4,\n                  0.8\n                ),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","fullScreen","rootId","activeTheme","selectedMode","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","MuiBackdrop","onClick","MuiDialog","container","window","body","undefined","root","position","ref","slotProps","background","hexToRgbA","colors","modes","atmo4","theme","PaperProps","paper","statusBar","HvButton","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId, colors } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={\n        typeof window !== \"undefined\"\n          ? // TODO: review\n            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n            document.getElementById(rootId || \"\") || document.body\n          : undefined\n      }\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","fullScreen","rootId","colors","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","MuiBackdrop","onClick","MuiDialog","container","window","body","undefined","root","position","ref","slotProps","background","hexToRgbA","atmo4","theme","PaperProps","paper","statusBar","HvButton","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -35,6 +35,7 @@ const HvDrawer = (props) => {
     cx
   } = Drawer_styles.useClasses(classesProp);
   const {
+    colors,
     activeTheme,
     rootId
   } = useTheme.useTheme();
@@ -47,7 +48,7 @@ const HvDrawer = (props) => {
   React.useEffect(() => {
     setBackgroundColorValue(theme.getVarValue(uikitStyles.theme.drawer.backDropBackgroundColor, rootId) || (activeTheme == null ? void 0 : activeTheme.drawer.backDropBackgroundColor) || "");
     setBackgroundColor(getBackgroundColor(backgroundColorValue));
-  }, [activeTheme == null ? void 0 : activeTheme.colors.modes.selectedMode, backgroundColorValue, setBackgroundColor, rootId, activeTheme == null ? void 0 : activeTheme.drawer.backDropBackgroundColor]);
+  }, [colors, backgroundColorValue, setBackgroundColor, rootId, activeTheme == null ? void 0 : activeTheme.drawer.backDropBackgroundColor]);
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Drawer, {
     className: cx(classes.root, className),
     id,

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    activeTheme?.colors.modes.selectedMode,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","css","cx","useClasses","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","colors","modes","selectedMode","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;;;AAsEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAAA,wBAAwBD,KAAK,IAAIE,UAAAA,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOaG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAEnC,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,MAAAA,SACtDC,MAAYC,YAAAA,kBAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEMS,QAAAA,qBAAqBA,MAAMC,2BAAAA,IAACC,uBAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BpB,cAC9BqB,YAAAA,YAAYL,oBAAoBhB,aAAa,KAAK,IAClDgB;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,MAC5CzB,SAAAA,mBAAmBuB,oBAAoB,CACzC;AAEAe,QAAAA,UAAU,MAAM;AAEZZ,4BAAAA,MAAAA,YAAYC,kBAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB7B,uBAAAA,mBAAmBuB,oBAAoB,CAAC;AAAA,EAC1D,GAAA,CACDH,2CAAamB,OAAOC,MAAMC,cAC1BlB,sBACAc,oBACAhB,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAED,yCACGa,SAAAA,QAAS;AAAA,IACRpC,WAAWY,GAAGX,QAAQoC,MAAMrC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACAiC,YAAY;AAAA,MACVrC,SAAS;AAAA,QACPoC,MAAMpC,QAAQsC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbvC,SAAS;AAAA,QACPoC,MAAMzB,GAAGD,IAAI;AAAA,UAAEmB;AAAAA,QAAAA,CAAiB,GAAG7B,QAAQwC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAnC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVqB,2BAAAA,IAACiB,iBAAQ;AAAA,MACPvC,IAAIwC,MAAAA,MAAMxC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQ2C;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAASxC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBqB,2BAAAA,IAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTxB,QAAQ;AAAA,EAAA,CACA;AAEf;;;"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { colors, activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    colors,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","css","cx","useClasses","colors","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;;;AAsEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAAA,wBAAwBD,KAAK,IAAIE,UAAAA,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOaG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAQC;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAE3C,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,MAAAA,SACtDC,MAAYC,YAAAA,kBAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEMS,QAAAA,qBAAqBA,MAAMC,2BAAAA,IAACC,uBAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BrB,cAC9BsB,YAAAA,YAAYL,oBAAoBjB,aAAa,KAAK,IAClDiB;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,MAC5C1B,SAAAA,mBAAmBwB,oBAAoB,CACzC;AAEAe,QAAAA,UAAU,MAAM;AAEZZ,4BAAAA,MAAAA,YAAYC,kBAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB9B,uBAAAA,mBAAmBwB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,CACDJ,QACAI,sBACAc,oBACAhB,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAED,yCACGU,SAAAA,QAAS;AAAA,IACRlC,WAAWY,GAAGX,QAAQkC,MAAMnC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACA+B,YAAY;AAAA,MACVnC,SAAS;AAAA,QACPkC,MAAMlC,QAAQoC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbrC,SAAS;AAAA,QACPkC,MAAMvB,GAAGD,IAAI;AAAA,UAAEoB;AAAAA,QAAAA,CAAiB,GAAG9B,QAAQsC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAjC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVsB,2BAAAA,IAACc,iBAAQ;AAAA,MACPrC,IAAIsC,MAAAA,MAAMtC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQyC;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAAStC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBsB,2BAAAA,IAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTzB,QAAQ;AAAA,EAAA,CACA;AAEf;;;"}

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs

@@ -43,7 +43,7 @@ const HvScrollToHorizontal = (props) => {
   const upMd = material.useMediaQuery(muiTheme.breakpoints.up("md"));
   const {
     activeTheme,
-    selectedMode
+    colors
   } = useTheme.useTheme();
   const elementId = useUniqueId.useUniqueId(id, "hvHorizontalScrollto");
   const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
@@ -103,7 +103,7 @@ const HvScrollToHorizontal = (props) => {
       marginBottom: 0,
       marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
       marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
-      backgroundColor: hexToRgbA.hexToRgbA(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
+      backgroundColor: hexToRgbA.hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
     }), classes.root, {
       [classes.positionSticky]: position === "sticky",
       [classes.positionFixed]: position === "fixed"

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          backgroundColor: hexToRgbA(\n            activeTheme?.colors.modes[selectedMode].atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, colors } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          backgroundColor: hexToRgbA(\n            colors?.atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs

@@ -37,7 +37,7 @@ const HvScrollToVertical = (props) => {
   } = ScrollToVertical_styles.useClasses(classesProp);
   const {
     activeTheme,
-    selectedMode
+    colors
   } = useTheme.useTheme();
   const elementId = useUniqueId.useUniqueId(id, "hvVerticalScrollto");
   const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
@@ -74,7 +74,7 @@ const HvScrollToVertical = (props) => {
     }, option.key || option.label);
   });
   const positionOffset = ScrollToVertical_styles.calculateOffset(options.length);
-  const backgroundColor = hexToRgbA.hexToRgbA(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity);
+  const backgroundColor = hexToRgbA.hexToRgbA(colors == null ? void 0 : colors.atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity);
   return /* @__PURE__ */ jsxRuntime.jsx("ol", {
     className: cx(css({
       backgroundColor

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = hexToRgbA(\n    activeTheme?.colors.modes[selectedMode].atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(\n        css({ backgroundColor }),\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzCC,QAAAA,YAAYC,YAAAA,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,wBACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UAAAA,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACElD,WAAWW,GACTD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GACvB3C,QAAQkD,MACR;AAAA,MACE,CAAClD,QAAQmD,aAAa,GAAG/C,aAAa;AAAA,MACtC,CAACJ,QAAQoD,gBAAgB,GAAGhD,aAAa;AAAA,OAE3CL,SACF;AAAA,IACAO,OAAO;AAAA,MAAE+C,KAAM,cAAab;AAAAA,MAAqB,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM+C,UAETtB;AAAAA,EAAAA,CACC;AAER;;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, colors } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = hexToRgbA(\n    colors?.atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(\n        css({ backgroundColor }),\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","colors","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAEnCC,QAAAA,YAAYC,YAAAA,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,wBACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBvC,QAAQwC,MAAM;AACrD,QAAMC,kBAAkBC,UAAAA,UACtB/B,iCAAQgC,OACRjC,2CAAakC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACEhD,WAAWW,GACTD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GACvB3C,QAAQgD,MACR;AAAA,MACE,CAAChD,QAAQiD,aAAa,GAAG7C,aAAa;AAAA,MACtC,CAACJ,QAAQkD,gBAAgB,GAAG9C,aAAa;AAAA,OAE3CL,SACF;AAAA,IACAO,OAAO;AAAA,MAAE6C,KAAM,cAAaX;AAAAA,MAAqB,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM6C,UAETpB;AAAAA,EAAAA,CACC;AAER;;;"}

package/dist/cjs/components/Table/TableCell/TableCell.cjs

@@ -44,7 +44,7 @@ const HvTableCell = React.forwardRef((props, externalRef) => {
     css
   } = TableCell_styles.useClasses(classesProp);
   const {
-    activeTheme,
+    colors,
     rootId
   } = useTheme.useTheme();
   const tableContext = React.useContext(TableContext.default);
@@ -58,7 +58,7 @@ const HvTableCell = React.forwardRef((props, externalRef) => {
     setSortedColorValue(theme.getVarValue(uikitStyles.theme.table.rowSortedColor, rootId));
     setSortedColorAlpha(theme.getVarValue(uikitStyles.theme.table.rowSortedColorAlpha, rootId));
     setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));
-  }, [activeTheme == null ? void 0 : activeTheme.colors.modes.selectedMode, sortedColorValue, sortedColorAlpha, rootId]);
+  }, [colors, sortedColorValue, sortedColorAlpha, rootId]);
   return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     ref: externalRef,
     role: Component === defaultComponent ? null : "cell",

package/dist/cjs/components/Table/TableCell/TableCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.cjs","sources":["../../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import capitalize from \"lodash/capitalize\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TdHTMLAttributes,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\nconst getSortedColor = (color?: string, alpha?: string) => {\n  return checkValidHexColorValue(color) && alpha\n    ? hexToRgbA(color, parseFloat(alpha))\n    : color;\n};\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = props;\n    const { classes, cx, css } = useClasses(classesProp);\n    const { activeTheme, rootId } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [sortedColorValue, setSortedColorValue] = useState<\n      string | undefined\n    >();\n    const [sortedColorAlpha, setSortedColorAlpha] = useState<\n      string | undefined\n    >();\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    const [sortedColor, setSortedColor] = useState(\n      getSortedColor(sortedColorValue, sortedColorAlpha)\n    );\n\n    useEffect(() => {\n      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));\n      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));\n\n      setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));\n    }, [\n      activeTheme?.colors.modes.selectedMode,\n      sortedColorValue,\n      sortedColorAlpha,\n      rootId,\n    ]);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: sortedColor,\n              },\n            }),\n          stickyColumn &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n              },\n            }),\n          {\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","getSortedColor","color","alpha","checkValidHexColorValue","hexToRgbA","parseFloat","HvTableCell","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sorted","resizable","resizing","others","cx","css","useClasses","activeTheme","rootId","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","sortedColorValue","setSortedColorValue","useState","sortedColorAlpha","setSortedColorAlpha","Component","components","Td","sortedColor","setSortedColor","useEffect","getVarValue","theme","table","rowSortedColor","rowSortedColorAlpha","colors","modes","selectedMode","ref","role","root","staticClasses","backgroundColor","backgroundImage","capitalize","variantList","variantListHead"],"mappings":"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"}
+{"version":3,"file":"TableCell.cjs","sources":["../../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import capitalize from \"lodash/capitalize\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TdHTMLAttributes,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\nconst getSortedColor = (color?: string, alpha?: string) => {\n  return checkValidHexColorValue(color) && alpha\n    ? hexToRgbA(color, parseFloat(alpha))\n    : color;\n};\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = props;\n    const { classes, cx, css } = useClasses(classesProp);\n    const { colors, rootId } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [sortedColorValue, setSortedColorValue] = useState<string>();\n    const [sortedColorAlpha, setSortedColorAlpha] = useState<string>();\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    const [sortedColor, setSortedColor] = useState(\n      getSortedColor(sortedColorValue, sortedColorAlpha)\n    );\n\n    useEffect(() => {\n      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));\n      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));\n\n      setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));\n    }, [colors, sortedColorValue, sortedColorAlpha, rootId]);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: sortedColor,\n              },\n            }),\n          stickyColumn &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n              },\n            }),\n          {\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","getSortedColor","color","alpha","checkValidHexColorValue","hexToRgbA","parseFloat","HvTableCell","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sorted","resizable","resizing","others","cx","css","useClasses","colors","rootId","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","sortedColorValue","setSortedColorValue","useState","sortedColorAlpha","setSortedColorAlpha","Component","components","Td","sortedColor","setSortedColor","useEffect","getVarValue","theme","table","rowSortedColor","rowSortedColorAlpha","ref","role","root","staticClasses","backgroundColor","backgroundImage","capitalize","variantList","variantListHead"],"mappings":"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"}

package/dist/cjs/components/Table/TableHeader/TableHeader.cjs

@@ -37,17 +37,17 @@ const HvTableHeader = React.forwardRef(({
   resizerProps = {},
   resizable = false,
   resizing = false,
+  sortButtonProps,
   ...others
 }, externalRef) => {
-  var _a, _b;
+  var _a;
   const {
     classes,
     cx,
     css
   } = TableHeader_styles.useClasses(classesProp);
   const {
-    activeTheme,
-    selectedMode
+    colors
   } = useTheme.useTheme();
   const tableContext = React.useContext(TableContext.default);
   const tableSectionContext = React.useContext(TableSectionContext.default);
@@ -65,7 +65,7 @@ const HvTableHeader = React.forwardRef(({
     style,
     className: cx(classes.root, classes[type], type === "body" && css({
       [`&.${TableHeader_styles.staticClasses.sorted}`]: {
-        backgroundColor: material.alpha(material.hexToRgb(((_b = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _b.modes[selectedMode].atmo1) || uikitStyles.theme.colors.atmo1), 0.4)
+        backgroundColor: material.alpha(material.hexToRgb((colors == null ? void 0 : colors.atmo1) || uikitStyles.theme.colors.atmo1), 0.4)
       }
     }), {
       [classes.groupColumnMostLeft]: groupColumnMostLeft,
@@ -91,6 +91,8 @@ const HvTableHeader = React.forwardRef(({
         className: classes.sortButton,
         icon: true,
         overrideIconColors: false,
+        "aria-label": "Sort",
+        ...sortButtonProps,
         children: /* @__PURE__ */ jsxRuntime.jsx(Sort, {
           className: classes.sortIcon
         })