@hitachivantara/uikit-react-core 5.26.6 → 5.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs +2 -4
- package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs.map +1 -1
- package/dist/cjs/components/BulkActions/BulkActions.cjs +2 -3
- package/dist/cjs/components/BulkActions/BulkActions.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +2 -4
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Drawer/Drawer.cjs +2 -1
- package/dist/cjs/components/Drawer/Drawer.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +2 -2
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +2 -2
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -1
- package/dist/cjs/components/Table/TableCell/TableCell.cjs +2 -2
- package/dist/cjs/components/Table/TableCell/TableCell.cjs.map +1 -1
- package/dist/cjs/components/Table/TableHeader/TableHeader.cjs +6 -4
- package/dist/cjs/components/Table/TableHeader/TableHeader.cjs.map +1 -1
- package/dist/cjs/components/Table/TableRow/TableRow.cjs +3 -4
- package/dist/cjs/components/Table/TableRow/TableRow.cjs.map +1 -1
- package/dist/cjs/components/Table/renderers/ProgressColumnCell/ProgressColumnCell.cjs +4 -2
- package/dist/cjs/components/Table/renderers/ProgressColumnCell/ProgressColumnCell.cjs.map +1 -1
- package/dist/cjs/components/Table/renderers/SwitchColumnCell/SwitchColumnCell.cjs +5 -2
- package/dist/cjs/components/Table/renderers/SwitchColumnCell/SwitchColumnCell.cjs.map +1 -1
- package/dist/cjs/components/Table/renderers/renderers.cjs +6 -3
- package/dist/cjs/components/Table/renderers/renderers.cjs.map +1 -1
- package/dist/cjs/components/Tag/Tag.cjs +2 -4
- package/dist/cjs/components/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/hooks/useTheme.cjs +12 -1
- package/dist/cjs/hooks/useTheme.cjs.map +1 -1
- package/dist/esm/components/ActionsGeneric/ActionsGeneric.js +2 -4
- package/dist/esm/components/ActionsGeneric/ActionsGeneric.js.map +1 -1
- package/dist/esm/components/BulkActions/BulkActions.js +2 -3
- package/dist/esm/components/BulkActions/BulkActions.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +2 -4
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Drawer/Drawer.js +2 -1
- package/dist/esm/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +2 -2
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +2 -2
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
- package/dist/esm/components/Table/TableCell/TableCell.js +2 -2
- package/dist/esm/components/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/components/Table/TableHeader/TableHeader.js +6 -4
- package/dist/esm/components/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/components/Table/TableRow/TableRow.js +3 -4
- package/dist/esm/components/Table/TableRow/TableRow.js.map +1 -1
- package/dist/esm/components/Table/renderers/ProgressColumnCell/ProgressColumnCell.js +4 -2
- package/dist/esm/components/Table/renderers/ProgressColumnCell/ProgressColumnCell.js.map +1 -1
- package/dist/esm/components/Table/renderers/SwitchColumnCell/SwitchColumnCell.js +5 -2
- package/dist/esm/components/Table/renderers/SwitchColumnCell/SwitchColumnCell.js.map +1 -1
- package/dist/esm/components/Table/renderers/renderers.js +6 -3
- package/dist/esm/components/Table/renderers/renderers.js.map +1 -1
- package/dist/esm/components/Tag/Tag.js +2 -4
- package/dist/esm/components/Tag/Tag.js.map +1 -1
- package/dist/esm/hooks/useTheme.js +13 -2
- package/dist/esm/hooks/useTheme.js.map +1 -1
- package/dist/types/index.d.ts +9 -3
- package/package.json +2 -2
|
@@ -165,7 +165,8 @@ function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, onChange) {
|
|
|
165
165
|
onChange: (val) => onChange == null ? void 0 : onChange(row.id, val),
|
|
166
166
|
disabled: dsbld,
|
|
167
167
|
dropdownProps: {
|
|
168
|
-
"aria-labelledby": setId(id, column.id)
|
|
168
|
+
"aria-labelledby": setId(id, column.id) || column.id || id
|
|
169
|
+
// TODO - to be reviewed because it doesn't make much sense
|
|
169
170
|
}
|
|
170
171
|
});
|
|
171
172
|
},
|
|
@@ -180,7 +181,8 @@ function hvProgressColumn(col, getPartial, getTotal, color) {
|
|
|
180
181
|
return {
|
|
181
182
|
Cell: (cellProps) => {
|
|
182
183
|
const {
|
|
183
|
-
row
|
|
184
|
+
row,
|
|
185
|
+
column
|
|
184
186
|
} = cellProps;
|
|
185
187
|
const partial = (getPartial == null ? void 0 : getPartial(row)) || 0;
|
|
186
188
|
const total = getTotal == null ? void 0 : getTotal(row);
|
|
@@ -188,7 +190,8 @@ function hvProgressColumn(col, getPartial, getTotal, color) {
|
|
|
188
190
|
return /* @__PURE__ */ jsx(HvProgressColumnCell, {
|
|
189
191
|
partial,
|
|
190
192
|
total,
|
|
191
|
-
color
|
|
193
|
+
color,
|
|
194
|
+
"aria-labelledby": column.id
|
|
192
195
|
});
|
|
193
196
|
}
|
|
194
197
|
return /* @__PURE__ */ jsx(Fragment, {
|
|
@@ -1 +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 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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"}
|
|
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 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\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): 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) || column.id || id, // TODO - to be reviewed because it doesn't make much sense\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, 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":["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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"}
|
|
@@ -22,7 +22,6 @@ const getColor = (customColor, type, colors) => {
|
|
|
22
22
|
return backgroundColor;
|
|
23
23
|
};
|
|
24
24
|
const HvTag = (props) => {
|
|
25
|
-
var _a;
|
|
26
25
|
const {
|
|
27
26
|
classes: classesProp,
|
|
28
27
|
className,
|
|
@@ -40,8 +39,7 @@ const HvTag = (props) => {
|
|
|
40
39
|
...others
|
|
41
40
|
} = useDefaultProps("HvTag", props);
|
|
42
41
|
const {
|
|
43
|
-
|
|
44
|
-
selectedMode
|
|
42
|
+
colors
|
|
45
43
|
} = useTheme();
|
|
46
44
|
const {
|
|
47
45
|
classes,
|
|
@@ -82,7 +80,7 @@ const HvTag = (props) => {
|
|
|
82
80
|
const inlineStyle = {
|
|
83
81
|
...style
|
|
84
82
|
};
|
|
85
|
-
const categoricalBackgroundColor = type === "categorical" ? getColor(color, type,
|
|
83
|
+
const categoricalBackgroundColor = type === "categorical" ? getColor(color, type, colors) : void 0;
|
|
86
84
|
if (type === "semantic") {
|
|
87
85
|
inlineStyle.backgroundColor = getColor(color, type, {});
|
|
88
86
|
} else if (type === "categorical") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\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?: 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>) => 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; // TODO: fix typo \"ArialLabel\" in next version\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: classesProp,\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 {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\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?: 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>) => 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; // TODO: fix typo \"ArialLabel\" in next version\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: classesProp,\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 { colors } = useTheme();\n const { classes, cx, css } = useClasses(classesProp);\n\n const getDeleteIcon = () => {\n const disabledSemanticColor =\n type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n const { tabIndex = 0 } = deleteButtonProps;\n\n const closeIconStyles = css({\n ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n height: 16,\n \"& svg .color0\": {\n fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n },\n });\n return (\n <HvButton\n classes={{\n startIcon: classes.tagButton,\n focusVisible: classes.focusVisible,\n root: classes.button,\n }}\n aria-label={deleteButtonArialLabel}\n tabIndex={tabIndex}\n variant=\"secondaryGhost\"\n {...deleteButtonProps}\n >\n <CloseXS\n iconSize=\"XS\"\n className={closeIconStyles}\n color={disabled ? disabledSemanticColor : \"base_dark\"}\n />\n </HvButton>\n );\n };\n\n const inlineStyle = {\n ...style,\n };\n\n const categoricalBackgroundColor =\n type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n if (type === \"semantic\") {\n inlineStyle.backgroundColor = getColor(color, type, {});\n } else if (type === \"categorical\") {\n inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n }\n\n const [hover, setHover] = useState(false);\n\n return (\n <Chip\n label={label}\n className={cx(classes.root, className)}\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: cx(classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: !!onClick,\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={(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 {...others}\n />\n );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","HvButton","startIcon","tagButton","focusVisible","root","button","variant","children","CloseXS","iconSize","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","Chip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}
|
|
@@ -1,10 +1,21 @@
|
|
|
1
|
-
import { useContext } from "react";
|
|
1
|
+
import { useContext, useMemo } from "react";
|
|
2
2
|
import "@hitachivantara/uikit-styles";
|
|
3
3
|
import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
|
|
4
4
|
import "@mui/material/styles";
|
|
5
5
|
import "@emotion/react/jsx-runtime";
|
|
6
6
|
const useTheme = () => {
|
|
7
|
-
|
|
7
|
+
const context = useContext(HvThemeContext);
|
|
8
|
+
return useMemo(() => {
|
|
9
|
+
var _a;
|
|
10
|
+
const {
|
|
11
|
+
activeTheme,
|
|
12
|
+
selectedMode
|
|
13
|
+
} = context;
|
|
14
|
+
return {
|
|
15
|
+
...context,
|
|
16
|
+
colors: (_a = activeTheme == null ? void 0 : activeTheme.colors.modes) == null ? void 0 : _a[selectedMode]
|
|
17
|
+
};
|
|
18
|
+
}, [context]);
|
|
8
19
|
};
|
|
9
20
|
export {
|
|
10
21
|
useTheme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.js","sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n HvThemeContext,\n HvThemeContextValue,\n} from \"@core/providers/ThemeProvider\";\n\nexport const useTheme = (): HvThemeContextValue => {\n
|
|
1
|
+
{"version":3,"file":"useTheme.js","sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from \"react\";\nimport { HvThemeColorModeStructure } from \"@hitachivantara/uikit-styles\";\nimport {\n HvThemeContext,\n HvThemeContextValue,\n} from \"@core/providers/ThemeProvider\";\n\nexport const useTheme = (): HvThemeContextValue & {\n /** Colors of the currently active theme and mode */\n colors?: HvThemeColorModeStructure;\n} => {\n const context = useContext(HvThemeContext);\n\n return useMemo(() => {\n const { activeTheme, selectedMode } = context;\n return { ...context, colors: activeTheme?.colors.modes?.[selectedMode] };\n }, [context]);\n};\n"],"names":["useTheme","context","useContext","HvThemeContext","useMemo","activeTheme","selectedMode","colors","modes"],"mappings":";;;;;AAOO,MAAMA,WAAWA,MAGnB;AACGC,QAAAA,UAAUC,WAAWC,cAAc;AAEzC,SAAOC,QAAQ,MAAM;;AACb,UAAA;AAAA,MAAEC;AAAAA,MAAaC;AAAAA,IAAiBL,IAAAA;AAC/B,WAAA;AAAA,MAAE,GAAGA;AAAAA,MAASM,SAAQF,gDAAaE,OAAOC,UAApBH,mBAA4BC;AAAAA,IAAY;AAAA,EAAE,GACtE,CAACL,OAAO,CAAC;AACd;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -2940,7 +2940,7 @@ export declare const HvDropdown: (props: HvDropdownProps) => JSX_2.Element;
|
|
|
2940
2940
|
|
|
2941
2941
|
export declare type HvDropdownClasses = ExtractNames<typeof useClasses_80>;
|
|
2942
2942
|
|
|
2943
|
-
export declare function hvDropdownColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, id: string, placeholder: string, disabledPlaceholder: string, onChange?: (identifier: string, value: HvListValue) => void): HvTableColumnConfig<D, H>;
|
|
2943
|
+
export declare function hvDropdownColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, id: string | undefined, placeholder: string, disabledPlaceholder: string, onChange?: (identifier: string, value: HvListValue) => void): HvTableColumnConfig<D, H>;
|
|
2944
2944
|
|
|
2945
2945
|
export declare const HvDropdownColumnCell: ({ values, disabled, onChange, placeholder, dropdownProps, }: HvDropdownColumnCellProp) => JSX.Element;
|
|
2946
2946
|
|
|
@@ -4727,7 +4727,7 @@ export declare type HvProgressBarStatus = "inProgress" | "completed" | "error";
|
|
|
4727
4727
|
|
|
4728
4728
|
export declare function hvProgressColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, getPartial?: (row: HvRowInstance<D, H>) => number, getTotal?: (row: HvRowInstance<D, H>) => number, color?: "primary" | "secondary"): HvTableColumnConfig<D, H>;
|
|
4729
4729
|
|
|
4730
|
-
export declare const HvProgressColumnCell: ({ partial, total, color, }: HvProgressColumnCellProp) => JSX.Element;
|
|
4730
|
+
export declare const HvProgressColumnCell: ({ partial, total, color, "aria-labelledby": ariaLabelledBy, }: HvProgressColumnCellProp) => JSX.Element;
|
|
4731
4731
|
|
|
4732
4732
|
export declare interface HvProgressColumnCellProp {
|
|
4733
4733
|
/** Current value of the bar. */
|
|
@@ -4736,6 +4736,7 @@ export declare interface HvProgressColumnCellProp {
|
|
|
4736
4736
|
total: number;
|
|
4737
4737
|
/** The color of the bar. */
|
|
4738
4738
|
color?: "primary" | "secondary";
|
|
4739
|
+
"aria-labelledby"?: string;
|
|
4739
4740
|
}
|
|
4740
4741
|
|
|
4741
4742
|
export declare type HvPropGetter<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, Props extends object = Record<string, unknown>, T extends object = never, P = Partial<Props>> = ((props: P, meta: HvMeta<D, H, T>) => P | P[]) | P | P[];
|
|
@@ -5900,6 +5901,8 @@ export declare interface HvTableHeaderProps extends Omit<ThHTMLAttributes<HTMLTa
|
|
|
5900
5901
|
resizerProps?: HTMLAttributes<HTMLDivElement>;
|
|
5901
5902
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
5902
5903
|
classes?: HvTableHeaderClasses;
|
|
5904
|
+
/** Extra props to be passed onto the sort button in the header. */
|
|
5905
|
+
sortButtonProps?: HvButtonProps;
|
|
5903
5906
|
}
|
|
5904
5907
|
|
|
5905
5908
|
export declare type HvTableHeaderRenderer<D extends object = Record<string, unknown>> = Renderer<HvHeaderProps_2<D>>;
|
|
@@ -10239,7 +10242,10 @@ export declare type UseTableStylesProps = (<D extends object = Record<string, un
|
|
|
10239
10242
|
pluginName: string;
|
|
10240
10243
|
};
|
|
10241
10244
|
|
|
10242
|
-
export declare const useTheme: () => HvThemeContextValue
|
|
10245
|
+
export declare const useTheme: () => HvThemeContextValue & {
|
|
10246
|
+
/** Colors of the currently active theme and mode */
|
|
10247
|
+
colors?: HvThemeColorModeStructure;
|
|
10248
|
+
};
|
|
10243
10249
|
|
|
10244
10250
|
export declare const useUniqueId: (id?: string, idPrefix?: string) => string;
|
|
10245
10251
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.27.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "d97e2f6b946dbebf4bac28e6f071f14d9aad0789",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|