npm - @veeqo/ui - Versions diffs - 13.15.1 → 13.15.3-beta-1 - Mend

@veeqo/ui 13.15.1 → 13.15.3-beta-1

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.

Files changed (95) hide show

package/dist/components/DataTable/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles /\n\nimport React, { useRef } from 'react';\nimport { Stack } from '../Stack';\nimport { Text } from '../Text';\n\nimport { useDragToScroll, useScrollPosition } from '../../hooks';\n\nimport { generateTableCss } from './utils';\nimport { DataTableProps, CustomState, TableRow } from './types';\n\nimport { useCellWidths, useColumns, useSelection } from './hooks';\n\nimport {\n renderCell,\n renderFooter,\n renderHeader,\n renderLoadingCell,\n renderNestedCell,\n} from './renderers';\n\nimport { ActionBar } from './components/ActionBar';\nimport { Cell } from './components/Cell';\nimport { ColumnMenu } from './components/ColumnMenu';\nimport { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';\nimport { Header } from './components/Header';\nimport { NoWrap } from './components/NoWrap';\nimport { Row } from './components/Row';\nimport { ScrollContainer } from './components/ScrollContainer';\nimport { TableGrid } from './components/TableGrid';\nimport { Truncate } from './components/Truncate';\nimport { Wrapper } from './components/Wrapper';\nimport { SelectionCell } from './components/SelectionCell';\nimport { SelectionHeader } from './components/SelectionHeader';\nimport { StickyHead } from './components/StickyHead';\n\nimport { getRowState } from './utils/getRowState';\nimport { InfoIcon } from '../../icons';\n\nconst defaultEmptyState: CustomState = {\n iconSlot: <InfoIcon width={48} height={48} />,\n heading: 'No results',\n};\n\nconst emptyAction = () => {};\n\nexport const DataTable = ({\n actionBarSlot,\n borderMode,\n columns: initialColumns,\n emptyState = defaultEmptyState,\n expandedRowIds,\n loading,\n loadingRowCount,\n onChangeSort,\n rows,\n disabledRowIds,\n selectionMode,\n selectionState,\n setExpanded,\n sortState,\n stripingMode,\n enableStickyHeader,\n resizeableColumns,\n onResizeColumns,\n columnWidths,\n stickyHeaderTop,\n}: DataTableProps) => {\n // Refs\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const intersectionTargetRef = useRef<HTMLDivElement>(null);\n\n useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });\n\n // Configure row selection\n\n const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));\n\n const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({\n selectionMode,\n selectionState,\n enabledRowIds,\n });\n\n // Assign actions\n\n const actions = {\n setSelected: setSelected \|\| emptyAction,\n setExpanded: setExpanded \|\| emptyAction,\n };\n\n // Process columns\n\n const columnsWithSelection = [selectionColumn, ...initialColumns];\n const allColumns = selectionEnabled ? columnsWithSelection : initialColumns;\n\n const cellWidths = useCellWidths(tableRef, scrollContainerRef);\n const {\n visible,\n pinnedLeft,\n pinnedRight,\n setColumnWidth,\n columnWidths: calcColumnWidths,\n } = useColumns(allColumns, tableRef, onResizeColumns, columnWidths);\n const adjustedCellWidths =\n cellWidths.length === visible.length\n ? (visible.map((col, i) =>\n Number.isNaN(calcColumnWidths[col.id] \|\| '') ? cellWidths[i] : calcColumnWidths[col.id],\n ) as number[])\n : cellWidths;\n\n // Generate styles\n const { scrollPosition, onScroll } = useScrollPosition({ containerRef: scrollContainerRef });\n const tableCss = generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths: adjustedCellWidths,\n scrollPosition,\n columnWidths: calcColumnWidths,\n columns: visible,\n stripingMode,\n });\n\n // Render states\n\n if (loading) {\n const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({\n // generate random ID forcing all rows to re-render avoid animation de-sync\n id: Math.random() 1000,\n data: null,\n }));\n\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n {loadingRows.map((row) => (\n <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>\n ))}\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n if (rows.length === 0) {\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n <EmptyBodyContent columnCount={visible.length}>\n <EmptyBodyGlyphWrapper>\n {/* Should be 48x48px */}\n {emptyState.iconSlot}\n </EmptyBodyGlyphWrapper>\n <Stack spacing=\"sm\" alignX=\"center\">\n <Text variant=\"headingMedium\">{emptyState.heading}</Text>\n {emptyState.subheading && (\n <Text variant=\"subheadingMedium\">{emptyState.subheading}</Text>\n )}\n </Stack>\n </EmptyBodyContent>\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n const renderRow = (row: TableRow) => {\n const { e2eClassName = '', accentColor } = row;\n const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });\n\n return (\n <Row role=\"row\" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>\n {visible.map((col) => renderCell(row, col, actions, rowState))}\n </Row>\n );\n };\n\n const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {\n const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;\n const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });\n return (\n <Row role=\"row\" key={nestedRow.id} className={nestedRowE2eClassName}>\n {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}\n </Row>\n );\n };\n\n const renderSection = (row: TableRow) => {\n const isExpanded = expandedRowIds?.includes(row.id);\n return (\n <tbody role=\"rowgroup\" key={row.id}>\n {renderRow(row)}\n {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}\n </tbody>\n );\n };\n\n const renderBody = () => {\n const hasNestedRows = !!expandedRowIds;\n const hasMultipleSections = hasNestedRows && stripingMode === 'nested';\n\n if (hasMultipleSections) {\n return rows.map(renderSection);\n }\n\n if (hasNestedRows) {\n return (\n <tbody role=\"rowgroup\">\n {rows.map((row) => {\n const rowElement = renderRow(row);\n const isExpanded = expandedRowIds?.includes(row.id);\n const nestedRowElements =\n (isExpanded &&\n row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) \|\|\n [];\n return [rowElement, ...nestedRowElements];\n })}\n </tbody>\n );\n }\n\n return <tbody role=\"rowgroup\">{rows.map(renderRow)}</tbody>;\n };\n\n const headersMarkup = (\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n );\n\n const shouldRenderFooter = initialColumns.some((column) => !!column.renderFooter);\n const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;\n\n return (\n <Wrapper borderMode={borderMode}>\n {shouldRenderActionBar && (\n <ActionBar\n selectionColumn={selectionColumn}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n >\n {actionBarSlot}\n </ActionBar>\n )}\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n {enableStickyHeader && (\n <StickyHead\n tableCss={tableCss}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n cellWidths={adjustedCellWidths}\n stickyHeaderTop={stickyHeaderTop}\n >\n {headersMarkup}\n </StickyHead>\n )}\n <div ref={intersectionTargetRef} style={{ height: 0 }} />\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">{headersMarkup}</thead>\n {renderBody()}\n {shouldRenderFooter && (\n <tfoot role=\"rowgroup\">\n <Row role=\"row\">{visible.map((column) => renderFooter({ column }))}</Row>\n </tfoot>\n )}\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n};\n\nDataTable.defaultProps = {\n loading: false,\n loadingRowCount: 5,\n selectionMode: 'multiple',\n stripingMode: 'row',\n enableStickyHeader: true,\n};\n\nDataTable.Cell = Cell;\nDataTable.ColumnMenu = ColumnMenu;\nDataTable.SelectionCell = SelectionCell;\nDataTable.SelectionHeader = SelectionHeader;\nDataTable.Header = Header;\nDataTable.Truncate = Truncate;\nDataTable.NoWrap = NoWrap;\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles /\n\nimport React, { useRef } from 'react';\nimport { Stack } from '../Stack';\nimport { Text } from '../Text';\n\nimport { useDragToScroll, useScrollPosition } from '../../hooks';\n\nimport { generateTableCss } from './utils';\nimport { DataTableProps, CustomState, TableRow } from './types';\n\nimport { useCellWidths, useColumns, useSelection } from './hooks';\n\nimport {\n renderCell,\n renderFooter,\n renderHeader,\n renderLoadingCell,\n renderNestedCell,\n} from './renderers';\n\nimport { ActionBar } from './components/ActionBar';\nimport { Cell } from './components/Cell';\nimport { ColumnMenu } from './components/ColumnMenu';\nimport { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';\nimport { Header } from './components/Header';\nimport { NoWrap } from './components/NoWrap';\nimport { Row } from './components/Row';\nimport { ScrollContainer } from './components/ScrollContainer';\nimport { TableGrid } from './components/TableGrid';\nimport { Truncate } from './components/Truncate';\nimport { Wrapper } from './components/Wrapper';\nimport { SelectionCell } from './components/SelectionCell';\nimport { SelectionHeader } from './components/SelectionHeader';\nimport { StickyHead } from './components/StickyHead';\n\nimport { getRowState } from './utils/getRowState';\nimport { InfoIcon } from '../../icons';\n\nconst defaultEmptyState: CustomState = {\n iconSlot: <InfoIcon width={48} height={48} />,\n heading: 'No results',\n};\n\nconst emptyAction = () => {};\n\nexport const DataTable = ({\n actionBarSlot,\n borderMode,\n columns: initialColumns,\n emptyState = defaultEmptyState,\n expandedRowIds,\n loading,\n loadingRowCount,\n onChangeSort,\n rows,\n disabledRowIds,\n selectionMode,\n selectionState,\n setExpanded,\n sortState,\n stripingMode,\n enableStickyHeader,\n resizeableColumns,\n onResizeColumns,\n columnWidths,\n stickyHeaderTop,\n}: DataTableProps) => {\n // Refs\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const intersectionTargetRef = useRef<HTMLDivElement>(null);\n\n useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });\n\n // Configure row selection\n\n const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));\n\n const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({\n selectionMode,\n selectionState,\n enabledRowIds,\n });\n\n // Assign actions\n\n const actions = {\n setSelected: setSelected \|\| emptyAction,\n setExpanded: setExpanded \|\| emptyAction,\n };\n\n // Process columns\n\n const columnsWithSelection = [selectionColumn, ...initialColumns];\n const allColumns = selectionEnabled ? columnsWithSelection : initialColumns;\n\n const cellWidths = useCellWidths(tableRef, scrollContainerRef);\n const {\n visible,\n pinnedLeft,\n pinnedRight,\n setColumnWidth,\n columnWidths: calcColumnWidths,\n } = useColumns(allColumns, tableRef, onResizeColumns, columnWidths);\n const adjustedCellWidths =\n cellWidths.length === visible.length\n ? (visible.map((col, i) =>\n Number.isNaN(calcColumnWidths[col.id] \|\| '') ? cellWidths[i] : calcColumnWidths[col.id],\n ) as number[])\n : cellWidths;\n\n // Generate styles\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({\n containerRef: scrollContainerRef,\n });\n const tableCss = generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths: adjustedCellWidths,\n scrollPosition,\n columnWidths: calcColumnWidths,\n columns: visible,\n stripingMode,\n enableTransition,\n });\n\n // Render states\n\n if (loading) {\n const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({\n // generate random ID forcing all rows to re-render avoid animation de-sync\n id: Math.random() 1000,\n data: null,\n }));\n\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n {loadingRows.map((row) => (\n <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>\n ))}\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n if (rows.length === 0) {\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n <EmptyBodyContent columnCount={visible.length}>\n <EmptyBodyGlyphWrapper>\n {/* Should be 48x48px */}\n {emptyState.iconSlot}\n </EmptyBodyGlyphWrapper>\n <Stack spacing=\"sm\" alignX=\"center\">\n <Text variant=\"headingMedium\">{emptyState.heading}</Text>\n {emptyState.subheading && (\n <Text variant=\"subheadingMedium\">{emptyState.subheading}</Text>\n )}\n </Stack>\n </EmptyBodyContent>\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n const renderRow = (row: TableRow) => {\n const { e2eClassName = '', accentColor } = row;\n const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });\n\n return (\n <Row role=\"row\" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>\n {visible.map((col) => renderCell(row, col, actions, rowState))}\n </Row>\n );\n };\n\n const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {\n const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;\n const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });\n return (\n <Row role=\"row\" key={nestedRow.id} className={nestedRowE2eClassName}>\n {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}\n </Row>\n );\n };\n\n const renderSection = (row: TableRow) => {\n const isExpanded = expandedRowIds?.includes(row.id);\n return (\n <tbody role=\"rowgroup\" key={row.id}>\n {renderRow(row)}\n {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}\n </tbody>\n );\n };\n\n const renderBody = () => {\n const hasNestedRows = !!expandedRowIds;\n const hasMultipleSections = hasNestedRows && stripingMode === 'nested';\n\n if (hasMultipleSections) {\n return rows.map(renderSection);\n }\n\n if (hasNestedRows) {\n return (\n <tbody role=\"rowgroup\">\n {rows.map((row) => {\n const rowElement = renderRow(row);\n const isExpanded = expandedRowIds?.includes(row.id);\n const nestedRowElements =\n (isExpanded &&\n row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) \|\|\n [];\n return [rowElement, ...nestedRowElements];\n })}\n </tbody>\n );\n }\n\n return <tbody role=\"rowgroup\">{rows.map(renderRow)}</tbody>;\n };\n\n const headersMarkup = (\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n );\n\n const shouldRenderFooter = initialColumns.some((column) => !!column.renderFooter);\n const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;\n\n return (\n <Wrapper borderMode={borderMode}>\n {shouldRenderActionBar && (\n <ActionBar\n selectionColumn={selectionColumn}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n >\n {actionBarSlot}\n </ActionBar>\n )}\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n {enableStickyHeader && (\n <StickyHead\n tableCss={tableCss}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n cellWidths={adjustedCellWidths}\n stickyHeaderTop={stickyHeaderTop}\n >\n {headersMarkup}\n </StickyHead>\n )}\n <div ref={intersectionTargetRef} style={{ height: 0 }} />\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">{headersMarkup}</thead>\n {renderBody()}\n {shouldRenderFooter && (\n <tfoot role=\"rowgroup\">\n <Row role=\"row\">{visible.map((column) => renderFooter({ column }))}</Row>\n </tfoot>\n )}\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n};\n\nDataTable.defaultProps = {\n loading: false,\n loadingRowCount: 5,\n selectionMode: 'multiple',\n stripingMode: 'row',\n enableStickyHeader: true,\n};\n\nDataTable.Cell = Cell;\nDataTable.ColumnMenu = ColumnMenu;\nDataTable.SelectionCell = SelectionCell;\nDataTable.SelectionHeader = SelectionHeader;\nDataTable.Header = Header;\nDataTable.Truncate = Truncate;\nDataTable.NoWrap = NoWrap;\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataTable/types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.cjs","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ~~ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type~~ RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":["SortDirection"],"mappings":";;~~AAkDA~~;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}
1	+ {"version":3,"file":"types.cjs","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":["SortDirection"],"mappings":";;AAgDA;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}

package/dist/components/DataTable/types.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { Size } from '../Stack/types';
 export type BorderType = 'all' | 'vertical' | 'none';
-export type ScrollPosition = 'none' | 'start' | 'middle' | 'end';
 export type RowState = {
     selected: boolean;
     expanded: boolean;

package/dist/components/DataTable/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ~~ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type~~ RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":[],"mappings":"~~AAkDA~~;IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"types.js","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":[],"mappings":"AAgDA;IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/DataTable/utils/generateTableCss.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ var index = require('../../../theme/index.cjs');
 var parseWidth = require('./parseWidth.cjs');
 var sumAll = require('./sumAll.cjs');
-function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, }) {
+function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
     const pinnedLeftStyles = pinnedLeft.map((_, index) => `
     th:nth-child(${index + 1}),
     td:nth-child(${index + 1}) {
@@ -20,7 +20,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       right: ${cellWidths ? sumAll.sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
     }
   `);
-    const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
     const leftShadow = `
     th:nth-child(${pinnedLeft.length})::after,
     td:nth-child(${pinnedLeft.length})::after {
@@ -36,7 +36,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
     }
   `;
-    const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
     const rightShadow = `
     th:nth-last-child(${pinnedRight.length})::after,
     td:nth-last-child(${pinnedRight.length})::after {
@@ -74,7 +74,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
     grid-template-columns: ${columns.map((column) => { var _a; return parseWidth.parseWidth((_a = columnWidths[column.id]) !== null && _a !== undefined ? _a : column.width); }).join(' ')};
     th::after, td::after {
-      transition: box-shadow .3s;
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
     }
     ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}

package/dist/components/DataTable/utils/generateTableCss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, ~~ScrollPosition,~~ StripingMode } from '../types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow .3s;\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":";;;;;;~~SAgBgB~~,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,~~GACc~~,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAGA,wBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAGC,uBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;~~IAED~~,MAAM,mBAAmB,~~GAAG~~,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;~~AACnF~~,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;~~IAED~~,MAAM,oBAAoB,~~GAAG~~,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;~~AAClF~~,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAAC,qBAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA~~;;;;;;MAM7G~~,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}
1	+ {"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n enableTransition = true,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible =\n !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible =\n !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":";;;;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAGA,wBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAGC,uBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAAC,qBAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

package/dist/components/DataTable/utils/generateTableCss.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { ColumnConfigs, ColumnWidthsType, ScrollPosition, StripingMode } from '../types';
+import { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';
+import { ScrollPosition } from '../../../hooks/useScrollPosition/types';
 export type GenerateTableCssArgs = {
     pinnedLeft: ColumnConfigs;
     pinnedRight: ColumnConfigs;
@@ -7,5 +8,6 @@ export type GenerateTableCssArgs = {
     stripingMode?: StripingMode;
     columnWidths: ColumnWidthsType;
     columns: ColumnConfigs;
+    enableTransition?: boolean;
 };
-export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, }: GenerateTableCssArgs): string;
+export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): string;

package/dist/components/DataTable/utils/generateTableCss.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { theme } from '../../../theme/index.js';
 import { parseWidth } from './parseWidth.js';
 import { sumAllBeforeIndex, sumAllAfterIndex } from './sumAll.js';
-function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, }) {
+function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
     const pinnedLeftStyles = pinnedLeft.map((_, index) => `
     th:nth-child(${index + 1}),
     td:nth-child(${index + 1}) {
@@ -18,7 +18,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
     }
   `);
-    const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
     const leftShadow = `
     th:nth-child(${pinnedLeft.length})::after,
     td:nth-child(${pinnedLeft.length})::after {
@@ -34,7 +34,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
     }
   `;
-    const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
     const rightShadow = `
     th:nth-last-child(${pinnedRight.length})::after,
     td:nth-last-child(${pinnedRight.length})::after {
@@ -72,7 +72,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
     grid-template-columns: ${columns.map((column) => { var _a; return parseWidth((_a = columnWidths[column.id]) !== null && _a !== undefined ? _a : column.width); }).join(' ')};
     th::after, td::after {
-      transition: box-shadow .3s;
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
     }
     ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}

package/dist/components/DataTable/utils/generateTableCss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, ~~ScrollPosition,~~ StripingMode } from '../types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow .3s;\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":[],"mappings":";;;;~~SAgBgB~~,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,~~GACc~~,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;~~IAED~~,MAAM,mBAAmB,~~GAAG~~,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;~~AACnF~~,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;~~IAED~~,MAAM,oBAAoB,~~GAAG~~,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;~~AAClF~~,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA~~;;;;;;MAM7G~~,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}
1	+ {"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n enableTransition = true,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible =\n !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible =\n !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

package/dist/components/Mark/Mark.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var React = require('react');
-var CriticalIcon = require('../../icons/custom/components/CriticalIcon.cjs');
+var CriticalFillIcon = require('../../icons/custom/components/CriticalFillIcon.cjs');
 var index = require('../../theme/index.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
@@ -21,7 +21,7 @@ const Mark = ({ typeCode, variant = 'white', size = 'lg', hasError, className, i
             variant === 'transparent' && Mark_module.transparentBackground,
             className,
         ]), ...otherProps },
-        hasError && (React__default.default.createElement(CriticalIcon.CriticalIcon, { className: Mark_module.indicatorIcon, color: index.theme.colors.secondary.red.base, fill: index.theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": `${typeCode} ${integrationType} has an error` })),
+        hasError && (React__default.default.createElement(CriticalFillIcon.CriticalFillIcon, { className: Mark_module.indicatorIcon, color: index.theme.colors.secondary.red.base, fill: index.theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": `${typeCode} ${integrationType} has an error` })),
         React__default.default.createElement("img", { src: integrationMarkUrl, alt: "", width: imageSize, height: imageSize })));
 };

package/dist/components/Mark/Mark.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Mark.cjs","sources":["../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~CriticalIcon~~ } from '../../icons~~/custom/components/CriticalIcon~~';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\n\nimport styles from './Mark.module.scss';\nimport { MarkProps } from './types';\nimport { getImageSize } from './utils';\n\nexport const Mark = ({\n typeCode,\n variant = 'white',\n size = 'lg',\n hasError,\n className,\n integrationMarkUrl,\n integrationType,\n ...otherProps\n}: MarkProps) => {\n const imageSize = getImageSize(size);\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([\n styles.mark,\n styles[`${size}-size`],\n variant === 'transparent' && styles.transparentBackground,\n className,\n ])}\n {...otherProps}\n >\n {hasError && (\n <~~CriticalIcon~~\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${typeCode} ${integrationType} has an error`}\n />\n )}\n <img src={integrationMarkUrl} alt=\"\" width={imageSize} height={imageSize} />\n </FlexRow>\n );\n};\n"],"names":["getImageSize","React","FlexRow","buildClassnames","styles","~~CriticalIcon~~","theme"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,GAAG,UAAU,EACH,KAAI;AACd,IAAA,MAAM,SAAS,GAAGA,kBAAY,CAAC,IAAI,CAAC;IAEpC,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,WAAM,CAAC,IAAI;AACX,YAAAA,WAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,OAAO,KAAK,aAAa,IAAIA,WAAM,CAAC,qBAAqB;YACzD,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,QAAQ,KACPH,sBAAC,CAAA,aAAA,CAAAI,~~yBAAY~~,~~IACX~~,SAAS,EAAED,WAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACN,YAAA,EAAA,CAAA,EAAG,QAAQ,CAAI,CAAA,EAAA,eAAe,CAAe,aAAA,CAAA,EAAA,CACzD,CACH;AACD,QAAAL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAI,CAAA,CACpE;AAEd;;;;"}
1	+ {"version":3,"file":"Mark.cjs","sources":["../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\n\nimport styles from './Mark.module.scss';\nimport { MarkProps } from './types';\nimport { getImageSize } from './utils';\n\nexport const Mark = ({\n typeCode,\n variant = 'white',\n size = 'lg',\n hasError,\n className,\n integrationMarkUrl,\n integrationType,\n ...otherProps\n}: MarkProps) => {\n const imageSize = getImageSize(size);\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([\n styles.mark,\n styles[`${size}-size`],\n variant === 'transparent' && styles.transparentBackground,\n className,\n ])}\n {...otherProps}\n >\n {hasError && (\n <CriticalFillIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${typeCode} ${integrationType} has an error`}\n />\n )}\n <img src={integrationMarkUrl} alt=\"\" width={imageSize} height={imageSize} />\n </FlexRow>\n );\n};\n"],"names":["getImageSize","React","FlexRow","buildClassnames","styles","CriticalFillIcon","theme"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,GAAG,UAAU,EACH,KAAI;AACd,IAAA,MAAM,SAAS,GAAGA,kBAAY,CAAC,IAAI,CAAC;IAEpC,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,WAAM,CAAC,IAAI;AACX,YAAAA,WAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,OAAO,KAAK,aAAa,IAAIA,WAAM,CAAC,qBAAqB;YACzD,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,QAAQ,KACPH,sBAAC,CAAA,aAAA,CAAAI,iCAAgB,IACf,SAAS,EAAED,WAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACN,YAAA,EAAA,CAAA,EAAG,QAAQ,CAAI,CAAA,EAAA,eAAe,CAAe,aAAA,CAAA,EAAA,CACzD,CACH;AACD,QAAAL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAI,CAAA,CACpE;AAEd;;;;"}

package/dist/components/Mark/Mark.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { CriticalIcon } from '../../icons/custom/components/CriticalIcon.js';
+import { CriticalFillIcon } from '../../icons/custom/components/CriticalFillIcon.js';
 import { theme } from '../../theme/index.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
@@ -15,7 +15,7 @@ const Mark = ({ typeCode, variant = 'white', size = 'lg', hasError, className, i
             variant === 'transparent' && styles.transparentBackground,
             className,
         ]), ...otherProps },
-        hasError && (React__default.createElement(CriticalIcon, { className: styles.indicatorIcon, color: theme.colors.secondary.red.base, fill: theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": `${typeCode} ${integrationType} has an error` })),
+        hasError && (React__default.createElement(CriticalFillIcon, { className: styles.indicatorIcon, color: theme.colors.secondary.red.base, fill: theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": `${typeCode} ${integrationType} has an error` })),
         React__default.createElement("img", { src: integrationMarkUrl, alt: "", width: imageSize, height: imageSize })));
 };

package/dist/components/Mark/Mark.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Mark.js","sources":["../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~CriticalIcon~~ } from '../../icons~~/custom/components/CriticalIcon~~';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\n\nimport styles from './Mark.module.scss';\nimport { MarkProps } from './types';\nimport { getImageSize } from './utils';\n\nexport const Mark = ({\n typeCode,\n variant = 'white',\n size = 'lg',\n hasError,\n className,\n integrationMarkUrl,\n integrationType,\n ...otherProps\n}: MarkProps) => {\n const imageSize = getImageSize(size);\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([\n styles.mark,\n styles[`${size}-size`],\n variant === 'transparent' && styles.transparentBackground,\n className,\n ])}\n {...otherProps}\n >\n {hasError && (\n <~~CriticalIcon~~\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${typeCode} ${integrationType} has an error`}\n />\n )}\n <img src={integrationMarkUrl} alt=\"\" width={imageSize} height={imageSize} />\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAUO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,GAAG,UAAU,EACH,KAAI;AACd,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC;IAEpC,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,IAAI;AACX,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,OAAO,KAAK,aAAa,IAAI,MAAM,CAAC,qBAAqB;YACzD,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,~~YAAY~~,~~IACX~~,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACN,YAAA,EAAA,CAAA,EAAG,QAAQ,CAAI,CAAA,EAAA,eAAe,CAAe,aAAA,CAAA,EAAA,CACzD,CACH;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAI,CAAA,CACpE;AAEd;;;;"}
1	+ {"version":3,"file":"Mark.js","sources":["../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\n\nimport styles from './Mark.module.scss';\nimport { MarkProps } from './types';\nimport { getImageSize } from './utils';\n\nexport const Mark = ({\n typeCode,\n variant = 'white',\n size = 'lg',\n hasError,\n className,\n integrationMarkUrl,\n integrationType,\n ...otherProps\n}: MarkProps) => {\n const imageSize = getImageSize(size);\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([\n styles.mark,\n styles[`${size}-size`],\n variant === 'transparent' && styles.transparentBackground,\n className,\n ])}\n {...otherProps}\n >\n {hasError && (\n <CriticalFillIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${typeCode} ${integrationType} has an error`}\n />\n )}\n <img src={integrationMarkUrl} alt=\"\" width={imageSize} height={imageSize} />\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAUO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,GAAG,UAAU,EACH,KAAI;AACd,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC;IAEpC,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,IAAI;AACX,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,OAAO,KAAK,aAAa,IAAI,MAAM,CAAC,qBAAqB;YACzD,SAAS;AACV,SAAA,CAAC,KACE,UAAU,EAAA;QAEb,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACf,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACN,YAAA,EAAA,CAAA,EAAG,QAAQ,CAAI,CAAA,EAAA,eAAe,CAAe,aAAA,CAAA,EAAA,CACzD,CACH;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAI,CAAA,CACpE;AAEd;;;;"}

package/dist/hooks/useScrollPosition/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export type ScrollPosition = 'none' | 'start' | 'middle' | 'end';
+export type ScrollPosition = 'none' | 'start' | 'middle' | 'end' | undefined;
 export type GetScrollPositionProps = {
     container: HTMLElement;
 };

package/dist/hooks/useScrollPosition/useScrollPosition.cjs CHANGED Viewed

@@ -14,26 +14,40 @@ var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
  * Hook to track the horizontal scroll position of a scrollable container.
  */
 const useScrollPosition = ({ containerRef }) => {
-    const [scrollPosition, setScrollPosition] = React.useState('none');
+    const [scrollPosition, setScrollPosition] = React.useState(undefined);
+    const [enableTransition, setEnableTransition] = React.useState(false);
+    const prevScrollPositionRef = React.useRef(undefined);
     const updatePosition = React.useCallback((container) => {
         if (!container)
             return;
         setScrollPosition(utils.getScrollPosition({ container }));
     }, []);
     const throttledUpdate = React.useMemo(() => throttle__default.default(updatePosition, constants.THROTTLE_MS), [updatePosition]);
-    const onScroll = React.useCallback((e) => {
-        throttledUpdate(e.currentTarget);
-    }, [throttledUpdate]);
+    const onScroll = (e) => throttledUpdate(e.currentTarget);
+    // Clean up throttled function on unmount
     React.useEffect(() => {
         return () => throttledUpdate.cancel();
     }, [throttledUpdate]);
+    // Calculate initial scroll position synchronously before paint
+    React.useLayoutEffect(() => {
+        var _a;
+        updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null);
+    }, [containerRef, updatePosition]);
+    // Enable transitions only after a real scroll change (not the initial calculation)
+    React.useEffect(() => {
+        const hasPositionChanged = prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;
+        if (hasPositionChanged) {
+            setEnableTransition(true);
+        }
+        prevScrollPositionRef.current = scrollPosition;
+    }, [scrollPosition]);
     // Recalculate scroll position when the container size changes
     useResizeObserver.useResizeObserver({
         targetRef: containerRef,
         resizeHandler: () => { var _a; return updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null); },
         throttleMs: constants.THROTTLE_MS,
     });
-    return { scrollPosition, onScroll };
+    return { scrollPosition, onScroll, enableTransition };
 };
 exports.useScrollPosition = useScrollPosition;

package/dist/hooks/useScrollPosition/useScrollPosition.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollPosition.cjs","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import { useMemo, useCallback~~, useState, useEffect, UIEvent,~~ RefObject } from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(~~'none'~~);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = ~~useCallback~~(~~\n (~~e: UIEvent<HTMLElement>) => ~~{\n~~ throttledUpdate(e.currentTarget);\n }~~,\n~~ [throttledUpdate]~~,\n~~ );\n\n ~~useEffect~~(() => {\n ~~return~~ () => ~~throttledUpdate~~.~~cancel~~();\n }, [~~throttledUpdate~~]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll };\n};\n"],"names":["useState","useCallback","getScrollPosition","useMemo","throttle","THROTTLE_MS","useEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;~~AAOA~~;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAiB,MAAM,CAAC;~~AAE5E~~,IAAA,MAAM,cAAc,GAAGC,iBAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAACC,uBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAMC,yBAAQ,CAAC,cAAc,EAAEC,qBAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,~~GAAGJ~~,~~iBAAW~~,~~CAC1B~~,CAAC,~~CAAuB~~,~~KAAI~~;~~AAC1B~~,QAAA,eAAe,CAAC,CAAC,CAAC,~~aAAa~~,CAAC;~~AAClC~~,KAAC,~~EACD~~,CAAC,~~eAAe~~,CAAC,~~CAClB;IAEDK~~,eAAS,CAAC,MAAK;~~AACb~~,~~QAAA~~,OAAO,~~MAAM~~,~~eAAe~~,CAAC,~~MAAM~~,EAAE;~~AACvC~~,KAAC,EAAE,CAAC,~~eAAe~~,CAAC,CAAC;;~~AAGrB~~,~~IAAAC~~,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,~~EAAEF~~,qBAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;~~AACrC~~;;;;"}
1	+ {"version":3,"file":"useScrollPosition.cjs","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import {\n useState,\n useLayoutEffect,\n useEffect,\n useRef,\n useMemo,\n useCallback,\n RefObject,\n} from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(undefined);\n const [enableTransition, setEnableTransition] = useState(false);\n const prevScrollPositionRef = useRef<ScrollPosition>(undefined);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = (e: React.UIEvent<HTMLElement>) => throttledUpdate(e.currentTarget);\n\n // Clean up throttled function on unmount\n useEffect(() => {\n return () => throttledUpdate.cancel();\n }, [throttledUpdate]);\n\n // Calculate initial scroll position synchronously before paint\n useLayoutEffect(() => {\n updatePosition(containerRef?.current ?? null);\n }, [containerRef, updatePosition]);\n\n // Enable transitions only after a real scroll change (not the initial calculation)\n useEffect(() => {\n const hasPositionChanged =\n prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;\n\n if (hasPositionChanged) {\n setEnableTransition(true);\n }\n prevScrollPositionRef.current = scrollPosition;\n }, [scrollPosition]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll, enableTransition };\n};\n"],"names":["useState","useRef","useCallback","getScrollPosition","useMemo","throttle","THROTTLE_MS","useEffect","useLayoutEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;AAeA;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAiB,SAAS,CAAC;IAC/E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC/D,IAAA,MAAM,qBAAqB,GAAGC,YAAM,CAAiB,SAAS,CAAC;AAE/D,IAAA,MAAM,cAAc,GAAGC,iBAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAACC,uBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAMC,yBAAQ,CAAC,cAAc,EAAEC,qBAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,GAAG,CAAC,CAA6B,KAAK,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;IAGpFC,eAAS,CAAC,MAAK;AACb,QAAA,OAAO,MAAM,eAAe,CAAC,MAAM,EAAE;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC;;IAGrBC,qBAAe,CAAC,MAAK;;AACnB,QAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,IAAI,CAAC;AAC/C,KAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;;IAGlCD,eAAS,CAAC,MAAK;QACb,MAAM,kBAAkB,GACtB,qBAAqB,CAAC,OAAO,IAAI,cAAc,KAAK,qBAAqB,CAAC,OAAO;AAEnF,QAAA,IAAI,kBAAkB,EAAE;YACtB,mBAAmB,CAAC,IAAI,CAAC;AAC1B;AACD,QAAA,qBAAqB,CAAC,OAAO,GAAG,cAAc;AAChD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;;AAGpB,IAAAE,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,EAAEH,qBAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE;AACvD;;;;"}

package/dist/hooks/useScrollPosition/useScrollPosition.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { UIEvent } from 'react';
 import { ScrollPosition, UseScrollPositionProps } from './types';
 /**
  * Hook to track the horizontal scroll position of a scrollable container.
  */
 export declare const useScrollPosition: ({ containerRef }: UseScrollPositionProps) => {
     scrollPosition: ScrollPosition;
-    onScroll: (e: UIEvent<HTMLElement>) => void;
+    onScroll: (e: React.UIEvent<HTMLElement>) => void | undefined;
+    enableTransition: boolean;
 };

package/dist/hooks/useScrollPosition/useScrollPosition.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 import throttle from 'lodash.throttle';
 import { useResizeObserver } from '../useResizeObserver.js';
 import { THROTTLE_MS } from './constants.js';
@@ -8,26 +8,40 @@ import { getScrollPosition } from './utils.js';
  * Hook to track the horizontal scroll position of a scrollable container.
  */
 const useScrollPosition = ({ containerRef }) => {
-    const [scrollPosition, setScrollPosition] = useState('none');
+    const [scrollPosition, setScrollPosition] = useState(undefined);
+    const [enableTransition, setEnableTransition] = useState(false);
+    const prevScrollPositionRef = useRef(undefined);
     const updatePosition = useCallback((container) => {
         if (!container)
             return;
         setScrollPosition(getScrollPosition({ container }));
     }, []);
     const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);
-    const onScroll = useCallback((e) => {
-        throttledUpdate(e.currentTarget);
-    }, [throttledUpdate]);
+    const onScroll = (e) => throttledUpdate(e.currentTarget);
+    // Clean up throttled function on unmount
     useEffect(() => {
         return () => throttledUpdate.cancel();
     }, [throttledUpdate]);
+    // Calculate initial scroll position synchronously before paint
+    useLayoutEffect(() => {
+        var _a;
+        updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null);
+    }, [containerRef, updatePosition]);
+    // Enable transitions only after a real scroll change (not the initial calculation)
+    useEffect(() => {
+        const hasPositionChanged = prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;
+        if (hasPositionChanged) {
+            setEnableTransition(true);
+        }
+        prevScrollPositionRef.current = scrollPosition;
+    }, [scrollPosition]);
     // Recalculate scroll position when the container size changes
     useResizeObserver({
         targetRef: containerRef,
         resizeHandler: () => { var _a; return updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null); },
         throttleMs: THROTTLE_MS,
     });
-    return { scrollPosition, onScroll };
+    return { scrollPosition, onScroll, enableTransition };
 };
 export { useScrollPosition };

package/dist/hooks/useScrollPosition/useScrollPosition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollPosition.js","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import { useMemo, useCallback~~, useState, useEffect, UIEvent,~~ RefObject } from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(~~'none'~~);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = ~~useCallback~~(~~\n (~~e: UIEvent<HTMLElement>) => ~~{\n~~ throttledUpdate(e.currentTarget);\n }~~,\n~~ [throttledUpdate]~~,\n~~ );\n\n ~~useEffect~~(() => {\n ~~return~~ () => ~~throttledUpdate~~.~~cancel~~();\n }, [~~throttledUpdate~~]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll };\n};\n"],"names":[],"mappings":";;;;;;~~AAOA~~;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,MAAM,CAAC;~~AAE5E~~,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,GAAG,~~WAAW~~,~~CAC1B~~,CAAC,~~CAAuB~~,~~KAAI~~;~~AAC1B~~,QAAA,eAAe,CAAC,CAAC,CAAC,~~aAAa~~,CAAC;~~AAClC~~,KAAC,~~EACD~~,CAAC,~~eAAe~~,CAAC,~~CAClB;IAED~~,SAAS,CAAC,MAAK;~~AACb~~,~~QAAA~~,OAAO,~~MAAM~~,~~eAAe~~,CAAC,~~MAAM~~,EAAE;~~AACvC~~,KAAC,EAAE,CAAC,~~eAAe~~,CAAC,CAAC;;~~AAGrB~~,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;~~AACrC~~;;;;"}
1	+ {"version":3,"file":"useScrollPosition.js","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import {\n useState,\n useLayoutEffect,\n useEffect,\n useRef,\n useMemo,\n useCallback,\n RefObject,\n} from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(undefined);\n const [enableTransition, setEnableTransition] = useState(false);\n const prevScrollPositionRef = useRef<ScrollPosition>(undefined);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = (e: React.UIEvent<HTMLElement>) => throttledUpdate(e.currentTarget);\n\n // Clean up throttled function on unmount\n useEffect(() => {\n return () => throttledUpdate.cancel();\n }, [throttledUpdate]);\n\n // Calculate initial scroll position synchronously before paint\n useLayoutEffect(() => {\n updatePosition(containerRef?.current ?? null);\n }, [containerRef, updatePosition]);\n\n // Enable transitions only after a real scroll change (not the initial calculation)\n useEffect(() => {\n const hasPositionChanged =\n prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;\n\n if (hasPositionChanged) {\n setEnableTransition(true);\n }\n prevScrollPositionRef.current = scrollPosition;\n }, [scrollPosition]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll, enableTransition };\n};\n"],"names":[],"mappings":";;;;;;AAeA;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,SAAS,CAAC;IAC/E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC/D,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAiB,SAAS,CAAC;AAE/D,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,GAAG,CAAC,CAA6B,KAAK,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;IAGpF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,MAAM,eAAe,CAAC,MAAM,EAAE;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC;;IAGrB,eAAe,CAAC,MAAK;;AACnB,QAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,IAAI,CAAC;AAC/C,KAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;;IAGlC,SAAS,CAAC,MAAK;QACb,MAAM,kBAAkB,GACtB,qBAAqB,CAAC,OAAO,IAAI,cAAc,KAAK,qBAAqB,CAAC,OAAO;AAEnF,QAAA,IAAI,kBAAkB,EAAE;YACtB,mBAAmB,CAAC,IAAI,CAAC;AAC1B;AACD,QAAA,qBAAqB,CAAC,OAAO,GAAG,cAAc;AAChD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;;AAGpB,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE;AACvD;;;;"}

package/dist/icons/custom/components/{CriticalIcon.cjs → CriticalFillIcon.cjs} RENAMED Viewed

@@ -6,9 +6,16 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const CriticalIcon = ({ fill, ...props }) => (React__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+/**
+ * Custom CriticalFillIcon with dual-color support for the critical/warning state
+ *
+ * Custom implementation needed for Avatar & Mark components that require
+ * independent color control: `fill` prop controls the inner exclamation mark,
+ * `currentColor` controls the outer circle.
+ */
+const CriticalFillIcon = ({ fill, ...props }) => (React__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
     React__default.default.createElement("circle", { cx: 8, cy: 8, r: 6, fill: fill }),
     React__default.default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
-exports.CriticalIcon = CriticalIcon;
-//# sourceMappingURL=CriticalIcon.cjs.map
+exports.CriticalFillIcon = CriticalFillIcon;
+//# sourceMappingURL=CriticalFillIcon.cjs.map

package/dist/icons/custom/components/CriticalFillIcon.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CriticalFillIcon.cjs","sources":["../../../../src/icons/custom/components/CriticalFillIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\n/**\n * Custom CriticalFillIcon with dual-color support for the critical/warning state\n *\n * Custom implementation needed for Avatar & Mark components that require\n * independent color control: `fill` prop controls the inner exclamation mark,\n * `currentColor` controls the outer circle.\n */\nexport const CriticalFillIcon = ({ fill, ...props }: IconComponentProps) => (\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <circle cx={8} cy={8} r={6} fill={fill} />\n <path\n d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAGA;;;;;;AAMG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAsB,MACrEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;AAC/E,IAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;IAC1CA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/icons/custom/components/CriticalFillIcon.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IconComponentProps } from 'src/icons/types';
+/**
+ * Custom CriticalFillIcon with dual-color support for the critical/warning state
+ *
+ * Custom implementation needed for Avatar & Mark components that require
+ * independent color control: `fill` prop controls the inner exclamation mark,
+ * `currentColor` controls the outer circle.
+ */
+export declare const CriticalFillIcon: ({ fill, ...props }: IconComponentProps) => React.JSX.Element;