@salt-ds/data-grid 1.0.6 → 1.0.7

package/dist-es/HeaderCell.js

@@ -32,9 +32,7 @@ import css_248z from './HeaderCell.css.js';
 const withBaseName = makePrefixer("saltGridHeaderCell");
 function HeaderCellSeparator(props) {
   const className = withBaseName([props.separatorType, "Separator"].join(""));
-  return /* @__PURE__ */ jsx("div", {
-    className
-  });
+  return /* @__PURE__ */ jsx("div", { className });
 }
 function HeaderCell(props) {
   const { column, children, isFocused } = props;
@@ -60,17 +58,20 @@ function HeaderCell(props) {
   const valueAlignRight = align === "right";
   const HeaderCellSortingIcon = ({ justify }) => {
     const className = withBaseName("sortingIcon");
-    const icon = /* @__PURE__ */ jsxs("div", {
-      className: clsx(className, {
-        [withBaseName("sortingIconStart")]: justify === "start",
-        [withBaseName("sortingIconEnd")]: justify === "end"
-      }),
-      "aria-hidden": true,
-      children: [
-        sortOrder === SortOrder.ASC && /* @__PURE__ */ jsx(ArrowUpIcon, {}),
-        sortOrder === SortOrder.DESC && /* @__PURE__ */ jsx(ArrowDownIcon, {})
-      ]
-    });
+    const icon = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(className, {
+          [withBaseName("sortingIconStart")]: justify === "start",
+          [withBaseName("sortingIconEnd")]: justify === "end"
+        }),
+        "aria-hidden": true,
+        children: [
+          sortOrder === SortOrder.ASC && /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+          sortOrder === SortOrder.DESC && /* @__PURE__ */ jsx(ArrowDownIcon, {})
+        ]
+      }
+    );
     return icon;
   };
   const ariaSortMap = {
@@ -96,48 +97,52 @@ function HeaderCell(props) {
       onClick();
     }
   };
-  return /* @__PURE__ */ jsxs("th", {
-    ref,
-    "aria-colindex": column.index + 1,
-    "data-column-index": column.index,
-    className: clsx(withBaseName(), headerClassName, {
-      [withBaseName("sortable")]: sortable
-    }),
-    role: "columnheader",
-    "data-testid": "column-header",
-    tabIndex: isFocused && !isFocusableContent ? 0 : -1,
-    onFocus,
-    onClick: sortable ? onClick : void 0,
-    onKeyDown: sortable ? onKeyDown : void 0,
-    "aria-sort": sortByColumnId === id && sortable ? ariaSort : void 0,
-    "aria-label": column.info.props["aria-label"],
-    children: [
-      sortByColumnId === id && sortable && valueAlignRight && /* @__PURE__ */ jsx(HeaderCellSortingIcon, {
-        justify: "start"
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: clsx(withBaseName("valueContainer"), {
-          [withBaseName("alignRight")]: valueAlignRight,
-          [withBaseName("alignRightWithSortOrder")]: valueAlignRight && withSortOrder,
-          [withBaseName("alignLeftWithSortOrder")]: !valueAlignRight && withSortOrder
-        }),
-        onMouseDown,
-        children
-      }),
-      sortByColumnId === id && sortable && !valueAlignRight && /* @__PURE__ */ jsx(HeaderCellSortingIcon, {
-        justify: "end"
-      }),
-      /* @__PURE__ */ jsx(HeaderCellSeparator, {
-        separatorType: separator
-      }),
-      /* @__PURE__ */ jsx("div", {
-        "data-testid": `column-${column.index}-resize-handle`,
-        className: withBaseName("resizeHandle"),
-        onMouseDown: onResizeHandleMouseDown
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ref,
+      "aria-colindex": column.index + 1,
+      "data-column-index": column.index,
+      className: clsx(withBaseName(), headerClassName, {
+        [withBaseName("sortable")]: sortable
       }),
-      isFocused && !isFocusableContent && /* @__PURE__ */ jsx(Cursor, {})
-    ]
-  });
+      role: "columnheader",
+      "data-testid": "column-header",
+      tabIndex: isFocused && !isFocusableContent ? 0 : -1,
+      onFocus,
+      onClick: sortable ? onClick : void 0,
+      onKeyDown: sortable ? onKeyDown : void 0,
+      "aria-sort": sortByColumnId === id && sortable ? ariaSort : void 0,
+      "aria-label": column.info.props["aria-label"],
+      children: [
+        sortByColumnId === id && sortable && valueAlignRight && /* @__PURE__ */ jsx(HeaderCellSortingIcon, { justify: "start" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(withBaseName("valueContainer"), {
+              [withBaseName("alignRight")]: valueAlignRight,
+              // both classNames below needed to ensure header cell title & sort icon do not overlap when column resized to be smaller
+              [withBaseName("alignRightWithSortOrder")]: valueAlignRight && withSortOrder,
+              [withBaseName("alignLeftWithSortOrder")]: !valueAlignRight && withSortOrder
+            }),
+            onMouseDown,
+            children
+          }
+        ),
+        sortByColumnId === id && sortable && !valueAlignRight && /* @__PURE__ */ jsx(HeaderCellSortingIcon, { justify: "end" }),
+        /* @__PURE__ */ jsx(HeaderCellSeparator, { separatorType: separator }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": `column-${column.index}-resize-handle`,
+            className: withBaseName("resizeHandle"),
+            onMouseDown: onResizeHandleMouseDown
+          }
+        ),
+        isFocused && !isFocusableContent && /* @__PURE__ */ jsx(Cursor, {})
+      ]
+    }
+  );
 }
 function AutoSizeHeaderCell(props) {
   const { column, children, isFocused } = props;
@@ -151,30 +156,31 @@ function AutoSizeHeaderCell(props) {
       resizeColumn(column.index, width);
     }
   });
-  return /* @__PURE__ */ jsxs("th", {
-    ref,
-    "aria-colindex": column.index + 1,
-    "data-column-index": column.index,
-    className: withBaseName(),
-    role: "columnheader",
-    "data-testid": "column-header",
-    tabIndex: isFocused && !isFocusableContent ? 0 : -1,
-    onFocus,
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: withBaseName("autosizeContainer"),
-        children: /* @__PURE__ */ jsx("div", {
-          ref: valueContainerRef,
-          className: withBaseName("measuredContent"),
-          children
-        })
-      }),
-      /* @__PURE__ */ jsx(HeaderCellSeparator, {
-        separatorType: separator
-      }),
-      isFocused && !isFocusableContent && /* @__PURE__ */ jsx(Cursor, {})
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ref,
+      "aria-colindex": column.index + 1,
+      "data-column-index": column.index,
+      className: withBaseName(),
+      role: "columnheader",
+      "data-testid": "column-header",
+      tabIndex: isFocused && !isFocusableContent ? 0 : -1,
+      onFocus,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: withBaseName("autosizeContainer"), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: valueContainerRef,
+            className: withBaseName("measuredContent"),
+            children
+          }
+        ) }),
+        /* @__PURE__ */ jsx(HeaderCellSeparator, { separatorType: separator }),
+        isFocused && !isFocusableContent && /* @__PURE__ */ jsx(Cursor, {})
+      ]
+    }
+  );
 }
 
 export { AutoSizeHeaderCell, HeaderCell, HeaderCellSeparator };

package/dist-es/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["import {\n  type FlexContentAlignment,\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type KeyboardEventHandler, useRef } from \"react\";\n\nimport { useColumnDragContext } from \"./ColumnDragContext\";\nimport { useColumnSortContext } from \"./ColumnSortContext\";\nimport { type ColumnSeparatorType, SortOrder } from \"./Grid\";\nimport type { HeaderCellProps } from \"./GridColumn\";\nimport { useSizingContext } from \"./SizingContext\";\nimport { Cursor, useFocusableContent } from \"./internal\";\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":["headerCellCss"],"mappings":"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"}
+{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["import {\n  type FlexContentAlignment,\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type KeyboardEventHandler, useRef } from \"react\";\n\nimport { useColumnDragContext } from \"./ColumnDragContext\";\nimport { useColumnSortContext } from \"./ColumnSortContext\";\nimport { type ColumnSeparatorType, SortOrder } from \"./Grid\";\nimport type { HeaderCellProps } from \"./GridColumn\";\nimport { useSizingContext } from \"./SizingContext\";\nimport { Cursor, useFocusableContent } from \"./internal\";\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":["headerCellCss"],"mappings":"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"}

package/dist-es/HeaderCellValue.js

@@ -5,10 +5,7 @@ const withBaseName = makePrefixer("saltGridHeaderCell");
 function HeaderCellValue(props) {
   const { column } = props;
   const title = column.info.props.name;
-  return /* @__PURE__ */ jsx("span", {
-    className: withBaseName("text"),
-    children: title
-  });
+  return /* @__PURE__ */ jsx("span", { className: withBaseName("text"), children: title });
 }
 
 export { HeaderCellValue };

package/dist-es/HeaderCellValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCellValue.js","sources":["../src/HeaderCellValue.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { GridHeaderValueProps } from \"./GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport function HeaderCellValue<T>(props: GridHeaderValueProps<T>) {\n  const { column } = props;\n  const title = column.info.props.name;\n  return <span className={withBaseName(\"text\")}>{title}</span>;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,SAAS,gBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AACnB,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAA;AAChC,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AACvD;;;;"}
+{"version":3,"file":"HeaderCellValue.js","sources":["../src/HeaderCellValue.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { GridHeaderValueProps } from \"./GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport function HeaderCellValue<T>(props: GridHeaderValueProps<T>) {\n  const { column } = props;\n  const title = column.info.props.name;\n  return <span className={withBaseName(\"text\")}>{title}</span>;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,SAAS,gBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,IAAA,CAAK,KAAM,CAAA,IAAA;AAChC,EAAA,2BAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAM,EAAA,KAAA,EAAA,CAAA;AACvD;;;;"}

package/dist-es/LayoutContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContext.js","sources":["../src/LayoutContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface LayoutContext {\n  totalWidth: number;\n  totalHeight: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport const LayoutContext = createContext<LayoutContext | undefined>(\n  undefined,\n);\n\nexport const useLayoutContext = () => {\n  const c = useContext(LayoutContext);\n  if (!c) {\n    throw new Error(\"useLayoutContext invoked outside of a Grid\");\n  }\n  return c;\n};\n"],"names":[],"mappings":";;AASO,MAAM,aAAgB,GAAA,aAAA;AAAA,EAC3B,KAAA,CAAA;AACF;;;;"}
+{"version":3,"file":"LayoutContext.js","sources":["../src/LayoutContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface LayoutContext {\n  totalWidth: number;\n  totalHeight: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport const LayoutContext = createContext<LayoutContext | undefined>(\n  undefined,\n);\n\nexport const useLayoutContext = () => {\n  const c = useContext(LayoutContext);\n  if (!c) {\n    throw new Error(\"useLayoutContext invoked outside of a Grid\");\n  }\n  return c;\n};\n"],"names":[],"mappings":";;AASO,MAAM,aAAgB,GAAA,aAAA;AAAA,EAC3B,KAAA;AACF;;;;"}

package/dist-es/NumberRange.js

@@ -13,7 +13,7 @@ function range(...args) {
   }
   return [...Array(end - start).keys()].map((i) => start + i * step);
 }
-const _NumberRange = class {
+const _NumberRange = class _NumberRange {
   constructor(start, end) {
     if (end < start) {
       throw new Error(`Invalid start and end: [${start}, ${end}]`);
@@ -51,8 +51,8 @@ const _NumberRange = class {
     return this.start <= n && n < this.end;
   }
 };
+_NumberRange.empty = new _NumberRange(0, 0);
 let NumberRange = _NumberRange;
-NumberRange.empty = new _NumberRange(0, 0);
 
 export { NumberRange, range };
 //# sourceMappingURL=NumberRange.js.map

package/dist-es/NumberRange.js.map

@@ -1 +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":"AAAO,SAAS,SACX,IACO,EAAA;AACV,EAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AACZ,EAAA,IAAI,GAAM,GAAA,CAAA,CAAA;AACV,EAAA,IAAI,IAAO,GAAA,CAAA,CAAA;AACX,EAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,IAAA,GAAA,GAAM,IAAK,CAAA,CAAA,CAAA,CAAA;AAAA,GACN,MAAA;AACL,IAAA,KAAA,GAAQ,IAAK,CAAA,CAAA,CAAA,CAAA;AACb,IAAA,GAAA,GAAM,IAAK,CAAA,CAAA,CAAA,CAAA;AACX,IAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,MAAA,IAAA,GAAO,IAAK,CAAA,CAAA,CAAA,CAAA;AAAA,KACd;AAAA,GACF;AACA,EAAA,OAAO,CAAC,GAAG,KAAM,CAAA,GAAA,GAAM,KAAK,CAAE,CAAA,IAAA,EAAM,CAAA,CAAE,GAAI,CAAA,CAAC,CAAM,KAAA,KAAA,GAAQ,IAAI,IAAI,CAAA,CAAA;AACnE,CAAA;AAEO,MAAM,eAAN,MAAkB;AAAA,EAKhB,WAAA,CAAY,OAAe,GAAa,EAAA;AAC7C,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,MAAM,IAAI,KAAA,CAAM,CAA2B,wBAAA,EAAA,KAAA,CAAA,EAAA,EAAU,GAAM,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,KAC7D;AACA,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,IAAA,IAAA,CAAK,GAAM,GAAA,GAAA,CAAA;AAAA,GACb;AAAA,EAEA,IAAW,MAAiB,GAAA;AAC1B,IAAO,OAAA,IAAA,CAAK,MAAM,IAAK,CAAA,KAAA,CAAA;AAAA,GACzB;AAAA,EAEO,IAAO,EAA2B,EAAA;AACvC,IAAA,OAAO,MAAM,IAAK,CAAA,KAAA,EAAO,KAAK,GAAG,CAAA,CAAE,IAAI,EAAE,CAAA,CAAA;AAAA,GAC3C;AAAA,EAEO,QAAQ,EAA+B,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,KAAO,EAAA,IAAA,CAAK,GAAG,CAAA,CAAE,QAAQ,EAAE,CAAA,CAAA;AAAA,GACxC;AAAA,EAEA,EAAS,OAAO,QAAY,CAAA,GAAA;AAC1B,IAAA,KAAA,IAAS,IAAI,IAAK,CAAA,KAAA,EAAO,IAAI,IAAK,CAAA,GAAA,EAAK,EAAE,CAAG,EAAA;AAC1C,MAAM,MAAA,CAAA,CAAA;AAAA,KACR;AAAA,GACF;AAAA,EAEA,OAAc,MAAO,CAAA,CAAA,EAA4B,CAA4B,EAAA;AAC3E,IAAA,IAAI,CAAC,CAAG,EAAA;AACN,MAAA,OAAO,CAAC,CAAA,CAAA;AAAA,KACV;AACA,IAAO,OAAA,CAAC,IAAI,KAAQ,GAAA,CAAA,CAAE,UAAU,CAAE,CAAA,KAAA,IAAS,CAAE,CAAA,GAAA,KAAQ,CAAE,CAAA,GAAA,CAAA;AAAA,GACzD;AAAA,EAEO,MAAA,CAAO,OAAe,GAAa,EAAA;AACxC,IAAO,OAAA,IAAA,CAAK,GAAQ,KAAA,GAAA,IAAO,IAAK,CAAA,KAAA,KAAU,QACtC,IAAI,YAAA,CAAY,KAAO,EAAA,GAAG,CAC1B,GAAA,IAAA,CAAA;AAAA,GACN;AAAA,EAIO,QAAW,GAAA;AAChB,IAAO,OAAA,CAAA,CAAA,EAAI,IAAK,CAAA,KAAA,CAAA,EAAA,EAAU,IAAK,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GACjC;AAAA,EAEO,SAAS,CAAW,EAAA;AACzB,IAAA,OAAO,IAAK,CAAA,KAAA,IAAS,CAAK,IAAA,CAAA,GAAI,IAAK,CAAA,GAAA,CAAA;AAAA,GACrC;AACF,CAAA,CAAA;AArDO,IAAM,WAAN,GAAA,aAAA;AAAM,WAAA,CA4CG,KAAqB,GAAA,IAAI,YAAY,CAAA,CAAA,EAAG,CAAC,CAAA;;;;"}
+{"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":"AAAO,SAAS,SACX,IACO,EAAA;AACV,EAAA,IAAI,KAAQ,GAAA,CAAA;AACZ,EAAA,IAAI,GAAM,GAAA,CAAA;AACV,EAAA,IAAI,IAAO,GAAA,CAAA;AACX,EAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,IAAA,GAAA,GAAM,KAAK,CAAC,CAAA;AAAA,GACP,MAAA;AACL,IAAA,KAAA,GAAQ,KAAK,CAAC,CAAA;AACd,IAAA,GAAA,GAAM,KAAK,CAAC,CAAA;AACZ,IAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,MAAA,IAAA,GAAO,KAAK,CAAC,CAAA;AAAA;AACf;AAEF,EAAA,OAAO,CAAC,GAAG,KAAM,CAAA,GAAA,GAAM,KAAK,CAAE,CAAA,IAAA,EAAM,CAAA,CAAE,GAAI,CAAA,CAAC,CAAM,KAAA,KAAA,GAAQ,IAAI,IAAI,CAAA;AACnE;AAEO,MAAM,YAAA,GAAN,MAAM,YAAY,CAAA;AAAA,EAKhB,WAAA,CAAY,OAAe,GAAa,EAAA;AAC7C,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,MAAM,IAAI,KAAM,CAAA,CAAA,wBAAA,EAA2B,KAAK,CAAA,EAAA,EAAK,GAAG,CAAG,CAAA,CAAA,CAAA;AAAA;AAE7D,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AACb,IAAA,IAAA,CAAK,GAAM,GAAA,GAAA;AAAA;AACb,EAEA,IAAW,MAAiB,GAAA;AAC1B,IAAO,OAAA,IAAA,CAAK,MAAM,IAAK,CAAA,KAAA;AAAA;AACzB,EAEO,IAAO,EAA2B,EAAA;AACvC,IAAA,OAAO,MAAM,IAAK,CAAA,KAAA,EAAO,KAAK,GAAG,CAAA,CAAE,IAAI,EAAE,CAAA;AAAA;AAC3C,EAEO,QAAQ,EAA+B,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,KAAO,EAAA,IAAA,CAAK,GAAG,CAAA,CAAE,QAAQ,EAAE,CAAA;AAAA;AACxC,EAEA,EAAS,MAAO,CAAA,QAAQ,CAAI,GAAA;AAC1B,IAAA,KAAA,IAAS,IAAI,IAAK,CAAA,KAAA,EAAO,IAAI,IAAK,CAAA,GAAA,EAAK,EAAE,CAAG,EAAA;AAC1C,MAAM,MAAA,CAAA;AAAA;AACR;AACF,EAEA,OAAc,MAAO,CAAA,CAAA,EAA4B,CAA4B,EAAA;AAC3E,IAAA,IAAI,CAAC,CAAG,EAAA;AACN,MAAA,OAAO,CAAC,CAAA;AAAA;AAEV,IAAO,OAAA,CAAC,IAAI,KAAQ,GAAA,CAAA,CAAE,UAAU,CAAE,CAAA,KAAA,IAAS,CAAE,CAAA,GAAA,KAAQ,CAAE,CAAA,GAAA;AAAA;AACzD,EAEO,MAAA,CAAO,OAAe,GAAa,EAAA;AACxC,IAAO,OAAA,IAAA,CAAK,GAAQ,KAAA,GAAA,IAAO,IAAK,CAAA,KAAA,KAAU,QACtC,IAAI,YAAA,CAAY,KAAO,EAAA,GAAG,CAC1B,GAAA,IAAA;AAAA;AACN,EAIO,QAAW,GAAA;AAChB,IAAA,OAAO,CAAI,CAAA,EAAA,IAAA,CAAK,KAAK,CAAA,EAAA,EAAK,KAAK,GAAG,CAAA,CAAA,CAAA;AAAA;AACpC,EAEO,SAAS,CAAW,EAAA;AACzB,IAAA,OAAO,IAAK,CAAA,KAAA,IAAS,CAAK,IAAA,CAAA,GAAI,IAAK,CAAA,GAAA;AAAA;AAEvC,CAAA;AArDa,YAAA,CA4CG,KAAqB,GAAA,IAAI,YAAY,CAAA,CAAA,EAAG,CAAC,CAAA;AA5ClD,IAAM,WAAN,GAAA;;;;"}

package/dist-es/NumericColumn.css.js

@@ -1,4 +1,4 @@
-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";
+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-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";
 
 export { css_248z as default };
 //# sourceMappingURL=NumericColumn.css.js.map

package/dist-es/NumericColumn.js

@@ -22,10 +22,7 @@ function NumericCellValue(props) {
   const columnProps = column.info.props;
   const { precision } = columnProps;
   const text = isNumber(value) ? value.toFixed(precision) : "";
-  return /* @__PURE__ */ jsx("div", {
-    className: "saltGridNumericCellValue",
-    children: text
-  });
+  return /* @__PURE__ */ jsx("div", { className: "saltGridNumericCellValue", children: text });
 }
 function NumericCellEditor(props) {
   const { column, row } = props;
@@ -72,32 +69,38 @@ function NumericCellEditor(props) {
       document == null ? void 0 : document.removeEventListener("mousedown", focusOut, true);
     };
   }, [endEditMode, editorText]);
-  return /* @__PURE__ */ jsxs(CellFrame, {
-    separator: column == null ? void 0 : column.separator,
-    className: "saltGridNumericCellEditor",
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: "saltGridNumericCellEditor-inputContainer",
-        children: /* @__PURE__ */ jsx("input", {
-          ref: inputRef,
-          "data-testid": "grid-cell-editor-input",
-          autoFocus: true,
-          value: editorText,
-          onChange,
-          onKeyDown
-        })
-      }),
-      /* @__PURE__ */ jsx(CornerTag, {})
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    CellFrame,
+    {
+      separator: column == null ? void 0 : column.separator,
+      className: "saltGridNumericCellEditor",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "saltGridNumericCellEditor-inputContainer", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            "data-testid": "grid-cell-editor-input",
+            autoFocus: true,
+            value: editorText,
+            onChange,
+            onKeyDown
+          }
+        ) }),
+        /* @__PURE__ */ jsx(CornerTag, {})
+      ]
+    }
+  );
 }
 function NumericColumn(props) {
-  return /* @__PURE__ */ jsx(GridColumn, {
-    ...props,
-    align: "right",
-    cellValueComponent: NumericCellValue,
-    children: props.children
-  });
+  return /* @__PURE__ */ jsx(
+    GridColumn,
+    {
+      ...props,
+      align: "right",
+      cellValueComponent: NumericCellValue,
+      children: props.children
+    }
+  );
 }
 
 export { NumericCellEditor, NumericCellValue, NumericColumn };

package/dist-es/NumericColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericColumn.js","sources":["../src/NumericColumn.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEventHandler,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport type { GridColumnModel, GridRowModel } from \"./Grid\";\nimport {\n  type GridCellValueProps,\n  GridColumn,\n  type GridColumnProps,\n} from \"./GridColumn\";\n\nimport numericColumnCss from \"./NumericColumn.css\";\n\nexport interface NumericColumnProps<T> extends GridColumnProps<T> {\n  precision: number;\n}\n\nfunction isNumber(value: unknown): 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":["numericColumnCss"],"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  type ChangeEventHandler,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { CellFrame } from \"./CellFrame\";\nimport { CornerTag } from \"./CornerTag\";\nimport { useEditorContext } from \"./EditorContext\";\nimport type { GridColumnModel, GridRowModel } from \"./Grid\";\nimport {\n  type GridCellValueProps,\n  GridColumn,\n  type GridColumnProps,\n} from \"./GridColumn\";\n\nimport numericColumnCss from \"./NumericColumn.css\";\n\nexport interface NumericColumnProps<T> extends GridColumnProps<T> {\n  precision: number;\n}\n\nfunction isNumber(value: unknown): 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":["numericColumnCss"],"mappings":"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"}

package/dist-es/RowSelectionCheckboxCellValue.js

@@ -23,18 +23,17 @@ function RowSelectionCheckboxCellValue(props) {
     event.preventDefault();
     event.stopPropagation();
   };
-  return /* @__PURE__ */ jsx("div", {
-    className: "saltGridCheckboxContainer",
-    onMouseDown,
-    children: /* @__PURE__ */ jsx(Checkbox, {
+  return /* @__PURE__ */ jsx("div", { className: "saltGridCheckboxContainer", onMouseDown, children: /* @__PURE__ */ jsx(
+    Checkbox,
+    {
       "data-testid": "grid-row-selection-checkbox",
       inputProps: {
         "aria-label": "Select Row",
         tabIndex: isFocused ? 0 : -1
       },
       checked: isSelected
-    })
-  });
+    }
+  ) });
 }
 
 export { RowSelectionCheckboxCellValue };

package/dist-es/RowSelectionCheckboxCellValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowSelectionCheckboxCellValue.js","sources":["../src/RowSelectionCheckboxCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { MouseEventHandler } from \"react\";\nimport { useCursorContext } from \"./CursorContext\";\nimport type { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\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":["checkboxCellCss"],"mappings":";;;;;;;;AAWO,SAAS,8BAAiC,KAA8B,EAAA;AAC7E,EAAA,MAAM,EAAE,GAAA,EAAK,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEnC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,mBAAoB,EAAA,CAAA;AACvD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,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,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,2BAAA;AAAA,IAA4B,WAAA;AAAA,IACzC,QAAC,kBAAA,GAAA,CAAA,QAAA,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;;;;"}
+{"version":3,"file":"RowSelectionCheckboxCellValue.js","sources":["../src/RowSelectionCheckboxCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { MouseEventHandler } from \"react\";\nimport { useCursorContext } from \"./CursorContext\";\nimport type { GridCellValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\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":["checkboxCellCss"],"mappings":";;;;;;;;AAWO,SAAS,8BAAiC,KAA8B,EAAA;AAC7E,EAAA,MAAM,EAAE,GAAA,EAAK,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAEnC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,mBAAoB,EAAA;AACvD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AAExC,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA;AAE3C,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,UAAA,CAAW,EAAE,QAAU,EAAA,GAAA,CAAI,KAAO,EAAA,WAAA,EAAa,MAAM,CAAA;AACrD,IAAA,UAAA,CAAW,MAAQ,EAAA,GAAA,CAAI,KAAO,EAAA,MAAA,CAAO,KAAK,CAAA;AAC1C,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,KAAA,CAAM,eAAgB,EAAA;AAAA,GACxB;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,2BAAA,EAA4B,WACzC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,6BAAA;AAAA,MACZ,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,YAAA;AAAA,QACd,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA;AAAA,OAC5B;AAAA,MACA,OAAS,EAAA;AAAA;AAAA,GAEb,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/RowSelectionCheckboxColumn.js

@@ -21,14 +21,17 @@ function RowSelectionCheckboxColumn(props) {
     },
     [selectRows]
   );
-  return /* @__PURE__ */ jsx(GridColumn, {
-    ...props,
-    defaultWidth: 100,
-    headerComponent: AutoSizeHeaderCell,
-    headerValueComponent: RowSelectionCheckboxHeaderCellValue,
-    cellValueComponent: RowSelectionCheckboxCellValue,
-    onKeyDown
-  });
+  return /* @__PURE__ */ jsx(
+    GridColumn,
+    {
+      ...props,
+      defaultWidth: 100,
+      headerComponent: AutoSizeHeaderCell,
+      headerValueComponent: RowSelectionCheckboxHeaderCellValue,
+      cellValueComponent: RowSelectionCheckboxCellValue,
+      onKeyDown
+    }
+  );
 }
 
 export { RowSelectionCheckboxColumn };

package/dist-es/RowSelectionCheckboxColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowSelectionCheckboxColumn.js","sources":["../src/RowSelectionCheckboxColumn.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback } from \"react\";\nimport { GridColumn, type GridColumnProps } from \"./GridColumn\";\nimport { AutoSizeHeaderCell } from \"./HeaderCell\";\nimport { RowSelectionCheckboxCellValue } from \"./RowSelectionCheckboxCellValue\";\nimport { RowSelectionCheckboxHeaderCellValue } from \"./RowSelectionCheckboxHeaderCellValue\";\nimport { useSelectionContext } from \"./SelectionContext\";\n\nexport type RowSelectionCheckboxColumnProps<T> = Omit<\n  GridColumnProps<T>,\n  \"width\" | \"name\"\n>;\n\nexport function RowSelectionCheckboxColumn<T>(\n  props: RowSelectionCheckboxColumnProps<T>,\n) {\n  const { selectRows } = useSelectionContext();\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>, rowIndex: number) => {\n      if (event.key === \" \") {\n        selectRows({\n          rowIndex,\n          incremental: true,\n        });\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [selectRows],\n  );\n\n  return (\n    <GridColumn\n      {...props}\n      defaultWidth={100}\n      headerComponent={AutoSizeHeaderCell}\n      headerValueComponent={RowSelectionCheckboxHeaderCellValue}\n      cellValueComponent={RowSelectionCheckboxCellValue}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,SAAS,2BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,OAAsC,QAAqB,KAAA;AAC1D,MAAI,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,QAAW,UAAA,CAAA;AAAA,UACT,QAAA;AAAA,UACA,WAAa,EAAA,IAAA;AAAA,SACd,CAAA,CAAA;AACD,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,YAAc,EAAA,GAAA;AAAA,IACd,eAAiB,EAAA,kBAAA;AAAA,IACjB,oBAAsB,EAAA,mCAAA;AAAA,IACtB,kBAAoB,EAAA,6BAAA;AAAA,IACpB,SAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RowSelectionCheckboxColumn.js","sources":["../src/RowSelectionCheckboxColumn.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback } from \"react\";\nimport { GridColumn, type GridColumnProps } from \"./GridColumn\";\nimport { AutoSizeHeaderCell } from \"./HeaderCell\";\nimport { RowSelectionCheckboxCellValue } from \"./RowSelectionCheckboxCellValue\";\nimport { RowSelectionCheckboxHeaderCellValue } from \"./RowSelectionCheckboxHeaderCellValue\";\nimport { useSelectionContext } from \"./SelectionContext\";\n\nexport type RowSelectionCheckboxColumnProps<T> = Omit<\n  GridColumnProps<T>,\n  \"width\" | \"name\"\n>;\n\nexport function RowSelectionCheckboxColumn<T>(\n  props: RowSelectionCheckboxColumnProps<T>,\n) {\n  const { selectRows } = useSelectionContext();\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>, rowIndex: number) => {\n      if (event.key === \" \") {\n        selectRows({\n          rowIndex,\n          incremental: true,\n        });\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [selectRows],\n  );\n\n  return (\n    <GridColumn\n      {...props}\n      defaultWidth={100}\n      headerComponent={AutoSizeHeaderCell}\n      headerValueComponent={RowSelectionCheckboxHeaderCellValue}\n      cellValueComponent={RowSelectionCheckboxCellValue}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,SAAS,2BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,mBAAoB,EAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,OAAsC,QAAqB,KAAA;AAC1D,MAAI,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,QAAW,UAAA,CAAA;AAAA,UACT,QAAA;AAAA,UACA,WAAa,EAAA;AAAA,SACd,CAAA;AACD,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA;AAAA;AACxB,KACF;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,YAAc,EAAA,GAAA;AAAA,MACd,eAAiB,EAAA,kBAAA;AAAA,MACjB,oBAAsB,EAAA,mCAAA;AAAA,MACtB,kBAAoB,EAAA,6BAAA;AAAA,MACpB;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist-es/RowSelectionCheckboxHeaderCellValue.js

@@ -32,20 +32,26 @@ function RowSelectionCheckboxHeaderCellValue(props) {
       event.stopPropagation();
     }
   };
-  return /* @__PURE__ */ jsx("div", {
-    onMouseDown: onMousedown,
-    className: "saltGridCheckboxContainer",
-    onKeyDown,
-    children: /* @__PURE__ */ jsx(Checkbox, {
-      "data-testid": "grid-row-select-all-checkbox",
-      inputProps: {
-        "aria-label": "Select All",
-        tabIndex: isFocused ? 0 : -1
-      },
-      checked: isAllSelected,
-      indeterminate: !isAllSelected && isAnySelected
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onMousedown,
+      className: "saltGridCheckboxContainer",
+      onKeyDown,
+      children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          "data-testid": "grid-row-select-all-checkbox",
+          inputProps: {
+            "aria-label": "Select All",
+            tabIndex: isFocused ? 0 : -1
+          },
+          checked: isAllSelected,
+          indeterminate: !isAllSelected && isAnySelected
+        }
+      )
+    }
+  );
 }
 
 export { RowSelectionCheckboxHeaderCellValue };

package/dist-es/RowSelectionCheckboxHeaderCellValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowSelectionCheckboxHeaderCellValue.js","sources":["../src/RowSelectionCheckboxHeaderCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport type { GridHeaderValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\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":["checkboxCellCss"],"mappings":";;;;;;;AAUO,SAAS,oCACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA,CAAA;AAEtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,aAAe,EAAA,aAAA,KAC7C,mBAAoB,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,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,2BAAA;AAAA,IACV,SAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,QAAA,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;;;;"}
+{"version":3,"file":"RowSelectionCheckboxHeaderCellValue.js","sources":["../src/RowSelectionCheckboxHeaderCellValue.tsx"],"sourcesContent":["import { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport type { GridHeaderValueProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\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":["checkboxCellCss"],"mappings":";;;;;;;AAUO,SAAS,oCACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA;AAEtB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,aAAe,EAAA,aAAA,KAC7C,mBAAoB,EAAA;AAEtB,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,IAAI,aAAe,EAAA;AACjB,MAAY,WAAA,EAAA;AAAA,KACP,MAAA;AACL,MAAU,SAAA,EAAA;AAAA;AACZ,GACF;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;AAAA,OACP,MAAA;AACL,QAAU,SAAA,EAAA;AAAA;AAEZ,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA;AAAA;AACxB,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAa,EAAA,WAAA;AAAA,MACb,SAAU,EAAA,2BAAA;AAAA,MACV,SAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,aAAY,EAAA,8BAAA;AAAA,UACZ,UAAY,EAAA;AAAA,YACV,YAAc,EAAA,YAAA;AAAA,YACd,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA;AAAA,WAC5B;AAAA,UACA,OAAS,EAAA,aAAA;AAAA,UACT,aAAA,EAAe,CAAC,aAAiB,IAAA;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}

package/dist-es/RowSelectionRadioCellValue.js

@@ -15,14 +15,14 @@ function RowSelectionRadioCellValue(props) {
   });
   const { selRowIdxs } = useSelectionContext();
   const isSelected = selRowIdxs.has(row.index);
-  return /* @__PURE__ */ jsx("div", {
-    className: "saltGridCheckboxContainer",
-    children: /* @__PURE__ */ jsx(RadioButton, {
+  return /* @__PURE__ */ jsx("div", { className: "saltGridCheckboxContainer", children: /* @__PURE__ */ jsx(
+    RadioButton,
+    {
       checked: isSelected,
       "data-testid": "grid-row-selection-radiobox",
       tabIndex: isFocused ? 0 : -1
-    })
-  });
+    }
+  ) });
 }
 
 export { RowSelectionRadioCellValue };