@salt-ds/data-grid 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist-cjs/packages/grid/src/Grid.css.js +1 -1
  2. package/dist-cjs/packages/grid/src/RowSelectionRadioCellValue.js +3 -3
  3. package/dist-cjs/packages/grid/src/RowSelectionRadioCellValue.js.map +1 -1
  4. package/dist-es/packages/grid/src/Grid.css.js +1 -1
  5. package/dist-es/packages/grid/src/RowSelectionRadioCellValue.js +4 -4
  6. package/dist-es/packages/grid/src/RowSelectionRadioCellValue.js.map +1 -1
  7. package/dist-es/packages/grid/src/internal/gridHooks.js +1 -1
  8. package/package.json +3 -3
package/dist-cjs/packages/grid/src/Grid.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
4
4
 
5
- var css_248z = ".salt-density-touch {\n --grid-row-height-default: 61px;\n --grid-padding-default: 16px;\n --grid-fontSize-default: 16px;\n --grid-header-fontSize-default: 14px;\n --grid-separatorGap-default: 20px;\n --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n --grid-row-height-default: 49px;\n --grid-padding-default: 12px;\n --grid-fontSize-default: 14px;\n --grid-header-fontSize-default: 12px;\n --grid-separatorGap-default: 16px;\n --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n --grid-row-height-default: 37px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 12px;\n --grid-header-fontSize-default: 11px;\n --grid-separatorGap-default: 12px;\n --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n --grid-row-height-default: 25px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 11px;\n --grid-header-fontSize-default: 10px;\n --grid-separatorGap-default: 8px;\n --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n --grid-cell-padding: 0 var(--grid-padding);\n\n --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-text-primary-foreground));\n --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n --grid-header-color: var(--saltGrid-header-color, var(--salt-text-secondary-foreground));\n\n --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-size-unit));\n --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-text-secondary-foreground));\n --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-overlayable-shadow-scroll-color));\n --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n --grid-rowSeparator-width: 1px;\n --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n --grid-mid-body-zIndex: 0;\n --grid-left-body-zIndex: 1;\n --grid-right-body-zIndex: 1;\n --grid-middle-header-zIndex: 2;\n --grid-left-header-zIndex: 3;\n --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.saltGrid-framed {\n border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n position: relative;\n outline: none;\n user-select: none;\n background: var(--grid-background);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n visibility: hidden;\n}\n";
5
+ var css_248z = ".salt-density-touch {\n --grid-row-height-default: 61px;\n --grid-padding-default: 16px;\n --grid-fontSize-default: 16px;\n --grid-header-fontSize-default: 14px;\n --grid-separatorGap-default: 20px;\n --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n --grid-row-height-default: 49px;\n --grid-padding-default: 12px;\n --grid-fontSize-default: 14px;\n --grid-header-fontSize-default: 12px;\n --grid-separatorGap-default: 16px;\n --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n --grid-row-height-default: 37px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 12px;\n --grid-header-fontSize-default: 11px;\n --grid-separatorGap-default: 12px;\n --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n --grid-row-height-default: 25px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 11px;\n --grid-header-fontSize-default: 10px;\n --grid-separatorGap-default: 8px;\n --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n --grid-cell-padding: 0 var(--grid-padding);\n\n --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-text-primary-foreground));\n --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n --grid-header-color: var(--saltGrid-header-color, var(--salt-text-secondary-foreground));\n\n --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-size-unit));\n --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-text-secondary-foreground));\n --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-1-color));\n --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n --grid-rowSeparator-width: 1px;\n --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n --grid-mid-body-zIndex: 0;\n --grid-left-body-zIndex: 1;\n --grid-right-body-zIndex: 1;\n --grid-middle-header-zIndex: 2;\n --grid-left-header-zIndex: 3;\n --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.saltGrid-framed {\n border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n position: relative;\n outline: none;\n user-select: none;\n background: var(--grid-background);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n visibility: hidden;\n}\n";
6
6
  styleInject_es(css_248z);
7
7
 
8
8
  module.exports = css_248z;
package/dist-cjs/packages/grid/src/RowSelectionRadioCellValue.js CHANGED
@@ -13,10 +13,10 @@ function RowSelectionRadioCellValue(props) {
13
13
  const isSelected = selRowIdxs.has(row.index);
14
14
  return /* @__PURE__ */ jsxRuntime.jsx("div", {
15
15
  className: "saltGridCheckboxContainer",
16
- children: /* @__PURE__ */ jsxRuntime.jsx(lab.RadioButtonBase, {
16
+ children: /* @__PURE__ */ jsxRuntime.jsx(lab.RadioButton, {
17
17
  checked: isSelected,
18
- tabIndex: isFocused ? 0 : -1,
19
- "data-testid": "grid-row-selection-radiobox"
18
+ "data-testid": "grid-row-selection-radiobox",
19
+ tabIndex: isFocused ? 0 : -1
20
20
  })
21
21
  });
22
22
  }
package/dist-cjs/packages/grid/src/RowSelectionRadioCellValue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RowSelectionRadioCellValue.js","sources":["../src/RowSelectionRadioCellValue.tsx"],"sourcesContent":["import { RadioButtonBase } from \"@salt-ds/lab\";\nimport { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport \"./CheckboxCell.css\";\n\nexport function RowSelectionRadioCellValue<T>(props: GridCellValueProps<T>) {\n const { row, isFocused } = props;\n const { selRowIdxs } = useSelectionContext();\n\n const isSelected = selRowIdxs.has(row.index);\n\n return (\n <div className=\"saltGridCheckboxContainer\">\n <RadioButtonBase\n checked={isSelected}\n tabIndex={isFocused ? 0 : -1}\n data-testid=\"grid-row-selection-radiobox\"\n />\n </div>\n );\n}\n"],"names":["useSelectionContext","jsx","RadioButtonBase"],"mappings":";;;;;;;;;AAKO,SAAS,2BAA8B,KAA8B,EAAA;AAC1E,EAAM,MAAA,EAAE,GAAK,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC3B,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,oCAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAE3C,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,2BAAA;AAAA,IACb,QAAC,kBAAAA,cAAA,CAAAC,mBAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,aAAY,EAAA,6BAAA;AAAA,KACd,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"RowSelectionRadioCellValue.js","sources":["../src/RowSelectionRadioCellValue.tsx"],"sourcesContent":["import { RadioButton } from \"@salt-ds/lab\";\nimport { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport \"./CheckboxCell.css\";\n\nexport function RowSelectionRadioCellValue<T>(props: GridCellValueProps<T>) {\n const { row, isFocused } = props;\n const { selRowIdxs } = useSelectionContext();\n\n const isSelected = selRowIdxs.has(row.index);\n\n return (\n <div className=\"saltGridCheckboxContainer\">\n <RadioButton\n checked={isSelected}\n data-testid=\"grid-row-selection-radiobox\"\n tabIndex={isFocused ? 0 : -1}\n />\n </div>\n );\n}\n"],"names":["useSelectionContext","jsx","RadioButton"],"mappings":";;;;;;;;;AAKO,SAAS,2BAA8B,KAA8B,EAAA;AAC1E,EAAM,MAAA,EAAE,GAAK,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC3B,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,oCAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAE3C,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,2BAAA;AAAA,IACb,QAAC,kBAAAA,cAAA,CAAAC,eAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,aAAY,EAAA,6BAAA;AAAA,MACZ,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
package/dist-es/packages/grid/src/Grid.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".salt-density-touch {\n --grid-row-height-default: 61px;\n --grid-padding-default: 16px;\n --grid-fontSize-default: 16px;\n --grid-header-fontSize-default: 14px;\n --grid-separatorGap-default: 20px;\n --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n --grid-row-height-default: 49px;\n --grid-padding-default: 12px;\n --grid-fontSize-default: 14px;\n --grid-header-fontSize-default: 12px;\n --grid-separatorGap-default: 16px;\n --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n --grid-row-height-default: 37px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 12px;\n --grid-header-fontSize-default: 11px;\n --grid-separatorGap-default: 12px;\n --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n --grid-row-height-default: 25px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 11px;\n --grid-header-fontSize-default: 10px;\n --grid-separatorGap-default: 8px;\n --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n --grid-cell-padding: 0 var(--grid-padding);\n\n --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-text-primary-foreground));\n --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n --grid-header-color: var(--saltGrid-header-color, var(--salt-text-secondary-foreground));\n\n --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-size-unit));\n --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-text-secondary-foreground));\n --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-overlayable-shadow-scroll-color));\n --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n --grid-rowSeparator-width: 1px;\n --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n --grid-mid-body-zIndex: 0;\n --grid-left-body-zIndex: 1;\n --grid-right-body-zIndex: 1;\n --grid-middle-header-zIndex: 2;\n --grid-left-header-zIndex: 3;\n --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.saltGrid-framed {\n border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n position: relative;\n outline: none;\n user-select: none;\n background: var(--grid-background);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n visibility: hidden;\n}\n";
3
+ var css_248z = ".salt-density-touch {\n --grid-row-height-default: 61px;\n --grid-padding-default: 16px;\n --grid-fontSize-default: 16px;\n --grid-header-fontSize-default: 14px;\n --grid-separatorGap-default: 20px;\n --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n --grid-row-height-default: 49px;\n --grid-padding-default: 12px;\n --grid-fontSize-default: 14px;\n --grid-header-fontSize-default: 12px;\n --grid-separatorGap-default: 16px;\n --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n --grid-row-height-default: 37px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 12px;\n --grid-header-fontSize-default: 11px;\n --grid-separatorGap-default: 12px;\n --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n --grid-row-height-default: 25px;\n --grid-padding-default: 8px;\n --grid-fontSize-default: 11px;\n --grid-header-fontSize-default: 10px;\n --grid-separatorGap-default: 8px;\n --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n --grid-cell-padding: 0 var(--grid-padding);\n\n --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-text-primary-foreground));\n --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n --grid-header-color: var(--saltGrid-header-color, var(--salt-text-secondary-foreground));\n\n --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-size-unit));\n --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-text-secondary-foreground));\n --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-1-color));\n --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n --grid-rowSeparator-width: 1px;\n --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n --grid-mid-body-zIndex: 0;\n --grid-left-body-zIndex: 1;\n --grid-right-body-zIndex: 1;\n --grid-middle-header-zIndex: 2;\n --grid-left-header-zIndex: 3;\n --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.saltGrid-framed {\n border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n position: relative;\n outline: none;\n user-select: none;\n background: var(--grid-background);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n visibility: hidden;\n}\n";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
package/dist-es/packages/grid/src/RowSelectionRadioCellValue.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { RadioButtonBase } from '@salt-ds/lab';
2
+ import { RadioButton } from '@salt-ds/lab';
3
3
  import { useSelectionContext } from './SelectionContext.js';
4
4
  import './CheckboxCell.css.js';
5
5
 
@@ -9,10 +9,10 @@ function RowSelectionRadioCellValue(props) {
9
9
  const isSelected = selRowIdxs.has(row.index);
10
10
  return /* @__PURE__ */ jsx("div", {
11
11
  className: "saltGridCheckboxContainer",
12
- children: /* @__PURE__ */ jsx(RadioButtonBase, {
12
+ children: /* @__PURE__ */ jsx(RadioButton, {
13
13
  checked: isSelected,
14
- tabIndex: isFocused ? 0 : -1,
15
- "data-testid": "grid-row-selection-radiobox"
14
+ "data-testid": "grid-row-selection-radiobox",
15
+ tabIndex: isFocused ? 0 : -1
16
16
  })
17
17
  });
18
18
  }
package/dist-es/packages/grid/src/RowSelectionRadioCellValue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RowSelectionRadioCellValue.js","sources":["../src/RowSelectionRadioCellValue.tsx"],"sourcesContent":["import { RadioButtonBase } from \"@salt-ds/lab\";\nimport { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport \"./CheckboxCell.css\";\n\nexport function RowSelectionRadioCellValue<T>(props: GridCellValueProps<T>) {\n const { row, isFocused } = props;\n const { selRowIdxs } = useSelectionContext();\n\n const isSelected = selRowIdxs.has(row.index);\n\n return (\n <div className=\"saltGridCheckboxContainer\">\n <RadioButtonBase\n checked={isSelected}\n tabIndex={isFocused ? 0 : -1}\n data-testid=\"grid-row-selection-radiobox\"\n />\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,2BAA8B,KAA8B,EAAA;AAC1E,EAAM,MAAA,EAAE,GAAK,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC3B,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAE3C,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,2BAAA;AAAA,IACb,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,aAAY,EAAA,6BAAA;AAAA,KACd,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"RowSelectionRadioCellValue.js","sources":["../src/RowSelectionRadioCellValue.tsx"],"sourcesContent":["import { RadioButton } from \"@salt-ds/lab\";\nimport { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport \"./CheckboxCell.css\";\n\nexport function RowSelectionRadioCellValue<T>(props: GridCellValueProps<T>) {\n const { row, isFocused } = props;\n const { selRowIdxs } = useSelectionContext();\n\n const isSelected = selRowIdxs.has(row.index);\n\n return (\n <div className=\"saltGridCheckboxContainer\">\n <RadioButton\n checked={isSelected}\n data-testid=\"grid-row-selection-radiobox\"\n tabIndex={isFocused ? 0 : -1}\n />\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,2BAA8B,KAA8B,EAAA;AAC1E,EAAM,MAAA,EAAE,GAAK,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC3B,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAE3C,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,2BAAA;AAAA,IACb,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,aAAY,EAAA,6BAAA;AAAA,MACZ,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
package/dist-es/packages/grid/src/internal/gridHooks.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useRef, useState, useMemo, useCallback, Children, isValidElement, useEffect } from 'react';
1
+ import { useRef, useState, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
2
2
  import { NumberRange } from '../NumberRange.js';
3
3
  import { getAttribute, makeMapAdder, makeMapDeleter, getCellPosition } from './utils.js';
4
4
  import { useControlled } from '@salt-ds/core';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/data-grid",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "license": "Apache-2.0",
5
5
  "main": "dist-cjs/packages/grid/src/index.js",
6
6
  "sideEffects": [
@@ -24,8 +24,8 @@
24
24
  "typings": "dist-types/index.d.ts",
25
25
  "dependencies": {
26
26
  "clsx": "^1.2.1",
27
- "@salt-ds/core": "1.1.0",
28
- "@salt-ds/lab": "1.0.0-alpha.1"
27
+ "@salt-ds/core": "1.4.0",
28
+ "@salt-ds/lab": "1.0.0-alpha.4"
29
29
  },
30
30
  "files": [
31
31
  "dist-cjs",