@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/esm/components/Grid/StyledCell.css

@@ -0,0 +1,147 @@
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+/*
+ * The original styled-component dispatches background / text colour / border
+ * colour off `$type` (body|header) and `$selectionType`, and toggles individual
+ * borders / a `::before` overlay off boolean flags. Colours are aliased to local
+ * custom properties (set by the type + selection modifiers) so the shared border
+ * / overlay rules can reference them once.
+ */
+
+.cell__OXAxg {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--cell-space-y) var(--cell-space-x);
+  overflow: hidden;
+  border-top: 1px solid var(--cell-stroke-default);
+  border-left: 1px solid var(--cell-stroke-default);
+  background: var(--cell-background);
+  color: var(--cell-color);
+  font: var(--click-grid-cell-text-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.cell__OXAxg[data-align='right'] {
+  text-align: right;
+}
+
+.cell_type_body__SohuF {
+  --cell-stroke-default: var(--click-grid-body-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-body-cell-space-y);
+  --cell-space-x: var(--click-grid-body-cell-space-x);
+  --cell-background: var(--click-grid-body-cell-color-background-default);
+  --cell-color: var(--click-grid-body-cell-color-text-default);
+}
+
+.cell_type_body__SohuF.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectIndirect);
+}
+
+.cell_type_body__SohuF.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectDirect);
+}
+
+.cell_type_header__3tsr- {
+  --cell-stroke-default: var(--click-grid-header-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-header-cell-space-y);
+  --cell-space-x: var(--click-grid-header-cell-space-x);
+  --cell-background: var(--click-grid-header-cell-color-background-default);
+  --cell-color: var(--click-grid-header-cell-color-title-default);
+}
+
+.cell_type_header__3tsr-.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectIndirect);
+}
+
+.cell_type_header__3tsr-.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectDirect);
+}
+
+/* header cell with no border removes top/left edges on the corner cells */
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-row='-1'] {
+  border-top: none;
+}
+
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-column='-1'] {
+  border-left: none;
+}
+
+/* a focused cell draws its last-edge borders with the select-direct stroke */
+.cell_focused__cmh-b {
+  box-shadow: inset 0 0 0 1px var(--cell-stroke-select-direct);
+}
+
+/*
+ * Focus must win the last-edge stroke colour over any selection state. The
+ * original styled-component resolved the last-row / last-column border colour
+ * inline as `stroke[$isFocused ? 'selectDirect' : $selectionType]`, so focus
+ * always overrode the selection stroke. The `.cell_type_*.cell_selection_*`
+ * rules above set `--cell-stroke-last` at (0,2,0) specificity, so the focus
+ * override is qualified with the type class to match that specificity and,
+ * coming later in source order, take precedence. `.cell_focused` always
+ * co-occurs with a type class.
+ */
+.cell_type_body__SohuF.cell_focused__cmh-b,
+.cell_type_header__3tsr-.cell_focused__cmh-b {
+  --cell-stroke-last: var(--cell-stroke-select-direct);
+}
+
+/* only the last row/column draw the closing border, colored by focus/selection */
+.cell_last-row__DoJdk {
+  border-bottom: 1px solid var(--cell-stroke-last);
+}
+
+.cell_last-column__LgKM7 {
+  border-right: 1px solid var(--cell-stroke-last);
+}
+
+/* rowAutoHeight resets the entire border last, overriding every rule above */
+.cell_row-auto-height__yzQUR {
+  min-height: auto;
+  overflow-y: auto;
+  border: none;
+}
+
+/* selection / focus overlay drawn on top of the cell so adjacent borders meet */
+.cell__overlay__U9XGO::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.cell__overlay_selected_top__OMUJB::before {
+  border-top: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_left__MiimG::before {
+  border-left: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_bottom__2ra9F::before {
+  border-bottom: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_right__Dt-g5::before {
+  border-right: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_row-auto-height__teKk1::before {
+  border: none;
+}
+}

package/dist/esm/components/Grid/StyledCell.js

@@ -1,66 +1,83 @@
-import { styled } from 'styled-components';
+import "./StyledCell.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './StyledCell.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const StyledCell = styled.div.withConfig({
-  componentId: "sc-30izhw-0"
-})(["display:block;text-align:left;&[data-align='right']{text-align:right;}overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;width:100%;box-sizing:border-box;", " ", ";"], ({
-  theme,
+const cellVariants = cva(styles.cell, {
+  variants: {
+    type: {
+      body: styles.cell_type_body,
+      header: styles.cell_type_header
+    },
+    selection: {
+      default: null,
+      selectDirect: styles["cell_selection_direct"],
+      selectIndirect: styles["cell_selection_indirect"]
+    },
+    noBorder: { true: styles["cell_no-border"] },
+    focused: { true: styles.cell_focused },
+    lastRow: { true: styles["cell_last-row"] },
+    lastColumn: { true: styles["cell_last-column"] },
+    rowAutoHeight: { true: styles["cell_row-auto-height"] },
+    overlay: { true: styles.cell__overlay },
+    overlayTop: { true: styles["cell__overlay_selected_top"] },
+    overlayLeft: { true: styles["cell__overlay_selected_left"] },
+    overlayBottom: { true: styles["cell__overlay_selected_bottom"] },
+    overlayRight: { true: styles["cell__overlay_selected_right"] },
+    overlayAutoHeight: { true: styles["cell__overlay_row-auto-height"] }
+  }
+});
+const StyledCell = ({
+  as,
   $isFocused,
+  $selectionType,
+  $isSelectedTop,
+  $isSelectedLeft,
   $isLastRow,
   $isLastColumn,
-  $selectionType,
   $height,
   $type = "body",
   $showBorder,
-  $rowAutoHeight
-}) => `
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-    min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$rowAutoHeight ? "auto" : ""};
-    background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
-    color: ${$type === "header" ? theme.click.grid.header.cell.color.title[$selectionType] : theme.click.grid.body.cell.color.text[$selectionType]};
-    font: ${theme.click.grid.cell.text.default};
-    padding: ${theme.click.grid[$type].cell.space.y} ${theme.click.grid[$type].cell.space.x};
-    border: 1px solid ${theme.click.grid[$type].cell.color.stroke.default};
-    ${$type === "header" && !$showBorder ? `
-      &[data-grid-row="-1"] {
-        border-top: none;
-      }
-      &[data-grid-column="-1"] {
-        border-left: none;
-      }
-    ` : ""}
-    ${$isFocused ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-    ${$isLastRow ? `
-        border-bottom-color: ${theme.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
-    ` : "border-bottom: none;"}
-    ${$isLastColumn ? `
-        border-right-color: ${theme.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
-    ` : "border-right: none;"}
-    ${$rowAutoHeight && "border: none;"}
-  `, ({
-  theme,
-  $isLastRow,
-  $isLastColumn,
-  $selectionType,
-  $type = "body",
-  $isSelectedTop,
-  $isSelectedLeft,
-  $rowAutoHeight
-}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 0;
-            ${$isSelectedTop ? `border-top: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$isSelectedLeft ? `border-left: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$rowAutoHeight && "border: none;"}
-          }
-        ` : "");
+  $rowAutoHeight,
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  const Component = as ?? "div";
+  const hasOverlay = $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || !!$rowAutoHeight;
+  const mergedStyle = {
+    height: $rowAutoHeight ? "100%" : `${$height}px`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        cellVariants({
+          type: $type,
+          selection: $selectionType,
+          noBorder: $type === "header" && !$showBorder,
+          focused: $isFocused,
+          lastRow: $isLastRow,
+          lastColumn: $isLastColumn,
+          rowAutoHeight: !!$rowAutoHeight,
+          overlay: hasOverlay,
+          overlayTop: $isSelectedTop,
+          overlayLeft: $isSelectedLeft,
+          overlayBottom: $selectionType === "selectDirect" && $isLastRow,
+          overlayRight: $selectionType === "selectDirect" && $isLastColumn,
+          overlayAutoHeight: !!$rowAutoHeight
+        }),
+        className
+      ),
+      style: mergedStyle,
+      ...props,
+      children
+    }
+  );
+};
 
 export { StyledCell };
 //# sourceMappingURL=StyledCell.js.map

package/dist/esm/components/Grid/StyledCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectionType } from './types';\n\nexport const StyledCell = styled.div<{\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $isFirstRow: boolean;\n  $isFirstColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}>`\n  display: block;\n  text-align: left;\n  &[data-align='right'] {\n    text-align: right;\n  }\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: default;\n  width: 100%;\n  box-sizing: border-box;\n  ${({\n    theme,\n    $isFocused,\n    $isLastRow,\n    $isLastColumn,\n    $selectionType,\n    $height,\n    $type = 'body',\n    $showBorder,\n    $rowAutoHeight,\n  }) => `\n    height: ${$rowAutoHeight ? '100%' : `${$height}px`};\n    min-height: ${$rowAutoHeight ? 'auto' : ''};\n    overflow-y: ${$rowAutoHeight ? 'auto' : ''};\n    background: ${theme.click.grid[$type].cell.color.background[$selectionType]};\n    color: ${\n      $type === 'header'\n        ? theme.click.grid.header.cell.color.title[$selectionType]\n        : theme.click.grid.body.cell.color.text[$selectionType]\n    };\n    font: ${theme.click.grid.cell.text.default};\n    padding: ${theme.click.grid[$type].cell.space.y} ${\n      theme.click.grid[$type].cell.space.x\n    };\n    border: 1px solid ${theme.click.grid[$type].cell.color.stroke.default};\n    ${\n      $type === 'header' && !$showBorder\n        ? `\n      &[data-grid-row=\"-1\"] {\n        border-top: none;\n      }\n      &[data-grid-column=\"-1\"] {\n        border-left: none;\n      }\n    `\n        : ''\n    }\n    ${\n      $isFocused\n        ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n        : ''\n    }\n    ${\n      $isLastRow\n        ? `\n        border-bottom-color: ${\n          theme.click.grid[$type].cell.color.stroke[\n            $isFocused ? 'selectDirect' : $selectionType\n          ]\n        };\n    `\n        : 'border-bottom: none;'\n    }\n    ${\n      $isLastColumn\n        ? `\n        border-right-color: ${\n          theme.click.grid[$type].cell.color.stroke[\n            $isFocused ? 'selectDirect' : $selectionType\n          ]\n        };\n    `\n        : 'border-right: none;'\n    }\n    ${$rowAutoHeight && 'border: none;'}\n  `}\n  ${({\n    theme,\n    $isLastRow,\n    $isLastColumn,\n    $selectionType,\n    $type = 'body',\n    $isSelectedTop,\n    $isSelectedLeft,\n    $rowAutoHeight,\n  }) =>\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    $rowAutoHeight\n      ? `\n          &::before {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            left: 0;\n            ${\n              $isSelectedTop\n                ? `border-top: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $isSelectedLeft\n                ? `border-left: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $selectionType === 'selectDirect' && $isLastRow\n                ? `border-bottom: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $selectionType === 'selectDirect' && $isLastColumn\n                ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${$rowAutoHeight && 'border: none;'}\n          }\n        `\n      : ''};\n`;\n"],"names":["StyledCell","styled","div","withConfig","componentId","theme","$isFocused","$isLastRow","$isLastColumn","$selectionType","$height","$type","$showBorder","$rowAutoHeight","click","grid","cell","color","background","header","title","body","text","default","space","y","x","stroke","selectDirect","$isSelectedTop","$isSelectedLeft"],"mappings":"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"}
+{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './StyledCell.module.css';\nimport { SelectionType } from './types';\n\ninterface StyledCellOwnProps {\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}\n\nconst cellVariants = cva(styles.cell, {\n  variants: {\n    type: {\n      body: styles.cell_type_body,\n      header: styles.cell_type_header,\n    },\n    selection: {\n      default: null,\n      selectDirect: styles['cell_selection_direct'],\n      selectIndirect: styles['cell_selection_indirect'],\n    },\n    noBorder: { true: styles['cell_no-border'] },\n    focused: { true: styles.cell_focused },\n    lastRow: { true: styles['cell_last-row'] },\n    lastColumn: { true: styles['cell_last-column'] },\n    rowAutoHeight: { true: styles['cell_row-auto-height'] },\n    overlay: { true: styles.cell__overlay },\n    overlayTop: { true: styles['cell__overlay_selected_top'] },\n    overlayLeft: { true: styles['cell__overlay_selected_left'] },\n    overlayBottom: { true: styles['cell__overlay_selected_bottom'] },\n    overlayRight: { true: styles['cell__overlay_selected_right'] },\n    overlayAutoHeight: { true: styles['cell__overlay_row-auto-height'] },\n  },\n});\n\ntype StyledCellProps<T extends ElementType> = StyledCellOwnProps & {\n  as?: T;\n  children?: ReactNode;\n} & Omit<ComponentProps<T>, keyof StyledCellOwnProps | 'as' | 'children'>;\n\nexport const StyledCell = <T extends ElementType = 'div'>({\n  as,\n  $isFocused,\n  $selectionType,\n  $isSelectedTop,\n  $isSelectedLeft,\n  $isLastRow,\n  $isLastColumn,\n  $height,\n  $type = 'body',\n  $showBorder,\n  $rowAutoHeight,\n  className,\n  style,\n  children,\n  ...props\n}: StyledCellProps<T>) => {\n  const Component = (as ?? 'div') as ElementType;\n  // A single overlay `::before` is drawn whenever any selection/focus edge or\n  // auto-height needs to paint on top of the cell (see Grid.module.css).\n  const hasOverlay =\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    !!$rowAutoHeight;\n  const mergedStyle = {\n    height: $rowAutoHeight ? '100%' : `${$height}px`,\n    ...style,\n  } as CSSProperties;\n  return (\n    <Component\n      className={cn(\n        cellVariants({\n          type: $type,\n          selection: $selectionType,\n          noBorder: $type === 'header' && !$showBorder,\n          focused: $isFocused,\n          lastRow: $isLastRow,\n          lastColumn: $isLastColumn,\n          rowAutoHeight: !!$rowAutoHeight,\n          overlay: hasOverlay,\n          overlayTop: $isSelectedTop,\n          overlayLeft: $isSelectedLeft,\n          overlayBottom: $selectionType === 'selectDirect' && $isLastRow,\n          overlayRight: $selectionType === 'selectDirect' && $isLastColumn,\n          overlayAutoHeight: !!$rowAutoHeight,\n        }),\n        className\n      )}\n      style={mergedStyle}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Grid/StyledCell.module.css.js

@@ -0,0 +1,32 @@
+const cell = "cell__OXAxg";
+const cell_type_body = "cell_type_body__SohuF";
+const cell_selection_indirect = "cell_selection_indirect__6e6yy";
+const cell_selection_direct = "cell_selection_direct__QEL9m";
+const cell_type_header = "cell_type_header__3tsr-";
+const cell_focused = "cell_focused__cmh-b";
+const cell__overlay = "cell__overlay__U9XGO";
+const cell__overlay_selected_top = "cell__overlay_selected_top__OMUJB";
+const cell__overlay_selected_left = "cell__overlay_selected_left__MiimG";
+const cell__overlay_selected_bottom = "cell__overlay_selected_bottom__2ra9F";
+const cell__overlay_selected_right = "cell__overlay_selected_right__Dt-g5";
+const styles = {
+	cell: cell,
+	cell_type_body: cell_type_body,
+	cell_selection_indirect: cell_selection_indirect,
+	cell_selection_direct: cell_selection_direct,
+	cell_type_header: cell_type_header,
+	"cell_no-border": "cell_no-border__9gXDK",
+	cell_focused: cell_focused,
+	"cell_last-row": "cell_last-row__DoJdk",
+	"cell_last-column": "cell_last-column__LgKM7",
+	"cell_row-auto-height": "cell_row-auto-height__yzQUR",
+	cell__overlay: cell__overlay,
+	cell__overlay_selected_top: cell__overlay_selected_top,
+	cell__overlay_selected_left: cell__overlay_selected_left,
+	cell__overlay_selected_bottom: cell__overlay_selected_bottom,
+	cell__overlay_selected_right: cell__overlay_selected_right,
+	"cell__overlay_row-auto-height": "cell__overlay_row-auto-height__teKk1"
+};
+
+export { cell, cell__overlay, cell__overlay_selected_bottom, cell__overlay_selected_left, cell__overlay_selected_right, cell__overlay_selected_top, cell_focused, cell_selection_direct, cell_selection_indirect, cell_type_body, cell_type_header, styles as default };
+//# sourceMappingURL=StyledCell.module.css.js.map

package/dist/esm/components/Grid/StyledCell.module.css.js.map

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

package/dist/esm/components/Grid/copyGridElements.js

@@ -7,12 +7,9 @@ const addCellToRow = (row, cell, rowIndex, columnIndex) => {
   const container = document.createElement("div");
   const root = createRoot(container);
   flushSync(() => {
-    root.render(createElement(cell, {
-      rowIndex,
-      columnIndex,
-      width: 1e3,
-      type: "row-cell"
-    }));
+    root.render(
+      createElement(cell, { rowIndex, columnIndex, width: 1e3, type: "row-cell" })
+    );
   });
   td.innerHTML = container.innerHTML;
   root.unmount();
@@ -48,28 +45,31 @@ const copyGridElements = async ({
   const tbody = document.createElement("tbody");
   switch (selection.type) {
     case "rectangle":
-      Array.from({
-        length: selection.bounds.bottom + 1 - selection.bounds.top
-      }, (_, index) => selection.bounds.top + index).forEach((rowIndex) => {
-        const columnList = Array.from({
-          length: selection.bounds.right + 1 - selection.bounds.left
-        }, (_, index) => selection.bounds.left + index);
+      Array.from(
+        { length: selection.bounds.bottom + 1 - selection.bounds.top },
+        (_, index) => selection.bounds.top + index
+      ).forEach((rowIndex) => {
+        const columnList = Array.from(
+          { length: selection.bounds.right + 1 - selection.bounds.left },
+          (_, index) => selection.bounds.left + index
+        );
         columnListLoop(tbody, columnList, cell, rowIndex);
       });
       break;
     case "columns":
-      Array.from({
-        length: rowCount
-      }, (_, index) => pageStart + index).forEach((rowIndex) => {
-        const columnList = [...selection.columns].sort();
-        columnListLoop(tbody, columnList, cell, rowIndex);
-      });
+      Array.from({ length: rowCount }, (_, index) => pageStart + index).forEach(
+        (rowIndex) => {
+          const columnList = [...selection.columns].sort();
+          columnListLoop(tbody, columnList, cell, rowIndex);
+        }
+      );
       break;
     case "rows":
       [...selection.rows].sort().forEach((rowIndex) => {
-        const columnList = Array.from({
-          length: columnCount
-        }, (_, index) => pageStart + index);
+        const columnList = Array.from(
+          { length: columnCount },
+          (_, index) => pageStart + index
+        );
         columnListLoop(tbody, columnList, cell, rowIndex);
       });
       break;

package/dist/esm/components/Grid/copyGridElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyGridElements.js","sources":["../../../../src/components/Grid/copyGridElements.ts"],"sourcesContent":["import { CellProps, SelectedRegion, SelectionFocus } from './types';\nimport { RefObject, createElement } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { flushSync } from 'react-dom';\n\ninterface CopyGridElementsProps {\n  cell: CellProps;\n  selection: SelectedRegion;\n  rowCount: number;\n  columnCount: number;\n  pageStart?: number;\n  focus: SelectionFocus;\n  outerRef: RefObject<HTMLDivElement>;\n}\n\nconst addCellToRow = (\n  row: HTMLTableRowElement,\n  cell: CellProps,\n  rowIndex: number,\n  columnIndex: number\n) => {\n  const td = document.createElement('td');\n  const container = document.createElement('div');\n  const root = createRoot(container);\n\n  flushSync(() => {\n    root.render(\n      createElement(cell, { rowIndex, columnIndex, width: 1000, type: 'row-cell' })\n    );\n  });\n\n  td.innerHTML = container.innerHTML;\n  root.unmount();\n\n  row.appendChild(td);\n};\n\nconst columnListLoop = (\n  tbody: HTMLTableSectionElement,\n  columnList: number[],\n  cell: CellProps,\n  rowIndex: number\n) => {\n  const row = document.createElement('tr');\n  columnList.forEach(columnIndex => {\n    addCellToRow(row, cell, rowIndex, columnIndex);\n  });\n  tbody.appendChild(row);\n};\n\nconst copyGridElements = async ({\n  cell,\n  selection,\n  rowCount,\n  columnCount,\n  pageStart = 0,\n  focus,\n  outerRef,\n}: CopyGridElementsProps): Promise<void> => {\n  if (!outerRef.current) {\n    throw 'Could not fetch selection';\n  }\n  const table = document.createElement('table');\n  table.style.position = 'absolute';\n  table.style.top = '-200px';\n  table.style.left = '-200px';\n  table.style.width = '0px';\n  table.style.height = '0px';\n  table.style.overflow = 'hidden';\n  const thead = document.createElement('thead');\n  const tbody = document.createElement('tbody');\n\n  switch (selection.type) {\n    case 'rectangle':\n      Array.from(\n        { length: selection.bounds.bottom + 1 - selection.bounds.top },\n        (_, index) => selection.bounds.top + index\n      ).forEach(rowIndex => {\n        const columnList = Array.from(\n          { length: selection.bounds.right + 1 - selection.bounds.left },\n          (_, index) => selection.bounds.left + index\n        );\n        columnListLoop(tbody, columnList, cell, rowIndex);\n      });\n      break;\n    case 'columns':\n      Array.from({ length: rowCount }, (_, index) => pageStart + index).forEach(\n        rowIndex => {\n          const columnList = [...selection.columns].sort();\n          columnListLoop(tbody, columnList, cell, rowIndex);\n        }\n      );\n      break;\n    case 'rows':\n      [...selection.rows].sort().forEach(rowIndex => {\n        const columnList = Array.from(\n          { length: columnCount },\n          (_, index) => pageStart + index\n        );\n        columnListLoop(tbody, columnList, cell, rowIndex);\n      });\n      break;\n    case 'empty':\n      columnListLoop(tbody, [focus.column], cell, focus.row);\n      break;\n    default:\n      throw new Error('incorrect selection provided');\n  }\n\n  table.appendChild(thead);\n  table.appendChild(tbody);\n\n  outerRef.current.appendChild(table);\n\n  const windowSelection = window.getSelection();\n  if (windowSelection) {\n    const range = document.createRange();\n    range.selectNodeContents(table);\n    windowSelection.removeAllRanges();\n    windowSelection.addRange(range);\n    await navigator.clipboard.writeText(table.innerText);\n    windowSelection.removeAllRanges();\n\n    outerRef.current.removeChild(table);\n  } else {\n    throw 'Could not fetch selection';\n  }\n};\n\nexport default copyGridElements;\n"],"names":["addCellToRow","row","cell","rowIndex","columnIndex","td","document","createElement","container","root","createRoot","flushSync","render","width","type","innerHTML","unmount","appendChild","columnListLoop","tbody","columnList","forEach","copyGridElements","selection","rowCount","columnCount","pageStart","focus","outerRef","current","table","style","position","top","left","height","overflow","thead","Array","from","length","bounds","bottom","_","index","right","columns","sort","rows","column","Error","windowSelection","window","getSelection","range","createRange","selectNodeContents","removeAllRanges","addRange","navigator","clipboard","writeText","innerText","removeChild"],"mappings":"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"}
+{"version":3,"file":"copyGridElements.js","sources":["../../../../src/components/Grid/copyGridElements.ts"],"sourcesContent":["import { CellProps, SelectedRegion, SelectionFocus } from './types';\nimport { RefObject, createElement } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { flushSync } from 'react-dom';\n\ninterface CopyGridElementsProps {\n  cell: CellProps;\n  selection: SelectedRegion;\n  rowCount: number;\n  columnCount: number;\n  pageStart?: number;\n  focus: SelectionFocus;\n  outerRef: RefObject<HTMLDivElement>;\n}\n\nconst addCellToRow = (\n  row: HTMLTableRowElement,\n  cell: CellProps,\n  rowIndex: number,\n  columnIndex: number\n) => {\n  const td = document.createElement('td');\n  const container = document.createElement('div');\n  const root = createRoot(container);\n\n  flushSync(() => {\n    root.render(\n      createElement(cell, { rowIndex, columnIndex, width: 1000, type: 'row-cell' })\n    );\n  });\n\n  td.innerHTML = container.innerHTML;\n  root.unmount();\n\n  row.appendChild(td);\n};\n\nconst columnListLoop = (\n  tbody: HTMLTableSectionElement,\n  columnList: number[],\n  cell: CellProps,\n  rowIndex: number\n) => {\n  const row = document.createElement('tr');\n  columnList.forEach(columnIndex => {\n    addCellToRow(row, cell, rowIndex, columnIndex);\n  });\n  tbody.appendChild(row);\n};\n\nconst copyGridElements = async ({\n  cell,\n  selection,\n  rowCount,\n  columnCount,\n  pageStart = 0,\n  focus,\n  outerRef,\n}: CopyGridElementsProps): Promise<void> => {\n  if (!outerRef.current) {\n    throw 'Could not fetch selection';\n  }\n  const table = document.createElement('table');\n  table.style.position = 'absolute';\n  table.style.top = '-200px';\n  table.style.left = '-200px';\n  table.style.width = '0px';\n  table.style.height = '0px';\n  table.style.overflow = 'hidden';\n  const thead = document.createElement('thead');\n  const tbody = document.createElement('tbody');\n\n  switch (selection.type) {\n    case 'rectangle':\n      Array.from(\n        { length: selection.bounds.bottom + 1 - selection.bounds.top },\n        (_, index) => selection.bounds.top + index\n      ).forEach(rowIndex => {\n        const columnList = Array.from(\n          { length: selection.bounds.right + 1 - selection.bounds.left },\n          (_, index) => selection.bounds.left + index\n        );\n        columnListLoop(tbody, columnList, cell, rowIndex);\n      });\n      break;\n    case 'columns':\n      Array.from({ length: rowCount }, (_, index) => pageStart + index).forEach(\n        rowIndex => {\n          const columnList = [...selection.columns].sort();\n          columnListLoop(tbody, columnList, cell, rowIndex);\n        }\n      );\n      break;\n    case 'rows':\n      [...selection.rows].sort().forEach(rowIndex => {\n        const columnList = Array.from(\n          { length: columnCount },\n          (_, index) => pageStart + index\n        );\n        columnListLoop(tbody, columnList, cell, rowIndex);\n      });\n      break;\n    case 'empty':\n      columnListLoop(tbody, [focus.column], cell, focus.row);\n      break;\n    default:\n      throw new Error('incorrect selection provided');\n  }\n\n  table.appendChild(thead);\n  table.appendChild(tbody);\n\n  outerRef.current.appendChild(table);\n\n  const windowSelection = window.getSelection();\n  if (windowSelection) {\n    const range = document.createRange();\n    range.selectNodeContents(table);\n    windowSelection.removeAllRanges();\n    windowSelection.addRange(range);\n    await navigator.clipboard.writeText(table.innerText);\n    windowSelection.removeAllRanges();\n\n    outerRef.current.removeChild(table);\n  } else {\n    throw 'Could not fetch selection';\n  }\n};\n\nexport default copyGridElements;\n"],"names":[],"mappings":"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"}