@salt-ds/data-grid 0.0.0-snapshot-20230920133053 → 0.0.0-snapshot-20240620102958

package/dist-cjs/BaseCell.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var core = require('@salt-ds/core');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
-var Cell = require('./internal/Cell.js');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var CellFrame = require('./CellFrame.js');
+var CornerTag = require('./CornerTag.js');
 require('./internal/CellMeasure.js');
 var Cursor = require('./internal/Cursor.js');
 require('./internal/GroupHeaderRow.js');
@@ -26,7 +27,6 @@ require('./internal/TopLeftPart.js');
 require('./internal/TopPart.js');
 require('./internal/TopRightPart.js');
 require('./internal/DefaultCellValue.js');
-var CornerTag = require('./CornerTag.js');
 var CellStatusIcons = require('./internal/CellStatusIcons.js');
 var BaseCell$1 = require('./BaseCell.css.js');
 
@@ -65,7 +65,7 @@ function BaseCell(props) {
   const hasValidation = !!validationStatus;
   const hasValidationMessage = !!validationMessage || hasValidation;
   const validationMessageId = `${cellId}-statusMessage`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Cell.Cell, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CellFrame.CellFrame, {
     ref,
     id: cellId,
     "data-row-index": row.index,

package/dist-cjs/BaseCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCell.js","sources":["../src/BaseCell.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellProps } from \"./GridColumn\";\nimport { GridColumnModel } from \"./Grid\";\nimport { Cell, Cursor, useFocusableContent } from \"./internal\";\nimport { CornerTag } from \"./CornerTag\";\nimport {\n  CellErrorIcon,\n  CellSuccessIcon,\n  CellWarningIcon,\n} from \"./internal/CellStatusIcons\";\n\nimport baseCellCss from \"./BaseCell.css\";\n\nconst withBaseName = makePrefixer(\"saltGridBaseCell\");\n\nexport function getCellId<T>(rowKey: string, column: GridColumnModel<T>) {\n  return `R${rowKey}C${column.info.props.id}`;\n}\n\nconst icons = {\n  warning: CellWarningIcon,\n  error: CellErrorIcon,\n  success: CellSuccessIcon,\n};\n\n// Default component for grid cells. Provides selection, on-hover highlighting,\n// cursor etc.\nexport function BaseCell<T>(props: GridCellProps<T>) {\n  const {\n    column,\n    className,\n    row,\n    style,\n    isFocused,\n    isSelected,\n    isEditable,\n    children,\n    validationStatus,\n    validationMessage,\n    validationType = \"light\",\n    align,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-base-cell\",\n    css: baseCellCss,\n    window: targetWindow,\n  });\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableCellElement>();\n  const cellId = getCellId(row.key, column);\n  const hasValidation = !!validationStatus;\n  const hasValidationMessage = !!validationMessage || hasValidation;\n  const validationMessageId = `${cellId}-statusMessage`;\n  return (\n    <Cell\n      ref={ref}\n      id={cellId}\n      data-row-index={row.index}\n      data-column-index={column.index}\n      data-testid={isFocused ? \"grid-cell-focused\" : undefined}\n      // aria-colindex uses one-based array indexing\n      aria-colindex={column.index + 1}\n      role=\"gridcell\"\n      separator={column.separator}\n      isSelected={isSelected}\n      isEditable={isEditable}\n      className={clsx(className, {\n        [withBaseName(\"hasValidation\")]: hasValidation,\n        [withBaseName(`status-${validationStatus as string}`)]:\n          validationStatus,\n      })}\n      style={style}\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n      aria-invalid={validationStatus === \"error\" || undefined}\n      aria-describedby={hasValidationMessage ? validationMessageId : undefined}\n    >\n      {hasValidationMessage ? (\n        <div\n          id={validationMessageId}\n          className=\"salt-visuallyHidden\"\n          aria-hidden\n          role=\"status\"\n        >\n          {validationMessage\n            ? validationMessage\n            : `Cell validation state is ${validationStatus as string}`}\n        </div>\n      ) : null}\n      <div className={clsx(withBaseName(\"valueContainer\"))}>{children}</div>\n      {hasValidation && validationType === \"strong\" ? (\n        <div\n          className={clsx(withBaseName(\"statusContainer\"), {\n            [withBaseName(`statusContainer-align-${align as string}`)]: align,\n          })}\n        >\n          {icons[validationStatus]}\n        </div>\n      ) : null}\n      {isFocused && isEditable && <CornerTag focusOnly={true} />}\n      {isFocused && !isFocusableContent && <Cursor />}\n    </Cell>\n  );\n}\n"],"names":["makePrefixer","CellWarningIcon","CellErrorIcon","CellSuccessIcon","useWindow","useComponentCssInjection","baseCellCss","useFocusableContent","jsxs","Cell","clsx","jsx","CornerTag","Cursor"],"mappings":"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"}
+{"version":3,"file":"BaseCell.js","sources":["../src/BaseCell.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { GridColumnModel } from \"./Grid\";\nimport { GridCellProps } from \"./GridColumn\";\nimport { Cursor, useFocusableContent } from \"./internal\";\nimport {\n  CellErrorIcon,\n  CellSuccessIcon,\n  CellWarningIcon,\n} from \"./internal/CellStatusIcons\";\n\nimport baseCellCss from \"./BaseCell.css\";\n\nconst withBaseName = makePrefixer(\"saltGridBaseCell\");\n\nexport function getCellId<T>(rowKey: string, column: GridColumnModel<T>) {\n  return `R${rowKey}C${column.info.props.id}`;\n}\n\nconst icons = {\n  warning: CellWarningIcon,\n  error: CellErrorIcon,\n  success: CellSuccessIcon,\n};\n\n// Default component for grid cells. Provides selection, on-hover highlighting,\n// cursor etc.\nexport function BaseCell<T>(props: GridCellProps<T>) {\n  const {\n    column,\n    className,\n    row,\n    style,\n    isFocused,\n    isSelected,\n    isEditable,\n    children,\n    validationStatus,\n    validationMessage,\n    validationType = \"light\",\n    align,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-base-cell\",\n    css: baseCellCss,\n    window: targetWindow,\n  });\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableCellElement>();\n  const cellId = getCellId(row.key, column);\n  const hasValidation = !!validationStatus;\n  const hasValidationMessage = !!validationMessage || hasValidation;\n  const validationMessageId = `${cellId}-statusMessage`;\n  return (\n    <CellFrame\n      ref={ref}\n      id={cellId}\n      data-row-index={row.index}\n      data-column-index={column.index}\n      data-testid={isFocused ? \"grid-cell-focused\" : undefined}\n      // aria-colindex uses one-based array indexing\n      aria-colindex={column.index + 1}\n      role=\"gridcell\"\n      separator={column.separator}\n      isSelected={isSelected}\n      isEditable={isEditable}\n      className={clsx(className, {\n        [withBaseName(\"hasValidation\")]: hasValidation,\n        [withBaseName(`status-${validationStatus as string}`)]:\n          validationStatus,\n      })}\n      style={style}\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n      aria-invalid={validationStatus === \"error\" || undefined}\n      aria-describedby={hasValidationMessage ? validationMessageId : undefined}\n    >\n      {hasValidationMessage ? (\n        <div\n          id={validationMessageId}\n          className=\"salt-visuallyHidden\"\n          aria-hidden\n          role=\"status\"\n        >\n          {validationMessage\n            ? validationMessage\n            : `Cell validation state is ${validationStatus as string}`}\n        </div>\n      ) : null}\n      <div className={clsx(withBaseName(\"valueContainer\"))}>{children}</div>\n      {hasValidation && validationType === \"strong\" ? (\n        <div\n          className={clsx(withBaseName(\"statusContainer\"), {\n            [withBaseName(`statusContainer-align-${align as string}`)]: align,\n          })}\n        >\n          {icons[validationStatus]}\n        </div>\n      ) : null}\n      {isFocused && isEditable && <CornerTag focusOnly={true} />}\n      {isFocused && !isFocusableContent && <Cursor />}\n    </CellFrame>\n  );\n}\n"],"names":["makePrefixer","CellWarningIcon","CellErrorIcon","CellSuccessIcon","useWindow","useComponentCssInjection","baseCellCss","useFocusableContent","jsxs","CellFrame","clsx","jsx","CornerTag","Cursor"],"mappings":"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"}

package/dist-cjs/{internal/Cell.css.js → CellFrame.css.js}

@@ -3,4 +3,4 @@
 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";
 
 module.exports = css_248z;
-//# sourceMappingURL=Cell.css.js.map
+//# sourceMappingURL=CellFrame.css.js.map

package/dist-cjs/CellFrame.css.js.map

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

package/dist-cjs/{internal/Cell.js → CellFrame.js}

@@ -8,11 +8,11 @@ var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var react = require('react');
 var clsx = require('clsx');
-var Cell$1 = require('./Cell.css.js');
+var CellFrame$1 = require('./CellFrame.css.js');
 
 const withBaseName = core.makePrefixer("saltGridCell");
-const Cell = react.forwardRef(
-  function CellFrame(props, ref) {
+const CellFrame = react.forwardRef(
+  function CellFrame2(props, ref) {
     const {
       children,
       separator,
@@ -24,7 +24,7 @@ const Cell = react.forwardRef(
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-cell",
-      css: Cell$1,
+      css: CellFrame$1,
       window: targetWindow
     });
     return /* @__PURE__ */ jsxRuntime.jsxs("td", {
@@ -43,7 +43,7 @@ const Cell = react.forwardRef(
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", {
           className: withBaseName("body"),
-          children: props.children
+          children
         }),
         /* @__PURE__ */ jsxRuntime.jsx("div", {
           className: withBaseName("columnSeparator")
@@ -59,5 +59,5 @@ const Cell = react.forwardRef(
   }
 );
 
-exports.Cell = Cell;
-//# sourceMappingURL=Cell.js.map
+exports.CellFrame = CellFrame;
+//# sourceMappingURL=CellFrame.js.map

package/dist-cjs/CellFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellFrame.js","sources":["../src/CellFrame.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 \"./CellFrame.css\";\n\nexport interface CellProps extends HTMLAttributes<HTMLTableCellElement> {\n  isSelected?: boolean;\n  isEditable?: boolean;\n  separator?: ColumnSeparatorType;\n}\n\n// TODO: rename the prefix in next major version to match component name.\nconst withBaseName = makePrefixer(\"saltGridCell\");\n\n/** Cell frame used for creating custom cells and editors */\nexport const CellFrame = 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\")}>{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","CellFrame","useWindow","useComponentCssInjection","cellCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAGzC,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,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,WAAA;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,QAAA;AAAA,SAAS,CAAA;AAAA,wBAC/CA,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/DropdownCellEditor.js

@@ -3,30 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var core = require('@salt-ds/core');
 var lab = require('@salt-ds/lab');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
-var EditorContext = require('./EditorContext.js');
+var window = require('@salt-ds/window');
+var react = require('react');
+var CellFrame = require('./CellFrame.js');
 var CornerTag = require('./CornerTag.js');
-var Cell = require('./internal/Cell.js');
-require('./internal/CellMeasure.js');
-require('./internal/Cursor.js');
-require('./internal/GroupHeaderRow.js');
-require('./internal/HeaderRow.js');
-require('./internal/LeftPart.js');
-require('./internal/MiddlePart.js');
-require('./internal/RightPart.js');
-require('./internal/Scrollable.js');
-require('./internal/TableRow.js');
-require('./SelectionContext.js');
-require('./CursorContext.js');
-require('./NumberRange.js');
-require('./internal/TopLeftPart.js');
-require('./internal/TopPart.js');
-require('./internal/TopRightPart.js');
-require('./internal/DefaultCellValue.js');
+var EditorContext = require('./EditorContext.js');
 var DropdownCellEditor$1 = require('./DropdownCellEditor.css.js');
 
 const withBaseName = core.makePrefixer("saltGridDropdownCellEditor");
@@ -63,7 +47,7 @@ function DropdownCellEditor(props) {
     "data-testid": "grid-cell-editor-trigger",
     children: value
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Cell.Cell, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CellFrame.CellFrame, {
     separator: column == null ? void 0 : column.separator,
     className: withBaseName(),
     children: [

package/dist-cjs/DropdownCellEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectionChangeHandler, SelectHandler } from \"@salt-ds/lab\";\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 dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n  options: ReadonlyArray<string>;\n  // Row and column are provided by the grid. See TableRow.tsx\n  row?: GridRowModel<T>;\n  column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n  const { options, column, row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-cell-editor\",\n    css: dropdownCellEditorCss,\n    window: targetWindow,\n  });\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n\n  const value = column!.info.props.getValue!(row!.data);\n\n  const { endEditMode } = useEditorContext();\n\n  const onSelectionChange: SelectionChangeHandler = (event, item) => {\n    if (item) {\n      endEditMode(item);\n    }\n  };\n\n  const onSelect: SelectHandler = (event, item) => {\n    if (item) {\n      endEditMode(item);\n    }\n  };\n\n  useEffect(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, [triggerRef.current]);\n\n  const triggerComponent = (\n    <div\n      tabIndex={0}\n      ref={triggerRef}\n      className={withBaseName(\"currentValue\")}\n      data-testid=\"grid-cell-editor-trigger\"\n    >\n      {value}\n    </div>\n  );\n\n  return (\n    <Cell separator={column?.separator} className={withBaseName()}>\n      <div className={withBaseName(\"dropdownContainer\")}>\n        {options && options.length > 0 ? (\n          <Dropdown\n            isOpen={true}\n            source={options}\n            defaultSelected={value}\n            onSelectionChange={onSelectionChange}\n            onSelect={onSelect}\n            triggerComponent={triggerComponent}\n            width={column!.info.width! - 5}\n          />\n        ) : (\n          triggerComponent\n        )}\n      </div>\n      <CornerTag />\n    </Cell>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","dropdownCellEditorCss","useRef","useEditorContext","useEffect","jsx","jsxs","Cell","Dropdown","CornerTag"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,4BAA4B,CAAA,CAAA;AASvD,SAAS,mBAAsB,KAAmC,EAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAC,oBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,QAAQ,MAAQ,CAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAU,IAAK,IAAI,CAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEzC,EAAM,MAAA,iBAAA,GAA4C,CAAC,KAAA,EAAO,IAAS,KAAA;AACjE,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAA0B,CAAC,KAAA,EAAO,IAAS,KAAA;AAC/C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,UAAA,CAAW,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,UAAW,CAAA,OAAO,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,mCACHC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,GAAK,EAAA,UAAA;AAAA,IACL,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,IACtC,aAAY,EAAA,0BAAA;AAAA,IAEX,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAGF,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,WAAW,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,SAAA;AAAA,IAAW,WAAW,YAAa,EAAA;AAAA,IAC1D,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,QAC7C,QAAW,EAAA,OAAA,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,mBAC1BA,cAAA,CAAAG,YAAA,EAAA;AAAA,UACC,MAAQ,EAAA,IAAA;AAAA,UACR,MAAQ,EAAA,OAAA;AAAA,UACR,eAAiB,EAAA,KAAA;AAAA,UACjB,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA,EAAO,MAAQ,CAAA,IAAA,CAAK,KAAS,GAAA,CAAA;AAAA,SAC/B,CAEA,GAAA,gBAAA;AAAA,OAEJ,CAAA;AAAA,qCACCC,mBAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectHandler, SelectionChangeHandler } from \"@salt-ds/lab\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useEffect, useRef } from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\n\nimport dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n  options: ReadonlyArray<string>;\n  // Row and column are provided by the grid. See TableRow.tsx\n  row?: GridRowModel<T>;\n  column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n  const { options, column, row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-cell-editor\",\n    css: dropdownCellEditorCss,\n    window: targetWindow,\n  });\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n\n  const value = column!.info.props.getValue!(row!.data);\n\n  const { endEditMode } = useEditorContext();\n\n  const onSelectionChange: SelectionChangeHandler = (event, item) => {\n    if (item) {\n      endEditMode(item);\n    }\n  };\n\n  const onSelect: SelectHandler = (event, item) => {\n    if (item) {\n      endEditMode(item);\n    }\n  };\n\n  useEffect(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, [triggerRef.current]);\n\n  const triggerComponent = (\n    <div\n      tabIndex={0}\n      ref={triggerRef}\n      className={withBaseName(\"currentValue\")}\n      data-testid=\"grid-cell-editor-trigger\"\n    >\n      {value}\n    </div>\n  );\n\n  return (\n    <CellFrame separator={column?.separator} className={withBaseName()}>\n      <div className={withBaseName(\"dropdownContainer\")}>\n        {options && options.length > 0 ? (\n          <Dropdown\n            isOpen={true}\n            source={options}\n            defaultSelected={value}\n            onSelectionChange={onSelectionChange}\n            onSelect={onSelect}\n            triggerComponent={triggerComponent}\n            width={column!.info.width! - 5}\n          />\n        ) : (\n          triggerComponent\n        )}\n      </div>\n      <CornerTag />\n    </CellFrame>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","dropdownCellEditorCss","useRef","useEditorContext","useEffect","jsx","jsxs","CellFrame","Dropdown","CornerTag"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,4BAA4B,CAAA,CAAA;AASvD,SAAS,mBAAsB,KAAmC,EAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAC,oBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,QAAQ,MAAQ,CAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAU,IAAK,IAAI,CAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEzC,EAAM,MAAA,iBAAA,GAA4C,CAAC,KAAA,EAAO,IAAS,KAAA;AACjE,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAA0B,CAAC,KAAA,EAAO,IAAS,KAAA;AAC/C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,UAAA,CAAW,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,UAAW,CAAA,OAAO,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,mCACHC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,GAAK,EAAA,UAAA;AAAA,IACL,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,IACtC,aAAY,EAAA,0BAAA;AAAA,IAEX,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAGF,EAAA,uBACGC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IAAU,WAAW,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,SAAA;AAAA,IAAW,WAAW,YAAa,EAAA;AAAA,IAC/D,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,QAC7C,QAAW,EAAA,OAAA,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,mBAC1BA,cAAA,CAAAG,YAAA,EAAA;AAAA,UACC,MAAQ,EAAA,IAAA;AAAA,UACR,MAAQ,EAAA,OAAA;AAAA,UACR,eAAiB,EAAA,KAAA;AAAA,UACjB,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA,EAAO,MAAQ,CAAA,IAAA,CAAK,KAAS,GAAA,CAAA;AAAA,SAC/B,CAEA,GAAA,gBAAA;AAAA,OAEJ,CAAA;AAAA,qCACCC,mBAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/Grid.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".salt-density-touch {\n  --grid-row-height-default: 61px;\n  --grid-padding-default: 16px;\n  --grid-fontSize-default: 16px;\n  --grid-header-fontSize-default: 14px;\n  --grid-separatorGap-default: 20px;\n  --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n  --grid-row-height-default: 49px;\n  --grid-padding-default: 12px;\n  --grid-fontSize-default: 14px;\n  --grid-header-fontSize-default: 12px;\n  --grid-separatorGap-default: 16px;\n  --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n  --grid-row-height-default: 37px;\n  --grid-padding-default: 8px;\n  --grid-fontSize-default: 12px;\n  --grid-header-fontSize-default: 11px;\n  --grid-separatorGap-default: 12px;\n  --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n  --grid-row-height-default: 25px;\n  --grid-padding-default: 8px;\n  --grid-fontSize-default: 11px;\n  --grid-header-fontSize-default: 10px;\n  --grid-separatorGap-default: 8px;\n  --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n  --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n  --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n  --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n  --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n  --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n  --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n  --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n  --grid-cell-padding: 0 var(--grid-padding);\n\n  --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n  --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n  --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n  --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n  --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n  --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n  --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n  --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n  --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n  --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n  --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-text-primary-foreground));\n  --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n  --grid-header-color: var(--saltGrid-header-color, var(--salt-text-secondary-foreground));\n\n  --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n  --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-size-unit));\n  --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n  --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n  --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-text-secondary-foreground));\n  --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-1-color));\n  --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n  --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n  --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n  --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n  --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n  --grid-rowSeparator-width: 1px;\n  --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n  --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n  --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n  --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n  --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n  --grid-mid-body-zIndex: 0;\n  --grid-left-body-zIndex: 1;\n  --grid-right-body-zIndex: 1;\n  --grid-middle-header-zIndex: 2;\n  --grid-left-header-zIndex: 3;\n  --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.saltGrid-framed {\n  border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n  --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n  --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n  position: relative;\n  outline: none;\n  user-select: none;\n  background: var(--grid-background);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n  --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n  visibility: hidden;\n}\n";
+var css_248z = ".salt-density-touch {\n  --grid-row-height-default: 61px;\n  --grid-padding-default: 16px;\n  --grid-fontSize-default: 16px;\n  --grid-header-fontSize-default: 14px;\n  --grid-separatorGap-default: 20px;\n  --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n  --grid-row-height-default: 49px;\n  --grid-padding-default: 12px;\n  --grid-fontSize-default: 14px;\n  --grid-header-fontSize-default: 12px;\n  --grid-separatorGap-default: 16px;\n  --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n  --grid-row-height-default: 37px;\n  --grid-padding-default: 8px;\n  --grid-fontSize-default: 12px;\n  --grid-header-fontSize-default: 11px;\n  --grid-separatorGap-default: 12px;\n  --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n  --grid-row-height-default: 25px;\n  --grid-padding-default: 8px;\n  --grid-fontSize-default: 11px;\n  --grid-header-fontSize-default: 10px;\n  --grid-separatorGap-default: 8px;\n  --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n  --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n  --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n  --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n  --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n  --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n  --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n  --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n  --grid-cell-padding: 0 var(--grid-padding);\n\n  --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n  --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n  --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n  --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n  --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n  --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n  --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n  --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n  --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n  --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n  --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-content-primary-foreground));\n  --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n  --grid-header-color: var(--saltGrid-header-color, var(--salt-content-secondary-foreground));\n\n  --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n  --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-spacing-100));\n  --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n  --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n  --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-content-secondary-foreground));\n  --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-100-color));\n  --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n  --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n  --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n  --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n  --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n  --grid-rowSeparator-width: 1px;\n  --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n  --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n  --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n  --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n  --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n  --grid-mid-body-zIndex: 0;\n  --grid-left-body-zIndex: 1;\n  --grid-right-body-zIndex: 1;\n  --grid-middle-header-zIndex: 2;\n  --grid-left-header-zIndex: 3;\n  --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.saltGrid-framed {\n  border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n  --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n  --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n  position: relative;\n  outline: none;\n  user-select: none;\n  background: var(--grid-background);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--grid-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n  --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n  visibility: hidden;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Grid.css.js.map

package/dist-cjs/Grid.js

@@ -8,7 +8,6 @@ var core = require('@salt-ds/core');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var clsx = require('clsx');
-require('./internal/Cell.js');
 var CellMeasure = require('./internal/CellMeasure.js');
 require('./internal/Cursor.js');
 require('./internal/GroupHeaderRow.js');
@@ -26,6 +25,7 @@ var gridHooks = require('./internal/gridHooks.js');
 var TopLeftPart = require('./internal/TopLeftPart.js');
 var TopPart = require('./internal/TopPart.js');
 var TopRightPart = require('./internal/TopRightPart.js');
+require('./CellFrame.js');
 require('./internal/DefaultCellValue.js');
 var GridContext = require('./GridContext.js');
 var SizingContext = require('./SizingContext.js');

package/dist-cjs/HeaderCell.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltGridHeaderCell {\n  text-align: left;\n  font-size: var(--grid-header-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  line-height: var(--grid-row-height);\n  position: relative;\n  box-sizing: border-box;\n  color: var(--grid-header-color);\n  white-space: nowrap;\n  outline: 0;\n}\n\n.saltGridHeaderCell-valueContainer {\n  line-height: var(--grid-row-height);\n  padding: var(--grid-cell-padding);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltGridHeaderCell-alignRight {\n  text-align: right;\n}\n\n.saltGridHeaderCell-alignRightWithSortOrder {\n  margin-left: calc(var(--salt-size-unit) * 2);\n}\n\n.saltGridHeaderCell-alignLeftWithSortOrder {\n  margin-right: calc(var(--salt-size-unit) * 2);\n}\n\n.saltGridHeaderCell-autosizeContainer {\n  line-height: var(--grid-row-height);\n  padding: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.saltGridHeaderCell-measuredContent {\n  height: 100%;\n  display: inline-block;\n  padding: var(--grid-cell-padding);\n}\n\n.saltGridHeaderCell-text {\n  color: var(--grid-header-color);\n  overflow: hidden;\n}\n\n.saltGridHeaderCell-regularSeparator {\n  background: var(--grid-headerColumnSeparator-color);\n  width: 1px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: var(--grid-separatorGap);\n  bottom: var(--grid-separatorGap);\n}\n\n.saltGridHeaderCell-groupEdgeSeparator,\n.saltGridHeaderCell-pinnedSeparator {\n  background: var(--grid-headerColumnSeparator-color);\n  width: 1px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: var(--grid-separatorGap);\n}\n\n.saltGrid-pinnedSeparators .saltGridHeaderCell-pinnedSeparator {\n  background: var(--grid-pinnedSeparator-color);\n  width: 1px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.saltGridHeaderCell-resizeHandle {\n  position: absolute;\n  right: -8px;\n  top: 0;\n  bottom: 0;\n  width: 16px;\n  background: transparent;\n  cursor: col-resize;\n  z-index: 2;\n}\n\n.saltGridHeaderCell-sortable {\n  cursor: pointer;\n}\n\n.saltGridHeaderCell-sortingIcon {\n  display: flex;\n  margin: 0 var(--salt-size-unit);\n}\n\n.saltGridHeaderCell-sortingIconStart {\n  justify-content: start;\n}\n\n.saltGridHeaderCell-sortingIconEnd {\n  justify-content: end;\n}\n";
+var css_248z = ".saltGridHeaderCell {\n  text-align: left;\n  font-size: var(--grid-header-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  line-height: var(--grid-row-height);\n  position: relative;\n  box-sizing: border-box;\n  color: var(--grid-header-color);\n  white-space: nowrap;\n  outline: 0;\n}\n\n.saltGridHeaderCell-valueContainer {\n  line-height: var(--grid-row-height);\n  padding: var(--grid-cell-padding);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltGridHeaderCell-alignRight {\n  text-align: right;\n}\n\n.saltGridHeaderCell-alignRightWithSortOrder {\n  margin-left: var(--salt-spacing-100);\n}\n\n.saltGridHeaderCell-alignLeftWithSortOrder {\n  margin-right: var(--salt-spacing-200);\n}\n\n.saltGridHeaderCell-autosizeContainer {\n  line-height: var(--grid-row-height);\n  padding: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.saltGridHeaderCell-measuredContent {\n  height: 100%;\n  display: inline-block;\n  padding: var(--grid-cell-padding);\n}\n\n.saltGridHeaderCell-text {\n  color: var(--grid-header-color);\n  overflow: hidden;\n}\n\n.saltGridHeaderCell-regularSeparator {\n  background: var(--grid-headerColumnSeparator-color);\n  width: 1px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: var(--grid-separatorGap);\n  bottom: var(--grid-separatorGap);\n}\n\n.saltGridHeaderCell-groupEdgeSeparator,\n.saltGridHeaderCell-pinnedSeparator {\n  background: var(--grid-headerColumnSeparator-color);\n  width: 1px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: var(--grid-separatorGap);\n}\n\n.saltGrid-pinnedSeparators .saltGridHeaderCell-pinnedSeparator {\n  background: var(--grid-pinnedSeparator-color);\n  width: 1px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.saltGridHeaderCell-resizeHandle {\n  position: absolute;\n  right: -8px;\n  top: 0;\n  bottom: 0;\n  width: 16px;\n  background: transparent;\n  cursor: col-resize;\n  z-index: 2;\n}\n\n.saltGridHeaderCell-sortable {\n  cursor: pointer;\n}\n\n.saltGridHeaderCell-sortingIcon {\n  display: flex;\n  margin: 0 var(--salt-spacing-100);\n}\n\n.saltGridHeaderCell-sortingIconStart {\n  justify-content: start;\n}\n\n.saltGridHeaderCell-sortingIconEnd {\n  justify-content: end;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=HeaderCell.css.js.map

package/dist-cjs/HeaderCell.js

@@ -12,7 +12,6 @@ var icons = require('@salt-ds/icons');
 var Grid = require('./Grid.js');
 var SizingContext = require('./SizingContext.js');
 var ColumnDragContext = require('./ColumnDragContext.js');
-require('./internal/Cell.js');
 require('./internal/CellMeasure.js');
 var Cursor = require('./internal/Cursor.js');
 require('./internal/GroupHeaderRow.js');
@@ -29,6 +28,7 @@ var gridHooks = require('./internal/gridHooks.js');
 require('./internal/TopLeftPart.js');
 require('./internal/TopPart.js');
 require('./internal/TopRightPart.js');
+require('./CellFrame.js');
 require('./internal/DefaultCellValue.js');
 var ColumnSortContext = require('./ColumnSortContext.js');
 var HeaderCell$1 = require('./HeaderCell.css.js');

package/dist-cjs/NumericColumn.js

@@ -3,30 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-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 window = require('@salt-ds/window');
+var react = require('react');
+var CellFrame = require('./CellFrame.js');
 var CornerTag = require('./CornerTag.js');
-var Cell = require('./internal/Cell.js');
-require('./internal/CellMeasure.js');
-require('./internal/Cursor.js');
-require('./internal/GroupHeaderRow.js');
-require('./internal/HeaderRow.js');
-require('./internal/LeftPart.js');
-require('./internal/MiddlePart.js');
-require('./internal/RightPart.js');
-require('./internal/Scrollable.js');
-require('./internal/TableRow.js');
-require('./SelectionContext.js');
-require('./CursorContext.js');
-require('./NumberRange.js');
-require('@salt-ds/core');
-require('./internal/TopLeftPart.js');
-require('./internal/TopPart.js');
-require('./internal/TopRightPart.js');
-require('./internal/DefaultCellValue.js');
+var EditorContext = require('./EditorContext.js');
+var GridColumn = require('./GridColumn.js');
 var NumericColumn$1 = require('./NumericColumn.css.js');
 
 function isNumber(value) {
@@ -93,7 +76,7 @@ function NumericCellEditor(props) {
       document == null ? void 0 : document.removeEventListener("mousedown", focusOut, true);
     };
   }, [endEditMode, editorText]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Cell.Cell, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CellFrame.CellFrame, {
     separator: column == null ? void 0 : column.separator,
     className: "saltGridNumericCellEditor",
     children: [

package/dist-cjs/NumericColumn.js.map

@@ -1 +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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"}
+{"version":3,"file":"NumericColumn.js","sources":["../src/NumericColumn.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { GridCellValueProps, GridColumn, GridColumnProps } from \"./GridColumn\";\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    <CellFrame\n      separator={column?.separator}\n      className=\"saltGridNumericCellEditor\"\n    >\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    </CellFrame>\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","CellFrame","CornerTag","GridColumn"],"mappings":"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"}

package/dist-cjs/TextCellEditor.js

@@ -3,29 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var core = require('@salt-ds/core');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
-var EditorContext = require('./EditorContext.js');
+var window = require('@salt-ds/window');
+var react = require('react');
+var CellFrame = require('./CellFrame.js');
 var CornerTag = require('./CornerTag.js');
-var Cell = require('./internal/Cell.js');
-require('./internal/CellMeasure.js');
-require('./internal/Cursor.js');
-require('./internal/GroupHeaderRow.js');
-require('./internal/HeaderRow.js');
-require('./internal/LeftPart.js');
-require('./internal/MiddlePart.js');
-require('./internal/RightPart.js');
-require('./internal/Scrollable.js');
-require('./internal/TableRow.js');
-require('./SelectionContext.js');
-require('./CursorContext.js');
-require('./NumberRange.js');
-require('./internal/TopLeftPart.js');
-require('./internal/TopPart.js');
-require('./internal/TopRightPart.js');
-require('./internal/DefaultCellValue.js');
+var EditorContext = require('./EditorContext.js');
 var TextCellEditor$1 = require('./TextCellEditor.css.js');
 
 const withBaseName = core.makePrefixer("saltGridTextCellEditor");
@@ -80,7 +64,7 @@ function TextCellEditor(props) {
       document == null ? void 0 : document.removeEventListener("mousedown", focusOut, true);
     };
   }, [endEditMode, editorText]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Cell.Cell, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CellFrame.CellFrame, {
     separator: column == null ? void 0 : column.separator,
     className: withBaseName(),
     children: [

package/dist-cjs/TextCellEditor.js.map

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAOnD,SAAS,eAAkB,KAA+B,EAAA;AAC/D,EAAM,MAAA,EAAE,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAyB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,EAAE,WAAA,EAAa,cAAgB,EAAA,WAAA,KAAgBC,8BAAiB,EAAA,CAAA;AAEtE,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAC,cAAA;AAAA,IAClC,WAAA,IAAe,OAAO,WAAc,GAAA,MAAA,CAAQ,KAAK,KAAM,CAAA,QAAA,CAAU,IAAK,IAAI,CAAA;AAAA,GAC5E,CAAA;AAEA,EAAA,MAAM,mBAAsB,GAAAF,YAAA,CAAO,CAAC,CAAC,WAAW,CAAA,CAAA;AAEhD,EAAM,MAAA,QAAA,GAAiD,CAAC,CAAM,KAAA;AAC5D,IAAc,aAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,WAAA,CAAY,UAAU,CAAA,CAAA;AACtB,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,KAAA,CAAM,QAAQ,QAAU,EAAA;AAC1B,MAAe,cAAA,EAAA,CAAA;AACf,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AACvB,MAAA,WAAA,CAAY,UAAU,CAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,OAAA;AAAA,KACF;AACA,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAAG,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAS,CAAA,OAAA,IAAW,CAAC,mBAAA,CAAoB,OAAS,EAAA;AACpD,MAAA,QAAA,CAAS,QAAQ,MAAO,EAAA,CAAA;AACxB,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,QAAS,CAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAA;AACvB,IAAM,MAAA,QAAA,GAAW,CAAC,KAAsB,KAAA;AACtC,MAAA,IAAI,EAAC,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,QAAS,CAAA,KAAA,CAAM,MAAiB,CAAA,CAAA,EAAA;AAC1C,QAAA,WAAA,CAAY,UAAU,CAAA,CAAA;AAAA,OACxB;AAAA,KACF,CAAA;AAGA,IAAU,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,gBAAA,CAAiB,aAAa,QAAU,EAAA,IAAA,CAAA,CAAA;AAElD,IAAA,OAAO,MAAM;AACX,MAAU,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,mBAAA,CAAoB,aAAa,QAAU,EAAA,IAAA,CAAA,CAAA;AAAA,KACvD,CAAA;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,UAAU,CAAC,CAAA,CAAA;AAE5B,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,WAAW,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,SAAA;AAAA,IAAW,WAAW,YAAa,EAAA;AAAA,IAC1D,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAC3C,QAAC,kBAAAA,cAAA,CAAA,OAAA,EAAA;AAAA,UACC,aAAY,EAAA,wBAAA;AAAA,UACZ,GAAK,EAAA,QAAA;AAAA,UACL,SAAW,EAAA,IAAA;AAAA,UACX,KAAO,EAAA,UAAA;AAAA,UACP,QAAA;AAAA,UACA,SAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,qCACCC,mBAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TextCellEditor.js","sources":["../src/TextCellEditor.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\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    <CellFrame 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    </CellFrame>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","textCellEditorCss","useRef","useEditorContext","useState","useEffect","jsxs","CellFrame","jsx","CornerTag"],"mappings":"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"}

package/dist-cjs/index.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var BaseCell = require('./BaseCell.js');
 var ColumnGroup = require('./ColumnGroup.js');
 var CellEditor = require('./CellEditor.js');
+var CellFrame = require('./CellFrame.js');
 var CornerTag = require('./CornerTag.js');
+var EditorContext = require('./EditorContext.js');
 var GroupHeaderCell = require('./GroupHeaderCell.js');
 var GroupHeaderCellValue = require('./GroupHeaderCellValue.js');
 var HeaderCell = require('./HeaderCell.js');
@@ -30,7 +32,10 @@ exports.BaseCell = BaseCell.BaseCell;
 exports.getCellId = BaseCell.getCellId;
 exports.ColumnGroup = ColumnGroup.ColumnGroup;
 exports.CellEditor = CellEditor.CellEditor;
+exports.CellFrame = CellFrame.CellFrame;
 exports.CornerTag = CornerTag.CornerTag;
+exports.EditorContext = EditorContext.EditorContext;
+exports.useEditorContext = EditorContext.useEditorContext;
 exports.GroupHeaderCell = GroupHeaderCell.GroupHeaderCell;
 exports.GroupHeaderCellValue = GroupHeaderCellValue.GroupHeaderCellValue;
 exports.AutoSizeHeaderCell = HeaderCell.AutoSizeHeaderCell;

package/dist-cjs/index.js.map

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

package/dist-cjs/internal/FakeCell.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
-var Cell = require('./Cell.js');
+var CellFrame = require('../CellFrame.js');
 var FakeCell$1 = require('./FakeCell.css.js');
 
 function FakeCell(props) {
@@ -16,7 +16,7 @@ function FakeCell(props) {
     css: FakeCell$1,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, {
+  return /* @__PURE__ */ jsxRuntime.jsx(CellFrame.CellFrame, {
     className: "saltGridFakeCell",
     "data-row-index": row.index,
     "data-column-index": -1

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

@@ -1 +1 @@
-{"version":3,"file":"FakeCell.js","sources":["../src/internal/FakeCell.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellProps } from \"../GridColumn\";\n\nimport { Cell } from \"./Cell\";\n\nimport fakeCellCss from \"./FakeCell.css\";\n\nexport type FakeCellProps<T> = Pick<GridCellProps<T>, \"row\">;\n\n// When there is unused space (total width of all columns is less than the\n// available client width of the grid) a column with fake cells is rendered to\n// fill this space. Zebra and row selection/hover highlighting is applied to\n// this column. Fake cells can't have keyboard focus or render any values.\nexport function FakeCell<T>(props: FakeCellProps<T>) {\n  const { row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-fake-cell\",\n    css: fakeCellCss,\n    window: targetWindow,\n  });\n\n  return (\n    <Cell\n      className=\"saltGridFakeCell\"\n      data-row-index={row.index}\n      data-column-index={-1}\n    />\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","fakeCellCss","jsx","Cell"],"mappings":";;;;;;;;;;AAeO,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,KAAQ,GAAA,KAAA,CAAA;AAEhB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAU,EAAA,kBAAA;AAAA,IACV,kBAAgB,GAAI,CAAA,KAAA;AAAA,IACpB,mBAAmB,EAAA,CAAA,CAAA;AAAA,GACrB,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FakeCell.js","sources":["../src/internal/FakeCell.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellProps } from \"../GridColumn\";\nimport { CellFrame } from \"../CellFrame\";\n\nimport fakeCellCss from \"./FakeCell.css\";\n\nexport type FakeCellProps<T> = Pick<GridCellProps<T>, \"row\">;\n\n// When there is unused space (total width of all columns is less than the\n// available client width of the grid) a column with fake cells is rendered to\n// fill this space. Zebra and row selection/hover highlighting is applied to\n// this column. Fake cells can't have keyboard focus or render any values.\nexport function FakeCell<T>(props: FakeCellProps<T>) {\n  const { row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-fake-cell\",\n    css: fakeCellCss,\n    window: targetWindow,\n  });\n\n  return (\n    <CellFrame\n      className=\"saltGridFakeCell\"\n      data-row-index={row.index}\n      data-column-index={-1}\n    />\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","fakeCellCss","jsx","CellFrame"],"mappings":";;;;;;;;;;AAcO,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,KAAQ,GAAA,KAAA,CAAA;AAEhB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAAC,mBAAA,EAAA;AAAA,IACC,SAAU,EAAA,kBAAA;AAAA,IACV,kBAAgB,GAAI,CAAA,KAAA;AAAA,IACpB,mBAAmB,EAAA,CAAA,CAAA;AAAA,GACrB,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/TableRow.js

@@ -111,8 +111,8 @@ function TableRow(props) {
               validationMessage,
               validationType: column.info.props.validationType
             })
-          }, colKey)
-        });
+          })
+        }, colKey);
       }),
       gap !== void 0 && gap > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FakeCell.FakeCell, {
         row

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/internal/TableRow.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  MouseEventHandler,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { BaseCell } from \"../BaseCell\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useGridContext } from \"../GridContext\";\nimport { CellValidationState } from \"../GridColumn\";\nimport { RowValidationStatusContext } from \"../RowValidationStatus\";\n\nimport { FakeCell } from \"./FakeCell\";\nimport { DefaultCellValue } from \"./DefaultCellValue\";\n\nimport tableRowCss from \"./TableRow.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTableRow\");\n\nexport interface TableRowProps<T> {\n  row: GridRowModel<T>;\n  isSelected?: boolean;\n  isHoverOver?: boolean;\n  zebra?: boolean;\n  columns: GridColumnModel<T>[];\n  cursorColIdx?: number;\n  onMouseEnter?: MouseEventHandler<HTMLTableRowElement>;\n  onMouseLeave?: MouseEventHandler<HTMLTableRowElement>;\n  gap?: number;\n  editorColIdx?: number;\n  isCellSelected?: (rowIdx: number, colIdx: number) => boolean;\n  headerIsFocusable?: boolean;\n  validationStatus?: CellValidationState;\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n  const {\n    row,\n    isSelected,\n    zebra,\n    isHoverOver,\n    columns,\n    onMouseEnter,\n    onMouseLeave,\n    cursorColIdx,\n    gap,\n    editorColIdx,\n    isCellSelected,\n    headerIsFocusable,\n    validationStatus: rowValidationStatus,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-table-row\",\n    css: tableRowCss,\n    window: targetWindow,\n  });\n\n  const grid = useGridContext();\n\n  if (!row.key) {\n    throw new Error(`Invalid row`);\n  }\n\n  const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;\n\n  return (\n    <tr\n      aria-rowindex={ariaRowIndex}\n      aria-selected={isSelected ? true : undefined}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"zebra\")]: zebra,\n        [withBaseName(\"hover\")]: isHoverOver,\n        [withBaseName(\"selected\")]: isSelected,\n        [withBaseName(\"first\")]: row.index === 0,\n        [withBaseName(`validationStatus-${rowValidationStatus}`)]:\n          rowValidationStatus,\n      })}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      data-row-index={row.index}\n      data-row-key={row.key}\n      role=\"row\"\n    >\n      {columns.map((column, i) => {\n        const colKey = column.info.props.id;\n        const editorInfo = grid.getEditor(column.info.props.id);\n        const isEditable = !!editorInfo;\n\n        if (editorColIdx === column.index) {\n          if (isEditable) {\n            if (isValidElement(editorInfo.children)) {\n              const editorElement = Children.only(editorInfo.children);\n              return cloneElement(editorElement, {\n                key: colKey,\n                row,\n                column,\n              } as any);\n            }\n          }\n        }\n\n        const Cell = column.info.props.cellComponent || BaseCell;\n        const CellValue =\n          column.info.props.cellValueComponent || DefaultCellValue;\n        const value =\n          column.info.props.getValue && row.data\n            ? column.info.props.getValue(row.data)\n            : null;\n        const isFocused = cursorColIdx === column.index;\n        const isSelected =\n          isCellSelected && isCellSelected(row.index, column.index);\n        const validationFnArg = {\n          row,\n          column,\n          isFocused,\n          value,\n        };\n        const validationStatus =\n          column.info.props.getValidationStatus?.(validationFnArg);\n        const validationMessage =\n          validationStatus &&\n          column.info.props.getValidationMessage?.(validationFnArg);\n\n        return (\n          <RowValidationStatusContext.Provider\n            value={{ status: rowValidationStatus }}\n          >\n            <Cell\n              key={colKey}\n              row={row}\n              column={column}\n              isFocused={isFocused}\n              isSelected={isSelected}\n              isEditable={isEditable}\n              validationStatus={validationStatus}\n              validationMessage={validationMessage}\n              validationType={column.info.props.validationType}\n              value={value}\n              align={column.info.props.align}\n            >\n              <CellValue\n                column={column}\n                row={row}\n                value={value}\n                isFocused={isFocused}\n                validationStatus={validationStatus}\n                validationMessage={validationMessage}\n                validationType={column.info.props.validationType}\n              />\n            </Cell>\n          </RowValidationStatusContext.Provider>\n        );\n      })}\n      {gap !== undefined && gap > 0 ? <FakeCell row={row} /> : null}\n    </tr>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tableRowCss","useGridContext","jsxs","clsx","isValidElement","Children","cloneElement","BaseCell","DefaultCellValue","isSelected","jsx","RowValidationStatusContext","FakeCell"],"mappings":"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"}
+{"version":3,"file":"TableRow.js","sources":["../src/internal/TableRow.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  MouseEventHandler,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { BaseCell } from \"../BaseCell\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useGridContext } from \"../GridContext\";\nimport { CellValidationState } from \"../GridColumn\";\nimport { RowValidationStatusContext } from \"../RowValidationStatus\";\n\nimport { FakeCell } from \"./FakeCell\";\nimport { DefaultCellValue } from \"./DefaultCellValue\";\n\nimport tableRowCss from \"./TableRow.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTableRow\");\n\nexport interface TableRowProps<T> {\n  row: GridRowModel<T>;\n  isSelected?: boolean;\n  isHoverOver?: boolean;\n  zebra?: boolean;\n  columns: GridColumnModel<T>[];\n  cursorColIdx?: number;\n  onMouseEnter?: MouseEventHandler<HTMLTableRowElement>;\n  onMouseLeave?: MouseEventHandler<HTMLTableRowElement>;\n  gap?: number;\n  editorColIdx?: number;\n  isCellSelected?: (rowIdx: number, colIdx: number) => boolean;\n  headerIsFocusable?: boolean;\n  validationStatus?: CellValidationState;\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n  const {\n    row,\n    isSelected,\n    zebra,\n    isHoverOver,\n    columns,\n    onMouseEnter,\n    onMouseLeave,\n    cursorColIdx,\n    gap,\n    editorColIdx,\n    isCellSelected,\n    headerIsFocusable,\n    validationStatus: rowValidationStatus,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-table-row\",\n    css: tableRowCss,\n    window: targetWindow,\n  });\n\n  const grid = useGridContext();\n\n  if (!row.key) {\n    throw new Error(`Invalid row`);\n  }\n\n  const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;\n\n  return (\n    <tr\n      aria-rowindex={ariaRowIndex}\n      aria-selected={isSelected ? true : undefined}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"zebra\")]: zebra,\n        [withBaseName(\"hover\")]: isHoverOver,\n        [withBaseName(\"selected\")]: isSelected,\n        [withBaseName(\"first\")]: row.index === 0,\n        [withBaseName(`validationStatus-${rowValidationStatus}`)]:\n          rowValidationStatus,\n      })}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      data-row-index={row.index}\n      data-row-key={row.key}\n      role=\"row\"\n    >\n      {columns.map((column, i) => {\n        const colKey = column.info.props.id;\n        const editorInfo = grid.getEditor(column.info.props.id);\n        const isEditable = !!editorInfo;\n\n        if (editorColIdx === column.index) {\n          if (isEditable) {\n            if (isValidElement(editorInfo.children)) {\n              const editorElement = Children.only(editorInfo.children);\n              return cloneElement(editorElement, {\n                key: colKey,\n                row,\n                column,\n              } as any);\n            }\n          }\n        }\n\n        const Cell = column.info.props.cellComponent || BaseCell;\n        const CellValue =\n          column.info.props.cellValueComponent || DefaultCellValue;\n        const value =\n          column.info.props.getValue && row.data\n            ? column.info.props.getValue(row.data)\n            : null;\n        const isFocused = cursorColIdx === column.index;\n        const isSelected =\n          isCellSelected && isCellSelected(row.index, column.index);\n        const validationFnArg = {\n          row,\n          column,\n          isFocused,\n          value,\n        };\n        const validationStatus =\n          column.info.props.getValidationStatus?.(validationFnArg);\n        const validationMessage =\n          validationStatus &&\n          column.info.props.getValidationMessage?.(validationFnArg);\n\n        return (\n          <RowValidationStatusContext.Provider\n            key={colKey}\n            value={{ status: rowValidationStatus }}\n          >\n            <Cell\n              row={row}\n              column={column}\n              isFocused={isFocused}\n              isSelected={isSelected}\n              isEditable={isEditable}\n              validationStatus={validationStatus}\n              validationMessage={validationMessage}\n              validationType={column.info.props.validationType}\n              value={value}\n              align={column.info.props.align}\n            >\n              <CellValue\n                column={column}\n                row={row}\n                value={value}\n                isFocused={isFocused}\n                validationStatus={validationStatus}\n                validationMessage={validationMessage}\n                validationType={column.info.props.validationType}\n              />\n            </Cell>\n          </RowValidationStatusContext.Provider>\n        );\n      })}\n      {gap !== undefined && gap > 0 ? <FakeCell row={row} /> : null}\n    </tr>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tableRowCss","useGridContext","jsxs","clsx","isValidElement","Children","cloneElement","BaseCell","DefaultCellValue","isSelected","jsx","RowValidationStatusContext","FakeCell"],"mappings":"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"}

package/dist-es/BaseCell.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import { Cell } from './internal/Cell.js';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { CellFrame } from './CellFrame.js';
+import { CornerTag } from './CornerTag.js';
 import './internal/CellMeasure.js';
 import { Cursor } from './internal/Cursor.js';
 import './internal/GroupHeaderRow.js';
@@ -22,7 +23,6 @@ import './internal/TopLeftPart.js';
 import './internal/TopPart.js';
 import './internal/TopRightPart.js';
 import './internal/DefaultCellValue.js';
-import { CornerTag } from './CornerTag.js';
 import { CellWarningIcon, CellErrorIcon, CellSuccessIcon } from './internal/CellStatusIcons.js';
 import css_248z from './BaseCell.css.js';
 
@@ -61,7 +61,7 @@ function BaseCell(props) {
   const hasValidation = !!validationStatus;
   const hasValidationMessage = !!validationMessage || hasValidation;
   const validationMessageId = `${cellId}-statusMessage`;
-  return /* @__PURE__ */ jsxs(Cell, {
+  return /* @__PURE__ */ jsxs(CellFrame, {
     ref,
     id: cellId,
     "data-row-index": row.index,