@hitachivantara/uikit-react-core 5.82.4 → 5.83.0

package/dist/esm/Table/hooks/useHvTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHvTable.js","sources":["../../../../src/Table/hooks/useHvTable.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport type {\n  ActionType,\n  Cell,\n  ColumnInstance,\n  ColumnInterface,\n  Hooks,\n  PluginHook,\n  ReducerTableState,\n  Renderer,\n  Row,\n  TableCellProps,\n  TableFooterProps,\n  TableHeaderProps,\n  TableInstance,\n  TableOptions,\n  TableProps,\n  TableRowProps,\n  TableState,\n  UseColumnOrderInstanceProps,\n  UseColumnOrderState,\n  UseExpandedHooks,\n  UseExpandedInstanceProps,\n  UseExpandedOptions,\n  UseExpandedState,\n  UseFiltersColumnOptions,\n  UseFiltersColumnProps,\n  UseFiltersInstanceProps,\n  UseFiltersOptions,\n  UseFiltersState,\n  UseGlobalFiltersColumnOptions,\n  UseGlobalFiltersInstanceProps,\n  UseGlobalFiltersOptions,\n  UseGlobalFiltersState,\n  UseGroupByCellProps,\n  UseGroupByColumnOptions,\n  UseGroupByColumnProps,\n  UseGroupByHooks,\n  UseGroupByInstanceProps,\n  UseGroupByOptions,\n  UseGroupByRowProps,\n  UseGroupByState,\n  UsePaginationInstanceProps,\n  UsePaginationOptions,\n  UsePaginationState,\n  UseResizeColumnsColumnOptions,\n  UseResizeColumnsColumnProps,\n  UseResizeColumnsOptions,\n  UseResizeColumnsState,\n  UseRowStateInstanceProps,\n  UseRowStateOptions,\n  UseRowStateRowProps,\n  UseRowStateState,\n  UseSortByColumnOptions,\n  UseSortByColumnProps,\n  UseSortByHooks,\n  UseSortByInstanceProps,\n  UseSortByOptions,\n  UseSortByState,\n  UseTableHeaderGroupProps,\n} from \"react-table\";\nimport {\n  useExpanded,\n  usePagination,\n  useResizeColumns,\n  useSortBy,\n  useTable,\n} from \"react-table\";\n\nimport { DefaultCell } from \"../renderers/DefaultCell\";\nimport type { HvTableProps } from \"../Table\";\nimport type { HvTableCellProps } from \"../TableCell\";\nimport type { HvTableHeaderProps } from \"../TableHeader\";\nimport type { HvTableRowProps } from \"../TableRow\";\nimport type {\n  UseHvBulkActionsHooks,\n  UseHvBulkActionsTableInstanceProps,\n  UseHvBulkActionsTableOptions,\n} from \"./useHvBulkActions\";\nimport type {\n  UseHvHeaderGroupsCellProps,\n  UseHvHeaderGroupsColumnProps,\n  UseHvHeaderGroupsInstance,\n} from \"./useHvHeaderGroups\";\nimport type {\n  UseHvPaginationHooks,\n  UseHvPaginationTableInstance,\n} from \"./useHvPagination\";\nimport type {\n  UseHvResizeColumnProps,\n  UseHvResizeTableCellProps,\n} from \"./useHvResizeColumns\";\nimport type {\n  UseHvRowExpandRowInstance,\n  UseHvRowExpandTableOptions,\n  UseHvRowExpandTableRowProps,\n} from \"./useHvRowExpand\";\nimport type {\n  UseHvRowSelectionHooks,\n  UseHvRowSelectionRowInstance,\n  UseHvRowSelectionState,\n  UseHvRowSelectionTableInstance,\n  UseHvRowSelectionTableOptions,\n  UseHvRowSelectionTableRowProps,\n} from \"./useHvRowSelection\";\nimport type {\n  UseHvSortByColumnProps,\n  UseHvSortByTableCellProps,\n} from \"./useHvSortBy\";\nimport type {\n  UseHvTableStickyCellProps,\n  UseHvTableStickyColumnProps,\n  UseHvTableStickyHooks,\n  UseHvTableStickyTableInstance,\n  UseHvTableStickyTableOptions,\n  UseHvTableStickyTableProps,\n} from \"./useHvSticky\";\nimport type {\n  UseHvTableStylesColumnOptions,\n  UseHvTableStylesTableCellProps,\n  UseHvTableStylesTableOptions,\n  UseHvTableStylesTableRowProps,\n} from \"./useHvTableStyles\";\nimport { useHvTableStyles } from \"./useHvTableStyles\";\n\n// #region ##### TYPES #####\n\ntype Accessor<D extends object> = (\n  originalRow: D,\n  index: number,\n  sub: {\n    subRows: D[];\n    depth: number;\n    data: D[];\n  },\n) => CellValue;\n\ntype ValueOf<T> = T[keyof T];\ntype StringKey<D> = Extract<keyof D, string>;\ntype IdType<D> = StringKey<D> | string;\ntype CellValue<V = any> = V;\n\ntype HvHeaderProps<D extends object = Record<string, unknown>> =\n  HvTableInstance<D> & {\n    column: HvColumnInstance<D>;\n  };\n\ninterface HvMetaBase<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> {\n  instance: HvTableInstance<D, H>;\n  userProps: any;\n}\n\nexport type HvMeta<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  Extension = never,\n  M = HvMetaBase<D, H>,\n> = [Extension] extends [never] ? M : M & Extension;\n\nexport type HvPropGetter<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  Props extends object = Record<string, unknown>,\n  T extends object = never,\n  P = Partial<Props>,\n> = ((props: P, meta: HvMeta<D, H, T>) => P | P[]) | P | P[];\n\nexport type HvTableHeaderRenderer<D extends object = Record<string, unknown>> =\n  Renderer<HvHeaderProps<D>>;\n\ntype HvFooterProps<D extends object = Record<string, unknown>> =\n  HvTableInstance<D> & {\n    column: HvColumnInstance<D>;\n  };\n\ninterface HvHeaderGroup<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends HvColumnInstance<D, H>,\n    Omit<UseTableHeaderGroupProps<D>, \"headers\"> {\n  headers: Array<HvHeaderGroup<D, H>>;\n}\n\ntype HvRowPropGetter<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvPropGetter<D, H, HvUseTableRowProps, { row: HvRowInstance<D, H> }>;\n\ntype HvTablePropGetter<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvPropGetter<D, H, HvUseTableProps>;\n\ntype HvCellPropGetter<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvPropGetter<D, H, HvUseTableCellProps, { cell: HvCellInstance<D, H> }>;\n\ntype HvHeaderPropGetter<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvPropGetter<D, H, HvUseTableHeaderProps, { column: HvHeaderGroup<D, H> }>;\n\ntype HvFooterPropGetter<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvPropGetter<D, H, HvUseTableFooterProps, { column: HvHeaderGroup<D, H> }>;\n\nexport interface HvCellProps<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  V = any,\n> extends HvTableInstance<D, H> {\n  column: HvColumnInstance<D, H>;\n  row: HvRowInstance<D, H>;\n  cell: HvCellInstance<D, H, V>;\n  value: CellValue<V>;\n}\n\nexport type HvTableDefinitionConfig<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvTableOptions<D, H>;\n\ninterface HvColumnInterfaceBasedOnValue<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  V = any,\n> {\n  Cell?: Renderer<HvCellProps<D, H, V>>;\n}\n\ninterface HvColumnGroupInterface<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> {\n  columns: Array<HvTableColumnConfig<D, H>>;\n}\n\ntype HvColumnGroup<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvTableColumnOptions<D, H> &\n  HvColumnGroupInterface<D, H> &\n  (\n    | { Header: H }\n    | ({ id: IdType<D> } & {\n        Header: H;\n      })\n  ) & { accessor?: Accessor<D> };\n\ntype HvColumnWithStrictAccessor<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvTableColumnOptions<D, H> &\n  ValueOf<{\n    [K in keyof D]: {\n      accessor: K;\n    } & HvColumnInterfaceBasedOnValue<D, H, D[K]>;\n  }>;\n\ntype HvColumnWithLooseAccessor<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> = HvTableColumnOptions<D, H> &\n  HvColumnInterfaceBasedOnValue<D, H> &\n  (\n    | { Header: H }\n    | { id: IdType<D> }\n    | { accessor: keyof D extends never ? IdType<D> : never }\n  ) & {\n    accessor?: keyof D extends never ? IdType<D> | Accessor<D> : Accessor<D>;\n  };\n\nexport type HvTableColumnConfig<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> =\n  | HvColumnGroup<D, H>\n  | HvColumnWithLooseAccessor<D, H>\n  | HvColumnWithStrictAccessor<D, H>;\n\n// #region HOOKS\nexport interface HvHooks<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends Omit<Hooks<D>, \"useOptions\">,\n    Partial<UseExpandedHooks<D>>,\n    Partial<UseGroupByHooks<D>>,\n    Partial<UseSortByHooks<D>>,\n    Partial<UseHvRowSelectionHooks<D>>,\n    Partial<UseHvTableStickyHooks<D>>,\n    Partial<UseHvPaginationHooks<D>>,\n    Partial<UseHvBulkActionsHooks<D>> {\n  useOptions: Array<\n    (\n      options: HvTableOptions<D, H>,\n      args: HvTableOptions<D, H>,\n    ) => HvTableOptions<D, H>\n  >;\n  stateReducers: Array<\n    (\n      newState: HvTableState<D>,\n      action: ActionType,\n      previousState?: HvTableState<D>,\n      instance?: HvTableState<D>,\n    ) => ReducerTableState<D> | undefined\n  >;\n  columns: Array<\n    (\n      columns: Array<HvTableColumnConfig<D, H>>,\n      meta: HvMeta<D, H>,\n    ) => Array<HvTableColumnConfig<D, H>>\n  >;\n  allColumns: Array<\n    (\n      allColumns: Array<HvColumnInstance<D, H>>,\n      meta: HvMeta<D, H>,\n    ) => Array<HvTableColumnConfig<D, H>>\n  >;\n  visibleColumns: Array<\n    (\n      allColumns: Array<HvColumnInstance<D, H>>,\n      meta: HvMeta<D, H>,\n    ) => Array<HvTableColumnConfig<D, H>>\n  >;\n  headerGroups: Array<\n    (\n      allColumns: Array<HvHeaderGroup<D, H>>,\n      meta: HvMeta<D, H>,\n    ) => Array<HvHeaderGroup<D, H>>\n  >;\n  useInstanceBeforeDimensions: Array<(instance: HvTableInstance<D, H>) => void>;\n  useInstance: Array<(instance: HvTableInstance<D, H>) => void>;\n  useControlledState: Array<\n    (state: HvTableState<D>, meta: HvMeta<D, H>) => HvTableState<D>\n  >;\n  getTableProps: Array<HvTablePropGetter<D, H>>;\n  getHeaderProps: Array<HvHeaderPropGetter<D>>;\n  getFooterProps: Array<HvFooterPropGetter<D>>;\n  getRowProps: Array<HvRowPropGetter<D>>;\n  getCellProps: Array<HvCellPropGetter<D>>;\n  useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;\n}\n// #endregion\n\n// #region STATE\nexport interface HvTableState<D extends object = Record<string, unknown>>\n  extends TableState<D>,\n    Partial<UseColumnOrderState<D>>,\n    Partial<UseExpandedState<D>>,\n    Partial<UseFiltersState<D>>,\n    Partial<UseGlobalFiltersState<D>>,\n    Partial<UseGroupByState<D>>,\n    Partial<UsePaginationState<D>>,\n    Partial<UseResizeColumnsState<D>>,\n    Partial<UseSortByState<D>>,\n    Partial<UseRowStateState<D>>,\n    Partial<UseHvRowSelectionState<D>> {\n  rowCount: number;\n}\n// #endregion\n\n// #region OPTIONS\nexport interface HvTableOptions<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends Omit<\n      TableOptions<D>,\n      | \"columns\"\n      | \"data\"\n      | \"defaultColumn\"\n      | \"stateReducer\"\n      | \"useControlledState\"\n      | \"getRowId\"\n    >,\n    Partial<UseExpandedOptions<D>>,\n    Partial<UseFiltersOptions<D>>,\n    Partial<UseGlobalFiltersOptions<D>>,\n    Partial<UseGroupByOptions<D>>,\n    Partial<UsePaginationOptions<D>>,\n    Partial<UseResizeColumnsOptions<D>>,\n    Partial<UseSortByOptions<D>>,\n    Partial<UseRowStateOptions<D>>,\n    Partial<UseHvTableStylesTableOptions>,\n    Partial<UseHvRowSelectionTableOptions>,\n    Partial<UseHvTableStickyTableOptions>,\n    Partial<UseHvBulkActionsTableOptions>,\n    Partial<UseHvRowExpandTableOptions> {\n  columns?: Array<HvTableColumnConfig<D, H>>;\n  data?: D[];\n  initialState?: Partial<HvTableState<D>>;\n  labels?: Record<string, string>;\n  defaultColumn?: Partial<HvTableColumnConfig<D, H>>;\n  stateReducer?: (\n    newState: HvTableState<D>,\n    action: ActionType,\n    previousState: HvTableState<D>,\n    instance?: HvTableInstance<D, H>,\n  ) => HvTableState<D>;\n  useControlledState?: (\n    state: HvTableState<D>,\n    meta: HvMeta<D, H>,\n  ) => HvTableState<D>;\n  getRowId?: (\n    originalRow: D,\n    relativeIndex: number,\n    parent?: HvRowInstance<D, H>,\n  ) => string;\n}\n\nexport interface HvTableColumnOptions<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends Omit<ColumnInterface<D>, \"Header\" | \"Footer\">,\n    Partial<UseFiltersColumnOptions<D>>,\n    Partial<UseGroupByColumnOptions<D>>,\n    Partial<UseResizeColumnsColumnOptions<D>>,\n    Partial<UseSortByColumnOptions<D>>,\n    Partial<UseGlobalFiltersColumnOptions<D>>,\n    Partial<UseHvTableStylesColumnOptions> {\n  Header?: H;\n  Footer?: Renderer<HvFooterProps<D>>;\n  originalId?: IdType<D>;\n}\n// #endregion\n\n// #region INSTANCE\nexport interface HvTableInstance<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends Omit<\n      TableInstance<D>,\n      | \"pageCount\"\n      | \"data\"\n      | \"columns\"\n      | \"rows\"\n      | \"allColumns\"\n      | \"visibleColumns\"\n      | \"headers\"\n      | \"flatHeaders\"\n      | \"rowsById\"\n      | \"prepareRow\"\n      | \"flatRows\"\n      | \"headerGroups\"\n      | \"footerGroups\"\n      | \"defaultColumn\"\n      | \"stateReducer\"\n      | \"useControlledState\"\n      | \"getRowId\"\n      | \"getHooks\"\n      | \"getTableProps\"\n    >,\n    Omit<HvTableOptions<D, H>, \"pageCount\" | \"columns\">,\n    Partial<UseColumnOrderInstanceProps<D>>,\n    Partial<Omit<UseExpandedInstanceProps<D>, \"rows\">>,\n    Partial<Omit<UseFiltersInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">>,\n    Partial<\n      Omit<UseGlobalFiltersInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">\n    >,\n    Partial<Omit<UseGroupByInstanceProps<D>, \"rows\" | \"rowsById\" | \"flatRows\">>,\n    Partial<Omit<UsePaginationInstanceProps<D>, \"page\">>,\n    Partial<Omit<UseSortByInstanceProps<D>, \"rows\">>,\n    Partial<UseRowStateInstanceProps<D>>,\n    Partial<Omit<UseHvRowSelectionTableInstance<D>, \"selectedFlatRows\">>,\n    Partial<UseHvTableStickyTableInstance<D>>,\n    Partial<UseHvHeaderGroupsInstance>,\n    Partial<UseHvPaginationTableInstance<D>>,\n    Partial<UseHvBulkActionsTableInstanceProps<D>> {\n  initialState: Partial<HvTableState<D>>;\n  state: HvTableState<D>;\n  columns: Array<HvColumnInstance<D, H>>;\n  allColumns: Array<HvColumnInstance<D, H>>;\n  visibleColumns: Array<HvColumnInstance<D, H>>;\n  headers: Array<HvColumnInstance<D, H>>;\n  flatHeaders: Array<HvColumnInstance<D, H>>;\n  rows: Array<HvRowInstance<D, H>>;\n  page: Array<HvRowInstance<D, H>>;\n  rowsById: Record<string, HvRowInstance<D, H>>;\n  flatRows: Array<HvRowInstance<D, H>>;\n  getHooks: () => HvHooks<D>;\n  getTableProps: (propGetter?: HvTablePropGetter<D, H>) => HvUseTableProps;\n  prepareRow: (row: HvRowInstance<D, H>) => void;\n  selectedFlatRows: Array<HvRowInstance<D, H>>;\n  initialRows: Array<HvRowInstance<D, H>>;\n  initialRowsById: Record<string, HvRowInstance<D, H>>;\n  labels: Record<string, string>;\n  headerGroups: Array<HvHeaderGroup<D, H>>;\n  footerGroups: Array<HvHeaderGroup<D, H>>;\n}\n\nexport interface HvColumnInstance<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends Omit<\n      ColumnInstance<D>,\n      | \"Cell\"\n      | \"columns\"\n      | \"parent\"\n      | \"placeholderOf\"\n      | \"id\"\n      | \"Header\"\n      | \"getHeaderProps\"\n      | \"getFooterProps\"\n      | \"Footer\"\n    >,\n    HvTableColumnOptions<D, H>,\n    Partial<UseFiltersColumnProps<D>>,\n    Partial<UseGroupByColumnProps<D>>,\n    Partial<UseResizeColumnsColumnProps<D>>,\n    Partial<UseSortByColumnProps<D>> {\n  Cell?: Renderer<HvCellProps<D, H>>;\n  columns: Array<HvColumnInstance<D, H>>;\n  parent: HvColumnInstance<D, H>;\n  placeholderOf?: HvColumnInstance<D, H>;\n  getHeaderProps: (\n    propGetter?: HvHeaderPropGetter<D, H>,\n  ) => HvUseTableHeaderProps;\n  getFooterProps: (\n    propGetter?: HvFooterPropGetter<D, H>,\n  ) => HvUseTableFooterProps;\n}\n\nexport interface HvRowInstance<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n> extends Omit<Row<D>, \"cells\" | \"allCells\" | \"subRows\" | \"getRowProps\">,\n    Partial<Omit<UseGroupByRowProps<D>, \"subRows\" | \"values\">>,\n    Partial<UseRowStateRowProps<D>>,\n    Partial<Omit<UseHvRowExpandRowInstance<D>, \"subRows\">>,\n    Partial<UseHvRowSelectionRowInstance> {\n  cells: Array<HvCellInstance<D, H>>;\n  allCells: Array<HvCellInstance<D, H>>;\n  getRowProps: (propGetter?: HvRowPropGetter<D, H>) => HvUseTableRowProps;\n  index: number;\n  original: D;\n  id: string;\n  subRows: Array<HvRowInstance<D, H>>;\n}\n\nexport interface HvCellInstance<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  V = any,\n> extends Omit<Cell<D, V>, \"column\" | \"row\" | \"getCellProps\">,\n    Partial<UseGroupByCellProps<D>> {\n  column: HvColumnInstance<D, H>;\n  row: HvRowInstance<D, H>;\n  getCellProps: (propGetter?: HvCellPropGetter<D, H>) => HvUseTableCellProps;\n}\n// #endregion\n\n// #region PROPS\nexport interface HvUseTableProps\n  extends Omit<TableProps, \"role\">,\n    UseHvTableStickyTableProps,\n    HvTableProps {}\n\nexport interface HvUseTableHeaderProps\n  extends Omit<TableHeaderProps, \"role\">,\n    Omit<UseHvTableStylesTableCellProps, \"classes\">,\n    UseHvTableStickyColumnProps,\n    UseHvHeaderGroupsColumnProps,\n    UseHvResizeColumnProps,\n    Omit<UseHvSortByColumnProps, \"sortDirection\">,\n    HvTableHeaderProps {}\n\nexport interface HvUseTableFooterProps\n  extends TableFooterProps,\n    UseHvTableStylesTableCellProps {}\n\nexport interface HvUseTableRowProps\n  extends Omit<TableRowProps, \"role\">,\n    UseHvTableStylesTableRowProps,\n    UseHvRowSelectionTableRowProps,\n    UseHvRowExpandTableRowProps,\n    HvTableRowProps {}\n\nexport interface HvUseTableCellProps\n  extends Omit<TableCellProps, \"role\">,\n    Omit<UseHvTableStylesTableCellProps, \"variant\" | \"classes\">,\n    UseHvTableStickyCellProps,\n    UseHvHeaderGroupsCellProps,\n    UseHvResizeTableCellProps,\n    UseHvSortByTableCellProps,\n    HvTableCellProps {}\n\n// #endregion\n\nexport type UseHvTableProps = <\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n>(\n  options: HvTableOptions<D, H>,\n  ...plugins: Array<PluginHook<D>>\n) => HvTableInstance<D, H>;\n\nexport type { PluginHook as HvTablePluginHook };\n\n// #endregion ##### TYPES #####\n\nconst toTitleCase = (str: string) => {\n  return str\n    .replace(/([^A-Z])([A-Z])/g, \"$1 $2\") // split cameCase\n    .replace(/[_-]+/g, \" \") // split snake_case and lisp-case\n    .toLowerCase()\n    .replace(/(^\\w|\\b\\w)/g, (m) => m.toUpperCase()) // title case words\n    .replace(/\\s+/g, \" \") // collapse repeated whitespace\n    .trim(); // remove leading/trailing whitespace\n};\n\nfunction useDefaultData<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n>(data?: HvTableOptions<D, H>[\"data\"]) {\n  return useMemo(() => {\n    return data || [];\n  }, [data]);\n}\n\nfunction useDefaultColumns<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n>(\n  data: NonNullable<HvTableOptions<D, H>[\"data\"]>,\n  columns?: HvTableOptions<D, H>[\"columns\"],\n) {\n  return useMemo(() => {\n    if (columns != null) {\n      return columns;\n    }\n\n    const uniqueKeys = Object.keys(Object.assign({}, ...data));\n\n    return uniqueKeys\n      .filter((key) => ![\"subRows\", \"subComponent\"].includes(key))\n      .map((key) => ({\n        accessor: key,\n        Header: toTitleCase(key),\n      }));\n  }, [columns, data]);\n}\n\nfunction ensureCorePluginInstallation<\n  D extends object = Record<string, unknown>,\n>(\n  plugins: PluginHook<D>[],\n  hvPluginName: string,\n  corePluginToInstall: PluginHook<D>,\n) {\n  const indexOfCorePlugin = plugins.findIndex(\n    (plugin) => plugin.pluginName === corePluginToInstall.pluginName,\n  );\n  const indexOfHvPlugin = plugins.findIndex(\n    (plugin) => plugin.pluginName === hvPluginName,\n  );\n\n  if (\n    indexOfHvPlugin !== -1 &&\n    (indexOfCorePlugin === -1 || indexOfCorePlugin > indexOfHvPlugin)\n  ) {\n    if (indexOfCorePlugin > -1) {\n      plugins.splice(indexOfCorePlugin, 1);\n    }\n\n    plugins.splice(indexOfHvPlugin, 0, corePluginToInstall);\n  }\n}\n\nfunction useInstanceHook<D extends object = Record<string, unknown>>(\n  instance: TableInstance<D>,\n) {\n  const { rowsById } = instance;\n\n  Object.assign(instance, {\n    initialRowsById: rowsById,\n  });\n}\n\nfunction useHvTableSetup<D extends object = Record<string, unknown>>(\n  hooks: Hooks<D>,\n) {\n  hooks.useInstance.push(useInstanceHook);\n}\nuseHvTableSetup.pluginName = \"useHvTableSetup\";\n\nexport function useHvTable<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n>(\n  options: HvTableOptions<D, H>,\n  ...plugins: PluginHook<D>[]\n): HvTableInstance<D, H> {\n  const { data: dataProp, columns: columnsProp, ...others } = options;\n\n  const data = useDefaultData<D, H>(dataProp);\n  const columns = useDefaultColumns<D, H>(data, columnsProp);\n\n  ensureCorePluginInstallation<D>(plugins, \"useHvPagination\", usePagination);\n  ensureCorePluginInstallation<D>(plugins, \"useHvRowExpand\", useExpanded);\n  ensureCorePluginInstallation<D>(plugins, \"useHvSortBy\", useSortBy);\n  ensureCorePluginInstallation<D>(\n    plugins,\n    \"useHvResizeColumns\",\n    useResizeColumns,\n  );\n\n  const indexOfHvTableStylesPlugin = plugins.findIndex(\n    (plugin) => plugin.pluginName === \"useHvTableStyles\",\n  );\n  if (indexOfHvTableStylesPlugin === -1) {\n    plugins.push(useHvTableStyles);\n  }\n\n  // Main hook call\n  return useTable<D>(\n    {\n      data,\n      columns,\n      defaultColumn: { Cell: DefaultCell },\n      ...others,\n    } as any,\n    useHvTableSetup,\n    ...plugins,\n  ) as any;\n}\n"],"names":[],"mappings":";;;;AA4lBA,MAAM,cAAc,CAAC,QAAgB;AAC5B,SAAA,IACJ,QAAQ,oBAAoB,OAAO,EACnC,QAAQ,UAAU,GAAG,EACrB,YAAY,EACZ,QAAQ,eAAe,CAAC,MAAM,EAAE,YAAY,CAAC,EAC7C,QAAQ,QAAQ,GAAG,EACnB,KAAK;AACV;AAEA,SAAS,eAGP,MAAqC;AACrC,SAAO,QAAQ,MAAM;AACnB,WAAO,QAAQ,CAAC;AAAA,EAAA,GACf,CAAC,IAAI,CAAC;AACX;AAEA,SAAS,kBAIP,MACA,SACA;AACA,SAAO,QAAQ,MAAM;AACnB,QAAI,WAAW,MAAM;AACZ,aAAA;AAAA,IAAA;AAGH,UAAA,aAAa,OAAO,KAAK,OAAO,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC;AAEzD,WAAO,WACJ,OAAO,CAAC,QAAQ,CAAC,CAAC,WAAW,cAAc,EAAE,SAAS,GAAG,CAAC,EAC1D,IAAI,CAAC,SAAS;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,YAAY,GAAG;AAAA,IAAA,EACvB;AAAA,EAAA,GACH,CAAC,SAAS,IAAI,CAAC;AACpB;AAEA,SAAS,6BAGP,SACA,cACA,qBACA;AACA,QAAM,oBAAoB,QAAQ;AAAA,IAChC,CAAC,WAAW,OAAO,eAAe,oBAAoB;AAAA,EACxD;AACA,QAAM,kBAAkB,QAAQ;AAAA,IAC9B,CAAC,WAAW,OAAO,eAAe;AAAA,EACpC;AAEA,MACE,oBAAoB,OACnB,sBAAsB,MAAM,oBAAoB,kBACjD;AACA,QAAI,oBAAoB,IAAI;AAClB,cAAA,OAAO,mBAAmB,CAAC;AAAA,IAAA;AAG7B,YAAA,OAAO,iBAAiB,GAAG,mBAAmB;AAAA,EAAA;AAE1D;AAEA,SAAS,gBACP,UACA;AACM,QAAA,EAAE,aAAa;AAErB,SAAO,OAAO,UAAU;AAAA,IACtB,iBAAiB;AAAA,EAAA,CAClB;AACH;AAEA,SAAS,gBACP,OACA;AACM,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,gBAAgB,aAAa;AAEb,SAAA,WAId,YACG,SACoB;AACvB,QAAM,EAAE,MAAM,UAAU,SAAS,aAAa,GAAG,WAAW;AAEtD,QAAA,OAAO,eAAqB,QAAQ;AACpC,QAAA,UAAU,kBAAwB,MAAM,WAAW;AAEzB,+BAAA,SAAS,mBAAmB,aAAa;AACzC,+BAAA,SAAS,kBAAkB,WAAW;AACtC,+BAAA,SAAS,eAAe,SAAS;AACjE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,6BAA6B,QAAQ;AAAA,IACzC,CAAC,WAAW,OAAO,eAAe;AAAA,EACpC;AACA,MAAI,+BAA+B,IAAI;AACrC,YAAQ,KAAK,gBAAgB;AAAA,EAAA;AAIxB,SAAA;AAAA,IACL;AAAA,MACE;AAAA,MACA;AAAA,MACA,eAAe,EAAE,MAAM,YAAY;AAAA,MACnC,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;"}

package/dist/esm/Table/hooks/{useTableStyles.js → useHvTableStyles.js}

@@ -76,15 +76,14 @@ const getCellPropsHook = (props, { cell }) => {
   }
   return [props, nextProps];
 };
-const useTableStyles = (hooks) => {
+const useHvTableStyles = (hooks) => {
   hooks.getTableProps.push(getTablePropsHook);
   hooks.getHeaderProps.push(getHeaderFooterPropsHook);
   hooks.getFooterProps.push(getHeaderFooterPropsHook);
   hooks.getRowProps.push(getRowPropsHook);
   hooks.getCellProps.push(getCellPropsHook);
 };
-useTableStyles.pluginName = "useHvTableStyles";
+useHvTableStyles.pluginName = "useHvTableStyles";
 export {
-  useTableStyles as default,
-  getHeaderFooterPropsHook
+  useHvTableStyles
 };

package/dist/esm/Table/hooks/useHvTableStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHvTableStyles.js","sources":["../../../../src/Table/hooks/useHvTableStyles.ts"],"sourcesContent":["import { Hooks } from \"react-table\";\nimport { clsx } from \"clsx\";\n\n// #region ##### TYPES #####\n\nexport type UseHvTableStylesTableOptions = {\n  style?: React.CSSProperties;\n  className?: string;\n  classes?: Record<string, string>;\n  component?: any;\n};\n\n// column definition:\nexport interface UseHvTableStylesColumnOptions {\n  variant?: \"checkbox\" | \"expand\" | \"actions\" | \"default\" | \"none\";\n  align?: \"center\" | \"inherit\" | \"justify\" | \"left\" | \"right\";\n\n  style?: React.CSSProperties;\n  className?: string;\n  classes?: Record<string, string>;\n\n  headerStyle?: React.CSSProperties;\n  headerClassName?: string;\n  headerClasses?: Record<string, string>;\n\n  cellStyle?: React.CSSProperties;\n  cellClassName?: string;\n  cellClasses?: Record<string, string>;\n}\n\n// PROPS:\nexport interface UseHvTableStylesTableRowProps {\n  hover?: boolean;\n}\n\nexport interface UseHvTableStylesTableCellProps {\n  style?: React.CSSProperties;\n  className?: string;\n  classes?: Record<string, string>;\n  variant?: \"checkbox\" | \"expand\" | \"actions\" | \"default\" | \"none\";\n  align?: \"center\" | \"inherit\" | \"justify\" | \"left\" | \"right\";\n}\n\nexport type UseTableStylesProps = (<D extends object = Record<string, unknown>>(\n  hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n// props target: <table>\nconst getTablePropsHook = (props: any, { instance }: any) => {\n  const nextProps: UseHvTableStylesTableOptions = {\n    component: instance.tableComponent,\n  };\n\n  if (instance.style != null) {\n    nextProps.style = instance.style;\n  }\n\n  if (instance.className != null) {\n    nextProps.className = instance.className;\n  }\n\n  if (instance.classes != null) {\n    nextProps.classes = instance.classes;\n  }\n\n  return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderFooterPropsHook = (props: any, { column }: any) => {\n  const nextProps: UseHvTableStylesColumnOptions = {\n    variant: column.variant,\n    align: column.align,\n  };\n\n  if (column.style != null || column.headerStyle != null) {\n    nextProps.style = {\n      ...props.style,\n      ...column.style,\n      ...column.headerStyle,\n    };\n  }\n\n  if (column.className != null || column.headerClassName != null) {\n    nextProps.className = clsx(\n      props.className,\n      column.className,\n      column.headerClassName,\n    );\n  }\n\n  if (column.classes != null || column.headerClasses) {\n    nextProps.classes = {\n      ...props.classes,\n      ...column.classes,\n      ...column.headerClasses,\n    };\n  }\n\n  return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props: any) => {\n  const nextProps: UseHvTableStylesTableRowProps = {\n    hover: true,\n  };\n\n  return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props: any, { cell }: any) => {\n  const nextProps: UseHvTableStylesTableCellProps = {\n    variant: cell.column.variant,\n    align: cell.column.align,\n  };\n\n  if (cell.column.style != null || cell.column.cellStyle != null) {\n    nextProps.style = {\n      ...props.style,\n      ...cell.column.style,\n      ...cell.column.cellStyle,\n    };\n  }\n\n  if (cell.column.className != null || cell.column.cellClassName != null) {\n    nextProps.className = clsx(\n      props.className,\n      cell.column.className,\n      cell.column.cellClassName,\n    );\n  }\n\n  if (cell.column.classes != null || cell.column.cellClasses) {\n    nextProps.classes = {\n      ...props.classes,\n      ...cell.column.classes,\n      ...cell.column.cellClasses,\n    };\n  }\n\n  return [props, nextProps];\n};\n\nexport const useHvTableStyles: UseTableStylesProps = (hooks) => {\n  // props target: <table>\n  hooks.getTableProps.push(getTablePropsHook);\n  // props target: <table><thead><tr><th>\n  hooks.getHeaderProps.push(getHeaderFooterPropsHook);\n  // props target: <table><tfoot><tr><td>\n  hooks.getFooterProps.push(getHeaderFooterPropsHook);\n  // props target: <table><tbody><tr>\n  hooks.getRowProps.push(getRowPropsHook);\n  // props target: <table><tbody><tr><td>\n  hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseHvTableStyles.pluginName = \"useHvTableStyles\";\n"],"names":[],"mappings":";AAkDA,MAAM,oBAAoB,CAAC,OAAY,EAAE,eAAoB;AAC3D,QAAM,YAA0C;AAAA,IAC9C,WAAW,SAAS;AAAA,EACtB;AAEI,MAAA,SAAS,SAAS,MAAM;AAC1B,cAAU,QAAQ,SAAS;AAAA,EAAA;AAGzB,MAAA,SAAS,aAAa,MAAM;AAC9B,cAAU,YAAY,SAAS;AAAA,EAAA;AAG7B,MAAA,SAAS,WAAW,MAAM;AAC5B,cAAU,UAAU,SAAS;AAAA,EAAA;AAGxB,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,2BAA2B,CAAC,OAAY,EAAE,aAAkB;AAChE,QAAM,YAA2C;AAAA,IAC/C,SAAS,OAAO;AAAA,IAChB,OAAO,OAAO;AAAA,EAChB;AAEA,MAAI,OAAO,SAAS,QAAQ,OAAO,eAAe,MAAM;AACtD,cAAU,QAAQ;AAAA,MAChB,GAAG,MAAM;AAAA,MACT,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAAA,EAAA;AAGF,MAAI,OAAO,aAAa,QAAQ,OAAO,mBAAmB,MAAM;AAC9D,cAAU,YAAY;AAAA,MACpB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EAAA;AAGF,MAAI,OAAO,WAAW,QAAQ,OAAO,eAAe;AAClD,cAAU,UAAU;AAAA,MAClB,GAAG,MAAM;AAAA,MACT,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,kBAAkB,CAAC,UAAe;AACtC,QAAM,YAA2C;AAAA,IAC/C,OAAO;AAAA,EACT;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,mBAAmB,CAAC,OAAY,EAAE,WAAgB;AACtD,QAAM,YAA4C;AAAA,IAChD,SAAS,KAAK,OAAO;AAAA,IACrB,OAAO,KAAK,OAAO;AAAA,EACrB;AAEA,MAAI,KAAK,OAAO,SAAS,QAAQ,KAAK,OAAO,aAAa,MAAM;AAC9D,cAAU,QAAQ;AAAA,MAChB,GAAG,MAAM;AAAA,MACT,GAAG,KAAK,OAAO;AAAA,MACf,GAAG,KAAK,OAAO;AAAA,IACjB;AAAA,EAAA;AAGF,MAAI,KAAK,OAAO,aAAa,QAAQ,KAAK,OAAO,iBAAiB,MAAM;AACtE,cAAU,YAAY;AAAA,MACpB,MAAM;AAAA,MACN,KAAK,OAAO;AAAA,MACZ,KAAK,OAAO;AAAA,IACd;AAAA,EAAA;AAGF,MAAI,KAAK,OAAO,WAAW,QAAQ,KAAK,OAAO,aAAa;AAC1D,cAAU,UAAU;AAAA,MAClB,GAAG,MAAM;AAAA,MACT,GAAG,KAAK,OAAO;AAAA,MACf,GAAG,KAAK,OAAO;AAAA,IACjB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEa,MAAA,mBAAwC,CAAC,UAAU;AAExD,QAAA,cAAc,KAAK,iBAAiB;AAEpC,QAAA,eAAe,KAAK,wBAAwB;AAE5C,QAAA,eAAe,KAAK,wBAAwB;AAE5C,QAAA,YAAY,KAAK,eAAe;AAEhC,QAAA,aAAa,KAAK,gBAAgB;AAC1C;AAEA,iBAAiB,aAAa;"}

package/dist/esm/Table/renderers/{DateColumnCell/DateColumnCell.js → DateColumnCell.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import dayjs from "dayjs";
-import { HvOverflowTooltip } from "../../../OverflowTooltip/OverflowTooltip.js";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 const HvDateColumnCell = ({
   date,
   dateFormat

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateColumnCell.js","sources":["../../../../src/Table/renderers/DateColumnCell.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport dayjs from \"dayjs\";\n\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\n\nexport interface HvDateColumnCellProp {\n  /** The date's text representation format. */\n  dateFormat?: string;\n  /** Date to render. */\n  date?: string;\n}\n\nexport const HvDateColumnCell = ({\n  date,\n  dateFormat,\n}: HvDateColumnCellProp): JSX.Element => {\n  const formattedDate = useMemo(() => {\n    if (date)\n      return dayjs(date).format(\n        dateFormat !== \"ISO8601\" ? dateFormat : undefined,\n      );\n    return \"—\";\n  }, [date, dateFormat]);\n\n  return <HvOverflowTooltip data={formattedDate} />;\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAAyC;AACjC,QAAA,gBAAgB,QAAQ,MAAM;AAC9B,QAAA;AACK,aAAA,MAAM,IAAI,EAAE;AAAA,QACjB,eAAe,YAAY,aAAa;AAAA,MAC1C;AACK,WAAA;AAAA,EAAA,GACN,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA,oBAAC,mBAAkB,EAAA,MAAM,cAAe,CAAA;AACjD;"}

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

@@ -0,0 +1,21 @@
+const EM_DASH = "—";
+const DefaultCell = ({
+  row,
+  value
+}) => {
+  switch (true) {
+    case row.subRows.length > 0:
+      return value;
+    case value instanceof Date:
+      return value.toISOString().slice(0, 10);
+    case typeof value === "object":
+      return value;
+    case (value == null || value === ""):
+      return EM_DASH;
+    default:
+      return String(value);
+  }
+};
+export {
+  DefaultCell
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultCell.js","sources":["../../../../src/Table/renderers/DefaultCell.tsx"],"sourcesContent":["import type { HvCellProps } from \"../hooks/useHvTable\";\n\nconst EM_DASH = \"—\";\n\n/** Default cell renderer for `Table`. */\nexport const DefaultCell = <T extends object>({\n  row,\n  value,\n}: HvCellProps<T, any>) => {\n  switch (true) {\n    case row.subRows.length > 0:\n      // do nothing if row has sub-rows\n      return value;\n    case value instanceof Date:\n      // render date in ISO format\n      return value.toISOString().slice(0, 10);\n    case typeof value === \"object\":\n      // render objects as-is\n      return value;\n    case value == null || value === \"\":\n      // render EM_DASH for empty values\n      return EM_DASH;\n    default:\n      // stringify boolean/bigint/number/etc.\n      return String(value);\n  }\n};\n"],"names":[],"mappings":"AAEA,MAAM,UAAU;AAGT,MAAM,cAAc,CAAmB;AAAA,EAC5C;AAAA,EACA;AACF,MAA2B;AACzB,UAAQ,MAAM;AAAA,IACZ,KAAK,IAAI,QAAQ,SAAS;AAEjB,aAAA;AAAA,IACT,KAAK,iBAAiB;AAEpB,aAAO,MAAM,YAAA,EAAc,MAAM,GAAG,EAAE;AAAA,IACxC,KAAK,OAAO,UAAU;AAEb,aAAA;AAAA,IACT,MAAK,SAAS,QAAQ,UAAU;AAEvB,aAAA;AAAA,IACT;AAEE,aAAO,OAAO,KAAK;AAAA,EAAA;AAEzB;"}

package/dist/esm/Table/renderers/{DropdownColumnCell/DropdownColumnCell.js → DropdownColumnCell.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const HvDropdownColumnCell = ({
   dropdownProps,
   ...others

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownColumnCell.js","sources":["../../../../src/Table/renderers/DropdownColumnCell.tsx"],"sourcesContent":["import { HvDropdown, HvDropdownProps } from \"../../Dropdown\";\n\nexport interface HvDropdownColumnCellProp extends HvDropdownProps<false> {\n  /** Extra props to be passed onto the dropdown. @deprecated pass props directly */\n  dropdownProps?: HvDropdownProps<false>;\n}\n\nexport const HvDropdownColumnCell = ({\n  dropdownProps,\n  ...others\n}: HvDropdownColumnCellProp) => {\n  return <HvDropdown {...dropdownProps} {...others} />;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,SAAQ,oBAAA,YAAA,EAAY,GAAG,eAAgB,GAAG,OAAQ,CAAA;AACpD;"}

package/dist/esm/Table/renderers/{ProgressColumnCell/ProgressColumnCell.js → ProgressColumnCell.js}

@@ -1,6 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import MuiLinearProgress from "@mui/material/LinearProgress";
-import { useClasses } from "./ProgressColumnCell.styles.js";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+const { useClasses } = createClasses("HvProgressColumnCell", {
+  root: { display: "flex", width: "100%" },
+  linearProgressContainer: { width: "100%", margin: "auto" },
+  linearProgress: {
+    height: 8
+  },
+  linearProgressRoot: { backgroundColor: theme.colors.atmo4 },
+  linearProgressColorPrimary: {
+    backgroundColor: theme.colors.atmo4
+  },
+  linearProgressBarColorPrimary: {
+    backgroundColor: theme.colors.positive
+  },
+  linearProgressBarColorSecondary: {
+    backgroundColor: theme.colors.secondary
+  }
+});
 const normalizeProgressBar = (value, max) => {
   return max > 0 ? Math.floor(value * 100 / max) : 0;
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressColumnCell.js","sources":["../../../../src/Table/renderers/ProgressColumnCell.tsx"],"sourcesContent":["import MuiLinearProgress from \"@mui/material/LinearProgress\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { useClasses } = createClasses(\"HvProgressColumnCell\", {\n  root: { display: \"flex\", width: \"100%\" },\n  linearProgressContainer: { width: \"100%\", margin: \"auto\" },\n  linearProgress: {\n    height: 8,\n  },\n  linearProgressRoot: { backgroundColor: theme.colors.atmo4 },\n  linearProgressColorPrimary: {\n    backgroundColor: theme.colors.atmo4,\n  },\n  linearProgressBarColorPrimary: {\n    backgroundColor: theme.colors.positive,\n  },\n  linearProgressBarColorSecondary: {\n    backgroundColor: theme.colors.secondary,\n  },\n});\n\nexport interface HvProgressColumnCellProp {\n  /** Current value of the bar. */\n  partial: number;\n  /** Maximum value of the bar. */\n  total: number;\n  /** The color of the bar. */\n  color?: \"primary\" | \"secondary\";\n  \"aria-labelledby\"?: string;\n}\n\nexport const normalizeProgressBar = (value: number, max: number) => {\n  return max > 0 ? Math.floor((value * 100) / max) : 0;\n};\n\nexport const HvProgressColumnCell = ({\n  partial,\n  total,\n  color = \"primary\",\n  \"aria-labelledby\": ariaLabelledBy,\n}: HvProgressColumnCellProp): JSX.Element => {\n  const { classes } = useClasses();\n\n  const percentage = normalizeProgressBar(partial, total);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.linearProgressContainer}>\n        <MuiLinearProgress\n          className={classes.linearProgress}\n          classes={{\n            root: classes.linearProgressRoot,\n            colorPrimary: classes.linearProgressColorPrimary,\n            barColorPrimary: classes.linearProgressBarColorPrimary,\n            barColorSecondary: classes.linearProgressBarColorSecondary,\n          }}\n          color={color}\n          variant=\"determinate\"\n          value={percentage}\n          aria-labelledby={ariaLabelledBy}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,EAAE,WAAA,IAAe,cAAc,wBAAwB;AAAA,EAC3D,MAAM,EAAE,SAAS,QAAQ,OAAO,OAAO;AAAA,EACvC,yBAAyB,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACzD,gBAAgB;AAAA,IACd,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EAC1D,4BAA4B;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iCAAiC;AAAA,IAC/B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;AAYY,MAAA,uBAAuB,CAAC,OAAe,QAAgB;AAClE,SAAO,MAAM,IAAI,KAAK,MAAO,QAAQ,MAAO,GAAG,IAAI;AACrD;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,mBAAmB;AACrB,MAA6C;AACrC,QAAA,EAAE,QAAQ,IAAI,WAAW;AAEzB,QAAA,aAAa,qBAAqB,SAAS,KAAK;AAGpD,SAAA,oBAAC,SAAI,WAAW,QAAQ,MACtB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,yBACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,cAAc,QAAQ;AAAA,QACtB,iBAAiB,QAAQ;AAAA,QACzB,mBAAmB,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,mBAAiB;AAAA,IAAA;AAAA,KAErB,EACF,CAAA;AAEJ;"}

package/dist/esm/Table/renderers/{SwitchColumnCell/SwitchColumnCell.js → SwitchColumnCell.js}

@@ -1,7 +1,16 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useClasses } from "./SwitchColumnCell.styles.js";
-import { HvTypography } from "../../../Typography/Typography.js";
-import { HvBaseSwitch } from "../../../BaseSwitch/BaseSwitch.js";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { HvTypography } from "../../Typography/Typography.js";
+import { HvBaseSwitch } from "../../BaseSwitch/BaseSwitch.js";
+const switchStyle = {
+  cursor: "pointer",
+  display: "inline-flex",
+  marginLeft: "10px"
+};
+const { useClasses } = createClasses("HvSwitchColumnCell", {
+  switchNo: switchStyle,
+  switchYes: switchStyle
+});
 const HvSwitchColumnCell = ({
   checked,
   value,

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchColumnCell.js","sources":["../../../../src/Table/renderers/SwitchColumnCell.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseSwitch, HvBaseSwitchProps } from \"../../BaseSwitch\";\nimport { HvTypography } from \"../../Typography\";\n\nconst switchStyle = {\n  cursor: \"pointer\",\n  display: \"inline-flex\",\n  marginLeft: \"10px\",\n};\n\nconst { useClasses } = createClasses(\"HvSwitchColumnCell\", {\n  switchNo: switchStyle,\n  switchYes: switchStyle,\n});\n\nexport interface HvSwitchColumnCellProp {\n  /** Whether the switch is checked or not. */\n  checked: boolean;\n  /** The switch label. */\n  value: number | string | undefined;\n  /** The value of the switch. */\n  switchLabel: string;\n  /** The right switch label. */\n  falseLabel?: string;\n  /** The left switch label. */\n  trueLabel?: string;\n  /** Extra props to be passed to the switch. */\n  switchProps?: HvBaseSwitchProps;\n}\n\nexport const HvSwitchColumnCell = ({\n  checked,\n  value,\n  switchLabel,\n  falseLabel,\n  trueLabel,\n  switchProps,\n}: HvSwitchColumnCellProp): JSX.Element => {\n  const { classes } = useClasses();\n\n  return (\n    <>\n      {falseLabel != null && (\n        <HvTypography\n          aria-hidden=\"true\"\n          variant=\"body\"\n          className={classes.switchNo}\n        >\n          {falseLabel}\n        </HvTypography>\n      )}\n      <HvBaseSwitch\n        checked={checked}\n        value={value}\n        {...switchProps}\n        inputProps={{ \"aria-label\": switchLabel, ...switchProps?.inputProps }}\n      />\n      {trueLabel != null && (\n        <HvTypography\n          aria-hidden=\"true\"\n          variant=\"body\"\n          className={classes.switchYes}\n        >\n          {trueLabel}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,EAAE,WAAA,IAAe,cAAc,sBAAsB;AAAA,EACzD,UAAU;AAAA,EACV,WAAW;AACb,CAAC;AAiBM,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2C;AACnC,QAAA,EAAE,QAAQ,IAAI,WAAW;AAE/B,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,cAAc,QACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,YAAY,EAAE,cAAc,aAAa,GAAG,aAAa,WAAW;AAAA,MAAA;AAAA,IACtE;AAAA,IACC,aAAa,QACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QAElB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

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

@@ -2,15 +2,25 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { ClassNames } from "@emotion/react";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../../utils/setId.js";
-import { hvStringFallback, hvNumberFallback } from "../utils/fallbacks.js";
-import { HvDateColumnCell } from "./DateColumnCell/DateColumnCell.js";
+import { HvDateColumnCell } from "./DateColumnCell.js";
+import { HvDropdownColumnCell } from "./DropdownColumnCell.js";
+import { HvProgressColumnCell } from "./ProgressColumnCell.js";
+import { HvSwitchColumnCell } from "./SwitchColumnCell.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvTag } from "../../Tag/Tag.js";
-import { HvSwitchColumnCell } from "./SwitchColumnCell/SwitchColumnCell.js";
-import { HvDropdownColumnCell } from "./DropdownColumnCell/DropdownColumnCell.js";
-import { HvProgressColumnCell } from "./ProgressColumnCell/ProgressColumnCell.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvTypography } from "../../Typography/Typography.js";
+const EM_DASH = "—";
+const hvStringFallback = (value) => {
+  return typeof value === "string" && value !== "" ? value : EM_DASH;
+};
+const hvNumberFallback = (value) => {
+  return typeof value === "number" ? value : EM_DASH;
+};
+const hvNodeFallback = (value) => {
+  if (!value) return EM_DASH;
+  return hvStringFallback(value?.toString()) === EM_DASH ? EM_DASH : value;
+};
 function hvTextColumn(col, overflowTooltipProps = {}) {
   return {
     Cell: ({ value }) => /* @__PURE__ */ jsx(
@@ -183,8 +193,11 @@ export {
   hvDateColumn,
   hvDropdownColumn,
   hvExpandColumn,
+  hvNodeFallback,
   hvNumberColumn,
+  hvNumberFallback,
   hvProgressColumn,
+  hvStringFallback,
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn

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

@@ -1 +1 @@
-{"version":3,"file":"renderers.js","sources":["../../../../src/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseSwitchProps } from \"../../BaseSwitch\";\nimport { HvButton } from \"../../Button\";\nimport { HvDropdownProps } from \"../../Dropdown\";\nimport { HvListValue } from \"../../List\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"../../OverflowTooltip\";\nimport { HvTag, HvTagProps } from \"../../Tag\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport {\n  HvCellProps,\n  HvRowInstance,\n  HvTableColumnConfig,\n  HvTableHeaderRenderer,\n} from \"../hooks/useTable\";\nimport { hvNumberFallback, hvStringFallback } from \"../utils\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\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 = 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\n// TODO - Review accessibility on the next renderers because they all differ\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 | undefined,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void,\n  dropdownProps?: HvDropdownProps<false>,\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const disabled =\n        !Array.isArray(value) || (Array.isArray(value) && value.length < 1);\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={disabled ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val!)}\n          disabled={disabled}\n          aria-labelledby={setId(id, column.id) || column.id || id} // TODO - to be reviewed because it doesn't make much sense\n          {...dropdownProps}\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, column } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell\n            partial={partial}\n            total={total}\n            color={color}\n            aria-labelledby={column.id}\n          />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderers.js","sources":["../../../../src/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseSwitchProps } from \"../../BaseSwitch\";\nimport { HvButton } from \"../../Button\";\nimport { HvDropdownProps } from \"../../Dropdown\";\nimport { HvListValue } from \"../../List\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"../../OverflowTooltip\";\nimport { HvTag, HvTagProps } from \"../../Tag\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport type {\n  HvCellProps,\n  HvRowInstance,\n  HvTableColumnConfig,\n  HvTableHeaderRenderer,\n} from \"../hooks/useHvTable\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\n\nconst EM_DASH = \"—\";\n\nexport const hvStringFallback = (value: any) => {\n  return typeof value === \"string\" && value !== \"\" ? value : EM_DASH;\n};\n\nexport const hvNumberFallback = (value: any) => {\n  return typeof value === \"number\" ? value : EM_DASH;\n};\n\nexport const hvNodeFallback = (value: any) => {\n  if (!value) return EM_DASH;\n  return hvStringFallback(value?.toString()) === EM_DASH ? EM_DASH : value;\n};\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 = 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\n// TODO - Review accessibility on the next renderers because they all differ\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 | undefined,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void,\n  dropdownProps?: HvDropdownProps<false>,\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const disabled =\n        !Array.isArray(value) || (Array.isArray(value) && value.length < 1);\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={disabled ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val!)}\n          disabled={disabled}\n          aria-labelledby={setId(id, column.id) || column.id || id} // TODO - to be reviewed because it doesn't make much sense\n          {...dropdownProps}\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, column } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell\n            partial={partial}\n            total={total}\n            color={color}\n            aria-labelledby={column.id}\n          />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Tag/Tag.js

@@ -1,19 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Chip from "@mui/material/Chip";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, cloneElement } from "react";
 import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { useControlled } from "../hooks/useControlled.js";
+import { isDeleteKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
-const getCategoricalColor = (customColor, colors) => {
-  return customColor && colors?.[customColor] || customColor || colors?.cat1;
-};
+import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
+import { HvTypography } from "../Typography/Typography.js";
 const HvTag = forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
     className,
+    component,
     style,
     label,
     disabled,
@@ -22,75 +22,95 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     selected,
     defaultSelected = false,
     color,
-    deleteIcon,
+    deleteIcon: deleteIconProp,
     onDelete,
     onClick,
+    onKeyDown,
+    onKeyUp,
     // TODO: remove from API
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     deleteButtonArialLabel = "Delete tag",
     deleteButtonProps = {},
     ...others
   } = useDefaultProps("HvTag", props);
-  const { colors } = useTheme();
-  const { classes, cx, css } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [isSelected, setIsSelected] = useControlled(
     selected,
     Boolean(defaultSelected)
   );
-  const defaultDeleteIcon = /* @__PURE__ */ jsx(
+  const handleDeleteClick = (event) => {
+    event.stopPropagation();
+    onDelete?.(event);
+  };
+  const backgroundColor = type === "semantic" && getColor(color, "neutral_20") || type === "categorical" && theme.alpha(getColor(color, "cat1"), 0.2) || void 0;
+  const isClickable = !!(onClick || onDelete || selectable);
+  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;
+  const deleteIcon = deleteIconProp && isValidElement(deleteIconProp) ? cloneElement(deleteIconProp, {
+    className: cx(classes.deleteIcon, {
+      [classes.disabledDeleteIcon]: disabled
+    }),
+    onClick: handleDeleteClick
+  }) : /* @__PURE__ */ jsx(
     CloseXS,
     {
-      className: cx(classes.button, classes.tagButton),
-      iconSize: "XS",
+      size: "XS",
+      onClick: handleDeleteClick,
+      className: cx(classes.deleteIcon, classes.button, classes.tagButton),
       ...deleteButtonProps
     }
   );
-  const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
-  const backgroundColor = type === "semantic" && getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
-  const isClickable = !!(onClick || onDelete) && !disabled;
-  const clickableClass = css({
-    "&:hover": {
-      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-    }
-  });
-  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
-  const avatarIcon = isSelected ? /* @__PURE__ */ jsx(CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsx(Checkbox, { color: colorOverride, iconSize: "XS" });
-  return /* @__PURE__ */ jsx(
-    Chip,
+  return /* @__PURE__ */ jsxs(
+    HvButtonBase,
     {
       ref,
-      label,
+      component: isClickable ? HvButtonBase : "div",
       disabled,
-      className: cx({ [clickableClass]: isClickable }, className),
-      style: {
-        ...disabled ? null : { backgroundColor },
-        ...style
+      "data-color": color,
+      style: mergeStyles(style, {
+        "--bgColor": backgroundColor
+      }),
+      className: cx(classes.root, classes.chipRoot, className, {
+        [classes.disabled]: disabled,
+        [classes.selected]: isSelected,
+        [classes.clickable]: isClickable && !disabled,
+        [classes.categorical]: type === "categorical",
+        [classes.categoricalFocus]: type === "categorical" && !disabled,
+        [classes.categoricalDisabled]: type === "categorical" && disabled
+      }),
+      onKeyUp: (event) => {
+        if (event.currentTarget === event.target && isDeleteKey(event)) {
+          onDelete?.(event);
+        }
+        onKeyUp?.(event);
       },
-      classes: {
-        root: cx(classes.root, classes.chipRoot, {
-          [classes.disabled]: disabled,
-          [classes.clickable]: isClickable,
-          [classes.categorical]: type === "categorical",
-          [classes.categoricalFocus]: type === "categorical" && !disabled,
-          [classes.categoricalDisabled]: type === "categorical" && disabled
-        }),
-        label: classes.label,
-        deleteIcon: cx(classes.deleteIcon, {
-          [classes.disabledDeleteIcon]: disabled
-        })
-      },
-      deleteIcon: deleteIcon || defaultDeleteIcon,
-      onDelete: disabled ? void 0 : onDelete,
       onClick: (event) => {
         if (disabled) return;
         if (selectable) setIsSelected(!isSelected);
         onClick?.(event, !isSelected);
       },
-      "aria-pressed": isSelected,
-      ...selectable && type === "semantic" && {
-        avatar: avatarIcon
-      },
-      ...others
+      selected: isClickable && isSelected,
+      ...others,
+      children: [
+        selectable && type === "semantic" && /* @__PURE__ */ jsx(
+          CheckboxIcon,
+          {
+            className: classes.icon,
+            color: disabled && ["atmo3", "secondary_60"] || void 0,
+            size: "XS"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            noWrap: true,
+            variant: "caption2",
+            component: "span",
+            className: classes.label,
+            children: label
+          }
+        ),
+        onDelete && deleteIcon
+      ]
     }
   );
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":["HvTag"],"mappings":";;;;;;;;;AA4DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAInB,SAASA,OAAM,OAAO,KAAK;AACrB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,OAAO,IAAI,SAAS;AAC5B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EACzB;AAEA,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAGF,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IAAA;AAAA,EACpD,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,MAAK;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAC/B,CAAA;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AAClB,YAAI,SAAU;AACV,YAAA,WAA0B,eAAA,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\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  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\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?: React.EventHandler<any>;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\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 = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--bgColor\": backgroundColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, className, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n        [classes.clickable]: isClickable && !disabled,\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {selectable && type === \"semantic\" && (\n        <CheckboxIcon\n          className={classes.icon}\n          color={(disabled && [\"atmo3\", \"secondary_60\"]) || undefined}\n          size=\"XS\"\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}