@elliemae/ds-data-table 3.53.0-alpha.1 → 3.53.0-alpha.2

package/dist/cjs/styled.js

@@ -53,14 +53,14 @@ __export(styled_exports, {
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_helpers = require("./helpers/index.js");
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("./constants/index.js");
+var import_constants2 = require("./configs/constants.js");
 var import_zIndexInternalConfig = require("./configs/zIndexInternalConfig.js");
-var import_constants = require("./configs/constants.js");
-var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
-var import_DSDataTableDefinitions = require("./DSDataTableDefinitions.js");
+var import_helpers = require("./helpers/index.js");
 const styledFocusCss = ({ theme }, color) => `
 &:after {
   display: block;
@@ -83,22 +83,22 @@ const StyledFocusWithin = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   }
 `;
 const StyledDataTableWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.ROOT
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.ROOT
 })`
   width: ${(props) => (0, import_helpers.sizeToCss)(props.width ?? " 100%")};
   height: ${(props) => (0, import_helpers.sizeToCss)(props.height ?? " 100%")};
 `;
 const StyledDataTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.CONTENT_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.CONTENT_WRAPPER
 })`
   user-select: ${({ noSelectionAllowed }) => noSelectionAllowed ? "none" : "auto"};
   width: 100%;
 `;
 const StyledTableWrapper = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.TABLE_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.TABLE_WRAPPER
 })`
   display: inline-block;
   border-spacing: 0;
@@ -108,14 +108,14 @@ const StyledTableWrapper = (0, import_ds_system.styled)("div", {
   height: 100%;
 `;
 const StyledPaginationWrapper = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.PAGINATION_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.PAGINATION_WRAPPER
 })`
   width: 100%;
 `;
 const StyledTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.TABLE_CONTENT_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.TABLE_CONTENT_WRAPPER
 })`
   position: relative;
   ${({ height = "auto" }) => `
@@ -124,8 +124,8 @@ const StyledTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
   width: var(--total-width);
 `;
 const StyledVirtualListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.VIRTUAL_LIST_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.VIRTUAL_LIST_WRAPPER
 })`
   overflow: auto;
   height: 100%;
@@ -133,8 +133,8 @@ const StyledVirtualListWrapper = (0, import_ds_system.styled)(import_ds_grid.Gri
   --total-width: ${(props) => (0, import_helpers.sizeToCss)(props.totalColumnsWidth)};
 `;
 const StyledHeadWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.HEAD_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.HEAD_WRAPPER
 })`
   position: sticky;
   top: 0;
@@ -143,17 +143,17 @@ const StyledHeadWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   width: 100%;
 `;
 const StyledHeadTr = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.HEAD_TR
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.HEAD_TR
 })`
-  ${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Auto ? "width:100%" : ""};
+  ${(props) => props.colsLayoutStyle === import_constants2.ColsLayoutStyle.Auto ? "width:100%" : ""};
   grid-template-columns: var(--grid-layout);
   border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
   grid-auto-flow: column;
 `;
 const StyledHeadTh = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.HEAD_TH
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.HEAD_TH
 })`
   min-height: 24px;
   line-height: normal;
@@ -202,8 +202,8 @@ const StyledHeadTh = (0, import_ds_system.styled)("div", {
   }
 `;
 const StyledHeaderRightIconsWrapper = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER
 })`
   height: 100%;
   display: flex;
@@ -211,8 +211,8 @@ const StyledHeaderRightIconsWrapper = (0, import_ds_system.styled)("div", {
   max-height: 24px;
 `;
 const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.RESIZER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.RESIZER
 })`
   width: 4px;
   height: 100%;
@@ -269,8 +269,8 @@ const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSI
   }
 `;
 const StyledActionCell = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.ACTION_CELL
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.ACTION_CELL
 })`
   position: sticky;
   display: inline-block;
@@ -279,8 +279,8 @@ const StyledActionCell = (0, import_ds_system.styled)("div", {
   background: white;
 `;
 const StyledCell = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.CELL
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.CELL
 })`
   ${import_helpers.cellPadding}
   display: flex;
@@ -289,8 +289,8 @@ const StyledCell = (0, import_ds_system.styled)("div", {
   position: relative;
 `;
 const StyledCellContent = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.CELL_CONTENT
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.CELL_CONTENT
 })`
   display: grid;
   justify-self: flex-end;
@@ -300,12 +300,12 @@ const StyledCellContent = (0, import_ds_system.styled)("div", {
   align-items: center;
 `;
 const StyledPencilIcon = (0, import_ds_system.styled)(import_ds_icons.EditPencil, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.PENCIL_ICON
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.PENCIL_ICON
 })``;
 const StyledEditableContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.EDITABLE_CONTAINER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.EDITABLE_CONTAINER
 })`
   width: 100%;
   height: 100%;
@@ -327,8 +327,8 @@ const StyledEditableContainer = (0, import_ds_system.styled)(import_ds_grid.Grid
   outline: none;
 `;
 const StyledFullsizeGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.FULLSIZE_GRID
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.FULLSIZE_GRID
 })`
   position: relative;
   z-index: ${import_zIndexInternalConfig.ZIndexDataTable.ROW};
@@ -337,8 +337,8 @@ const StyledFullsizeGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   height: ${(props) => props.height || "auto"};
 `;
 const GroupHeaderContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.GROUP_HEADER_CONTAINER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.GROUP_HEADER_CONTAINER
 })`
   position: relative;
   background-color: ${({ theme }) => theme.colors.brand[200]};
@@ -347,16 +347,16 @@ const GroupHeaderContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};
 `;
 const GroupHeaderTitle = (0, import_ds_system.styled)("span", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.GROUP_HEADER_TITLE
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.GROUP_HEADER_TITLE
 })`
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   font-size: 12px;
   color: ${(props) => props.theme.colors.neutral[700]};
 `;
 const StyledCellContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.CELL_CONTAINER
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.CELL_CONTAINER
 })`
   position: relative;
   z-index: 2;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.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 }>`\n  overflow: auto;\n  height: 100%;\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  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\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"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSInputText } from '@elliemae/ds-form-input-text';\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 }>`\n  overflow: auto;\n  height: 100%;\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  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\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"],
+  "mappings": "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",
+  "names": ["import_constants"]
 }

package/dist/esm/DataTable.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { withZustand } from "@elliemae/ds-zustand-helpers";
+import { describe } from "@elliemae/ds-props-helpers";
 import { MainContent } from "./parts/MainContent.js";
 import { config } from "./configs/useStore/index.js";
-import { describe } from "@elliemae/ds-props-helpers";
 import { DSDataTablePropTypesSchema } from "./react-desc-prop-types.js";
 const DataTable = withZustand(MainContent, config);
 DataTable.displayName = "DataTable";

package/dist/esm/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -6,7 +6,7 @@ import { styled, css } from "@elliemae/ds-system";
 import { StyledFocusWithin } from "../../../styled.js";
 import { DATA_TESTID } from "../../../configs/constants.js";
 import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
-import { DSDataTableName, DSDataTableSlots } from "../../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../../constants/index.js";
 const disabledCaret = css`
   cursor: not-allowed;
   pointer-events: none;

package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst disabledCaret = css`\n  cursor: not-allowed;\n  pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n  disabled?: boolean;\n}>`\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ${({ disabled }) => disabled && disabledCaret}\n  z-index: 1; // to be clickable over right cell padding that covers the whole cell (hack to satisfy the design)\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n  <ArrowheadRight\n    size=\"s\"\n    color={['brand-primary', '600']}\n    data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n    style={{ transform: 'rotate(45deg)' }}\n  />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: () => {\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\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        isGlobal: true,\n      }),\n      [],\n    );\n    const allExpandable = useMemo(() => {\n      const expandable: Record<string, boolean> = {};\n      allDataFlattened.forEach((row) => {\n        const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n        if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n      });\n      return expandable;\n    }, [allDataFlattened, disabledRows]);\n\n    const isAllRowsExpanded = useMemo(\n      () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n      [allExpandable, expandedRows],\n    );\n\n    const onExpandedAllHandler = useCallback(() => {\n      if (isAllRowsExpanded) onRowExpand({}, 'All');\n      else onRowExpand({ ...allExpandable }, 'All');\n    }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          onExpandedAllHandler();\n          e.preventDefault();\n        }\n      },\n      [onExpandedAllHandler],\n    );\n\n    const GlobalExpandIcon = useMemo(() => {\n      if (isAllRowsExpanded) return <ArrowDown />;\n      if (Object.keys(expandedRows).length) return <ArrowMixed />;\n      return <ArrowRight />;\n    }, [expandedRows, isAllRowsExpanded]);\n\n    return (\n      <StyledFocusWithin>\n        <StyledSpan\n          role=\"button\"\n          tabIndex={0}\n          title={\n            isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n              ? `${noResultsMessage}. ${\n                  noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n                } Toggle All Rows Expanded`\n              : 'Toggle All Rows Expanded'\n          }\n          onClick={onExpandedAllHandler}\n          onKeyDown={onKeyDownHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n          aria-expanded={isAllRowsExpanded}\n          style={{ width: '24px', height: '24px' }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n    const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = useCallback(\n      () => ({\n        isGlobal: false,\n      }),\n      [],\n    );\n    const uniqueId = row.uid;\n\n    const isExpanded = !!expandedRows[uniqueId];\n\n    const shouldPrintCaret = useMemo(\n      () =>\n        (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n        row.original.tableRowDetails ||\n        row.original.dimsumHeaderValue,\n      [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n    );\n\n    const onRowExpandHandler = useCallback(\n      (e: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabledRows[row.uid]) return;\n        e.stopPropagation(); // to prevent on row click\n        const newExpandedRows = { ...expandedRows };\n        if (newExpandedRows[uniqueId]) {\n          delete newExpandedRows[uniqueId];\n        } else {\n          newExpandedRows[uniqueId] = true;\n        }\n        onRowExpand(newExpandedRows, uniqueId);\n      },\n      [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n    );\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onRowExpandHandler(e);\n        }\n      },\n      [onRowExpandHandler],\n    );\n\n    const isDragging = draggableProps && draggableProps.isDragging;\n    const isDragOverlay = dragAndDropRows && !draggableProps;\n\n    const indentStyle: React.CSSProperties = useMemo(\n      () => ({\n        marginLeft: `${row.depth * 32}px`,\n        marginRight: '12px',\n        paddingLeft: '3px',\n        paddingRight: '2px',\n        position: 'relative',\n        height: '100%',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n      [row.depth],\n    );\n\n    const PureCaretIcon = useMemo(() => {\n      const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n      return (\n        <Caret\n          data-is-col-expanded={isExpanded}\n          data-role=\"row-expander-col\"\n          color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n        />\n      );\n    }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n    if (shouldPrintCaret)\n      return (\n        <StyledFocusWithin style={indentStyle}>\n          <StyledSpan\n            role=\"button\"\n            key={`${row.uid}-expand-button`}\n            title=\"Toggle Row Expanded\"\n            onClick={onRowExpandHandler}\n            onKeyDown={onKeyDownHandler}\n            innerRef={cell.ref}\n            tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n            data-testid=\"data-table-row-expand-cell\"\n            aria-expanded={isExpanded}\n            disabled={disabledRows[row.uid]}\n            aria-disabled={disabledRows[row.uid]}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {PureCaretIcon}\n          </StyledSpan>\n        </StyledFocusWithin>\n      );\n\n    if (row.depth !== 0)\n      return (\n        <span style={indentStyle}>\n          <ArrowShortReturn\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n            style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n            color={['brand-primary', '600']}\n          />\n        </span>\n      );\n\n    return <div style={{ width: '36px' }} />;\n  },\n  textWrap: 'wrap',\n  canResize: false,\n  width: 25,\n  padding: 0,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../constants/index.js';\n\nconst disabledCaret = css`\n  cursor: not-allowed;\n  pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n  disabled?: boolean;\n}>`\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ${({ disabled }) => disabled && disabledCaret}\n  z-index: 1; // to be clickable over right cell padding that covers the whole cell (hack to satisfy the design)\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n  <ArrowheadRight\n    size=\"s\"\n    color={['brand-primary', '600']}\n    data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n    style={{ transform: 'rotate(45deg)' }}\n  />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n  <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: () => {\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n    const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n    const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\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        isGlobal: true,\n      }),\n      [],\n    );\n    const allExpandable = useMemo(() => {\n      const expandable: Record<string, boolean> = {};\n      allDataFlattened.forEach((row) => {\n        const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n        if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n      });\n      return expandable;\n    }, [allDataFlattened, disabledRows]);\n\n    const isAllRowsExpanded = useMemo(\n      () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n      [allExpandable, expandedRows],\n    );\n\n    const onExpandedAllHandler = useCallback(() => {\n      if (isAllRowsExpanded) onRowExpand({}, 'All');\n      else onRowExpand({ ...allExpandable }, 'All');\n    }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          onExpandedAllHandler();\n          e.preventDefault();\n        }\n      },\n      [onExpandedAllHandler],\n    );\n\n    const GlobalExpandIcon = useMemo(() => {\n      if (isAllRowsExpanded) return <ArrowDown />;\n      if (Object.keys(expandedRows).length) return <ArrowMixed />;\n      return <ArrowRight />;\n    }, [expandedRows, isAllRowsExpanded]);\n\n    return (\n      <StyledFocusWithin>\n        <StyledSpan\n          role=\"button\"\n          tabIndex={0}\n          title={\n            isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n              ? `${noResultsMessage}. ${\n                  noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n                } Toggle All Rows Expanded`\n              : 'Toggle All Rows Expanded'\n          }\n          onClick={onExpandedAllHandler}\n          onKeyDown={onKeyDownHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n          aria-expanded={isAllRowsExpanded}\n          style={{ width: '24px', height: '24px' }}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n    const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n    const expandedRows = usePropsStore((state) => state.expandedRows);\n    const onRowExpand = usePropsStore((state) => state.onRowExpand);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = useCallback(\n      () => ({\n        isGlobal: false,\n      }),\n      [],\n    );\n    const uniqueId = row.uid;\n\n    const isExpanded = !!expandedRows[uniqueId];\n\n    const shouldPrintCaret = useMemo(\n      () =>\n        (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n        row.original.tableRowDetails ||\n        row.original.dimsumHeaderValue,\n      [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n    );\n\n    const onRowExpandHandler = useCallback(\n      (e: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabledRows[row.uid]) return;\n        e.stopPropagation(); // to prevent on row click\n        const newExpandedRows = { ...expandedRows };\n        if (newExpandedRows[uniqueId]) {\n          delete newExpandedRows[uniqueId];\n        } else {\n          newExpandedRows[uniqueId] = true;\n        }\n        onRowExpand(newExpandedRows, uniqueId);\n      },\n      [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n    );\n\n    const onKeyDownHandler = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onRowExpandHandler(e);\n        }\n      },\n      [onRowExpandHandler],\n    );\n\n    const isDragging = draggableProps && draggableProps.isDragging;\n    const isDragOverlay = dragAndDropRows && !draggableProps;\n\n    const indentStyle: React.CSSProperties = useMemo(\n      () => ({\n        marginLeft: `${row.depth * 32}px`,\n        marginRight: '12px',\n        paddingLeft: '3px',\n        paddingRight: '2px',\n        position: 'relative',\n        height: '100%',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n      [row.depth],\n    );\n\n    const PureCaretIcon = useMemo(() => {\n      const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n      return (\n        <Caret\n          data-is-col-expanded={isExpanded}\n          data-role=\"row-expander-col\"\n          color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n        />\n      );\n    }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n    if (shouldPrintCaret)\n      return (\n        <StyledFocusWithin style={indentStyle}>\n          <StyledSpan\n            role=\"button\"\n            key={`${row.uid}-expand-button`}\n            title=\"Toggle Row Expanded\"\n            onClick={onRowExpandHandler}\n            onKeyDown={onKeyDownHandler}\n            innerRef={cell.ref}\n            tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n            data-testid=\"data-table-row-expand-cell\"\n            aria-expanded={isExpanded}\n            disabled={disabledRows[row.uid]}\n            aria-disabled={disabledRows[row.uid]}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {PureCaretIcon}\n          </StyledSpan>\n        </StyledFocusWithin>\n      );\n\n    if (row.depth !== 0)\n      return (\n        <span style={indentStyle}>\n          <ArrowShortReturn\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n            style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n            color={['brand-primary', '600']}\n          />\n        </span>\n      );\n\n    return <div style={{ width: '36px' }} />;\n  },\n  textWrap: 'wrap',\n  canResize: false,\n  width: 25,\n  padding: 0,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -6,7 +6,7 @@ import { styled } from "@elliemae/ds-system";
 import { DATA_TESTID } from "../../../configs/constants.js";
 import { ScreenReaderOnly } from "../../../styled.js";
 import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
-import { DSDataTableName, DSDataTableSlots } from "../../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../../constants/index.js";
 const CenteredContent = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`
   display: flex;
   height: 100%;

package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const getOwnerProps = usePropsStore((store) => store.get);\n\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const { uid } = row;\n    const selectedState = !!selection?.[uid];\n\n    const onChangeHandler = useCallback(\n      (newValue: string, e: React.ChangeEvent) => {\n        // in single select we only allow one item to be selected\n        onSelectionChange({ [uid]: !selectedState }, uid, e);\n      },\n      [onSelectionChange, selectedState, uid],\n    );\n\n    return (\n      <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation} getOwnerProps={getOwnerProps}>\n        <DSControlledRadio\n          aria-checked={selectedState}\n          aria-disabled={disabledRows[row.uid]}\n          title=\"Toggle row selected\"\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          value={uid}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </CenteredContent>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../constants/index.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn = {\n  // Build our singleSelecter column\n  id: 'singleSelecter', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n  Cell: ({ cell, row, isRowSelected }) => {\n    const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n    const getOwnerProps = usePropsStore((store) => store.get);\n\n    const selection = usePropsStore((state) => state.selection);\n    const disabledRows = usePropsStore((state) => state.disabledRows);\n    const { uid } = row;\n    const selectedState = !!selection?.[uid];\n\n    const onChangeHandler = useCallback(\n      (newValue: string, e: React.ChangeEvent) => {\n        // in single select we only allow one item to be selected\n        onSelectionChange({ [uid]: !selectedState }, uid, e);\n      },\n      [onSelectionChange, selectedState, uid],\n    );\n\n    return (\n      <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation} getOwnerProps={getOwnerProps}>\n        <DSControlledRadio\n          aria-checked={selectedState}\n          aria-disabled={disabledRows[row.uid]}\n          title=\"Toggle row selected\"\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          value={uid}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </CenteredContent>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 4,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n  ref: createRef(),\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACuBP;AAvBhB,SAAgB,WAAW,mBAAmB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7G,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAkD;AAAA;AAAA,EAE7D,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,oBAAiB,kCAAoB;AAAA,EACpD,MAAM,CAAC,EAAE,MAAM,KAAK,cAAc,MAAM;AACtC,UAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,UAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY,GAAG;AAEvC,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAkB,MAAyB;AAE1C,0BAAkB,EAAE,CAAC,GAAG,GAAG,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,MACrD;AAAA,MACA,CAAC,mBAAmB,eAAe,GAAG;AAAA,IACxC;AAEA,WACE,oBAAC,mBAAgB,SAAS,oBAAoB,WAAW,oBAAoB,eAC3E;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd,iBAAe,aAAa,IAAI,GAAG;AAAA,QACnC,OAAM;AAAA,QACN,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,OAAO;AAAA,QACP,UAAU,gBAAgB,IAAI;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK,UAAU;AACjB;",
   "names": []
 }

package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import React2, { useState, useCallback } from "react";
 import { styled } from "@elliemae/ds-system";
 import { EditableCell } from "../../../exported-related/index.js";
 import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
-import { DSDataTableName, DSDataTableSlots } from "../../../DSDataTableDefinitions.js";
+import { DSDataTableName, DSDataTableSlots } from "../../../constants/index.js";
 const StyledInput = styled("input", { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`
   outline: none;
   :focus {
@@ -16,6 +16,7 @@ const TextEditableCell = (props) => {
   const { cell, DefaultCellRender, isRowSelected } = props;
   const onCellValueChange = usePropsStore((state) => state.onCellValueChange);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => cell, [cell]);
   const [value, setValue] = useState(cell.value);
   const handleOnChange = useCallback((e) => {
     const {
@@ -55,7 +56,8 @@ const TextEditableCell = (props) => {
           onChange: handleOnChange,
           onBlur: handleOnBlur,
           autoFocus: true,
-          getOwnerProps
+          getOwnerProps,
+          getOwnerPropsArguments
         }
       ),
       cell,

package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [value, setValue] = useState<string>(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current?.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value as string);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef?.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n          getOwnerProps={getOwnerProps}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0Df;AAzDR,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKzD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,KAAK,KAAe;AAE/D,QAAM,iBAAiB,YAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../constants/index.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n  outline: none;\n  :focus {\n    border: 2px solid ${(props) => props.theme.colors.brand[700]};\n  }\n  max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n  const { cell, DefaultCellRender, isRowSelected } = props;\n\n  const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const [value, setValue] = useState<string>(cell.value as string);\n\n  const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value: tValue },\n    } = e;\n    setValue(tValue);\n  }, []);\n\n  const handleOnBlur = useCallback(() => {\n    const property = cell.column.id;\n    const rowIndex = cell.row.index;\n    onCellValueChange({ value, property, rowIndex });\n  }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter') {\n        cell.ref.current?.focus();\n        // will exec on blur callback from input and save new value\n      }\n      if (e.code === 'Escape') {\n        setValue(cell.value as string);\n        const auxRef = cell.ref.current;\n        // this prevent the on blur\n        setTimeout(() => {\n          auxRef?.focus();\n        });\n      }\n    },\n    [cell],\n  );\n  return (\n    <EditableCell\n      StandardRender={DefaultCellRender}\n      EditableRenderer={\n        <StyledInput\n          value={value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          onBlur={handleOnBlur}\n          autoFocus\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      }\n      cell={cell}\n      isRowSelected={isRowSelected}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Df;AA1DR,OAAOA,UAAS,UAAU,mBAAmB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKzD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,oBAAoB,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,KAAK,KAAe;AAE/D,QAAM,iBAAiB,YAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA,UACT;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/addons/Editables/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { TextEditableCell } from "./TextEditableCell/TextEditableCell.js";
 import { ComboboxEditableCell } from "./ComboboxEditableCell/ComboboxEditableCell.js";
+import { TextEditableCell } from "./TextEditableCell/TextEditableCell.js";
 const outOfTheBoxEditables = {
   "ds-edit-text": { EditableComponent: TextEditableCell },
   "ds-edit-combobox": {

package/dist/esm/addons/Editables/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/addons/Editables/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell.js';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell.js';\nimport type { DSDataTableT } from 'react-desc-prop-types.js';\n\nexport const outOfTheBoxEditables: Record<\n  string,\n  { EditableComponent: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> }\n> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAG9B,MAAM,uBAGT;AAAA,EACF,gBAAgB,EAAE,mBAAmB,iBAAiB;AAAA,EACtD,oBAAoB;AAAA,IAClB,mBAAmB;AAAA,EACrB;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSDataTableT } from 'react-desc-prop-types.js';\nimport { ComboboxEditableCell } from './ComboboxEditableCell/ComboboxEditableCell.js';\nimport { TextEditableCell } from './TextEditableCell/TextEditableCell.js';\n\nexport const outOfTheBoxEditables: Record<\n  string,\n  { EditableComponent: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> }\n> = {\n  'ds-edit-text': { EditableComponent: TextEditableCell },\n  'ds-edit-combobox': {\n    EditableComponent: ComboboxEditableCell,\n  },\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAE1B,MAAM,uBAGT;AAAA,EACF,gBAAgB,EAAE,mBAAmB,iBAAiB;AAAA,EACtD,oBAAoB;AAAA,IAClB,mBAAmB;AAAA,EACrB;AACF;",
   "names": []
 }

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -18,6 +18,7 @@ const idPreffix = "datatable-currency-range";
 const CurrencyRangeFilter = (props) => {
   const {
     column,
+    referenceColumn,
     filterValue = { from: null, to: null },
     reduxHeader,
     patchHeader,
@@ -28,8 +29,8 @@ const CurrencyRangeFilter = (props) => {
   const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? "", opts));
   const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? "", opts));
   useEffect(() => {
-    setFrom(getNumberMaskedValue(filterValue.from ?? "", opts));
-    setTo(getNumberMaskedValue(filterValue.to ?? "", opts));
+    setFrom(filterValue.from ?? "");
+    setTo(filterValue.to ?? "");
   }, [filterValue.from, filterValue.to]);
   const ref = useRef(null);
   const shouldFocus = useRef(true);
@@ -128,7 +129,7 @@ const CurrencyRangeFilter = (props) => {
         }
       ),
       triggerIcon: /* @__PURE__ */ jsx(SearchXsmall, {}),
-      customStyles: { width: column.ref?.current?.offsetWidth ?? "0px" },
+      customStyles: { width: referenceColumn?.offsetWidth },
       innerRef,
       ariaLabel: "Open Currency Range Filter"
     }

package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const {\n    column,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n    setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n  includeThousandsSeparator: false,\n  decimalPlaces: 2,\n  decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n  from: string | null;\n  to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n  const {\n    column,\n    referenceColumn,\n    filterValue = { from: null, to: null },\n    reduxHeader,\n    patchHeader,\n    onValueChange,\n    innerRef,\n    domIdAffix = uid(4),\n  } = props;\n\n  const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n  const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n  useEffect(() => {\n    // in order to update the input values when the user clear the filters\n    // we need to update the state when the filterValue changes\n    setFrom(filterValue.from ?? '');\n    setTo(filterValue.to ?? '');\n  }, [filterValue.from, filterValue.to]);\n\n  const ref = useRef<HTMLInputElement | null>(null);\n  const shouldFocus = useRef(true);\n\n  const handleApplyChange = useCallback(\n    ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n      onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n    },\n    [onValueChange],\n  );\n\n  const handleFromChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n      handleApplyChange({ newFrom, newTo: to });\n    },\n    [handleApplyChange, to],\n  );\n  const handleToChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n      handleApplyChange({ newFrom: from, newTo });\n    },\n    [from, handleApplyChange],\n  );\n\n  const fromInputProps = useNumberMask({\n    valueSetter: setFrom,\n    onChange: handleFromChange,\n    ...opts,\n  });\n\n  const toInputProps = useNumberMask({\n    valueSetter: setTo,\n    onChange: handleToChange,\n    ...opts,\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.code === 'Escape') {\n        patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n        innerRef.current?.focus();\n      }\n    },\n    [column.id, innerRef, patchHeader],\n  );\n\n  const handleRef = useCallback(\n    (newRef: HTMLInputElement | null) => {\n      if (ref.current) ref.current = newRef;\n      if (shouldFocus.current) {\n        setTimeout(() => {\n          newRef?.focus();\n          shouldFocus.current = false;\n        });\n      }\n    },\n    [shouldFocus],\n  );\n\n  useEffect(() => {\n    if (reduxHeader?.hideFilterMenu) {\n      shouldFocus.current = true;\n    }\n  }, [reduxHeader?.hideFilterMenu]);\n\n  return (\n    <FilterPopover\n      reduxHeader={reduxHeader}\n      column={column}\n      columnId={column.id}\n      menuContent={\n        <Grid\n          data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n          gutter=\"xxxs\"\n          padding=\"xxs\"\n          cols={['auto', 'auto']}\n          style={{ background: 'white' }}\n          onKeyDown={handleOnKeyDown}\n        >\n          <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={from}\n              {...fromInputProps}\n              id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n              innerRef={handleRef}\n            />\n          </DSFormLayoutBlockItem>\n          <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n            <DSInputText\n              value={to}\n              {...toInputProps}\n              id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n              style={{ textAlign: 'right' }}\n              placeholder=\"0.00\"\n            />\n          </DSFormLayoutBlockItem>\n        </Grid>\n      }\n      triggerIcon={<SearchXsmall />}\n      customStyles={{ width: referenceColumn?.offsetWidth }}\n      innerRef={innerRef}\n      ariaLabel=\"Open Currency Range Filter\"\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoHf,SASI,KATJ;AApHR,SAAgB,QAAQ,WAAW,aAAa,gBAAgB;AAChE,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,qBAAqB;AACpD,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AACpB,SAAS,eAAe,oBAAoB;AAE5C,SAAS,mBAAmB;AAE5B,MAAM,OAAO;AAAA,EACX,2BAA2B;AAAA,EAC3B,eAAe;AAAA,EACf,iBAAiB;AACnB;AAEA,MAAM,YAAY;AAOX,MAAM,sBAA8F,CAAC,UAAU;AACpH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,IAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,qBAAqB,YAAY,QAAQ,IAAI,IAAI,CAAC;AACnF,QAAM,CAAC,IAAI,KAAK,IAAI,SAAS,qBAAqB,YAAY,MAAM,IAAI,IAAI,CAAC;AAE7E,YAAU,MAAM;AAGd,YAAQ,YAAY,QAAQ,EAAE;AAC9B,UAAM,YAAY,MAAM,EAAE;AAAA,EAC5B,GAAG,CAAC,YAAY,MAAM,YAAY,EAAE,CAAC;AAErC,QAAM,MAAM,OAAgC,IAAI;AAChD,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,oBAAoB;AAAA,IACxB,CAAC,EAAE,SAAS,MAAM,MAA4C;AAC5D,oBAAc,aAAa,gBAAgB,EAAE,MAAM,WAAW,IAAI,IAAI,SAAS,GAAG,CAAC;AAAA,IACrF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,GAAwC,YAAqB;AAC5D,wBAAkB,EAAE,SAAS,OAAO,GAAG,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,mBAAmB,EAAE;AAAA,EACxB;AACA,QAAM,iBAAiB;AAAA,IACrB,CAAC,GAAwC,UAAmB;AAC1D,wBAAkB,EAAE,SAAS,MAAM,MAAM,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,MAAM,iBAAiB;AAAA,EAC1B;AAEA,QAAM,iBAAiB,cAAc;AAAA,IACnC,aAAa;AAAA,IACb,UAAU;AAAA,IACV,GAAG;AAAA,EACL,CAAC;AAED,QAAM,eAAe,cAAc;AAAA,IACjC,aAAa;AAAA,IACb,UAAU;AAAA,IACV,GAAG;AAAA,EACL,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA6C;AAC5C,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,OAAO,IAAI,EAAE,gBAAgB,MAAM,kBAAkB,MAAM,CAAC;AACxE,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,UAAU,WAAW;AAAA,EACnC;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,WAAoC;AACnC,UAAI,IAAI,QAAS,KAAI,UAAU;AAC/B,UAAI,YAAY,SAAS;AACvB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AACd,sBAAY,UAAU;AAAA,QACxB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,YAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,OAAO;AAAA,MACjB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,YAAY;AAAA,UACzB,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,OAAO,EAAE,YAAY,QAAQ;AAAA,UAC7B,WAAW;AAAA,UAEX;AAAA,gCAAC,yBAAsB,OAAM,OAAM,SAAS,GAAG,SAAS,QAAQ,OAAO,EAAE,IAAI,UAAU,IACrF;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACN,GAAG;AAAA,gBACJ,IAAI,GAAG,SAAS,QAAQ,OAAO,EAAE,IAAI,UAAU;AAAA,gBAC/C,OAAO,EAAE,WAAW,QAAQ;AAAA,gBAC5B,aAAY;AAAA,gBACZ,UAAU;AAAA;AAAA,YACZ,GACF;AAAA,YACA,oBAAC,yBAAsB,OAAM,OAAM,SAAS,GAAG,SAAS,QAAQ,OAAO,EAAE,IAAI,UAAU,IACrF;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACN,GAAG;AAAA,gBACJ,IAAI,GAAG,SAAS,QAAQ,OAAO,EAAE,KAAK,UAAU;AAAA,gBAChD,OAAO,EAAE,WAAW,QAAQ;AAAA,gBAC5B,aAAY;AAAA;AAAA,YACd,GACF;AAAA;AAAA;AAAA,MACF;AAAA,MAEF,aAAa,oBAAC,gBAAa;AAAA,MAC3B,cAAc,EAAE,OAAO,iBAAiB,YAAY;AAAA,MACpD;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }