@join-x5/react-data-grid 1.5.2 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DataGrid.es.js +50 -48
- package/dist/DataGrid.es.js.map +1 -1
- package/dist/DataGridContext.d.ts +1 -1
- package/dist/DataGridContext.es.js.map +1 -1
- package/dist/TableCell/hook.es.js +5 -4
- package/dist/TableCell/hook.es.js.map +1 -1
- package/dist/TableCell/index.es.js +98 -96
- package/dist/TableCell/index.es.js.map +1 -1
- package/dist/TableCell/types.d.ts +5 -0
- package/dist/TableHeadCell/index.es.js +86 -86
- package/dist/TableHeadCell/index.es.js.map +1 -1
- package/dist/TableInputCell/hook.d.ts +2 -0
- package/dist/TableRow/index.es.js +5 -5
- package/dist/TableRow/index.es.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +8 -8
|
@@ -1 +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 {tableHeaderSpan} from './utils';\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-placeholder] {\n pointer-events: none;\n\n &:has(+ [data-placeholder])::after {\n display: none;\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 isPlaceholder,\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-placeholder': isPlaceholder ? 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> = cell => {\n const context = useContext(DataGridContext);\n\n let header: DataGridTableHeadCellProps['header'] | null = cell.header;\n let rowSpan: number | null = header.rowSpan;\n\n if (context.isCombined) {\n [header, rowSpan] = tableHeaderSpan(cell.header);\n if (!header || !rowSpan) {\n return null;\n }\n }\n\n const resizer = (() => {\n if (header.isPlaceholder || 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 onClick={e => e.stopPropagation()}\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 isPlaceholder: header.isPlaceholder,\n size: context.size,\n verticalAlign: context.verticalAlign,\n\n colSpan: header.colSpan || undefined,\n rowSpan: rowSpan || undefined,\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 typeof context.headCellProps === 'function' ? context.headCellProps(header) : context.headCellProps\n );\n }\n\n if (header.column.columnDef.meta?.headCellProps) {\n Object.assign(resultProps, header.column.columnDef.meta?.headCellProps);\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","isPlaceholder","writingMode","startAdornment","endAdornment","resizer","Dropdown","Default","Medium","rest","onClick","onKeyDown","verticalAlign","textAlign","userSelect","style","undefined","dropdown","qa","size","areaProps"],"mappings":";;;;;;;;;;;AAAa;AAAA;AAAA;AAqBN;AAA0B;AAAA;AAAA;AAAA;AAAA;AA6BvB;AAAA;AAAA;AAAA;AAAA;AAII;AACwB;AACEA;AAGtC;AA0Ec;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;AACAC;AAEAC;AACgB;AACJ;AACC;AAEbC;AACAC;AACAC;AACUC;AAEqBC;AACTC;AACED;AAErBE;AAOH;AAQmB;AAInB;AAIiB;AAMD;AACbA;AAEHC;AACAC;AAEO;AACLC;AACAC;AACAX;AACAY;AAESC;AAAAA;AAGE;AACwBC;AACcA;AACdA;AACAA;AACMA;AACLA;AACUA;AACRA;AAER;AACG;AACG;AAGxC;AAEI;AACGb;AAAAA;AACkB;AAClBC;AACH;AACCC;AACAY;AAGP;AAOE;AAEA;AAGA;AAGI;AAIJ;AAmBwC;AACtCZ;AAEYa;AACQpB;AACAE;AACEC;AACRkB;AACSP;AAEII;AACPA;AAEb;AACiC;AAAA;AAI1CI;AAkBF;;;;;;;;"}
|
|
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 {tableHeaderSpan} from './utils';\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-placeholder] {\n pointer-events: none;\n\n &:has(+ [data-placeholder])::after {\n display: none;\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 align-self: center;\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 isPlaceholder,\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-placeholder': isPlaceholder ? 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> = cell => {\n const context = useContext(DataGridContext);\n\n let header: DataGridTableHeadCellProps['header'] | null = cell.header;\n let rowSpan: number | null = header.rowSpan;\n\n if (context.isCombined) {\n [header, rowSpan] = tableHeaderSpan(cell.header);\n if (!header || !rowSpan) {\n return null;\n }\n }\n\n const resizer = (() => {\n if (header.isPlaceholder || 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 onClick={e => e.stopPropagation()}\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 isPlaceholder: header.isPlaceholder,\n size: context.size,\n verticalAlign: context.verticalAlign,\n\n colSpan: header.colSpan || undefined,\n rowSpan: rowSpan || undefined,\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 typeof context.headCellProps === 'function' ? context.headCellProps(header) : context.headCellProps\n );\n }\n\n if (header.column.columnDef.meta?.headCellProps) {\n Object.assign(resultProps, header.column.columnDef.meta?.headCellProps);\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","isPlaceholder","writingMode","startAdornment","endAdornment","resizer","Dropdown","Default","Medium","rest","onClick","onKeyDown","verticalAlign","textAlign","userSelect","style","undefined","dropdown","qa","size","areaProps"],"mappings":";;;;;;;;;;;AAAa;AAAA;AAAA;AAqBN;AAA0B;AAAA;AAAA;AAAA;AAAA;AA6BvB;AAAA;AAAA;AAAA;AAAA;AAII;AACwB;AACEA;AAGtC;AA0Ec;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;AAMX;AAAM;AACJC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACgB;AACJ;AACC;AAEbC;AACAC;AACAC;AACUC;AAEqBC;AACTC;AACED;AAErBE;AAOH;AAQmB;AAInB;AAIiB;AAMD;AACbA;AAEHC;AACAC;AAEO;AACLC;AACAC;AACAX;AACAY;AAESC;AAAAA;AAGE;AACwBC;AACcA;AACdA;AACAA;AACMA;AACLA;AACUA;AACRA;AAER;AACG;AACG;AAGxC;AAEI;AACGb;AAAAA;AACkB;AAClBC;AACH;AACCC;AACAY;AAGP;AAOE;AAEA;AAGA;AAGI;AAIJ;AAmBwC;AACtCZ;AAEYa;AACQpB;AACAE;AACEC;AACRkB;AACSP;AAEII;AACPA;AAEb;AACiC;AAAA;AAI1CI;AAkBF;;;;;;;;"}
|
|
@@ -11,6 +11,7 @@ export declare const useTableCellTextInput: <T extends HTMLInputElement | HTMLTe
|
|
|
11
11
|
size?: import('@join-x5/react-theme').SizeTokenValue;
|
|
12
12
|
isDisabled?: boolean;
|
|
13
13
|
isFocused?: boolean;
|
|
14
|
+
isNoFocus?: boolean;
|
|
14
15
|
isRowHover?: boolean;
|
|
15
16
|
isRowSelected?: boolean;
|
|
16
17
|
isResizing?: boolean;
|
|
@@ -314,6 +315,7 @@ export declare const useDataGridInputCell: (cell: ReactTableCell<unknown, unknow
|
|
|
314
315
|
size?: import('@join-x5/react-theme').SizeTokenValue;
|
|
315
316
|
isDisabled?: boolean;
|
|
316
317
|
isFocused?: boolean;
|
|
318
|
+
isNoFocus?: boolean;
|
|
317
319
|
isRowHover?: boolean;
|
|
318
320
|
isRowSelected?: boolean;
|
|
319
321
|
isResizing?: boolean;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as l } from "@emotion/react/jsx-runtime";
|
|
3
|
-
import
|
|
4
|
-
import { forwardRef as
|
|
3
|
+
import m from "@emotion/styled/base";
|
|
4
|
+
import { forwardRef as I } from "@join-x5/react-theme";
|
|
5
5
|
import { getDataGridTableCell as Z } from "../TableCell/index.es.js";
|
|
6
|
-
const g = /* @__PURE__ */
|
|
6
|
+
const g = /* @__PURE__ */ m("tr", process.env.NODE_ENV === "production" ? {
|
|
7
7
|
target: "ewtrhmz0"
|
|
8
8
|
} : {
|
|
9
9
|
target: "ewtrhmz0",
|
|
10
10
|
label: "TableRow"
|
|
11
|
-
})(":hover [data-cell]{:not([data-focused], [data-active], [data-disabled]) [data-edit-icon]{visibility:visible;}:not([data-focused], [data-active]):not(:focus){", (b) => ({
|
|
11
|
+
})(":hover [data-cell]{:not([data-focused], [data-active], [data-disabled]) [data-edit-icon]{visibility:visible;}:not([data-focused], [data-active]):not(:focus:not([data-no-focus])){", (b) => ({
|
|
12
12
|
"--background-color": b.theme.colors.grey[10],
|
|
13
13
|
"--border-color": b.theme.colors.grey[20]
|
|
14
|
-
}), ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
14
|
+
}), ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC9zcmMvVGFibGVSb3cvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWMwQiIsImZpbGUiOiIvaG9tZS9zYWR5a292c2Qvam9pbi14NS9wYWNrYWdlcy9kYXRhLWdyaWQvc3JjL1RhYmxlUm93L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50JztcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtmb3J3YXJkUmVmfSBmcm9tICdAam9pbi14NS9yZWFjdC10aGVtZSc7XG5cbmltcG9ydCB7Z2V0RGF0YUdyaWRUYWJsZUNlbGx9IGZyb20gJ1RhYmxlQ2VsbCc7XG5cbmltcG9ydCB0eXBlIHtIVE1MQXR0cmlidXRlc30gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUge1Jvd30gZnJvbSAnQHRhbnN0YWNrL3JlYWN0LXRhYmxlJztcbmltcG9ydCB0eXBlIHtGUkN9IGZyb20gJ0Bqb2luLXg1L3JlYWN0LXRoZW1lJztcbmltcG9ydCB0eXBlIHtHZXREYXRhR3JpZFRhYmxlUm93fSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCB0eXBlIFRhYmxlUm93UHJvcHMgPSBIVE1MQXR0cmlidXRlczxIVE1MVGFibGVSb3dFbGVtZW50PjtcblxuY29uc3QgVGFibGVSb3cgPSBzdHlsZWQudHJgXG4gIDpob3ZlciBbZGF0YS1jZWxsXSB7XG4gICAgOm5vdChbZGF0YS1mb2N1c2VkXSwgW2RhdGEtYWN0aXZlXSwgW2RhdGEtZGlzYWJsZWRdKSBbZGF0YS1lZGl0LWljb25dIHtcbiAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gICAgfVxuXG4gICAgOm5vdChbZGF0YS1mb2N1c2VkXSwgW2RhdGEtYWN0aXZlXSk6bm90KDpmb2N1czpub3QoW2RhdGEtbm8tZm9jdXNdKSkge1xuICAgICAgJHtwcm9wcyA9PiAoe1xuICAgICAgICAnLS1iYWNrZ3JvdW5kLWNvbG9yJzogcHJvcHMudGhlbWUuY29sb3JzLmdyZXlbMTBdLFxuICAgICAgICAnLS1ib3JkZXItY29sb3InOiBwcm9wcy50aGVtZS5jb2xvcnMuZ3JleVsyMF0sXG4gICAgICB9KX1cbiAgICB9XG4gIH1cbmA7XG5cbnR5cGUgRGF0YUdyaWRUYWJsZVJvd1Byb3BzID0ge3JvdzogUm93PHVua25vd24+fSAmIFRhYmxlUm93UHJvcHM7XG5cbmNvbnN0IERhdGFHcmlkVGFibGVSb3c6IEZSQzxIVE1MVGFibGVSb3dFbGVtZW50LCBEYXRhR3JpZFRhYmxlUm93UHJvcHM+ID0gZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7cm93LCAuLi5yZXN0fSA9IHByb3BzO1xuXG4gIGNvbnN0IGNvbnRlbnQgPSByb3cuZ2V0VmlzaWJsZUNlbGxzKCkubWFwKGdldERhdGFHcmlkVGFibGVDZWxsKTtcblxuICByZXR1cm4gKFxuICAgIDxUYWJsZVJvdyByZWY9e3JlZn0gey4uLnJlc3R9PlxuICAgICAge2NvbnRlbnR9XG4gICAgPC9UYWJsZVJvdz5cbiAgKTtcbn0pO1xuXG5leHBvcnQgY29uc3QgZ2V0RGF0YUdyaWRUYWJsZVJvdzogR2V0RGF0YUdyaWRUYWJsZVJvdyA9IChyb3csIHByb3BzKSA9PiAoXG4gIDxEYXRhR3JpZFRhYmxlUm93IGtleT17cm93LmlkfSByb3c9e3Jvd30gey4uLnByb3BzfSAvPlxuKTtcbiJdfQ== */")), e = I((b, c) => {
|
|
15
15
|
const {
|
|
16
16
|
row: t,
|
|
17
17
|
...d
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {getDataGridTableCell} from 'TableCell';\n\nimport type {HTMLAttributes} from 'react';\nimport type {Row} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {GetDataGridTableRow} from '../types';\n\nexport type TableRowProps = HTMLAttributes<HTMLTableRowElement>;\n\nconst TableRow = styled.tr`\n :hover [data-cell] {\n :not([data-focused], [data-active], [data-disabled]) [data-edit-icon] {\n visibility: visible;\n }\n\n :not([data-focused], [data-active]):not(:focus) {\n ${props => ({\n '--background-color': props.theme.colors.grey[10],\n '--border-color': props.theme.colors.grey[20],\n })}\n }\n }\n`;\n\ntype DataGridTableRowProps = {row: Row<unknown>} & TableRowProps;\n\nconst DataGridTableRow: FRC<HTMLTableRowElement, DataGridTableRowProps> = forwardRef((props, ref) => {\n const {row, ...rest} = props;\n\n const content = row.getVisibleCells().map(getDataGridTableCell);\n\n return (\n <TableRow ref={ref} {...rest}>\n {content}\n </TableRow>\n );\n});\n\nexport const getDataGridTableRow: GetDataGridTableRow = (row, props) => (\n <DataGridTableRow key={row.id} row={row} {...props} />\n);\n"],"names":["row","rest"],"mappings":";;;;;AAcA;AAAc;AAAA;AAAA;AAAA;AAAA;AAOI;AACsC;AAElD;AAQJ;AAAM;AAACA;AAAQC;AAIf;AAKF;;;;"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {getDataGridTableCell} from 'TableCell';\n\nimport type {HTMLAttributes} from 'react';\nimport type {Row} from '@tanstack/react-table';\nimport type {FRC} from '@join-x5/react-theme';\nimport type {GetDataGridTableRow} from '../types';\n\nexport type TableRowProps = HTMLAttributes<HTMLTableRowElement>;\n\nconst TableRow = styled.tr`\n :hover [data-cell] {\n :not([data-focused], [data-active], [data-disabled]) [data-edit-icon] {\n visibility: visible;\n }\n\n :not([data-focused], [data-active]):not(:focus:not([data-no-focus])) {\n ${props => ({\n '--background-color': props.theme.colors.grey[10],\n '--border-color': props.theme.colors.grey[20],\n })}\n }\n }\n`;\n\ntype DataGridTableRowProps = {row: Row<unknown>} & TableRowProps;\n\nconst DataGridTableRow: FRC<HTMLTableRowElement, DataGridTableRowProps> = forwardRef((props, ref) => {\n const {row, ...rest} = props;\n\n const content = row.getVisibleCells().map(getDataGridTableCell);\n\n return (\n <TableRow ref={ref} {...rest}>\n {content}\n </TableRow>\n );\n});\n\nexport const getDataGridTableRow: GetDataGridTableRow = (row, props) => (\n <DataGridTableRow key={row.id} row={row} {...props} />\n);\n"],"names":["row","rest"],"mappings":";;;;;AAcA;AAAc;AAAA;AAAA;AAAA;AAAA;AAOI;AACsC;AAElD;AAQJ;AAAM;AAACA;AAAQC;AAIf;AAKF;;;;"}
|