@elliemae/ds-data-table 3.80.0-next.64 → 3.80.0-next.65

package/dist/cjs/parts/DnDHandle.js

@@ -57,9 +57,10 @@ const StyledGripperButton = (0, import_ds_system.styled)("div", { name: import_c
     fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral["500"]};
   }
 `;
-const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {
+const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled, row, columnId }) => {
   const { draggableProps } = (0, import_react2.useContext)(import_SortableItemContext.SortableItemContext);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react2.useCallback)(() => row ? { row } : { columnId }, [row, columnId]);
   const isActive = draggableProps && !!draggableProps.active;
   const isDragging = draggableProps && draggableProps.isDragging;
   const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;
@@ -81,7 +82,8 @@ const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) =>
       "aria-label": "Drag handle",
       isDragging,
       isDisabled,
-      getOwnerProps
+      getOwnerProps,
+      getOwnerPropsArguments
     },
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.GripperVertical, { size: "s" })
   );

package/dist/cjs/parts/DnDHandle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DnDHandle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  isDragging: boolean;\n}>`\n  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n  cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n    if (isDisabled) return 'not-allowed';\n    if (isActive || isDragOverlay) return 'grabbing';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n\n  svg {\n    fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n  const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps &&\n        !isDisabled && {\n          ...draggableProps.listeners,\n          ...draggableProps.attributes,\n        })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n      key={`${id}-drag-handle`}\n      aria-label=\"Drag handle\"\n      isDragging={isDragging}\n      isDisabled={isDisabled}\n      getOwnerProps={getOwnerProps}\n    >\n      <GripperVertical size=\"s\" />\n    </StyledGripperButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AAnBF;AA7CJ,sBAAgC;AAChC,uBAAkC;AAClC,IAAAA,gBAAkC;AAClC,2CAA8B;AAC9B,uBAAkD;AAClD,IAAAC,oBAA4B;AAC5B,iCAAoC;AAEpC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aAMR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,WAAW,MAAM;AACjE,QAAM,EAAE,eAAe,QAAI,0BAAW,8CAAmB;AACzD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,cAAU,4BAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,8BAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
+  "sourcesContent": ["import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  isDragging: boolean;\n}>`\n  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n  cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n    if (isDisabled) return 'not-allowed';\n    if (isActive || isDragOverlay) return 'grabbing';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n\n  svg {\n    fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  isReachable: boolean;\n  isDragOverlay?: boolean;\n  isDisabled?: boolean;\n  /** A row handle receives `row`, a column header handle receives `columnId`: they become the slot's named arguments */\n  row?: DSDataTableT.InternalRow;\n  columnId?: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled, row, columnId }) => {\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => (row ? { row } : { columnId }), [row, columnId]);\n\n  const isActive = draggableProps && !!draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n  const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n  return (\n    <StyledGripperButton\n      role=\"button\"\n      {...(draggableProps &&\n        !isDisabled && {\n          ...draggableProps.listeners,\n          ...draggableProps.attributes,\n        })}\n      isActive={isActive}\n      isDragOverlay={isDragOverlay}\n      innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n      tabIndex={isReachable ? 0 : -1}\n      data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n      id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n      key={`${id}-drag-handle`}\n      aria-label=\"Drag handle\"\n      isDragging={isDragging}\n      isDisabled={isDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <GripperVertical size=\"s\" />\n    </StyledGripperButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEjB;AApBF;AAlDJ,sBAAgC;AAChC,uBAAkC;AAClC,IAAAA,gBAA+C;AAC/C,2CAA8B;AAC9B,uBAAkD;AAClD,IAAAC,oBAA4B;AAC5B,iCAAoC;AAGpC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aASR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,YAAY,KAAK,SAAS,MAAM;AAChF,QAAM,EAAE,eAAe,QAAI,0BAAW,8CAAmB;AACzD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,2BAAY,MAAO,MAAM,EAAE,IAAI,IAAI,EAAE,SAAS,GAAI,CAAC,KAAK,QAAQ,CAAC;AAEhG,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,cAAU,4BAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,8BAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
   "names": ["import_react", "import_constants"]
 }

package/dist/cjs/parts/DropIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DropIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.DROP_INDICATOR,\n})<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (\n    dropIndicatorPosition === false ||\n    dropIndicatorPosition === DropIndicatorPosition.None ||\n    dropIndicatorPosition === DropIndicatorPosition.Inside\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n        getOwnerProps={getOwnerProps}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDnB;AArDJ,uBAAuB;AAEvB,uBAAkD;AAClD,IAAAA,oBAAsC;AACtC,2CAA8B;AAC9B,kCAAgC;AAUhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,wCAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,wCAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,wCAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,wCAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,wCAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,wCAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,wCAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,wCAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,4CAAgB,cAAc;AAAA;AAG3C,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,4CAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,sDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,wCAAsB,QAChD,0BAA0B,wCAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,wCAAsB,SAAS;AAE1E,SACE,4EACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DSDataTableT.DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DSDataTableT.DropIndicatorProps) => ({\n  position: 'absolute',\n  zIndex: ZIndexDataTable.DROP_INDICATOR,\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.DROP_INDICATOR,\n})<DSDataTableT.DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n  z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DSDataTableT.DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (\n    dropIndicatorPosition === false ||\n    dropIndicatorPosition === DropIndicatorPosition.None ||\n    dropIndicatorPosition === DropIndicatorPosition.Inside\n  )\n    return null;\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n        getOwnerProps={getOwnerProps}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CnB;AA9CJ,uBAAuB;AAEvB,uBAAkD;AAClD,IAAAA,oBAAsC;AACtC,2CAA8B;AAC9B,kCAAgC;AAGhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAAuC;AAClG,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,wCAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,wCAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,wCAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,wCAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAAwC;AAAA,EACjG,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,wCAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,wCAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,wCAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,wCAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,4CAAgB,cAAc;AAAA;AAG3C,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,4CAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,sDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAsE,CAAC,UAAU;AACrF,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,wCAAsB,QAChD,0BAA0B,wCAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,wCAAsB,SAAS;AAE1E,SACE,4EACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": ["import_constants"]
 }

package/dist/cjs/parts/EmptyContent.js

@@ -75,10 +75,10 @@ const EmptyStateContent = () => {
   if (isSkeleton) return null;
   if (import_react.default.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "xxl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "xxl", getOwnerProps }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrimaryMessage, { getOwnerProps, children: noResultsMessage }),
     noResultsSecondaryMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SecondaryMessage, { getOwnerProps, children: noResultsSecondaryMessage }) : null,
-    noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { buttonType: "outline", onClick: onNoResultsButtonClick, children: noResultsButtonLabel }) : null
+    noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { buttonType: "outline", onClick: onNoResultsButtonClick, getOwnerProps, children: noResultsButtonLabel }) : null
   ] });
 };
 const CenterContentFlexWrapper = (0, import_ds_system.styled)("div", {

package/dist/cjs/parts/EmptyContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/EmptyContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\n\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\n\nconst EmptyStateContent = () => {\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\n    <>\n      <Icon size=\"xxl\" />\n      <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n      {noResultsSecondaryMessage ? (\n        <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n      ) : null}\n      {noResultsButtonLabel && onNoResultsButtonClick ? (\n        <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n          {noResultsButtonLabel}\n        </Button>\n      ) : null}\n    </>\n  );\n};\n\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\n\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n  fill: ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[300]};\n  justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n  text-align: center;\n  font-weight: bold;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n  color: ${(props) => props.theme.colors.neutral[600]};\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n  text-align: center;\n  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n  color: ${(props) => props.theme.colors.neutral[500]};\n  margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n  justify-self: center;\n  width: fit-content;\n`;\n\nconst EmptyStateContent = () => {\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n  const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  if (isSkeleton) return null;\n\n  if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n  return (\n    <>\n      <Icon size=\"xxl\" getOwnerProps={getOwnerProps} />\n      <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n      {noResultsSecondaryMessage ? (\n        <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n      ) : null}\n      {noResultsButtonLabel && onNoResultsButtonClick ? (\n        <Button buttonType=\"outline\" onClick={onNoResultsButtonClick} getOwnerProps={getOwnerProps}>\n          {noResultsButtonLabel}\n        </Button>\n      ) : null}\n    </>\n  );\n};\n\nconst CenterContentFlexWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n  width: ${({ width }) => width};\n  height: 100%;\n  display: flex;\n  align-items: center;\n`;\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n  position: sticky;\n  height: fit-content;\n  top: 0;\n  left: 0;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n  return (\n    <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n      <EmptyStateWrapper\n        width={bodyClientWidth}\n        justifyContent=\"center\"\n        role=\"cell\"\n        aria-live=\"assertive\"\n        getOwnerProps={getOwnerProps}\n      >\n        <EmptyStateContent />\n      </EmptyStateWrapper>\n    </CenterContentFlexWrapper>\n  );\n};\n\nexport { EmptyContent };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/FilterBar/FilterBarMenuButtonAddon.js

@@ -0,0 +1,88 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FilterBarMenuButtonAddon_exports = {};
+__export(FilterBarMenuButtonAddon_exports, {
+  FilterBarMenuButtonAddon: () => FilterBarMenuButtonAddon
+});
+module.exports = __toCommonJS(FilterBarMenuButtonAddon_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_FilterMenuButton = require("../../exported-related/FilterBar/FilterMenuButton.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
+var import_convertExtraOptions = require("./convertExtraOptions.js");
+const FilterBarMenuButtonAddon = ({
+  removeAllFilters,
+  filterBarProps,
+  dropdownMenuRef
+}) => {
+  const {
+    extraOptions,
+    onDropdownMenuToggle,
+    onDropdownMenuClickOutside,
+    onDropdownMenuTriggerClick,
+    isDropdownMenuOpen
+  } = filterBarProps ?? {};
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const options = (0, import_react.useMemo)(() => (0, import_convertExtraOptions.convertExtraOptionsToMenuButtonOptions)(extraOptions), [extraOptions]);
+  const onOpen = (0, import_react.useCallback)(
+    ({ reason }) => {
+      if (reason === "trigger-click") onDropdownMenuTriggerClick?.();
+      onDropdownMenuToggle?.(true, "onOpen");
+    },
+    [onDropdownMenuToggle, onDropdownMenuTriggerClick]
+  );
+  const onClose = (0, import_react.useCallback)(
+    ({ reason }) => {
+      if (reason === "window-blur") return;
+      if (reason === "outside-click") {
+        onDropdownMenuToggle?.(false, "onClickOutside");
+        onDropdownMenuClickOutside?.();
+        return;
+      }
+      if (reason === "trigger-toggle") onDropdownMenuTriggerClick?.();
+      onDropdownMenuToggle?.(false, "onClose");
+    },
+    [onDropdownMenuClickOutside, onDropdownMenuToggle, onDropdownMenuTriggerClick]
+  );
+  const consumerOwnedOpenStateProps = typeof isDropdownMenuOpen === "boolean" ? { a11yDangerouslyConsumerOwnedMenuOpenState: isDropdownMenuOpen } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_FilterMenuButton.FilterMenuButton,
+    {
+      options,
+      onClearFilters: removeAllFilters,
+      innerRef: dropdownMenuRef,
+      getOwnerProps,
+      onOpen,
+      onClose,
+      ...consumerOwnedOpenStateProps
+    }
+  );
+};
+//# sourceMappingURL=FilterBarMenuButtonAddon.js.map

package/dist/cjs/parts/FilterBar/FilterBarMenuButtonAddon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/FilterBar/FilterBarMenuButtonAddon.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport type { DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { FilterMenuButton } from '../../exported-related/FilterBar/FilterMenuButton.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { convertExtraOptionsToMenuButtonOptions } from './convertExtraOptions.js';\n\nexport interface FilterBarMenuButtonAddonProps {\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n}\n\n/** PUI-19093 (https://jira.elliemae.io/browse/PUI-19093)\n * The addon the filter bar renders when no `filterBarAddonRenderer` is provided: \"Clear Filters\" plus\n * `filterBarProps.extraOptions`, on `DSMenuButton`. It replaces the menu that came from `@elliemae/ds-legacy-dropdownmenu`.\n * The four `*DropdownMenu*` props of `filterBarProps` keep working through `DSMenuButton`'s `onOpen` / `onClose`\n * intents (see the migration notes for the differences of the accessible menu).\n */\nexport const FilterBarMenuButtonAddon: React.ComponentType<FilterBarMenuButtonAddonProps> = ({\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n}) => {\n  const {\n    extraOptions,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps ?? {};\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const options = useMemo(() => convertExtraOptionsToMenuButtonOptions(extraOptions), [extraOptions]);\n\n  const onOpen = useCallback(\n    ({ reason }: DSMenuButtonT.MenuOpenMetainfo) => {\n      if (reason === 'trigger-click') onDropdownMenuTriggerClick?.();\n      onDropdownMenuToggle?.(true, 'onOpen');\n    },\n    [onDropdownMenuToggle, onDropdownMenuTriggerClick],\n  );\n\n  const onClose = useCallback(\n    ({ reason }: DSMenuButtonT.MenuCloseMetainfo) => {\n      // the window losing focus is not an interaction of the user with the menu: it is not reported\n      if (reason === 'window-blur') return;\n      if (reason === 'outside-click') {\n        onDropdownMenuToggle?.(false, 'onClickOutside');\n        onDropdownMenuClickOutside?.();\n        return;\n      }\n      // a click on the trigger while the menu is open is a trigger click, as it was with the legacy menu\n      if (reason === 'trigger-toggle') onDropdownMenuTriggerClick?.();\n      onDropdownMenuToggle?.(false, 'onClose');\n    },\n    [onDropdownMenuClickOutside, onDropdownMenuToggle, onDropdownMenuTriggerClick],\n  );\n\n  const consumerOwnedOpenStateProps =\n    typeof isDropdownMenuOpen === 'boolean' ? { a11yDangerouslyConsumerOwnedMenuOpenState: isDropdownMenuOpen } : {};\n\n  return (\n    <FilterMenuButton\n      options={options}\n      onClearFilters={removeAllFilters}\n      innerRef={dropdownMenuRef}\n      getOwnerProps={getOwnerProps}\n      onOpen={onOpen}\n      onClose={onClose}\n      /* The consumer owns the open state only when it provides `isDropdownMenuOpen`, which is the contract this prop\n       * always had: the escape hatch of DSMenuButton is contingent on that boolean, nothing else opts into it. */\n      {...consumerOwnedOpenStateProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEnB;AAhEJ,mBAA4C;AAE5C,8BAAiC;AACjC,2CAA8B;AAE9B,iCAAuD;AAchD,MAAM,2BAA+E,CAAC;AAAA,EAC3F;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,CAAC;AAEvB,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,cAAU,sBAAQ,UAAM,mEAAuC,YAAY,GAAG,CAAC,YAAY,CAAC;AAElG,QAAM,aAAS;AAAA,IACb,CAAC,EAAE,OAAO,MAAsC;AAC9C,UAAI,WAAW,gBAAiB,8BAA6B;AAC7D,6BAAuB,MAAM,QAAQ;AAAA,IACvC;AAAA,IACA,CAAC,sBAAsB,0BAA0B;AAAA,EACnD;AAEA,QAAM,cAAU;AAAA,IACd,CAAC,EAAE,OAAO,MAAuC;AAE/C,UAAI,WAAW,cAAe;AAC9B,UAAI,WAAW,iBAAiB;AAC9B,+BAAuB,OAAO,gBAAgB;AAC9C,qCAA6B;AAC7B;AAAA,MACF;AAEA,UAAI,WAAW,iBAAkB,8BAA6B;AAC9D,6BAAuB,OAAO,SAAS;AAAA,IACzC;AAAA,IACA,CAAC,4BAA4B,sBAAsB,0BAA0B;AAAA,EAC/E;AAEA,QAAM,8BACJ,OAAO,uBAAuB,YAAY,EAAE,2CAA2C,mBAAmB,IAAI,CAAC;AAEjH,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MAGC,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/FilterBar/FiltersBar.js

@@ -37,7 +37,7 @@ var import_react = __toESM(require("react"));
 var import_exported_related = require("../../exported-related/index.js");
 var import_components = require("./components/index.js");
 var import_styled = require("./styled.js");
-var import_DeprecatedDropdown = require("./DeprecatedDropdown.js");
+var import_FilterBarMenuButtonAddon = require("./FilterBarMenuButtonAddon.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const pillRenderMapper = {
   [import_exported_related.FILTER_TYPES.SELECT]: import_components.SelectPill,
@@ -64,48 +64,17 @@ const FiltersBar = () => {
   const filters = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filters);
   const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const pillGroupRefs = (0, import_react.useMemo)(() => {
     const refs = [];
     for (let i = 0; i < filters.length; i += 1) refs.push(import_react.default.createRef());
     return refs;
   }, [filters.length]);
   const dropdownMenuRef = (0, import_react.useRef)(null);
-  const {
-    filterBarAddonRenderer: FilterBarAddonRenderer,
-    onClearAllFiltersClick,
-    onDropdownMenuToggle,
-    onDropdownMenuClickOutside,
-    onDropdownMenuTriggerClick,
-    isDropdownMenuOpen
-  } = filterBarProps || {};
+  const { filterBarAddonRenderer: FilterBarAddonRenderer, onClearAllFiltersClick } = filterBarProps || {};
   const removeAllFilters = (0, import_react.useCallback)(() => {
     onFiltersChange([]);
     onClearAllFiltersClick?.();
-    setIsOpen(false);
   }, [onFiltersChange, onClearAllFiltersClick]);
-  const onFilterBarClose = (0, import_react.useCallback)(() => {
-    onDropdownMenuToggle?.(false, "onClose");
-    dropdownMenuRef.current?.focus();
-    setIsOpen(false);
-  }, [onDropdownMenuToggle]);
-  const onFilterBarOpen = (0, import_react.useCallback)(() => {
-    onDropdownMenuToggle?.(true, "onOpen");
-    setIsOpen(true);
-  }, [onDropdownMenuToggle]);
-  const onFilterBarOnClickOutside = (0, import_react.useCallback)(() => {
-    onDropdownMenuToggle?.(false, "onClickOutside");
-    onDropdownMenuClickOutside?.();
-    setIsOpen(false);
-  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);
-  const onTriggerClick = (0, import_react.useCallback)(() => {
-    onDropdownMenuTriggerClick?.();
-    onFilterBarOpen();
-  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);
-  const finalIsOpen = (0, import_react.useMemo)(() => {
-    if (typeof isDropdownMenuOpen === "boolean") return isDropdownMenuOpen;
-    return isOpen;
-  }, [isDropdownMenuOpen, isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledWrapper,
     {
@@ -139,15 +108,11 @@ const FiltersBar = () => {
           );
         }),
         FilterBarAddonRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterBarAddonRenderer, { innerRef: dropdownMenuRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_DeprecatedDropdown.DeprecatedDropdown,
+          import_FilterBarMenuButtonAddon.FilterBarMenuButtonAddon,
           {
-            finalIsOpen,
-            onFilterBarClose,
-            onFilterBarOnClickOutside,
             removeAllFilters,
             filterBarProps,
-            dropdownMenuRef,
-            onTriggerClick
+            dropdownMenuRef
           }
         )
       ]

package/dist/cjs/parts/FilterBar/FiltersBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FilterBar/FiltersBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.SELECT_V2]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n  const {\n    filterBarAddonRenderer: FilterBarAddonRenderer,\n    onClearAllFiltersClick,\n    onDropdownMenuToggle,\n    onDropdownMenuClickOutside,\n    onDropdownMenuTriggerClick,\n    isDropdownMenuOpen,\n  } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n    setIsOpen(false);\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  const onFilterBarClose = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClose');\n    dropdownMenuRef.current?.focus();\n    setIsOpen(false);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOpen = useCallback(() => {\n    onDropdownMenuToggle?.(true, 'onOpen');\n    setIsOpen(true);\n  }, [onDropdownMenuToggle]);\n\n  const onFilterBarOnClickOutside = useCallback(() => {\n    onDropdownMenuToggle?.(false, 'onClickOutside');\n    onDropdownMenuClickOutside?.();\n    setIsOpen(false);\n  }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n  const onTriggerClick = useCallback(() => {\n    onDropdownMenuTriggerClick?.();\n    onFilterBarOpen();\n  }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n  const finalIsOpen = useMemo(() => {\n    if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n    return isOpen;\n  }, [isDropdownMenuOpen, isOpen]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      /**\n       * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n       * https://jira.elliemae.io/browse/PUI-17317\n       *\n       * ## Problem\n       * Screen reader users received no feedback when filters were added or removed.\n       * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n       * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n       * produced meaningless announcements by concatenating the pill label with its\n       * remove-button aria-label, e.g.:\n       *   \"React Dev Remove React Dev from Position\"\n       *\n       * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n       * That level of specificity cannot be achieved automatically through aria attributes alone.\n       *\n       * ## Decision\n       * `aria-live` / `aria-relevant` were removed from this component.\n       * The responsibility for announcing filter changes is delegated to the consumer,\n       * who has access to the full filter state and can compose meaningful messages like:\n       *\n       * e.g: Multi Select Filter\n       *\n       * - \"Filter added: Position: React dev\"\n       * - \"Filter updated: Position: React dev, Fullstack dev\"\n       * - \"Filter removed: Position: React dev, Fullstack dev\"\n       */\n      /*\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\" \n      */\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const matchedColumn = visibleColumns.find((col) => col.accessor === column);\n        const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <DeprecatedDropdown\n          finalIsOpen={finalIsOpen}\n          onFilterBarClose={onFilterBarClose}\n          onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n          onTriggerClick={onTriggerClick}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n  SelectPill,\n  MultiSelectPill,\n  SingleDatePill,\n  DateRangePill,\n  NumberRangePill,\n  DateSwitcherPill,\n  FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { FilterBarMenuButtonAddon } from './FilterBarMenuButtonAddon.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.SELECT_V2]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n  [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n  [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n  [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n  [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n  const width = usePropsStore((state) => state.width);\n  const filterBarProps = usePropsStore((state) => state.filterBarProps);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n  const { filterBarAddonRenderer: FilterBarAddonRenderer, onClearAllFiltersClick } = filterBarProps || {};\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n    onClearAllFiltersClick?.();\n  }, [onFiltersChange, onClearAllFiltersClick]);\n\n  return (\n    <StyledWrapper\n      width={width}\n      /**\n       * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n       * https://jira.elliemae.io/browse/PUI-17317\n       *\n       * ## Problem\n       * Screen reader users received no feedback when filters were added or removed.\n       * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n       * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n       * produced meaningless announcements by concatenating the pill label with its\n       * remove-button aria-label, e.g.:\n       *   \"React Dev Remove React Dev from Position\"\n       *\n       * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n       * That level of specificity cannot be achieved automatically through aria attributes alone.\n       *\n       * ## Decision\n       * `aria-live` / `aria-relevant` were removed from this component.\n       * The responsibility for announcing filter changes is delegated to the consumer,\n       * who has access to the full filter state and can compose meaningful messages like:\n       *\n       * e.g: Multi Select Filter\n       *\n       * - \"Filter added: Position: React dev\"\n       * - \"Filter updated: Position: React dev, Fullstack dev\"\n       * - \"Filter removed: Position: React dev, Fullstack dev\"\n       */\n      /*\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\" \n      */\n      gutter=\"xs\"\n      getOwnerProps={getOwnerProps}\n    >\n      {filters.map(({ id: column, type, value }, index) => {\n        const matchedColumn = visibleColumns.find((col) => col.accessor === column);\n        const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;\n        let Component:\n          | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n          | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n            value={value as any}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      {FilterBarAddonRenderer ? (\n        <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n      ) : (\n        <FilterBarMenuButtonAddon\n          removeAllFilters={removeAllFilters}\n          filterBarProps={filterBarProps}\n          dropdownMenuRef={dropdownMenuRef}\n        />\n      )}\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AA5DJ,mBAAoD;AAEpD,8BAA6B;AAC7B,wBAQO;AACP,oBAA8B;AAC9B,sCAAyC;AAEzC,2CAA8B;AAE9B,MAAM,mBAAmB;AAAA,EACvB,CAAC,qCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,qCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,qCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,qCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,qCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,qCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,qCAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,qCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,qCAAa,mBAAmB,GAAG;AACtC;AAEO,MAAM,aAAkC,MAAM;AACnD,QAAM,YAAQ,oDAAc,CAAC,UAAU,MAAM,KAAK;AAClD,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,cAAU,oDAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAK,aAAAA,QAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,QAAM,sBAAkB,qBAAiC,IAAI;AAE7D,QAAM,EAAE,wBAAwB,wBAAwB,uBAAuB,IAAI,kBAAkB,CAAC;AAEtG,QAAM,uBAAmB,0BAAY,MAAM;AACzC,oBAAgB,CAAC,CAAC;AAClB,6BAAyB;AAAA,EAC3B,GAAG,CAAC,iBAAiB,sBAAsB,CAAC;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MA+BA,QAAO;AAAA,MACP;AAAA,MAEC;AAAA,gBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,MAAM,GAAG,UAAU;AACnD,gBAAM,gBAAgB,eAAe,KAAK,CAAC,QAAQ,IAAI,aAAa,MAAM;AAC1E,gBAAM,eAAe,eAAe,aAAa,eAAe;AAChE,cAAI,YAE6D,MAAM;AAEvE,gBAAM,aAAa;AACnB,cAAI,cAAc,kBAAkB;AAClC,wBAAY,iBAAiB,UAA2C;AAAA,UAC1E,WAAW,gBAAgB,oBAAoB;AAC7C,wBAAY,eAAe;AAAA,UAC7B;AACA,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,cAAc,OAAO,iBAAiB,WAAW,eAAe;AAAA,cAChE;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS,cAAc,QAAQ,CAAC;AAAA,cAChC,UAAU,cAAc,KAAK;AAAA,cAC7B,SAAS,cAAc,QAAQ,CAAC,KAAK;AAAA;AAAA,YAThC;AAAA,UAUP;AAAA,QAEJ,CAAC;AAAA,QACA,yBACC,4CAAC,0BAAuB,UAAU,iBAAiB,IAEnD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/FilterBar/components/MultiSelectPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { cloneDeep } from 'lodash-es';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\ntype MultiSelectPillValues = DSComboboxT.ItemOption[];\n\nexport const MultiSelectPill: React.ComponentType<DSDataTableT.FilterPillProps<MultiSelectPillValues>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n  onPillRemove,\n}) => {\n  const multiSelectedValue = value;\n  const handleOnRemove = useCallback(\n    (valToRemove: DSDataTableT.FilterOptionT) => {\n      const newFilters = cloneDeep(filters);\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n\n      const newFilterValue = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n\n      newFilters[filterIndex].value = newFilterValue;\n      if (newFilterValue.length === 0) {\n        if (onPillRemove) {\n          onPillRemove(() => onFiltersChange(newFilters));\n        } else if (prevRef?.current) prevRef.current.focus();\n        else nextRef?.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, onPillRemove, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : undefined}\n          dsPillPillButton={{\n            dsButtonRoot: { 'aria-label': `Remove ${val.label} from ${columnHeader}` },\n          }}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAxCJ,mBAAmC;AACnC,uBAA0B;AAC1B,yBAAwC;AAMjC,MAAM,kBAA4F,CAAC;AAAA,EACxG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAC3B,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAA4C;AAC3C,YAAM,iBAAa,4BAAU,OAAO;AACpC,YAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AAEzE,YAAM,iBAAiB,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAEvF,iBAAW,WAAW,EAAE,QAAQ;AAChC,UAAI,eAAe,WAAW,GAAG;AAC/B,YAAI,cAAc;AAChB,uBAAa,MAAM,gBAAgB,UAAU,CAAC;AAAA,QAChD,WAAW,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,YAC9C,UAAS,SAAS,MAAM;AAC7B,mBAAW,OAAO,aAAa,CAAC;AAAA,MAClC;AACA,sBAAgB,UAAU;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB,cAAc,QAAQ,SAAS,OAAO;AAAA,EACvF;AACA,SAAO,oBAAoB,SACzB,6CAAC,oCACC;AAAA,gDAAC,+BAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,IAAI;AAAA,QACX,UAAU,MAAM,eAAe,GAAG;AAAA,QAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW;AAAA,QAC/D,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,IAAI,KAAK,SAAS,YAAY,GAAG;AAAA,QAC3E;AAAA;AAAA,MAPK,IAAI;AAAA,IAQX,CACD;AAAA,KACH,IACE;AACN;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { cloneDeep } from 'lodash-es';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const MultiSelectPill: React.ComponentType<DSDataTableT.FilterPillProps<DSDataTableT.MultiSelectPillValues>> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n  onPillRemove,\n}) => {\n  const multiSelectedValue = value;\n  const handleOnRemove = useCallback(\n    (valToRemove: DSDataTableT.FilterOptionT) => {\n      const newFilters = cloneDeep(filters);\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n\n      const newFilterValue = multiSelectedValue.filter((val) => val.dsId !== valToRemove.dsId);\n\n      newFilters[filterIndex].value = newFilterValue;\n      if (newFilterValue.length === 0) {\n        if (onPillRemove) {\n          onPillRemove(() => onFiltersChange(newFilters));\n        } else if (prevRef?.current) prevRef.current.focus();\n        else nextRef?.current?.focus();\n        newFilters.splice(filterIndex, 1);\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, multiSelectedValue, onFiltersChange, onPillRemove, column, prevRef, nextRef],\n  );\n  return multiSelectedValue?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {multiSelectedValue.map((val, index) => (\n        <DSPillV2\n          key={val.dsId}\n          type=\"removable\"\n          label={val.label}\n          onRemove={() => handleOnRemove(val)}\n          innerRef={index === multiSelectedValue.length - 1 ? innerRef : undefined}\n          dsPillPillButton={{\n            dsButtonRoot: { 'aria-label': `Remove ${val.label} from ${columnHeader}` },\n          }}\n        />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AArCJ,mBAAmC;AACnC,uBAA0B;AAC1B,yBAAwC;AAGjC,MAAM,kBAAyG,CAAC;AAAA,EACrH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAC3B,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAA4C;AAC3C,YAAM,iBAAa,4BAAU,OAAO;AACpC,YAAM,cAAc,WAAW,UAAU,CAAC,WAAW,OAAO,OAAO,MAAM;AAEzE,YAAM,iBAAiB,mBAAmB,OAAO,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI;AAEvF,iBAAW,WAAW,EAAE,QAAQ;AAChC,UAAI,eAAe,WAAW,GAAG;AAC/B,YAAI,cAAc;AAChB,uBAAa,MAAM,gBAAgB,UAAU,CAAC;AAAA,QAChD,WAAW,SAAS,QAAS,SAAQ,QAAQ,MAAM;AAAA,YAC9C,UAAS,SAAS,MAAM;AAC7B,mBAAW,OAAO,aAAa,CAAC;AAAA,MAClC;AACA,sBAAgB,UAAU;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB,cAAc,QAAQ,SAAS,OAAO;AAAA,EACvF;AACA,SAAO,oBAAoB,SACzB,6CAAC,oCACC;AAAA,gDAAC,+BAAS,MAAK,SAAQ,OAAO,cAAc;AAAA,IAC3C,mBAAmB,IAAI,CAAC,KAAK,UAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,IAAI;AAAA,QACX,UAAU,MAAM,eAAe,GAAG;AAAA,QAClC,UAAU,UAAU,mBAAmB,SAAS,IAAI,WAAW;AAAA,QAC/D,kBAAkB;AAAA,UAChB,cAAc,EAAE,cAAc,UAAU,IAAI,KAAK,SAAS,YAAY,GAAG;AAAA,QAC3E;AAAA;AAAA,MAPK,IAAI;AAAA,IAQX,CACD;AAAA,KACH,IACE;AACN;",
   "names": []
 }

package/dist/cjs/{configs/fixedSizes.js → parts/FilterBar/convertExtraOptions.js}

@@ -26,13 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var fixedSizes_exports = {};
-__export(fixedSizes_exports, {
-  FIXED_SIZES: () => FIXED_SIZES
+var convertExtraOptions_exports = {};
+__export(convertExtraOptions_exports, {
+  convertExtraOptionsToMenuButtonOptions: () => convertExtraOptionsToMenuButtonOptions
 });
-module.exports = __toCommonJS(fixedSizes_exports);
+module.exports = __toCommonJS(convertExtraOptions_exports);
 var React = __toESM(require("react"));
-const FIXED_SIZES = {
-  PAGINATION_HEIGHT: 42
-};
-//# sourceMappingURL=fixedSizes.js.map
+var import_ds_menu_button = require("@elliemae/ds-menu-button");
+const convertExtraOptionsToMenuButtonOptions = (extraOptions) => (extraOptions ?? []).map((option) => {
+  if (option.type === "separator") return { type: import_ds_menu_button.MENU_ITEMS_TYPES.SEPARATOR, dsId: option.id };
+  return {
+    type: import_ds_menu_button.MENU_ITEMS_TYPES.ACTIVABLE_ITEM,
+    dsId: option.id,
+    label: option.label,
+    value: option.id,
+    onClick: option.onClick
+  };
+});
+//# sourceMappingURL=convertExtraOptions.js.map

package/dist/cjs/parts/FilterBar/convertExtraOptions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/FilterBar/convertExtraOptions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { MENU_ITEMS_TYPES, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport type ExtraOptionT = NonNullable<NonNullable<DSDataTableT.Props['filterBarProps']>['extraOptions']>[number];\n\n/**\n * `filterBarProps.extraOptions` is a flat list of `{ type, id, label, onClick }`. It becomes `DSMenuButton` items:\n * `separator` stays a separator, anything else is an action (submenus and selections were never part of the contract).\n */\nexport const convertExtraOptionsToMenuButtonOptions = (\n  extraOptions: readonly ExtraOptionT[] | undefined,\n): DSMenuButtonT.MenuItemInterface[] =>\n  (extraOptions ?? []).map((option) => {\n    if (option.type === 'separator') return { type: MENU_ITEMS_TYPES.SEPARATOR, dsId: option.id };\n    return {\n      type: MENU_ITEMS_TYPES.ACTIVABLE_ITEM,\n      dsId: option.id,\n      label: option.label,\n      value: option.id,\n      onClick: option.onClick,\n    };\n  });\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAAqD;AAS9C,MAAM,yCAAyC,CACpD,kBAEC,gBAAgB,CAAC,GAAG,IAAI,CAAC,WAAW;AACnC,MAAI,OAAO,SAAS,YAAa,QAAO,EAAE,MAAM,uCAAiB,WAAW,MAAM,OAAO,GAAG;AAC5F,SAAO;AAAA,IACL,MAAM,uCAAiB;AAAA,IACvB,MAAM,OAAO;AAAA,IACb,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,SAAS,OAAO;AAAA,EAClB;AACF,CAAC;",
+  "names": []
+}

package/dist/cjs/parts/Headers/EmptyChildrenGroup.js

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(EmptyChildrenGroup_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
 var import_constants = require("../../constants/index.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const StyledBox = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.EMPTY_HEADER })`
@@ -41,8 +42,9 @@ const StyledBox = (0, import_ds_system.styled)("div", { name: import_constants.D
   margin: 0 ${(props) => props.theme.space.xxs};
   border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};
 `;
-const EmptyChildrenGroup = () => {
+const EmptyChildrenGroup = ({ columnId }) => {
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledBox, { getOwnerProps });
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({ columnId }), [columnId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledBox, { getOwnerProps, getOwnerPropsArguments });
 };
 //# sourceMappingURL=EmptyChildrenGroup.js.map

package/dist/cjs/parts/Headers/EmptyChildrenGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/EmptyChildrenGroup.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledBox = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return <StyledBox getOwnerProps={getOwnerProps} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADad;AAbT,uBAAuB;AAEvB,uBAAkD;AAClD,2CAA8B;AAE9B,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,aAAa,CAAC;AAAA;AAAA,cAEhF,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,qBAAiE,MAAM;AAClF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SAAO,4CAAC,aAAU,eAA8B;AAClD;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React, { useCallback } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledBox = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<{ columnId: string }> = ({ columnId }) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => ({ columnId }), [columnId]);\n  return <StyledBox getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcd;AAdT,uBAAuB;AACvB,mBAAmC;AACnC,uBAAkD;AAClD,2CAA8B;AAE9B,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,aAAa,CAAC;AAAA;AAAA,cAEhF,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,qBAAgE,CAAC,EAAE,SAAS,MAAM;AAC7F,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,OAAO,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAC3E,SAAO,4CAAC,aAAU,eAA8B,wBAAgD;AAClG;",
   "names": []
 }

package/dist/cjs/parts/Headers/HeaderCell.js

@@ -132,18 +132,36 @@ const HeaderCell = (props) => {
     handleSort
   ]);
   const DnDHandleComponent = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", height: "fit-content", py: "2px", mt: "2px", alignItems: "flex-start", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_DnDHandle.DragHandle,
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", height: "fit-content", py: "2px", mt: "2px", alignItems: "flex-start", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledFocusWithin,
       {
-        innerRef: dragHandleRef,
-        isReachable: reduxHeader?.withTabStops ?? false,
-        id: `header-dnd-handle-${column.id}-${domIdAffix}`,
-        isDragOverlay,
-        isDisabled: disabledRows[column.id]
-      },
-      column.id
-    ) }) }),
-    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops]
+        hideFocus: isDragging,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DnDHandle.DragHandle,
+          {
+            innerRef: dragHandleRef,
+            isReachable: reduxHeader?.withTabStops ?? false,
+            id: `header-dnd-handle-${column.id}-${domIdAffix}`,
+            isDragOverlay,
+            isDisabled: disabledRows[column.id],
+            columnId: column.id
+          },
+          column.id
+        )
+      }
+    ) }),
+    [
+      column.id,
+      disabledRows,
+      domIdAffix,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      isDragOverlay,
+      isDragging,
+      reduxHeader?.withTabStops
+    ]
   );
   const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
   const instructions = (0, import_buildScreenReaderInstructions.buildScreenReaderInstructions)({

package/dist/cjs/parts/Headers/HeaderCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { buildScreenReaderInstructions } from './buildScreenReaderInstructions.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\n\n/** Screen-reader instructions node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n      firstFocuseableColumnHeaderId,\n    }),\n    [column.id, firstFocuseableColumnHeaderId],\n  );\n  const reference = useRef<HTMLDivElement | null>(null);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLDivElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n    referenceColumn: reference,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <FilterMapItem\n          column={column}\n          referenceColumn={!isDragOverlay ? reference.current : undefined}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [\n    hasRightIcons,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    column,\n    isDragOverlay,\n    onFiltersChange,\n    reduxHeader,\n    filters,\n    hasSortingCaret,\n    handleSort,\n  ]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" height=\"fit-content\" py=\"2px\" mt=\"2px\" alignItems=\"flex-start\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n  const instructions = buildScreenReaderInstructions({\n    colSpan,\n    draggable: dragAndDropColumns && column.disableDnD !== true,\n    filterable: hasFilter,\n    sortable: column.canSort ?? false,\n    resizable: shouldShowResize,\n  });\n\n  const headTh = (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={reference}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      {/* Screen-reader instructions referenced by aria-describedby. display:none keeps them out of\n          the header's name-from-content (so they are not read twice) while still being announced as\n          the description \u2014 the same pattern used for filterable/sortable columns. */}\n      <span id={screenReaderInstructionsId} style={HIDDEN_STYLE}>\n        {instructions}\n      </span>\n    </StyledHeadTh>\n  );\n\n  return headTh;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { buildScreenReaderInstructions } from './buildScreenReaderInstructions.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\n/** Screen-reader instructions node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\n\nexport const HeaderCell: React.ComponentType<DSDataTableT.HeaderCellCompProps> = (props) => {\n  const { column, isDragOverlay, colSpan } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const filters = usePropsStore((state) => state.filters);\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n      firstFocuseableColumnHeaderId,\n    }),\n    [column.id, firstFocuseableColumnHeaderId],\n  );\n  const reference = useRef<HTMLDivElement | null>(null);\n\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const filterIconRef = useRef<HTMLButtonElement | null>(null);\n  const resizeHandlerRef = useRef<HTMLDivElement | null>(null);\n  const sortRef = useRef<HTMLButtonElement | null>(null);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n    useHeaderCellConfig(props);\n\n  const { handleSort, ...handlers } = useHeaderCellHandlers({\n    hasFilter,\n    column,\n    hasDnD,\n    dragHandleRef,\n    filterIconRef,\n    resizeHandlerRef,\n    sortRef,\n    hasSortingCaret,\n    isDragOverlay,\n    draggableProps,\n    referenceColumn: reference,\n  });\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <FilterMapItem\n          column={column}\n          referenceColumn={!isDragOverlay ? reference.current : undefined}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filters={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && (\n          <SortByCaret\n            isSortedDesc={column.isSortedDesc}\n            onClick={(e) => {\n              e.stopPropagation();\n              handleSort(e as React.MouseEvent);\n            }}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            column={column}\n            reduxHeader={reduxHeader}\n            innerRef={sortRef}\n          />\n        )}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [\n    hasRightIcons,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    column,\n    isDragOverlay,\n    onFiltersChange,\n    reduxHeader,\n    filters,\n    hasSortingCaret,\n    handleSort,\n  ]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" height=\"fit-content\" py=\"2px\" mt=\"2px\" alignItems=\"flex-start\" style={{ position: 'relative' }}>\n        <StyledFocusWithin\n          hideFocus={isDragging}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <DragHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops ?? false}\n            id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n            isDragOverlay={isDragOverlay}\n            isDisabled={disabledRows[column.id]}\n            columnId={column.id}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [\n      column.id,\n      disabledRows,\n      domIdAffix,\n      getOwnerProps,\n      getOwnerPropsArguments,\n      isDragOverlay,\n      isDragging,\n      reduxHeader?.withTabStops,\n    ],\n  );\n\n  const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n  const instructions = buildScreenReaderInstructions({\n    colSpan,\n    draggable: dragAndDropColumns && column.disableDnD !== true,\n    filterable: hasFilter,\n    sortable: column.canSort ?? false,\n    resizable: shouldShowResize,\n  });\n\n  const headTh = (\n    <StyledHeadTh\n      column={column}\n      onClick={handleSort}\n      {...handlers}\n      role=\"columnheader\"\n      {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n        ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n        : {})}\n      aria-describedby={screenReaderInstructionsId}\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n      shouldShowDnD={shouldShowDnD}\n      innerRef={reference}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {shouldShowResize && (\n          <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n        )}\n      </Grid>\n      {/* Screen-reader instructions referenced by aria-describedby. display:none keeps them out of\n          the header's name-from-content (so they are not read twice) while still being announced as\n          the description \u2014 the same pattern used for filterable/sortable columns. */}\n      <span id={screenReaderInstructionsId} style={HIDDEN_STYLE}>\n        {instructions}\n      </span>\n    </StyledHeadTh>\n  );\n\n  return headTh;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }