@punkbit/cui 0.0.251-rc.16 → 0.2.0-rc.3

package/dist/esm/components/GenericLabel/index.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+
+const FormFieldLabel = styled.label.withConfig({
+  componentId: "sc-sar0r3-0"
+})(["", ""], ({
+  theme,
+  disabled
+}) => `
+    ${disabled ? `
+    color: ${theme.click.field.color.genericLabel.disabled};
+    font: ${theme.click.field.typography.genericLabel.disabled};
+    cursor: not-allowed;
+    ` : `
+    cursor: pointer;
+    color: ${theme.click.field.color.genericLabel.default};
+    font: ${theme.click.field.typography.genericLabel.default};
+    &:hover {
+      color: ${theme.click.field.color.genericLabel.hover};
+      font: ${theme.click.field.typography.genericLabel.hover};
+    }
+    &:focus, &:focus-within {
+      color: ${theme.click.field.color.genericLabel.active};
+      font: ${theme.click.field.typography.genericLabel.active};
+    }
+    `};
+  `);
+const GenericLabel = ({
+  disabled,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(FormFieldLabel, { disabled, ...props, children });
+
+export { GenericLabel };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/GenericLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/GenericLabel/GenericLabel.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { GenericLabelProps } from './GenericLabel.types';\n\ninterface FormFieldLableProps {\n  disabled?: boolean;\n  htmlFor?: string;\n}\n\nconst FormFieldLabel = styled.label<FormFieldLableProps>`\n  ${({ theme, disabled }) => `\n    ${\n      disabled\n        ? `\n    color: ${theme.click.field.color.genericLabel.disabled};\n    font: ${theme.click.field.typography.genericLabel.disabled};\n    cursor: not-allowed;\n    `\n        : `\n    cursor: pointer;\n    color: ${theme.click.field.color.genericLabel.default};\n    font: ${theme.click.field.typography.genericLabel.default};\n    &:hover {\n      color: ${theme.click.field.color.genericLabel.hover};\n      font: ${theme.click.field.typography.genericLabel.hover};\n    }\n    &:focus, &:focus-within {\n      color: ${theme.click.field.color.genericLabel.active};\n      font: ${theme.click.field.typography.genericLabel.active};\n    }\n    `\n    };\n  `}\n`;\n\nexport const GenericLabel = ({ disabled, children, ...props }: GenericLabelProps) => (\n  <FormFieldLabel\n    disabled={disabled}\n    {...props}\n  >\n    {children}\n  </FormFieldLabel>\n);\n"],"names":["FormFieldLabel","styled","label","withConfig","componentId","theme","disabled","click","field","color","genericLabel","typography","default","hover","active","GenericLabel","children","props"],"mappings":";;;AAQA,MAAMA,cAAAA,GAAiBC,MAAAA,CAAOC,KAAAA,CAAKC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAS,CAAA,KAAM;AAAA,IAAA,EAEvBA,QAAAA,GACI;AAAA,WAAA,EACGD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaJ,QAAQ,CAAA;AAAA,UAAA,EAC9CD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaJ,QAAQ,CAAA;AAAA;AAAA,IAAA,CAAA,GAGpD;AAAA;AAAA,WAAA,EAEGD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaE,OAAO,CAAA;AAAA,UAAA,EAC7CP,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaE,OAAO,CAAA;AAAA;AAAA,aAAA,EAE9CP,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaG,KAAK,CAAA;AAAA,YAAA,EAC3CR,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaG,KAAK,CAAA;AAAA;AAAA;AAAA,aAAA,EAG9CR,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,aAAaI,MAAM,CAAA;AAAA,YAAA,EAC5CT,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMG,UAAAA,CAAWD,aAAaI,MAAM,CAAA;AAAA;AAAA,IAAA,CAEzD,CAAA;AAAA,EAAA,CAEF,CAAA;AAGI,MAAMC,eAAeA,CAAC;AAAA,EAAET,QAAAA;AAAAA,EAAUU,QAAAA;AAAAA,EAAU,GAAGC;AAAyB,CAAA,qBAC7E,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,EACA,GAAIA,OAEHD,QAAAA,EACH;;;;"}

package/dist/esm/components/GenericMenu/index.js

@@ -0,0 +1,107 @@
+import { styled } from 'styled-components';
+
+const GenericMenuPanel = styled.div.withConfig({
+  componentId: "sc-15jqym3-0"
+})(["outline:none;max-width:var(--radix-", "-content-available-width);max-height:var(--radix-", "-content-available-height);overflow:hidden;display:flex;align-items:flex-start;pointer-events:auto;", ";", ";"], ({
+  $type
+}) => $type, ({
+  $type
+}) => $type, ({
+  theme
+}) => `
+    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};
+    background: ${theme.click.genericMenu.panel.color.background.default};
+    box-shadow: ${theme.click.genericMenu.panel.shadow.default};
+    border-radius: ${theme.click.genericMenu.panel.radii.all};
+  `, ({
+  $showArrow
+}) => $showArrow ? `
+      &[data-side="bottom"] {
+        margin-top: -1px;
+      }
+      &[data-side="top"] {
+        margin-bottom: 1px;
+      }
+      &[data-side="left"] {
+        margin-right: -1px;
+      }
+      }
+      &[data-side="right"] {
+        margin-left: -1px;
+      }
+  ` : "");
+const GenericPopoverMenuPanel = styled.div.withConfig({
+  componentId: "sc-15jqym3-1"
+})(["outline:none;max-width:var(--radix-", "-content-available-width);max-height:var(--radix-", "-content-available-height);overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;z-index:1;", " ", ";"], ({
+  $type
+}) => $type, ({
+  $type
+}) => $type, ({
+  theme
+}) => `
+    border: 1px solid ${theme.click.popover.color.panel.stroke.default};
+    background: ${theme.click.popover.color.panel.background.default};
+    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};
+    border-radius: ${theme.click.popover.radii.all};
+    box-shadow: ${theme.click.popover.shadow.default};
+  `, ({
+  $showArrow
+}) => $showArrow ? "margin: -1px 0;" : "");
+const Arrow = styled.svg.withConfig({
+  componentId: "sc-15jqym3-2"
+})(["filter:drop-shadow(rgba(0,0,0,0.1) 0px 4px 6px);", ";"], ({
+  theme
+}) => `
+    fill: ${theme.click.genericMenu.panel.color.background.default};
+    stroke: ${theme.click.genericMenu.panel.color.stroke.default};
+  `);
+const GenericMenuItem = styled.div.withConfig({
+  componentId: "sc-15jqym3-3"
+})(["display:flex;width:100%;width:-moz-available;width:-webkit-fill-available;width:fill-available;width:stretch;align-items:center;justify-content:flex-start;cursor:default;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;&:focus{outline:none;}", ";position:relative;&:hover .dropdown-arrow,&[data-state='open'] .dropdown-arrow{left:0.5rem;}&[hidden]{display:none;}"], ({
+  theme,
+  $type = "default"
+}) => {
+  const colorKey = $type === "danger" ? "danger" : "default";
+  return `
+    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};
+    gap: ${theme.click.genericMenu.item.space.gap};
+    font: ${theme.click.genericMenu.item.typography.label.default};
+    background: ${theme.click.genericMenu.item.color[colorKey].background.default};
+    color: ${theme.click.genericMenu.item.color[colorKey].text.default};
+    &[data-highlighted] {
+      font: ${theme.click.genericMenu.item.typography.label.hover};
+      background: ${theme.click.genericMenu.item.color[colorKey].background.hover};
+      color:${theme.click.genericMenu.item.color[colorKey].text.hover};
+      cursor: pointer;
+    }
+    [data-input-modality="keyboard"] &[data-highlighted] {
+      outline: 2px solid ${theme.click.global.color.accent.default};
+      outline-offset: -2px;
+    }
+    &[data-state="open"] {
+      background:${theme.click.genericMenu.item.color[colorKey].background.hover};
+      color:${theme.click.genericMenu.item.color[colorKey].text.hover};
+      font: ${theme.click.genericMenu.item.typography.label.hover};
+      cursor: pointer;
+    }
+    &[data-state="checked"], &[data-selected="true"]  {
+      background:${theme.click.genericMenu.item.color[colorKey].background.active};
+      color:${theme.click.genericMenu.item.color[colorKey].text.active};
+      font: ${theme.click.genericMenu.item.typography.label.active};
+    }
+    &[data-disabled] {
+      color:${theme.click.genericMenu.item.color[colorKey].text.disabled};
+      font: ${theme.click.genericMenu.item.typography.label.disabled};
+      pointer-events: none;
+    }
+    &:visited {
+      color: ${theme.click.genericMenu.item.color[colorKey].text.default};
+      a {
+        color: ${theme.click.genericMenu.item.color[colorKey].text.default};
+      }
+    }
+  `;
+});
+
+export { Arrow, GenericMenuItem, GenericMenuPanel, GenericPopoverMenuPanel };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/GenericMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const GenericMenuPanel = styled.div<{\n  $type: 'popover' | 'dropdown-menu' | 'context-menu';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  align-items: flex-start;\n  pointer-events: auto;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `};\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: 1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n      }\n  `\n      : ''};\n`;\n\nexport const GenericPopoverMenuPanel = styled.div<{\n  $type: 'popover' | 'hover-card';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.popover.color.panel.stroke.default};\n    background: ${theme.click.popover.color.panel.background.default};\n    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};\n    border-radius: ${theme.click.popover.radii.all};\n    box-shadow: ${theme.click.popover.shadow.default};\n  `}\n  ${({ $showArrow }) => ($showArrow ? 'margin: -1px 0;' : '')};\n`;\n\nexport const Arrow = styled.svg`\n  filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);\n  ${({ theme }) => `\n    fill: ${theme.click.genericMenu.panel.color.background.default};\n    stroke: ${theme.click.genericMenu.panel.color.stroke.default};\n  `};\n`;\n\nexport const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`\n  display: flex;\n  width: 100%;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ theme, $type = 'default' }) => {\n    const colorKey = $type === 'danger' ? 'danger' : 'default';\n    return `\n    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};\n    gap: ${theme.click.genericMenu.item.space.gap};\n    font: ${theme.click.genericMenu.item.typography.label.default};\n    background: ${theme.click.genericMenu.item.color[colorKey].background.default};\n    color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n    &[data-highlighted] {\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      background: ${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      cursor: pointer;\n    }\n    [data-input-modality=\"keyboard\"] &[data-highlighted] {\n      outline: 2px solid ${theme.click.global.color.accent.default};\n      outline-offset: -2px;\n    }\n    &[data-state=\"open\"] {\n      background:${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      cursor: pointer;\n    }\n    &[data-state=\"checked\"], &[data-selected=\"true\"]  {\n      background:${theme.click.genericMenu.item.color[colorKey].background.active};\n      color:${theme.click.genericMenu.item.color[colorKey].text.active};\n      font: ${theme.click.genericMenu.item.typography.label.active};\n    }\n    &[data-disabled] {\n      color:${theme.click.genericMenu.item.color[colorKey].text.disabled};\n      font: ${theme.click.genericMenu.item.typography.label.disabled};\n      pointer-events: none;\n    }\n    &:visited {\n      color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      a {\n        color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      }\n    }\n  `;\n  }};\n  position: relative;\n  &:hover .dropdown-arrow,\n  &[data-state='open'] .dropdown-arrow {\n    left: 0.5rem;\n  }\n  &[hidden] {\n    display: none;\n  }\n`;\n"],"names":["GenericMenuPanel","styled","div","withConfig","componentId","$type","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","$showArrow","GenericPopoverMenuPanel","popover","space","y","x","Arrow","svg","GenericMenuItem","colorKey","item","gap","typography","label","text","hover","global","accent","active","disabled"],"mappings":"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"}

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

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo, useRef, useEffect } from 'react';
+import { areEqual } from 'react-window';
+import { StyledCell } from './StyledCell.js';
+
+const Cell = memo(({
+  data,
+  rowIndex,
+  columnIndex,
+  style,
+  ...props
+}) => {
+  const {
+    cell: CellData,
+    getSelectionType,
+    focus,
+    columnCount,
+    rowCount,
+    showRowNumber,
+    showHeader,
+    rowHeight,
+    rowStart,
+    rowAutoHeight,
+    updateRowHeight
+  } = data;
+  const currentRowIndex = rowIndex + rowStart;
+  const {
+    row: focusedRow,
+    column: focusedColumn
+  } = focus;
+  const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;
+  const rightOfFocus = columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;
+  const belowFocus = columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;
+  const selectionType = getSelectionType({
+    row: currentRowIndex,
+    column: columnIndex,
+    type: "cell"
+  });
+  const rightSelection = getSelectionType({
+    row: currentRowIndex,
+    column: columnIndex - 1,
+    type: "cell"
+  });
+  const belowSelection = getSelectionType({
+    row: currentRowIndex - 1,
+    column: columnIndex,
+    type: "cell"
+  });
+  const rightOfSelectionBorder = (selectionType === "selectDirect" || rightSelection === "selectDirect") && selectionType !== rightSelection;
+  const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
+  const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
+  const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
+  const cellRef = useRef(null);
+  useEffect(() => {
+    if (!rowAutoHeight || !cellRef.current) {
+      return;
+    }
+    const height = cellRef.current.getBoundingClientRect().height;
+    updateRowHeight(rowIndex, height);
+  }, [updateRowHeight, rowIndex, rowAutoHeight]);
+  const styleWithHeight = {
+    ...style,
+    height: "auto"
+  };
+  return /* @__PURE__ */ jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
+}, areEqual);
+
+export { Cell };
+//# sourceMappingURL=Cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      showRowNumber,\n      showHeader,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $isFirstColumn={columnIndex === 0 && !showRowNumber}\n          $isFirstRow={rowIndex === 0 && !showHeader}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","showRowNumber","showHeader","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","areEqual"],"mappings":"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"}

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

@@ -0,0 +1,108 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, useCallback } from 'react';
+import { styled } from 'styled-components';
+import { throttle } from 'lodash-es';
+import { initialPosition } from './useResizingState.js';
+
+const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
+const ResizeSpan = styled.div.withConfig({
+  componentId: "sc-p7utwv-0"
+})(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], initialPosition.top, initialPosition.left, ({
+  $height
+}) => $height, ({
+  theme
+}) => theme.click.grid.header.cell.color.stroke.selectDirect, ({
+  $isPressed
+}) => $isPressed && `
+      height: 100%;
+      position: fixed;
+    `);
+const ColumnResizer = ({
+  height,
+  onColumnResize: onColumnResizeProp,
+  columnIndex,
+  getResizerPosition,
+  columnWidth,
+  resizingState
+}) => {
+  const resizeRef = useRef(null);
+  const {
+    pointer,
+    setPointer,
+    getIsPressed,
+    setIsPressed,
+    getPosition,
+    setPosition,
+    lastPressedTimestamp
+  } = resizingState;
+  const isPressed = getIsPressed(columnIndex);
+  const position = getPosition(columnIndex);
+  const onColumnResize = throttle(onColumnResizeProp, 1e3);
+  useEffect(() => {
+    const control = resizeRef.current;
+    if (!isPressed || !control || !pointer) {
+      return;
+    }
+    const pointerId = pointer.pointerId;
+    try {
+      control.setPointerCapture(pointerId);
+      return () => {
+        if (control.hasPointerCapture(pointerId)) {
+          control.releasePointerCapture(pointerId);
+        }
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }, [pointer, isPressed, columnIndex]);
+  const onPointerDown = useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (resizeRef.current) {
+      if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {
+        onColumnResize(columnIndex, 0, "auto");
+      }
+      setPointer({
+        pointerId: e.pointerId,
+        initialClientX: e.clientX,
+        width: columnWidth
+      });
+      setIsPressed(columnIndex, true);
+      const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);
+      setPosition(pos);
+    }
+  }, [lastPressedTimestamp, setPointer, columnWidth, setIsPressed, columnIndex, getResizerPosition, setPosition, onColumnResize]);
+  const onPointerMove = useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (isPressed && pointer) {
+      const width = columnWidth + (e.clientX - pointer.initialClientX);
+      const pos = getResizerPosition(e.clientX, width, columnIndex);
+      setPosition(pos);
+      pointer.width = Math.max(width, 50);
+    }
+  }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
+  return /* @__PURE__ */ jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (resizeRef.current && // 0 is a valid pointerId in Firefox
+    (pointer?.pointerId || pointer?.pointerId === 0)) {
+      const shouldCallResize = e.clientX !== pointer.initialClientX;
+      if (shouldCallResize) {
+        onColumnResize(columnIndex, pointer.width, "manual");
+      }
+      setPosition(initialPosition);
+      setPointer(null);
+      setIsPressed(columnIndex, false);
+    }
+  }, onPointerMove, onPointerCancel: (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setPosition(initialPosition);
+    setPointer(null);
+    setIsPressed(columnIndex, false);
+  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
+};
+
+export { ColumnResizer as default };
+//# sourceMappingURL=ColumnResizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.js","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import { PointerEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { styled } from 'styled-components';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst ResizeSpan = styled.div<{ $height: number; $isPressed: boolean }>`\n  top: ${initialPosition.top};\n  left: ${initialPosition.left};\n  z-index: 1;\n  position: absolute;\n  height: ${({ $height }) => $height}px;\n  cursor: col-resize;\n  width: 4px;\n  overflow: auto;\n  &:hover,\n  &:active,\n  &:hover {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n  ${({ $isPressed }) =>\n    $isPressed &&\n    `\n      height: 100%;\n      position: fixed;\n    `}\n`;\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <ResizeSpan\n      ref={resizeRef}\n      $height={height}\n      $isPressed={isPressed}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={position}\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["DOUBLE_CLICK_THRESHOLD_MSEC","ResizeSpan","styled","div","withConfig","componentId","initialPosition","top","left","$height","theme","click","grid","header","cell","color","stroke","selectDirect","$isPressed","ColumnResizer","height","onColumnResize","onColumnResizeProp","columnIndex","getResizerPosition","columnWidth","resizingState","resizeRef","useRef","pointer","setPointer","getIsPressed","setIsPressed","getPosition","setPosition","lastPressedTimestamp","isPressed","position","throttle","useEffect","control","current","pointerId","setPointerCapture","hasPointerCapture","releasePointerCapture","e","console","error","onPointerDown","useCallback","stopPropagation","preventDefault","Date","now","initialClientX","clientX","width","pos","onPointerMove","Math","max","shouldCallResize"],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { StyledCell } from './StyledCell.js';
+import ColumnResizer from './ColumnResizer.js';
+
+const HeaderContainer = styled.div.withConfig({
+  componentId: "sc-1439i96-0"
+})(["position:sticky;top:0;left:0;display:flex;flex-direction:row;height:", "px;", ""], ({
+  $height
+}) => $height, ({
+  $scrolledVertical,
+  theme
+}) => $scrolledVertical ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
+const ScrollableHeaderContainer = styled.div.withConfig({
+  componentId: "sc-1439i96-1"
+})(["position:relative;left:", "px;"], ({
+  $left
+}) => $left);
+const HeaderCellContainer = styled.div.withConfig({
+  componentId: "sc-1439i96-2"
+})(["position:absolute;display:flex;width:", ";height:", "px;left:", "px;&:hover [data-resize]{background:", ";}"], ({
+  $width
+}) => typeof $width === "string" ? $width : `${$width}px`, ({
+  $height
+}) => $height, ({
+  $columnPosition
+}) => $columnPosition, ({
+  theme
+}) => theme.click.grid.header.cell.color.stroke.selectDirect);
+const RowColumnContainer = styled(HeaderCellContainer).withConfig({
+  componentId: "sc-1439i96-3"
+})(["position:sticky;top:0;left:0;width:", ";text-align:right;", ""], ({
+  $width
+}) => typeof $width === "string" ? $width : `${$width}px`, ({
+  $scrolledHorizontal,
+  theme
+}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
+const RowColumn = styled(StyledCell).withConfig({
+  componentId: "sc-1439i96-4"
+})(["width:100%;text-align:right;overflow:hidden;"]);
+const Column = ({
+  columnIndex,
+  cell,
+  getColumnWidth,
+  getColumnHorizontalPosition,
+  getSelectionType,
+  isFirstColumn,
+  isLastColumn,
+  onColumnResize,
+  height,
+  getResizerPosition,
+  showBorder,
+  resizingState
+}) => {
+  const selectionType = getSelectionType({
+    column: columnIndex,
+    type: "column"
+  });
+  const leftSelectionType = getSelectionType({
+    column: columnIndex - 1,
+    type: "column"
+  });
+  const columnPosition = getColumnHorizontalPosition(columnIndex);
+  const isSelected = selectionType === "selectDirect";
+  const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
+  const columnWidth = getColumnWidth(columnIndex);
+  return /* @__PURE__ */ jsxs(HeaderCellContainer, { $width: columnWidth, $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
+    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
+    /* @__PURE__ */ jsx(ColumnResizer, { height, onColumnResize, columnIndex, getResizerPosition, columnWidth, resizingState })
+  ] });
+};
+const Header = ({
+  scrolledVertical,
+  scrolledHorizontal,
+  showRowNumber,
+  rowNumberWidth,
+  minColumn,
+  maxColumn,
+  height,
+  getColumnWidth,
+  cell,
+  columnCount,
+  getSelectionType,
+  onColumnResize,
+  getColumnHorizontalPosition,
+  getResizerPosition,
+  showBorder,
+  resizingState
+}) => {
+  const selectedAllType = getSelectionType({
+    type: "all"
+  });
+  return /* @__PURE__ */ jsxs(HeaderContainer, { $height: height, $scrolledVertical: scrolledVertical, children: [
+    /* @__PURE__ */ jsx(ScrollableHeaderContainer, { $left: rowNumberWidth, children: Array.from({
+      length: maxColumn - minColumn + 1
+    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
+    showRowNumber && /* @__PURE__ */ jsx(RowColumnContainer, { $width: rowNumberWidth, $height: height, $columnPosition: 0, $scrolledHorizontal: scrolledHorizontal, children: /* @__PURE__ */ jsx(RowColumn, { "data-selected": selectedAllType === "selectDirect", $type: "header", $isFirstRow: true, $isFirstColumn: true, $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
+  ] });
+};
+
+export { Header as default };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Grid/Header.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport {\n  CellProps,\n  ColumnResizeFn,\n  GetResizerPositionFn,\n  SelectionTypeFn,\n} from './types';\nimport { StyledCell } from './StyledCell';\nimport ColumnResizer from './ColumnResizer';\nimport { ResizingState } from './useResizingState';\n\ninterface HeaderProps {\n  showRowNumber: boolean;\n  rowNumberWidth: number;\n  minColumn: number;\n  maxColumn: number;\n  height: number;\n  getColumnWidth: (index: number) => number;\n  cell: CellProps;\n  getSelectionType: SelectionTypeFn;\n  columnCount: number;\n  onColumnResize: ColumnResizeFn;\n  getColumnHorizontalPosition: (columnIndex: number) => number;\n  scrolledVertical: boolean;\n  getResizerPosition: GetResizerPositionFn;\n  showBorder: boolean;\n  scrolledHorizontal: boolean;\n  resizingState: ResizingState;\n}\n\nconst HeaderContainer = styled.div<{ $height: number; $scrolledVertical: boolean }>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: row;\n  height: ${({ $height }) => $height}px;\n  ${({ $scrolledVertical, theme }) =>\n    $scrolledVertical\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst ScrollableHeaderContainer = styled.div<{\n  $left: number;\n}>`\n  position: relative;\n  left: ${({ $left }) => $left}px;\n`;\n\ninterface ColumnProps extends Pick<\n  HeaderProps,\n  | 'cell'\n  | 'getSelectionType'\n  | 'onColumnResize'\n  | 'getColumnWidth'\n  | 'height'\n  | 'getResizerPosition'\n  | 'showBorder'\n  | 'getColumnHorizontalPosition'\n  | 'resizingState'\n> {\n  columnIndex: number;\n  isFirstColumn: boolean;\n  isLastColumn: boolean;\n}\n\nconst HeaderCellContainer = styled.div<{\n  $width: string | number;\n  $height: number;\n  $columnPosition: number;\n}>`\n  position: absolute;\n  display: flex;\n  width: ${({ $width }) => (typeof $width === 'string' ? $width : `${$width}px`)};\n  height: ${({ $height }) => $height}px;\n  left: ${({ $columnPosition }) => $columnPosition}px;\n  &:hover [data-resize] {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n`;\n\nconst RowColumnContainer = styled(HeaderCellContainer)<{\n  $width: string | number;\n  $scrolledHorizontal: boolean;\n}>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: ${({ $width }) => (typeof $width === 'string' ? $width : `${$width}px`)};\n  text-align: right;\n  ${({ $scrolledHorizontal, theme }) =>\n    $scrolledHorizontal\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst RowColumn = styled(StyledCell)`\n  width: 100%;\n  text-align: right;\n  overflow: hidden;\n`;\n\nconst Column = ({\n  columnIndex,\n  cell,\n  getColumnWidth,\n  getColumnHorizontalPosition,\n  getSelectionType,\n  isFirstColumn,\n  isLastColumn,\n  onColumnResize,\n  height,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: ColumnProps) => {\n  const selectionType = getSelectionType({\n    column: columnIndex,\n    type: 'column',\n  });\n  const leftSelectionType = getSelectionType({\n    column: columnIndex - 1,\n    type: 'column',\n  });\n  const columnPosition = getColumnHorizontalPosition(columnIndex);\n\n  const isSelected = selectionType === 'selectDirect';\n  const isSelectedLeft =\n    (leftSelectionType === 'selectDirect' || isSelected) &&\n    leftSelectionType !== selectionType;\n\n  const columnWidth = getColumnWidth(columnIndex);\n  return (\n    <HeaderCellContainer\n      $width={columnWidth}\n      $columnPosition={columnPosition}\n      $height={height}\n      data-header={columnIndex}\n    >\n      <StyledCell\n        $type=\"header\"\n        as={cell}\n        columnIndex={columnIndex}\n        type=\"header-cell\"\n        $isFirstColumn={isFirstColumn}\n        $selectionType={selectionType}\n        $isLastColumn={isLastColumn}\n        $isFocused={false}\n        $isSelectedLeft={isSelectedLeft}\n        $isSelectedTop={isSelected}\n        $isLastRow={false}\n        $isFirstRow\n        $height={height}\n        data-grid-row={-1}\n        data-grid-column={columnIndex}\n        data-selected={isSelected}\n        $showBorder={showBorder}\n        width={columnWidth}\n      />\n      <ColumnResizer\n        height={height}\n        onColumnResize={onColumnResize}\n        columnIndex={columnIndex}\n        getResizerPosition={getResizerPosition}\n        columnWidth={columnWidth}\n        resizingState={resizingState}\n      />\n    </HeaderCellContainer>\n  );\n};\n\nconst Header = ({\n  scrolledVertical,\n  scrolledHorizontal,\n  showRowNumber,\n  rowNumberWidth,\n  minColumn,\n  maxColumn,\n  height,\n  getColumnWidth,\n  cell,\n  columnCount,\n  getSelectionType,\n  onColumnResize,\n  getColumnHorizontalPosition,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: HeaderProps) => {\n  const selectedAllType = getSelectionType({\n    type: 'all',\n  });\n  return (\n    <HeaderContainer\n      $height={height}\n      $scrolledVertical={scrolledVertical}\n    >\n      <ScrollableHeaderContainer $left={rowNumberWidth}>\n        {Array.from(\n          { length: maxColumn - minColumn + 1 },\n          (_, index) => minColumn + index\n        ).map(columnIndex => (\n          <Column\n            key={`header-${columnIndex}`}\n            getSelectionType={getSelectionType}\n            columnIndex={columnIndex}\n            getColumnWidth={getColumnWidth}\n            getColumnHorizontalPosition={getColumnHorizontalPosition}\n            cell={cell}\n            isFirstColumn={columnIndex === 0 && !showRowNumber}\n            isLastColumn={columnIndex + 1 === columnCount}\n            onColumnResize={onColumnResize}\n            height={height}\n            getResizerPosition={getResizerPosition}\n            showBorder={showBorder}\n            resizingState={resizingState}\n          />\n        ))}\n      </ScrollableHeaderContainer>\n      {showRowNumber && (\n        <RowColumnContainer\n          $width={rowNumberWidth}\n          $height={height}\n          $columnPosition={0}\n          $scrolledHorizontal={scrolledHorizontal}\n        >\n          <RowColumn\n            data-selected={selectedAllType === 'selectDirect'}\n            $type=\"header\"\n            $isFirstRow\n            $isFirstColumn\n            $selectionType={selectedAllType}\n            $isLastRow={false}\n            $isLastColumn={false}\n            $height={height}\n            $isFocused={false}\n            $isSelectedLeft={false}\n            $isSelectedTop={false}\n            data-grid-row={-1}\n            data-grid-column={-1}\n            $showBorder={showBorder}\n          >\n            #\n          </RowColumn>\n        </RowColumnContainer>\n      )}\n    </HeaderContainer>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderContainer","styled","div","withConfig","componentId","$height","$scrolledVertical","theme","click","grid","header","cell","color","stroke","default","ScrollableHeaderContainer","$left","HeaderCellContainer","$width","$columnPosition","selectDirect","RowColumnContainer","$scrolledHorizontal","RowColumn","StyledCell","Column","columnIndex","getColumnWidth","getColumnHorizontalPosition","getSelectionType","isFirstColumn","isLastColumn","onColumnResize","height","getResizerPosition","showBorder","resizingState","selectionType","column","type","leftSelectionType","columnPosition","isSelected","isSelectedLeft","columnWidth","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","Array","from","length","_","index","map"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { StyledCell } from './StyledCell.js';
+
+const RowNumberColumnContainer = styled.div.withConfig({
+  componentId: "sc-68jz95-0"
+})(["position:sticky;left:0;", " ", ""], ({
+  $height,
+  $width
+}) => `
+    top: ${$height}px;
+    width: ${$width}px;
+    height: 100%;
+  `, ({
+  $scrolledHorizontal,
+  theme
+}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
+const RowNumberCell = styled.div.withConfig({
+  componentId: "sc-68jz95-1"
+})(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
+  $height,
+  $rowNumber,
+  $rowAutoHeight
+}) => `
+    top: ${$height * $rowNumber}px;
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
+  `);
+const RowNumber = ({
+  rowIndex,
+  rowHeight,
+  getSelectionType,
+  isLastRow,
+  isFirstRow,
+  showBorder,
+  rowStart,
+  rowAutoHeight
+}) => {
+  const currentRowIndex = rowIndex + rowStart;
+  const selectionType = getSelectionType({
+    row: currentRowIndex,
+    type: "row"
+  });
+  const isSelected = selectionType === "selectDirect";
+  const topSelectionType = getSelectionType({
+    row: currentRowIndex - 1,
+    type: "row"
+  });
+  const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
+  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+};
+const RowNumberColumn = ({
+  minRow,
+  maxRow,
+  rowHeight,
+  headerHeight,
+  rowWidth,
+  getSelectionType,
+  rowCount,
+  showHeader,
+  scrolledHorizontal,
+  rowStart = 0,
+  showBorder,
+  rowAutoHeight
+}) => {
+  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
+    length: maxRow - minRow + 1
+  }, (_, index) => minRow + index).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
+};
+
+export { RowNumberColumn as default };
+//# sourceMappingURL=RowNumberColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RowNumberColumn.js","sources":["../../../../src/components/Grid/RowNumberColumn.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectionTypeFn } from './types';\nimport { StyledCell } from './StyledCell';\nconst RowNumberColumnContainer = styled.div<{\n  $height: number;\n  $width: number;\n  $scrolledHorizontal: boolean;\n  $rowAutoHeight?: boolean;\n}>`\n  position: sticky;\n  left: 0;\n  ${({ $height, $width }) => `\n    top: ${$height}px;\n    width: ${$width}px;\n    height: 100%;\n  `}\n\n  ${({ $scrolledHorizontal, theme }) =>\n    $scrolledHorizontal\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst RowNumberCell = styled.div<{\n  $height: number;\n  $rowNumber: number;\n  $rowAutoHeight?: boolean;\n}>`\n  position: absolute;\n  left: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n  ${({ $height, $rowNumber, $rowAutoHeight }) => `\n    top: ${$height * $rowNumber}px;\n    height: ${$rowAutoHeight ? '100%' : `${$height}px`};\n  `}\n`;\ninterface RowNumberColumnProps {\n  minRow: number;\n  maxRow: number;\n  rowHeight: number;\n  headerHeight: number;\n  rowWidth: number;\n  getSelectionType: SelectionTypeFn;\n  rowCount: number;\n  showHeader: boolean;\n  scrolledHorizontal: boolean;\n  rowStart: number;\n  showBorder: boolean;\n  rowAutoHeight?: boolean;\n}\ninterface RowNumberProps extends Pick<\n  RowNumberColumnProps,\n  'rowHeight' | 'getSelectionType' | 'showBorder' | 'rowStart'\n> {\n  rowIndex: number;\n  isLastRow: boolean;\n  isFirstRow: boolean;\n  rowAutoHeight?: boolean;\n}\nconst RowNumber = ({\n  rowIndex,\n  rowHeight,\n  getSelectionType,\n  isLastRow,\n  isFirstRow,\n  showBorder,\n  rowStart,\n  rowAutoHeight,\n}: RowNumberProps) => {\n  const currentRowIndex = rowIndex + rowStart;\n  const selectionType = getSelectionType({\n    row: currentRowIndex,\n    type: 'row',\n  });\n  const isSelected = selectionType === 'selectDirect';\n  const topSelectionType = getSelectionType({\n    row: currentRowIndex - 1,\n    type: 'row',\n  });\n  const isSelectedTop =\n    (topSelectionType === 'selectDirect' || isSelected) &&\n    topSelectionType !== selectionType;\n\n  return (\n    <RowNumberCell\n      $rowNumber={rowIndex}\n      $height={rowHeight}\n      $rowAutoHeight={rowAutoHeight}\n    >\n      <StyledCell\n        $height={rowHeight}\n        $isLastColumn={false}\n        $selectionType={selectionType}\n        $isFirstColumn\n        $type=\"header\"\n        $isFirstRow={isFirstRow}\n        $isFocused={false}\n        $isLastRow={isLastRow}\n        $isSelectedLeft={isSelected}\n        $isSelectedTop={isSelectedTop}\n        $rowAutoHeight={rowAutoHeight}\n        data-selected={isSelected}\n        data-grid-row={currentRowIndex}\n        data-grid-column={-1}\n        data-testid={`header-cell-${currentRowIndex}-x`}\n        $showBorder={showBorder}\n        data-align=\"right\"\n      >\n        {currentRowIndex}\n      </StyledCell>\n    </RowNumberCell>\n  );\n};\n\nconst RowNumberColumn = ({\n  minRow,\n  maxRow,\n  rowHeight,\n  headerHeight,\n  rowWidth,\n  getSelectionType,\n  rowCount,\n  showHeader,\n  scrolledHorizontal,\n  rowStart = 0,\n  showBorder,\n  rowAutoHeight,\n}: RowNumberColumnProps) => {\n  return (\n    <RowNumberColumnContainer\n      $height={headerHeight}\n      $width={rowWidth}\n      $scrolledHorizontal={scrolledHorizontal}\n      $rowAutoHeight={rowAutoHeight}\n    >\n      {Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(\n        rowIndex => (\n          <RowNumber\n            key={`row-number-${rowIndex}`}\n            getSelectionType={getSelectionType}\n            rowHeight={rowHeight}\n            rowIndex={rowIndex}\n            isLastRow={rowIndex === rowCount}\n            isFirstRow={!showHeader && rowIndex === 0}\n            showBorder={showBorder}\n            rowStart={rowStart}\n            rowAutoHeight={rowAutoHeight}\n          />\n        )\n      )}\n    </RowNumberColumnContainer>\n  );\n};\n\nexport default RowNumberColumn;\n"],"names":["RowNumberColumnContainer","styled","div","withConfig","componentId","$height","$width","$scrolledHorizontal","theme","click","grid","header","cell","color","stroke","default","RowNumberCell","$rowNumber","$rowAutoHeight","RowNumber","rowIndex","rowHeight","getSelectionType","isLastRow","isFirstRow","showBorder","rowStart","rowAutoHeight","currentRowIndex","selectionType","row","type","isSelected","topSelectionType","isSelectedTop","RowNumberColumn","minRow","maxRow","headerHeight","rowWidth","rowCount","showHeader","scrolledHorizontal","Array","from","length","_","index","map"],"mappings":"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"}