@join-x5/react-data-grid 1.1.4-nightly → 1.3.0-rcc

package/dist/TableCell/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport styled from '@emotion/styled';\nimport {flexRender} from '@tanstack/react-table';\n\nimport {forwardRef, SizeTokenValue, useRefMerge} from '@join-x5/react-theme';\nimport {EditOnIcon} from '@join-x5/react-icons';\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {useDataGridTableCell} from './hook';\n\nimport type {HTMLAttributes, KeyboardEventHandler} from 'react';\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from './types';\n\nconst sizePadding: Record<SizeTokenValue, number> = {\n  [SizeTokenValue.XXSmall]: 8,\n  [SizeTokenValue.XSmall]: 8,\n  [SizeTokenValue.Small]: 8,\n  [SizeTokenValue.Medium]: 12,\n  [SizeTokenValue.Large]: 12,\n  [SizeTokenValue.XLarge]: 12,\n};\n\nconst Cell = styled.td`\n  position: relative;\n  box-sizing: border-box;\n  height: 1px;\n  background-color: var(--background-color, transparent);\n\n  ${props => ({\n    color: props.theme.colors.grey[100],\n\n    '--background-color': props.theme.colors.white,\n    '--border-color': props.theme.colors.grey[10],\n  })};\n\n  &[data-${SizeTokenValue.Large.toLocaleLowerCase()}] {\n    min-height: 44px;\n\n    ${props => props.theme.typography.p1compact}\n  }\n\n  &[data-${SizeTokenValue.Medium.toLocaleLowerCase()}] {\n    min-height: 40px;\n\n    ${props => props.theme.typography.p2}\n  }\n\n  &[data-${SizeTokenValue.Small.toLocaleLowerCase()}] {\n    min-height: 32px;\n\n    ${props => props.theme.typography.p2}\n  }\n\n  &[data-${ColumnArea.FixedLeft.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  &[data-${ColumnArea.FixedRight.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(-8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  &[data-row-hover] {\n    ${props => ({\n      '--background-color': props.theme.colors.grey[10],\n      '--border-color': props.theme.colors.grey[20],\n    })}\n  }\n\n  :hover {\n    ${props => ({\n      '--background-color': props.theme.colors.grey[10],\n      '--border-color': props.theme.colors.grey[40],\n    })}\n  }\n\n  :not([data-disabled]):hover::before {\n    border-width: 1px;\n  }\n\n  &[data-disabled] {\n    :hover {\n      ${props => ({\n        '--background-color': props.theme.colors.grey[10],\n        '--border-color': props.theme.colors.grey[20],\n      })}\n    }\n\n    ${props => ({\n      color: props.theme.colors.grey[40],\n    })}\n  }\n\n  &[data-row-selected] {\n    ${props => ({\n      '--background-color': props.theme.colors.accent[10],\n      '--border-color': props.theme.colors.accent[20],\n    })}\n  }\n\n  &[data-focused],\n  :focus {\n    outline: none;\n\n    ::before {\n      display: none;\n    }\n\n    ::after {\n      display: block;\n    }\n\n    [data-edit-icon] {\n      visibility: visible;\n    }\n\n    ${props => ({\n      '--border-color': 'transparent',\n      '--background-color': props.theme.colors.white,\n      '--outline-color': props.theme.colors.accent[90],\n    })}\n  }\n\n  &[data-active] {\n    outline: none;\n\n    ::before {\n      display: none;\n    }\n\n    ::after {\n      display: block;\n    }\n\n    [data-edit-icon] {\n      visibility: hidden;\n    }\n\n    ${props => ({\n      '--border-color': 'transparent',\n      '--background-color': props.theme.colors.white,\n      '--outline-color': props.theme.colors.accent[90],\n    })}\n  }\n\n  &[data-error] {\n    ::after {\n      display: block;\n    }\n\n    ${props => ({\n      caretColor: props.theme.colors.additional.red[80],\n\n      '--background-color': props.theme.colors.white,\n      '--border-color': 'transparent',\n      '--outline-color': props.theme.colors.additional.red[80],\n    })}\n  }\n\n  ::before {\n    content: '';\n    display: block;\n    position: absolute;\n    box-sizing: border-box;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    pointer-events: none;\n    border-width: 0 0 1px 0;\n    border-style: solid;\n    border-color: var(--border-color);\n  }\n\n  &[data-bordered] {\n    ::before {\n      border-width: 0 1px 1px 0;\n    }\n\n    :last-of-type::before {\n      border-width: 0 0 1px 0;\n    }\n  }\n\n  &[data-resizing] {\n    border-right: 1px solid ${props => props.theme.colors.accent[20]};\n  }\n\n  ::after {\n    content: '';\n    display: none;\n    position: absolute;\n    box-sizing: border-box;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    pointer-events: none;\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 4px;\n    border-color: var(--outline-color, transparent);\n  }\n\n  [data-edit-icon] {\n    display: none;\n    position: absolute;\n    visibility: hidden;\n    right: 0;\n    top: 0;\n    background-color: var(--background-color, transparent);\n  }\n\n  &[data-editable] [data-edit-icon] {\n    display: block;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  gap: 8px;\n`;\n\nconst Content = styled.div`\n  position: relative;\n  flex-grow: 1;\n  word-break: break-word;\n\n  :not([data-is-multiline]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst Caption = styled.div`\n  padding: 4px 0 0;\n  width: 100%;\n  word-break: break-all;\n\n  ${props => ({\n    ...props.theme.typography.p3,\n\n    color: props.theme.colors.additional.red[80],\n  })}\n`;\n\ntype TableCellContentProps = Partial<Pick<TableCellProps, 'children' | 'isMultiline' | 'whiteSpace' | 'wordBreak'>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const TableCellContent: FRC<HTMLDivElement, TableCellContentProps> = forwardRef((props, ref) => {\n  const {children, style, isMultiline, whiteSpace, wordBreak = 'break-word', ...rest} = props;\n\n  const contentProps = {\n    ...rest,\n\n    style: {\n      whiteSpace,\n      wordBreak,\n\n      ...style,\n    },\n\n    'data-content': true,\n    'data-is-multiline': isMultiline ? true : undefined,\n  };\n\n  return (\n    <Content ref={ref} {...contentProps}>\n      {children}\n    </Content>\n  );\n});\n\nexport const TableCell: FRC<HTMLTableCellElement, TableCellProps> = forwardRef((props, baseRef) => {\n  const ref = useRefMerge(baseRef);\n\n  const {\n    children,\n\n    isDisabled,\n    isRowHover,\n    isRowSelected,\n    isBordered,\n    isShadowed,\n    isFocused,\n    isActive,\n    isResizing,\n    isLastFixed,\n    error,\n\n    textAlign,\n    writingMode,\n    verticalAlign,\n    padding,\n    userSelect = 'none',\n\n    startAdornment,\n    endAdornment,\n\n    size = SizeTokenValue.Medium,\n    columnArea = ColumnArea.Default,\n\n    ...rest\n  } = props;\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (isEnterCode) {\n      const child = ref.current?.querySelector('[data-action]') as HTMLElement;\n\n      if (isEnterCode && child) {\n        child.click();\n      }\n\n      return;\n    }\n\n    if (e.code === 'Escape') {\n      ref.current?.blur();\n      return;\n    }\n\n    if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n      const parent = ref.current?.parentElement as HTMLElement;\n      const curIndex = Array.from(parent?.childNodes).indexOf(ref.current as HTMLElement);\n\n      switch (e.code) {\n        case 'ArrowUp':\n        case 'ArrowDown':\n          {\n            const sibling = (\n              e.code === 'ArrowUp' ? parent?.previousElementSibling : parent?.nextElementSibling\n            ) as HTMLElement;\n\n            if (parent?.nodeName === sibling?.nodeName) {\n              const nextFocus = sibling?.children[curIndex] as HTMLElement;\n\n              nextFocus?.focus();\n            }\n          }\n          break;\n\n        case 'ArrowLeft':\n          if (curIndex > 0) {\n            const prevSibling = parent?.children[curIndex - 1] as HTMLElement;\n            prevSibling?.focus();\n          } else {\n            const prevRow = parent?.previousElementSibling as HTMLElement;\n            if (parent?.nodeName === prevRow?.nodeName) {\n              const lastCell = prevRow.lastElementChild as HTMLElement;\n              lastCell?.focus();\n            }\n          }\n          break;\n        case 'ArrowRight':\n          if (curIndex < parent?.children.length - 1) {\n            const nextSibling = parent?.children[curIndex + 1] as HTMLElement;\n            nextSibling?.focus();\n          } else {\n            const nextRow = parent?.nextElementSibling as HTMLElement;\n            if (parent?.nodeName === nextRow?.nodeName) {\n              const firstCell = nextRow.firstElementChild as HTMLElement;\n              firstCell?.focus();\n            }\n          }\n          break;\n      }\n    }\n  };\n\n  const cellProps = {\n    ...rest,\n\n    onKeyDown,\n\n    style: {\n      verticalAlign,\n      textAlign,\n      writingMode,\n      userSelect,\n\n      padding: padding ?? sizePadding[size],\n\n      ...props.style,\n    },\n\n    'data-cell': true,\n    'data-disabled': isDisabled ? true : undefined,\n    'data-focused': isFocused ? true : undefined,\n    'data-error': error ? true : undefined,\n    'data-row-hover': isRowHover ? true : undefined,\n    'data-row-selected': isRowSelected ? true : undefined,\n    'data-bordered': isBordered ? true : undefined,\n    'data-shadowed': isShadowed ? true : undefined,\n    'data-resizing': isResizing ? true : undefined,\n    'data-active': isActive ? true : undefined,\n    'data-last-fixed': isLastFixed ? true : undefined,\n\n    [`data-${size.toLowerCase()}`]: true,\n    [`data-${columnArea.toLowerCase()}`]: true,\n  };\n\n  const caption = typeof error === 'string' ? <Caption>{error}</Caption> : null;\n\n  return (\n    <Cell ref={ref} tabIndex={0} {...cellProps}>\n      <Container>\n        {startAdornment}\n        {children}\n        {endAdornment}\n        <EditOnIcon data-edit-icon size={SizeTokenValue.Small} />\n      </Container>\n      {caption}\n    </Cell>\n  );\n});\n\nexport const DataGridTableCell: FRC<HTMLTableCellElement, DataGridTableCellProps & PropsWithChildren> = forwardRef(\n  (props, ref) => {\n    const resultProps = useDataGridTableCell(props.cell);\n\n    const contentProps = {\n      isMultiline: resultProps.isMultiline,\n      whiteSpace: resultProps.whiteSpace,\n      wordBreak: resultProps.wordBreak,\n    };\n\n    return (\n      <TableCell ref={ref} {...resultProps}>\n        <TableCellContent {...contentProps}>{props.children}</TableCellContent>\n      </TableCell>\n    );\n  }\n);\n\nexport const getDataGridTableCell = (cell: DataGridTableCellProps['cell']) => {\n  const content = flexRender(cell.column.columnDef.cell, cell.getContext());\n\n  if (cell.column.columnDef.meta?.isCustom) {\n    return <React.Fragment key={cell.id}>{content}</React.Fragment>;\n  }\n\n  return (\n    <DataGridTableCell key={cell.id} cell={cell}>\n      {content}\n    </DataGridTableCell>\n  );\n};\n\nexport * from './types';\n"],"names":["white","p3","children","style","isMultiline","whiteSpace","rest","wordBreak","undefined","ref","isDisabled","isRowHover","isRowSelected","isBordered","isShadowed","isFocused","isActive","isResizing","isLastFixed","error","textAlign","writingMode","verticalAlign","padding","startAdornment","endAdornment","Medium","Default","props","e","parent","nextFocus","focus","prevSibling","lastCell","nextSibling","firstCell","userSelect","caption","resultProps","content"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAgBb;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAEU;AAAA;AAAA;AAAA;AAAA;AAMI;AACwB;AAEOA;AAE3C;AAuCc;AACsC;AAElD;AAIY;AACsC;AAElD;AAeY;AAEZ;AARc;AACsC;AAElD;AASU;AACwC;AAEpD;AAmBY;AACQ;AACuBA;AAE3C;AAkBY;AACQ;AACuBA;AAE3C;AAQY;AACsC;AAEPA;AACvB;AAEpB;AAgEW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAKC;AACgBC;AAG5B;AAOM;AAAA;AAACC;AAAUC;AAAOC;AAAaC;AAAwB;AAAiBC;AAEzD;AAChBA;AAEI;AACLD;AACAE;AAEGJ;AACL;AAEgB;AAC0BK;AAG5C;AAKF;AAGQC;AAEA;AACJP;AAEAQ;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACa;AAEbC;AACAC;AAEsBC;AACEC;AAErBrB;AAuEa;AACbA;;AApEHsB;AAEA;AAEA;AACE;AAEA;AAIA;AAAA;AAGEC;AACFpB;AACA;AAAA;AAGEoB;AACIC;AAGN;AAAc;AACP;AAEH;AACE;AAIIA;AACIC;AAENA;AAAWC;AAAM;AAGrB;AAAA;AAGA;AACE;AACAC;AAAaD;AAEb;AACIF;AACF;AACAI;AAAUF;AAAM;AAGpB;AAAA;AAEA;AACE;AACAG;AAAaH;AAEb;AACIF;AACF;AACAM;AAAWJ;AAAM;AAGrB;AAAA;AAAA;AACJ;AAEJ;AAOS;AACLV;AACAF;AACAC;AACAgB;AAEoC;AAE3BlC;AACX;AAEa;AACwBK;AACFA;AACNA;AACSA;AACMA;AACPA;AACAA;AACAA;AACJA;AACOA;AAER;AACM;AAKxC;AAEI;AACGgB;AAAAA;AACAtB;AACAuB;AACqD;AACxD;AACCa;AAGP;AAIUC;AAEe;AACMnC;AACDC;AACDE;AAIvB;AAIJ;;AAIMiC;AAEN;AASF;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport styled from '@emotion/styled';\nimport {flexRender} from '@tanstack/react-table';\n\nimport {forwardRef, SizeTokenValue, useRefMerge} from '@join-x5/react-theme';\nimport {EditOnIcon} from '@join-x5/react-icons';\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {useDataGridTableCell} from './hook';\n\nimport type {HTMLAttributes, KeyboardEventHandler} from 'react';\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from './types';\n\nconst sizePadding: Record<SizeTokenValue, number> = {\n  [SizeTokenValue.XXSmall]: 8,\n  [SizeTokenValue.XSmall]: 8,\n  [SizeTokenValue.Small]: 8,\n  [SizeTokenValue.Medium]: 12,\n  [SizeTokenValue.Large]: 12,\n  [SizeTokenValue.XLarge]: 12,\n};\n\nconst Cell = styled.td`\n  position: relative;\n  box-sizing: border-box;\n  height: 1px;\n  border-radius: 0;\n  border-spacing: 0;\n  background-color: var(--background-color, transparent);\n\n  ${props => ({\n    color: props.theme.colors.grey[100],\n\n    '--background-color': props.theme.colors.white,\n    '--border-color': props.theme.colors.grey[10],\n  })};\n\n  &[data-${SizeTokenValue.Large.toLocaleLowerCase()}] {\n    min-height: 44px;\n\n    ${props => props.theme.typography.p1compact}\n  }\n\n  &[data-${SizeTokenValue.Medium.toLocaleLowerCase()}] {\n    min-height: 40px;\n\n    ${props => props.theme.typography.p2}\n  }\n\n  &[data-${SizeTokenValue.Small.toLocaleLowerCase()}] {\n    min-height: 32px;\n\n    ${props => props.theme.typography.p2}\n  }\n\n  &[data-${ColumnArea.FixedLeft.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  &[data-${ColumnArea.FixedRight.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(-8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  &[data-row-hover] {\n    ${props => ({\n      '--background-color': props.theme.colors.grey[10],\n      '--border-color': props.theme.colors.grey[20],\n    })}\n  }\n\n  :hover {\n    ${props => ({\n      '--background-color': props.theme.colors.grey[10],\n      '--border-color': props.theme.colors.grey[40],\n    })}\n  }\n\n  :not([data-disabled]):hover::before {\n    border-width: 1px;\n  }\n\n  &[data-disabled] {\n    :hover {\n      ${props => ({\n        '--background-color': props.theme.colors.grey[10],\n        '--border-color': props.theme.colors.grey[20],\n      })}\n    }\n\n    ${props => ({\n      color: props.theme.colors.grey[40],\n    })}\n  }\n\n  &[data-row-selected] {\n    ${props => ({\n      '--background-color': props.theme.colors.accent[10],\n      '--border-color': props.theme.colors.accent[20],\n    })}\n  }\n\n  &[data-focused],\n  :focus {\n    outline: none;\n\n    ::before {\n      display: none;\n    }\n\n    ::after {\n      display: block;\n    }\n\n    [data-edit-icon] {\n      visibility: visible;\n    }\n\n    ${props => ({\n      '--border-color': 'transparent',\n      '--background-color': props.theme.colors.white,\n      '--outline-color': props.theme.colors.accent[90],\n    })}\n  }\n\n  &[data-active] {\n    outline: none;\n\n    ::before {\n      display: none;\n    }\n\n    ::after {\n      display: block;\n    }\n\n    [data-edit-icon] {\n      visibility: hidden;\n    }\n\n    ${props => ({\n      '--border-color': 'transparent',\n      '--background-color': props.theme.colors.white,\n      '--outline-color': props.theme.colors.accent[90],\n    })}\n  }\n\n  &[data-error] {\n    ::after {\n      display: block;\n    }\n\n    ${props => ({\n      caretColor: props.theme.colors.additional.red[80],\n\n      '--background-color': props.theme.colors.white,\n      '--border-color': 'transparent',\n      '--outline-color': props.theme.colors.additional.red[80],\n    })}\n  }\n\n  ::before {\n    content: '';\n    display: block;\n    position: absolute;\n    box-sizing: border-box;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    pointer-events: none;\n    border-width: 0 0 1px 0;\n    border-style: solid;\n    border-color: var(--border-color);\n  }\n\n  &[data-bordered] {\n    ::before {\n      border-width: 0 1px 1px 0;\n    }\n\n    :last-of-type::before {\n      border-width: 0 0 1px 0;\n    }\n  }\n\n  &[data-resizing] {\n    border-right: 1px solid ${props => props.theme.colors.accent[20]};\n  }\n\n  ::after {\n    content: '';\n    display: none;\n    position: absolute;\n    box-sizing: border-box;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    pointer-events: none;\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 4px;\n    border-color: var(--outline-color, transparent);\n  }\n\n  [data-edit-icon] {\n    display: none;\n    position: absolute;\n    visibility: hidden;\n    right: 0;\n    top: 0;\n    background-color: var(--background-color, transparent);\n  }\n\n  &[data-editable] [data-edit-icon] {\n    display: block;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  gap: 8px;\n`;\n\nconst Content = styled.div`\n  position: relative;\n  flex-grow: 1;\n  word-break: break-word;\n\n  :not([data-is-multiline]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst Caption = styled.div`\n  padding: 4px 0 0;\n  width: 100%;\n  word-break: break-all;\n\n  ${props => ({\n    ...props.theme.typography.p3,\n\n    color: props.theme.colors.additional.red[80],\n  })}\n`;\n\ntype TableCellContentProps = Partial<Pick<TableCellProps, 'children' | 'isMultiline' | 'whiteSpace' | 'wordBreak'>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const TableCellContent: FRC<HTMLDivElement, TableCellContentProps> = forwardRef((props, ref) => {\n  const {children, style, isMultiline, whiteSpace, wordBreak = 'break-word', ...rest} = props;\n\n  const contentProps = {\n    ...rest,\n\n    style: {\n      whiteSpace,\n      wordBreak,\n\n      ...style,\n    },\n\n    'data-content': true,\n    'data-is-multiline': isMultiline ? true : undefined,\n  };\n\n  return (\n    <Content ref={ref} {...contentProps}>\n      {children}\n    </Content>\n  );\n});\n\nexport const TableCell: FRC<HTMLTableCellElement, TableCellProps> = forwardRef((props, baseRef) => {\n  const ref = useRefMerge(baseRef);\n\n  const {\n    children,\n\n    isDisabled,\n    isRowHover,\n    isRowSelected,\n    isBordered,\n    isShadowed,\n    isFocused,\n    isActive,\n    isResizing,\n    isLastFixed,\n    error,\n\n    textAlign,\n    writingMode,\n    verticalAlign,\n    padding,\n    userSelect = 'none',\n\n    startAdornment,\n    endAdornment,\n\n    size = SizeTokenValue.Medium,\n    columnArea = ColumnArea.Default,\n\n    ...rest\n  } = props;\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (isEnterCode) {\n      const child = ref.current?.querySelector('[data-action]') as HTMLElement;\n\n      if (isEnterCode && child) {\n        child.click();\n      }\n\n      return;\n    }\n\n    if (e.code === 'Escape') {\n      ref.current?.blur();\n      return;\n    }\n\n    if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n      const parent = ref.current?.parentElement as HTMLElement;\n      const curIndex = Array.from(parent?.childNodes).indexOf(ref.current as HTMLElement);\n\n      switch (e.code) {\n        case 'ArrowUp':\n        case 'ArrowDown':\n          {\n            const sibling = (\n              e.code === 'ArrowUp' ? parent?.previousElementSibling : parent?.nextElementSibling\n            ) as HTMLElement;\n\n            if (parent?.nodeName === sibling?.nodeName) {\n              const nextFocus = sibling?.children[curIndex] as HTMLElement;\n\n              nextFocus?.focus();\n            }\n          }\n          break;\n\n        case 'ArrowLeft':\n          if (curIndex > 0) {\n            const prevSibling = parent?.children[curIndex - 1] as HTMLElement;\n            prevSibling?.focus();\n          } else {\n            const prevRow = parent?.previousElementSibling as HTMLElement;\n            if (parent?.nodeName === prevRow?.nodeName) {\n              const lastCell = prevRow.lastElementChild as HTMLElement;\n              lastCell?.focus();\n            }\n          }\n          break;\n        case 'ArrowRight':\n          if (curIndex < parent?.children.length - 1) {\n            const nextSibling = parent?.children[curIndex + 1] as HTMLElement;\n            nextSibling?.focus();\n          } else {\n            const nextRow = parent?.nextElementSibling as HTMLElement;\n            if (parent?.nodeName === nextRow?.nodeName) {\n              const firstCell = nextRow.firstElementChild as HTMLElement;\n              firstCell?.focus();\n            }\n          }\n          break;\n      }\n    }\n  };\n\n  const cellProps = {\n    ...rest,\n\n    onKeyDown,\n\n    style: {\n      verticalAlign,\n      textAlign,\n      writingMode,\n      userSelect,\n\n      padding: padding ?? sizePadding[size],\n\n      ...props.style,\n    },\n\n    'data-cell': true,\n    'data-disabled': isDisabled ? true : undefined,\n    'data-focused': isFocused ? true : undefined,\n    'data-error': error ? true : undefined,\n    'data-row-hover': isRowHover ? true : undefined,\n    'data-row-selected': isRowSelected ? true : undefined,\n    'data-bordered': isBordered ? true : undefined,\n    'data-shadowed': isShadowed ? true : undefined,\n    'data-resizing': isResizing ? true : undefined,\n    'data-active': isActive ? true : undefined,\n    'data-last-fixed': isLastFixed ? true : undefined,\n\n    [`data-${size.toLowerCase()}`]: true,\n    [`data-${columnArea.toLowerCase()}`]: true,\n  };\n\n  const caption = typeof error === 'string' ? <Caption>{error}</Caption> : null;\n\n  return (\n    <Cell ref={ref} tabIndex={0} {...cellProps}>\n      <Container>\n        {startAdornment}\n        {children}\n        {endAdornment}\n        <EditOnIcon data-edit-icon size={SizeTokenValue.Small} />\n      </Container>\n      {caption}\n    </Cell>\n  );\n});\n\nexport const DataGridTableCell: FRC<HTMLTableCellElement, DataGridTableCellProps & PropsWithChildren> = forwardRef(\n  (props, ref) => {\n    const resultProps = useDataGridTableCell(props.cell);\n\n    const contentProps = {\n      isMultiline: resultProps.isMultiline,\n      whiteSpace: resultProps.whiteSpace,\n      wordBreak: resultProps.wordBreak,\n    };\n\n    return (\n      <TableCell ref={ref} {...resultProps}>\n        <TableCellContent {...contentProps}>{props.children}</TableCellContent>\n      </TableCell>\n    );\n  }\n);\n\nexport const getDataGridTableCell = (cell: DataGridTableCellProps['cell']) => {\n  const content = flexRender(cell.column.columnDef.cell, cell.getContext());\n\n  if (cell.column.columnDef.meta?.isCustom) {\n    return <React.Fragment key={cell.id}>{content}</React.Fragment>;\n  }\n\n  return (\n    <DataGridTableCell key={cell.id} cell={cell}>\n      {content}\n    </DataGridTableCell>\n  );\n};\n\nexport * from './types';\n"],"names":["white","p3","children","style","isMultiline","whiteSpace","rest","wordBreak","undefined","isDisabled","isRowHover","isRowSelected","isBordered","isShadowed","isFocused","isActive","isResizing","isLastFixed","error","textAlign","writingMode","verticalAlign","padding","startAdornment","endAdornment","Medium","Default","props","ref","code","nextFocus","focus","prevSibling","lastCell","nextSibling","firstCell","userSelect","caption"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAgBb;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAEU;AAAA;AAAA;AAAA;AAAA;AAQI;AACwB;AAEOA;AAE3C;AAuCc;AACsC;AAElD;AAIY;AACsC;AAElD;AAeY;AAEZ;AARc;AACsC;AAElD;AASU;AACwC;AAEpD;AAmBY;AACQ;AACuBA;AAE3C;AAkBY;AACQ;AACuBA;AAE3C;AAQY;AACsC;AAEPA;AACvB;AAEpB;AAgEW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAKC;AACgBC;AAG5B;AAOA;AAAM;AAACC;AAAUC;AAAOC;AAAaC;AAAwB;AAAiBC;AAEzD;AAChBA;AAEI;AACLD;AACAE;AAEGJ;AAAAA;AAGW;AAC0BK;AAG5C;AAKF;AAGE;AAEM;AACJN;AAEAO;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACa;AAEbC;AACAC;AAEsBC;AACEC;AAErBpB;AAuEa;AACbA;;AApEHqB;AAEA;AAEA;AACE;AAEA;AAIA;AAAA;AAGF;AACEC;AACA;AAAA;AAGF;AACE;AAGA;AAAUC;AACH;AAEH;AACE;AAIA;AACE;AAEAC;AAAWC;AACb;AAEF;AAAA;AAGA;AACE;AACAC;AAAaD;AAEb;AACA;AACE;AACAE;AAAUF;AACZ;AAEF;AAAA;AAEA;AACE;AACAG;AAAaH;AAEb;AACA;AACE;AACAI;AAAWJ;AACb;AAEF;AAAA;AAAA;AAEN;AACF;AAOS;AACLV;AACAF;AACAC;AACAgB;AAEoC;AAE3BjC;AAAAA;AAGE;AACwBK;AACFA;AACNA;AACSA;AACMA;AACPA;AACAA;AACAA;AACJA;AACOA;AAER;AACM;AAKxC;AAEI;AACGe;AAAAA;AACArB;AACAsB;AACqD;AACxD;AACCa;AAGP;AAII;AAEqB;AACMjC;AACDC;AACDE;AAGzB;AAKF;;AAIA;AAEA;AASF;;;;;;;"}

package/dist/TableDropdown/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableDropdown/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nexport const TableDropdownHeader = styled.div`\n  padding: 8px 12px 4px;\n  user-select: none;\n\n  ${props => ({\n    ...props.theme.typography.h6,\n\n    color: props.theme.colors.grey[70],\n  })}\n`;\n\nexport const TableDropdownItem = styled.div`\n  padding: 6px 12px;\n  user-select: none;\n  cursor: pointer;\n\n  ${props => ({\n    ...props.theme.typography.p1compact,\n\n    color: props.theme.colors.grey[100],\n  })}\n\n  :hover {\n    background-color: ${props => props.theme.colors.grey[10]};\n  }\n\n  &[data-checked] {\n    ${props => ({\n      color: props.theme.colors.white,\n      backgroundColor: props.theme.colors.accent[90],\n    })}\n  }\n`;\n"],"names":["TableDropdownHeader","process","env","NODE_ENV","target","label","props","theme","typography","h6","color","colors","grey","TableDropdownItem","p1compact","white","backgroundColor","accent"],"mappings":";AAEO,MAAMA,6BAAmBC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,0CAI5BC,CAAUA,OAAA;AAAA,EACV,GAAGA,EAAMC,MAAMC,WAAWC;AAAAA,EAE1BC,OAAOJ,EAAMC,MAAMI,OAAOC,KAAK,EAAE;AACnC,IAAEX,OAAAA,QAAAC,IAAAC,aACH,eAAA,KAAA,0yCAAA,GAEYU,6BAAiBZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,qDAK1BC,CAAUA,OAAA;AAAA,EACV,GAAGA,EAAMC,MAAMC,WAAWM;AAAAA,EAE1BJ,OAAOJ,EAAMC,MAAMI,OAAOC,KAAK,GAAG;AACpC,IAGsBN,6BAAAA,OAASA,EAAMC,MAAMI,OAAOC,KAAK,EAAE,GAAC,sBAItDN,CAAUA,OAAA;AAAA,EACVI,OAAOJ,EAAMC,MAAMI,OAAOI;AAAAA,EAC1BC,iBAAiBV,EAAMC,MAAMI,OAAOM,OAAO,EAAE;AAC/C,IAAEhB,QAAAA,QAAAC,IAAAC,aAEL,eAAA,KAAA,0yCAAA;"}
+{"version":3,"file":"index.es.js","sources":["../../src/TableDropdown/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nexport const TableDropdownHeader = styled.div`\n  padding: 8px 12px 4px;\n  user-select: none;\n\n  ${props => ({\n    ...props.theme.typography.h6,\n\n    color: props.theme.colors.grey[70],\n  })}\n`;\n\nexport const TableDropdownItem = styled.div`\n  padding: 6px 12px;\n  user-select: none;\n  cursor: pointer;\n\n  ${props => ({\n    ...props.theme.typography.p1compact,\n\n    color: props.theme.colors.grey[100],\n  })}\n\n  :hover {\n    background-color: ${props => props.theme.colors.grey[10]};\n  }\n\n  &[data-checked] {\n    ${props => ({\n      color: props.theme.colors.white,\n      backgroundColor: props.theme.colors.accent[90],\n    })}\n  }\n`;\n"],"names":["TableDropdownHeader","_styled","process","env","NODE_ENV","target","label","props","theme","typography","h6","color","colors","grey","TableDropdownItem","p1compact","white","backgroundColor","accent"],"mappings":";AAEO,MAAMA,IAAmBC,gBAAAA,SAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,0CAI5BC,CAAAA,OAAU;AAAA,EACV,GAAGA,EAAMC,MAAMC,WAAWC;AAAAA,EAE1BC,OAAOJ,EAAMC,MAAMI,OAAOC,KAAK,EAAE;AACnC,IAAE,OAAAX,QAAAC,IAAAC,aAAA,eAAA,KAAA,0yCAAA,GAGSU,IAAiBb,gBAAAA,SAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,qDAK1BC,CAAAA,OAAU;AAAA,EACV,GAAGA,EAAMC,MAAMC,WAAWM;AAAAA,EAE1BJ,OAAOJ,EAAMC,MAAMI,OAAOC,KAAK,GAAG;AACpC,IAAE,6BAGoBN,OAASA,EAAMC,MAAMI,OAAOC,KAAK,EAAE,GAAC,sBAItDN,CAAAA,OAAU;AAAA,EACVI,OAAOJ,EAAMC,MAAMI,OAAOI;AAAAA,EAC1BC,iBAAiBV,EAAMC,MAAMI,OAAOM,OAAO,EAAE;AAC/C,IAAE,QAAAhB,QAAAC,IAAAC,aAAA,eAAA,KAAA,0yCAAA;"}

package/dist/TableHead/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {DataGridContext} from 'DataGridContext';\nimport {getDataGridTableHeadCell} from 'TableHeadCell';\nimport {TableHeadRow} from 'TableHeadRow';\n\nimport type {Table} from '@tanstack/react-table';\n\nexport const TableHead = styled.thead`\n  position: sticky;\n  top: 0;\n  z-index: 2;\n`;\n\ntype DataGridTableHeadProps = {\n  table: Table<unknown>;\n};\n\nconst DataGridTableHead: React.FC<DataGridTableHeadProps> = props => {\n  const context = useContext(DataGridContext);\n\n  const content = props.table\n    .getHeaderGroups()\n    .map(headerGroup => (\n      <TableHeadRow key={headerGroup.id}>\n        {headerGroup.headers.map(header => getDataGridTableHeadCell(header))}\n      </TableHeadRow>\n    ));\n\n  return <TableHead data-qa={`${context.qa}-head`}>{content}</TableHead>;\n};\n\nexport const getDataGridTableHead = (table: Table<unknown>) => {\n  return <DataGridTableHead table={table} />;\n};\n"],"names":["context"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAWN;AAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWdA;AAUN;AACF;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {DataGridContext} from 'DataGridContext';\nimport {getDataGridTableHeadCell} from 'TableHeadCell';\nimport {TableHeadRow} from 'TableHeadRow';\n\nimport type {Table} from '@tanstack/react-table';\n\nexport const TableHead = styled.thead`\n  position: sticky;\n  top: 0;\n  z-index: 2;\n`;\n\ntype DataGridTableHeadProps = {\n  table: Table<unknown>;\n};\n\nconst DataGridTableHead: React.FC<DataGridTableHeadProps> = props => {\n  const context = useContext(DataGridContext);\n\n  const content = props.table\n    .getHeaderGroups()\n    .map(headerGroup => (\n      <TableHeadRow key={headerGroup.id}>\n        {headerGroup.headers.map(header => getDataGridTableHeadCell(header))}\n      </TableHeadRow>\n    ));\n\n  return <TableHead data-qa={`${context.qa}-head`}>{content}</TableHead>;\n};\n\nexport const getDataGridTableHead = (table: Table<unknown>) => {\n  return <DataGridTableHead table={table} />;\n};\n"],"names":[],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAWN;AAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB;AAUA;AACF;;;;;"}

package/dist/TableHeadCell/index.es.js

@@ -72,9 +72,9 @@ const j = /* @__PURE__ */ A("div", process.env.NODE_ENV === "production" ? {
     verticalAlign: e = "top",
     textAlign: n = "left",
     userSelect: y = "none",
-    startAdornment: J,
+    startAdornment: o,
     endAdornment: x,
-    resizer: o,
+    resizer: J,
     dropdown: l,
     variant: a = d.Default,
     size: s = C.Medium,
@@ -111,11 +111,11 @@ const j = /* @__PURE__ */ A("div", process.env.NODE_ENV === "production" ? {
   };
   return /* @__PURE__ */ t(T, { ref: B, tabIndex: 0, ...O, children: [
     /* @__PURE__ */ t(E, { children: [
-      J,
+      o,
       /* @__PURE__ */ Z(f, { children: X }),
       x
     ] }),
-    o,
+    J,
     k
   ] });
 }), P = ({

package/dist/TableHeadCell/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableHeadCell/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext, useState} from 'react';\nimport styled from '@emotion/styled';\nimport {flexRender} from '@tanstack/react-table';\n\nimport {forwardRef, SizeTokenValue, useRefMerge} from '@join-x5/react-theme';\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {DataGridContext} from 'DataGridContext';\n\nimport {areaProps} from 'TableCell/hook';\n\nimport {TableHeadCellVariant} from './types';\n\nimport type {KeyboardEventHandler, MouseEventHandler} from 'react';\nimport type {Header} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {TableHeadCellProps} from './types';\n\nexport const TableHeadCellResizer = styled.div`\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 1;\n\n  ::before {\n    content: '';\n    display: block;\n    width: 3px;\n    height: 24px;\n    border-radius: 8px;\n    user-select: none;\n    pointer-events: none;\n    opacity: 0;\n\n    background-color: ${props => props.theme.colors.accent[80]};\n  }\n\n  &[data-resizing]::before {\n    opacity: 1;\n  }\n`;\n\nconst Cell = styled.th`\n  position: relative;\n  box-sizing: border-box;\n\n  ${props => ({\n    color: props.theme.colors.grey[100],\n    backgroundColor: props.theme.colors.white,\n\n    '--border-color': props.theme.colors.grey[10],\n  })};\n\n  &[data-${SizeTokenValue.Large.toLocaleLowerCase()}] {\n    padding: 12px;\n    min-height: 44px;\n\n    &[data-${TableHeadCellVariant.Checkbox.toLocaleLowerCase()}] {\n      padding: 14px 12px;\n\n      &[data-has-end-adornment] {\n        padding-right: 8px;\n      }\n    }\n\n    ${props => props.theme.typography.h4}\n  }\n\n  &[data-${SizeTokenValue.Medium.toLocaleLowerCase()}] {\n    padding: 12px;\n    min-height: 40px;\n\n    &[data-${TableHeadCellVariant.Checkbox.toLocaleLowerCase()}] {\n      padding: 12px;\n\n      &[data-has-end-adornment] {\n        padding-right: 8px;\n      }\n    }\n\n    ${props => props.theme.typography.h5}\n  }\n\n  &[data-${SizeTokenValue.Small.toLocaleLowerCase()}] {\n    padding: 8px;\n    min-height: 32px;\n\n    ${props => props.theme.typography.h5}\n  }\n\n  &[data-shadowed] {\n    filter: drop-shadow(8px 0px 8px rgba(80, 86, 94, 0.08));\n\n    &::before {\n      border-bottom-width: 0;\n    }\n  }\n\n  &[data-${ColumnArea.FixedLeft.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  &[data-${ColumnArea.FixedRight.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(-8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  :hover {\n    ${props => ({\n      backgroundColor: props.theme.colors.grey[10],\n\n      '--border-color': props.theme.colors.grey[20],\n    })}\n  }\n\n  &[data-has-active] {\n    cursor: pointer;\n\n    &[data-active],\n    :active {\n      ${props => ({\n        backgroundColor: props.theme.colors.grey[30],\n\n        '--border-color': 'transparent',\n      })}\n    }\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-disabled] {\n    :hover {\n      ${props => ({\n        backgroundColor: props.theme.colors.grey[10],\n\n        '--border-color': props.theme.colors.grey[20],\n      })}\n    }\n\n    ${props => ({\n      color: props.theme.colors.grey[40],\n    })}\n  }\n\n  ::before {\n    content: '';\n    display: block;\n    position: absolute;\n    box-sizing: border-box;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    pointer-events: none;\n    border-width: 0 0 2px 0;\n    border-style: solid;\n    border-color: var(--border-color);\n  }\n\n  ::after {\n    content: '';\n    display: block;\n    position: absolute;\n    box-sizing: border-box;\n    top: calc(50% - 8px);\n    right: 0;\n    width: 2px;\n    height: 16px;\n    user-select: none;\n    pointer-events: none;\n    background-color: var(--border-color, transparent);\n  }\n\n  &[data-bordered] {\n    ::before {\n      border-width: 0 1px 2px 0;\n    }\n\n    :last-of-type::before {\n      border-width: 0 0 2px 0;\n    }\n\n    ::after {\n      display: none;\n    }\n  }\n\n  :last-of-type::after {\n    display: none;\n  }\n\n  [data-resizer] {\n    right: -5px;\n  }\n\n  :last-of-type [data-resizer] {\n    right: 0;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  gap: 8px;\n`;\n\nconst Content = styled.div`\n  flex-grow: 1;\n`;\n\nexport const TableHeadCell: FRC<HTMLTableCellElement, TableHeadCellProps> = forwardRef((props, baseRef) => {\n  const {\n    children,\n\n    isDisabled,\n    isActive,\n    isBordered,\n    isLastFixed,\n    isShadowed,\n\n    writingMode,\n    verticalAlign = 'top',\n    textAlign = 'left',\n    userSelect = 'none',\n\n    startAdornment,\n    endAdornment,\n    resizer,\n    dropdown: Dropdown,\n\n    variant = TableHeadCellVariant.Default,\n    size = SizeTokenValue.Medium,\n    columnArea = ColumnArea.Default,\n\n    ...rest\n  } = props;\n\n  const ref = useRefMerge(baseRef);\n  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    if (e.code === 'Escape') {\n      e.currentTarget.blur();\n    }\n\n    if (e.code === 'Enter' || e.code === 'NumpadEnter') {\n      e.currentTarget.click();\n    }\n\n    props.onKeyDown?.(e);\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    if (Dropdown && !isDropdownOpen) {\n      setIsDropdownOpen(true);\n    }\n\n    props.onClick?.(e);\n  };\n\n  const dropdown = Dropdown ? <Dropdown targetRef={ref} isOpen={isDropdownOpen} setIsOpen={setIsDropdownOpen} /> : null;\n  const hasActive = !!props.onClick || !!Dropdown || !!isActive;\n\n  const cellProps = {\n    ...rest,\n\n    onClick,\n    onKeyDown,\n\n    style: {\n      verticalAlign,\n      textAlign,\n      writingMode,\n      userSelect,\n\n      ...props.style,\n    },\n\n    'data-cell': true,\n    'data-disabled': isDisabled ? true : undefined,\n    'data-active': isActive || isDropdownOpen ? true : undefined,\n    'data-bordered': isBordered ? true : undefined,\n    'data-shadowed': isShadowed ? true : undefined,\n    'data-has-active': hasActive ? true : undefined,\n    'data-has-end-adornment': endAdornment ? true : undefined,\n    'data-last-fixed': isLastFixed ? true : undefined,\n\n    [`data-${size.toLowerCase()}`]: true,\n    [`data-${variant.toLowerCase()}`]: true,\n    [`data-${columnArea.toLowerCase()}`]: true,\n  };\n\n  return (\n    <Cell ref={ref} tabIndex={0} {...cellProps}>\n      <Container>\n        {startAdornment}\n        <Content>{children}</Content>\n        {endAdornment}\n      </Container>\n      {resizer}\n      {dropdown}\n    </Cell>\n  );\n});\n\ntype DataGridTableHeadCellProps = {\n  header: Header<unknown, unknown>;\n};\n\nexport const DataGridTableHeadCell: React.FC<DataGridTableHeadCellProps> = ({header}) => {\n  const context = useContext(DataGridContext);\n\n  const resizer = (() => {\n    if (header.column.getCanResize() === false) {\n      return null;\n    }\n\n    return (\n      <TableHeadCellResizer\n        data-resizer\n        onDoubleClick={() => header.column.resetSize()}\n        onMouseDown={header.getResizeHandler()}\n        onTouchStart={header.getResizeHandler()}\n        data-resizing={header.column.getIsResizing() ? true : undefined}\n      />\n    );\n  })();\n\n  const content = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());\n\n  const resultProps: TableHeadCellProps = {\n    resizer,\n\n    qa: context.qa,\n    isBordered: context.isBordered,\n    isShadowed: context.isShadowed,\n    size: context.size,\n    verticalAlign: context.verticalAlign,\n\n    colSpan: header.colSpan,\n    rowSpan: header.rowSpan,\n\n    style: {\n      width: `calc(var(--header-${header?.id}-size) * 1px)`,\n    },\n  };\n\n  areaProps(header.column, resultProps);\n\n  if (context.headCellProps) {\n    Object.assign(\n      resultProps,\n      context.headCellProps instanceof Function ? context.headCellProps(header) : context.headCellProps\n    );\n  }\n\n  return (\n    <TableHeadCell key={header.id} {...resultProps}>\n      {content}\n    </TableHeadCell>\n  );\n};\n\nexport const getDataGridTableHeadCell = (header: DataGridTableHeadCellProps['header']) => {\n  return <DataGridTableHeadCell key={header.id} header={header} />;\n};\n\nexport * from './types';\n"],"names":["white","children","isDisabled","isActive","isBordered","isLastFixed","isShadowed","writingMode","startAdornment","endAdornment","resizer","Dropdown","Default","Medium","rest","e","onClick","onKeyDown","verticalAlign","textAlign","userSelect","style","undefined","dropdown","context","qa","size","colSpan","rowSpan","header"],"mappings":";;;;;;;;;;AAAa;AAAA;AAAA;AAoBN;AAA0B;AAAA;AAAA;AAAA;AAAA;AA6BvB;AAAA;AAAA;AAAA;AAAA;AAII;AACwB;AACEA;AAGtC;AAkEc;AACiC;AAG7C;AAQc;AACiC;AAG7C;AAiBU;AAEZ;AATc;AACiC;AAG7C;AAiES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKL;AAAA;AACJC;AAEAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACgB;AACJ;AACC;AAEbC;AACAC;AACAC;AACUC;AAEqBC;AACTC;AACED;AAErBE;;AAOCC;AAQcA;;AAIdJ;AAIYI;AAMA;AACbD;AAEHE;AACAC;AAEO;AACLC;AACAC;AACAZ;AACAa;AAESC;AACX;AAEa;AACwBC;AACcA;AACdA;AACAA;AACCA;AACUA;AACRA;AAER;AACG;AACG;AAGxC;AAEI;AACGd;AAAAA;AACkB;AAClBC;AACH;AACCC;AACAa;AAGP;AAM4E;AAAO;AAC3EC;AAoBkC;AACtCd;AAEYe;AACQrB;AACAE;AACNoB;AACSR;AAEPS;AACAC;AAET;AACiC;AAAA;AAIhCC;AAcZ;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/TableHeadCell/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext, useState} from 'react';\nimport styled from '@emotion/styled';\nimport {flexRender} from '@tanstack/react-table';\n\nimport {forwardRef, SizeTokenValue, useRefMerge} from '@join-x5/react-theme';\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {DataGridContext} from 'DataGridContext';\n\nimport {areaProps} from 'TableCell/hook';\n\nimport {TableHeadCellVariant} from './types';\n\nimport type {KeyboardEventHandler, MouseEventHandler} from 'react';\nimport type {Header} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {TableHeadCellProps} from './types';\n\nexport const TableHeadCellResizer = styled.div`\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 1;\n\n  ::before {\n    content: '';\n    display: block;\n    width: 3px;\n    height: 24px;\n    border-radius: 8px;\n    user-select: none;\n    pointer-events: none;\n    opacity: 0;\n\n    background-color: ${props => props.theme.colors.accent[80]};\n  }\n\n  &[data-resizing]::before {\n    opacity: 1;\n  }\n`;\n\nconst Cell = styled.th`\n  position: relative;\n  box-sizing: border-box;\n\n  ${props => ({\n    color: props.theme.colors.grey[100],\n    backgroundColor: props.theme.colors.white,\n\n    '--border-color': props.theme.colors.grey[10],\n  })};\n\n  &[data-${SizeTokenValue.Large.toLocaleLowerCase()}] {\n    padding: 12px;\n    min-height: 44px;\n\n    &[data-${TableHeadCellVariant.Checkbox.toLocaleLowerCase()}] {\n      padding: 14px 12px;\n\n      &[data-has-end-adornment] {\n        padding-right: 8px;\n      }\n    }\n\n    ${props => props.theme.typography.h4}\n  }\n\n  &[data-${SizeTokenValue.Medium.toLocaleLowerCase()}] {\n    padding: 12px;\n    min-height: 40px;\n\n    &[data-${TableHeadCellVariant.Checkbox.toLocaleLowerCase()}] {\n      padding: 12px;\n\n      &[data-has-end-adornment] {\n        padding-right: 8px;\n      }\n    }\n\n    ${props => props.theme.typography.h5}\n  }\n\n  &[data-${SizeTokenValue.Small.toLocaleLowerCase()}] {\n    padding: 8px;\n    min-height: 32px;\n\n    ${props => props.theme.typography.h5}\n  }\n\n  &[data-shadowed] {\n    filter: drop-shadow(8px 0px 8px rgba(80, 86, 94, 0.08));\n\n    &::before {\n      border-bottom-width: 0;\n    }\n  }\n\n  &[data-${ColumnArea.FixedLeft.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  &[data-${ColumnArea.FixedRight.toLocaleLowerCase()}] {\n    position: sticky;\n    z-index: 1;\n\n    &[data-shadowed][data-last-fixed] {\n      filter: drop-shadow(-8px 0px 8px rgba(80, 86, 94, 0.08));\n    }\n  }\n\n  :hover {\n    ${props => ({\n      backgroundColor: props.theme.colors.grey[10],\n\n      '--border-color': props.theme.colors.grey[20],\n    })}\n  }\n\n  &[data-has-active] {\n    cursor: pointer;\n\n    &[data-active],\n    :active {\n      ${props => ({\n        backgroundColor: props.theme.colors.grey[30],\n\n        '--border-color': 'transparent',\n      })}\n    }\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-disabled] {\n    :hover {\n      ${props => ({\n        backgroundColor: props.theme.colors.grey[10],\n\n        '--border-color': props.theme.colors.grey[20],\n      })}\n    }\n\n    ${props => ({\n      color: props.theme.colors.grey[40],\n    })}\n  }\n\n  ::before {\n    content: '';\n    display: block;\n    position: absolute;\n    box-sizing: border-box;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    pointer-events: none;\n    border-width: 0 0 2px 0;\n    border-style: solid;\n    border-color: var(--border-color);\n  }\n\n  ::after {\n    content: '';\n    display: block;\n    position: absolute;\n    box-sizing: border-box;\n    top: calc(50% - 8px);\n    right: 0;\n    width: 2px;\n    height: 16px;\n    user-select: none;\n    pointer-events: none;\n    background-color: var(--border-color, transparent);\n  }\n\n  &[data-bordered] {\n    ::before {\n      border-width: 0 1px 2px 0;\n    }\n\n    :last-of-type::before {\n      border-width: 0 0 2px 0;\n    }\n\n    ::after {\n      display: none;\n    }\n  }\n\n  :last-of-type::after {\n    display: none;\n  }\n\n  [data-resizer] {\n    right: -5px;\n  }\n\n  :last-of-type [data-resizer] {\n    right: 0;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  gap: 8px;\n`;\n\nconst Content = styled.div`\n  flex-grow: 1;\n`;\n\nexport const TableHeadCell: FRC<HTMLTableCellElement, TableHeadCellProps> = forwardRef((props, baseRef) => {\n  const {\n    children,\n\n    isDisabled,\n    isActive,\n    isBordered,\n    isLastFixed,\n    isShadowed,\n\n    writingMode,\n    verticalAlign = 'top',\n    textAlign = 'left',\n    userSelect = 'none',\n\n    startAdornment,\n    endAdornment,\n    resizer,\n    dropdown: Dropdown,\n\n    variant = TableHeadCellVariant.Default,\n    size = SizeTokenValue.Medium,\n    columnArea = ColumnArea.Default,\n\n    ...rest\n  } = props;\n\n  const ref = useRefMerge(baseRef);\n  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    if (e.code === 'Escape') {\n      e.currentTarget.blur();\n    }\n\n    if (e.code === 'Enter' || e.code === 'NumpadEnter') {\n      e.currentTarget.click();\n    }\n\n    props.onKeyDown?.(e);\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    if (Dropdown && !isDropdownOpen) {\n      setIsDropdownOpen(true);\n    }\n\n    props.onClick?.(e);\n  };\n\n  const dropdown = Dropdown ? <Dropdown targetRef={ref} isOpen={isDropdownOpen} setIsOpen={setIsDropdownOpen} /> : null;\n  const hasActive = !!props.onClick || !!Dropdown || !!isActive;\n\n  const cellProps = {\n    ...rest,\n\n    onClick,\n    onKeyDown,\n\n    style: {\n      verticalAlign,\n      textAlign,\n      writingMode,\n      userSelect,\n\n      ...props.style,\n    },\n\n    'data-cell': true,\n    'data-disabled': isDisabled ? true : undefined,\n    'data-active': isActive || isDropdownOpen ? true : undefined,\n    'data-bordered': isBordered ? true : undefined,\n    'data-shadowed': isShadowed ? true : undefined,\n    'data-has-active': hasActive ? true : undefined,\n    'data-has-end-adornment': endAdornment ? true : undefined,\n    'data-last-fixed': isLastFixed ? true : undefined,\n\n    [`data-${size.toLowerCase()}`]: true,\n    [`data-${variant.toLowerCase()}`]: true,\n    [`data-${columnArea.toLowerCase()}`]: true,\n  };\n\n  return (\n    <Cell ref={ref} tabIndex={0} {...cellProps}>\n      <Container>\n        {startAdornment}\n        <Content>{children}</Content>\n        {endAdornment}\n      </Container>\n      {resizer}\n      {dropdown}\n    </Cell>\n  );\n});\n\ntype DataGridTableHeadCellProps = {\n  header: Header<unknown, unknown>;\n};\n\nexport const DataGridTableHeadCell: React.FC<DataGridTableHeadCellProps> = ({header}) => {\n  const context = useContext(DataGridContext);\n\n  const resizer = (() => {\n    if (header.column.getCanResize() === false) {\n      return null;\n    }\n\n    return (\n      <TableHeadCellResizer\n        data-resizer\n        onDoubleClick={() => header.column.resetSize()}\n        onMouseDown={header.getResizeHandler()}\n        onTouchStart={header.getResizeHandler()}\n        data-resizing={header.column.getIsResizing() ? true : undefined}\n      />\n    );\n  })();\n\n  const content = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());\n\n  const resultProps: TableHeadCellProps = {\n    resizer,\n\n    qa: context.qa,\n    isBordered: context.isBordered,\n    isShadowed: context.isShadowed,\n    size: context.size,\n    verticalAlign: context.verticalAlign,\n\n    colSpan: header.colSpan,\n    rowSpan: header.rowSpan,\n\n    style: {\n      width: `calc(var(--header-${header?.id}-size) * 1px)`,\n    },\n  };\n\n  areaProps(header.column, resultProps);\n\n  if (context.headCellProps) {\n    Object.assign(\n      resultProps,\n      context.headCellProps instanceof Function ? context.headCellProps(header) : context.headCellProps\n    );\n  }\n\n  return (\n    <TableHeadCell key={header.id} {...resultProps}>\n      {content}\n    </TableHeadCell>\n  );\n};\n\nexport const getDataGridTableHeadCell = (header: DataGridTableHeadCellProps['header']) => {\n  return <DataGridTableHeadCell key={header.id} header={header} />;\n};\n\nexport * from './types';\n"],"names":["white","children","isDisabled","isActive","isBordered","isLastFixed","isShadowed","writingMode","startAdornment","endAdornment","resizer","Dropdown","Default","Medium","rest","e","onClick","onKeyDown","verticalAlign","textAlign","userSelect","style","undefined","dropdown","qa","size","colSpan","rowSpan","areaProps"],"mappings":";;;;;;;;;;AAAa;AAAA;AAAA;AAoBN;AAA0B;AAAA;AAAA;AAAA;AAAA;AA6BvB;AAAA;AAAA;AAAA;AAAA;AAII;AACwB;AACEA;AAGtC;AAkEc;AACiC;AAG7C;AAQc;AACiC;AAG7C;AAiBU;AAEZ;AATc;AACiC;AAG7C;AAiES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKX;AAAM;AACJC;AAEAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACgB;AACJ;AACC;AAEbC;AACAC;AACAC;AACUC;AAEqBC;AACTC;AACED;AAErBE;;AAOH;AAQkBC;;AAIlB;AAIgBA;AAMA;AACbD;AAEHE;AACAC;AAEO;AACLC;AACAC;AACAZ;AACAa;AAESC;AAAAA;AAGE;AACwBC;AACcA;AACdA;AACAA;AACCA;AACUA;AACRA;AAER;AACG;AACG;AAGxC;AAEI;AACGd;AAAAA;AACkB;AAClBC;AACH;AACCC;AACAa;AAGP;AAM4E;AAAO;AACjF;AAoBwC;AACtCb;AAEYc;AACQpB;AACAE;AACNmB;AACSP;AAEPQ;AACAC;AAET;AACiC;AAAA;AAI1CC;AAcF;;;;;;;;"}

package/dist/TableHeadCell/types.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.es.js","sources":["../../src/TableHeadCell/types.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport {SizeTokenValue} from '@join-x5/react-theme';\n// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport type {ReactNode, ThHTMLAttributes} from 'react';\nimport type {CSSProperties, QA} from '@join-x5/react-theme';\nimport type {DropdownProps} from '@join-x5/react';\n\nexport enum TableHeadCellVariant {\n  Default = 'default',\n  Checkbox = 'checkbox',\n}\n\nexport type TableHeadCellProps = {\n  /** Размер */\n  size?: SizeTokenValue;\n\n  /** Вариант */\n  variant?: TableHeadCellVariant;\n\n  /** Установка состояния \"Отключен\" */\n  isDisabled?: boolean;\n  /** Установка состояния \"Активен\" */\n  isActive?: boolean;\n  /** С границей */\n  isBordered?: boolean;\n  /** Показывать тень вместо границы, в закрепленных столбцах и шапке */\n  isShadowed?: boolean;\n\n  /** Расположение колонки */\n  columnArea?: ColumnArea;\n  /** Последняя закрепленная колонка\n   *\n   * Добавляет тень в зависимости от `columnArea`\n   */\n  isLastFixed?: boolean;\n\n  /** Иконка | Контент слева */\n  startAdornment?: ReactNode;\n  /** Иконка | Контент справа */\n  endAdornment?: ReactNode;\n\n  /** Контрол смены размера */\n  resizer?: ReactNode;\n\n  /** Контент дропдауна */\n  dropdown?: React.FC<DropdownProps>;\n} & QA &\n  Pick<CSSProperties, 'verticalAlign' | 'textAlign' | 'writingMode' | 'userSelect'> &\n  ThHTMLAttributes<HTMLTableCellElement>;\n"],"names":["TableHeadCellVariant","Default","Checkbox"],"mappings":"AASYA,IAAAA,sBAAAA,OACVC,EAAAA,UAAU,WACVC,EAAAA,WAAW,YAFDF,IAAAA,KAAAA,CAAAA,CAAAA;"}
+{"version":3,"file":"types.es.js","sources":["../../src/TableHeadCell/types.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport {SizeTokenValue} from '@join-x5/react-theme';\n// eslint-disable-next-line @typescript-eslint/consistent-type-imports\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport type {ReactNode, ThHTMLAttributes} from 'react';\nimport type {CSSProperties, QA} from '@join-x5/react-theme';\nimport type {DropdownProps} from '@join-x5/react';\n\nexport enum TableHeadCellVariant {\n  Default = 'default',\n  Checkbox = 'checkbox',\n}\n\nexport type TableHeadCellProps = {\n  /** Размер */\n  size?: SizeTokenValue;\n\n  /** Вариант */\n  variant?: TableHeadCellVariant;\n\n  /** Установка состояния \"Отключен\" */\n  isDisabled?: boolean;\n  /** Установка состояния \"Активен\" */\n  isActive?: boolean;\n  /** С границей */\n  isBordered?: boolean;\n  /** Показывать тень вместо границы, в закрепленных столбцах и шапке */\n  isShadowed?: boolean;\n\n  /** Расположение колонки */\n  columnArea?: ColumnArea;\n  /** Последняя закрепленная колонка\n   *\n   * Добавляет тень в зависимости от `columnArea`\n   */\n  isLastFixed?: boolean;\n\n  /** Иконка | Контент слева */\n  startAdornment?: ReactNode;\n  /** Иконка | Контент справа */\n  endAdornment?: ReactNode;\n\n  /** Контрол смены размера */\n  resizer?: ReactNode;\n\n  /** Контент дропдауна */\n  dropdown?: React.FC<DropdownProps>;\n} & QA &\n  Pick<CSSProperties, 'verticalAlign' | 'textAlign' | 'writingMode' | 'userSelect'> &\n  ThHTMLAttributes<HTMLTableCellElement>;\n"],"names":["TableHeadCellVariant","Default","Checkbox"],"mappings":"AASO,IAAKA,sBAAAA,OACVC,EAAAA,UAAU,WACVC,EAAAA,WAAW,YAFDF,IAAAA,KAAAA,CAAAA,CAAAA;"}

package/dist/TableInputCell/button.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.es.js","sources":["../../src/TableInputCell/button.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TButtonCell = FRC<HTMLTableCellElement, TableCellProps>;\n\nconst sizePadding: Record<SizeTokenValue, CSSProperties['padding']> = {\n  [SizeTokenValue.XXSmall]: 4,\n  [SizeTokenValue.XSmall]: 4,\n  [SizeTokenValue.Small]: 4,\n  [SizeTokenValue.Medium]: 8,\n  [SizeTokenValue.Large]: 6,\n  [SizeTokenValue.XLarge]: 6,\n};\n\nexport const ButtonCell: TButtonCell = forwardRef((props, ref) => {\n  const {padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return <TableCell ref={ref} padding={padding} {...rest} />;\n});\n\nexport type DataGridButtonCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> & PropsWithChildren;\n\nexport const DataGridButtonCell: FRC<HTMLTableCellElement, DataGridButtonCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  return (\n    <ButtonCell ref={ref} {...cellProps}>\n      {children}\n    </ButtonCell>\n  );\n});\n"],"names":["rest","cell","children"],"mappings":";;;;;AAgBA;AAAsE;AAC1C;AACD;AACD;AACC;AACD;AAE1B;AAGQ;AAAA;AAA0D;AAAMA;AAEtE;AACF;AAKQ;AAAA;AAACC;AAAMC;AAIb;AAKF;;;;;"}
+{"version":3,"file":"button.es.js","sources":["../../src/TableInputCell/button.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TButtonCell = FRC<HTMLTableCellElement, TableCellProps>;\n\nconst sizePadding: Record<SizeTokenValue, CSSProperties['padding']> = {\n  [SizeTokenValue.XXSmall]: 4,\n  [SizeTokenValue.XSmall]: 4,\n  [SizeTokenValue.Small]: 4,\n  [SizeTokenValue.Medium]: 8,\n  [SizeTokenValue.Large]: 6,\n  [SizeTokenValue.XLarge]: 6,\n};\n\nexport const ButtonCell: TButtonCell = forwardRef((props, ref) => {\n  const {padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return <TableCell ref={ref} padding={padding} {...rest} />;\n});\n\nexport type DataGridButtonCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> & PropsWithChildren;\n\nexport const DataGridButtonCell: FRC<HTMLTableCellElement, DataGridButtonCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  return (\n    <ButtonCell ref={ref} {...cellProps}>\n      {children}\n    </ButtonCell>\n  );\n});\n"],"names":["rest","cell","children"],"mappings":";;;;;AAgBA;AAAsE;AAC1C;AACD;AACD;AACC;AACD;AAE1B;AAGE;AAAM;AAA0D;AAAMA;AAEtE;AACF;AAKE;AAAM;AAACC;AAAMC;AAIb;AAKF;;;;;"}

package/dist/TableInputCell/checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","sources":["../../src/TableInputCell/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {Checkbox} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC} from '@join-x5/react-theme';\nimport type {CheckboxProps} from '@join-x5/react';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TCheckboxCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: CheckboxProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nconst sizePadding: Record<SizeTokenValue, number> = {\n  [SizeTokenValue.XXSmall]: 8,\n  [SizeTokenValue.XSmall]: 8,\n  [SizeTokenValue.Small]: 8,\n  [SizeTokenValue.Medium]: 12,\n  [SizeTokenValue.Large]: 14,\n  [SizeTokenValue.XLarge]: 14,\n};\n\nexport const CheckboxCell: TCheckboxCell = forwardRef((props, ref) => {\n  const {inputProps, padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return (\n    <TableCell ref={ref} padding={padding} {...rest}>\n      <Checkbox data-action tabIndex={-1} disabled={props.isDisabled} {...inputProps} />\n    </TableCell>\n  );\n});\n\nexport type DataGridCheckboxCellProps<T = DefaultAny, V = DefaultAny> = CheckboxProps & DataGridTableCellProps<T, V>;\n\nexport const DataGridCheckboxCell: FRC<HTMLTableCellElement, DataGridCheckboxCellProps> = forwardRef((props, ref) => {\n  const {cell, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as CheckboxProps;\n\n  return <CheckboxCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n"],"names":["inputProps","rest","cell"],"mappings":";;;;;;AAuBA;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAGQ;AAAA;AAACA;AAAqE;AAAMC;AAElF;AAKF;AAKQ;AAAA;AAACC;AAASD;AAMhB;AACF;;;;;"}
+{"version":3,"file":"checkbox.es.js","sources":["../../src/TableInputCell/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {Checkbox} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC} from '@join-x5/react-theme';\nimport type {CheckboxProps} from '@join-x5/react';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TCheckboxCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: CheckboxProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nconst sizePadding: Record<SizeTokenValue, number> = {\n  [SizeTokenValue.XXSmall]: 8,\n  [SizeTokenValue.XSmall]: 8,\n  [SizeTokenValue.Small]: 8,\n  [SizeTokenValue.Medium]: 12,\n  [SizeTokenValue.Large]: 14,\n  [SizeTokenValue.XLarge]: 14,\n};\n\nexport const CheckboxCell: TCheckboxCell = forwardRef((props, ref) => {\n  const {inputProps, padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return (\n    <TableCell ref={ref} padding={padding} {...rest}>\n      <Checkbox data-action tabIndex={-1} disabled={props.isDisabled} {...inputProps} />\n    </TableCell>\n  );\n});\n\nexport type DataGridCheckboxCellProps<T = DefaultAny, V = DefaultAny> = CheckboxProps & DataGridTableCellProps<T, V>;\n\nexport const DataGridCheckboxCell: FRC<HTMLTableCellElement, DataGridCheckboxCellProps> = forwardRef((props, ref) => {\n  const {cell, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as CheckboxProps;\n\n  return <CheckboxCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n"],"names":["inputProps","rest","cell"],"mappings":";;;;;;AAuBA;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAGE;AAAM;AAACA;AAAqE;AAAMC;AAElF;AAKF;AAKE;AAAM;AAACC;AAASD;AAMhB;AACF;;;;;"}

package/dist/TableInputCell/date.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.es.js","sources":["../../src/TableInputCell/date.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef} from '@join-x5/react-theme';\nimport {Datepicker} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {KeyboardEventHandler, MouseEventHandler} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\nimport type {CalendarValue, DatepickerProps} from '@join-x5/react';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TDateCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: DatepickerProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const DateCell: TDateCell = forwardRef(({inputProps, ...props}, ref) => {\n  const setIsOpen: DatepickerProps['setIsOpen'] = newIsOpen => {\n    props.setIsActive?.(newIsOpen);\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    props.onClick?.(e);\n\n    if (!props.isDisabled && !props.isActive) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (!props.isDisabled && !props.isActive && isEnterCode) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  return (\n    <TableCell ref={ref} padding={0} {...props} onKeyDown={onKeyDown} onClick={onClick}>\n      <Datepicker\n        isTable\n        size={props.size}\n        disabled={props.isDisabled}\n        isOpen={props.isActive}\n        setIsOpen={setIsOpen}\n        {...inputProps}\n      />\n    </TableCell>\n  );\n});\n\nexport type DataGridDateCellProps<T = DefaultAny, V = DefaultAny> = {\n  getValue: (cell: ReactTableCell<T, V>) => CalendarValue;\n  onChange: (cell: ReactTableCell<T, V>, newValue: CalendarValue) => void;\n} & Omit<DatepickerProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V>;\n\nexport const DataGridDateCell: FRC<HTMLTableCellElement, DataGridDateCellProps> = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as DatepickerProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = newValue => onChange(cell, newValue);\n\n  return <DateCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n\nexport type GetDataGridDateCellArgs<T = DefaultAny, V = DefaultAny> = Omit<DataGridDateCellProps<T, V>, 'cell'>;\n\nexport const getDataGridDateCell = <T, V>(args: GetDataGridDateCellArgs<T, V>): ColumnDefTemplate<T, V> => {\n  return ({cell}) => <DataGridDateCell key={cell.id} cell={cell} {...args} />;\n};\n"],"names":["DateCell","inputProps","props","newIsOpen","cell","getValue","onChange","rest","value"],"mappings":";;;;;;AA0BaA;AAAkC;AAACC;AAAoB;AAClE;;AACEC;AAAoBC;AAsBpB;;AAVAD;AAEA;AAEA;AACsB;;AAbtBA;AAGsB;AA0B1B;AASQ;AAAA;AAACE;AAAMC;AAAUC;AAAaC;AAKzBC;AAIb;AAKU;AAACJ;;;;;;"}
+{"version":3,"file":"date.es.js","sources":["../../src/TableInputCell/date.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef} from '@join-x5/react-theme';\nimport {Datepicker} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {KeyboardEventHandler, MouseEventHandler} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\nimport type {CalendarValue, DatepickerProps} from '@join-x5/react';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TDateCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: DatepickerProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const DateCell: TDateCell = forwardRef(({inputProps, ...props}, ref) => {\n  const setIsOpen: DatepickerProps['setIsOpen'] = newIsOpen => {\n    props.setIsActive?.(newIsOpen);\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    props.onClick?.(e);\n\n    if (!props.isDisabled && !props.isActive) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (!props.isDisabled && !props.isActive && isEnterCode) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  return (\n    <TableCell ref={ref} padding={0} {...props} onKeyDown={onKeyDown} onClick={onClick}>\n      <Datepicker\n        isTable\n        size={props.size}\n        disabled={props.isDisabled}\n        isOpen={props.isActive}\n        setIsOpen={setIsOpen}\n        {...inputProps}\n      />\n    </TableCell>\n  );\n});\n\nexport type DataGridDateCellProps<T = DefaultAny, V = DefaultAny> = {\n  getValue: (cell: ReactTableCell<T, V>) => CalendarValue;\n  onChange: (cell: ReactTableCell<T, V>, newValue: CalendarValue) => void;\n} & Omit<DatepickerProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V>;\n\nexport const DataGridDateCell: FRC<HTMLTableCellElement, DataGridDateCellProps> = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as DatepickerProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = newValue => onChange(cell, newValue);\n\n  return <DateCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n\nexport type GetDataGridDateCellArgs<T = DefaultAny, V = DefaultAny> = Omit<DataGridDateCellProps<T, V>, 'cell'>;\n\nexport const getDataGridDateCell = <T, V>(args: GetDataGridDateCellArgs<T, V>): ColumnDefTemplate<T, V> => {\n  return ({cell}) => <DataGridDateCell key={cell.id} cell={cell} {...args} />;\n};\n"],"names":["inputProps","props","newIsOpen","cell","getValue","onChange","rest"],"mappings":";;;;;;AA0BO;AAAwC;AAACA;AAAoB;AAClE;;AACEC;AAAoBC;AAqBtB;;AATED;AAEA;AAEA;AACsB;;AAbtBA;AAGsB;AA0B1B;AASE;AAAM;AAACE;AAAMC;AAAUC;AAAaC;AAKpCN;AAIF;AAKU;AAACG;;;;;;"}

package/dist/TableInputCell/dropdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.es.js","sources":["../../src/TableInputCell/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef} from '@join-x5/react-theme';\nimport {Select} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {ChangeEvent, KeyboardEventHandler, MouseEventHandler} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {DatepickerProps, SelectOption, SelectProps} from '@join-x5/react';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TDropdownCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: SelectProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const DropdownCell: TDropdownCell = forwardRef(({inputProps, ...props}, ref) => {\n  const setIsOpen: DatepickerProps['setIsOpen'] = newIsOpen => {\n    props.setIsActive?.(newIsOpen);\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    props.onClick?.(e);\n\n    if (!props.isDisabled && !props.isActive) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (!props.isDisabled && !props.isActive && isEnterCode) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  return (\n    <TableCell ref={ref} padding={0} {...props} onKeyDown={onKeyDown} onClick={onClick}>\n      <Select\n        isTable\n        size={props.size}\n        disabled={props.isDisabled}\n        isOpen={props.isActive}\n        setIsOpen={setIsOpen}\n        {...inputProps}\n      />\n    </TableCell>\n  );\n});\n\nexport type DataGridDropdownCellProps<T = DefaultAny, V = DefaultAny, O = unknown> = {\n  getValue: (cell: ReactTableCell<T, V>) => SelectProps['value'];\n  onChange: (\n    cell: ReactTableCell<T, V>,\n    newValue: SelectProps['value'],\n    option?: SelectOption<O>,\n    event?: ChangeEvent<HTMLInputElement>\n  ) => void;\n} & Omit<SelectProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V>;\n\nexport const DataGridDropdownCell: FRC<HTMLTableCellElement, DataGridDropdownCellProps> = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as SelectProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = (...args) => onChange(cell, ...args);\n\n  return <DropdownCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n\nexport type GetDataGridDropdownCellArgs<T = DefaultAny, V = DefaultAny> = Omit<DataGridDropdownCellProps<T, V>, 'cell'>;\n\nexport const getDataGridDropdownCell = <T, V>(args: GetDataGridDropdownCellArgs<T, V>): ColumnDefTemplate<T, V> => {\n  return ({cell}) => <DataGridDropdownCell key={cell.id} cell={cell} {...args} />;\n};\n"],"names":["DropdownCell","inputProps","props","newIsOpen","cell","getValue","onChange","rest","value"],"mappings":";;;;;;AA0BaA;AAA0C;AAACC;AAAoB;AAC1E;;AACEC;AAAoBC;AAsBpB;;AAVAD;AAEA;AAEA;AACsB;;AAbtBA;AAGsB;AA0B1B;AAcQ;AAAA;AAACE;AAAMC;AAAUC;AAAaC;AAKzBC;AAIb;AAKU;AAACJ;;;;;;"}
+{"version":3,"file":"dropdown.es.js","sources":["../../src/TableInputCell/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef} from '@join-x5/react-theme';\nimport {Select} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {ChangeEvent, KeyboardEventHandler, MouseEventHandler} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {DatepickerProps, SelectOption, SelectProps} from '@join-x5/react';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TDropdownCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: SelectProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const DropdownCell: TDropdownCell = forwardRef(({inputProps, ...props}, ref) => {\n  const setIsOpen: DatepickerProps['setIsOpen'] = newIsOpen => {\n    props.setIsActive?.(newIsOpen);\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    props.onClick?.(e);\n\n    if (!props.isDisabled && !props.isActive) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (!props.isDisabled && !props.isActive && isEnterCode) {\n      props.setIsActive?.(true);\n    }\n  };\n\n  return (\n    <TableCell ref={ref} padding={0} {...props} onKeyDown={onKeyDown} onClick={onClick}>\n      <Select\n        isTable\n        size={props.size}\n        disabled={props.isDisabled}\n        isOpen={props.isActive}\n        setIsOpen={setIsOpen}\n        {...inputProps}\n      />\n    </TableCell>\n  );\n});\n\nexport type DataGridDropdownCellProps<T = DefaultAny, V = DefaultAny, O = unknown> = {\n  getValue: (cell: ReactTableCell<T, V>) => SelectProps['value'];\n  onChange: (\n    cell: ReactTableCell<T, V>,\n    newValue: SelectProps['value'],\n    option?: SelectOption<O>,\n    event?: ChangeEvent<HTMLInputElement>\n  ) => void;\n} & Omit<SelectProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V>;\n\nexport const DataGridDropdownCell: FRC<HTMLTableCellElement, DataGridDropdownCellProps> = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as SelectProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = (...args) => onChange(cell, ...args);\n\n  return <DropdownCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n\nexport type GetDataGridDropdownCellArgs<T = DefaultAny, V = DefaultAny> = Omit<DataGridDropdownCellProps<T, V>, 'cell'>;\n\nexport const getDataGridDropdownCell = <T, V>(args: GetDataGridDropdownCellArgs<T, V>): ColumnDefTemplate<T, V> => {\n  return ({cell}) => <DataGridDropdownCell key={cell.id} cell={cell} {...args} />;\n};\n"],"names":["inputProps","props","newIsOpen","cell","getValue","onChange","rest"],"mappings":";;;;;;AA0BO;AAAgD;AAACA;AAAoB;AAC1E;;AACEC;AAAoBC;AAqBtB;;AATED;AAEA;AAEA;AACsB;;AAbtBA;AAGsB;AA0B1B;AAcE;AAAM;AAACE;AAAMC;AAAUC;AAAaC;AAKpCN;AAIF;AAKU;AAACG;;;;;;"}

package/dist/TableInputCell/expanding.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"expanding.es.js","sources":["../../src/TableInputCell/expanding.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {ChevronDownIcon, ChevronRightIcon} from '@join-x5/react-icons';\nimport {IconButton, ButtonVariant} from '@join-x5/react';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TExpandingCell = FRC<\n  HTMLTableCellElement,\n  {\n    depth: number;\n    isParent?: boolean;\n  } & TableCellProps\n>;\n\nconst sizePadding = (depth: number, size?: SizeTokenValue, isParent?: boolean): CSSProperties['padding'] => {\n  const paddingOffset = depth * 20 + (isParent ? 0 : 8);\n\n  switch (size) {\n    case SizeTokenValue.XXSmall:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.XSmall:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.Small:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.Large:\n      return `10px 12px 10px ${paddingOffset + 8}px`;\n    case SizeTokenValue.XLarge:\n      return `10px 12px 10px ${paddingOffset + 8}px`;\n    default:\n      return `8px 12px 8px ${paddingOffset + 8}px`;\n  }\n};\n\nexport const ExpandingCell: TExpandingCell = forwardRef((props, ref) => {\n  const {depth, isParent, padding, ...rest} = props;\n\n  const resultPadding = padding ?? sizePadding(depth, props.size, isParent);\n\n  return <TableCell ref={ref} padding={resultPadding} {...rest} />;\n});\n\nexport type DataGridExpandingCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\nexport const DataGridExpandingCell: FRC<HTMLTableCellElement, DataGridExpandingCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  if (!cell.row.getCanExpand()) {\n    return (\n      <ExpandingCell ref={ref} depth={cell.row.depth} {...cellProps}>\n        <TableCellContent>{children}</TableCellContent>\n      </ExpandingCell>\n    );\n  }\n\n  const button = (() => {\n    const Icon = cell.row.getIsExpanded() ? ChevronDownIcon : ChevronRightIcon;\n\n    return (\n      <IconButton\n        data-action\n        tabIndex={-1}\n        variant={ButtonVariant.InnerInput}\n        size={SizeTokenValue.XSmall}\n        onClick={cell.row.getToggleExpandedHandler()}\n      >\n        <Icon size={SizeTokenValue.Small} />\n      </IconButton>\n    );\n  })();\n\n  const contentStyle = {\n    display: 'flex',\n    gap: '4px',\n    width: '100%',\n    height: '100%',\n    alignItems: 'center',\n  };\n\n  return (\n    <ExpandingCell isParent ref={ref} depth={cell.row.depth} {...cellProps}>\n      <div style={contentStyle}>\n        {button}\n        <TableCellContent>{children}</TableCellContent>\n      </div>\n    </ExpandingCell>\n  );\n});\n"],"names":["depth","isParent","padding","rest","cell","children","button"],"mappings":";;;;;;;AAwBA;AACE;AAEA;AAAY;AAED;AAAgC;AAEhC;AAAgC;AAEhC;AAAgC;AAEhC;AAAmC;AAEnC;AAAmC;AAEnC;AAAiC;AAE9C;AAGQ;AAAA;AAACA;AAAOC;AAAUC;AAAYC;AAIpC;AACF;AAMQ;AAAA;AAACC;AAAMC;AAIb;AACE;AAOF;AACE;AAGE;AAQA;AAIiB;AACV;AACJ;AACE;AACC;AACI;AAGd;AAGOC;AAAAA;AAC2B;AAIpC;;;;;"}
+{"version":3,"file":"expanding.es.js","sources":["../../src/TableInputCell/expanding.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {ChevronDownIcon, ChevronRightIcon} from '@join-x5/react-icons';\nimport {IconButton, ButtonVariant} from '@join-x5/react';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TExpandingCell = FRC<\n  HTMLTableCellElement,\n  {\n    depth: number;\n    isParent?: boolean;\n  } & TableCellProps\n>;\n\nconst sizePadding = (depth: number, size?: SizeTokenValue, isParent?: boolean): CSSProperties['padding'] => {\n  const paddingOffset = depth * 20 + (isParent ? 0 : 8);\n\n  switch (size) {\n    case SizeTokenValue.XXSmall:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.XSmall:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.Small:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.Large:\n      return `10px 12px 10px ${paddingOffset + 8}px`;\n    case SizeTokenValue.XLarge:\n      return `10px 12px 10px ${paddingOffset + 8}px`;\n    default:\n      return `8px 12px 8px ${paddingOffset + 8}px`;\n  }\n};\n\nexport const ExpandingCell: TExpandingCell = forwardRef((props, ref) => {\n  const {depth, isParent, padding, ...rest} = props;\n\n  const resultPadding = padding ?? sizePadding(depth, props.size, isParent);\n\n  return <TableCell ref={ref} padding={resultPadding} {...rest} />;\n});\n\nexport type DataGridExpandingCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\nexport const DataGridExpandingCell: FRC<HTMLTableCellElement, DataGridExpandingCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  if (!cell.row.getCanExpand()) {\n    return (\n      <ExpandingCell ref={ref} depth={cell.row.depth} {...cellProps}>\n        <TableCellContent>{children}</TableCellContent>\n      </ExpandingCell>\n    );\n  }\n\n  const button = (() => {\n    const Icon = cell.row.getIsExpanded() ? ChevronDownIcon : ChevronRightIcon;\n\n    return (\n      <IconButton\n        data-action\n        tabIndex={-1}\n        variant={ButtonVariant.InnerInput}\n        size={SizeTokenValue.XSmall}\n        onClick={cell.row.getToggleExpandedHandler()}\n      >\n        <Icon size={SizeTokenValue.Small} />\n      </IconButton>\n    );\n  })();\n\n  const contentStyle = {\n    display: 'flex',\n    gap: '4px',\n    width: '100%',\n    height: '100%',\n    alignItems: 'center',\n  };\n\n  return (\n    <ExpandingCell isParent ref={ref} depth={cell.row.depth} {...cellProps}>\n      <div style={contentStyle}>\n        {button}\n        <TableCellContent>{children}</TableCellContent>\n      </div>\n    </ExpandingCell>\n  );\n});\n"],"names":["size","depth","isParent","padding","rest","cell","children","button"],"mappings":";;;;;;;AAwBA;AACE;AAEA;AAAQA;AAEJ;AAAuC;AAEvC;AAAuC;AAEvC;AAAuC;AAEvC;AAA0C;AAE1C;AAA0C;AAE1C;AAAwC;AAE9C;AAGE;AAAM;AAACC;AAAOC;AAAUC;AAAYC;AAIpC;AACF;AAME;AAAM;AAACC;AAAMC;AAIb;AACE;AAOF;AACE;AAEA;AASE;AAIiB;AACV;AACJ;AACE;AACC;AACI;AAGd;AAGOC;AAAAA;AAC2B;AAIpC;;;;;"}

package/dist/TableInputCell/hook.d.ts

@@ -90,6 +90,8 @@ export declare const useTableCellTextInput: <T extends HTMLInputElement | HTMLTe
         unselectable?: "on" | "off" | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -165,7 +167,7 @@ export declare const useTableCellTextInput: <T extends HTMLInputElement | HTMLTe
         onBlurCapture?: import('react').FocusEventHandler<HTMLTableCellElement> | undefined;
         onChange?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
         onChangeCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
-        onBeforeInput?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
+        onBeforeInput?: import('react').InputEventHandler<HTMLTableCellElement> | undefined;
         onBeforeInputCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
         onInput?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
         onInputCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
@@ -214,8 +216,6 @@ export declare const useTableCellTextInput: <T extends HTMLInputElement | HTMLTe
         onProgressCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
         onRateChange?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
         onRateChangeCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
-        onResize?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
-        onResizeCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
         onSeeked?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
         onSeekedCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
         onSeeking?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
@@ -391,6 +391,8 @@ export declare const useDataGridInputCell: (cell: ReactTableCell<unknown, unknow
     unselectable?: "on" | "off" | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -466,7 +468,7 @@ export declare const useDataGridInputCell: (cell: ReactTableCell<unknown, unknow
     onBlurCapture?: import('react').FocusEventHandler<HTMLTableCellElement> | undefined;
     onChange?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
     onChangeCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
-    onBeforeInput?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
+    onBeforeInput?: import('react').InputEventHandler<HTMLTableCellElement> | undefined;
     onBeforeInputCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
     onInput?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
     onInputCapture?: import('react').FormEventHandler<HTMLTableCellElement> | undefined;
@@ -516,8 +518,6 @@ export declare const useDataGridInputCell: (cell: ReactTableCell<unknown, unknow
     onProgressCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onRateChange?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onRateChangeCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
-    onResize?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
-    onResizeCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onSeeked?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onSeekedCapture?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;
     onSeeking?: import('react').ReactEventHandler<HTMLTableCellElement> | undefined;

package/dist/TableInputCell/hook.es.js

@@ -1,6 +1,6 @@
 "use client";
-import { useContext as d, useRef as f } from "react";
-import { useRefMerge as C } from "@join-x5/react-theme";
+import { useContext as d, useRef as C } from "react";
+import { useRefMerge as f } from "@join-x5/react-theme";
 import { DataGridContext as m } from "../DataGridContext.es.js";
 import { useDataGridTableCell as D } from "../TableCell/hook.es.js";
 const w = (t, u) => {
@@ -8,7 +8,7 @@ const w = (t, u) => {
     isDisabled: o,
     isActive: c,
     setIsActive: i
-  } = t, l = C(u), s = f(null), r = () => {
+  } = t, l = f(u), s = C(null), r = () => {
     const e = s.current;
     o || !e || (i == null || i(!0), setTimeout(() => {
       e.selectionStart = e.value.length, e.focus();

package/dist/TableInputCell/hook.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.es.js","sources":["../../src/TableInputCell/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext, useRef} from 'react';\nimport {useRefMerge} from '@join-x5/react-theme';\n\nimport {DataGridContext} from '../DataGridContext';\nimport {useDataGridTableCell} from '../TableCell/hook';\n\nimport type {KeyboardEventHandler, MouseEventHandler, Ref} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {TableCellProps} from 'TableCell';\n\nexport const useTableCellTextInput = <T extends HTMLInputElement | HTMLTextAreaElement>(\n  props: TableCellProps,\n  baseRef: Ref<HTMLTableCellElement>\n) => {\n  const {isDisabled, isActive, setIsActive} = props;\n\n  const ref = useRefMerge(baseRef);\n  const inputRef = useRef<T>(null);\n\n  const onEdit = () => {\n    const input = inputRef.current;\n    if (isDisabled || !input) {\n      return;\n    }\n\n    setIsActive?.(true);\n\n    setTimeout(() => {\n      input.selectionStart = input.value.length;\n      input.focus();\n    });\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    if (!isActive) {\n      e.currentTarget.focus();\n    }\n\n    props.onClick?.(e);\n  };\n\n  const onDoubleClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    onEdit();\n\n    props.onDoubleClick?.(e);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (!isActive && isEnterCode) {\n      onEdit();\n    }\n  };\n\n  const cellProps = {\n    ...props,\n\n    ref,\n    onClick,\n    onDoubleClick,\n    onKeyDown,\n\n    'data-editable': !isDisabled ? true : undefined,\n  };\n\n  return {cellProps, ref, inputRef};\n};\n\nexport const useDataGridInputCell = (cell: ReactTableCell<unknown, unknown>) => {\n  const props = useDataGridTableCell(cell);\n  const context = useContext(DataGridContext);\n\n  const isActive = cell.id === context.activeCell;\n  const setIsActive = newIsActive => context.setActiveCell(newIsActive ? cell.id : null);\n\n  return {...props, isActive, setIsActive};\n};\n"],"names":["useTableCellTextInput","isDisabled","isActive","setIsActive","selectionStart","props","ref","e","inputRef"],"mappings":";;;;;AAYaA;AAIL;AAAA;AAACC;AAAYC;AAAUC;AAM3B;AACIF;AAOIG;AACM;AACb;AAsCI;AAAA;AAXW;AACbC;AAEHC;;AA1BA;AAIgBC;AAClB;;AAGS;AAEeA;AACxB;;AAGEF;AAEA;AAEI;AACK;AAEX;AAUiC;AACjC;AAEmBC;AAAKE;AAC1B;AAGQH;AAMC;AAAA;AAAIA;AAAOH;AAFmE;AAGvF;;;;;"}
+{"version":3,"file":"hook.es.js","sources":["../../src/TableInputCell/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext, useRef} from 'react';\nimport {useRefMerge} from '@join-x5/react-theme';\n\nimport {DataGridContext} from '../DataGridContext';\nimport {useDataGridTableCell} from '../TableCell/hook';\n\nimport type {KeyboardEventHandler, MouseEventHandler, Ref} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {TableCellProps} from 'TableCell';\n\nexport const useTableCellTextInput = <T extends HTMLInputElement | HTMLTextAreaElement>(\n  props: TableCellProps,\n  baseRef: Ref<HTMLTableCellElement>\n) => {\n  const {isDisabled, isActive, setIsActive} = props;\n\n  const ref = useRefMerge(baseRef);\n  const inputRef = useRef<T>(null);\n\n  const onEdit = () => {\n    const input = inputRef.current;\n    if (isDisabled || !input) {\n      return;\n    }\n\n    setIsActive?.(true);\n\n    setTimeout(() => {\n      input.selectionStart = input.value.length;\n      input.focus();\n    });\n  };\n\n  const onClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    if (!isActive) {\n      e.currentTarget.focus();\n    }\n\n    props.onClick?.(e);\n  };\n\n  const onDoubleClick: MouseEventHandler<HTMLTableCellElement> = e => {\n    onEdit();\n\n    props.onDoubleClick?.(e);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableCellElement> = e => {\n    props.onKeyDown?.(e);\n\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (!isActive && isEnterCode) {\n      onEdit();\n    }\n  };\n\n  const cellProps = {\n    ...props,\n\n    ref,\n    onClick,\n    onDoubleClick,\n    onKeyDown,\n\n    'data-editable': !isDisabled ? true : undefined,\n  };\n\n  return {cellProps, ref, inputRef};\n};\n\nexport const useDataGridInputCell = (cell: ReactTableCell<unknown, unknown>) => {\n  const props = useDataGridTableCell(cell);\n  const context = useContext(DataGridContext);\n\n  const isActive = cell.id === context.activeCell;\n  const setIsActive = newIsActive => context.setActiveCell(newIsActive ? cell.id : null);\n\n  return {...props, isActive, setIsActive};\n};\n"],"names":["isDisabled","isActive","setIsActive","input","focus","props","ref","e","onEdit","undefined","inputRef"],"mappings":";;;;;AAYO;AAIL;AAAM;AAACA;AAAYC;AAAUC;AAM3B;AACA;AAOEC;AACMC;AACP;AAsCH;AAAO;AAXW;AACbC;AAEHC;;AA1BA;AAIgBC;AAClB;;AAGEC;AAEsBD;AACxB;;AAGEF;AAEA;AAEA;AACEG;AAEJ;AAUiC;AAAOC;AAGrBH;AAAKI;AAC1B;AAGE;AAMA;AAAO;AAAIL;AAAOJ;AAFmE;AAGvF;;;;;"}

package/dist/TableInputCell/icon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.es.js","sources":["../../src/TableInputCell/icon.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TIconCell = FRC<HTMLTableCellElement, TableCellProps>;\n\nconst sizePadding: Record<SizeTokenValue, number> = {\n  [SizeTokenValue.XXSmall]: 8,\n  [SizeTokenValue.XSmall]: 8,\n  [SizeTokenValue.Small]: 8,\n  [SizeTokenValue.Medium]: 12,\n  [SizeTokenValue.Large]: 14,\n  [SizeTokenValue.XLarge]: 14,\n};\n\nexport const IconCell: TIconCell = forwardRef((props, ref) => {\n  const {padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return <TableCell ref={ref} padding={padding} {...rest} />;\n});\n\nexport type DataGridIconCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> & PropsWithChildren;\n\nexport const DataGridIconCell: FRC<HTMLTableCellElement, DataGridIconCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  return (\n    <IconCell ref={ref} {...cellProps}>\n      {children}\n    </IconCell>\n  );\n});\n"],"names":["rest","cell","children"],"mappings":";;;;;AAgBA;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAGQ;AAAA;AAA0D;AAAMA;AAEtE;AACF;AAKQ;AAAA;AAACC;AAAMC;AAIb;AAKF;;;;;"}
+{"version":3,"file":"icon.es.js","sources":["../../src/TableInputCell/icon.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TIconCell = FRC<HTMLTableCellElement, TableCellProps>;\n\nconst sizePadding: Record<SizeTokenValue, number> = {\n  [SizeTokenValue.XXSmall]: 8,\n  [SizeTokenValue.XSmall]: 8,\n  [SizeTokenValue.Small]: 8,\n  [SizeTokenValue.Medium]: 12,\n  [SizeTokenValue.Large]: 14,\n  [SizeTokenValue.XLarge]: 14,\n};\n\nexport const IconCell: TIconCell = forwardRef((props, ref) => {\n  const {padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return <TableCell ref={ref} padding={padding} {...rest} />;\n});\n\nexport type DataGridIconCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> & PropsWithChildren;\n\nexport const DataGridIconCell: FRC<HTMLTableCellElement, DataGridIconCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  return (\n    <IconCell ref={ref} {...cellProps}>\n      {children}\n    </IconCell>\n  );\n});\n"],"names":["rest","cell","children"],"mappings":";;;;;AAgBA;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAGE;AAAM;AAA0D;AAAMA;AAEtE;AACF;AAKE;AAAM;AAACC;AAAMC;AAIb;AAKF;;;;;"}

package/dist/TableInputCell/label.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.es.js","sources":["../../src/TableInputCell/label.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TLabelCell = FRC<HTMLTableCellElement, TableCellProps>;\n\nconst sizePadding: Record<SizeTokenValue, string> = {\n  [SizeTokenValue.XXSmall]: '6px 8px',\n  [SizeTokenValue.XSmall]: '6px 8px',\n  [SizeTokenValue.Small]: '6px 8px',\n  [SizeTokenValue.Medium]: '10px 12px',\n  [SizeTokenValue.Large]: '12px',\n  [SizeTokenValue.XLarge]: '12px',\n};\n\nexport const LabelCell: TLabelCell = forwardRef((props, ref) => {\n  const {padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return <TableCell ref={ref} padding={padding} {...rest} />;\n});\n\nexport type DataGridLabelCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> & PropsWithChildren;\n\nexport const DataGridLabelCell: FRC<HTMLTableCellElement, DataGridLabelCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  return (\n    <LabelCell ref={ref} {...cellProps}>\n      {children}\n    </LabelCell>\n  );\n});\n"],"names":["rest","cell","children"],"mappings":";;;;;AAgBA;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAGQ;AAAA;AAA0D;AAAMA;AAEtE;AACF;AAKQ;AAAA;AAACC;AAAMC;AAIb;AAKF;;;;;"}
+{"version":3,"file":"label.es.js","sources":["../../src/TableInputCell/label.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TLabelCell = FRC<HTMLTableCellElement, TableCellProps>;\n\nconst sizePadding: Record<SizeTokenValue, string> = {\n  [SizeTokenValue.XXSmall]: '6px 8px',\n  [SizeTokenValue.XSmall]: '6px 8px',\n  [SizeTokenValue.Small]: '6px 8px',\n  [SizeTokenValue.Medium]: '10px 12px',\n  [SizeTokenValue.Large]: '12px',\n  [SizeTokenValue.XLarge]: '12px',\n};\n\nexport const LabelCell: TLabelCell = forwardRef((props, ref) => {\n  const {padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return <TableCell ref={ref} padding={padding} {...rest} />;\n});\n\nexport type DataGridLabelCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> & PropsWithChildren;\n\nexport const DataGridLabelCell: FRC<HTMLTableCellElement, DataGridLabelCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  return (\n    <LabelCell ref={ref} {...cellProps}>\n      {children}\n    </LabelCell>\n  );\n});\n"],"names":["rest","cell","children"],"mappings":";;;;;AAgBA;AAAoD;AACxB;AACD;AACD;AACC;AACD;AAE1B;AAGE;AAAM;AAA0D;AAAMA;AAEtE;AACF;AAKE;AAAM;AAACC;AAAMC;AAIb;AAKF;;;;;"}

package/dist/TableInputCell/switch.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.es.js","sources":["../../src/TableInputCell/switch.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {Switch} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {SwitchProps} from '@join-x5/react';\nimport type {FRC, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TSwitchCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: SwitchProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nconst sizePadding: Record<SizeTokenValue, CSSProperties['padding']> = {\n  [SizeTokenValue.XXSmall]: '8px',\n  [SizeTokenValue.XSmall]: '8px',\n  [SizeTokenValue.Small]: '8px',\n  [SizeTokenValue.Medium]: '12px',\n  [SizeTokenValue.Large]: '14px 12px 14px 14px',\n  [SizeTokenValue.XLarge]: '14px 12px 14px 14px',\n};\n\nexport const SwitchCell: TSwitchCell = forwardRef((props, ref) => {\n  const {inputProps, padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return (\n    <TableCell ref={ref} padding={padding} {...rest}>\n      <Switch data-action tabIndex={-1} disabled={props.isDisabled} size={SizeTokenValue.Small} {...inputProps} />\n    </TableCell>\n  );\n});\n\nexport type DataGridSwitchCellProps<T = DefaultAny, V = DefaultAny> = SwitchProps & DataGridTableCellProps<T, V>;\n\nexport const DataGridSwitchCell: FRC<HTMLTableCellElement, DataGridSwitchCellProps> = forwardRef((props, ref) => {\n  const {cell, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as SwitchProps;\n\n  return <SwitchCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n"],"names":["inputProps","rest","cell"],"mappings":";;;;;;AAuBA;AAAsE;AAC1C;AACD;AACD;AACC;AACD;AAE1B;AAGQ;AAAA;AAACA;AAAqE;AAAMC;AAGhF;AAIJ;AAKQ;AAAA;AAACC;AAASD;AAMhB;AACF;;;;;"}
+{"version":3,"file":"switch.es.js","sources":["../../src/TableInputCell/switch.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {Switch} from '@join-x5/react';\n\nimport {TableCell} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {SwitchProps} from '@join-x5/react';\nimport type {FRC, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TSwitchCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: SwitchProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nconst sizePadding: Record<SizeTokenValue, CSSProperties['padding']> = {\n  [SizeTokenValue.XXSmall]: '8px',\n  [SizeTokenValue.XSmall]: '8px',\n  [SizeTokenValue.Small]: '8px',\n  [SizeTokenValue.Medium]: '12px',\n  [SizeTokenValue.Large]: '14px 12px 14px 14px',\n  [SizeTokenValue.XLarge]: '14px 12px 14px 14px',\n};\n\nexport const SwitchCell: TSwitchCell = forwardRef((props, ref) => {\n  const {inputProps, padding = sizePadding[props.size ?? SizeTokenValue.Medium], ...rest} = props;\n\n  return (\n    <TableCell ref={ref} padding={padding} {...rest}>\n      <Switch data-action tabIndex={-1} disabled={props.isDisabled} size={SizeTokenValue.Small} {...inputProps} />\n    </TableCell>\n  );\n});\n\nexport type DataGridSwitchCellProps<T = DefaultAny, V = DefaultAny> = SwitchProps & DataGridTableCellProps<T, V>;\n\nexport const DataGridSwitchCell: FRC<HTMLTableCellElement, DataGridSwitchCellProps> = forwardRef((props, ref) => {\n  const {cell, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as SwitchProps;\n\n  return <SwitchCell ref={ref} {...cellProps} inputProps={inputProps} />;\n});\n"],"names":["inputProps","rest","cell"],"mappings":";;;;;;AAuBA;AAAsE;AAC1C;AACD;AACD;AACC;AACD;AAE1B;AAGE;AAAM;AAACA;AAAqE;AAAMC;AAElF;AAKF;AAKE;AAAM;AAACC;AAASD;AAMhB;AACF;;;;;"}

package/dist/TableInputCell/text.es.js

@@ -32,7 +32,7 @@ const U = /* @__PURE__ */ m("div", process.env.NODE_ENV === "production" ? {
   name: "kvz3z7",
   styles: "position:absolute;top:0;left:0;width:100%;min-width:10px;padding:0;background-color:transparent;border:none;outline:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;&[data-hidden]{visibility:hidden;pointer-events:none;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC9zcmMvVGFibGVJbnB1dENlbGwvdGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0IwQiIsImZpbGUiOiIvaG9tZS9zYWR5a292c2Qvam9pbi14NS9wYWNrYWdlcy9kYXRhLWdyaWQvc3JjL1RhYmxlSW5wdXRDZWxsL3RleHQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7dXNlRWZmZWN0LCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtmb3J3YXJkUmVmfSBmcm9tICdAam9pbi14NS9yZWFjdC10aGVtZSc7XG5cbmltcG9ydCB7VGFibGVDZWxsLCBUYWJsZUNlbGxDb250ZW50fSBmcm9tICcuLi9UYWJsZUNlbGwnO1xuXG5pbXBvcnQge3VzZURhdGFHcmlkSW5wdXRDZWxsLCB1c2VUYWJsZUNlbGxUZXh0SW5wdXR9IGZyb20gJy4vaG9vayc7XG5cbmltcG9ydCB0eXBlIHtcbiAgQ2hhbmdlRXZlbnRIYW5kbGVyLFxuICBGb2N1c0V2ZW50LFxuICBGb2N1c0V2ZW50SGFuZGxlcixcbiAgSW5wdXRIVE1MQXR0cmlidXRlcyxcbiAgS2V5Ym9hcmRFdmVudEhhbmRsZXIsXG4gIFJlYWN0Tm9kZSxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUge0NlbGwgYXMgUmVhY3RUYWJsZUNlbGx9IGZyb20gJ0B0YW5zdGFjay9yZWFjdC10YWJsZSc7XG5pbXBvcnQgdHlwZSB7RlJDLCBQcm9wc1dpdGhDaGlsZHJlbn0gZnJvbSAnQGpvaW4teDUvcmVhY3QtdGhlbWUnO1xuaW1wb3J0IHR5cGUge0RhdGFHcmlkVGFibGVDZWxsUHJvcHMsIFRhYmxlQ2VsbFByb3BzfSBmcm9tICcuLi9UYWJsZUNlbGwnO1xuaW1wb3J0IHR5cGUge0NvbHVtbkRlZlRlbXBsYXRlfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgQ2hpbGRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgJltkYXRhLWhpZGRlbl0ge1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICB3aWR0aDogMTAwJTtcbiAgbWluLXdpZHRoOiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYm9yZGVyOiBub25lO1xuICBvdXRsaW5lOiBub25lO1xuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgZm9udC1zaXplOiBpbmhlcml0O1xuICBmb250LXdlaWdodDogaW5oZXJpdDtcbiAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7XG5cbiAgJltkYXRhLWhpZGRlbl0ge1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbnR5cGUgRGVmYXVsdEFueSA9IGFueTtcblxuZXhwb3J0IHR5cGUgVGV4dElucHV0UHJvcHMgPSB7XG4gIHZhbHVlOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAobmV3VmFsdWU6IHN0cmluZywgZTogRm9jdXNFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbn0gJiBPbWl0PElucHV0SFRNTEF0dHJpYnV0ZXM8SFRNTElucHV0RWxlbWVudD4sICd2YWx1ZScgfCAnb25DaGFuZ2UnPjtcblxudHlwZSBUVGV4dElucHV0Q2VsbCA9IEZSQzxcbiAgSFRNTFRhYmxlQ2VsbEVsZW1lbnQsXG4gIHtcbiAgICBpbnB1dFByb3BzOiBUZXh0SW5wdXRQcm9wcztcbiAgfSAmIE9taXQ8VGFibGVDZWxsUHJvcHMsICd2YWx1ZScgfCAnb25DaGFuZ2UnPlxuPjtcblxuZXhwb3J0IGNvbnN0IFRleHRJbnB1dENlbGw6IFRUZXh0SW5wdXRDZWxsID0gZm9yd2FyZFJlZigoe2lucHV0UHJvcHMsIC4uLnByb3BzfSwgYmFzZVJlZikgPT4ge1xuICBjb25zdCB7Y2VsbFByb3BzLCByZWYsIGlucHV0UmVmfSA9IHVzZVRhYmxlQ2VsbFRleHRJbnB1dDxIVE1MSW5wdXRFbGVtZW50Pihwcm9wcywgYmFzZVJlZik7XG5cbiAgY29uc3QgW3ZhbHVlLCBzZXRWYWx1ZV0gPSB1c2VTdGF0ZShpbnB1dFByb3BzLnZhbHVlID8/ICcnKTtcblxuICBjb25zdCBvbkNoYW5nZTogQ2hhbmdlRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+ID0gZSA9PiB7XG4gICAgc2V0VmFsdWUoZS50YXJnZXQudmFsdWUpO1xuICB9O1xuXG4gIGNvbnN0IG9uS2V5RG93bjogS2V5Ym9hcmRFdmVudEhhbmRsZXI8SFRNTElucHV0RWxlbWVudD4gPSBlID0+IHtcbiAgICBjb25zdCBpc0VudGVyQ29kZSA9IGUuY29kZSA9PT0gJ0VudGVyJyB8fCBlLmNvZGUgPT09ICdOdW1wYWRFbnRlcic7XG5cbiAgICBpZiAoZS5jb2RlID09PSAnRXNjYXBlJyB8fCBpc0VudGVyQ29kZSkge1xuICAgICAgcHJvcHMuc2V0SXNBY3RpdmU/LihmYWxzZSk7XG4gICAgICBlLmN1cnJlbnRUYXJnZXQuYmx1cigpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBvbkJsdXI6IEZvY3VzRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+ID0gZSA9PiB7XG4gICAgcHJvcHMuc2V0SXNBY3RpdmU/LihmYWxzZSk7XG5cbiAgICBpbnB1dFByb3BzLm9uQ2hhbmdlKHZhbHVlLCBlKTtcbiAgICBpbnB1dFByb3BzLm9uQmx1cj8uKGUpO1xuICAgIHJlZi5jdXJyZW50Py5ibHVyKCk7XG4gIH07XG5cbiAgY29uc3QgaXNDaGlsZEhpZGRlbiA9IHByb3BzLmlzQWN0aXZlID8gdHJ1ZSA6IHVuZGVmaW5lZDtcblxuICBjb25zdCByZXN1bHRQcm9wcyA9IHtcbiAgICAuLi5pbnB1dFByb3BzLFxuXG4gICAgdmFsdWUsXG4gICAgb25DaGFuZ2UsXG4gICAgb25LZXlEb3duLFxuICAgIG9uQmx1cixcblxuICAgIHNpemU6IDAsXG4gICAgJ2RhdGEtaGlkZGVuJzogcHJvcHMuaXNBY3RpdmUgPyB1bmRlZmluZWQgOiB0cnVlLFxuICB9O1xuXG4gIGNvbnN0IGNvbnRlbnRQcm9wcyA9IHtcbiAgICBpc011bHRpbGluZTogY2VsbFByb3BzLmlzTXVsdGlsaW5lLFxuICAgIHdoaXRlU3BhY2U6IGNlbGxQcm9wcy53aGl0ZVNwYWNlLFxuICAgIHdvcmRCcmVhazogY2VsbFByb3BzLndvcmRCcmVhayxcbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHNldFZhbHVlKGlucHV0UHJvcHMudmFsdWUpO1xuICB9LCBbaW5wdXRQcm9wcy52YWx1ZV0pO1xuXG4gIHJldHVybiAoXG4gICAgPFRhYmxlQ2VsbCB7Li4uY2VsbFByb3BzfT5cbiAgICAgIDxUYWJsZUNlbGxDb250ZW50IHsuLi5jb250ZW50UHJvcHN9PlxuICAgICAgICA8Q2hpbGRDb250ZW50IGRhdGEtaGlkZGVuPXtpc0NoaWxkSGlkZGVufT57cHJvcHMuY2hpbGRyZW59PC9DaGlsZENvbnRlbnQ+XG4gICAgICAgIDxJbnB1dCByZWY9e2lucHV0UmVmfSB7Li4ucmVzdWx0UHJvcHN9IC8+XG4gICAgICA8L1RhYmxlQ2VsbENvbnRlbnQ+XG4gICAgPC9UYWJsZUNlbGw+XG4gICk7XG59KTtcblxuZXhwb3J0IHR5cGUgRGF0YUdyaWRUZXh0SW5wdXRDZWxsUHJvcHM8VCA9IERlZmF1bHRBbnksIFYgPSBEZWZhdWx0QW55PiA9IHtcbiAgZ2V0VmFsdWU6IChjZWxsOiBSZWFjdFRhYmxlQ2VsbDxULCBWPikgPT4gc3RyaW5nO1xuICBvbkNoYW5nZTogKGNlbGw6IFJlYWN0VGFibGVDZWxsPFQsIFY+LCBuZXdWYWx1ZTogc3RyaW5nLCBlOiBGb2N1c0V2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xufSAmIE9taXQ8VGV4dElucHV0UHJvcHMsICd2YWx1ZScgfCAnb25DaGFuZ2UnPiAmXG4gIERhdGFHcmlkVGFibGVDZWxsUHJvcHM8VCwgVj4gJlxuICBQcm9wc1dpdGhDaGlsZHJlbjtcblxuZXhwb3J0IGNvbnN0IERhdGFHcmlkVGV4dElucHV0Q2VsbDogRlJDPEhUTUxUYWJsZUNlbGxFbGVtZW50LCBEYXRhR3JpZFRleHRJbnB1dENlbGxQcm9wcz4gPSBmb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHtjZWxsLCBnZXRWYWx1ZSwgb25DaGFuZ2UsIGNoaWxkcmVuLCAuLi5yZXN0fSA9IHByb3BzO1xuXG4gIGNvbnN0IGNlbGxQcm9wcyA9IHVzZURhdGFHcmlkSW5wdXRDZWxsKGNlbGwpO1xuXG4gIGNvbnN0IGlucHV0UHJvcHMgPSByZXN0IGFzIFRleHRJbnB1dFByb3BzO1xuICBpbnB1dFByb3BzLnZhbHVlID0gZ2V0VmFsdWUoY2VsbCk7XG4gIGlucHV0UHJvcHMub25DaGFuZ2UgPSAobmV3VmFsdWUsIGUpID0+IG9uQ2hhbmdlKGNlbGwsIG5ld1ZhbHVlLCBlKTtcblxuICByZXR1cm4gKFxuICAgIDxUZXh0SW5wdXRDZWxsIHJlZj17cmVmfSB7Li4uY2VsbFByb3BzfSBpbnB1dFByb3BzPXtpbnB1dFByb3BzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1RleHRJbnB1dENlbGw+XG4gICk7XG59KTtcblxuZXhwb3J0IHR5cGUgR2V0RGF0YUdyaWRUZXh0SW5wdXRDZWxsQXJnczxUID0gRGVmYXVsdEFueSwgViA9IERlZmF1bHRBbnk+ID0gT21pdDxcbiAgRGF0YUdyaWRUZXh0SW5wdXRDZWxsUHJvcHM8VCwgVj4sXG4gICdjZWxsJyB8ICdjaGlsZHJlbidcbj47XG5cbmV4cG9ydCBjb25zdCBnZXREYXRhR3JpZFRleHRJbnB1dENlbGwgPSA8VCwgVj4oYXJnczogR2V0RGF0YUdyaWRUZXh0SW5wdXRDZWxsQXJnczxULCBWPik6IENvbHVtbkRlZlRlbXBsYXRlPFQsIFY+ID0+IHtcbiAgcmV0dXJuICh7Y2VsbH0pID0+IHtcbiAgICBjb25zdCBjb250ZW50ID0gKGNlbGwuZ2V0VmFsdWUoKSA/PyBudWxsKSBhcyBSZWFjdE5vZGU7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPERhdGFHcmlkVGV4dElucHV0Q2VsbCBrZXk9e2NlbGwuaWR9IGNlbGw9e2NlbGx9IHsuLi5hcmdzfT5cbiAgICAgICAge2NvbnRlbnR9XG4gICAgICA8L0RhdGFHcmlkVGV4dElucHV0Q2VsbD5cbiAgICApO1xuICB9O1xufTtcbiJdfQ== */",
   toString: X
-}), y = t(({
+}), o = t(({
   inputProps: c,
   ...b
 }, G) => {
@@ -68,7 +68,7 @@ const U = /* @__PURE__ */ m("div", process.env.NODE_ENV === "production" ? {
     /* @__PURE__ */ g(U, { "data-hidden": x, children: b.children }),
     /* @__PURE__ */ g(N, { ref: i, ...s })
   ] }) });
-}), o = t((c, b) => {
+}), y = t((c, b) => {
   const {
     cell: G,
     getValue: I,
@@ -76,16 +76,16 @@ const U = /* @__PURE__ */ m("div", process.env.NODE_ENV === "production" ? {
     children: i,
     ...u
   } = c, V = Y(G), d = u;
-  return d.value = I(G), d.onChange = (W, C) => n(G, W, C), /* @__PURE__ */ g(y, { ref: b, ...V, inputProps: d, children: i });
+  return d.value = I(G), d.onChange = (W, C) => n(G, W, C), /* @__PURE__ */ g(o, { ref: b, ...V, inputProps: d, children: i });
 }), D = (c) => ({
   cell: b
 }) => {
   const G = b.getValue() ?? null;
-  return /* @__PURE__ */ g(o, { cell: b, ...c, children: G }, b.id);
+  return /* @__PURE__ */ g(y, { cell: b, ...c, children: G }, b.id);
 };
 export {
-  o as DataGridTextInputCell,
-  y as TextInputCell,
+  y as DataGridTextInputCell,
+  o as TextInputCell,
   D as getDataGridTextInputCell
 };
 //# sourceMappingURL=text.es.js.map

package/dist/TableInputCell/text.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.es.js","sources":["../../src/TableInputCell/text.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\n\nimport {useEffect, useState} from 'react';\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell, useTableCellTextInput} from './hook';\n\nimport type {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\n\nconst ChildContent = styled.div`\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\nconst Input = styled.input`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  min-width: 10px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\nexport type TextInputProps = {\n  value: string;\n  onChange: (newValue: string, e: FocusEvent<HTMLInputElement>) => void;\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\ntype TTextInputCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: TextInputProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const TextInputCell: TTextInputCell = forwardRef(({inputProps, ...props}, baseRef) => {\n  const {cellProps, ref, inputRef} = useTableCellTextInput<HTMLInputElement>(props, baseRef);\n\n  const [value, setValue] = useState(inputProps.value ?? '');\n\n  const onChange: ChangeEventHandler<HTMLInputElement> = e => {\n    setValue(e.target.value);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (e.code === 'Escape' || isEnterCode) {\n      props.setIsActive?.(false);\n      e.currentTarget.blur();\n    }\n  };\n\n  const onBlur: FocusEventHandler<HTMLInputElement> = e => {\n    props.setIsActive?.(false);\n\n    inputProps.onChange(value, e);\n    inputProps.onBlur?.(e);\n    ref.current?.blur();\n  };\n\n  const isChildHidden = props.isActive ? true : undefined;\n\n  const resultProps = {\n    ...inputProps,\n\n    value,\n    onChange,\n    onKeyDown,\n    onBlur,\n\n    size: 0,\n    'data-hidden': props.isActive ? undefined : true,\n  };\n\n  const contentProps = {\n    isMultiline: cellProps.isMultiline,\n    whiteSpace: cellProps.whiteSpace,\n    wordBreak: cellProps.wordBreak,\n  };\n\n  useEffect(() => {\n    setValue(inputProps.value);\n  }, [inputProps.value]);\n\n  return (\n    <TableCell {...cellProps}>\n      <TableCellContent {...contentProps}>\n        <ChildContent data-hidden={isChildHidden}>{props.children}</ChildContent>\n        <Input ref={inputRef} {...resultProps} />\n      </TableCellContent>\n    </TableCell>\n  );\n});\n\nexport type DataGridTextInputCellProps<T = DefaultAny, V = DefaultAny> = {\n  getValue: (cell: ReactTableCell<T, V>) => string;\n  onChange: (cell: ReactTableCell<T, V>, newValue: string, e: FocusEvent<HTMLInputElement>) => void;\n} & Omit<TextInputProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\nexport const DataGridTextInputCell: FRC<HTMLTableCellElement, DataGridTextInputCellProps> = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, children, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as TextInputProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = (newValue, e) => onChange(cell, newValue, e);\n\n  return (\n    <TextInputCell ref={ref} {...cellProps} inputProps={inputProps}>\n      {children}\n    </TextInputCell>\n  );\n});\n\nexport type GetDataGridTextInputCellArgs<T = DefaultAny, V = DefaultAny> = Omit<\n  DataGridTextInputCellProps<T, V>,\n  'cell' | 'children'\n>;\n\nexport const getDataGridTextInputCell = <T, V>(args: GetDataGridTextInputCellArgs<T, V>): ColumnDefTemplate<T, V> => {\n  return ({cell}) => {\n    const content = (cell.getValue() ?? null) as ReactNode;\n\n    return (\n      <DataGridTextInputCell key={cell.id} cell={cell} {...args}>\n        {content}\n      </DataGridTextInputCell>\n    );\n  };\n};\n"],"names":["inputProps","cellProps","ref","inputRef","e","props","blur","value","onChange","onKeyDown","onBlur","isMultiline","whiteSpace","wordBreak","useEffect","setValue","cell","getValue","children","rest","content"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAwBb;AAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoC8C;AAACA;AAAoB;AACtE;AAAA;AAACC;AAAWC;AAAKC;AAKZC;AAAc;;AAIvB;AAEIA;AAEmB;;AAKvBC;AAIaC;AAKK;AACfN;AAEHO;AACAC;AACAC;AACAC;AAEM;AACsC;AAGzB;AACIC;AACDC;AACDC;AAGvBC;AACEC;AAAyB;AAMrB;AAA0D;AACpB;AAI9C;AAUQ;AAAA;AAACC;AAAMC;AAAUT;AAAUU;AAAaC;AAKnCZ;AAQb;AAQU;AAACS;AACDI;AAEN;AAKF;;;;;;"}
+{"version":3,"file":"text.es.js","sources":["../../src/TableInputCell/text.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\n\nimport {useEffect, useState} from 'react';\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell, useTableCellTextInput} from './hook';\n\nimport type {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\n\nconst ChildContent = styled.div`\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\nconst Input = styled.input`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  min-width: 10px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\nexport type TextInputProps = {\n  value: string;\n  onChange: (newValue: string, e: FocusEvent<HTMLInputElement>) => void;\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\ntype TTextInputCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: TextInputProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const TextInputCell: TTextInputCell = forwardRef(({inputProps, ...props}, baseRef) => {\n  const {cellProps, ref, inputRef} = useTableCellTextInput<HTMLInputElement>(props, baseRef);\n\n  const [value, setValue] = useState(inputProps.value ?? '');\n\n  const onChange: ChangeEventHandler<HTMLInputElement> = e => {\n    setValue(e.target.value);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (e.code === 'Escape' || isEnterCode) {\n      props.setIsActive?.(false);\n      e.currentTarget.blur();\n    }\n  };\n\n  const onBlur: FocusEventHandler<HTMLInputElement> = e => {\n    props.setIsActive?.(false);\n\n    inputProps.onChange(value, e);\n    inputProps.onBlur?.(e);\n    ref.current?.blur();\n  };\n\n  const isChildHidden = props.isActive ? true : undefined;\n\n  const resultProps = {\n    ...inputProps,\n\n    value,\n    onChange,\n    onKeyDown,\n    onBlur,\n\n    size: 0,\n    'data-hidden': props.isActive ? undefined : true,\n  };\n\n  const contentProps = {\n    isMultiline: cellProps.isMultiline,\n    whiteSpace: cellProps.whiteSpace,\n    wordBreak: cellProps.wordBreak,\n  };\n\n  useEffect(() => {\n    setValue(inputProps.value);\n  }, [inputProps.value]);\n\n  return (\n    <TableCell {...cellProps}>\n      <TableCellContent {...contentProps}>\n        <ChildContent data-hidden={isChildHidden}>{props.children}</ChildContent>\n        <Input ref={inputRef} {...resultProps} />\n      </TableCellContent>\n    </TableCell>\n  );\n});\n\nexport type DataGridTextInputCellProps<T = DefaultAny, V = DefaultAny> = {\n  getValue: (cell: ReactTableCell<T, V>) => string;\n  onChange: (cell: ReactTableCell<T, V>, newValue: string, e: FocusEvent<HTMLInputElement>) => void;\n} & Omit<TextInputProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\nexport const DataGridTextInputCell: FRC<HTMLTableCellElement, DataGridTextInputCellProps> = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, children, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const inputProps = rest as TextInputProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = (newValue, e) => onChange(cell, newValue, e);\n\n  return (\n    <TextInputCell ref={ref} {...cellProps} inputProps={inputProps}>\n      {children}\n    </TextInputCell>\n  );\n});\n\nexport type GetDataGridTextInputCellArgs<T = DefaultAny, V = DefaultAny> = Omit<\n  DataGridTextInputCellProps<T, V>,\n  'cell' | 'children'\n>;\n\nexport const getDataGridTextInputCell = <T, V>(args: GetDataGridTextInputCellArgs<T, V>): ColumnDefTemplate<T, V> => {\n  return ({cell}) => {\n    const content = (cell.getValue() ?? null) as ReactNode;\n\n    return (\n      <DataGridTextInputCell key={cell.id} cell={cell} {...args}>\n        {content}\n      </DataGridTextInputCell>\n    );\n  };\n};\n"],"names":["inputProps","cellProps","ref","inputRef","setValue","blur","props","value","onChange","onKeyDown","onBlur","isMultiline","whiteSpace","wordBreak","useEffect","cell","getValue","children","rest"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAwBb;AAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoC8C;AAACA;AAAoB;AAC5E;AAAM;AAACC;AAAWC;AAAKC;AAKrBC;AAAuB;;AAIvB;AAEA;AAEkBC;;AAKlBC;AAIaD;AAKK;AACfL;AAEHO;AACAC;AACAC;AACAC;AAEM;AACsC;AAGzB;AACIC;AACDC;AACDC;AAGvBC;AACEV;AAAyB;AAMrB;AAA0D;AACpB;AAI9C;AAUE;AAAM;AAACW;AAAMC;AAAUR;AAAUS;AAAaC;AAK9ClB;AAQF;AAQU;AAACe;AACP;AAEA;AAKF;;;;;;"}

package/dist/TableInputCell/textarea.es.js

@@ -32,10 +32,10 @@ const y = /* @__PURE__ */ m("div", process.env.NODE_ENV === "production" ? {
   const {
     cellProps: Z,
     ref: X,
-    inputRef: n
+    inputRef: R
   } = U(b, G), [I, W] = F(c.value ?? ""), g = (l) => {
     W(l.target.value);
-  }, R = (l) => {
+  }, n = (l) => {
     var d;
     const u = l.code === "Enter" || l.code === "NumpadEnter";
     (l.code === "Escape" || u && l.ctrlKey) && ((d = b.setIsActive) == null || d.call(b, !1), l.currentTarget.blur());
@@ -46,29 +46,29 @@ const y = /* @__PURE__ */ m("div", process.env.NODE_ENV === "production" ? {
     ...c,
     value: I,
     onChange: g,
-    onKeyDown: R,
+    onKeyDown: n,
     onBlur: C,
     size: 0,
     "data-hidden": b.isActive ? void 0 : !0
-  }, e = b.isActive ? I : b.children, x = {
+  }, x = b.isActive ? I : b.children, e = {
     isMultiline: Z.isMultiline,
     whiteSpace: Z.whiteSpace,
     wordBreak: Z.wordBreak
   };
   return h(() => {
     W(c.value);
-  }, [c.value]), /* @__PURE__ */ V(A, { ...Z, children: /* @__PURE__ */ s(Y, { ...x, children: [
-    /* @__PURE__ */ V(y, { "data-hidden": H, children: e }),
-    /* @__PURE__ */ V(o, { ref: n, ...t })
+  }, [c.value]), /* @__PURE__ */ V(A, { ...Z, children: /* @__PURE__ */ s(Y, { ...e, children: [
+    /* @__PURE__ */ V(y, { "data-hidden": H, children: x }),
+    /* @__PURE__ */ V(o, { ref: R, ...t })
   ] }) });
 }), D = i((c, b) => {
   const {
     cell: G,
     getValue: Z,
     onChange: X,
-    ...n
-  } = c, I = a(G), W = G.getValue() ?? null, g = n;
-  return g.value = Z(G), g.onChange = (R, C) => X(G, R, C), /* @__PURE__ */ V(v, { ref: b, ...I, inputProps: g, children: W });
+    ...R
+  } = c, I = a(G), W = G.getValue() ?? null, g = R;
+  return g.value = Z(G), g.onChange = (n, C) => X(G, n, C), /* @__PURE__ */ V(v, { ref: b, ...I, inputProps: g, children: W });
 }), p = (c) => ({
   cell: b
 }) => {

package/dist/TableInputCell/textarea.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.es.js","sources":["../../src/TableInputCell/textarea.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\n\nimport {useEffect, useState} from 'react';\nimport baseTheme, {forwardRef} from '@join-x5/react-theme';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell, useTableCellTextInput} from './hook';\n\nimport type {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\n\nconst ChildContent = styled.div`\n  min-height: 100%;\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\nconst TextArea = styled.textarea`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 10px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  resize: none;\n\n  ${baseTheme.scroll}\n\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\nexport type TextAreaInputProps = {\n  value: string;\n  onChange: (newValue: string, e: FocusEvent<HTMLTextAreaElement>) => void;\n} & Omit<InputHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'>;\n\ntype TTextAreaInputCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: TextAreaInputProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const TextAreaInputCell: TTextAreaInputCell = forwardRef(({inputProps, ...props}, baseRef) => {\n  const {cellProps, ref, inputRef} = useTableCellTextInput<HTMLTextAreaElement>(props, baseRef);\n\n  const [value, setValue] = useState(inputProps.value ?? '');\n\n  const onChange: ChangeEventHandler<HTMLTextAreaElement> = e => {\n    setValue(e.target.value);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = e => {\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (e.code === 'Escape' || (isEnterCode && e.ctrlKey)) {\n      props.setIsActive?.(false);\n      e.currentTarget.blur();\n    }\n  };\n\n  const onBlur: FocusEventHandler<HTMLTextAreaElement> = e => {\n    props.setIsActive?.(false);\n\n    inputProps.onChange(value, e);\n    inputProps.onBlur?.(e);\n    ref.current?.blur();\n  };\n\n  const isChildHidden = props.isActive ? true : undefined;\n\n  const resultProps = {\n    ...inputProps,\n\n    value,\n    onChange,\n    onKeyDown,\n    onBlur,\n\n    size: 0,\n    'data-hidden': props.isActive ? undefined : true,\n  };\n\n  const content = props.isActive ? value : props.children;\n\n  const contentProps = {\n    isMultiline: cellProps.isMultiline,\n    whiteSpace: cellProps.whiteSpace,\n    wordBreak: cellProps.wordBreak,\n  };\n\n  useEffect(() => {\n    setValue(inputProps.value);\n  }, [inputProps.value]);\n\n  return (\n    <TableCell {...cellProps}>\n      <TableCellContent {...contentProps}>\n        <ChildContent data-hidden={isChildHidden}>{content}</ChildContent>\n        <TextArea ref={inputRef} {...resultProps} />\n      </TableCellContent>\n    </TableCell>\n  );\n});\n\nexport type DataGridTextAreaInputCellProps<T = DefaultAny, V = DefaultAny> = {\n  getValue: (cell: ReactTableCell<T, V>) => string;\n  onChange: (cell: ReactTableCell<T, V>, newValue: string, e: FocusEvent<HTMLTextAreaElement>) => void;\n} & Omit<TextAreaInputProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\ntype TDataGridTextAreaInputCell = FRC<HTMLTableCellElement, DataGridTextAreaInputCellProps>;\n\nexport const DataGridTextAreaInputCell: TDataGridTextAreaInputCell = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const content = (cell.getValue() ?? null) as ReactNode;\n\n  const inputProps = rest as TextAreaInputProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = (newValue, e) => onChange(cell, newValue, e);\n\n  return (\n    <TextAreaInputCell ref={ref} {...cellProps} inputProps={inputProps}>\n      {content}\n    </TextAreaInputCell>\n  );\n});\n\nexport type GetDataGridTextAreaInputCellArgs<T = DefaultAny, V = DefaultAny> = Omit<\n  DataGridTextAreaInputCellProps<T, V>,\n  'cell' | 'children'\n>;\n\nexport const getDataGridTextAreaInputCell = <T, V>(\n  args: GetDataGridTextAreaInputCellArgs<T, V>\n): ColumnDefTemplate<T, V> => {\n  return ({cell}) => {\n    const content = (cell.getValue() ?? null) as ReactNode;\n\n    return (\n      <DataGridTextAreaInputCell key={cell.id} cell={cell} {...args}>\n        {content}\n      </DataGridTextAreaInputCell>\n    );\n  };\n};\n"],"names":["inputProps","cellProps","ref","inputRef","e","props","blur","value","onChange","onKeyDown","onBlur","isMultiline","whiteSpace","wordBreak","useEffect","setValue","cell","getValue","rest","content"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAwBb;AAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ;AAAA;AAAA;AAAA;AAAA;AAwCmD;AAACA;AAAoB;AAC9E;AAAA;AAACC;AAAWC;AAAKC;AAKZC;AAAc;;AAIvB;AAEA;AAEuB;;AAKvBC;AAIaC;AAKK;AACfN;AAEHO;AACAC;AACAC;AACAC;AAEM;AACsC;AAKzB;AACIC;AACDC;AACDC;AAGvBC;AACEC;AAAyB;AAMrB;AAAmD;AACV;AAIjD;AAYQ;AAAA;AAACC;AAAMC;AAAUT;AAAaU;AAOzBX;AAQb;AAUU;AAACS;AACDG;AAEN;AAKF;;;;;;"}
+{"version":3,"file":"textarea.es.js","sources":["../../src/TableInputCell/textarea.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\n\nimport {useEffect, useState} from 'react';\nimport baseTheme, {forwardRef} from '@join-x5/react-theme';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell, useTableCellTextInput} from './hook';\n\nimport type {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n} from 'react';\nimport type {Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {FRC, PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\nimport type {ColumnDefTemplate} from './types';\n\nconst ChildContent = styled.div`\n  min-height: 100%;\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\nconst TextArea = styled.textarea`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 10px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  resize: none;\n\n  ${baseTheme.scroll}\n\n  &[data-hidden] {\n    visibility: hidden;\n    pointer-events: none;\n  }\n`;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\nexport type TextAreaInputProps = {\n  value: string;\n  onChange: (newValue: string, e: FocusEvent<HTMLTextAreaElement>) => void;\n} & Omit<InputHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'>;\n\ntype TTextAreaInputCell = FRC<\n  HTMLTableCellElement,\n  {\n    inputProps: TextAreaInputProps;\n  } & Omit<TableCellProps, 'value' | 'onChange'>\n>;\n\nexport const TextAreaInputCell: TTextAreaInputCell = forwardRef(({inputProps, ...props}, baseRef) => {\n  const {cellProps, ref, inputRef} = useTableCellTextInput<HTMLTextAreaElement>(props, baseRef);\n\n  const [value, setValue] = useState(inputProps.value ?? '');\n\n  const onChange: ChangeEventHandler<HTMLTextAreaElement> = e => {\n    setValue(e.target.value);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = e => {\n    const isEnterCode = e.code === 'Enter' || e.code === 'NumpadEnter';\n\n    if (e.code === 'Escape' || (isEnterCode && e.ctrlKey)) {\n      props.setIsActive?.(false);\n      e.currentTarget.blur();\n    }\n  };\n\n  const onBlur: FocusEventHandler<HTMLTextAreaElement> = e => {\n    props.setIsActive?.(false);\n\n    inputProps.onChange(value, e);\n    inputProps.onBlur?.(e);\n    ref.current?.blur();\n  };\n\n  const isChildHidden = props.isActive ? true : undefined;\n\n  const resultProps = {\n    ...inputProps,\n\n    value,\n    onChange,\n    onKeyDown,\n    onBlur,\n\n    size: 0,\n    'data-hidden': props.isActive ? undefined : true,\n  };\n\n  const content = props.isActive ? value : props.children;\n\n  const contentProps = {\n    isMultiline: cellProps.isMultiline,\n    whiteSpace: cellProps.whiteSpace,\n    wordBreak: cellProps.wordBreak,\n  };\n\n  useEffect(() => {\n    setValue(inputProps.value);\n  }, [inputProps.value]);\n\n  return (\n    <TableCell {...cellProps}>\n      <TableCellContent {...contentProps}>\n        <ChildContent data-hidden={isChildHidden}>{content}</ChildContent>\n        <TextArea ref={inputRef} {...resultProps} />\n      </TableCellContent>\n    </TableCell>\n  );\n});\n\nexport type DataGridTextAreaInputCellProps<T = DefaultAny, V = DefaultAny> = {\n  getValue: (cell: ReactTableCell<T, V>) => string;\n  onChange: (cell: ReactTableCell<T, V>, newValue: string, e: FocusEvent<HTMLTextAreaElement>) => void;\n} & Omit<TextAreaInputProps, 'value' | 'onChange'> &\n  DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\ntype TDataGridTextAreaInputCell = FRC<HTMLTableCellElement, DataGridTextAreaInputCellProps>;\n\nexport const DataGridTextAreaInputCell: TDataGridTextAreaInputCell = forwardRef((props, ref) => {\n  const {cell, getValue, onChange, ...rest} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  const content = (cell.getValue() ?? null) as ReactNode;\n\n  const inputProps = rest as TextAreaInputProps;\n  inputProps.value = getValue(cell);\n  inputProps.onChange = (newValue, e) => onChange(cell, newValue, e);\n\n  return (\n    <TextAreaInputCell ref={ref} {...cellProps} inputProps={inputProps}>\n      {content}\n    </TextAreaInputCell>\n  );\n});\n\nexport type GetDataGridTextAreaInputCellArgs<T = DefaultAny, V = DefaultAny> = Omit<\n  DataGridTextAreaInputCellProps<T, V>,\n  'cell' | 'children'\n>;\n\nexport const getDataGridTextAreaInputCell = <T, V>(\n  args: GetDataGridTextAreaInputCellArgs<T, V>\n): ColumnDefTemplate<T, V> => {\n  return ({cell}) => {\n    const content = (cell.getValue() ?? null) as ReactNode;\n\n    return (\n      <DataGridTextAreaInputCell key={cell.id} cell={cell} {...args}>\n        {content}\n      </DataGridTextAreaInputCell>\n    );\n  };\n};\n"],"names":["inputProps","cellProps","ref","inputRef","setValue","blur","props","value","onChange","onKeyDown","onBlur","isMultiline","whiteSpace","wordBreak","useEffect","cell","getValue","rest"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAwBb;AAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ;AAAA;AAAA;AAAA;AAAA;AAwCmD;AAACA;AAAoB;AACpF;AAAM;AAACC;AAAWC;AAAKC;AAKrBC;AAAuB;;AAIvB;AAEA;AAEkBC;;AAKlBC;AAIaD;AAKK;AACfL;AAEHO;AACAC;AACAC;AACAC;AAEM;AACsC;AAKzB;AACIC;AACDC;AACDC;AAGvBC;AACEV;AAAyB;AAMrB;AAAmD;AACV;AAIjD;AAYE;AAAM;AAACW;AAAMC;AAAUR;AAAaS;AAOpCjB;AAQF;AAUU;AAACe;AACP;AAEA;AAKF;;;;;;"}