@salt-ds/data-grid 1.0.4-alpha.1 → 1.0.4-alpha.10

package/dist-cjs/HeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["import { KeyboardEventHandler, useRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FlexContentAlignment,\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"@salt-ds/icons\";\n\nimport { ColumnSeparatorType, SortOrder } from \"./Grid\";\nimport { useSizingContext } from \"./SizingContext\";\nimport { useColumnDragContext } from \"./ColumnDragContext\";\nimport { Cursor, useFocusableContent } from \"./internal\";\nimport { HeaderCellProps } from \"./GridColumn\";\nimport { useColumnSortContext } from \"./ColumnSortContext\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport interface HeaderCellSeparatorProps {\n  separatorType: ColumnSeparatorType;\n}\n\nexport function HeaderCellSeparator(props: HeaderCellSeparatorProps) {\n  const className = withBaseName([props.separatorType, \"Separator\"].join(\"\"));\n  return <div className={className} />;\n}\n\ntype AriaSortProps = \"none\" | \"ascending\" | \"descending\";\n\nexport function HeaderCell<T>(props: HeaderCellProps<T>) {\n  const { column, children, isFocused } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const { separator } = column;\n  const { align, id, headerClassName, sortable, onSortOrderChange } =\n    column.info.props;\n  const { onResizeHandleMouseDown } = useSizingContext();\n\n  const { columnMove, onColumnMoveHandleMouseDown } = useColumnDragContext();\n  const onMouseDown = columnMove ? onColumnMoveHandleMouseDown : undefined;\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableHeaderCellElement>();\n\n  const {\n    onClickSortColumn,\n    setSortByColumnId,\n    sortOrder,\n    sortByColumnId,\n    setSortOrder,\n  } = useColumnSortContext();\n\n  const valueAlignRight = align === \"right\";\n\n  interface HeaderCellSortingIconProps {\n    justify: FlexContentAlignment;\n  }\n\n  const HeaderCellSortingIcon = ({ justify }: HeaderCellSortingIconProps) => {\n    const className = withBaseName(\"sortingIcon\");\n    const icon = (\n      <div\n        className={clsx(className, {\n          [withBaseName(\"sortingIconStart\")]: justify === \"start\",\n          [withBaseName(\"sortingIconEnd\")]: justify === \"end\",\n        })}\n        aria-hidden\n      >\n        {sortOrder === SortOrder.ASC && <ArrowUpIcon />}\n        {sortOrder === SortOrder.DESC && <ArrowDownIcon />}\n      </div>\n    );\n\n    return icon;\n  };\n\n  const ariaSortMap = {\n    asc: \"ascending\",\n    desc: \"descending\",\n    none: \"none\",\n  };\n\n  const ariaSort = ariaSortMap[sortOrder] as AriaSortProps;\n\n  const order =\n    sortOrder === SortOrder.ASC\n      ? SortOrder.DESC\n      : sortOrder === SortOrder.DESC\n      ? SortOrder.NONE\n      : SortOrder.ASC;\n\n  const withSortOrder = sortOrder !== SortOrder.NONE && sortByColumnId === id;\n\n  const onClick = () => {\n    if (onSortOrderChange) {\n      setSortByColumnId(id);\n      setSortOrder(order);\n      onSortOrderChange({ sortOrder: order });\n      return;\n    }\n    setSortByColumnId(id);\n    onClickSortColumn(id);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableHeaderCellElement> = (\n    event\n  ) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <th\n      ref={ref}\n      aria-colindex={column.index + 1}\n      data-column-index={column.index}\n      className={clsx(withBaseName(), headerClassName, {\n        [withBaseName(\"sortable\")]: sortable,\n      })}\n      role=\"columnheader\"\n      data-testid=\"column-header\"\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n      onClick={sortable ? onClick : undefined}\n      onKeyDown={sortable ? onKeyDown : undefined}\n      aria-sort={sortByColumnId === id && sortable ? ariaSort : undefined}\n      aria-label={column.info.props[\"aria-label\"]}\n    >\n      {sortByColumnId === id && sortable && valueAlignRight && (\n        <HeaderCellSortingIcon justify=\"start\" />\n      )}\n      <div\n        className={clsx(withBaseName(\"valueContainer\"), {\n          [withBaseName(\"alignRight\")]: valueAlignRight,\n          // both classNames below needed to ensure header cell title & sort icon do not overlap when column resized to be smaller\n          [withBaseName(\"alignRightWithSortOrder\")]:\n            valueAlignRight && withSortOrder,\n          [withBaseName(\"alignLeftWithSortOrder\")]:\n            !valueAlignRight && withSortOrder,\n        })}\n        onMouseDown={onMouseDown}\n      >\n        {children}\n      </div>\n      {sortByColumnId === id && sortable && !valueAlignRight && (\n        <HeaderCellSortingIcon justify=\"end\" />\n      )}\n      <HeaderCellSeparator separatorType={separator} />\n      <div\n        data-testid={`column-${column.index}-resize-handle`}\n        className={withBaseName(\"resizeHandle\")}\n        onMouseDown={onResizeHandleMouseDown}\n      />\n      {isFocused && !isFocusableContent && <Cursor />}\n    </th>\n  );\n}\n\nexport function AutoSizeHeaderCell<T>(props: HeaderCellProps<T>) {\n  const { column, children, isFocused } = props;\n  const { separator } = column;\n  const valueContainerRef = useRef<HTMLDivElement>(null);\n  const { resizeColumn } = useSizingContext();\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableHeaderCellElement>();\n\n  useIsomorphicLayoutEffect(() => {\n    const width = valueContainerRef.current\n      ? valueContainerRef.current.offsetWidth\n      : undefined;\n    if (width != undefined && width !== column.info.width) {\n      resizeColumn(column.index, width);\n    }\n  });\n\n  return (\n    <th\n      ref={ref}\n      aria-colindex={column.index + 1}\n      data-column-index={column.index}\n      className={withBaseName()}\n      role=\"columnheader\"\n      data-testid=\"column-header\"\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n    >\n      <div className={withBaseName(\"autosizeContainer\")}>\n        <div\n          ref={valueContainerRef}\n          className={withBaseName(\"measuredContent\")}\n        >\n          {children}\n        </div>\n      </div>\n      <HeaderCellSeparator separatorType={separator} />\n      {isFocused && !isFocusableContent && <Cursor />}\n    </th>\n  );\n}\n"],"names":["makePrefixer","jsx","useWindow","useComponentCssInjection","headerCellCss","useSizingContext","useColumnDragContext","useFocusableContent","useColumnSortContext","jsxs","clsx","SortOrder","ArrowUpIcon","ArrowDownIcon","Cursor","useRef","useIsomorphicLayoutEffect"],"mappings":"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"}

package/dist-cjs/NumberRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRange.js","sources":["../src/NumberRange.ts"],"sourcesContent":["export function range(\n  ...args: [number] | [number, number] | [number, number, number]\n): number[] {\n  let start = 0;\n  let end = 0;\n  let step = 1;\n  if (args.length < 2) {\n    end = args[0];\n  } else {\n    start = args[0];\n    end = args[1]!;\n    if (args.length > 2) {\n      step = args[2]!;\n    }\n  }\n  return [...Array(end - start).keys()].map((i) => start + i * step);\n}\n\nexport class NumberRange {\n  public readonly start: number;\n\n  public readonly end: number;\n\n  public constructor(start: number, end: number) {\n    if (end < start) {\n      throw new Error(`Invalid start and end: [${start}, ${end}]`);\n    }\n    this.start = start;\n    this.end = end;\n  }\n\n  public get length(): number {\n    return this.end - this.start;\n  }\n\n  public map<T>(fn: (i: number) => T): T[] {\n    return range(this.start, this.end).map(fn);\n  }\n\n  public forEach(fn: (i: number) => void): void {\n    range(this.start, this.end).forEach(fn);\n  }\n\n  public *[Symbol.iterator]() {\n    for (let i = this.start; i < this.end; ++i) {\n      yield i;\n    }\n  }\n\n  public static equals(a: NumberRange | undefined, b: NumberRange | undefined) {\n    if (!a) {\n      return !b;\n    }\n    return !b ? false : a.start === b.start && a.end === b.end;\n  }\n\n  public update(start: number, end: number) {\n    return this.end !== end || this.start !== start\n      ? new NumberRange(start, end)\n      : this;\n  }\n\n  public static empty: NumberRange = new NumberRange(0, 0);\n\n  public toString() {\n    return `[${this.start}, ${this.end}]`;\n  }\n\n  public contains(n: number) {\n    return this.start <= n && n < this.end;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist-cjs/{packages/grid/src/NumericColumn.css.js → NumericColumn.css.js}

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridNumericCellValue {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: var(--grid-cell-padding);\n  text-align: right;\n}\n\n.saltGridNumericCellEditor {\n}\n\n.saltGridNumericCellEditor-inputContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--grid-background);\n  box-sizing: border-box;\n  border-style: dotted;\n  border-width: 2px;\n  border-color: var(--grid-cursor-borderColor);\n  padding: 0;\n}\n\n.saltGridNumericCellEditor input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  outline: none;\n  border: none;\n  padding: 0 calc(var(--grid-padding) - 2px);\n  font-size: var(--grid-fontSize);\n  font-family: inherit;\n  background: var(--grid-editableCell-background-active);\n  color: var(--grid-editableCell-color-active);\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=NumericColumn.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/NumericColumn.css.js.map

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

package/dist-cjs/{packages/grid/src/NumericColumn.js → NumericColumn.js}

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var GridColumn = require('./GridColumn.js');
-require('./NumericColumn.css.js');
 var react = require('react');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var GridColumn = require('./GridColumn.js');
 var EditorContext = require('./EditorContext.js');
 var CornerTag = require('./CornerTag.js');
 var Cell = require('./internal/Cell.js');
@@ -25,14 +26,20 @@ require('@salt-ds/core');
 require('./internal/TopLeftPart.js');
 require('./internal/TopPart.js');
 require('./internal/TopRightPart.js');
-require('./internal/FakeCell.css.js');
 require('./internal/DefaultCellValue.js');
+var NumericColumn$1 = require('./NumericColumn.css.js');
 
 function isNumber(value) {
   return typeof value === "number" && Number.isFinite(value);
 }
 function NumericCellValue(props) {
   const { column, value } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-numeric-column",
+    css: NumericColumn$1,
+    window: targetWindow
+  });
   const columnProps = column.info.props;
   const { precision } = columnProps;
   const text = isNumber(value) ? value.toFixed(precision) : "";

package/dist-cjs/NumericColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericColumn.js","sources":["../src/NumericColumn.tsx"],"sourcesContent":["import {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellValueProps, GridColumn, GridColumnProps } from \"./GridColumn\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { useEditorContext } from \"./EditorContext\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport numericColumnCss from \"./NumericColumn.css\";\n\nexport interface NumericColumnProps<T> extends GridColumnProps<T> {\n  precision: number;\n}\n\nfunction isNumber(value: any): value is number {\n  return typeof value === \"number\" && Number.isFinite(value);\n}\n\nexport function NumericCellValue<T>(props: GridCellValueProps<T>) {\n  const { column, value } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-numeric-column\",\n    css: numericColumnCss,\n    window: targetWindow,\n  });\n\n  const columnProps = column.info.props as NumericColumnProps<T>;\n  const { precision } = columnProps;\n  const text = isNumber(value) ? value.toFixed(precision) : \"\";\n  return <div className=\"saltGridNumericCellValue\">{text}</div>;\n}\n\nexport interface NumericEditorProps<T> {\n  row?: GridRowModel<T>;\n  column?: GridColumnModel<T>;\n  children?: ReactNode;\n}\n\nexport function NumericCellEditor<T>(props: NumericEditorProps<T>) {\n  const { column, row } = props;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { endEditMode, cancelEditMode, initialText } = useEditorContext();\n\n  const [editorText, setEditorText] = useState<string>(\n    initialText != null ? initialText : column!.info.props.getValue!(row!.data)\n  );\n\n  const initialSelectionRef = useRef(!!initialText);\n\n  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setEditorText(e.target.value);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === \"Enter\") {\n      endEditMode(editorText);\n      return;\n    }\n    if (event.key === \"Escape\") {\n      cancelEditMode();\n      return;\n    }\n    if (event.key === \"Tab\") {\n      endEditMode(editorText);\n      event.preventDefault();\n      return;\n    }\n    event.stopPropagation();\n  };\n\n  useEffect(() => {\n    if (inputRef.current && !initialSelectionRef.current) {\n      inputRef.current.select();\n      initialSelectionRef.current = true;\n    }\n  }, [inputRef.current]);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    const focusOut = (event: FocusEvent) => {\n      if (!input?.contains(event.target as Node)) {\n        endEditMode(editorText);\n      }\n    };\n\n    // This uses the capture phase to detect clicks outside the input to avoid a race condition where the component gets unmounted when edit mode ends.\n    document?.addEventListener(\"mousedown\", focusOut, true);\n\n    return () => {\n      document?.removeEventListener(\"mousedown\", focusOut, true);\n    };\n  }, [endEditMode, editorText]);\n\n  return (\n    <Cell separator={column?.separator} className=\"saltGridNumericCellEditor\">\n      <div className=\"saltGridNumericCellEditor-inputContainer\">\n        <input\n          ref={inputRef}\n          data-testid=\"grid-cell-editor-input\"\n          autoFocus={true}\n          value={editorText}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </div>\n      <CornerTag />\n    </Cell>\n  );\n}\n\nexport function NumericColumn<T>(props: NumericColumnProps<T>) {\n  return (\n    <GridColumn\n      {...props}\n      align={\"right\"}\n      cellValueComponent={NumericCellValue}\n    >\n      {props.children}\n    </GridColumn>\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","numericColumnCss","jsx","useRef","useEditorContext","useState","useEffect","jsxs","Cell","CornerTag","GridColumn"],"mappings":"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"}

package/dist-cjs/{packages/grid/src/RowSelectionCheckboxCellValue.js → RowSelectionCheckboxCellValue.js}

@@ -4,12 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
 var SelectionContext = require('./SelectionContext.js');
-require('./CheckboxCell.css.js');
 var CursorContext = require('./CursorContext.js');
+var CheckboxCell = require('./CheckboxCell.css.js');
 
 function RowSelectionCheckboxCellValue(props) {
   const { row, column, isFocused } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-checkbox-cell",
+    css: CheckboxCell,
+    window: targetWindow
+  });
   const { selRowIdxs, selectRows } = SelectionContext.useSelectionContext();
   const { moveCursor } = CursorContext.useCursorContext();
   const isSelected = selRowIdxs.has(row.index);

package/dist-cjs/RowSelectionCheckboxCellValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowSelectionCheckboxCellValue.js","sources":["../src/RowSelectionCheckboxCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport { MouseEventHandler } from \"react\";\nimport { useCursorContext } from \"./CursorContext\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nexport function RowSelectionCheckboxCellValue<T>(props: GridCellValueProps<T>) {\n  const { row, column, isFocused } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-cell\",\n    css: checkboxCellCss,\n    window: targetWindow,\n  });\n\n  const { selRowIdxs, selectRows } = useSelectionContext();\n  const { moveCursor } = useCursorContext();\n\n  const isSelected = selRowIdxs.has(row.index);\n\n  const onMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n    selectRows({ rowIndex: row.index, incremental: true });\n    moveCursor(\"body\", row.index, column.index);\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  return (\n    <div className=\"saltGridCheckboxContainer\" onMouseDown={onMouseDown}>\n      <Checkbox\n        data-testid=\"grid-row-selection-checkbox\"\n        inputProps={{\n          \"aria-label\": \"Select Row\",\n          tabIndex: isFocused ? 0 : -1,\n        }}\n        checked={isSelected}\n      />\n    </div>\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","checkboxCellCss","useSelectionContext","useCursorContext","jsx","Checkbox"],"mappings":";;;;;;;;;;;;AAWO,SAAS,8BAAiC,KAA8B,EAAA;AAC7E,EAAA,MAAM,EAAE,GAAA,EAAK,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEnC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAIC,oCAAoB,EAAA,CAAA;AACvD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAExC,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAE3C,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,UAAA,CAAW,EAAE,QAAU,EAAA,GAAA,CAAI,KAAO,EAAA,WAAA,EAAa,MAAM,CAAA,CAAA;AACrD,IAAA,UAAA,CAAW,MAAQ,EAAA,GAAA,CAAI,KAAO,EAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AAC1C,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,2BAAA;AAAA,IAA4B,WAAA;AAAA,IACzC,QAAC,kBAAAA,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,aAAY,EAAA,6BAAA;AAAA,MACZ,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,YAAA;AAAA,QACd,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,OAAS,EAAA,UAAA;AAAA,KACX,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/{packages/grid/src/RowSelectionCheckboxHeaderCellValue.js → RowSelectionCheckboxHeaderCellValue.js}

@@ -3,12 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var SelectionContext = require('./SelectionContext.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
 var core = require('@salt-ds/core');
-require('./CheckboxCell.css.js');
+var SelectionContext = require('./SelectionContext.js');
+var CheckboxCell = require('./CheckboxCell.css.js');
 
 function RowSelectionCheckboxHeaderCellValue(props) {
   const { isFocused } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-checkbox-cell",
+    css: CheckboxCell,
+    window: targetWindow
+  });
   const { selectAll, unselectAll, isAllSelected, isAnySelected } = SelectionContext.useSelectionContext();
   const onMousedown = (event) => {
     if (isAllSelected) {

package/dist-cjs/RowSelectionCheckboxHeaderCellValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowSelectionCheckboxHeaderCellValue.js","sources":["../src/RowSelectionCheckboxHeaderCellValue.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Checkbox } from \"@salt-ds/core\";\n\nimport { useSelectionContext } from \"./SelectionContext\";\nimport { GridHeaderValueProps } from \"./GridColumn\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nexport function RowSelectionCheckboxHeaderCellValue<T>(\n  props: GridHeaderValueProps<T>\n) {\n  const { isFocused } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-cell\",\n    css: checkboxCellCss,\n    window: targetWindow,\n  });\n\n  const { selectAll, unselectAll, isAllSelected, isAnySelected } =\n    useSelectionContext();\n\n  const onMousedown: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (isAllSelected) {\n      unselectAll();\n    } else {\n      selectAll();\n    }\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n    if (event.key === \" \") {\n      if (isAllSelected) {\n        unselectAll();\n      } else {\n        selectAll();\n      }\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <div\n      onMouseDown={onMousedown}\n      className=\"saltGridCheckboxContainer\"\n      onKeyDown={onKeyDown}\n    >\n      <Checkbox\n        data-testid=\"grid-row-select-all-checkbox\"\n        inputProps={{\n          \"aria-label\": \"Select All\",\n          tabIndex: isFocused ? 0 : -1,\n        }}\n        checked={isAllSelected}\n        indeterminate={!isAllSelected && isAnySelected}\n      />\n    </div>\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","checkboxCellCss","useSelectionContext","jsx","Checkbox"],"mappings":";;;;;;;;;;;AAUO,SAAS,oCACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA,CAAA;AAEtB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,aAAe,EAAA,aAAA,KAC7CC,oCAAoB,EAAA,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,IAAI,aAAe,EAAA;AACjB,MAAY,WAAA,EAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAU,SAAA,EAAA,CAAA;AAAA,KACZ;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAkD,CAAC,KAAU,KAAA;AACjE,IAAI,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,MAAA,IAAI,aAAe,EAAA;AACjB,QAAY,WAAA,EAAA,CAAA;AAAA,OACP,MAAA;AACL,QAAU,SAAA,EAAA,CAAA;AAAA,OACZ;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,KACxB;AAAA,GACF,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,2BAAA;AAAA,IACV,SAAA;AAAA,IAEA,QAAC,kBAAAA,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,aAAY,EAAA,8BAAA;AAAA,MACZ,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,YAAA;AAAA,QACd,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,OAAS,EAAA,aAAA;AAAA,MACT,aAAA,EAAe,CAAC,aAAiB,IAAA,aAAA;AAAA,KACnC,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/{packages/grid/src/RowSelectionRadioCellValue.js → RowSelectionRadioCellValue.js}

@@ -4,11 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
 var SelectionContext = require('./SelectionContext.js');
-require('./CheckboxCell.css.js');
+var CheckboxCell = require('./CheckboxCell.css.js');
 
 function RowSelectionRadioCellValue(props) {
   const { row, isFocused } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-checkbox-cell",
+    css: CheckboxCell,
+    window: targetWindow
+  });
   const { selRowIdxs } = SelectionContext.useSelectionContext();
   const isSelected = selRowIdxs.has(row.index);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {

package/dist-cjs/RowSelectionRadioCellValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowSelectionRadioCellValue.js","sources":["../src/RowSelectionRadioCellValue.tsx"],"sourcesContent":["import { RadioButton } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nexport function RowSelectionRadioCellValue<T>(props: GridCellValueProps<T>) {\n  const { row, isFocused } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-cell\",\n    css: checkboxCellCss,\n    window: targetWindow,\n  });\n\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":["useWindow","useComponentCssInjection","checkboxCellCss","useSelectionContext","jsx","RadioButton"],"mappings":";;;;;;;;;;;AASO,SAAS,2BAA8B,KAA8B,EAAA;AAC1E,EAAM,MAAA,EAAE,GAAK,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE3B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,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,gBAAA,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-cjs/{packages/grid/src/RowSelectionRadioHeaderCell.js → RowSelectionRadioHeaderCell.js}

@@ -3,12 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var HeaderCell = require('./HeaderCell.js');
-var core = require('@salt-ds/core');
-require('./CheckboxCell.css.js');
 var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var HeaderCell = require('./HeaderCell.js');
+var CheckboxCell = require('./CheckboxCell.css.js');
 
 function RowSelectionRadioHeaderCell(props) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-checkbox-cell",
+    css: CheckboxCell,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(HeaderCell.AutoSizeHeaderCell, {
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {

package/dist-cjs/RowSelectionRadioHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowSelectionRadioHeaderCell.js","sources":["../src/RowSelectionRadioHeaderCell.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { RadioButtonIcon } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { AutoSizeHeaderCell } from \"./HeaderCell\";\nimport { HeaderCellProps } from \"./GridColumn\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nexport function RowSelectionRadioHeaderCell<T>(props: HeaderCellProps<T>) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-cell\",\n    css: checkboxCellCss,\n    window: targetWindow,\n  });\n\n  return (\n    <AutoSizeHeaderCell {...props}>\n      <div className={clsx(\"saltGridCheckboxContainer\", \"saltGrid-hidden\")}>\n        <RadioButtonIcon />\n      </div>\n    </AutoSizeHeaderCell>\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","checkboxCellCss","jsx","AutoSizeHeaderCell","clsx","RadioButtonIcon"],"mappings":";;;;;;;;;;;;AAWO,SAAS,4BAA+B,KAA2B,EAAA;AACxE,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAAC,6BAAA,EAAA;AAAA,IAAoB,GAAG,KAAA;AAAA,IACtB,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAWE,SAAK,CAAA,2BAAA,EAA6B,iBAAiB,CAAA;AAAA,MACjE,yCAACC,oBAAgB,EAAA,EAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/{packages/grid/src/TextCellEditor.css.js → TextCellEditor.css.js}

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridTextCellEditor {\n}\n\n.saltGridTextCellEditor-inputContainer {\n  background: var(--grid-background);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-sizing: border-box;\n  border-style: var(--grid-cursor-border-style);\n  border-width: var(--grid-cursor-border-width);\n  border-color: var(--grid-cursor-borderColor);\n  padding: 0;\n}\n\n.saltGridTextCellEditor input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  outline: none;\n  border: none;\n  padding: 0 calc(var(--grid-padding) - 2px);\n  font-size: var(--grid-fontSize);\n  font-family: inherit;\n  background: var(--grid-editableCell-background-active);\n  color: var(--grid-editableCell-color-active);\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=TextCellEditor.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/TextCellEditor.css.js.map

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

package/dist-cjs/{packages/grid/src/TextCellEditor.js → TextCellEditor.js}

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('./TextCellEditor.css.js');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
 var EditorContext = require('./EditorContext.js');
 var CornerTag = require('./CornerTag.js');
 var Cell = require('./internal/Cell.js');
@@ -24,12 +25,18 @@ require('./NumberRange.js');
 require('./internal/TopLeftPart.js');
 require('./internal/TopPart.js');
 require('./internal/TopRightPart.js');
-require('./internal/FakeCell.css.js');
 require('./internal/DefaultCellValue.js');
+var TextCellEditor$1 = require('./TextCellEditor.css.js');
 
 const withBaseName = core.makePrefixer("saltGridTextCellEditor");
 function TextCellEditor(props) {
   const { column, row } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-text-cell-editor",
+    css: TextCellEditor$1,
+    window: targetWindow
+  });
   const inputRef = react.useRef(null);
   const { endEditMode, cancelEditMode, initialText } = EditorContext.useEditorContext();
   const [editorText, setEditorText] = react.useState(

package/dist-cjs/TextCellEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextCellEditor.js","sources":["../src/TextCellEditor.tsx"],"sourcesContent":["import {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport textCellEditorCss from \"./TextCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTextCellEditor\");\n\nexport interface TextCellEditorProps<T> {\n  row?: GridRowModel<T>;\n  column?: GridColumnModel<T>;\n}\n\nexport function TextCellEditor<T>(props: TextCellEditorProps<T>) {\n  const { column, row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text-cell-editor\",\n    css: textCellEditorCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { endEditMode, cancelEditMode, initialText } = useEditorContext();\n\n  const [editorText, setEditorText] = useState<string>(\n    initialText != null ? initialText : column!.info.props.getValue!(row!.data)\n  );\n\n  const initialSelectionRef = useRef(!!initialText);\n\n  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setEditorText(e.target.value);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === \"Enter\") {\n      endEditMode(editorText);\n      return;\n    }\n    if (event.key === \"Escape\") {\n      cancelEditMode();\n      return;\n    }\n    if (event.key === \"Tab\") {\n      endEditMode(editorText);\n      event.preventDefault();\n      return;\n    }\n    event.stopPropagation();\n  };\n\n  useEffect(() => {\n    if (inputRef.current && !initialSelectionRef.current) {\n      inputRef.current.select();\n      initialSelectionRef.current = true;\n    }\n  }, [inputRef.current]);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    const focusOut = (event: FocusEvent) => {\n      if (!input?.contains(event.target as Node)) {\n        endEditMode(editorText);\n      }\n    };\n\n    // This uses the capture phase to detect clicks outside the input to avoid a race condition where the component gets unmounted when edit mode ends.\n    document?.addEventListener(\"mousedown\", focusOut, true);\n\n    return () => {\n      document?.removeEventListener(\"mousedown\", focusOut, true);\n    };\n  }, [endEditMode, editorText]);\n\n  return (\n    <Cell separator={column?.separator} className={withBaseName()}>\n      <div className={withBaseName(\"inputContainer\")}>\n        <input\n          data-testid=\"grid-cell-editor-input\"\n          ref={inputRef}\n          autoFocus={true}\n          value={editorText}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n      </div>\n      <CornerTag />\n    </Cell>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","textCellEditorCss","useRef","useEditorContext","useState","useEffect","jsxs","Cell","jsx","CornerTag"],"mappings":"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"}

package/dist-cjs/{packages/grid/src/internal → internal}/Cell.css.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridCell {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n\n  white-space: nowrap;\n  position: relative;\n  font-size: var(--grid-fontSize);\n  font-weight: normal;\n\n  outline: 0;\n}\n\n.saltGridCell-selected {\n  background: var(--grid-cell-background-selected);\n}\n\n.saltGridCell-rowSeparator {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background-color: var(--grid-row-borderColor);\n}\n\n.saltGridCell-topSeparator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 1px;\n  background-color: transparent;\n  display: none;\n}\n\n.saltGridTableRow-first .saltGridCell-topSeparator {\n  display: unset;\n}\n\n.saltGridCell-columnSeparator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 1px;\n  background-color: var(--grid-row-background);\n}\n\n.saltGrid-columnSeparators .saltGridCell-regularSeparator .saltGridCell-columnSeparator {\n  background-color: var(--grid-columnSeparator-color);\n}\n\n.saltGrid-columnSeparators .saltGridCell-pinnedSeparator .saltGridCell-columnSeparator {\n  background-color: var(--grid-columnSeparator-color);\n}\n\n.saltGrid-pinnedSeparators .saltGridCell-pinnedSeparator .saltGridCell-columnSeparator {\n  background-color: var(--grid-pinnedSeparator-color);\n}\n\n.saltGridTableRow-selected.saltGridTableRow-first .saltGridCell-topSeparator {\n  background-color: var(--grid-row-borderColor);\n}\n\n.saltGridCell-body {\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 1px;\n  left: 0;\n  background: var(--grid-row-background);\n  border-right: solid 1px transparent;\n}\n\n.saltGridTableRow-first .saltGridCell-body {\n  top: 1px;\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=Cell.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/internal/Cell.css.js.map

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

package/dist-cjs/{packages/grid/src/internal → internal}/Cell.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
 var react = require('react');
 var clsx = require('clsx');
-require('./Cell.css.js');
+var Cell$1 = require('./Cell.css.js');
 
 const withBaseName = core.makePrefixer("saltGridCell");
 const Cell = react.forwardRef(
@@ -19,6 +21,12 @@ const Cell = react.forwardRef(
       className,
       ...tdProps
     } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-cell",
+      css: Cell$1,
+      window: targetWindow
+    });
     return /* @__PURE__ */ jsxRuntime.jsxs("td", {
       ref,
       className: clsx.clsx(

package/dist-cjs/internal/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../src/internal/Cell.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { ColumnSeparatorType } from \"../Grid\";\n\nimport cellCss from \"./Cell.css\";\n\nexport interface CellProps extends HTMLAttributes<HTMLTableCellElement> {\n  isSelected?: boolean;\n  isEditable?: boolean;\n  separator?: ColumnSeparatorType;\n}\n\nconst withBaseName = makePrefixer(\"saltGridCell\");\n\nexport const Cell = forwardRef<HTMLTableCellElement, CellProps>(\n  function CellFrame(props, ref) {\n    const {\n      children,\n      separator,\n      isSelected,\n      isEditable,\n      className,\n      ...tdProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-cell\",\n      css: cellCss,\n      window: targetWindow,\n    });\n\n    return (\n      <td\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"selected\")]: isSelected,\n            [withBaseName(\"editable\")]: isEditable,\n            [withBaseName(\"regularSeparator\")]:\n              separator === \"regular\" || separator === \"groupEdge\",\n            [withBaseName(\"pinnedSeparator\")]: separator === \"pinned\",\n          },\n          className\n        )}\n        {...tdProps}\n      >\n        <div className={withBaseName(\"body\")}>{props.children}</div>\n        <div className={withBaseName(\"columnSeparator\")} />\n        <div className={withBaseName(\"rowSeparator\")} />\n        <div className={withBaseName(\"topSeparator\")} />\n      </td>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","cellCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAAS,SAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACG,GAAA,OAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,eAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,kBAAkB,CAC9B,GAAA,SAAA,KAAc,aAAa,SAAc,KAAA,WAAA;AAAA,UAC3C,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,SAAc,KAAA,QAAA;AAAA,SACnD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,OAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAAI,QAAM,EAAA,KAAA,CAAA,QAAA;AAAA,SAAS,CAAA;AAAA,wBACrDA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,SAAG,CAAA;AAAA,wBAChDA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,SAAG,CAAA;AAAA,wBAC7CA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,SAAG,CAAA;AAAA,OAAA;AAAA,KAChD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/{packages/grid/src/internal → internal}/CellMeasure.css.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridCellMeasure {\n  position: fixed;\n  top: -1000px;\n  left: 0;\n}\n\n.saltGridCellMeasure table {\n}\n\n.saltGridCellMeasure tr {\n  height: var(--grid-row-height);\n}\n\n.saltGridCellMeasure th {\n  box-sizing: border-box;\n  overflow: hidden;\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=CellMeasure.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/internal/CellMeasure.css.js.map

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

package/dist-cjs/{packages/grid/src/internal → internal}/CellMeasure.js

@@ -3,12 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-require('./CellMeasure.css.js');
 var react = require('react');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var CellMeasure$1 = require('./CellMeasure.css.js');
 
 const withBaseName = core.makePrefixer("saltGridCellMeasure");
 function CellMeasure(props) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-cell-measure",
+    css: CellMeasure$1,
+    window: targetWindow
+  });
   const rowRef = react.useRef(null);
   const heightRef = react.useRef(-1);
   const { setRowHeight } = props;

package/dist-cjs/internal/CellMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellMeasure.js","sources":["../src/internal/CellMeasure.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport cellMeasureCss from \"./CellMeasure.css\";\n\nconst withBaseName = makePrefixer(\"saltGridCellMeasure\");\n\nexport interface CellMeasureProps<T> {\n  setRowHeight: (rowHeight: number) => void;\n}\n\n// Renders a cell in invisible location, measures its height and provides it to\n// the grid.\nexport function CellMeasure<T>(props: CellMeasureProps<T>) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-cell-measure\",\n    css: cellMeasureCss,\n    window: targetWindow,\n  });\n\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const heightRef = useRef<number>(-1);\n\n  const { setRowHeight } = props;\n\n  useEffect(() => {\n    if (rowRef.current) {\n      const height = rowRef.current.getBoundingClientRect().height;\n      if (heightRef.current !== height) {\n        // console.log(`Row height changing to ${height}px`);\n        heightRef.current = height;\n        setRowHeight(height);\n      }\n    }\n  });\n\n  return (\n    <div className={withBaseName()}>\n      <table aria-hidden>\n        <thead>\n          <tr ref={rowRef}>\n            <th>Invisible Cell</th>\n          </tr>\n        </thead>\n      </table>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","cellMeasureCss","useRef","useEffect","jsx"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAQhD,SAAS,YAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,MAAA,GAASC,aAA4B,IAAI,CAAA,CAAA;AAC/C,EAAM,MAAA,SAAA,GAAYA,aAAe,CAAE,CAAA,CAAA,CAAA;AAEnC,EAAM,MAAA,EAAE,cAAiB,GAAA,KAAA,CAAA;AAEzB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAA,MAAM,MAAS,GAAA,MAAA,CAAO,OAAQ,CAAA,qBAAA,EAAwB,CAAA,MAAA,CAAA;AACtD,MAAI,IAAA,SAAA,CAAU,YAAY,MAAQ,EAAA;AAEhC,QAAA,SAAA,CAAU,OAAU,GAAA,MAAA,CAAA;AACpB,QAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAC3B,QAAC,kBAAAA,cAAA,CAAA,OAAA,EAAA;AAAA,MAAM,aAAW,EAAA,IAAA;AAAA,MAChB,QAAC,kBAAAA,cAAA,CAAA,OAAA,EAAA;AAAA,QACC,QAAC,kBAAAA,cAAA,CAAA,IAAA,EAAA;AAAA,UAAG,GAAK,EAAA,MAAA;AAAA,UACP,QAAC,kBAAAA,cAAA,CAAA,IAAA,EAAA;AAAA,YAAG,QAAA,EAAA,gBAAA;AAAA,WAAc,CAAA;AAAA,SACpB,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/{packages/grid/src/internal → internal}/ColumnDropTarget.css.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridColumnDropTarget {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  border: var(--grid-columnDropTarget-color);\n  border-width: 0 1px 0 1px;\n  border-style: solid;\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=ColumnDropTarget.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/internal/ColumnDropTarget.css.js.map

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

package/dist-cjs/{packages/grid/src/internal → internal}/ColumnDropTarget.js

@@ -4,11 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('./ColumnDropTarget.css.js');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ColumnDropTarget$1 = require('./ColumnDropTarget.css.js');
 
 const withBaseName = core.makePrefixer("saltGridColumnDropTarget");
 function ColumnDropTarget(props) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-column-drop-target",
+    css: ColumnDropTarget$1,
+    window: targetWindow
+  });
   const { x = 0 } = props;
   const style = react.useMemo(() => {
     return {

package/dist-cjs/internal/ColumnDropTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnDropTarget.js","sources":["../src/internal/ColumnDropTarget.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport columDropTargetCss from \"./ColumnDropTarget.css\";\n\nconst withBaseName = makePrefixer(\"saltGridColumnDropTarget\");\n\nexport interface ColumnDropTargetProps {\n  x?: number;\n}\n\n// When the user drags a column, this component is used to show the potential\n// drop target. Experimental feature. No UX yet.\nexport function ColumnDropTarget(props: ColumnDropTargetProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-column-drop-target\",\n    css: columDropTargetCss,\n    window: targetWindow,\n  });\n\n  const { x = 0 } = props;\n\n  const style = useMemo(() => {\n    return {\n      left: `${x - 2}px`,\n    };\n  }, [x]);\n\n  if (props.x === undefined) {\n    return null;\n  }\n\n  return <div className={withBaseName()} style={style} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","columDropTargetCss","useMemo","jsx"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAQrD,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,CAAI,GAAA,CAAA,EAAM,GAAA,KAAA,CAAA;AAElB,EAAM,MAAA,KAAA,GAAQC,cAAQ,MAAM;AAC1B,IAAO,OAAA;AAAA,MACL,IAAA,EAAM,GAAG,CAAI,GAAA,CAAA,CAAA,EAAA,CAAA;AAAA,KACf,CAAA;AAAA,GACF,EAAG,CAAC,CAAC,CAAC,CAAA,CAAA;AAEN,EAAI,IAAA,KAAA,CAAM,MAAM,KAAW,CAAA,EAAA;AACzB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,GAAc,CAAA,CAAA;AACvD;;;;"}

package/dist-cjs/{packages/grid/src/internal → internal}/ColumnGhost.css.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridColumnGhost {\n  background: var(--grid-background);\n  position: absolute;\n  border: solid var(--grid-columnGhost-borderWidth) var(--grid-columnGhost-borderColor);\n  box-shadow: var(--grid-columnGhost-boxShadow);\n  opacity: 0.85;\n}\n\n.saltGridColumnGhost table {\n  table-layout: fixed;\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=ColumnGhost.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/internal/ColumnGhost.css.js.map

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

package/dist-cjs/{packages/grid/src/internal → internal}/ColumnGhost.js

@@ -3,14 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-require('./ColumnGhost.css.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var core = require('@salt-ds/core');
 var TableColGroup = require('./TableColGroup.js');
 var HeaderRow = require('./HeaderRow.js');
 var TableBody = require('./TableBody.js');
-var core = require('@salt-ds/core');
+var ColumnGhost$1 = require('./ColumnGhost.css.js');
 
 const withBaseName = core.makePrefixer("saltGridColumnGhost");
 function ColumnGhost(props) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-column-ghost",
+    css: ColumnGhost$1,
+    window: targetWindow
+  });
   if (!props.dragState) {
     return null;
   }

package/dist-cjs/internal/ColumnGhost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnGhost.js","sources":["../src/internal/ColumnGhost.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\n\nimport { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { TableBody } from \"./TableBody\";\nimport { ColumnDragState } from \"./gridHooks\";\n\nimport columnGhostCss from \"./ColumnGhost.css\";\n\nconst withBaseName = makePrefixer(\"saltGridColumnGhost\");\n\nexport interface ColumnGhostProps<T> {\n  dragState?: ColumnDragState;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  zebra?: boolean;\n}\n\n// When the user drags a column this component renders a partially transparent\n// copy of the dragged column.\nexport function ColumnGhost<T = any>(props: ColumnGhostProps<T>) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-column-ghost\",\n    css: columnGhostCss,\n    window: targetWindow,\n  });\n\n  if (!props.dragState) {\n    return null;\n  }\n\n  const { columnIndex, x, y } = props.dragState;\n  const { columns, rows, zebra } = props;\n  const movingColumn = columns[columnIndex];\n\n  const style: CSSProperties = {\n    left: x,\n    top: y,\n  };\n\n  return (\n    <div className={withBaseName()} style={style}>\n      <table aria-hidden>\n        <TableColGroup columns={[movingColumn]} />\n        <thead>\n          <HeaderRow columns={[movingColumn]} />\n        </thead>\n        <TableBody\n          columns={[movingColumn]}\n          rows={rows}\n          setHoverRowKey={() => {}}\n          zebra={zebra}\n        />\n      </table>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","columnGhostCss","jsx","jsxs","TableColGroup","HeaderRow","TableBody"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAWhD,SAAS,YAAqB,KAA4B,EAAA;AAC/D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,CAAC,MAAM,SAAW,EAAA;AACpB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,EAAE,WAAA,EAAa,CAAG,EAAA,CAAA,KAAM,KAAM,CAAA,SAAA,CAAA;AACpC,EAAA,MAAM,EAAE,OAAA,EAAS,IAAM,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACjC,EAAA,MAAM,eAAe,OAAQ,CAAA,WAAA,CAAA,CAAA;AAE7B,EAAA,MAAM,KAAuB,GAAA;AAAA,IAC3B,IAAM,EAAA,CAAA;AAAA,IACN,GAAK,EAAA,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC9B,QAAC,kBAAAC,eAAA,CAAA,OAAA,EAAA;AAAA,MAAM,aAAW,EAAA,IAAA;AAAA,MAChB,QAAA,EAAA;AAAA,wBAACD,cAAA,CAAAE,2BAAA,EAAA;AAAA,UAAc,OAAA,EAAS,CAAC,YAAY,CAAA;AAAA,SAAG,CAAA;AAAA,wBACvCF,cAAA,CAAA,OAAA,EAAA;AAAA,UACC,QAAC,kBAAAA,cAAA,CAAAG,mBAAA,EAAA;AAAA,YAAU,OAAA,EAAS,CAAC,YAAY,CAAA;AAAA,WAAG,CAAA;AAAA,SACtC,CAAA;AAAA,wBACCH,cAAA,CAAAI,mBAAA,EAAA;AAAA,UACC,OAAA,EAAS,CAAC,YAAY,CAAA;AAAA,UACtB,IAAA;AAAA,UACA,gBAAgB,MAAM;AAAA,WAAC;AAAA,UACvB,KAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/{packages/grid/src/internal → internal}/Cursor.css.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridCursor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n}\n\n:focus .saltGridCursor {\n  border-style: var(--grid-cursor-border-style);\n  border-width: var(--grid-cursor-border-width);\n  border-color: var(--grid-cursor-borderColor);\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=Cursor.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/internal/Cursor.css.js.map

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

package/dist-cjs/{packages/grid/src/internal → internal}/Cursor.js

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-require('./Cursor.css.js');
 var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Cursor$1 = require('./Cursor.css.js');
 
 const withBaseName = core.makePrefixer("saltGridCursor");
 function Cursor(props) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-cursor",
+    css: Cursor$1,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: withBaseName()
   });

package/dist-cjs/internal/Cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cursor.js","sources":["../src/internal/Cursor.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport cursorCss from \"./Cursor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridCursor\");\n\nexport interface CursorProps {}\n\n// This is probably obsolete. Cursor is rendered using cell borders now.\nexport function Cursor(props: CursorProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-cursor\",\n    css: cursorCss,\n    window: targetWindow,\n  });\n\n  return <div className={withBaseName()} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","cursorCss","jsx"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAK3C,SAAS,OAAO,KAAoB,EAAA;AACzC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AACzC;;;;"}

package/dist-cjs/{packages/grid/src/internal → internal}/DefaultCellValue.css.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
 var css_248z = ".saltGridDefaultCellValue {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: var(--grid-cell-padding);\n}\n\n.saltGridDefaultCellValue-alignRight {\n  text-align: right;\n}\n";
-styleInject_es(css_248z);
 
 module.exports = css_248z;
 //# sourceMappingURL=DefaultCellValue.css.js.map

package/{dist-es/packages/grid/src → dist-cjs}/internal/DefaultCellValue.css.js.map

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

package/dist-cjs/{packages/grid/src/internal → internal}/DefaultCellValue.js

@@ -5,11 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
-require('./DefaultCellValue.css.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var DefaultCellValue$1 = require('./DefaultCellValue.css.js');
 
 const withBaseName = core.makePrefixer("saltGridDefaultCellValue");
 function DefaultCellValue(props) {
   const { value } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-default-cell-value",
+    css: DefaultCellValue$1,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: clsx.clsx(withBaseName(), {
       [withBaseName("alignRight")]: props.column.info.props.align === "right"

package/dist-cjs/internal/DefaultCellValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultCellValue.js","sources":["../src/internal/DefaultCellValue.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellValueProps } from \"../GridColumn\";\n\nimport defaultCellValueCss from \"./DefaultCellValue.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDefaultCellValue\");\n\n// Default component for cell value wrappers. Rendered as a child of cell\n// components (<td>s)\nexport function DefaultCellValue<T>(props: GridCellValueProps<T>) {\n  const { value } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-default-cell-value\",\n    css: defaultCellValueCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), {\n        [withBaseName(\"alignRight\")]: props.column.info.props.align === \"right\",\n      })}\n    >\n      {value as ReactNode}\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","defaultCellValueCss","jsx","clsx"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA,CAAA;AAIrD,SAAS,iBAAoB,KAA8B,EAAA;AAChE,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,aAAa,YAAY,CAAA,GAAI,MAAM,MAAO,CAAA,IAAA,CAAK,MAAM,KAAU,KAAA,OAAA;AAAA,KACjE,CAAA;AAAA,IAEA,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}