@vuu-ui/vuu-table 0.8.34 → 0.8.36

package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCell.js","sources":["../../../src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import React, { memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { CheckboxIcon, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\n\nimport \"./CheckboxCell.css\";\n\nexport const CheckboxCell: React.FC<TableCellRendererProps> = memo(\n  ({ column, columnMap, onCommit = WarnCommit, row }) => {\n    const dataIdx = columnMap[column.name];\n    const isChecked = !!row[dataIdx];\n\n    const handleCommit = useCallback(\n      (value) => async (evt: React.MouseEvent) => {\n        const res = await onCommit(value);\n        if (res === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return res;\n      },\n      [onCommit]\n    );\n\n    return column.editable ? (\n      <Checkbox checked={isChecked} onClick={handleCommit(!isChecked)} />\n    ) : (\n      <CheckboxIcon checked={isChecked} disabled={true} />\n    );\n  },\n  dataColumnAndKeyUnchanged\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n  serverDataType: \"boolean\",\n});\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,YAAiD,GAAA,IAAA;AAAA,EAC5D,CAAC,EAAE,MAAA,EAAQ,WAAW,QAAW,GAAA,UAAA,EAAY,KAAU,KAAA;AACrD,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,KAAU,KAAA,OAAO,GAA0B,KAAA;AAC1C,QAAM,MAAA,GAAA,GAAM,MAAM,QAAA,CAAS,KAAK,CAAA,CAAA;AAChC,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,SAC7D;AACA,QAAO,OAAA,GAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,OAAO,QACZ,mBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,WAAW,OAAS,EAAA,YAAA,CAAa,CAAC,SAAS,GAAG,CAEjE,mBAAA,GAAA,CAAC,gBAAa,OAAS,EAAA,SAAA,EAAW,UAAU,IAAM,EAAA,CAAA,CAAA;AAAA,GAEtD;AAAA,EACA,yBAAA;AACF,EAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAE3B,iBAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}
+{"version":3,"file":"CheckboxCell.js","sources":["../../../src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import React, { memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { CheckboxIcon, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxCss from \"./CheckboxCell.css\";\n\nexport const CheckboxCell: React.FC<TableCellRendererProps> = memo(\n  ({ column, columnMap, onCommit = WarnCommit, row }) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-checkbox-cell\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n\n    const dataIdx = columnMap[column.name];\n    const isChecked = !!row[dataIdx];\n\n    const handleCommit = useCallback(\n      (value) => async (evt: React.MouseEvent) => {\n        const res = await onCommit(value);\n        if (res === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return res;\n      },\n      [onCommit]\n    );\n\n    return column.editable ? (\n      <Checkbox checked={isChecked} onClick={handleCommit(!isChecked)} />\n    ) : (\n      <CheckboxIcon checked={isChecked} disabled={true} />\n    );\n  },\n  dataColumnAndKeyUnchanged\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n  serverDataType: \"boolean\",\n});\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,YAAiD,GAAA,IAAA;AAAA,EAC5D,CAAC,EAAE,MAAA,EAAQ,WAAW,QAAW,GAAA,UAAA,EAAY,KAAU,KAAA;AACrD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,KAAU,KAAA,OAAO,GAA0B,KAAA;AAC1C,QAAM,MAAA,GAAA,GAAM,MAAM,QAAA,CAAS,KAAK,CAAA,CAAA;AAChC,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,SAC7D;AACA,QAAO,OAAA,GAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,OAAO,QACZ,mBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,WAAW,OAAS,EAAA,YAAA,CAAa,CAAC,SAAS,GAAG,CAEjE,mBAAA,GAAA,CAAC,gBAAa,OAAS,EAAA,SAAA,EAAW,UAAU,IAAM,EAAA,CAAA,CAAA;AAAA,GAEtD;AAAA,EACA,yBAAA;AACF,EAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAE3B,iBAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}

package/esm/cell-renderers/input-cell/InputCell.css.js

@@ -0,0 +1,4 @@
+var inputCellCss = "\n.vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 4px;\n    font-weight: 500;\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n    border: solid 2px var(--salt-focused-outlineColor);\n    padding: 0 3px;\n}\n\n.vuuTableInputCell-icon {\n    --vuu-icon-height: 13px;\n    --vuu-icon-size: 15px;\n    --vuu-icon-width: 12px;\n    border-radius: 10px;\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,\n.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error {\n    border: solid 2px var(--vuu-color-red-50);\n}\n\n\n.vuuTableInputCell-error.saltInput-primary {\n    border: solid 1px var(--vuu-color-red-50);\n}";
+
+export { inputCellCss as default };
+//# sourceMappingURL=InputCell.css.js.map

package/esm/cell-renderers/input-cell/InputCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/cell-renderers/input-cell/InputCell.js

@@ -2,7 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import { registerComponent } from '@vuu-ui/vuu-utils';
 import { Input } from '@salt-ds/core';
 import { useEditableText } from '@vuu-ui/vuu-ui-controls';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
+import inputCellCss from './InputCell.css.js';
 
 const classBase = "vuuTableInputCell";
 const WarnCommit = () => {
@@ -17,6 +20,12 @@ const InputCell = ({
   onCommit = WarnCommit,
   row
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-input-cell",
+    css: inputCellCss,
+    window: targetWindow
+  });
   const dataIdx = columnMap[column.name];
   const dataValue = row[dataIdx];
   const { align = "left", clientSideEditValidationCheck } = column;

package/esm/cell-renderers/input-cell/InputCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\n\nimport \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nconst WarnCommit = (): Promise<true> => {\n  console.warn(\n    \"onCommit handler has not been provided to InputCell cell renderer\"\n  );\n  return Promise.resolve(true);\n};\nexport const InputCell = ({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) => {\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { warningMessage, ...editProps } = useEditableText({\n    initialValue: dataValue,\n    onCommit,\n    clientSideEditValidationCheck,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      className={cx(classBase, {\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAElB,MAAM,aAAa,MAAqB;AACtC,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN,mEAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAC7B,CAAA,CAAA;AACO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,UAAA;AAAA,EACX,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA,CAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAc,eAAgB,CAAA;AAAA,IACvD,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,6BAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA,CAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA,cAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nconst WarnCommit = (): Promise<true> => {\n  console.warn(\n    \"onCommit handler has not been provided to InputCell cell renderer\"\n  );\n  return Promise.resolve(true);\n};\nexport const InputCell = ({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { warningMessage, ...editProps } = useEditableText({\n    initialValue: dataValue,\n    onCommit,\n    clientSideEditValidationCheck,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      className={cx(classBase, {\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAElB,MAAM,aAAa,MAAqB;AACtC,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN,mEAAA;AAAA,GACF,CAAA;AACA,EAAO,OAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAC7B,CAAA,CAAA;AACO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,UAAA;AAAA,EACX,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA,CAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAc,eAAgB,CAAA;AAAA,IACvD,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,6BAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA,CAAA;AAEN,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA,CAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA,cAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

package/esm/cell-renderers/toggle-cell/ToggleCell.css.js

@@ -0,0 +1,4 @@
+var toggleCellCss = "\n.vuuTableToggleCell {\n    --saltButton-borderRadius: 4px;\n    --saltButton-height: 16px;\n    font-weight: 500;\n    position: relative;\n    top: 1px;;\n}\n.vuuTableToggleCell-side {\n    --saltButton-minWidth: 40px;\n}\n.vuuTableToggleCell.vuuCycleStateButton-buy {\n    background-color: var(--vuu-color-green-50);\n}\n\n.vuuTableToggleCell.vuuCycleStateButton-sell {\n    background-color: var(--vuu-color-red-50);\n\n}\n\n.vuuTableCell .vuuTableToggleCell:focus {\n    /* TODO fix use of important */\n    border: solid 2px var(--vuu-color-purple-10) !important;\n    color: white !important;\n    height: 18px !important;\n    top: 0px !important;\n}\n\n\n\n\n\n";
+
+export { toggleCellCss as default };
+//# sourceMappingURL=ToggleCell.css.js.map

package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/cell-renderers/toggle-cell/ToggleCell.js

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { CycleStateButton, WarnCommit } from '@vuu-ui/vuu-ui-controls';
 import { dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent, isTypeDescriptor, isValueListRenderer } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { memo, useCallback } from 'react';
+import toggleCellCss from './ToggleCell.css.js';
 
 const classBase = "vuuTableToggleCell";
 const getValueList = ({ name, type }) => {
@@ -21,6 +24,12 @@ const ToggleCell = memo(
     onCommit = WarnCommit,
     row
   }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-toggle-cell",
+      css: toggleCellCss,
+      window: targetWindow
+    });
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];

package/esm/cell-renderers/toggle-cell/ToggleCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { CycleStateCommitHandler, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) {\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CycleStateCommitHandler>(\n    (evt, value) => {\n      return onCommit(value).then((response) => {\n        if (response === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return response;\n      });\n    },\n    [onCommit]\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["ToggleCell","value"],"mappings":";;;;;;AAmBA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,mBAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,UAAa,GAAA,IAAA;AAAA,EAAK,SAASA,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,UAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA,CAAA;AAEzB,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,KAAKC,MAAU,KAAA;AACd,QAAA,OAAO,QAASA,CAAAA,MAAK,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACxC,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,WAC7D;AACA,UAAO,OAAA,QAAA,CAAA;AAAA,SACR,CAAA,CAAA;AAAA,OACH;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,QACtD,QAAU,EAAA,YAAA;AAAA,QACV,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAQ,EAAA,KAAA;AAAA,QAEP,QAAA,EAAA,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAAA,EACA,yBAAA;AAAyB,EAAA;AAEzB,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { CycleStateCommitHandler, WarnCommit } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onCommit = WarnCommit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-cell\",\n    css: toggleCellCss,\n    window: targetWindow,\n  });\n\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CycleStateCommitHandler>(\n    (evt, value) => {\n      return onCommit(value).then((response) => {\n        if (response === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return response;\n      });\n    },\n    [onCommit]\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n},\ndataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["ToggleCell","value"],"mappings":";;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,mBAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,UAAa,GAAA,IAAA;AAAA,EAAK,SAASA,WAAW,CAAA;AAAA,IACjD,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,UAAA;AAAA,IACX,GAAA;AAAA,GACyB,EAAA;AACzB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA,CAAA;AAEzB,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,KAAKC,MAAU,KAAA;AACd,QAAA,OAAO,QAASA,CAAAA,MAAK,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACxC,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA,CAAA;AAAA,WAC7D;AACA,UAAO,OAAA,QAAA,CAAA;AAAA,SACR,CAAA,CAAA;AAAA,OACH;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,QACtD,QAAU,EAAA,YAAA;AAAA,QACV,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAQ,EAAA,KAAA;AAAA,QAEP,QAAA,EAAA,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAAA,EACA,yBAAA;AAAyB,EAAA;AAEzB,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA,KAAA;AACjB,CAAC,CAAA;;;;"}

package/esm/column-header-pill/ColumnHeaderPill.css.js

@@ -0,0 +1,4 @@
+var columnHeaderPillCss = ".vuuColumnHeaderPill {\n    --vuu-icon-size: 14px;\n    --menu-item-icon-color: black;\n    --vuu-icon-color: var(--salt-actionable-primary-foreground);\n    --vuu-icon-height: 12px;\n    --vuu-icon-width: 12px;\n    align-items: center;\n    background: var(--salt-actionable-primary-background);\n    color: var(--salt-actionable-primary-foreground);\n    border-radius: 4px;\n    flex: var(--vuuColumnHeaderPill-flex, none);\n    font-size: 11px;\n    gap: 4px;\n    height: 16px;\n    display: flex;\n    margin: var(--vuuColumnHeaderPill-margin, 0);\n    padding: 0 6px;\n    position: relative;     \n}\n\n.vuuColumnHeaderPill:hover {\n    --vuu-icon-color: var(--salt-actionable-primary-foreground-hover);\n    background-color: var(--salt-actionable-primary-background-hover);\n    color: var(--salt-actionable-primary-foreground-hover);\n  \n}\n\n.vuuColumnHeaderPill-removeButton {\n    cursor: pointer;\n}";
+
+export { columnHeaderPillCss as default };
+//# sourceMappingURL=ColumnHeaderPill.css.js.map

package/esm/column-header-pill/ColumnHeaderPill.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeaderPill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/column-header-pill/ColumnHeaderPill.js

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useCallback } from 'react';
+import columnHeaderPillCss from './ColumnHeaderPill.css.js';
 
 const classBase = "vuuColumnHeaderPill";
 const ColumnHeaderPill = ({
@@ -11,6 +14,12 @@ const ColumnHeaderPill = ({
   removable,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-header-pill",
+    css: columnHeaderPillCss,
+    window: targetWindow
+  });
   if (removable && typeof onRemove !== "function") {
     throw Error(
       "ColumnHeaderPill onRemove prop must be provided if Pill is removable"

package/esm/column-header-pill/ColumnHeaderPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n  column: RuntimeColumnDescriptor;\n  removable?: boolean;\n  onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n  children,\n  className,\n  column,\n  onRemove,\n  removable,\n  ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n  if (removable && typeof onRemove !== \"function\") {\n    throw Error(\n      \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\"\n    );\n  }\n\n  const handleClickRemove = useCallback(\n    (evt: MouseEvent<HTMLSpanElement>) => {\n      evt.preventDefault();\n      evt.stopPropagation();\n      onRemove?.(column);\n    },\n    [column, onRemove]\n  );\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {children}\n      {removable ? (\n        <span\n          className={`${classBase}-removeButton`}\n          role=\"button\"\n          data-icon=\"cross\"\n          onClick={handleClickRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA,iBAAA;AAAA,OAAA;AAAA,KAET,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport columnHeaderPillCss from \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n  column: RuntimeColumnDescriptor;\n  removable?: boolean;\n  onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n  children,\n  className,\n  column,\n  onRemove,\n  removable,\n  ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-header-pill\",\n    css: columnHeaderPillCss,\n    window: targetWindow,\n  });\n\n  if (removable && typeof onRemove !== \"function\") {\n    throw Error(\n      \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\"\n    );\n  }\n\n  const handleClickRemove = useCallback(\n    (evt: MouseEvent<HTMLSpanElement>) => {\n      evt.preventDefault();\n      evt.stopPropagation();\n      onRemove?.(column);\n    },\n    [column, onRemove]\n  );\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {children}\n      {removable ? (\n        <span\n          className={`${classBase}-removeButton`}\n          role=\"button\"\n          data-icon=\"cross\"\n          onClick={handleClickRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA,iBAAA;AAAA,OAAA;AAAA,KAET,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-header-pill/GroupColumnPill.css.js

@@ -0,0 +1,4 @@
+var groupColumnPillCss = "\n.vuuSortPosition {\n  font-size: 11px;\n  font-weight: 700;\n  padding-top: 1px;\n}\n\n";
+
+export { groupColumnPillCss as default };
+//# sourceMappingURL=GroupColumnPill.css.js.map

package/esm/column-header-pill/GroupColumnPill.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupColumnPill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/column-header-pill/GroupColumnPill.js

@@ -1,10 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { ColumnHeaderPill } from './ColumnHeaderPill.js';
+import groupColumnPillCss from './GroupColumnPill.css.js';
 
 const GroupColumnPill = ({
   column,
   ...columnHeaderProps
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-group-column-pill",
+    css: groupColumnPillCss,
+    window: targetWindow
+  });
   const { name, sorted } = column;
   const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
   return /* @__PURE__ */ jsxs(ColumnHeaderPill, { ...columnHeaderProps, column, children: [

package/esm/column-header-pill/GroupColumnPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n  column,\n  ...columnHeaderProps\n}: GroupColumnPillProps) => {\n  const { name, sorted } = column;\n  const icon =\n    typeof sorted === \"number\"\n      ? sorted < 0\n        ? \"arrow-down\"\n        : \"arrow-up\"\n      : sorted === \"A\"\n      ? \"arrow-up\"\n      : sorted === \"D\"\n      ? \"arrow-down\"\n      : undefined;\n\n  return (\n    <ColumnHeaderPill {...columnHeaderProps} column={column}>\n      <span className=\"vuuGroupColumnPill-label\">{name}</span>\n      {icon !== undefined ? <span data-icon={icon} /> : null}\n      {typeof sorted === \"number\" ? (\n        <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n      ) : null}\n    </ColumnHeaderPill>\n  );\n};\n"],"names":[],"mappings":";;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG,iBAAA;AACL,CAA4B,KAAA;AAC1B,EAAM,MAAA,EAAE,IAAM,EAAA,MAAA,EAAW,GAAA,MAAA,CAAA;AACzB,EAAA,MAAM,IACJ,GAAA,OAAO,MAAW,KAAA,QAAA,GACd,MAAS,GAAA,CAAA,GACP,YACA,GAAA,UAAA,GACF,MAAW,KAAA,GAAA,GACX,UACA,GAAA,MAAA,KAAW,MACX,YACA,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,uBACG,IAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MACvC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,0BAAA,EAA4B,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,IAChD,SAAS,KAAY,CAAA,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAW,MAAM,CAAK,GAAA,IAAA;AAAA,IACjD,OAAO,MAAW,KAAA,QAAA,mBAChB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAM,CAAA,EAAE,CACpD,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport groupColumnPillCss from \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n  column,\n  ...columnHeaderProps\n}: GroupColumnPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-group-column-pill\",\n    css: groupColumnPillCss,\n    window: targetWindow,\n  });\n\n  const { name, sorted } = column;\n  const icon =\n    typeof sorted === \"number\"\n      ? sorted < 0\n        ? \"arrow-down\"\n        : \"arrow-up\"\n      : sorted === \"A\"\n      ? \"arrow-up\"\n      : sorted === \"D\"\n      ? \"arrow-down\"\n      : undefined;\n\n  return (\n    <ColumnHeaderPill {...columnHeaderProps} column={column}>\n      <span className=\"vuuGroupColumnPill-label\">{name}</span>\n      {icon !== undefined ? <span data-icon={icon} /> : null}\n      {typeof sorted === \"number\" ? (\n        <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n      ) : null}\n    </ColumnHeaderPill>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG,iBAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,IAAM,EAAA,MAAA,EAAW,GAAA,MAAA,CAAA;AACzB,EAAA,MAAM,IACJ,GAAA,OAAO,MAAW,KAAA,QAAA,GACd,MAAS,GAAA,CAAA,GACP,YACA,GAAA,UAAA,GACF,MAAW,KAAA,GAAA,GACX,UACA,GAAA,MAAA,KAAW,MACX,YACA,GAAA,KAAA,CAAA,CAAA;AAEN,EAAA,uBACG,IAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MACvC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,0BAAA,EAA4B,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,IAChD,SAAS,KAAY,CAAA,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAW,MAAM,CAAK,GAAA,IAAA;AAAA,IACjD,OAAO,MAAW,KAAA,QAAA,mBAChB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAM,CAAA,EAAE,CACpD,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-header-pill/SortIndicator.css.js

@@ -0,0 +1,4 @@
+var sortIndicatorCss = "\n.vuuSortPosition {\n  font-size: 11px;\n  font-weight: 700;\n  padding-top: 1px;\n}\n\n";
+
+export { sortIndicatorCss as default };
+//# sourceMappingURL=SortIndicator.css.js.map

package/esm/column-header-pill/SortIndicator.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortIndicator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/column-header-pill/SortIndicator.js

@@ -1,7 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { ColumnHeaderPill } from './ColumnHeaderPill.js';
+import sortIndicatorCss from './SortIndicator.css.js';
 
 const SortIndicator = ({ column }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-sort-indicator",
+    css: sortIndicatorCss,
+    window: targetWindow
+  });
   if (!column.sorted) {
     return null;
   }

package/esm/column-header-pill/SortIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n  if (!column.sorted) {\n    return null;\n  }\n\n  const icon =\n    typeof column.sorted === \"number\"\n      ? column.sorted < 0\n        ? \"arrow-down\"\n        : \"arrow-up\"\n      : column.sorted === \"A\"\n      ? \"arrow-up\"\n      : \"arrow-down\";\n\n  return (\n    <ColumnHeaderPill column={column}>\n      <span data-icon={icon} />\n      {typeof column.sorted === \"number\" ? (\n        <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n      ) : null}\n    </ColumnHeaderPill>\n  );\n};\n"],"names":[],"mappings":";;;AASO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAClB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,IACJ,GAAA,OAAO,MAAO,CAAA,MAAA,KAAW,QACrB,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GACd,YACA,GAAA,UAAA,GACF,MAAO,CAAA,MAAA,KAAW,MAClB,UACA,GAAA,YAAA,CAAA;AAEN,EACE,uBAAA,IAAA,CAAC,oBAAiB,MAChB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAW,IAAM,EAAA,CAAA;AAAA,IACtB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,mBACvB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAO,CAAA,MAAM,GAAE,CAC3D,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport sortIndicatorCss from \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-sort-indicator\",\n    css: sortIndicatorCss,\n    window: targetWindow,\n  });\n\n  if (!column.sorted) {\n    return null;\n  }\n\n  const icon =\n    typeof column.sorted === \"number\"\n      ? column.sorted < 0\n        ? \"arrow-down\"\n        : \"arrow-up\"\n      : column.sorted === \"A\"\n      ? \"arrow-up\"\n      : \"arrow-down\";\n\n  return (\n    <ColumnHeaderPill column={column}>\n      <span data-icon={icon} />\n      {typeof column.sorted === \"number\" ? (\n        <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n      ) : null}\n    </ColumnHeaderPill>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAClB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,IACJ,GAAA,OAAO,MAAO,CAAA,MAAA,KAAW,QACrB,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GACd,YACA,GAAA,UAAA,GACF,MAAO,CAAA,MAAA,KAAW,MAClB,UACA,GAAA,YAAA,CAAA;AAEN,EACE,uBAAA,IAAA,CAAC,oBAAiB,MAChB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAW,IAAM,EAAA,CAAA;AAAA,IACtB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,mBACvB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAO,CAAA,MAAM,GAAE,CAC3D,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-menu/ColumnMenu.css.js

@@ -0,0 +1,4 @@
+var columnMenuCss = ".vuuMenuItem {\n    --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n    --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n    --saltButton-padding: var(--salt-spacing-50);\n    --saltButton-minWidth: var(--menu-button-size);\n    --saltButton-height: var(--menu-button-size);\n    --saltButton-width: var(--menu-button-size);\n\n    --vuu-icon-height: var(--menu-button-size);\n    --vuu-icon-left: 0px;\n    --vuu-icon-top: 0px;\n    --vuu-icon-width: var(--menu-button-size);\n\n    border-radius: 4px;\n    flex: 0 0 var(--menu-button-size);\n    margin: var(--vuuTable-columnMenu-margin, 0);\n}\n\n  ";
+
+export { columnMenuCss as default };
+//# sourceMappingURL=ColumnMenu.css.js.map

package/esm/column-menu/ColumnMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/column-menu/ColumnMenu.js

@@ -1,9 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { PopupMenu } from '@vuu-ui/vuu-popups';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
+import columnMenuCss from './ColumnMenu.css.js';
 
 const classBase = "vuuColumnMenu";
 const ColumnMenu = ({ className, column }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-menu",
+    css: columnMenuCss,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsx(
     PopupMenu,
     {

package/esm/column-menu/ColumnMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n  return (\n    <PopupMenu\n      className={cx(classBase, className)}\n      data-embedded\n      menuLocation=\"column-menu\"\n      menuOptions={{ column }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GACxB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  return (\n    <PopupMenu\n      className={cx(classBase, className)}\n      data-embedded\n      menuLocation=\"column-menu\"\n      menuOptions={{ column }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GACxB,CAAA;AAEJ;;;;"}

package/esm/column-resizing/ColumnResizer.css.js

@@ -0,0 +1,4 @@
+var columnResizerCss = ".vuuColumnResizer {\n    cursor: col-resize;\n    height: var(--header-height);\n    margin-left: var(--columnResizer-left, auto);\n    position: absolute;\n    right: -5px;\n    width: 8px;\n    z-index:1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing){\n    .vuuColumnResizer:hover {\n        --columnResizer-color: var(--salt-selectable-background-selected);\n    }\n    \n}\n\n.vuuColumnResizer:after {\n    background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n    bottom:0;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 3px;\n    height: var(--columnResizer-height, 0);\n    width: 2px;\n    z-index: 1;\n}";
+
+export { columnResizerCss as default };
+//# sourceMappingURL=ColumnResizer.css.js.map

package/esm/column-resizing/ColumnResizer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/column-resizing/ColumnResizer.js

@@ -1,5 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useRef, useCallback } from 'react';
+import columnResizerCss from './ColumnResizer.css.js';
 
 const NOOP = () => void 0;
 const baseClass = "vuuColumnResizer";
@@ -8,6 +11,12 @@ const ColumnResizer = ({
   onDragEnd = NOOP,
   onDragStart = NOOP
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-resizer",
+    css: columnResizerCss,
+    window: targetWindow
+  });
   const positionRef = useRef({ start: 0, now: 0 });
   const onMouseMove = useCallback(
     (e) => {

package/esm/column-resizing/ColumnResizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useCallback, useRef } from \"react\";\n\nimport \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n  onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n  onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n  onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n  onDrag,\n  onDragEnd = NOOP,\n  onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n  const positionRef = useRef({ start: 0, now: 0 });\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (e.stopPropagation) {\n        e.stopPropagation();\n      }\n\n      if (e.preventDefault) {\n        e.preventDefault();\n      }\n\n      const { current: position } = positionRef;\n\n      const x = Math.round(e.clientX);\n      const moveBy = x - position.now;\n      const distanceMoved = position.now - position.start;\n\n      positionRef.current.now = x;\n\n      if (moveBy !== 0) {\n        onDrag(e, moveBy, distanceMoved);\n      }\n    },\n    [onDrag]\n  );\n\n  const onMouseUp = useCallback(\n    (e: MouseEvent) => {\n      window.removeEventListener(\"mouseup\", onMouseUp);\n      window.removeEventListener(\"mousemove\", onMouseMove);\n\n      const { current: position } = positionRef;\n      const distanceMoved = position.now - position.start;\n      onDragEnd(e, distanceMoved);\n    },\n    [onDragEnd, onMouseMove]\n  );\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const { current: position } = positionRef;\n      onDragStart(e);\n      position.now = position.start = Math.round(e.clientX);\n\n      window.addEventListener(\"mouseup\", onMouseUp);\n      window.addEventListener(\"mousemove\", onMouseMove);\n\n      if (e.stopPropagation) {\n        e.stopPropagation();\n      }\n\n      if (e.preventDefault) {\n        e.preventDefault();\n      }\n    },\n    [onDragStart, onMouseMove, onMouseUp]\n  );\n\n  return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAEnB,MAAM,SAAY,GAAA,kBAAA,CAAA;AAOX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,MAAA;AAAA,EACA,SAAY,GAAA,IAAA;AAAA,EACZ,WAAc,GAAA,IAAA;AAChB,CAA+B,KAAA;AAC7B,EAAA,MAAM,cAAc,MAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAE/C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAAkB,KAAA;AACjB,MAAA,IAAI,EAAE,eAAiB,EAAA;AACrB,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,OACpB;AAEA,MAAA,IAAI,EAAE,cAAgB,EAAA;AACpB,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,OACnB;AAEA,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA,CAAA;AAE9B,MAAA,MAAM,CAAI,GAAA,IAAA,CAAK,KAAM,CAAA,CAAA,CAAE,OAAO,CAAA,CAAA;AAC9B,MAAM,MAAA,MAAA,GAAS,IAAI,QAAS,CAAA,GAAA,CAAA;AAC5B,MAAM,MAAA,aAAA,GAAgB,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,KAAA,CAAA;AAE9C,MAAA,WAAA,CAAY,QAAQ,GAAM,GAAA,CAAA,CAAA;AAE1B,MAAA,IAAI,WAAW,CAAG,EAAA;AAChB,QAAO,MAAA,CAAA,CAAA,EAAG,QAAQ,aAAa,CAAA,CAAA;AAAA,OACjC;AAAA,KACF;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,CAAkB,KAAA;AACjB,MAAO,MAAA,CAAA,mBAAA,CAAoB,WAAW,SAAS,CAAA,CAAA;AAC/C,MAAO,MAAA,CAAA,mBAAA,CAAoB,aAAa,WAAW,CAAA,CAAA;AAEnD,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA,CAAA;AAC9B,MAAM,MAAA,aAAA,GAAgB,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,KAAA,CAAA;AAC9C,MAAA,SAAA,CAAU,GAAG,aAAa,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,WAAW,WAAW,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,CAAwB,KAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA,CAAA;AAC9B,MAAA,WAAA,CAAY,CAAC,CAAA,CAAA;AACb,MAAA,QAAA,CAAS,MAAM,QAAS,CAAA,KAAA,GAAQ,IAAK,CAAA,KAAA,CAAM,EAAE,OAAO,CAAA,CAAA;AAEpD,MAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,SAAS,CAAA,CAAA;AAC5C,MAAO,MAAA,CAAA,gBAAA,CAAiB,aAAa,WAAW,CAAA,CAAA;AAEhD,MAAA,IAAI,EAAE,eAAiB,EAAA;AACrB,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAAA,OACpB;AAEA,MAAA,IAAI,EAAE,cAAgB,EAAA;AACpB,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,WAAa,EAAA,WAAA,EAAa,SAAS,CAAA;AAAA,GACtC,CAAA;AAEA,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,aAAa,eAAiB,EAAA,CAAA,CAAA;AAClE;;;;"}
+{"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\n\nimport columnResizerCss from \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n  onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n  onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n  onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n  onDrag,\n  onDragEnd = NOOP,\n  onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-resizer\",\n    css: columnResizerCss,\n    window: targetWindow,\n  });\n\n  const positionRef = useRef({ start: 0, now: 0 });\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (e.stopPropagation) {\n        e.stopPropagation();\n      }\n\n      if (e.preventDefault) {\n        e.preventDefault();\n      }\n\n      const { current: position } = positionRef;\n\n      const x = Math.round(e.clientX);\n      const moveBy = x - position.now;\n      const distanceMoved = position.now - position.start;\n\n      positionRef.current.now = x;\n\n      if (moveBy !== 0) {\n        onDrag(e, moveBy, distanceMoved);\n      }\n    },\n    [onDrag]\n  );\n\n  const onMouseUp = useCallback(\n    (e: MouseEvent) => {\n      window.removeEventListener(\"mouseup\", onMouseUp);\n      window.removeEventListener(\"mousemove\", onMouseMove);\n\n      const { current: position } = positionRef;\n      const distanceMoved = position.now - position.start;\n      onDragEnd(e, distanceMoved);\n    },\n    [onDragEnd, onMouseMove]\n  );\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const { current: position } = positionRef;\n      onDragStart(e);\n      position.now = position.start = Math.round(e.clientX);\n\n      window.addEventListener(\"mouseup\", onMouseUp);\n      window.addEventListener(\"mousemove\", onMouseMove);\n\n      if (e.stopPropagation) {\n        e.stopPropagation();\n      }\n\n      if (e.preventDefault) {\n        e.preventDefault();\n      }\n    },\n    [onDragStart, onMouseMove, onMouseUp]\n  );\n\n  return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":[],"mappings":"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"}

package/esm/header-cell/GroupHeaderCell.css.js

@@ -0,0 +1,4 @@
+var headerCellCss = "\n.vuu-theme {\n --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTableGroupHeaderCell {\n  --vuuColumnHeaderPill-margin: 0;\n  --cell-align: 'flex-start';\n    text-align: left;\n    background: var(--dataTable-background);\n    cursor: default;\n    height: var(--vuuTableHeaderHeight);\n    /* ensure header row sits atop everything else when scrolling down */\n  }\n\n\n  .vuuTableGroupHeaderCell-inner {\n    align-items: center;\n    display: flex;\n    gap: 4px;\n    height: 100%;\n    padding-left: 1px;\n  }\n\n  .vuuTableGroupHeaderCell-col {\n    align-items: center;\n    background-color: inherit;\n    display: inline-flex;\n    flex: 0 1 auto;\n    height: calc(var(--vuuTableHeaderHeight) - 2px);\n    justify-content: space-between;\n    padding-right: 8px;\n    position: relative;\n  }\n\n  .vuuTableGroupHeaderCell-label {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  .vuuTableGroupHeaderCell-close {\n    --vuu-icon-height: 18px;\n    --vuu-icon-width: 18px;\n    cursor: pointer;\n    left: 3px;\n  }\n  \n  .vuuTableGroupHeaderCell-resizing {\n    --columnResizer-color: var(--salt-color-blue-500);\n    --columnResizer-height: var(--table-height);\n    --columnResizer-width: 2px;\n  }\n  .vuuTableGroupHeaderCell-pending {\n    --pending-content: '';\n  }\n\n  .vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {\n    content: var(--pending-content);\n    width: 24px;\n    height:24px;\n    background-image: var(--svg-spinner);\n    background-repeat: no-repeat;\n    background-size: cover;\n  }\n";
+
+export { headerCellCss as default };
+//# sourceMappingURL=GroupHeaderCell.css.js.map

package/esm/header-cell/GroupHeaderCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeaderCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/header-cell/GroupHeaderCell.js

@@ -2,12 +2,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, createElement } from 'react';
 import { OverflowContainer } from '@vuu-ui/vuu-ui-controls';
 import { useLayoutEffectSkipFirst } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { ColumnHeaderPill } from '../column-header-pill/ColumnHeaderPill.js';
 import { GroupColumnPill } from '../column-header-pill/GroupColumnPill.js';
 import { ColumnResizer } from '../column-resizing/ColumnResizer.js';
 import { useTableColumnResize } from '../column-resizing/useTableColumnResize.js';
 import { useCell } from '../useCell.js';
+import headerCellCss from './GroupHeaderCell.css.js';
 
 const classBase = "vuuTableGroupHeaderCell";
 const switchIfChanged = (columns, newColumns) => {
@@ -25,6 +28,12 @@ const GroupHeaderCell = ({
   onResize,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-group-header-cell",
+    css: headerCellCss,
+    window: targetWindow
+  });
   const rootRef = useRef(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column: groupColumn,

package/esm/header-cell/GroupHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  ColumnDescriptor,\n  GroupColumnDescriptor,\n  HeaderCellProps,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n  columns: RuntimeColumnDescriptor[],\n  newColumns: RuntimeColumnDescriptor[]\n) => {\n  if (columns === newColumns) {\n    return columns;\n  } else {\n    return newColumns;\n  }\n};\n\nexport interface GroupHeaderCellProps\n  extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n  column: GroupColumnDescriptor;\n  onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n  onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n  column: groupColumn,\n  className: classNameProp,\n  onMoveColumn,\n  onRemoveColumn,\n  onResize,\n  ...htmlAttributes\n}: GroupHeaderCellProps) => {\n  const rootRef = useRef<HTMLTableCellElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column: groupColumn,\n    onResize,\n    rootRef,\n  });\n\n  const [columns, setColumns] = useState(groupColumn.columns);\n  const { className, style } = useCell(groupColumn, classBase, true);\n  const columnPillProps =\n    columns.length > 1\n      ? {\n          removable: true,\n          onRemove: onRemoveColumn,\n        }\n      : undefined;\n\n  const handleMoveItem = useCallback(\n    (fromIndex, toIndex) => {\n      setColumns((cols) => {\n        const newCols = cols.slice();\n        const [tab] = newCols.splice(fromIndex, 1);\n        if (toIndex === -1) {\n          const result = newCols.concat(tab);\n          onMoveColumn?.(result);\n          return result;\n        } else {\n          newCols.splice(toIndex, 0, tab);\n          onMoveColumn?.(newCols);\n          return newCols;\n        }\n      });\n    },\n    [onMoveColumn]\n  );\n\n  useLayoutEffectSkipFirst(() => {\n    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n  }, [groupColumn.columns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, classNameProp, {\n        [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n      })}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      <OverflowContainer\n        allowDragDrop\n        className={`${classBase}-inner`}\n        onMoveItem={handleMoveItem}\n        overflowPosition=\"start\"\n      >\n        {columns.map((column) => {\n          return (\n            <GroupColumnPill\n              {...columnPillProps}\n              column={column}\n              key={column.name}\n            />\n          );\n        })}\n      </OverflowContainer>\n      <ColumnHeaderPill\n        column={groupColumn}\n        removable\n        onRemove={onRemoveColumn}\n      />\n\n      {groupColumn.resizeable !== false ? (\n        <ColumnResizer {...resizeProps} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  ColumnDescriptor,\n  GroupColumnDescriptor,\n  HeaderCellProps,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n  columns: RuntimeColumnDescriptor[],\n  newColumns: RuntimeColumnDescriptor[]\n) => {\n  if (columns === newColumns) {\n    return columns;\n  } else {\n    return newColumns;\n  }\n};\n\nexport interface GroupHeaderCellProps\n  extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n  column: GroupColumnDescriptor;\n  onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n  onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n  column: groupColumn,\n  className: classNameProp,\n  onMoveColumn,\n  onRemoveColumn,\n  onResize,\n  ...htmlAttributes\n}: GroupHeaderCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-group-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLTableCellElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column: groupColumn,\n    onResize,\n    rootRef,\n  });\n\n  const [columns, setColumns] = useState(groupColumn.columns);\n  const { className, style } = useCell(groupColumn, classBase, true);\n  const columnPillProps =\n    columns.length > 1\n      ? {\n          removable: true,\n          onRemove: onRemoveColumn,\n        }\n      : undefined;\n\n  const handleMoveItem = useCallback(\n    (fromIndex, toIndex) => {\n      setColumns((cols) => {\n        const newCols = cols.slice();\n        const [tab] = newCols.splice(fromIndex, 1);\n        if (toIndex === -1) {\n          const result = newCols.concat(tab);\n          onMoveColumn?.(result);\n          return result;\n        } else {\n          newCols.splice(toIndex, 0, tab);\n          onMoveColumn?.(newCols);\n          return newCols;\n        }\n      });\n    },\n    [onMoveColumn]\n  );\n\n  useLayoutEffectSkipFirst(() => {\n    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n  }, [groupColumn.columns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, classNameProp, {\n        [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n      })}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      <OverflowContainer\n        allowDragDrop\n        className={`${classBase}-inner`}\n        onMoveItem={handleMoveItem}\n        overflowPosition=\"start\"\n      >\n        {columns.map((column) => {\n          return (\n            <GroupColumnPill\n              {...columnPillProps}\n              column={column}\n              key={column.name}\n            />\n          );\n        })}\n      </OverflowContainer>\n      <ColumnHeaderPill\n        column={groupColumn}\n        removable\n        onRemove={onRemoveColumn}\n      />\n\n      {groupColumn.resizeable !== false ? (\n        <ColumnResizer {...resizeProps} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/header-cell/HeaderCell.css.js

@@ -0,0 +1,4 @@
+var headerCellCss = ".vuuTableGroupHeaderCell,\n.vuuTableHeaderCell {\n  --cell-align: 'flex-start';\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(--vuuTableHeaderCell-background, inherit);\n  border-bottom: 1px solid #ccc;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  gap: 4px;\n  height: var(--header-height);\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n}\n\n.vuuTableHeaderCell:focus {\n  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\n  outline-offset: -3px;\n}\n\n.vuuTableHeaderCell-right {\n    --columnResizer-left: 0;\n    --vuuTable-columnMenu-margin: 0;\n    --vuuColumnHeaderPill-margin: 0 3px 0 0;\n    --column-menu-left: 2px;\n    justify-content: flex-end;\n    padding: 0 3px 0 12px;\n}\n\n.vuuTableHeaderCell-noMenu {\n  padding-left: var(--salt-spacing-300)\n}\n\n.vuuTableHeaderCell-label {\n  flex: 0 1 auto;\n  line-height: calc(var(--header-height) - 1px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vuuTableHeaderCell-right .vuuTableHeaderCell-label {\n  text-align: right;\n}\n\n.vuuTableHeaderCell-resizing {\n  --columnResizeThumb-color: var(--vuu-color-purple-10);\n  --columnResizer-color: var(--vuu-color-purple-10);\n  --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n  padding-left: 2px;\n}\n\n  .vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {\n    --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n    --inset-r: calc(var(--pin-width) - 2px);\n    --inset-b: calc(var(--height) - 2px);\n    --clip-path: polygon(\n      0% 0%,                              \n      0% 120%,                            \n      2px 120%,    \n      2px 2px,      \n      var(--inset-r) 2px,      \n      var(--inset-r) var(--inset-b),      \n      2px var(--inset-b),      \n      2px 120%,     \n      120% 120%,    \n      120% 0%       \n    );\n    background-color: transparent;\n    border-color:   var(--vuuTablePinnedColumn-borderColor, var(--salt-container-primary-borderColor));\n    border-width: 1px;\n    border-style: solid solid solid solid;\n    /* border-radius: 0 6px 6px 0; */\n    border-radius: 4px;\n    box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.10);\n    /* clip-path: inset(10px 10px 10px 10px); */\n    clip-path: var(--clip-path);\n    content: '';\n    position: absolute;\n    width: var(--pin-width);\n    top:0;\n    bottom:0;\n    right: 3px;\n    height: var(--height);\n    z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    -20% 0%,                              \n    -20% 120%,                            \n    2px 120%,    \n    2px 2px,      \n    var(--inset-r) 2px,      \n    var(--inset-r) var(--inset-b),      \n    2px var(--inset-b),      \n    2px 120%,     \n    120% 120%,    \n    120% 0%       \n  );\n  background-color: transparent;\n  border-color: #A9AAAD;\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.10);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: '';\n  position: absolute;\n  width: var(--pin-width);\n  top:0;\n  bottom:0;\n  right: 0px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuDraggable-dragAway {\n    display: none;\n}\n\n.vuuTable-headingCell {\n  background: var(--dataTable-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-text-secondary-foreground);\n  display: inline-block;\n  height: var(--header-height);\n  padding: 0 !important;\n}\n";
+
+export { headerCellCss as default };
+//# sourceMappingURL=HeaderCell.css.js.map

package/esm/header-cell/HeaderCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/header-cell/HeaderCell.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContextMenu } from '@vuu-ui/vuu-popups';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useRef, useMemo, useCallback } from 'react';
 import { SortIndicator } from '../column-header-pill/SortIndicator.js';
@@ -7,6 +9,7 @@ import { ColumnMenu } from '../column-menu/ColumnMenu.js';
 import { ColumnResizer } from '../column-resizing/ColumnResizer.js';
 import { useTableColumnResize } from '../column-resizing/useTableColumnResize.js';
 import { useCell } from '../useCell.js';
+import headerCellCss from './HeaderCell.css.js';
 
 const classBase = "vuuTableHeaderCell";
 const HeaderCell = ({
@@ -17,6 +20,12 @@ const HeaderCell = ({
   showMenu = true,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-header-cell",
+    css: headerCellCss,
+    window: targetWindow
+  });
   const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
   const rootRef = useRef(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({

package/esm/header-cell/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n  className: classNameProp,\n  column,\n  onClick,\n  onResize,\n  showMenu = true,\n  ...htmlAttributes\n}: HeaderCellProps) => {\n  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column,\n    onResize,\n    rootRef,\n  });\n\n  const [showContextMenu] = useContextMenu();\n\n  const handleContextMenu = useMemo(() => {\n    if (showMenu) {\n      return undefined;\n    } else {\n      return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n    }\n  }, [column, showContextMenu, showMenu]);\n\n  const headerItems = useMemo(() => {\n    const sortIndicator = <SortIndicator column={column} />;\n    const columnLabel = HeaderCellLabelRenderer ? (\n      <HeaderCellLabelRenderer\n        className={`${classBase}-label`}\n        column={column}\n      />\n    ) : (\n      <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n    );\n    const columnContent = HeaderCellContentRenderer\n      ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n      : [];\n\n    if (showMenu) {\n      const columnMenu = <ColumnMenu column={column} />;\n\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent, columnMenu];\n      } else {\n        return [columnMenu, columnLabel, sortIndicator, columnContent];\n      }\n    } else {\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent];\n      } else {\n        return [columnLabel, sortIndicator, columnContent];\n      }\n    }\n  }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (evt) => {\n      !isResizing && onClick?.(evt);\n    },\n    [isResizing, onClick]\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        onClick?.(evt);\n      }\n    },\n    [onClick]\n  );\n\n  const { className, style } = useCell(column, classBase, true);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, classNameProp, {\n        [`${classBase}-resizing`]: isResizing,\n        [`${classBase}-noMenu`]: showMenu === false,\n      })}\n      onClick={handleClick}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleKeyDown}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      {...headerItems}\n      {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n  className: classNameProp,\n  column,\n  onClick,\n  onResize,\n  showMenu = true,\n  ...htmlAttributes\n}: HeaderCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column,\n    onResize,\n    rootRef,\n  });\n\n  const [showContextMenu] = useContextMenu();\n\n  const handleContextMenu = useMemo(() => {\n    if (showMenu) {\n      return undefined;\n    } else {\n      return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n    }\n  }, [column, showContextMenu, showMenu]);\n\n  const headerItems = useMemo(() => {\n    const sortIndicator = <SortIndicator column={column} />;\n    const columnLabel = HeaderCellLabelRenderer ? (\n      <HeaderCellLabelRenderer\n        className={`${classBase}-label`}\n        column={column}\n      />\n    ) : (\n      <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n    );\n    const columnContent = HeaderCellContentRenderer\n      ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n      : [];\n\n    if (showMenu) {\n      const columnMenu = <ColumnMenu column={column} />;\n\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent, columnMenu];\n      } else {\n        return [columnMenu, columnLabel, sortIndicator, columnContent];\n      }\n    } else {\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent];\n      } else {\n        return [columnLabel, sortIndicator, columnContent];\n      }\n    }\n  }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (evt) => {\n      !isResizing && onClick?.(evt);\n    },\n    [isResizing, onClick]\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        onClick?.(evt);\n      }\n    },\n    [onClick]\n  );\n\n  const { className, style } = useCell(column, classBase, true);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, classNameProp, {\n        [`${classBase}-resizing`]: isResizing,\n        [`${classBase}-noMenu`]: showMenu === false,\n      })}\n      onClick={handleClick}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleKeyDown}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      {...headerItems}\n      {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/table-cell/TableCell.css.js

@@ -0,0 +1,4 @@
+var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  overflow:hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 12px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n}\n\n.vuuTableCell-right {\n    text-align: right;\n}\n\n.vuuTableCell-editable {\n    align-items: center;\n    display: inline-flex;\n    text-overflow: unset;\n}\n  \n.vuuTableCell:focus {\n    outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\n    outline-offset: -2px;\n    /** This is to achieve a white background to outline dashes */\n    box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n    border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\n  outline-offset: -1px;\n\n}\n.vuuTableCell-editable:focus {\n  outline: none;\n}\n\n";
+
+export { tableCellCss as default };
+//# sourceMappingURL=TableCell.css.js.map

package/esm/table-cell/TableCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/table-cell/TableCell.js

@@ -1,7 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { isNumericColumn } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useCallback } from 'react';
 import { useCell } from '../useCell.js';
+import tableCellCss from './TableCell.css.js';
 
 const classBase = "vuuTableCell";
 const TableCell = ({
@@ -11,6 +14,12 @@ const TableCell = ({
   onDataEdited,
   row
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-cell",
+    css: tableCellCss,
+    window: targetWindow
+  });
   const { className, style } = useCell(column, classBase);
   const { CellRenderer, index, name, valueFormatter } = column;
   const dataIdx = columnMap[name];

package/esm/table-cell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import { DataItemCommitHandler, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { isNumericColumn } from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  columnMap,\n  onClick,\n  onDataEdited,\n  row,\n}: TableCellProps) => {\n  const { className, style } = useCell(column, classBase);\n  const { CellRenderer, index, name, valueFormatter } = column;\n  const dataIdx = columnMap[name];\n\n  const handleDataItemEdited = useCallback<DataItemCommitHandler>(\n    (value) => {\n      if (onDataEdited) {\n        let typedValue = value;\n        if (isNumericColumn(column) && typeof value === \"string\") {\n          typedValue =\n            column.serverDataType === \"double\"\n              ? parseFloat(value)\n              : parseInt(value);\n        }\n        return onDataEdited?.(row, name, typedValue);\n      } else {\n        throw Error(\n          \"TableCell onDataEdited prop not supplied for an editable cell\"\n        );\n      }\n    },\n    [column, name, onDataEdited, row]\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick]\n  );\n\n  return (\n    <div\n      aria-colindex={index}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          columnMap={columnMap}\n          onCommit={handleDataItemEdited}\n          row={row}\n        />\n      ) : (\n        valueFormatter(row[dataIdx])\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAY,GAAA,cAAA,CAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AACtD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,IAAA,EAAM,gBAAmB,GAAA,MAAA,CAAA;AACtD,EAAM,MAAA,OAAA,GAAU,UAAU,IAAI,CAAA,CAAA;AAE9B,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,KAAU,KAAA;AACT,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,IAAI,UAAa,GAAA,KAAA,CAAA;AACjB,QAAA,IAAI,eAAgB,CAAA,MAAM,CAAK,IAAA,OAAO,UAAU,QAAU,EAAA;AACxD,UAAA,UAAA,GACE,OAAO,cAAmB,KAAA,QAAA,GACtB,WAAW,KAAK,CAAA,GAChB,SAAS,KAAK,CAAA,CAAA;AAAA,SACtB;AACA,QAAO,OAAA,YAAA,GAAe,GAAK,EAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAAA,OACtC,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,+DAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,IAAM,EAAA,YAAA,EAAc,GAAG,CAAA;AAAA,GAClC,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,KAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAU,EAAA,oBAAA;AAAA,UACV,GAAA;AAAA,SAAA;AAAA,OAGF,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AAAA,KAAA;AAAA,GAE/B,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import { DataItemCommitHandler, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { isNumericColumn } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  columnMap,\n  onClick,\n  onDataEdited,\n  row,\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const { className, style } = useCell(column, classBase);\n  const { CellRenderer, index, name, valueFormatter } = column;\n  const dataIdx = columnMap[name];\n\n  const handleDataItemEdited = useCallback<DataItemCommitHandler>(\n    (value) => {\n      if (onDataEdited) {\n        let typedValue = value;\n        if (isNumericColumn(column) && typeof value === \"string\") {\n          typedValue =\n            column.serverDataType === \"double\"\n              ? parseFloat(value)\n              : parseInt(value);\n        }\n        return onDataEdited?.(row, name, typedValue);\n      } else {\n        throw Error(\n          \"TableCell onDataEdited prop not supplied for an editable cell\"\n        );\n      }\n    },\n    [column, name, onDataEdited, row]\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick]\n  );\n\n  return (\n    <div\n      aria-colindex={index}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          columnMap={columnMap}\n          onCommit={handleDataItemEdited}\n          row={row}\n        />\n      ) : (\n        valueFormatter(row[dataIdx])\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,cAAA,CAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AACtD,EAAA,MAAM,EAAE,YAAA,EAAc,KAAO,EAAA,IAAA,EAAM,gBAAmB,GAAA,MAAA,CAAA;AACtD,EAAM,MAAA,OAAA,GAAU,UAAU,IAAI,CAAA,CAAA;AAE9B,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,KAAU,KAAA;AACT,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,IAAI,UAAa,GAAA,KAAA,CAAA;AACjB,QAAA,IAAI,eAAgB,CAAA,MAAM,CAAK,IAAA,OAAO,UAAU,QAAU,EAAA;AACxD,UAAA,UAAA,GACE,OAAO,cAAmB,KAAA,QAAA,GACtB,WAAW,KAAK,CAAA,GAChB,SAAS,KAAK,CAAA,CAAA;AAAA,SACtB;AACA,QAAO,OAAA,YAAA,GAAe,GAAK,EAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAAA,OACtC,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,+DAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,IAAM,EAAA,YAAA,EAAc,GAAG,CAAA;AAAA,GAClC,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,KAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAU,EAAA,oBAAA;AAAA,UACV,GAAA;AAAA,SAAA;AAAA,OAGF,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AAAA,KAAA;AAAA,GAE/B,CAAA;AAEJ;;;;"}

package/esm/table-cell/TableGroupCell.css.js

@@ -0,0 +1,4 @@
+var tableGroupCellCss = ".vuuTableGroupCell {\n    --group-cell-spacer-width: 20px;\n    align-items: center;\n    border-right-color: var(--vuuTableGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));\n    border-right-style: solid;\n    border-right-width: 1px;\n  \n    cursor: pointer;\n    display: inline-flex;\n    height: var(--row-height);\n    line-height: 16px;\n}\n\n.vuuTableGroupCell-toggle {\n    --vuu-icon-height: 16px;\n    --vuu-icon-size: 16px;\n    --vuu-icon-width: 8px;\n    margin-right: 4px;\n    transition: transform 0.25s;\n    transform: var(--toggle-icon-transform);\n\n}\n\n.vuuTableGroupCell-spacer {\n    width: var(--group-cell-spacer-width);\n  }\n";
+
+export { tableGroupCellCss as default };
+//# sourceMappingURL=TableGroupCell.css.js.map

package/esm/table-cell/TableGroupCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}