@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/esm/components/Table/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../../src/components/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ThHTMLAttributes,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport styled from \"@emotion/styled\";\n\nimport { hexToRgb, alpha } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport tableHeaderClasses, { HvTableHeaderClasses } from \"./tableHeaderClasses\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { getSortIcon, isParagraph } from \"./utils\";\nimport {\n  StyledHeaderContent,\n  StyledResizer,\n  StyledButton,\n  StyledTypography,\n} from \"./TableHeader.styles\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\n\nexport interface HvTableHeaderProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\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 sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n}\n\nconst defaultComponent = \"th\";\n\ninterface StyledTableHeaderProps {\n  $sorted: boolean;\n  $resizable: boolean;\n  $resizing: boolean;\n  $groupColumnMostLeft: boolean;\n  $groupColumnMostRight: boolean;\n  $stickyColumn: boolean;\n  $stickyColumnMostLeft: boolean;\n  $stickyColumnLeastRight: boolean;\n  $variantList: boolean;\n  $align: string;\n  $variant: string;\n  $type: string;\n  $atmo1Color: string;\n}\n\nconst StyledTableHeader = (c: any) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $sorted,\n      $resizable,\n      $resizing,\n      $groupColumnMostLeft,\n      $groupColumnMostRight,\n      $stickyColumn,\n      $stickyColumnMostLeft,\n      $stickyColumnLeastRight,\n      $variantList,\n      $align,\n      $variant,\n      $type,\n      $atmo1Color,\n    }: StyledTableHeaderProps) => ({\n      // root\n      \"--first-row-cell-height\": \"52px\",\n      \"--cell-height\": \"32px\",\n      height: \"var(--cell-height)\",\n      verticalAlign: \"inherit\",\n      textAlign: \"left\",\n      padding: theme.spacing([0, \"xs\", 0, 32]),\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n\n      ...($sorted && {\n        [`& .${tableHeaderClasses.sortIcon}`]: {\n          visibility: \"visible\",\n        },\n      }),\n      ...($resizable && {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($resizing && {\n        borderRight: `solid 2px ${theme.colors.secondary}`,\n      }),\n      ...($groupColumnMostLeft && {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($groupColumnMostRight && {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        // due to the \":has()\" selector not being supported in browsers,\n        // this need to be managed with inline styles\n        // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n        // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n        \"&:last-child\": {\n          borderRight: 0,\n        },\n        [`&+:not(.${tableHeaderClasses.stickyColumn})`]: {\n          borderLeft: 0,\n        },\n      }),\n      ...($stickyColumn && {\n        position: \"sticky\",\n        zIndex: 2,\n\n        [`&.${tableHeaderClasses.groupColumnMostRight}+.${tableHeaderClasses.stickyColumn}`]:\n          {\n            borderLeft: 0,\n          },\n      }),\n      ...($stickyColumnMostLeft && {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($stickyColumnLeastRight && {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      // align\n      ...($align === \"center\" && {\n        textAlign: \"center\",\n      }),\n      ...($align === \"justify\" && {\n        textAlign: \"justify\",\n      }),\n      ...($align === \"left\" && {\n        textAlign: \"left\",\n      }),\n      ...($align === \"right\" && {\n        textAlign: \"right\",\n        flexDirection: \"row-reverse\",\n      }),\n      // variant\n      ...($variant === \"checkbox\" && {\n        padding: 0,\n        width: 32,\n        maxWidth: 32,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($variant === \"actions\" && {\n        padding: 0,\n        width: 32,\n        maxWidth: 32,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($variant === \"none\" && {\n        padding: 0,\n      }),\n      // type\n      ...($type === \"head\" && {\n        \"*:first-of-type > &\": {\n          height: \"var(--first-row-cell-height)\",\n          borderTop: $variantList\n            ? 0\n            : `1px solid ${theme.table.headerBorderTopColor}`,\n        },\n\n        paddingTop: 8,\n        verticalAlign: \"top\",\n\n        backgroundColor: $variantList ? \"inherit\" : theme.colors.atmo1,\n        borderBottom: $variantList ? 0 : `1px solid ${theme.colors.atmo4}`,\n        ...(theme.typography.label as CSSProperties),\n\n        transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n        [`&.${tableHeaderClasses.sortable}`]: {\n          verticalAlign: \"initial\",\n          paddingTop: 0,\n          paddingLeft: 0,\n          cursor: \"pointer\",\n\n          \"&:hover\": {\n            backgroundColor: theme.table.headerHoverColor,\n\n            [`& .${tableHeaderClasses.sortIcon}`]: {\n              visibility: \"visible\",\n            },\n          },\n          \"&:focus-within\": {\n            backgroundColor: theme.table.headerHoverColor,\n\n            [`& .${tableHeaderClasses.sortIcon}`]: {\n              visibility: \"visible\",\n            },\n          },\n        },\n      }),\n      ...($type === \"body\" && {\n        backgroundColor: \"inherit\",\n        ...(theme.typography.body as CSSProperties),\n\n        [`&.${tableHeaderClasses.sortable}:not(.${tableHeaderClasses.variantNone})`]:\n          {\n            paddingLeft: 32,\n          },\n        [`&.${tableHeaderClasses.sorted}`]: {\n          backgroundColor: alpha(hexToRgb($atmo1Color), 0.4),\n        },\n      }),\n      ...($variantList && {\n        backgroundColor: \"inherit\",\n        borderBottom: 0,\n        height: 16,\n        \":first-of-type > &\": {\n          borderTop: 0,\n          height: 16,\n        },\n      }),\n    })\n  );\n\nconst StyledSort = (c: any) =>\n  styled(c)({\n    display: \"inline-flex\",\n    visibility: \"hidden\",\n  });\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (\n    {\n      children,\n      component,\n      className,\n      style,\n      classes,\n      scope: scopeProp,\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      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { activeTheme, selectedMode } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? isHeadCell ? \"col\" : \"row\";\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection]\n    );\n\n    const SortComponent = useMemo(() => StyledSort(Sort), [Sort]);\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n        ? \"columnheader\"\n        : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    const TableHeader = StyledTableHeader(Component);\n\n    return (\n      <TableHeader\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={clsx(\n          className,\n          tableHeaderClasses.root,\n          classes?.root,\n          tableHeaderClasses[type],\n          classes?.[type],\n          groupColumnMostLeft &&\n            clsx(\n              tableHeaderClasses.groupColumnMostLeft,\n              classes?.groupColumnMostLeft\n            ),\n          groupColumnMostRight &&\n            clsx(\n              tableHeaderClasses.groupColumnMostRight,\n              classes?.groupColumnMostRight\n            ),\n          sortable && clsx(tableHeaderClasses.sortable, classes?.sortable),\n          sorted && clsx(tableHeaderClasses.sorted, classes?.sorted),\n          resizable && clsx(tableHeaderClasses.resizable, classes?.resizable),\n          resizing && clsx(tableHeaderClasses.resizing, classes?.resizing),\n          stickyColumn &&\n            clsx(tableHeaderClasses.stickyColumn, classes?.stickyColumn),\n          stickyColumnMostLeft &&\n            clsx(\n              tableHeaderClasses.stickyColumnMostLeft,\n              classes?.stickyColumnMostLeft\n            ),\n          stickyColumnLeastRight &&\n            clsx(\n              tableHeaderClasses.stickyColumnLeastRight,\n              classes?.stickyColumnLeastRight\n            ),\n          tableContext.variant === \"listrow\" &&\n            clsx(tableHeaderClasses.variantList, classes?.variantList),\n          align !== \"inherit\" &&\n            clsx(\n              tableHeaderClasses[`align${capitalize(align)}`],\n              classes?.[`align${capitalize(align)}`]\n            ),\n          variant !== \"default\" &&\n            clsx(\n              tableHeaderClasses[`variant${capitalize(variant)}`],\n              classes?.[`variant${capitalize(variant)}`]\n            )\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        $sortable={sortable}\n        $sorted={sorted}\n        $resizable={resizable}\n        $resizing={resizing}\n        $groupColumnMostLeft={groupColumnMostLeft}\n        $groupColumnMostRight={groupColumnMostRight}\n        $stickyColumn={stickyColumn}\n        $stickyColumnMostLeft={stickyColumnMostLeft}\n        $stickyColumnLeastRight={stickyColumnLeastRight}\n        $align={align}\n        $variant={variant}\n        $variantList={tableContext.variant === \"listrow\"}\n        $type={type}\n        $atmo1Color={\n          activeTheme?.colors?.modes[selectedMode].atmo1 || theme.colors.atmo1\n        }\n        {...others}\n      >\n        <StyledHeaderContent\n          className={clsx(\n            tableHeaderClasses.headerContent,\n            classes?.headerContent,\n            align !== \"inherit\" &&\n              clsx(\n                tableHeaderClasses[`alignFlex${capitalize(align)}`],\n                classes?.[`alignFlex${capitalize(align)}`]\n              )\n          )}\n          $align={align}\n        >\n          {isHeadCell && sortable && (\n            <StyledButton\n              className={clsx(\n                tableHeaderClasses.sortButton,\n                classes?.sortButton\n              )}\n              icon\n              variant=\"secondaryGhost\"\n              overrideIconColors={false}\n            >\n              <SortComponent\n                className={clsx(tableHeaderClasses.sortIcon, classes?.sortIcon)}\n              />\n            </StyledButton>\n          )}\n          <StyledTypography\n            component=\"div\"\n            className={clsx(\n              !paragraph &&\n                clsx(tableHeaderClasses.headerText, classes?.headerText),\n              paragraph &&\n                clsx(\n                  tableHeaderClasses.headerParagraph,\n                  classes?.headerParagraph\n                ),\n              sortable &&\n                clsx(\n                  tableHeaderClasses.sortableHeaderText,\n                  classes?.sortableHeaderText\n                )\n            )}\n            variant=\"label\"\n            $headerText={!paragraph}\n            $headerParagraph={paragraph}\n            $sortableHeaderText={!!sortable}\n            {...headerTextProps}\n          >\n            {children}\n          </StyledTypography>\n          {resizable && (\n            <StyledResizer\n              {...resizerProps}\n              className={clsx(tableHeaderClasses.resizer, classes?.resizer)}\n            />\n          )}\n        </StyledHeaderContent>\n      </TableHeader>\n    );\n  }\n);\n"],"names":["defaultComponent","StyledTableHeader","c","process","env","NODE_ENV","_extends","target","transientOptions","label","$sorted","$resizable","$resizing","$groupColumnMostLeft","$groupColumnMostRight","$stickyColumn","$stickyColumnMostLeft","$stickyColumnLeastRight","$variantList","$align","$variant","$type","$atmo1Color","height","verticalAlign","textAlign","padding","theme","spacing","borderBottom","colors","atmo4","tableHeaderClasses","sortIcon","visibility","borderRight","secondary","borderLeft","stickyColumn","position","zIndex","groupColumnMostRight","flexDirection","width","maxWidth","borderTop","table","headerBorderTopColor","paddingTop","backgroundColor","atmo1","typography","transition","sortable","paddingLeft","cursor","headerHoverColor","body","variantNone","sorted","alpha","hexToRgb","StyledSort","_styled","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","HvTableHeader","forwardRef","children","component","className","style","classes","scope","scopeProp","align","variant","type","typeProp","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","sortDirection","headerTextProps","resizerProps","resizable","resizing","others","externalRef","activeTheme","selectedMode","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","isHeadCell","Sort","useMemo","getSortIcon","SortComponent","Component","components","Th","role","paragraph","isParagraph","TableHeader","ref","clsx","root","variantList","capitalize","undefined","$sortable","modes","StyledHeaderContent","headerContent","StyledButton","sortButton","icon","overrideIconColors","_jsx","StyledTypography","headerText","headerParagraph","sortableHeaderText","$headerText","$headerParagraph","$sortableHeaderText","StyledResizer","resizer"],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../../src/components/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ThHTMLAttributes,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport styled from \"@emotion/styled\";\n\nimport { hexToRgb, alpha } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport tableHeaderClasses, { HvTableHeaderClasses } from \"./tableHeaderClasses\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { getSortIcon, isParagraph } from \"./utils\";\nimport {\n  StyledHeaderContent,\n  StyledResizer,\n  StyledButton,\n  StyledTypography,\n} from \"./TableHeader.styles\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\n\nexport interface HvTableHeaderProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\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 sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n}\n\nconst defaultComponent = \"th\";\n\ninterface StyledTableHeaderProps {\n  $sorted: boolean;\n  $resizable: boolean;\n  $resizing: boolean;\n  $groupColumnMostLeft: boolean;\n  $groupColumnMostRight: boolean;\n  $stickyColumn: boolean;\n  $stickyColumnMostLeft: boolean;\n  $stickyColumnLeastRight: boolean;\n  $variantList: boolean;\n  $align: string;\n  $variant: string;\n  $type: string;\n  $atmo1Color: string;\n}\n\nconst StyledTableHeader = (c: any) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $sorted,\n      $resizable,\n      $resizing,\n      $groupColumnMostLeft,\n      $groupColumnMostRight,\n      $stickyColumn,\n      $stickyColumnMostLeft,\n      $stickyColumnLeastRight,\n      $variantList,\n      $align,\n      $variant,\n      $type,\n      $atmo1Color,\n    }: StyledTableHeaderProps) => ({\n      // root\n      \"--first-row-cell-height\": \"52px\",\n      \"--cell-height\": \"32px\",\n      height: \"var(--cell-height)\",\n      verticalAlign: \"inherit\",\n      textAlign: \"left\",\n      padding: theme.spacing([0, \"xs\", 0, 32]),\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n\n      ...($sorted && {\n        [`& .${tableHeaderClasses.sortIcon}`]: {\n          visibility: \"visible\",\n        },\n      }),\n      ...($resizable && {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($resizing && {\n        borderRight: `solid 2px ${theme.colors.secondary}`,\n      }),\n      ...($groupColumnMostLeft && {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($groupColumnMostRight && {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        // due to the \":has()\" selector not being supported in browsers,\n        // this need to be managed with inline styles\n        // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n        // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n        \"&:last-child\": {\n          borderRight: 0,\n        },\n        [`&+:not(.${tableHeaderClasses.stickyColumn})`]: {\n          borderLeft: 0,\n        },\n      }),\n      ...($stickyColumn && {\n        position: \"sticky\",\n        zIndex: 2,\n\n        [`&.${tableHeaderClasses.groupColumnMostRight}+.${tableHeaderClasses.stickyColumn}`]:\n          {\n            borderLeft: 0,\n          },\n      }),\n      ...($stickyColumnMostLeft && {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($stickyColumnLeastRight && {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      // align\n      ...($align === \"center\" && {\n        textAlign: \"center\",\n      }),\n      ...($align === \"justify\" && {\n        textAlign: \"justify\",\n      }),\n      ...($align === \"left\" && {\n        textAlign: \"left\",\n      }),\n      ...($align === \"right\" && {\n        textAlign: \"right\",\n        flexDirection: \"row-reverse\",\n      }),\n      // variant\n      ...($variant === \"checkbox\" && {\n        padding: 0,\n        width: 32,\n        maxWidth: 32,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($variant === \"actions\" && {\n        padding: 0,\n        width: 32,\n        maxWidth: 32,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      }),\n      ...($variant === \"none\" && {\n        padding: 0,\n      }),\n      // type\n      ...($type === \"head\" && {\n        \"*:first-of-type > &\": {\n          height: \"var(--first-row-cell-height)\",\n          borderTop: $variantList\n            ? 0\n            : `1px solid ${theme.table.headerBorderTopColor}`,\n        },\n\n        paddingTop: 8,\n        verticalAlign: \"top\",\n\n        backgroundColor: $variantList ? \"inherit\" : theme.colors.atmo1,\n        borderBottom: $variantList ? 0 : `1px solid ${theme.colors.atmo4}`,\n        ...(theme.typography.label as CSSProperties),\n\n        transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n        [`&.${tableHeaderClasses.sortable}`]: {\n          verticalAlign: \"initial\",\n          paddingTop: 0,\n          paddingLeft: 0,\n          cursor: \"pointer\",\n\n          \"&:hover\": {\n            backgroundColor: theme.table.headerHoverColor,\n\n            [`& .${tableHeaderClasses.sortIcon}`]: {\n              visibility: \"visible\",\n            },\n          },\n          \"&:focus-within\": {\n            backgroundColor: theme.table.headerHoverColor,\n\n            [`& .${tableHeaderClasses.sortIcon}`]: {\n              visibility: \"visible\",\n            },\n          },\n        },\n      }),\n      ...($type === \"body\" && {\n        backgroundColor: \"inherit\",\n        ...(theme.typography.body as CSSProperties),\n\n        [`&.${tableHeaderClasses.sortable}:not(.${tableHeaderClasses.variantNone})`]:\n          {\n            paddingLeft: 32,\n          },\n        [`&.${tableHeaderClasses.sorted}`]: {\n          backgroundColor: alpha(hexToRgb($atmo1Color), 0.4),\n        },\n      }),\n      ...($variantList && {\n        backgroundColor: \"inherit\",\n        borderBottom: 0,\n        height: 16,\n        \":first-of-type > &\": {\n          borderTop: 0,\n          height: 16,\n        },\n      }),\n    })\n  );\n\nconst StyledSort = (c: any) =>\n  styled(c)({\n    display: \"inline-flex\",\n    visibility: \"hidden\",\n  });\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (\n    {\n      children,\n      component,\n      className,\n      style,\n      classes,\n      scope: scopeProp,\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      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { activeTheme, selectedMode } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? isHeadCell ? \"col\" : \"row\";\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection]\n    );\n\n    const SortComponent = useMemo(() => StyledSort(Sort), [Sort]);\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n        ? \"columnheader\"\n        : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    const TableHeader = StyledTableHeader(Component);\n\n    return (\n      <TableHeader\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={clsx(\n          className,\n          tableHeaderClasses.root,\n          classes?.root,\n          tableHeaderClasses[type],\n          classes?.[type],\n          groupColumnMostLeft &&\n            clsx(\n              tableHeaderClasses.groupColumnMostLeft,\n              classes?.groupColumnMostLeft\n            ),\n          groupColumnMostRight &&\n            clsx(\n              tableHeaderClasses.groupColumnMostRight,\n              classes?.groupColumnMostRight\n            ),\n          sortable && clsx(tableHeaderClasses.sortable, classes?.sortable),\n          sorted && clsx(tableHeaderClasses.sorted, classes?.sorted),\n          resizable && clsx(tableHeaderClasses.resizable, classes?.resizable),\n          resizing && clsx(tableHeaderClasses.resizing, classes?.resizing),\n          stickyColumn &&\n            clsx(tableHeaderClasses.stickyColumn, classes?.stickyColumn),\n          stickyColumnMostLeft &&\n            clsx(\n              tableHeaderClasses.stickyColumnMostLeft,\n              classes?.stickyColumnMostLeft\n            ),\n          stickyColumnLeastRight &&\n            clsx(\n              tableHeaderClasses.stickyColumnLeastRight,\n              classes?.stickyColumnLeastRight\n            ),\n          tableContext.variant === \"listrow\" &&\n            clsx(tableHeaderClasses.variantList, classes?.variantList),\n          align !== \"inherit\" &&\n            clsx(\n              tableHeaderClasses[`align${capitalize(align)}`],\n              classes?.[`align${capitalize(align)}`]\n            ),\n          variant !== \"default\" &&\n            clsx(\n              tableHeaderClasses[`variant${capitalize(variant)}`],\n              classes?.[`variant${capitalize(variant)}`]\n            )\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        $sortable={sortable}\n        $sorted={sorted}\n        $resizable={resizable}\n        $resizing={resizing}\n        $groupColumnMostLeft={groupColumnMostLeft}\n        $groupColumnMostRight={groupColumnMostRight}\n        $stickyColumn={stickyColumn}\n        $stickyColumnMostLeft={stickyColumnMostLeft}\n        $stickyColumnLeastRight={stickyColumnLeastRight}\n        $align={align}\n        $variant={variant}\n        $variantList={tableContext.variant === \"listrow\"}\n        $type={type}\n        $atmo1Color={\n          activeTheme?.colors?.modes[selectedMode].atmo1 || theme.colors.atmo1\n        }\n        {...others}\n      >\n        <StyledHeaderContent\n          className={clsx(\n            tableHeaderClasses.headerContent,\n            classes?.headerContent,\n            align !== \"inherit\" &&\n              clsx(\n                tableHeaderClasses[`alignFlex${capitalize(align)}`],\n                classes?.[`alignFlex${capitalize(align)}`]\n              )\n          )}\n          $align={align}\n        >\n          {isHeadCell && sortable && (\n            <StyledButton\n              className={clsx(\n                tableHeaderClasses.sortButton,\n                classes?.sortButton\n              )}\n              icon\n              overrideIconColors={false}\n            >\n              <SortComponent\n                className={clsx(tableHeaderClasses.sortIcon, classes?.sortIcon)}\n              />\n            </StyledButton>\n          )}\n          <StyledTypography\n            component=\"div\"\n            className={clsx(\n              !paragraph &&\n                clsx(tableHeaderClasses.headerText, classes?.headerText),\n              paragraph &&\n                clsx(\n                  tableHeaderClasses.headerParagraph,\n                  classes?.headerParagraph\n                ),\n              sortable &&\n                clsx(\n                  tableHeaderClasses.sortableHeaderText,\n                  classes?.sortableHeaderText\n                )\n            )}\n            variant=\"label\"\n            $headerText={!paragraph}\n            $headerParagraph={paragraph}\n            $sortableHeaderText={!!sortable}\n            {...headerTextProps}\n          >\n            {children}\n          </StyledTypography>\n          {resizable && (\n            <StyledResizer\n              {...resizerProps}\n              className={clsx(tableHeaderClasses.resizer, classes?.resizer)}\n            />\n          )}\n        </StyledHeaderContent>\n      </TableHeader>\n    );\n  }\n);\n"],"names":["defaultComponent","StyledTableHeader","c","process","env","NODE_ENV","_extends","target","transientOptions","label","$sorted","$resizable","$resizing","$groupColumnMostLeft","$groupColumnMostRight","$stickyColumn","$stickyColumnMostLeft","$stickyColumnLeastRight","$variantList","$align","$variant","$type","$atmo1Color","height","verticalAlign","textAlign","padding","theme","spacing","borderBottom","colors","atmo4","tableHeaderClasses","sortIcon","visibility","borderRight","secondary","borderLeft","stickyColumn","position","zIndex","groupColumnMostRight","flexDirection","width","maxWidth","borderTop","table","headerBorderTopColor","paddingTop","backgroundColor","atmo1","typography","transition","sortable","paddingLeft","cursor","headerHoverColor","body","variantNone","sorted","alpha","hexToRgb","StyledSort","_styled","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","HvTableHeader","forwardRef","children","component","className","style","classes","scope","scopeProp","align","variant","type","typeProp","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","sortDirection","headerTextProps","resizerProps","resizable","resizing","others","externalRef","activeTheme","selectedMode","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","isHeadCell","Sort","useMemo","getSortIcon","SortComponent","Component","components","Th","role","paragraph","isParagraph","TableHeader","ref","clsx","root","variantList","capitalize","undefined","$sortable","modes","StyledHeaderContent","headerContent","StyledButton","sortButton","icon","overrideIconColors","_jsx","StyledTypography","headerText","headerParagraph","sortableHeaderText","$headerText","$headerParagraph","$sortableHeaderText","StyledResizer","resizer"],"mappings":"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"}

package/dist/esm/components/Table/hooks/useRowExpand.js

@@ -19,7 +19,6 @@ const CellWithExpandButton = ({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(HvButton, {
       icon: true,
-      variant: "secondaryGhost",
       "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
       "aria-expanded": row.isExpanded,
       onClick,

package/dist/esm/components/Table/hooks/useRowExpand.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRowExpand.js","sources":["../../../../../src/components/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import { MouseEventHandler } from \"react\";\nimport {\n  Hooks,\n  TableExpandedToggleProps,\n  UseExpandedRowProps,\n} from \"react-table\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { useLabels } from \"@core/hooks/useLabels\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n  expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n  disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n  onClick?: MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n  D extends object = Record<string, unknown>\n> extends UseExpandedRowProps<D> {\n  getToggleRowExpandedProps: (\n    props?: Partial<TableExpandedToggleProps>\n  ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n  hooks: Hooks<D>\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n  expandRowButtonAriaLabel: \"Expand this row\",\n  collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({ row, cell, labels: labelsProp }) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { onClick } = row.getToggleRowExpandedProps();\n\n  return (\n    <>\n      <HvButton\n        icon\n        variant=\"secondaryGhost\"\n        aria-label={\n          row.isExpanded\n            ? labels.collapseRowButtonAriaLabel\n            : labels.expandRowButtonAriaLabel\n        }\n        aria-expanded={row.isExpanded}\n        onClick={onClick}\n      >\n        {row.isExpanded ? <DropDownXS /> : <DropUpXS />}\n      </HvButton>\n      {cell?.value && (\n        <HvTypography variant=\"label\" component=\"span\">\n          {cell.value}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst visibleColumnsHook = (columns, { instance }) => {\n  if (instance.disableCreateExpandButton) {\n    return columns;\n  }\n\n  // add a button to first data column, unless it has a custom renderer\n  // if so, add an extra column instead\n  const firstDataColumnIndex = columns.findIndex(\n    (c) => c.id?.indexOf(\"_hv_\") !== 0\n  );\n\n  if (firstDataColumnIndex !== -1) {\n    const firstDataColumn = columns[firstDataColumnIndex];\n\n    if (firstDataColumn.Cell == null) {\n      firstDataColumn.Cell = CellWithExpandButton;\n      firstDataColumn.variant = \"expand\";\n\n      return columns;\n    }\n  }\n\n  const expandColumn = {\n    id: \"_hv_expand\",\n    variant: \"none\",\n\n    width: 32,\n\n    // this will only work when using useHvTableSticky\n    // but ensures it stays left of any sticky column\n    sticky: \"left\",\n\n    Cell: CellWithExpandButton,\n  };\n\n  const columnsCopy = [...columns];\n  columnsCopy.splice(\n    firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n    0,\n    expandColumn\n  );\n\n  return columnsCopy;\n};\n\nconst getRowPropsHook = (props, { row }) => {\n  const nextProps: UseHvRowExpandTableRowProps = {\n    expanded: row.isExpanded,\n  };\n\n  return [props, nextProps];\n};\n\nconst useRowExpand: UseRowExpandProps = (hooks) => {\n  hooks.visibleColumns.push(visibleColumnsHook);\n  hooks.getRowProps.push(getRowPropsHook);\n};\nuseRowExpand.pluginName = \"useHvRowExpand\";\n\nexport default useRowExpand;\n"],"names":["DEFAULT_LABELS","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","CellWithExpandButton","row","cell","labels","labelsProp","useLabels","onClick","getToggleRowExpandedProps","_Fragment","children","_jsx","HvButton","icon","variant","isExpanded","DropDownXS","DropUpXS","value","HvTypography","component","visibleColumnsHook","columns","instance","disableCreateExpandButton","firstDataColumnIndex","findIndex","c","id","indexOf","firstDataColumn","Cell","expandColumn","width","sticky","columnsCopy","splice","getRowPropsHook","props","nextProps","expanded","useRowExpand","hooks","visibleColumns","push","getRowProps","pluginName"],"mappings":";;;;;AA0CA,MAAMA,iBAAiB;AAAA,EACrBC,0BAA0B;AAAA,EAC1BC,4BAA4B;AAC9B;AAEO,MAAMC,uBAAuBA,CAAC;AAAA,EAAEC;AAAAA,EAAKC;AAAAA,EAAMC,QAAQC;AAAW,MAAM;AACnED,QAAAA,SAASE,UAAUR,gBAAgBO,UAAU;AAE7C,QAAA;AAAA,IAAEE;AAAAA,EAAAA,IAAYL,IAAIM;AAExB,8BACEC,UAAA;AAAA,IAAAC,UAAA,CACEC,oBAACC,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACR,cACEZ,IAAIa,aACAX,OAAOJ,6BACPI,OAAOL;AAAAA,MAEb,iBAAeG,IAAIa;AAAAA,MACnBR;AAAAA,MAAiBG,UAEhBR,IAAIa,aAAcC,oBAAAA,YAAU,CAAA,CAAE,IAAIL,oBAACM,UAAU,EAAA;AAAA,IACtC,CAAA,IACTd,6BAAMe,8BACJC,cAAY;AAAA,MAACL,SAAQ;AAAA,MAAQM,WAAU;AAAA,MAAMV,UAC3CP,KAAKe;AAAAA,IAAAA,CACM,CACf;AAAA,EAAA,CACD;AAEN;AAEA,MAAMG,qBAAqBA,CAACC,SAAS;AAAA,EAAEC;AAAS,MAAM;AACpD,MAAIA,SAASC,2BAA2B;AAC/BF,WAAAA;AAAAA,EACT;AAIMG,QAAAA,uBAAuBH,QAAQI,UAClCC,CAAAA,MAAAA;;AAAMA,oBAAEC,OAAFD,mBAAME,QAAQ,aAAY;AAAA,GACnC;AAEA,MAAIJ,yBAAyB,IAAI;AACzBK,UAAAA,kBAAkBR,QAAQG,oBAAoB;AAEhDK,QAAAA,gBAAgBC,QAAQ,MAAM;AAChCD,sBAAgBC,OAAO9B;AACvB6B,sBAAgBhB,UAAU;AAEnBQ,aAAAA;AAAAA,IACT;AAAA,EACF;AAEA,QAAMU,eAAe;AAAA,IACnBJ,IAAI;AAAA,IACJd,SAAS;AAAA,IAETmB,OAAO;AAAA;AAAA;AAAA,IAIPC,QAAQ;AAAA,IAERH,MAAM9B;AAAAA,EAAAA;AAGFkC,QAAAA,cAAc,CAAC,GAAGb,OAAO;AAC/Ba,cAAYC,OACVX,yBAAyB,KAAKA,uBAAuB,GACrD,GACAO,YACF;AAEOG,SAAAA;AACT;AAEA,MAAME,kBAAkBA,CAACC,OAAO;AAAA,EAAEpC;AAAI,MAAM;AAC1C,QAAMqC,YAAyC;AAAA,IAC7CC,UAAUtC,IAAIa;AAAAA,EAAAA;AAGT,SAAA,CAACuB,OAAOC,SAAS;AAC1B;AAEA,MAAME,eAAmCC,CAAU,UAAA;AAC3CC,QAAAA,eAAeC,KAAKvB,kBAAkB;AACtCwB,QAAAA,YAAYD,KAAKP,eAAe;AACxC;AACAI,aAAaK,aAAa;AAE1B,MAAA,iBAAeL;"}
+{"version":3,"file":"useRowExpand.js","sources":["../../../../../src/components/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import { MouseEventHandler } from \"react\";\nimport {\n  Hooks,\n  TableExpandedToggleProps,\n  UseExpandedRowProps,\n} from \"react-table\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { useLabels } from \"@core/hooks/useLabels\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n  expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n  disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n  onClick?: MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n  D extends object = Record<string, unknown>\n> extends UseExpandedRowProps<D> {\n  getToggleRowExpandedProps: (\n    props?: Partial<TableExpandedToggleProps>\n  ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n  hooks: Hooks<D>\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n  expandRowButtonAriaLabel: \"Expand this row\",\n  collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({ row, cell, labels: labelsProp }) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { onClick } = row.getToggleRowExpandedProps();\n\n  return (\n    <>\n      <HvButton\n        icon\n        aria-label={\n          row.isExpanded\n            ? labels.collapseRowButtonAriaLabel\n            : labels.expandRowButtonAriaLabel\n        }\n        aria-expanded={row.isExpanded}\n        onClick={onClick}\n      >\n        {row.isExpanded ? <DropDownXS /> : <DropUpXS />}\n      </HvButton>\n      {cell?.value && (\n        <HvTypography variant=\"label\" component=\"span\">\n          {cell.value}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst visibleColumnsHook = (columns, { instance }) => {\n  if (instance.disableCreateExpandButton) {\n    return columns;\n  }\n\n  // add a button to first data column, unless it has a custom renderer\n  // if so, add an extra column instead\n  const firstDataColumnIndex = columns.findIndex(\n    (c) => c.id?.indexOf(\"_hv_\") !== 0\n  );\n\n  if (firstDataColumnIndex !== -1) {\n    const firstDataColumn = columns[firstDataColumnIndex];\n\n    if (firstDataColumn.Cell == null) {\n      firstDataColumn.Cell = CellWithExpandButton;\n      firstDataColumn.variant = \"expand\";\n\n      return columns;\n    }\n  }\n\n  const expandColumn = {\n    id: \"_hv_expand\",\n    variant: \"none\",\n\n    width: 32,\n\n    // this will only work when using useHvTableSticky\n    // but ensures it stays left of any sticky column\n    sticky: \"left\",\n\n    Cell: CellWithExpandButton,\n  };\n\n  const columnsCopy = [...columns];\n  columnsCopy.splice(\n    firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n    0,\n    expandColumn\n  );\n\n  return columnsCopy;\n};\n\nconst getRowPropsHook = (props, { row }) => {\n  const nextProps: UseHvRowExpandTableRowProps = {\n    expanded: row.isExpanded,\n  };\n\n  return [props, nextProps];\n};\n\nconst useRowExpand: UseRowExpandProps = (hooks) => {\n  hooks.visibleColumns.push(visibleColumnsHook);\n  hooks.getRowProps.push(getRowPropsHook);\n};\nuseRowExpand.pluginName = \"useHvRowExpand\";\n\nexport default useRowExpand;\n"],"names":["DEFAULT_LABELS","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","CellWithExpandButton","row","cell","labels","labelsProp","useLabels","onClick","getToggleRowExpandedProps","_Fragment","children","_jsx","HvButton","icon","isExpanded","DropDownXS","DropUpXS","value","HvTypography","variant","component","visibleColumnsHook","columns","instance","disableCreateExpandButton","firstDataColumnIndex","findIndex","c","id","indexOf","firstDataColumn","Cell","expandColumn","width","sticky","columnsCopy","splice","getRowPropsHook","props","nextProps","expanded","useRowExpand","hooks","visibleColumns","push","getRowProps","pluginName"],"mappings":";;;;;AA0CA,MAAMA,iBAAiB;AAAA,EACrBC,0BAA0B;AAAA,EAC1BC,4BAA4B;AAC9B;AAEO,MAAMC,uBAAuBA,CAAC;AAAA,EAAEC;AAAAA,EAAKC;AAAAA,EAAMC,QAAQC;AAAW,MAAM;AACnED,QAAAA,SAASE,UAAUR,gBAAgBO,UAAU;AAE7C,QAAA;AAAA,IAAEE;AAAAA,EAAAA,IAAYL,IAAIM;AAExB,8BACEC,UAAA;AAAA,IAAAC,UAAA,CACEC,oBAACC,UAAQ;AAAA,MACPC,MAAI;AAAA,MACJ,cACEX,IAAIY,aACAV,OAAOJ,6BACPI,OAAOL;AAAAA,MAEb,iBAAeG,IAAIY;AAAAA,MACnBP;AAAAA,MAAiBG,UAEhBR,IAAIY,aAAcC,oBAAAA,YAAU,CAAA,CAAE,IAAIJ,oBAACK,UAAU,EAAA;AAAA,IACtC,CAAA,IACTb,6BAAMc,8BACJC,cAAY;AAAA,MAACC,SAAQ;AAAA,MAAQC,WAAU;AAAA,MAAMV,UAC3CP,KAAKc;AAAAA,IAAAA,CACM,CACf;AAAA,EAAA,CACD;AAEN;AAEA,MAAMI,qBAAqBA,CAACC,SAAS;AAAA,EAAEC;AAAS,MAAM;AACpD,MAAIA,SAASC,2BAA2B;AAC/BF,WAAAA;AAAAA,EACT;AAIMG,QAAAA,uBAAuBH,QAAQI,UAClCC,CAAAA,MAAAA;;AAAMA,oBAAEC,OAAFD,mBAAME,QAAQ,aAAY;AAAA,GACnC;AAEA,MAAIJ,yBAAyB,IAAI;AACzBK,UAAAA,kBAAkBR,QAAQG,oBAAoB;AAEhDK,QAAAA,gBAAgBC,QAAQ,MAAM;AAChCD,sBAAgBC,OAAO9B;AACvB6B,sBAAgBX,UAAU;AAEnBG,aAAAA;AAAAA,IACT;AAAA,EACF;AAEA,QAAMU,eAAe;AAAA,IACnBJ,IAAI;AAAA,IACJT,SAAS;AAAA,IAETc,OAAO;AAAA;AAAA;AAAA,IAIPC,QAAQ;AAAA,IAERH,MAAM9B;AAAAA,EAAAA;AAGFkC,QAAAA,cAAc,CAAC,GAAGb,OAAO;AAC/Ba,cAAYC,OACVX,yBAAyB,KAAKA,uBAAuB,GACrD,GACAO,YACF;AAEOG,SAAAA;AACT;AAEA,MAAME,kBAAkBA,CAACC,OAAO;AAAA,EAAEpC;AAAI,MAAM;AAC1C,QAAMqC,YAAyC;AAAA,IAC7CC,UAAUtC,IAAIY;AAAAA,EAAAA;AAGT,SAAA,CAACwB,OAAOC,SAAS;AAC1B;AAEA,MAAME,eAAmCC,CAAU,UAAA;AAC3CC,QAAAA,eAAeC,KAAKvB,kBAAkB;AACtCwB,QAAAA,YAAYD,KAAKP,eAAe;AACxC;AACAI,aAAaK,aAAa;AAE1B,MAAA,iBAAeL;"}

package/dist/esm/components/Table/renderers/renderers.js

@@ -64,7 +64,6 @@ function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabe
         }) => /* @__PURE__ */ jsxs(Fragment, {
           children: [hasContent && /* @__PURE__ */ jsx(HvButton, {
             icon: true,
-            variant: "secondaryGhost",
             "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
             "aria-expanded": row.isExpanded,
             onClick: expandedProps == null ? void 0 : expandedProps.onClick,

package/dist/esm/components/Table/renderers/renderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.js","sources":["../../../../../src/components/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"@core/components/OverflowTooltip\";\nimport { HvBaseSwitchProps } from \"@core/components/BaseSwitch\";\nimport { HvListValue } from \"@core/components/List\";\n\nimport {\n  HvTableHeaderRenderer,\n  HvCellProps,\n  HvTableColumnConfig,\n  HvRowInstance,\n} from \"../hooks/useTable\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { hvStringFallback, hvNumberFallback } from \"../utils\";\n\nexport function hvTextColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  overflowTooltipProps: Omit<HvOverflowTooltipProps, \"data\"> = {}\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvOverflowTooltip\n        data={hvStringFallback(value)}\n        {...overflowTooltipProps}\n      />\n    ),\n    sortType: \"alphanumeric\",\n    ...col,\n  };\n}\n\nexport function hvNumberColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(col: HvTableColumnConfig<D, H>): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => <>{hvNumberFallback(value)}</>,\n    align: \"right\",\n    sortType: \"number\",\n    ...col,\n  };\n}\n\nexport function hvDateColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  dateFormat?: string\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvDateColumnCell date={value} dateFormat={dateFormat} />\n    ),\n    sortType: \"alphanumeric\",\n    sortDescFirst: true,\n    ...col,\n  };\n}\n\nexport function hvExpandColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  expandRowButtonAriaLabel: string,\n  collapseRowButtonAriaLabel: string,\n  getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean,\n  ExpandedIcon: React.ReactNode = <DropUpXS />,\n  CollapsedIcon: React.ReactNode = <DropDownXS />\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      const expandedProps = row.getToggleRowExpandedProps?.();\n\n      const hasContent = getCanRowExpand?.(row) ?? true;\n\n      return (\n        <ClassNames>\n          {({ css }) => (\n            <>\n              {hasContent && (\n                <HvButton\n                  icon\n                  variant=\"secondaryGhost\"\n                  aria-label={\n                    row.isExpanded\n                      ? collapseRowButtonAriaLabel\n                      : expandRowButtonAriaLabel\n                  }\n                  aria-expanded={row.isExpanded}\n                  onClick={expandedProps?.onClick}\n                  classes={{\n                    root: css({\n                      position: \"absolute\",\n                      left: 0,\n                      top: \"50%\",\n                      transform: \"translateY(-50%)\",\n                    }),\n                  }}\n                >\n                  {row.isExpanded ? ExpandedIcon : CollapsedIcon}\n                </HvButton>\n              )}\n\n              <HvOverflowTooltip data={hvStringFallback(value)} />\n            </>\n          )}\n        </ClassNames>\n      );\n    },\n    sortType: \"alphanumeric\",\n    cellStyle: {\n      position: \"relative\",\n    },\n    ...col,\n  };\n}\n\nexport function hvTagColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  A extends object = Record<string, unknown>\n>(\n  col: HvTableColumnConfig<D, H>,\n  valueDataKey: keyof A,\n  colorDataKey: keyof A,\n  textColorDataKey: keyof A,\n  fromRowData: boolean = false,\n  tagProps?: HvTagProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      if (!value) {\n        return <>—</>;\n      }\n\n      const {\n        [valueDataKey]: name,\n        [colorDataKey]: color,\n        [textColorDataKey]: textColor,\n      } = fromRowData ? row.original : value;\n\n      return (\n        <HvTag\n          label={<HvTypography variant=\"body\">{name}</HvTypography>}\n          type=\"semantic\"\n          color={color}\n          style={textColor != null ? { color: textColor } : {}}\n          tabIndex={-1}\n          {...tagProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvSwitchColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  switchLabel: string,\n  falseLabel?: string,\n  trueLabel?: string,\n  switchProps?: HvBaseSwitchProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      return (\n        <HvSwitchColumnCell\n          checked={value}\n          value={row.id}\n          switchLabel={switchLabel}\n          falseLabel={falseLabel}\n          trueLabel={trueLabel}\n          switchProps={switchProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvDropdownColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  id: string,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const dsbld = value.length < 1;\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={dsbld ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val)}\n          disabled={dsbld}\n          dropdownProps={{\n            \"aria-labelledby\": setId(id, column.id),\n          }}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvProgressColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  getPartial?: (row: HvRowInstance<D, H>) => number,\n  getTotal?: (row: HvRowInstance<D, H>) => number,\n  color?: \"primary\" | \"secondary\"\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { row } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell partial={partial} total={total} color={color} />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":["hvTextColumn","col","overflowTooltipProps","Cell","value","HvOverflowTooltip","data","hvStringFallback","sortType","hvNumberColumn","_Fragment","children","hvNumberFallback","align","hvDateColumn","dateFormat","HvDateColumnCell","date","sortDescFirst","hvExpandColumn","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","getCanRowExpand","ExpandedIcon","DropUpXS","CollapsedIcon","_jsx","DropDownXS","cellProps","row","expandedProps","getToggleRowExpandedProps","hasContent","ClassNames","css","HvButton","icon","variant","isExpanded","onClick","classes","root","position","left","top","transform","cellStyle","hvTagColumn","valueDataKey","colorDataKey","textColorDataKey","fromRowData","tagProps","name","color","textColor","original","HvTag","label","HvTypography","type","style","tabIndex","paddingTop","paddingBottom","hvSwitchColumn","switchLabel","falseLabel","trueLabel","switchProps","HvSwitchColumnCell","checked","id","hvDropdownColumn","placeholder","disabledPlaceholder","onChange","column","dsbld","length","HvDropdownColumnCell","values","val","disabled","dropdownProps","setId","hvProgressColumn","getPartial","getTotal","partial","total","HvProgressColumnCell"],"mappings":"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"}
+{"version":3,"file":"renderers.js","sources":["../../../../../src/components/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"@core/components/OverflowTooltip\";\nimport { HvBaseSwitchProps } from \"@core/components/BaseSwitch\";\nimport { HvListValue } from \"@core/components/List\";\n\nimport {\n  HvTableHeaderRenderer,\n  HvCellProps,\n  HvTableColumnConfig,\n  HvRowInstance,\n} from \"../hooks/useTable\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { hvStringFallback, hvNumberFallback } from \"../utils\";\n\nexport function hvTextColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  overflowTooltipProps: Omit<HvOverflowTooltipProps, \"data\"> = {}\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvOverflowTooltip\n        data={hvStringFallback(value)}\n        {...overflowTooltipProps}\n      />\n    ),\n    sortType: \"alphanumeric\",\n    ...col,\n  };\n}\n\nexport function hvNumberColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(col: HvTableColumnConfig<D, H>): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => <>{hvNumberFallback(value)}</>,\n    align: \"right\",\n    sortType: \"number\",\n    ...col,\n  };\n}\n\nexport function hvDateColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  dateFormat?: string\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvDateColumnCell date={value} dateFormat={dateFormat} />\n    ),\n    sortType: \"alphanumeric\",\n    sortDescFirst: true,\n    ...col,\n  };\n}\n\nexport function hvExpandColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  expandRowButtonAriaLabel: string,\n  collapseRowButtonAriaLabel: string,\n  getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean,\n  ExpandedIcon: React.ReactNode = <DropUpXS />,\n  CollapsedIcon: React.ReactNode = <DropDownXS />\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      const expandedProps = row.getToggleRowExpandedProps?.();\n\n      const hasContent = getCanRowExpand?.(row) ?? true;\n\n      return (\n        <ClassNames>\n          {({ css }) => (\n            <>\n              {hasContent && (\n                <HvButton\n                  icon\n                  aria-label={\n                    row.isExpanded\n                      ? collapseRowButtonAriaLabel\n                      : expandRowButtonAriaLabel\n                  }\n                  aria-expanded={row.isExpanded}\n                  onClick={expandedProps?.onClick}\n                  classes={{\n                    root: css({\n                      position: \"absolute\",\n                      left: 0,\n                      top: \"50%\",\n                      transform: \"translateY(-50%)\",\n                    }),\n                  }}\n                >\n                  {row.isExpanded ? ExpandedIcon : CollapsedIcon}\n                </HvButton>\n              )}\n\n              <HvOverflowTooltip data={hvStringFallback(value)} />\n            </>\n          )}\n        </ClassNames>\n      );\n    },\n    sortType: \"alphanumeric\",\n    cellStyle: {\n      position: \"relative\",\n    },\n    ...col,\n  };\n}\n\nexport function hvTagColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  A extends object = Record<string, unknown>\n>(\n  col: HvTableColumnConfig<D, H>,\n  valueDataKey: keyof A,\n  colorDataKey: keyof A,\n  textColorDataKey: keyof A,\n  fromRowData: boolean = false,\n  tagProps?: HvTagProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      if (!value) {\n        return <>—</>;\n      }\n\n      const {\n        [valueDataKey]: name,\n        [colorDataKey]: color,\n        [textColorDataKey]: textColor,\n      } = fromRowData ? row.original : value;\n\n      return (\n        <HvTag\n          label={<HvTypography variant=\"body\">{name}</HvTypography>}\n          type=\"semantic\"\n          color={color}\n          style={textColor != null ? { color: textColor } : {}}\n          tabIndex={-1}\n          {...tagProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvSwitchColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  switchLabel: string,\n  falseLabel?: string,\n  trueLabel?: string,\n  switchProps?: HvBaseSwitchProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      return (\n        <HvSwitchColumnCell\n          checked={value}\n          value={row.id}\n          switchLabel={switchLabel}\n          falseLabel={falseLabel}\n          trueLabel={trueLabel}\n          switchProps={switchProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvDropdownColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  id: string,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const dsbld = value.length < 1;\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={dsbld ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val)}\n          disabled={dsbld}\n          dropdownProps={{\n            \"aria-labelledby\": setId(id, column.id),\n          }}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvProgressColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  getPartial?: (row: HvRowInstance<D, H>) => number,\n  getTotal?: (row: HvRowInstance<D, H>) => number,\n  color?: \"primary\" | \"secondary\"\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { row } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell partial={partial} total={total} color={color} />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":["hvTextColumn","col","overflowTooltipProps","Cell","value","HvOverflowTooltip","data","hvStringFallback","sortType","hvNumberColumn","_Fragment","children","hvNumberFallback","align","hvDateColumn","dateFormat","HvDateColumnCell","date","sortDescFirst","hvExpandColumn","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","getCanRowExpand","ExpandedIcon","DropUpXS","CollapsedIcon","_jsx","DropDownXS","cellProps","row","expandedProps","getToggleRowExpandedProps","hasContent","ClassNames","css","HvButton","icon","isExpanded","onClick","classes","root","position","left","top","transform","cellStyle","hvTagColumn","valueDataKey","colorDataKey","textColorDataKey","fromRowData","tagProps","name","color","textColor","original","HvTag","label","HvTypography","variant","type","style","tabIndex","paddingTop","paddingBottom","hvSwitchColumn","switchLabel","falseLabel","trueLabel","switchProps","HvSwitchColumnCell","checked","id","hvDropdownColumn","placeholder","disabledPlaceholder","onChange","column","dsbld","length","HvDropdownColumnCell","values","val","disabled","dropdownProps","setId","hvProgressColumn","getPartial","getTotal","partial","total","HvProgressColumnCell"],"mappings":"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"}

package/dist/esm/components/Tabs/Tabs.js

@@ -1,11 +1,13 @@
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { clsx } from "clsx";
 import { StyledTabs } from "./Tabs.styles.js";
 import tabsClasses from "./tabsClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
-const HvTabs = ({
-  classes,
-  ...others
-}) => {
+const HvTabs = (props) => {
+  const {
+    classes,
+    ...others
+  } = useDefaultProps("HvTabs", props);
   return /* @__PURE__ */ jsx(StyledTabs, {
     classes: {
       root: clsx(tabsClasses.root, classes == null ? void 0 : classes.root),

package/dist/esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabsProps as MuiTabsProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledTabs } from \"./Tabs.styles\";\nimport tabsClasses, { HvTabsClasses } from \"./tabsClasses\";\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps\n  extends MuiTabsProps,\n    HvBaseProps<HTMLButtonElement, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = ({ classes, ...others }: HvTabsProps) => {\n  return (\n    <StyledTabs\n      classes={{\n        root: clsx(tabsClasses.root, classes?.root),\n        flexContainer: clsx(tabsClasses.flexContainer, classes?.flexContainer),\n        indicator: clsx(tabsClasses.indicator, classes?.indicator),\n        scroller: clsx(tabsClasses.scroller, classes?.scroller),\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","classes","others","StyledTabs","root","clsx","tabsClasses","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;AA+BO,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAS,GAAGC;AAAoB,MAAM;AAC7D,6BACGC,YAAU;AAAA,IACTF,SAAS;AAAA,MACPG,MAAMC,KAAKC,YAAYF,MAAMH,mCAASG,IAAI;AAAA,MAC1CG,eAAeF,KAAKC,YAAYC,eAAeN,mCAASM,aAAa;AAAA,MACrEC,WAAWH,KAAKC,YAAYE,WAAWP,mCAASO,SAAS;AAAA,MACzDC,UAAUJ,KAAKC,YAAYG,UAAUR,mCAASQ,QAAQ;AAAA,IACxD;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,oBAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCV;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledTabs } from \"./Tabs.styles\";\nimport tabsClasses, { HvTabsClasses } from \"./tabsClasses\";\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps\n  extends MuiTabsProps,\n    HvBaseProps<HTMLButtonElement, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  return (\n    <StyledTabs\n      classes={{\n        root: clsx(tabsClasses.root, classes?.root),\n        flexContainer: clsx(tabsClasses.flexContainer, classes?.flexContainer),\n        indicator: clsx(tabsClasses.indicator, classes?.indicator),\n        scroller: clsx(tabsClasses.scroller, classes?.scroller),\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","others","useDefaultProps","StyledTabs","root","clsx","tabsClasses","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;;AAgCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAS,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,UAAUH,KAAK;AAE9D,6BACGI,YAAU;AAAA,IACTH,SAAS;AAAA,MACPI,MAAMC,KAAKC,YAAYF,MAAMJ,mCAASI,IAAI;AAAA,MAC1CG,eAAeF,KAAKC,YAAYC,eAAeP,mCAASO,aAAa;AAAA,MACrEC,WAAWH,KAAKC,YAAYE,WAAWR,mCAASQ,SAAS;AAAA,MACzDC,UAAUJ,KAAKC,YAAYG,UAAUT,mCAASS,QAAQ;AAAA,IACxD;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,oBAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCX;AAAAA,EAAAA,CACL;AAEL;"}

package/dist/esm/components/Tag/Tag.js

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import { useState } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useTheme } from "../../hooks/useTheme.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { StyledChip, StyledButton, StyledCloseXS } from "./Tag.styles.js";
 import { hasDeleteAction, getOnDeleteCallback, hasClickAction } from "./utils.js";
 import tagClasses from "./tagClasses.js";
@@ -18,23 +19,24 @@ const getColor = (customColor, type, colors) => {
   }
   return backgroundColor;
 };
-const HvTag = ({
-  classes,
-  className,
-  style,
-  label,
-  disabled,
-  type = "semantic",
-  color,
-  deleteIcon,
-  onDelete,
-  onClick,
-  role,
-  deleteButtonArialLabel = "Delete tag",
-  deleteButtonProps = {},
-  ...others
-}) => {
+const HvTag = (props) => {
   var _a, _b;
+  const {
+    classes,
+    className,
+    style,
+    label,
+    disabled,
+    type = "semantic",
+    color,
+    deleteIcon,
+    onDelete,
+    onClick,
+    role,
+    deleteButtonArialLabel = "Delete tag",
+    deleteButtonProps = {},
+    ...others
+  } = useDefaultProps("HvTag", props);
   const {
     activeTheme,
     selectedMode

package/dist/esm/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { CSSProperties, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvSemanticColorKeys,\n  HvCategoricalColorKeys,\n} from \"@core/types/tokens\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvButtonProps } from \"@core/components/Button\";\n\nimport { StyledChip, StyledButton, StyledCloseXS } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\nimport tagClasses, { HvTagClasses } from \"./tagClasses\";\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = ({\n  classes,\n  className,\n  style,\n  label,\n  disabled,\n  type = \"semantic\",\n  color,\n  deleteIcon,\n  onDelete,\n  onClick,\n  role,\n  deleteButtonArialLabel = \"Delete tag\",\n  deleteButtonProps = {},\n  ...others\n}: HvTagProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <StyledButton\n        classes={{\n          startIcon: clsx(tagClasses.tagButton, classes?.tagButton),\n          focusVisible: clsx(tagClasses.focusVisible, classes?.focusVisible),\n          root: clsx(tagClasses.button, classes?.button),\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <StyledCloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n          $color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </StyledButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <StyledChip\n      label={label}\n      className={clsx(classes?.root, className, tagClasses.root)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: clsx(\n          tagClasses.chipRoot,\n          classes?.chipRoot,\n          type === \"categorical\" &&\n            clsx(tagClasses.categorical, classes?.categorical),\n          disabled && clsx(tagClasses.disabled, classes?.disabled),\n          !!onClick && clsx(tagClasses.clickable, classes?.clickable),\n          type === \"categorical\" &&\n            !disabled &&\n            clsx(tagClasses.categoricalFocus, classes?.categoricalFocus),\n          type === \"categorical\" &&\n            disabled &&\n            clsx(tagClasses.categoricalDisabled, classes?.categoricalDisabled)\n        ),\n        label: clsx(tagClasses.label, classes?.label),\n        deleteIcon: clsx(\n          classes?.deleteIcon,\n          tagClasses.deleteIcon,\n          disabled &&\n            clsx(tagClasses.disabledDeleteIcon, classes?.disabledDeleteIcon)\n        ),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      $type={type}\n      $disabled={disabled || false}\n      $categoricalFocus={type === \"categorical\" && !disabled}\n      $categoricalDisabled={(type === \"categorical\" && disabled) || false}\n      $baseLightColor={\n        activeTheme?.colors?.modes[selectedMode].base_light ||\n        theme.colors.base_light\n      }\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","classes","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","activeTheme","selectedMode","useTheme","getDeleteIcon","disabledSemanticColor","tabIndex","StyledButton","startIcon","clsx","tagClasses","tagButton","focusVisible","root","button","variant","children","StyledCloseXS","iconSize","cursor","undefined","height","$color","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","StyledChip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","categorical","clickable","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","$type","$disabled","$categoricalFocus","$categoricalDisabled","$baseLightColor","base_light"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { CSSProperties, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvSemanticColorKeys,\n  HvCategoricalColorKeys,\n} from \"@core/types/tokens\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButtonProps } from \"@core/components/Button\";\n\nimport { StyledChip, StyledButton, StyledCloseXS } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\nimport tagClasses, { HvTagClasses } from \"./tagClasses\";\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <StyledButton\n        classes={{\n          startIcon: clsx(tagClasses.tagButton, classes?.tagButton),\n          focusVisible: clsx(tagClasses.focusVisible, classes?.focusVisible),\n          root: clsx(tagClasses.button, classes?.button),\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <StyledCloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n          $color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </StyledButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <StyledChip\n      label={label}\n      className={clsx(classes?.root, className, tagClasses.root)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: clsx(\n          tagClasses.chipRoot,\n          classes?.chipRoot,\n          type === \"categorical\" &&\n            clsx(tagClasses.categorical, classes?.categorical),\n          disabled && clsx(tagClasses.disabled, classes?.disabled),\n          !!onClick && clsx(tagClasses.clickable, classes?.clickable),\n          type === \"categorical\" &&\n            !disabled &&\n            clsx(tagClasses.categoricalFocus, classes?.categoricalFocus),\n          type === \"categorical\" &&\n            disabled &&\n            clsx(tagClasses.categoricalDisabled, classes?.categoricalDisabled)\n        ),\n        label: clsx(tagClasses.label, classes?.label),\n        deleteIcon: clsx(\n          classes?.deleteIcon,\n          tagClasses.deleteIcon,\n          disabled &&\n            clsx(tagClasses.disabledDeleteIcon, classes?.disabledDeleteIcon)\n        ),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      $type={type}\n      $disabled={disabled || false}\n      $categoricalFocus={type === \"categorical\" && !disabled}\n      $categoricalDisabled={(type === \"categorical\" && disabled) || false}\n      $baseLightColor={\n        activeTheme?.colors?.modes[selectedMode].base_light ||\n        theme.colors.base_light\n      }\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","activeTheme","selectedMode","useTheme","getDeleteIcon","disabledSemanticColor","tabIndex","StyledButton","startIcon","clsx","tagClasses","tagButton","focusVisible","root","button","variant","children","StyledCloseXS","iconSize","cursor","undefined","height","$color","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","StyledChip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","categorical","clickable","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","$type","$disabled","$categoricalFocus","$categoricalDisabled","$baseLightColor","base_light"],"mappings":"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"}

package/dist/esm/components/TagsInput/TagsInput.js

@@ -4,6 +4,7 @@ import isNil from "lodash/isNil";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useIsMounted } from "../../hooks/useIsMounted.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import validationState from "../Forms/FormElement/validationStates.js";
@@ -11,44 +12,45 @@ import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
 import { StyledFormElement, StyledLabelContainer, StyledLabel, StyledDescription, StyledCharCounter, StyledTagsList, StyledListItem, StyledTag, StyledInputListItem, StyledInput, StyledSuggestions, StyledError } from "./TagsInput.styles.js";
 import tagsInputClasses from "./tagsInputClasses.js";
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
-const HvTagsInput = ({
-  classes,
-  className,
-  id,
-  name,
-  value: valueProp,
-  defaultValue = [],
-  readOnly = false,
-  disabled = false,
-  required = false,
-  label: textAreaLabel,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  description,
-  "aria-describedby": ariaDescribedBy,
-  onChange,
-  onAdd,
-  onDelete,
-  onBlur,
-  onFocus,
-  placeholder,
-  hideCounter = false,
-  middleCountLabel = "/",
-  maxTagsQuantity,
-  autoFocus = false,
-  resizable = true,
-  inputProps = {},
-  countCharProps = {},
-  multiline = false,
-  status,
-  statusMessage,
-  validationMessages,
-  commitTagOn = ["Enter"],
-  commitOnBlur = false,
-  suggestionListCallback,
-  ...others
-}) => {
+const HvTagsInput = (props) => {
   var _a;
+  const {
+    classes,
+    className,
+    id,
+    name,
+    value: valueProp,
+    defaultValue = [],
+    readOnly = false,
+    disabled = false,
+    required = false,
+    label: textAreaLabel,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onAdd,
+    onDelete,
+    onBlur,
+    onFocus,
+    placeholder,
+    hideCounter = false,
+    middleCountLabel = "/",
+    maxTagsQuantity,
+    autoFocus = false,
+    resizable = true,
+    inputProps = {},
+    countCharProps = {},
+    multiline = false,
+    status,
+    statusMessage,
+    validationMessages,
+    commitTagOn = ["Enter"],
+    commitOnBlur = false,
+    suggestionListCallback,
+    ...others
+  } = useDefaultProps("HvTagsInput", props);
   const elementId = useUniqueId(id, "hvTagsInput");
   const hasLabel = textAreaLabel != null;
   const hasDescription = description != null;