@elliemae/ds-data-table 3.19.0 → 3.19.1-rc.1

package/dist/cjs/styled.js

@@ -57,6 +57,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_helpers = require("./helpers/index.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");
 const styledFocusCss = ({ theme }, color) => `
 &:after {
   display: block;
@@ -99,35 +100,23 @@ const StyledTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
   ${({ height = "auto" }) => `
   height: ${(0, import_helpers.sizeToCss)(height)};
   `}
+  width: ${(props) => (0, import_helpers.sizeToCss)(props.totalColumnsWidth)};
 `;
 const StyledVirtualListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   overflow: auto;
   height: 100%;
-  width: 100%;
+  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(" ")};
 `;
-const getGridTemplateColumnsStyle = ({
-  cols,
-  colsLayoutStyle = import_constants.ColsLayoutStyle.Auto
-}) => {
-  if (!cols)
-    return "";
-  if (colsLayoutStyle === "fixed") {
-    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(" ");
-    return `grid-template-columns: ${widthAttr}`;
-  }
-  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(" ")}`;
-};
 const StyledHeadWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
-  position: relative; /* ie11 fallback */
   position: sticky;
   top: 0;
   z-index: 4;
   background: white;
-  width: ${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Fixed ? (0, import_helpers.sizeToCss)(props.totalColumnsWidth) : "100%"};
+  width: 100%;
 `;
 const StyledHeadTr = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   ${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Auto ? "width:100%" : ""};
-  ${(props) => getGridTemplateColumnsStyle(props)};
+  grid-template-columns: var(--grid-layout);
   border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
   border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
   grid-auto-flow: column;
@@ -185,9 +174,7 @@ const StyledHeaderRightIconsWrapper = import_ds_system.styled.div`
   align-items: center;
   max-height: 24px;
 `;
-const StyledResizer = import_ds_system.styled.div`
-  display: inline-block;
-  background: transparent;
+const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText)`
   width: 4px;
   height: 100%;
   position: absolute;
@@ -198,10 +185,53 @@ const StyledResizer = import_ds_system.styled.div`
   // prevents from scrolling while dragging on touch devices
   touch-action: none;
 
-  cursor: col-resize;
+  border: none;
+  outline: none;
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    border: none;
+    outline: none;
+  }
+
+  input {
+    appearance: none;
+    cursor: col-resize;
+    background-image: transparent;
+    padding: 0;
+
+    &:focus::-webkit-slider-runnable-track {
+      background: transparent;
+    }
+
+    &:focus-visible {
+      :after {
+        position: absolute;
+        content: ' ';
+        z-index: 2;
+        top: 0;
+        right: 0;
+        width: 8px;
+        height: 100%;
+        border: 2px solid brand-700;
+      }
+      ::-webkit-slider-runnable-track {
+        background: transparent;
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      background: transparent;
+    }
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      background: transparent;
+    }
+  }
 `;
 const StyledActionCell = import_ds_system.styled.div`
-  position: relative; /* ie11 fallback */
   position: sticky;
   display: inline-block;
   right: 0;
@@ -272,7 +302,9 @@ const StyledCellContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
 
   width: 100%;
   ${(props) => props.isDragOverlay ? "width: fit-content;" : ""};
-  ${(props) => getGridTemplateColumnsStyle(props)};
+
+  grid-template-columns: ${(props) => props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : `var(--grid-layout)`};
+
   background-color: ${({ backgroundColor, isDragging, theme }) => isDragging ? theme.colors.neutral[100] : backgroundColor || "white"};
 
   outline: none;

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 { InternalTypescriptColumn } from './types/props.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)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype GridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: GridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled(Grid)<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle; cols: string[] }>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) => getGridTemplateColumnsStyle(props)};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{ isDraggingActive?: boolean; column: InternalTypescriptColumn }>`\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  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: transparent;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\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  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\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\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\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)<{ 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)<{ 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  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  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isExpandable?: boolean;\n  colsLayoutStyle?: ColsLayoutStyle;\n  cols?: string[];\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: 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  ${(props) => getGridTemplateColumnsStyle(props)};\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "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';\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)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number; totalColumnsWidth: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[] }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\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  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{ isDraggingActive?: boolean; column: DSDataTableT.InternalColumn }>`\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  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\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\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      :after {\n        position: absolute;\n        content: ' ';\n        z-index: 2;\n        top: 0;\n        right: 0;\n        width: 8px;\n        height: 100%;\n        border: 2px solid brand-700;\n      }\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`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\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  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\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\nexport const StyledEditableContainer = styled(Grid)<{ 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)<{ 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)<{ 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  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  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: 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) => (props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : `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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/types/FunctionalHoC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/types/FunctionalHoC.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\n\nexport type FunctionalHOC = <T = any>(Component: React.ComponentType<T>, ...other: any[]) => (props: T) => JSX.Element;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\n\nexport type FunctionalHOC = <T = any>(\n  Component: React.ComponentType<T>,\n  ...other: any[]\n) => React.ComponentType<T & JSX.IntrinsicAttributes>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DataTable.js

@@ -2,11 +2,11 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
 import { TableContent } from "./parts/TableContent.js";
-import { DataTableContext, defaultProps } from "./DataTableContext.js";
+import { DataTableContext } from "./DataTableContext.js";
 import { DATA_TESTID } from "./configs/constants.js";
 import { useDatatableConfig } from "./configs/useDatatableConfig.js";
 import { FiltersBar } from "./parts/FilterBar/FiltersBar.js";
-import { DataTableSchema } from "./DataTableSchema.js";
+import { DSDataTablePropTypesSchema } from "./react-desc-prop-types.js";
 import { StyledDataTableWrapper } from "./styled.js";
 const DataTable = (props) => {
   const { withFilterBar } = props;
@@ -29,11 +29,9 @@ const DataTable = (props) => {
     }
   ) });
 };
-DataTable.propTypes = DataTableSchema;
-DataTable.defaultProps = { ...defaultProps };
 DataTable.displayName = "DataTable";
 const DataTableWithSchema = describe(DataTable).description("Data Table");
-DataTableWithSchema.propTypes = DataTableSchema;
+DataTableWithSchema.propTypes = DSDataTablePropTypesSchema;
 export {
   DataTable,
   DataTableWithSchema

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 React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TableContent } from './parts/TableContent.js';\nimport type { TypescriptProps } from './types/props.js';\nimport { DataTableContext, defaultProps } from './DataTableContext.js';\nimport { DATA_TESTID } from './configs/constants.js';\nimport { useDatatableConfig } from './configs/useDatatableConfig.js';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar.js';\nimport { DataTableSchema } from './DataTableSchema.js';\nimport { StyledDataTableWrapper } from './styled.js';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n  const { withFilterBar } = props;\n\n  const ctx = useDatatableConfig(props);\n\n  const {\n    tableProps: { height, width },\n  } = ctx;\n\n  return (\n    <DataTableContext.Provider value={ctx}>\n      <StyledDataTableWrapper\n        data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n        height={height}\n        width={width}\n        cols={['100%']}\n        rows={withFilterBar ? ['auto', '1fr'] : ['1fr']}\n      >\n        {withFilterBar ? <FiltersBar /> : null}\n        <TableContent />\n      </StyledDataTableWrapper>\n    </DataTableContext.Provider>\n  );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsBjB,SAOmB,KAPnB;AArBN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAEhC,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ,MAAM;AAAA,EAC9B,IAAI;AAEJ,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,KAChC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,MAE7C;AAAA,wBAAgB,oBAAC,cAAW,IAAK;AAAA,QAClC,oBAAC,gBAAa;AAAA;AAAA;AAAA,EAChB,GACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,EAAE,GAAG,aAAa;AAC3C,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TableContent } from './parts/TableContent.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DataTableContext } from './DataTableContext.js';\nimport { DATA_TESTID } from './configs/constants.js';\nimport { useDatatableConfig } from './configs/useDatatableConfig.js';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledDataTableWrapper } from './styled.js';\n\nexport const DataTable = (props: DSDataTableT.Props): JSX.Element => {\n  const { withFilterBar } = props;\n\n  const ctx = useDatatableConfig(props);\n\n  const {\n    tableProps: { height, width },\n  } = ctx;\n\n  return (\n    <DataTableContext.Provider value={ctx}>\n      <StyledDataTableWrapper\n        data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n        height={height}\n        width={width}\n        cols={['100%']}\n        rows={withFilterBar ? ['auto', '1fr'] : ['1fr']}\n      >\n        {withFilterBar ? <FiltersBar /> : null}\n        <TableContent />\n      </StyledDataTableWrapper>\n    </DataTableContext.Provider>\n  );\n};\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBjB,SAOmB,KAPnB;AArBN,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AAEhC,MAAM,YAAY,CAAC,UAA2C;AACnE,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ,MAAM;AAAA,EAC9B,IAAI;AAEJ,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,KAChC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,MAE7C;AAAA,wBAAgB,oBAAC,cAAW,IAAK;AAAA,QAClC,oBAAC,gBAAa;AAAA;AAAA;AAAA,EAChB,GACF;AAEJ;AAEA,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }

package/dist/esm/DataTableContext.js

@@ -1,46 +1,7 @@
 import * as React from "react";
 import { createContext } from "react";
-import { ColsLayoutStyle } from "./configs/constants.js";
-const defaultProps = {
-  height: "100%",
-  width: "100%",
-  renderRowActions: false,
-  getRowVariant: () => "ds-primary-row",
-  isExpandable: false,
-  uniqueRowAccessor: void 0,
-  expandedRows: {},
-  disabledRows: {},
-  isResizeable: false,
-  isLoading: false,
-  pagination: false,
-  withFilterBar: false,
-  filters: [],
-  colsLayoutStyle: ColsLayoutStyle.Fixed,
-  hiddenColumns: [],
-  noResultsMessage: "No Results Found",
-  dragAndDropRows: false,
-  maxDragAndDropLevel: 1,
-  onRowsReorder: () => null,
-  dragAndDropColumns: false,
-  onColumnsReorder: () => null,
-  onColumnSizeChange: () => null,
-  onRowClick: () => null,
-  onRowFocus: () => null,
-  noSelectionColumn: false,
-  selectSingle: false,
-  selection: void 0,
-  onSelectionChange: () => null,
-  // selectionHashMap -> { ...[id]: enum(true/'mixed'/false) }
-  textWrap: "wrap",
-  onCellValueChange: () => null,
-  onFiltersChange: () => null,
-  onPageChanged: () => null,
-  onRowExpand: () => null,
-  onColumnSort: () => null
-};
-const DataTableContext = createContext();
+const DataTableContext = createContext({});
 export {
-  DataTableContext,
-  defaultProps
+  DataTableContext
 };
 //# sourceMappingURL=DataTableContext.js.map

package/dist/esm/DataTableContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DataTableContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { TypescriptContext, TypescriptProps } from './types/props.js';\n\nexport const defaultProps: Partial<TypescriptProps> = {\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  uniqueRowAccessor: undefined,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n\n  onRowClick: () => null,\n  onRowFocus: () => null,\n\n  noSelectionColumn: false,\n  selectSingle: false,\n  selection: undefined,\n  onSelectionChange: () => null, // selectionHashMap -> { ...[id]: enum(true/'mixed'/false) }\n\n  textWrap: 'wrap',\n\n  onCellValueChange: () => null,\n\n  onFiltersChange: () => null,\n\n  onPageChanged: () => null,\n\n  onRowExpand: () => null,\n\n  onColumnSort: () => null,\n};\n\n/** Context for cross component communication */\nconst DataTableContext = createContext<TypescriptContext>();\n\nexport { DataTableContext };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGzB,MAAM,eAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,SAAS,CAAC;AAAA,EAEV,iBAAiB,gBAAgB;AAAA,EACjC,eAAe,CAAC;AAAA,EAChB,kBAAkB;AAAA,EAElB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,eAAe,MAAM;AAAA,EAErB,oBAAoB;AAAA,EACpB,kBAAkB,MAAM;AAAA,EACxB,oBAAoB,MAAM;AAAA,EAE1B,YAAY,MAAM;AAAA,EAClB,YAAY,MAAM;AAAA,EAElB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,mBAAmB,MAAM;AAAA;AAAA,EAEzB,UAAU;AAAA,EAEV,mBAAmB,MAAM;AAAA,EAEzB,iBAAiB,MAAM;AAAA,EAEvB,eAAe,MAAM;AAAA,EAErB,aAAa,MAAM;AAAA,EAEnB,cAAc,MAAM;AACtB;AAGA,MAAM,mBAAmB,cAAiC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\n\n/** Context for cross component communication */\nconst DataTableContext = createContext<DSDataTableT.Context>({} as DSDataTableT.Context);\n\nexport { DataTableContext };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAI9B,MAAM,mBAAmB,cAAoC,CAAC,CAAyB;",
   "names": []
 }

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

@@ -11,7 +11,9 @@ const actionColumn = (renderRowActions) => ({
   Cell: memo((props) => renderRowActions.renderer(props)),
   canResize: false,
   disableDnD: true,
-  isFocuseable: false
+  isFocuseable: false,
+  parentId: null,
+  depth: 0
 });
 export {
   actionColumn

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnAction/ColumnAction.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { memo } from 'react';\nimport type { TypescriptColumn, TypescriptRenderRowActionsConfig } from '../../../types/props.js';\ntype ConfigurableColumn = (renderRowActions: TypescriptRenderRowActionsConfig) => TypescriptColumn;\n\nexport const actionColumn: ConfigurableColumn = (renderRowActions) => ({\n  Header: ' ',\n  id: 'rowActions',\n  width: renderRowActions.columnWidth,\n  style: {\n    overflow: 'visible',\n  },\n  // memo typing is broken?\n  Cell: memo((props) => renderRowActions.renderer(props)),\n  canResize: false,\n  disableDnD: true,\n  isFocuseable: false,\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AAId,MAAM,eAAmC,CAAC,sBAAsB;AAAA,EACrE,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO,iBAAiB;AAAA,EACxB,OAAO;AAAA,IACL,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,MAAM,KAAK,CAAC,UAAU,iBAAiB,SAAS,KAAK,CAAC;AAAA,EACtD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAChB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { memo } from 'react';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\ntype ConfigurableColumn = (renderRowActions: DSDataTableT.RenderRowActionsConfig) => DSDataTableT.InternalColumn;\n\nexport const actionColumn: ConfigurableColumn = (renderRowActions) => ({\n  Header: ' ',\n  id: 'rowActions',\n  width: renderRowActions.columnWidth,\n  style: {\n    overflow: 'visible',\n  },\n  // memo typing is broken?\n  Cell: memo((props) => renderRowActions.renderer(props)),\n  canResize: false,\n  disableDnD: true,\n  isFocuseable: false,\n  parentId: null,\n  depth: 0,\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AAId,MAAM,eAAmC,CAAC,sBAAsB;AAAA,EACrE,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO,iBAAiB;AAAA,EACxB,OAAO;AAAA,IACL,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,MAAM,KAAK,CAAC,UAAU,iBAAiB,SAAS,KAAK,CAAC;AAAA,EACtD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AACT;",
   "names": []
 }

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

@@ -34,7 +34,9 @@ const dragHandleColumn = {
   padding: 4,
   canResize: false,
   disableDnD: true,
-  isFocuseable: false
+  isFocuseable: false,
+  parentId: null,
+  depth: 0
 };
 export {
   dragHandleColumn

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnDragHandle/ColumnDragHandle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DragHandle } from '../../../parts/DnDHandle.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport type { TypescriptColumn } from '../../../types/props.js';\n\nexport const dragHandleColumn: TypescriptColumn<HTMLDivElement> = {\n  // Build our singleSelecter column\n  id: 'dragHandleColumn', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <div />,\n  Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps, isDisabledRow }) => (\n    <StyledFocusWithin\n      style={{ width: '100%', height: '100%' }}\n      hideFocus={draggableProps && draggableProps.isDragging}\n    >\n      <DragHandle\n        id={row.uid}\n        key={row.uid}\n        isReachable={isRowSelected}\n        innerRef={(_ref) => {\n          if (!isDragOverlay) cell.ref.current = _ref;\n        }}\n        isDragOverlay={isDragOverlay}\n        isDisabled={isDisabledRow}\n      />\n    </StyledFocusWithin>\n  ),\n  textWrap: 'wrap-all',\n  width: 24,\n  padding: 4,\n  canResize: false,\n  disableDnD: true,\n  isFocuseable: false,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUP;AARhB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAG3B,MAAM,mBAAqD;AAAA;AAAA,EAEhE,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,KAAK,eAAe,MAAM,eAAe,gBAAgB,cAAc,MAC9E;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MACvC,WAAW,kBAAkB,eAAe;AAAA,MAE5C;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,IAAI;AAAA,UAER,aAAa;AAAA,UACb,UAAU,CAAC,SAAS;AAClB,gBAAI,CAAC;AAAe,mBAAK,IAAI,UAAU;AAAA,UACzC;AAAA,UACA;AAAA,UACA,YAAY;AAAA;AAAA,QANP,IAAI;AAAA,MAOX;AAAA;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAChB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DragHandle } from '../../../parts/DnDHandle.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const dragHandleColumn: DSDataTableT.InternalColumn<HTMLDivElement> = {\n  // Build our singleSelecter column\n  id: 'dragHandleColumn', // Make sure it has an ID\n  // The header doesn't need anything for single selection\n  Header: () => <div />,\n  Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps, isDisabledRow }) => (\n    <StyledFocusWithin\n      style={{ width: '100%', height: '100%' }}\n      hideFocus={draggableProps && draggableProps.isDragging}\n    >\n      <DragHandle\n        id={row.uid}\n        key={row.uid}\n        isReachable={isRowSelected}\n        innerRef={(_ref) => {\n          if (!isDragOverlay) cell.ref.current = _ref;\n        }}\n        isDragOverlay={isDragOverlay}\n        isDisabled={isDisabledRow}\n      />\n    </StyledFocusWithin>\n  ),\n  textWrap: 'wrap-all',\n  width: 24,\n  padding: 4,\n  canResize: false,\n  disableDnD: true,\n  isFocuseable: false,\n  parentId: null,\n  depth: 0,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUP;AARhB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAG3B,MAAM,mBAAgE;AAAA;AAAA,EAE3E,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,KAAK,eAAe,MAAM,eAAe,gBAAgB,cAAc,MAC9E;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MACvC,WAAW,kBAAkB,eAAe;AAAA,MAE5C;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,IAAI;AAAA,UAER,aAAa;AAAA,UACb,UAAU,CAAC,SAAS;AAClB,gBAAI,CAAC;AAAe,mBAAK,IAAI,UAAU;AAAA,UACzC;AAAA,UACA;AAAA,UACA,YAAY;AAAA;AAAA,QANP,IAAI;AAAA,MAOX;AAAA;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AACT;",
   "names": []
 }

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

@@ -161,7 +161,6 @@ const expandRowColumn = {
           tabIndex: isRowSelected && !disabledRows[row.uid] ? 0 : -1,
           "data-testid": "data-table-row-expand-cell",
           "aria-expanded": isExpanded,
-          isRightArrow: !isExpanded || isDragging || isDragOverlay,
           disabled: disabledRows[row.uid],
           "aria-disabled": disabledRows[row.uid],
           children: PureCaretIcon
@@ -185,7 +184,9 @@ const expandRowColumn = {
   width: 25,
   padding: 0,
   isFocuseable: false,
-  disableDnD: true
+  disableDnD: true,
+  parentId: null,
+  depth: 0
 };
 export {
   expandRowColumn

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 } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { TypescriptColumn } from '../../../types/props.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nconst disabledCaret = css`\n  cursor: not-allowed;\n  pointer-events: none;\n`;\nconst StyledSpan = styled.span<{ disabled: boolean }>`\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`;\n\nconst ArrowDown = ({ 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 = ({ 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: TypescriptColumn<HTMLSpanElement> = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { expandedRows, onRowExpand, disabledRows },\n      allDataFlattened,\n    } = ctx;\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=\"Toggle All Rows Expanded\"\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        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n    const {\n      tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n    } = ctx;\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        if (expandedRows[uniqueId]) {\n          delete expandedRows[uniqueId];\n        } else {\n          expandedRows[uniqueId] = true;\n        }\n        onRowExpand({ ...expandedRows }, 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            ref={cell.ref}\n            tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n            data-testid=\"data-table-row-expand-cell\"\n            aria-expanded={isExpanded}\n            isRightArrow={!isExpanded || isDragging || isDragOverlay}\n            disabled={disabledRows[row.uid]}\n            aria-disabled={disabledRows[row.uid]}\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};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } 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';\n\nconst disabledCaret = css`\n  cursor: not-allowed;\n  pointer-events: none;\n`;\nconst StyledSpan = styled.span<{ disabled?: boolean }>`\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`;\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<HTMLSpanElement> = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { expandedRows, onRowExpand, disabledRows },\n      allDataFlattened,\n    } = ctx;\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=\"Toggle All Rows Expanded\"\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        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n    const {\n      tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n    } = ctx;\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        if (expandedRows[uniqueId]) {\n          delete expandedRows[uniqueId];\n        } else {\n          expandedRows[uniqueId] = true;\n        }\n        onRowExpand({ ...expandedRows }, 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            ref={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          >\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};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useRef, useCallback } from "react";
-import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
+import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { DATA_TESTID } from "../../../configs/constants.js";
 const multiSelectColumn = {
   // Build our multiSelecter column
@@ -14,7 +14,7 @@ const multiSelectColumn = {
       flattenedData
     } = ctx;
     const dtSelection = selection ?? {};
-    const selectionKeyCount = Object.keys(dtSelection).filter((selection2) => dtSelection[selection2]).length;
+    const selectionKeyCount = Object.keys(dtSelection).filter((sel) => dtSelection[sel]).length;
     const currentGlobalState = useMemo(
       () => selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length ? "mixed" : selectionKeyCount > 0,
       [selectionKeyCount, flattenedData, disabledRows]
@@ -120,7 +120,9 @@ const multiSelectColumn = {
   padding: 7,
   canResize: false,
   isFocuseable: false,
-  disableDnD: true
+  disableDnD: true,
+  parentId: null,
+  depth: 0
 };
 export {
   multiSelectColumn

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport type { TypescriptColumn, TypescriptSelection } from '../../../types/props.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n      allDataFlattened,\n      flattenedData,\n    } = ctx;\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = Object.keys(dtSelection).filter((selection) => dtSelection[selection]).length;\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: TypescriptSelection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n      [allDataFlattened],\n    );\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={ariaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label=\"Toggle all rows selected\"\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n      isShiftPressed,\n      setIsShiftPressed,\n      flattenedData,\n      lastSelected,\n    } = ctx;\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i].id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n};\n"],
-  "mappings": "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",
-  "names": ["selection"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement> = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n      allDataFlattened,\n      flattenedData,\n    } = ctx;\n\n    // We for sure have selection, so we just typecast it for TS reasons\n    const dtSelection = selection ?? {};\n    const selectionKeyCount = Object.keys(dtSelection).filter((sel) => dtSelection[sel]).length;\n\n    const currentGlobalState = useMemo(\n      () =>\n        selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length\n          ? 'mixed'\n          : selectionKeyCount > 0,\n      [selectionKeyCount, flattenedData, disabledRows],\n    );\n\n    // global state toggling: false to true, mixed to true, true to false\n    const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n    const newSelection: DSDataTableT.Selection = useMemo(() => {\n      if (!newGlobalStateAfterToggle) return {};\n\n      return allDataFlattened.reduce<DSDataTableT.Selection>((newSelectionObject, datum) => {\n        newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n        return newSelectionObject;\n      }, {});\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const ariaControls = useMemo(\n      () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n      [allDataFlattened],\n    );\n\n    return (\n      <DSControlledCheckbox\n        aria-controls={ariaControls}\n        data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n        aria-label=\"Toggle all rows selected\"\n        checked={currentGlobalState}\n        onChange={onChangeHandler}\n      />\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n      isShiftPressed,\n      setIsShiftPressed,\n      flattenedData,\n      lastSelected,\n    } = ctx;\n\n    const { uid } = row;\n    const selectedState = selection?.[uid] ?? false;\n\n    const isShiftPressedKeyRef = useRef(false);\n    const onChangeHandler = useCallback(\n      (newState: boolean, e: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent) => {\n        const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n        const now = Number.parseInt(uid, 10);\n        if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n          for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n            const correctDataIndex = flattenedData[i].id;\n            if (!Object.keys(disabledRows).includes(correctDataIndex))\n              newSelection[correctDataIndex] = newSelection[lastSelected.current];\n            if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n          }\n        }\n        lastSelected.current = now;\n        onSelectionChange(newSelection, uid, e);\n      },\n      [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n    );\n\n    const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n      (e) => {\n        setIsShiftPressed(false);\n        isShiftPressedKeyRef.current = false;\n        e.stopPropagation();\n      },\n      [setIsShiftPressed],\n    );\n\n    const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n      if (e.shiftKey) {\n        isShiftPressedKeyRef.current = true;\n      }\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n        <DSControlledCheckbox\n          id={`data-table-checkbox-${uid}`}\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          aria-label=\"Toggle row selected\"\n          checked={selectedState}\n          onChange={onChangeHandler}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n        />\n      </div>\n    );\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n  parentId: null,\n  depth: 0,\n};\n"],
+  "mappings": "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",
+  "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { DSControlledRadio } from "@elliemae/ds-controlled-form";
+import { DSControlledRadio } from "@elliemae/ds-form-radio";
 import { styled } from "@elliemae/ds-system";
 import { DATA_TESTID } from "../../../configs/constants.js";
 const CenteredContent = styled.div`
@@ -52,7 +52,9 @@ const singleSelectColumn = {
   padding: 4,
   canResize: false,
   isFocuseable: false,
-  disableDnD: true
+  disableDnD: true,
+  parentId: null,
+  depth: 0
 };
 export {
   singleSelectColumn

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, { useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-controlled-form';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptColumn } from '../../../types/props.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nconst CenteredContent = styled.div`\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: TypescriptColumn<HTMLInputElement> = {\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: () => <div />,\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\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}>\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};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBP;AApBhB,SAAgB,mBAAmB;AACnC,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAE5B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAyD;AAAA;AAAA,EAEpE,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,IAAI,MAAM;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,IAC3D,IAAI;AACJ,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,oBACvD;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;AACd;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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';\n\nconst CenteredContent = styled.div`\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<HTMLInputElement> = {\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: () => <div />,\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\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}>\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};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBP;AApBhB,SAAgB,mBAAmB;AACnC,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAE5B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAoE;AAAA;AAAA,EAE/E,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,oBAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,IAAI,MAAM;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,IAC3D,IAAI;AACJ,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,oBACvD;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;AACT;",
   "names": []
 }