@elliemae/ds-data-table 3.70.0-next.44 → 3.70.0-next.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/configs/constants.js +9 -0
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderResizer.js +37 -35
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js +9 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +10 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +1 -2
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/configs/constants.js +9 -0
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderResizer.js +38 -36
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js +9 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +11 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +1 -2
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/configs/constants.d.ts +6 -0
- package/dist/types/parts/Headers/HeaderResizer.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderCellHandlers.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +3 -1
- package/dist/types/styled.d.ts +1 -1
- package/package.json +30 -30
- package/skills/ds-data-table-slots/SKILL.md +5 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n type DSPropTypesSchema,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nexport namespace DSDataTableT {\n // ===========================================================================\n // Typescript definition for auxiliary types\n // ===========================================================================\n type PropsT<D, R, O> = Partial<D> & R & O;\n\n type InternalPropsT<D, R, O> = D & R & O;\n\n // ===========================================================================\n // Typescript definition for zustand store\n // ===========================================================================\n\n export type InternalAtoms = {\n drilldownRowId: string | null;\n focusedRowId: string | null;\n isShiftPressed: boolean;\n reduxHeaders: Record<string, ReduxHeader>;\n isHeaderCellDragging: boolean;\n };\n export type UseAutoCalculatedT = {\n /**\n * visibleRangeRef: React.MutableRefObject<Range>\n * We can use this ref to get the visible range of the virtual list\n * taking in consideration the end-start and overscan.\n */\n visibleRangeRef: React.MutableRefObject<Range>;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n columnHeaderCallbackRef: (node: HTMLDivElement | null) => void;\n /** Sticky header height (px) \u2014 drives both useVirtual paddingStart and the scroll container's scroll-padding-top (PUI-18626). */\n headerHeightPx: number;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n lastSelected: React.MutableRefObject<number>;\n bodyClientWidth: number | string;\n setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n };\n export type Selectors = Record<string, never>;\n export type Reducers = {\n patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n };\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n // ===========================================================================\n // Typescript definition for data table related things\n // ===========================================================================\n\n export interface Filter {\n id: string;\n type: string;\n value: unknown;\n }\n\n export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n startDate: string;\n endDate: string;\n isDateRange: boolean;\n }>;\n export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n export type FilterFnOutOfTheBoxFreeTextSearch = DSDataTableT.FilterFn<string>;\n export interface FilterItemProps {\n column: InternalColumn;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n referenceColumn?: HTMLDivElement | null;\n }\n\n export interface FilterProps<T> {\n column: InternalColumn;\n referenceColumn?: HTMLDivElement | null;\n onValueChange: (type: string, value: T | undefined) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n filterValue: T;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n domIdAffix?: string;\n }\n\n export interface FilterPillProps<T> {\n columnHeader: string;\n column: string;\n value: T;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n prevRef?: React.RefObject<HTMLElement>;\n innerRef: React.RefObject<HTMLElement>;\n nextRef?: React.RefObject<HTMLElement>;\n onPillRemove?: (remove: () => void) => void;\n }\n\n export interface ReduxHeader {\n hideFilterMenu?: boolean;\n hideFilterButton?: boolean;\n showDnDHandle?: boolean;\n withTabStops?: boolean;\n showSortCaret?: boolean;\n }\n\n export type SelectionItem = boolean | 'mixed';\n\n export type Selection = Record<string | number, SelectionItem>;\n\n export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n export interface SortBy {\n id: string;\n desc: boolean;\n }\n\n export interface Pagination extends DSPaginationT.Props {\n hasPagination: boolean;\n pageIndex?: number;\n canPreviousPage?: boolean;\n canNextPage?: boolean;\n pageSize?: number;\n dataIsPage?: boolean;\n showPerPageSelector?: boolean;\n perPageOptions?: number[];\n perPageStep?: number;\n minPerPage?: number;\n maxPerPage?: number;\n onPageSizeChange?: (pageSize: number) => void;\n onPreviousPage?: () => void;\n onNextPage?: () => void;\n onPageChange?: (page: number) => void;\n pageCount?: number | string;\n isLoadingPageCount?: boolean;\n pageDetails?: string[];\n pageDetailsTitle?: string;\n }\n\n export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n export interface RenderRowActionsConfig {\n columnWidth: number;\n renderer: React.ComponentType<CellProps>;\n }\n\n export type RenderRowActions = false | RenderRowActionsConfig;\n\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n export type DraggablePropsT =\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n\n export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n // ===========================================================================\n // Typescript definition for the row and columns\n // ===========================================================================\n\n export interface Row {\n [key: string]: unknown;\n id: string;\n subRows?: Row[];\n tableRowDetails?: React.ComponentType<DetailsProps>;\n dimsumHeaderValue?: string;\n }\n export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n DefaultCellRender: JSX.Element;\n }\n\n export interface Column {\n id?: string;\n Header: string | React.ComponentType<HeaderProps>;\n accessor?: string;\n filter?: string;\n filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n disableFirstOptionFocusOnFilter?: boolean;\n editOptions?: EditOptionT[] | (() => EditOptionT[]);\n filterMinWidth?: number | string;\n Filter?: React.ComponentType<FilterProps<unknown>>;\n Cell?: React.ComponentType<CellRendererProps>;\n editable?: string | React.ComponentType<EditableCellProps>;\n disableDnD?: boolean;\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n padding?: number;\n columns?: Column[];\n canSort?: boolean;\n isSortedDesc?: boolean;\n canResize?: boolean;\n isFocuseable?: boolean;\n textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n pillLabel?: string;\n ref?: React.MutableRefObject<HTMLTableColElement | null>;\n required?: boolean;\n cellStyle?: React.CSSProperties;\n alwaysDisplayEditIcon?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the row and columns\n // ===========================================================================\n\n export interface InternalRow {\n id: string;\n uid: string;\n index: number;\n realIndex: number;\n parent: InternalRow | null;\n parentId: string | null;\n parentIndex: number | null;\n depth: number;\n isExpanded: boolean;\n subRows: Row[];\n childrenCount: number;\n original: Row;\n cells: Cell[];\n }\n\n export interface InternalColumn extends Column {\n index?: number;\n id: string;\n parentId: string | null;\n depth: number;\n ref: React.MutableRefObject<HTMLTableColElement | null>;\n columns?: InternalColumn[];\n persistFilterInputAfterSubmit?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the cell\n // ===========================================================================\n\n export interface CellRendererProps {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n // cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n domIdAffix?: string;\n }\n\n export interface Cell<T extends HTMLElement = HTMLElement> {\n column: InternalColumn;\n value: unknown;\n render: React.ComponentType<CellRendererProps>;\n row: InternalRow;\n ref: React.MutableRefObject<T | null>;\n id: string;\n }\n\n // ===========================================================================\n // Typescript definition for all component props\n // ===========================================================================\n\n export interface HeaderProps {\n column: InternalColumn;\n draggableProps: DraggablePropsT;\n }\n\n export interface CellProps<T extends HTMLElement = HTMLElement> {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell<T>;\n domIdAffix?: string;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n }\n\n export interface DetailsProps {\n detailsIndent: number;\n row: InternalRow;\n }\n export interface RowVariantProps {\n row: DSDataTableT.InternalRow;\n itemIndex: number;\n isDragOverlay: boolean;\n focusedRowId: string | null;\n drilldownRowId: string | null;\n }\n\n // ===========================================================================\n // Typescript definition for the React Context\n // ===========================================================================\n\n export interface Context {\n tableProps: InternalProps;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n drilldownRowId: string | null;\n setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n focusedRowId: string | null;\n setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n reduxHeaders: Record<string, ReduxHeader>;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n isShiftPressed: boolean;\n setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n lastSelected: React.MutableRefObject<number>;\n isHeaderCellDragging: boolean;\n setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface DefaultProps {\n height: string;\n width: string;\n renderRowActions: false | RenderRowActionsConfig;\n getRowVariant: (\n row: InternalRow,\n defaultCellRenderer: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n }>,\n ) => RowVariant | React.ComponentType<RowVariantProps>;\n withFilterBar: boolean;\n isExpandable: boolean;\n expandedRows: Record<string, boolean>;\n disabledRows: Record<string, boolean>;\n isResizeable: boolean;\n isLoading: boolean;\n pagination: false | Pagination;\n filters: Filter[];\n colsLayoutStyle: ColsLayoutStyleValues;\n hiddenColumns: string[];\n noResultsMessage: string;\n dragAndDropRows: boolean;\n maxDragAndDropLevel: number;\n onRowsReorder: (\n newData: Row[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string | null,\n extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n ) => void;\n dragAndDropColumns: boolean;\n onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n getIsDropValid: (\n active: DnDKitTree.Item<Row>,\n over: DnDKitTree.Item<Row>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n onColumnResize: (headerId: string, width: number) => void;\n onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n onRowClick: TypescriptHelpersT.GenericFunc;\n onRowFocus: TypescriptHelpersT.GenericFunc;\n noSelectionColumn: boolean;\n selectSingle: boolean;\n onSelectionChange: (\n newSelection: Selection,\n selectedControl: string,\n event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n ) => void;\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n onFiltersChange: TypescriptHelpersT.GenericFunc;\n onPageChanged: TypescriptHelpersT.GenericFunc;\n onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n isSkeleton: boolean;\n domIdAffix?: string;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n uniqueRowAccessor?: UniqueRowAccessorType;\n cellRendererProps?: Record<string, unknown>;\n selection?: Selection;\n groupedRowsRenderHeader?:\n | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n | string;\n filterBarProps?: {\n filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n onClearAllFiltersClick?: () => void;\n onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n onDropdownMenuClickOutside?: () => void;\n onDropdownMenuTriggerClick?: () => void;\n isDropdownMenuOpen?: boolean;\n extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n };\n actionRef?: React.MutableRefObject<{\n scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n }>;\n noResultsSecondaryMessage?: string;\n noResultsButtonLabel?: string;\n noResultsPlaceholder?: React.ReactElement;\n onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n onTableResize?: TypescriptHelpersT.GenericFunc;\n Pagination?: React.ComponentType<Record<string, never>>;\n getAriaLabelForRow?: (args: {\n row: InternalRow;\n selected: boolean;\n disabled: boolean;\n expandable: boolean;\n expanded: boolean;\n }) => string;\n checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n }\n export interface RequiredProps {\n columns: Column[];\n data: Row[];\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type GetOwnerPropsT = () => ZustandT.PropsStore<\n DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT\n >;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n height: '100%',\n width: '100%',\n renderRowActions: false,\n getRowVariant: () => 'ds-primary-row',\n isExpandable: false,\n expandedRows: {},\n disabledRows: {},\n isResizeable: false,\n isLoading: false,\n pagination: false,\n withFilterBar: false,\n filters: [],\n getIsDropValid: () => true,\n onColumnResize: () => null,\n onColumnSortChange: () => null,\n colsLayoutStyle: ColsLayoutStyle.Fixed,\n hiddenColumns: [],\n noResultsMessage: 'No Results Found',\n dragAndDropRows: false,\n maxDragAndDropLevel: 1,\n onRowsReorder: () => null,\n dragAndDropColumns: false,\n onColumnsReorder: () => null,\n onColumnSizeChange: () => null,\n onRowClick: () => null,\n onRowFocus: () => null,\n noSelectionColumn: false,\n selectSingle: false,\n onSelectionChange: () => null,\n textWrap: 'wrap',\n onCellValueChange: () => null,\n onFiltersChange: () => null,\n onPageChanged: () => null,\n onRowExpand: () => null,\n onColumnSort: () => null,\n isSkeleton: false,\n domIdAffix: uid(8),\n});\n\nexport const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props> = {\n ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'Header name or component',\n ).isRequired,\n accessor: PropTypes.string.description('The entry of the data that this column will display'),\n id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'The custom component to render as a filter',\n ),\n Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'The editable out-of-the-box or component to render',\n ),\n disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n canSort: PropTypes.bool.description('Whereas this column is sortable'),\n disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n 'Whereas the first option should not be focused on filter',\n ),\n filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the filter',\n ),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).description('Filter options'),\n isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n required: PropTypes.bool.description('Whereas this column is required'),\n alwaysDisplayEditIcon: PropTypes.bool.description(\n 'Whereas to always show the edit icon on this column if it is editable',\n ),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n pillLabel: PropTypes.string.description(\n 'Overrides the filter pill label text for this column when non-empty; defaults to the column Header',\n ),\n }),\n ).description('Array of columns').isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n }),\n ).description('Array of rows'),\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n 'The renderer to use for the action toolbar',\n ),\n isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n uniqueRowAccessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.func,\n ]).description(\n 'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n ' This is necessary for the selectable and drag and drop features',\n ),\n disabledRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n ),\n expandedRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n ),\n onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n cellRendererProps: PropTypes.object.description(\n 'Object with all the props you want the cells to have available when rendering',\n ),\n selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n selection: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n ),\n onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n 'String | Function to call which will display in the row headers',\n ),\n isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n filters: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n value: PropTypes.any,\n }),\n ).description('Array of filter keys and values'),\n withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n filterBarProps: PropTypes.shape({\n filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'If you specify custom filters, you will need to render their pills here',\n ),\n isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n extraOptions: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n id: PropTypes.string,\n label: PropTypes.string,\n onClick: PropTypes.func,\n }),\n ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n }).description('Props for the filter bar'),\n onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n pagination: PropTypes.oneOfType([\n PropTypes.oneOf([false]),\n PropTypes.shape({\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func\n .description('Function invoked when the page size changes')\n .defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n }),\n ]).description('Object containing the data for the pagination'),\n Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n noResultsPlaceholder: PropTypes.oneOfType([PropTypes.node]).description(\n 'Custom content to show when dataset is empty',\n ),\n isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n onColumnResize: PropTypes.func\n .description('Function invoked when a column is resized')\n .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n onColumnSortChange: PropTypes.func\n .description('Function invoked when a column is sorted')\n .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n onTableResize: PropTypes.func.description(\n 'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n ),\n actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n getRowVariant: PropTypes.func\n .description(\"Function invoked to determine a row's variant\")\n .defaultValue(`() => 'ds-primary-row'`),\n noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNoResultsButtonClick: PropTypes.func\n .description('Function invoked when the no results button is clicked')\n .defaultValue(() => null),\n isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n domIdAffix: PropTypes.string\n .description('Affix to avoid duplicate ids')\n .defaultValue('8 randomly generated characters'),\n checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as ValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,iBAAoB;AAQpB,8BAKO;AACP,8BAA6B;AAC7B,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n type DSPropTypesSchema,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle, ResizerA11yMode } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nexport namespace DSDataTableT {\n // ===========================================================================\n // Typescript definition for auxiliary types\n // ===========================================================================\n type PropsT<D, R, O> = Partial<D> & R & O;\n\n type InternalPropsT<D, R, O> = D & R & O;\n\n // ===========================================================================\n // Typescript definition for zustand store\n // ===========================================================================\n\n export type InternalAtoms = {\n drilldownRowId: string | null;\n focusedRowId: string | null;\n isShiftPressed: boolean;\n reduxHeaders: Record<string, ReduxHeader>;\n isHeaderCellDragging: boolean;\n };\n export type UseAutoCalculatedT = {\n /**\n * visibleRangeRef: React.MutableRefObject<Range>\n * We can use this ref to get the visible range of the virtual list\n * taking in consideration the end-start and overscan.\n */\n visibleRangeRef: React.MutableRefObject<Range>;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n columnHeaderCallbackRef: (node: HTMLDivElement | null) => void;\n /** Sticky header height (px) \u2014 drives both useVirtual paddingStart and the scroll container's scroll-padding-top (PUI-18626). */\n headerHeightPx: number;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n lastSelected: React.MutableRefObject<number>;\n bodyClientWidth: number | string;\n setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n };\n export type Selectors = Record<string, never>;\n export type Reducers = {\n patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n };\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n // ===========================================================================\n // Typescript definition for data table related things\n // ===========================================================================\n\n export interface Filter {\n id: string;\n type: string;\n value: unknown;\n }\n\n export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n startDate: string;\n endDate: string;\n isDateRange: boolean;\n }>;\n export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n export type FilterFnOutOfTheBoxFreeTextSearch = DSDataTableT.FilterFn<string>;\n export interface FilterItemProps {\n column: InternalColumn;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n referenceColumn?: HTMLDivElement | null;\n }\n\n export interface FilterProps<T> {\n column: InternalColumn;\n referenceColumn?: HTMLDivElement | null;\n onValueChange: (type: string, value: T | undefined) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n filterValue: T;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n domIdAffix?: string;\n }\n\n export interface FilterPillProps<T> {\n columnHeader: string;\n column: string;\n value: T;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n prevRef?: React.RefObject<HTMLElement>;\n innerRef: React.RefObject<HTMLElement>;\n nextRef?: React.RefObject<HTMLElement>;\n onPillRemove?: (remove: () => void) => void;\n }\n\n export interface ReduxHeader {\n hideFilterMenu?: boolean;\n hideFilterButton?: boolean;\n showDnDHandle?: boolean;\n withTabStops?: boolean;\n showSortCaret?: boolean;\n }\n\n export type SelectionItem = boolean | 'mixed';\n\n export type Selection = Record<string | number, SelectionItem>;\n\n export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n export interface SortBy {\n id: string;\n desc: boolean;\n }\n\n export interface Pagination extends DSPaginationT.Props {\n hasPagination: boolean;\n pageIndex?: number;\n canPreviousPage?: boolean;\n canNextPage?: boolean;\n pageSize?: number;\n dataIsPage?: boolean;\n showPerPageSelector?: boolean;\n perPageOptions?: number[];\n perPageStep?: number;\n minPerPage?: number;\n maxPerPage?: number;\n onPageSizeChange?: (pageSize: number) => void;\n onPreviousPage?: () => void;\n onNextPage?: () => void;\n onPageChange?: (page: number) => void;\n pageCount?: number | string;\n isLoadingPageCount?: boolean;\n pageDetails?: string[];\n pageDetailsTitle?: string;\n }\n\n export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n export interface RenderRowActionsConfig {\n columnWidth: number;\n renderer: React.ComponentType<CellProps>;\n }\n\n export type RenderRowActions = false | RenderRowActionsConfig;\n\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n export type ResizerA11yModeValues = TypescriptHelpersT.ObjectValues<typeof ResizerA11yMode>;\n\n export type DraggablePropsT =\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n\n export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n // ===========================================================================\n // Typescript definition for the row and columns\n // ===========================================================================\n\n export interface Row {\n [key: string]: unknown;\n id: string;\n subRows?: Row[];\n tableRowDetails?: React.ComponentType<DetailsProps>;\n dimsumHeaderValue?: string;\n }\n export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n DefaultCellRender: JSX.Element;\n }\n\n export interface Column {\n id?: string;\n Header: string | React.ComponentType<HeaderProps>;\n accessor?: string;\n filter?: string;\n filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n disableFirstOptionFocusOnFilter?: boolean;\n editOptions?: EditOptionT[] | (() => EditOptionT[]);\n filterMinWidth?: number | string;\n Filter?: React.ComponentType<FilterProps<unknown>>;\n Cell?: React.ComponentType<CellRendererProps>;\n editable?: string | React.ComponentType<EditableCellProps>;\n disableDnD?: boolean;\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n padding?: number;\n columns?: Column[];\n canSort?: boolean;\n isSortedDesc?: boolean;\n canResize?: boolean;\n isFocuseable?: boolean;\n textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n pillLabel?: string;\n ref?: React.MutableRefObject<HTMLTableColElement | null>;\n required?: boolean;\n cellStyle?: React.CSSProperties;\n alwaysDisplayEditIcon?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the row and columns\n // ===========================================================================\n\n export interface InternalRow {\n id: string;\n uid: string;\n index: number;\n realIndex: number;\n parent: InternalRow | null;\n parentId: string | null;\n parentIndex: number | null;\n depth: number;\n isExpanded: boolean;\n subRows: Row[];\n childrenCount: number;\n original: Row;\n cells: Cell[];\n }\n\n export interface InternalColumn extends Column {\n index?: number;\n id: string;\n parentId: string | null;\n depth: number;\n ref: React.MutableRefObject<HTMLTableColElement | null>;\n columns?: InternalColumn[];\n persistFilterInputAfterSubmit?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the cell\n // ===========================================================================\n\n export interface CellRendererProps {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n // cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n domIdAffix?: string;\n }\n\n export interface Cell<T extends HTMLElement = HTMLElement> {\n column: InternalColumn;\n value: unknown;\n render: React.ComponentType<CellRendererProps>;\n row: InternalRow;\n ref: React.MutableRefObject<T | null>;\n id: string;\n }\n\n // ===========================================================================\n // Typescript definition for all component props\n // ===========================================================================\n\n export interface HeaderProps {\n column: InternalColumn;\n draggableProps: DraggablePropsT;\n }\n\n export interface CellProps<T extends HTMLElement = HTMLElement> {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell<T>;\n domIdAffix?: string;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n }\n\n export interface DetailsProps {\n detailsIndent: number;\n row: InternalRow;\n }\n export interface RowVariantProps {\n row: DSDataTableT.InternalRow;\n itemIndex: number;\n isDragOverlay: boolean;\n focusedRowId: string | null;\n drilldownRowId: string | null;\n }\n\n // ===========================================================================\n // Typescript definition for the React Context\n // ===========================================================================\n\n export interface Context {\n tableProps: InternalProps;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n drilldownRowId: string | null;\n setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n focusedRowId: string | null;\n setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n reduxHeaders: Record<string, ReduxHeader>;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n isShiftPressed: boolean;\n setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n lastSelected: React.MutableRefObject<number>;\n isHeaderCellDragging: boolean;\n setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface DefaultProps {\n height: string;\n width: string;\n renderRowActions: false | RenderRowActionsConfig;\n getRowVariant: (\n row: InternalRow,\n defaultCellRenderer: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n }>,\n ) => RowVariant | React.ComponentType<RowVariantProps>;\n withFilterBar: boolean;\n isExpandable: boolean;\n expandedRows: Record<string, boolean>;\n disabledRows: Record<string, boolean>;\n isResizeable: boolean;\n isLoading: boolean;\n pagination: false | Pagination;\n filters: Filter[];\n colsLayoutStyle: ColsLayoutStyleValues;\n resizerA11yMode: ResizerA11yModeValues;\n hiddenColumns: string[];\n noResultsMessage: string;\n dragAndDropRows: boolean;\n maxDragAndDropLevel: number;\n onRowsReorder: (\n newData: Row[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string | null,\n extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n ) => void;\n dragAndDropColumns: boolean;\n onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n getIsDropValid: (\n active: DnDKitTree.Item<Row>,\n over: DnDKitTree.Item<Row>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n onColumnResize: (headerId: string, width: number) => void;\n onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n onRowClick: TypescriptHelpersT.GenericFunc;\n onRowFocus: TypescriptHelpersT.GenericFunc;\n noSelectionColumn: boolean;\n selectSingle: boolean;\n onSelectionChange: (\n newSelection: Selection,\n selectedControl: string,\n event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n ) => void;\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n onFiltersChange: TypescriptHelpersT.GenericFunc;\n onPageChanged: TypescriptHelpersT.GenericFunc;\n onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n isSkeleton: boolean;\n domIdAffix?: string;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n uniqueRowAccessor?: UniqueRowAccessorType;\n cellRendererProps?: Record<string, unknown>;\n selection?: Selection;\n groupedRowsRenderHeader?:\n | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n | string;\n filterBarProps?: {\n filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n onClearAllFiltersClick?: () => void;\n onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n onDropdownMenuClickOutside?: () => void;\n onDropdownMenuTriggerClick?: () => void;\n isDropdownMenuOpen?: boolean;\n extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n };\n actionRef?: React.MutableRefObject<{\n scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n }>;\n noResultsSecondaryMessage?: string;\n noResultsButtonLabel?: string;\n noResultsPlaceholder?: React.ReactElement;\n onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n onTableResize?: TypescriptHelpersT.GenericFunc;\n Pagination?: React.ComponentType<Record<string, never>>;\n getAriaLabelForRow?: (args: {\n row: InternalRow;\n selected: boolean;\n disabled: boolean;\n expandable: boolean;\n expanded: boolean;\n }) => string;\n checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n }\n export interface RequiredProps {\n columns: Column[];\n data: Row[];\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type GetOwnerPropsT = () => ZustandT.PropsStore<\n DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT\n >;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n height: '100%',\n width: '100%',\n renderRowActions: false,\n getRowVariant: () => 'ds-primary-row',\n isExpandable: false,\n expandedRows: {},\n disabledRows: {},\n isResizeable: false,\n isLoading: false,\n pagination: false,\n withFilterBar: false,\n filters: [],\n getIsDropValid: () => true,\n onColumnResize: () => null,\n onColumnSortChange: () => null,\n colsLayoutStyle: ColsLayoutStyle.Fixed,\n resizerA11yMode: ResizerA11yMode.Separator,\n hiddenColumns: [],\n noResultsMessage: 'No Results Found',\n dragAndDropRows: false,\n maxDragAndDropLevel: 1,\n onRowsReorder: () => null,\n dragAndDropColumns: false,\n onColumnsReorder: () => null,\n onColumnSizeChange: () => null,\n onRowClick: () => null,\n onRowFocus: () => null,\n noSelectionColumn: false,\n selectSingle: false,\n onSelectionChange: () => null,\n textWrap: 'wrap',\n onCellValueChange: () => null,\n onFiltersChange: () => null,\n onPageChanged: () => null,\n onRowExpand: () => null,\n onColumnSort: () => null,\n isSkeleton: false,\n domIdAffix: uid(8),\n});\n\nexport const DSDataTablePropTypes: DSPropTypesSchema<DSDataTableT.Props> = {\n ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'Header name or component',\n ).isRequired,\n accessor: PropTypes.string.description('The entry of the data that this column will display'),\n id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'The custom component to render as a filter',\n ),\n Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'The editable out-of-the-box or component to render',\n ),\n disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n minWidth: PropTypes.number.description(\n 'Minimum width of this column, useful when resizing. Defaults to 70px (PUI-17784) \u2014 sized to avoid the header icon affordances overlapping.',\n ),\n maxWidth: PropTypes.number.description(\n 'Maximum width of this column, useful when resizing. Defaults to 600px (PUI-17784) \u2014 previously unbounded.',\n ),\n canSort: PropTypes.bool.description('Whereas this column is sortable'),\n disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n 'Whereas the first option should not be focused on filter',\n ),\n filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the filter',\n ),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).description('Filter options'),\n isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n required: PropTypes.bool.description('Whereas this column is required'),\n alwaysDisplayEditIcon: PropTypes.bool.description(\n 'Whereas to always show the edit icon on this column if it is editable',\n ),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n pillLabel: PropTypes.string.description(\n 'Overrides the filter pill label text for this column when non-empty; defaults to the column Header',\n ),\n }),\n ).description('Array of columns').isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n }),\n ).description('Array of rows'),\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n 'The renderer to use for the action toolbar',\n ),\n isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n uniqueRowAccessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.func,\n ]).description(\n 'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n ' This is necessary for the selectable and drag and drop features',\n ),\n disabledRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n ),\n expandedRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n ),\n onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n cellRendererProps: PropTypes.object.description(\n 'Object with all the props you want the cells to have available when rendering',\n ),\n selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n selection: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n ),\n onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n 'String | Function to call which will display in the row headers',\n ),\n isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n filters: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n value: PropTypes.any,\n }),\n ).description('Array of filter keys and values'),\n withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n filterBarProps: PropTypes.shape({\n filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'If you specify custom filters, you will need to render their pills here',\n ),\n isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n extraOptions: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n id: PropTypes.string,\n label: PropTypes.string,\n onClick: PropTypes.func,\n }),\n ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n }).description('Props for the filter bar'),\n onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n pagination: PropTypes.oneOfType([\n PropTypes.oneOf([false]),\n PropTypes.shape({\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func\n .description('Function invoked when the page size changes')\n .defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n }),\n ]).description('Object containing the data for the pagination'),\n Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n resizerA11yMode: PropTypes.oneOf(['separator', 'slider']).description(\n 'EXPERIMENTAL \u2014 accessible role exposed by the column resize control (PUI-17784), for a11y SME evaluation. Defaults to \"separator\".',\n ),\n hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n noResultsPlaceholder: PropTypes.oneOfType([PropTypes.node]).description(\n 'Custom content to show when dataset is empty',\n ),\n isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n onColumnResize: PropTypes.func\n .description('Function invoked when a column is resized')\n .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n onColumnSortChange: PropTypes.func\n .description('Function invoked when a column is sorted')\n .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n onTableResize: PropTypes.func.description(\n 'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n ),\n actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n getRowVariant: PropTypes.func\n .description(\"Function invoked to determine a row's variant\")\n .defaultValue(`() => 'ds-primary-row'`),\n noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNoResultsButtonClick: PropTypes.func\n .description('Function invoked when the no results button is clicked')\n .defaultValue(() => null),\n isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n domIdAffix: PropTypes.string\n .description('Affix to avoid duplicate ids')\n .defaultValue('8 randomly generated characters'),\n checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as ValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -53,7 +53,6 @@ __export(styled_exports, {
|
|
|
53
53
|
});
|
|
54
54
|
module.exports = __toCommonJS(styled_exports);
|
|
55
55
|
var React = __toESM(require("react"));
|
|
56
|
-
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
57
56
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
58
57
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
59
58
|
var import_ds_system = require("@elliemae/ds-system");
|
|
@@ -217,7 +216,7 @@ const StyledHeaderRightIconsWrapper = (0, import_ds_system.styled)("div", {
|
|
|
217
216
|
align-self: flex-start;
|
|
218
217
|
padding-top: 2px;
|
|
219
218
|
`;
|
|
220
|
-
const StyledResizer = (0, import_ds_system.styled)(
|
|
219
|
+
const StyledResizer = (0, import_ds_system.styled)("div", {
|
|
221
220
|
name: import_constants.DSDataTableName,
|
|
222
221
|
slot: import_constants.DSDataTableSlots.RESIZER
|
|
223
222
|
})`
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${color ?? theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n svg {\n fill: ${(props) => props.theme.colors.brand['800']};\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ height?: string | number }>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height) as string};\n `}\n width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number; headerHeightPx: number }>`\n overflow: auto;\n height: 100%;\n /**\n * PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native\n * focus scroll (fired when keyboard navigation focuses a row) lands the focused row below\n * the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;\n * orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.\n */\n scroll-padding-top: ${(props) => props.headerHeightPx}px;\n --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\n colsLayoutStyle: string;\n}>`\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TR,\n})<{\n isExpandable: boolean;\n colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n grid-template-columns: var(--grid-layout);\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TH,\n})<{\n isDraggingActive?: boolean;\n column: DSDataTableT.InternalColumn;\n shouldShowDnD?: boolean;\n}>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n display: flex;\n align-items: center;\n align-self: flex-start;\n padding-top: 2px;\n`;\n\n// Column resize handle \u2014 a DSButtonV3 with buttonType=\"raw\" (unstyled) narrowed to a 4px grab strip.\n// A real <button> (role=button) via a Dimsum component: preserves the RESIZER slot data-testid and keeps\n// the control inside the design system, while \"raw\" strips the default button chrome. No value semantics\n// (this resize has no bounded range \u2014 the neighbouring column does not change).\nexport const StyledResizer = styled(DSButtonV3, {\n name: DSDataTableName,\n slot: DSDataTableSlots.RESIZER,\n})`\n width: 4px;\n height: 100%;\n min-width: unset;\n min-height: unset;\n padding: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n cursor: col-resize;\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n background: transparent;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &:focus-visible {\n background: brand-700;\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.ACTION_CELL,\n})`\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL,\n})`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTENT,\n})`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil, {\n name: DSDataTableName,\n slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ shouldDisplayEditIcon?: boolean }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ minHeight: string }>`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ paddingLeft: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding-left: ${(props) => props.paddingLeft};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled('span', {\n name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\n backgroundColor?: string;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isDisabled?: boolean;\n isDropValid?: boolean;\n shouldDisplayHover?: boolean;\n isDropIndicatorPositionInside?: boolean;\n minHeight?: string;\n gridTemplateColumns?: string;\n}>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: 100%;\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n grid-template-columns: ${(props) =>\n props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : (props.gridTemplateColumns ?? `var(--grid-layout)`)};\n\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n }}\n\n ${({ shouldDisplayHover, theme, isDisabled }) =>\n shouldDisplayHover && !isDisabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n ${GroupHeaderTitle} {\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n }\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n svg {\n fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${color ?? theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n svg {\n fill: ${(props) => props.theme.colors.brand['800']};\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ height?: string | number }>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height) as string};\n `}\n width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number; headerHeightPx: number }>`\n overflow: auto;\n height: 100%;\n /**\n * PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native\n * focus scroll (fired when keyboard navigation focuses a row) lands the focused row below\n * the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;\n * orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.\n */\n scroll-padding-top: ${(props) => props.headerHeightPx}px;\n --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\n colsLayoutStyle: string;\n}>`\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TR,\n})<{\n isExpandable: boolean;\n colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n grid-template-columns: var(--grid-layout);\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TH,\n})<{\n isDraggingActive?: boolean;\n column: DSDataTableT.InternalColumn;\n shouldShowDnD?: boolean;\n}>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n display: flex;\n align-items: center;\n align-self: flex-start;\n padding-top: 2px;\n`;\n\n// Column resize handle \u2014 a plain div narrowed to a 4px grab strip, exposed as role=\"separator\" (or\n// \"slider\", see resizerA11yMode) with a bounded aria-valuenow/min/max/text (PUI-17784). Not a native\n// <button>: \"separator\" is not in <button>'s ARIA-allowed-role-transformation list, and a button's\n// implicit Enter/Space activation is the wrong fit for a value-bearing separator.\nexport const StyledResizer = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.RESIZER,\n})`\n width: 4px;\n height: 100%;\n min-width: unset;\n min-height: unset;\n padding: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n cursor: col-resize;\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n background: transparent;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &:focus-visible {\n background: brand-700;\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.ACTION_CELL,\n})`\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL,\n})`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTENT,\n})`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil, {\n name: DSDataTableName,\n slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ shouldDisplayEditIcon?: boolean }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ minHeight: string }>`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ paddingLeft: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding-left: ${(props) => props.paddingLeft};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled('span', {\n name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\n backgroundColor?: string;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isDisabled?: boolean;\n isDropValid?: boolean;\n shouldDisplayHover?: boolean;\n isDropIndicatorPositionInside?: boolean;\n minHeight?: string;\n gridTemplateColumns?: string;\n}>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: 100%;\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n grid-template-columns: ${(props) =>\n props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : (props.gridTemplateColumns ?? `var(--grid-layout)`)};\n\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n }}\n\n ${({ shouldDisplayHover, theme, isDisabled }) =>\n shouldDisplayHover && !isDisabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n ${GroupHeaderTitle} {\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n }\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n svg {\n fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -10,6 +10,12 @@ const DropIndicatorPosition = {
|
|
|
10
10
|
After: "after",
|
|
11
11
|
Inside: "inside"
|
|
12
12
|
};
|
|
13
|
+
const ResizerA11yMode = {
|
|
14
|
+
Separator: "separator",
|
|
15
|
+
Slider: "slider"
|
|
16
|
+
};
|
|
17
|
+
const DEFAULT_MIN_COLUMN_WIDTH = 70;
|
|
18
|
+
const DEFAULT_MAX_COLUMN_WIDTH = 600;
|
|
13
19
|
const DATA_TESTID = {
|
|
14
20
|
DATA_TABLE_WRAPPER: "data-table-wrapper",
|
|
15
21
|
DATA_TABLE_GLOBAL_EXPAND_CELL: "data-table-global-expand-cell",
|
|
@@ -53,8 +59,11 @@ const EMPTY_FILTER = "ds-empty-filter";
|
|
|
53
59
|
export {
|
|
54
60
|
ColsLayoutStyle,
|
|
55
61
|
DATA_TESTID,
|
|
62
|
+
DEFAULT_MAX_COLUMN_WIDTH,
|
|
63
|
+
DEFAULT_MIN_COLUMN_WIDTH,
|
|
56
64
|
DropIndicatorPosition,
|
|
57
65
|
EMPTY_FILTER,
|
|
66
|
+
ResizerA11yMode,
|
|
58
67
|
momentFormat
|
|
59
68
|
};
|
|
60
69
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/constants.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\nexport const DATA_TESTID = {\n DATA_TABLE_WRAPPER: 'data-table-wrapper',\n DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n DATA_TABLE_RADIO: 'data-table-radio',\n DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n DATA_TABLE_FILTER_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\n DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n DATA_TABLE_FILTER_FREE_TEXT_SEARCH: 'data-table-filter-free-text-search',\n DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n DATA_TABLE_ROW: 'data-table-row',\n DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n DATA_TABLE_CELL: 'data-table-cell',\n DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n DATA_TABLE_TABLE: 'data-table-table',\n DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n DATA_TABLE_HEADER: 'data-table-header',\n DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n} as const;\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n// PUI-17784: exposed accessible role for the column resize control, toggleable for a11y SME evaluation.\nexport const ResizerA11yMode = {\n Separator: 'separator',\n Slider: 'slider',\n} as const;\n\n// PUI-17784: shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize\n// clamp (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// DEFAULT_MIN_COLUMN_WIDTH is not arbitrary: it's the measured worst-case header icon cluster (drag\n// handle + filter + sort, all visible, at the real 13px root font-size) so a column can never be\n// resized small enough for those affordances to overlap \u2014 2px left padding + 16px drag handle +\n// 43.98px right-icons wrapper (filter 19.99px + 4px gap + sort 19.99px) + 4px right padding reserved\n// for the resizer \u2248 66px, rounded up to 70px for a small safety margin. True content-aware minWidth\n// (measuring actual label text) is a separate, deferred follow-up \u2014 see SR-FINDINGS.md.\nexport const DEFAULT_MIN_COLUMN_WIDTH = 70;\nexport const DEFAULT_MAX_COLUMN_WIDTH = 600;\n\nexport const DATA_TESTID = {\n DATA_TABLE_WRAPPER: 'data-table-wrapper',\n DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n DATA_TABLE_RADIO: 'data-table-radio',\n DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n DATA_TABLE_FILTER_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\n DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n DATA_TABLE_FILTER_FREE_TEXT_SEARCH: 'data-table-filter-free-text-search',\n DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n DATA_TABLE_ROW: 'data-table-row',\n DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n DATA_TABLE_CELL: 'data-table-cell',\n DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n DATA_TABLE_TABLE: 'data-table-table',\n DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n DATA_TABLE_HEADER: 'data-table-header',\n DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n} as const;\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAGO,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AACV;AAUO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAEjC,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { buildScreenReaderInstructions } from './buildScreenReaderInstructions.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\n\n/** Screen-reader instructions node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n const { column, isDragOverlay, colSpan } = props;\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n const filters = usePropsStore((state) => state.filters);\n const textWrap = usePropsStore((state) => state.textWrap);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n firstFocuseableColumnHeaderId,\n }),\n [column.id, firstFocuseableColumnHeaderId],\n );\n const reference = useRef<HTMLDivElement | null>(null);\n\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const filterIconRef = useRef<HTMLButtonElement | null>(null);\n const resizeHandlerRef = useRef<
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8EjB,SACE,KADF;AA3EN,SAAgB,aAAa,YAAY,SAAS,cAAc;AAChE,SAAS,YAAY;AACrB,SAAS,cAAc,+BAA+B,yBAAyB;AAC/E,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAE9B,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,qCAAqC;AAC9C,SAAS,kBAAkB,qBAAqB;AAShD,MAAM,eAAoC,EAAE,SAAS,OAAO;AAErD,MAAM,aAAuD,CAAC,UAAU;AAC7E,QAAM,EAAE,QAAQ,eAAe,QAAQ,IAAI;AAC3C,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,4BAA4B,cAAc,CAAC,UAAU,MAAM,yBAAyB;AAC1F,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gCAAgC,cAAc,CAAC,UAAU,MAAM,6BAA6B;AAClG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,6BAA6B;AAAA,EAC3C;AACA,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,cAAc,QAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AACjF,QAAM,gBAAgB,OAA8B,IAAI;AACxD,QAAM,gBAAgB,OAAiC,IAAI;AAC3D,QAAM,mBAAmB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { buildScreenReaderInstructions } from './buildScreenReaderInstructions.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\n\n/** Screen-reader instructions node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n const { column, isDragOverlay, colSpan } = props;\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n const filters = usePropsStore((state) => state.filters);\n const textWrap = usePropsStore((state) => state.textWrap);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n firstFocuseableColumnHeaderId,\n }),\n [column.id, firstFocuseableColumnHeaderId],\n );\n const reference = useRef<HTMLDivElement | null>(null);\n\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const filterIconRef = useRef<HTMLButtonElement | null>(null);\n const resizeHandlerRef = useRef<HTMLDivElement | null>(null);\n const sortRef = useRef<HTMLButtonElement | null>(null);\n const { draggableProps } = useContext(SortableItemContext);\n\n const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n useHeaderCellConfig(props);\n\n const { handleSort, ...handlers } = useHeaderCellHandlers({\n hasFilter,\n column,\n hasDnD,\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n hasSortingCaret,\n isDragOverlay,\n draggableProps,\n referenceColumn: reference,\n });\n\n const rightIcons = useMemo(() => {\n if (!hasRightIcons) return null;\n return (\n <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <FilterMapItem\n column={column}\n referenceColumn={!isDragOverlay ? reference.current : undefined}\n onFiltersChange={onFiltersChange}\n reduxHeader={reduxHeader}\n filters={filters}\n innerRef={filterIconRef}\n />\n {hasSortingCaret && (\n <SortByCaret\n isSortedDesc={column.isSortedDesc}\n onClick={(e) => {\n e.stopPropagation();\n handleSort(e as React.MouseEvent);\n }}\n isReachable={reduxHeader?.withTabStops ?? false}\n column={column}\n reduxHeader={reduxHeader}\n innerRef={sortRef}\n />\n )}\n </StyledHeaderRightIconsWrapper>\n );\n }, [\n hasRightIcons,\n getOwnerProps,\n getOwnerPropsArguments,\n column,\n isDragOverlay,\n onFiltersChange,\n reduxHeader,\n filters,\n hasSortingCaret,\n handleSort,\n ]);\n\n const DnDHandleComponent = useMemo(\n () => (\n <Grid mr=\"2px\" height=\"fit-content\" py=\"2px\" mt=\"2px\" alignItems=\"flex-start\" style={{ position: 'relative' }}>\n <StyledFocusWithin hideFocus={isDragging}>\n <DragHandle\n key={column.id}\n innerRef={dragHandleRef}\n isReachable={reduxHeader?.withTabStops ?? false}\n id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n isDragOverlay={isDragOverlay}\n isDisabled={disabledRows[column.id]}\n />\n </StyledFocusWithin>\n </Grid>\n ),\n [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n );\n\n const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n const instructions = buildScreenReaderInstructions({\n colSpan,\n draggable: dragAndDropColumns && column.disableDnD !== true,\n filterable: hasFilter,\n sortable: column.canSort ?? false,\n resizable: shouldShowResize,\n });\n\n const headTh = (\n <StyledHeadTh\n column={column}\n onClick={handleSort}\n {...handlers}\n role=\"columnheader\"\n {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n : {})}\n aria-describedby={screenReaderInstructionsId}\n aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n tabIndex={column.isFocuseable === false ? -1 : 0}\n isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n shouldShowDnD={shouldShowDnD}\n innerRef={reference}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Grid width=\"100%\" cols={hCols}>\n {shouldShowDnD && DnDHandleComponent}\n <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n {rightIcons}\n {shouldShowResize && (\n <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n )}\n </Grid>\n {/* Screen-reader instructions referenced by aria-describedby. display:none keeps them out of\n the header's name-from-content (so they are not read twice) while still being announced as\n the description \u2014 the same pattern used for filterable/sortable columns. */}\n <span id={screenReaderInstructionsId} style={HIDDEN_STYLE}>\n {instructions}\n </span>\n </StyledHeadTh>\n );\n\n return headTh;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect } from "react";
|
|
4
4
|
import { StyledResizer } from "../../styled.js";
|
|
5
5
|
import { useHeaderResizer } from "./useHeaderResizer.js";
|
|
6
6
|
import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
7
|
+
import { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, ResizerA11yMode } from "../../configs/constants.js";
|
|
7
8
|
const stopPropagation = (e) => e.stopPropagation();
|
|
8
9
|
const HIDDEN_STYLE = { display: "none" };
|
|
9
|
-
const SR_ONLY_STYLE = {
|
|
10
|
-
position: "absolute",
|
|
11
|
-
width: 1,
|
|
12
|
-
height: 1,
|
|
13
|
-
overflow: "hidden",
|
|
14
|
-
clip: "rect(0 0 0 0)",
|
|
15
|
-
clipPath: "inset(50%)",
|
|
16
|
-
whiteSpace: "nowrap"
|
|
17
|
-
};
|
|
18
10
|
const RESIZE_INSTRUCTION = "Use the left and right arrow keys to increase or decrease the column width.";
|
|
11
|
+
const bracketBound = (configuredBound, columnWidth, pickWider) => pickWider(configuredBound, columnWidth ?? configuredBound);
|
|
19
12
|
const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
20
|
-
const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({
|
|
13
|
+
const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({
|
|
21
14
|
columnId: column.id,
|
|
22
15
|
innerRef
|
|
23
16
|
});
|
|
24
17
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
18
|
+
const resizerA11yMode = usePropsStore((state) => state.resizerA11yMode);
|
|
25
19
|
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
26
20
|
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
27
21
|
const instructionId = `resize-instr-${column.id}`.replace(/ /g, "");
|
|
22
|
+
const isSlider = resizerA11yMode === ResizerA11yMode.Slider;
|
|
23
|
+
const role = isSlider ? "slider" : "separator";
|
|
24
|
+
const orientation = isSlider ? "horizontal" : "vertical";
|
|
25
|
+
const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
|
|
26
|
+
const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
|
|
27
|
+
const valueText = columnWidth === void 0 ? void 0 : `${columnWidth} pixels`;
|
|
28
28
|
useEffect(() => {
|
|
29
29
|
const addEvents = () => {
|
|
30
30
|
document.addEventListener("mousemove", onResizeHandler);
|
|
@@ -42,31 +42,33 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
42
42
|
else removeEvents();
|
|
43
43
|
return removeEvents;
|
|
44
44
|
}, [isResizing, onResizeHandler, onResizeEnd]);
|
|
45
|
-
return /* @__PURE__ */ jsxs(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
45
|
+
return /* @__PURE__ */ jsxs(
|
|
46
|
+
StyledResizer,
|
|
47
|
+
{
|
|
48
|
+
role,
|
|
49
|
+
"aria-orientation": orientation,
|
|
50
|
+
"aria-valuenow": columnWidth,
|
|
51
|
+
"aria-valuemin": valueMin,
|
|
52
|
+
"aria-valuemax": valueMax,
|
|
53
|
+
"aria-valuetext": valueText,
|
|
54
|
+
"aria-labelledby": nameId,
|
|
55
|
+
"aria-describedby": instructionId,
|
|
56
|
+
"aria-hidden": isReachable ? void 0 : true,
|
|
57
|
+
tabIndex: isReachable ? 0 : -1,
|
|
58
|
+
innerRef,
|
|
59
|
+
onMouseDown: onResizeStart,
|
|
60
|
+
onTouchStart: onResizeStart,
|
|
61
|
+
onMouseUp: onResizeEnd,
|
|
62
|
+
onTouchEnd: onResizeEnd,
|
|
63
|
+
onClick: stopPropagation,
|
|
64
|
+
onKeyDown: handleKeyboardResize,
|
|
65
|
+
getOwnerProps,
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx("span", { id: nameId, style: HIDDEN_STYLE, children: resizeLabel }),
|
|
68
|
+
/* @__PURE__ */ jsx("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
);
|
|
70
72
|
};
|
|
71
73
|
export {
|
|
72
74
|
HeaderResizer
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/**
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, ResizerA11yMode } from '../../configs/constants.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/** Name/instruction nodes \u2014 referenced via aria-labelledby/aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\nconst RESIZE_INSTRUCTION = 'Use the left and right arrow keys to increase or decrease the column width.';\n\n/**\n * PUI-17784: brackets the announced bounds around the actual current width, not just the configured\n * ones. The resize clamp (narrow() in useHeaderResizer.ts) only bounds INTERACTIVE resizing \u2014 an\n * explicit column.width set outside [minWidth, maxWidth] renders as-is on first paint (pre-existing,\n * unrelated to this ticket), so columnWidth can start below configuredMin or above configuredMax.\n * Reporting aria-valuenow outside [aria-valuemin, aria-valuemax] is an internally-inconsistent ARIA\n * value \u2014 exactly the class of meaningless-value problem this ticket exists to fix, just in a\n * narrower corner. Widening the bound to include the real value (rather than clamping the value to a\n * bound the column isn't actually honoring) keeps the announcement accurate; it self-corrects to the\n * configured bound on the first interactive resize, since narrow() clamps from then on.\n */\nconst bracketBound = (configuredBound: number, columnWidth: number | undefined, pickWider: typeof Math.min) =>\n pickWider(configuredBound, columnWidth ?? configuredBound);\n\nexport const HeaderResizer: React.ComponentType<{\n column: DSDataTableT.InternalColumn;\n innerRef: React.MutableRefObject<HTMLDivElement | null>;\n isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } =\n useHeaderResizer({\n columnId: column.id,\n innerRef,\n });\n const getOwnerProps = usePropsStore((store) => store.get);\n const resizerA11yMode = usePropsStore((state) => state.resizerA11yMode);\n\n const resizeLabel = typeof column.Header === 'string' ? `Resize ${column.Header} column` : 'Resize column';\n const nameId = `resize-name-${column.id}`.replace(/ /g, '');\n const instructionId = `resize-instr-${column.id}`.replace(/ /g, '');\n\n const isSlider = resizerA11yMode === ResizerA11yMode.Slider;\n const role = isSlider ? 'slider' : 'separator';\n // A column-width resizer is visually a vertical bar between two columns (separator's own axis), but\n // a slider's orientation describes its interaction/track axis \u2014 our ArrowLeft/ArrowRight interaction\n // maps to \"horizontal\" under that model. Flagged for empirical AT verification (VoiceOver/NVDA)\n // before sign-off \u2014 see SR-FINDINGS.md.\n const orientation = isSlider ? 'horizontal' : 'vertical';\n const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);\n const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);\n const valueText = columnWidth === undefined ? undefined : `${columnWidth} pixels`;\n\n // This setups the event listeners for the resize (only for mouse)\n // It reacts to the isResizing state change\n useEffect(() => {\n const addEvents = () => {\n document.addEventListener('mousemove', onResizeHandler);\n document.addEventListener('touchmove', onResizeHandler);\n document.addEventListener('mouseup', onResizeEnd);\n document.addEventListener('touchend', onResizeEnd);\n };\n const removeEvents = () => {\n document.removeEventListener('mousemove', onResizeHandler);\n document.removeEventListener('touchmove', onResizeHandler);\n document.removeEventListener('mouseup', onResizeEnd);\n document.removeEventListener('touchend', onResizeEnd);\n };\n\n if (isResizing) addEvents();\n else removeEvents();\n\n // just in case the component is unmounted\n return removeEvents;\n }, [isResizing, onResizeHandler, onResizeEnd]);\n\n return (\n <StyledResizer\n role={role}\n aria-orientation={orientation}\n aria-valuenow={columnWidth}\n aria-valuemin={valueMin}\n aria-valuemax={valueMax}\n aria-valuetext={valueText}\n aria-labelledby={nameId}\n aria-describedby={instructionId}\n aria-hidden={isReachable ? undefined : true}\n tabIndex={isReachable ? 0 : -1}\n innerRef={innerRef}\n onMouseDown={onResizeStart}\n onTouchStart={onResizeStart}\n onMouseUp={onResizeEnd}\n onTouchEnd={onResizeEnd}\n onClick={stopPropagation}\n onKeyDown={handleKeyboardResize}\n getOwnerProps={getOwnerProps}\n >\n {/*\n PUI-17784: role=\"application\" is discarded entirely (was an interim mitigation for a\n button-activation-contract concern that no longer applies to a value-bearing separator/slider).\n The resize handle is a plain div exposed as role=\"separator\" by default, or role=\"slider\" via\n the resizerA11yMode prop \u2014 a temporary toggle so the a11y SME can compare both before the team\n commits permanently. aria-valuenow/min/max/text are restored: the resize now has a genuine\n bounded range (column.minWidth/maxWidth, defaulting to DEFAULT_MIN_COLUMN_WIDTH/\n DEFAULT_MAX_COLUMN_WIDTH), which is what makes the value meaningful under either role.\n aria-hidden/tabIndex are unchanged \u2014 still driven by the same `isReachable` flag (hidden while\n the header is not in child-navigation mode) so the control's name is never folded into the\n header's announcement, and it's never a focusable aria-hidden element. How to operate it is\n conveyed via aria-describedby, unchanged.\n\n Name via aria-labelledby -> a hidden span, unconditionally for both modes (see SR-FINDINGS.md /\n design.md D3). A plain aria-label was considered for slider mode (separator's role does NOT\n reliably support name-from-author via aria-label per finding #5, while a Chromium AX probe\n found slider's computed name resolves identically either way) \u2014 but the label text here is\n per-column (\"Resize {column} column\"), never the generic string QA's existing e2e selector\n checks for, so aria-label would not have actually helped that selector regardless of mechanism.\n Kept on the single proven mechanism (aria-labelledby, verified with VoiceOver for separator \u2014\n finding #9) rather than take on an unverified-with-real-AT risk for no practical gain.\n */}\n <span id={nameId} style={HIDDEN_STYLE}>\n {resizeLabel}\n </span>\n <span id={instructionId} style={HIDDEN_STYLE}>\n {RESIZE_INSTRUCTION}\n </span>\n </StyledResizer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+EnB,SA0CE,KA1CF;AA/EJ,SAAgB,iBAAiB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,0BAA0B,uBAAuB;AAEpF,MAAM,kBAAkB,CAAC,MAA8C,EAAE,gBAAgB;AAGzF,MAAM,eAAoC,EAAE,SAAS,OAAO;AAC5D,MAAM,qBAAqB;AAa3B,MAAM,eAAe,CAAC,iBAAyB,aAAiC,cAC9E,UAAU,iBAAiB,eAAe,eAAe;AAEpD,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,aAAa,eAAe,aAAa,iBAAiB,qBAAqB,IACjG,iBAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AAEtE,QAAM,cAAc,OAAO,OAAO,WAAW,WAAW,UAAU,OAAO,MAAM,YAAY;AAC3F,QAAM,SAAS,eAAe,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAC1D,QAAM,gBAAgB,gBAAgB,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAElE,QAAM,WAAW,oBAAoB,gBAAgB;AACrD,QAAM,OAAO,WAAW,WAAW;AAKnC,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,YAAY,gBAAgB,SAAY,SAAY,GAAG,WAAW;AAIxE,YAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB;AAAA,MAChB,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa,cAAc,SAAY;AAAA,MACvC,UAAU,cAAc,IAAI;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MAwBA;AAAA,4BAAC,UAAK,IAAI,QAAQ,OAAO,cACtB,uBACH;AAAA,QACA,oBAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|