npm - @elliemae/ds-data-table - Versions diffs - 3.70.0-next.4 → 3.70.0-next.41 - Mend

@elliemae/ds-data-table 3.70.0-next.4 → 3.70.0-next.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/dist/cjs/TruncatedTooltipText.js CHANGED Viewed

@@ -45,13 +45,15 @@ const TruncatedSpan = import_ds_system.styled.span`
   max-width: 100%;
 `;
 const TooltipContainer = import_ds_system.styled.div`
-  text-align: left;
+  text-align: center;
   min-width: ${({ theme }) => theme.space.l};
   max-width: 250px;
+  overflow-wrap: break-word;
+  word-break: break-word;
   min-height: 30px;
   display: grid;
   align-items: center;
-  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
   position: relative;
   background-color: white;
   border-radius: 2px;

package/dist/cjs/TruncatedTooltipText.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: left;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  // Accepts ReactNode so JSX cell renderers can be passed as value\n  value?: React.ReactNode;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2DnB;AA3DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAUnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  // Accepts ReactNode so JSX cell renderers can be passed as value\n  value?: React.ReactNode;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DnB;AA7DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAUnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
   "names": []
 }

package/dist/cjs/addons/Editables/index.js.map CHANGED Viewed

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

package/dist/cjs/configs/useAutocalculated/index.js CHANGED Viewed

@@ -40,13 +40,25 @@ var import_usePaginationConfig = require("../usePaginationConfig.js");
 var import_columnsToGrid = require("../../helpers/columnsToGrid.js");
 var import_constants = require("../constants.js");
 var import_useTableResizeCb = require("../useTableResizeCb.js");
+var import_useNativeResizeObserver = require("../useNativeResizeObserver.js");
 const estimateSize = () => 36;
 const useAutoCalculated = (propsWithDefaults) => {
   const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;
   const virtualListRef = (0, import_react.useRef)(null);
   const [bodyClientWidth, setBodyClientWidth] = import_react.default.useState("100%");
   const columnHeaderRef = (0, import_react.useRef)(null);
+  const [headerHeightPx, setHeaderHeightPx] = import_react.default.useState(24);
   const lastSelected = (0, import_react.useRef)(-1);
+  const columnHeaderCallbackRef = import_react.default.useCallback((node) => {
+    columnHeaderRef.current = node;
+    if (node) setHeaderHeightPx(node.getBoundingClientRect().height);
+  }, []);
+  (0, import_useNativeResizeObserver.useNativeResizeObserver)(
+    columnHeaderRef.current,
+    import_react.default.useCallback((entry) => {
+      setHeaderHeightPx(entry.contentRect.height);
+    }, [])
+  );
   const visibleColumns = (0, import_useTableColsWithAddons.useTableColsWithAddons)(propsWithDefaults, hiddenColumns);
   const [flattenedData, allDataFlattened] = (0, import_useRowFlattenization.useRowFlattenization)(propsWithDefaults);
   const [paginatedData, paginationHelpers] = (0, import_usePaginationConfig.usePaginationConfig)(propsWithDefaults, flattenedData);
@@ -56,7 +68,7 @@ const useAutoCalculated = (propsWithDefaults) => {
     size: dataLength,
     parentRef: virtualListRef,
     overscan: 15,
-    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,
+    paddingStart: headerHeightPx,
     estimateSize,
     rangeExtractor: import_react.default.useCallback((range) => {
       visibleRangeRef.current = range;
@@ -108,6 +120,8 @@ const useAutoCalculated = (propsWithDefaults) => {
     firstFocuseableColumnHeaderId,
     virtualListRef,
     columnHeaderRef,
+    columnHeaderCallbackRef,
+    headerHeightPx,
     lastSelected,
     bodyClientWidth,
     setBodyClientWidth

package/dist/cjs/configs/useAutocalculated/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/configs/useAutocalculated/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const [bodyClientWidth, setBodyClientWidth] = React.useState<number | string>('100%');\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const lastSelected = useRef<number>(-1);\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // when rangeExtractor is invoked this will be filled with the current range\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0, overscan: 15, size: dataLength });\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({\n    virtualListRef,\n    measureVirtualList: virtualListHelpers.measure,\n    propsWithDefault: propsWithDefaults,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    lastSelected,\n    bodyClientWidth,\n    setBodyClientWidth,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAkD;AAClD,2BAA8D;AAE9D,oCAAuC;AACvC,kCAAqC;AACrC,iCAAoC;AACpC,2BAA8B;AAC9B,uBAAgC;AAChC,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAEpB,MAAM,oBAAoB,CAAC,sBAAmF;AACnH,QAAM,EAAE,WAAW,iBAAiB,eAAe,UAAU,IAAI;AAEjE,QAAM,qBAAiB,qBAA8B,IAAI;AACzD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAA0B,MAAM;AACpF,QAAM,sBAAkB,qBAA8B,IAAI;AAC1D,QAAM,mBAAe,qBAAe,EAAE;AAKtC,QAAM,qBAAiB,sDAAuB,mBAAmB,aAAa;AAM9E,QAAM,CAAC,eAAe,gBAAgB,QAAI,kDAAqB,iBAAiB;AAEhF,QAAM,CAAC,eAAe,iBAAiB,QAAI,gDAAoB,mBAAmB,aAAa;AAE/F,QAAM,iBAAa,sBAAQ,OAAO,iBAAiB,eAAe,QAAQ,CAAC,eAAe,aAAa,CAAC;AAGxG,QAAM,sBAAkB,qBAAc,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,IAAI,MAAM,WAAW,CAAC;AAG1F,QAAM,yBAAqB,iCAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,IAC1E;AAAA,IACA,gBAAgB,aAAAA,QAAM,YAAY,CAAC,UAAiB;AAClD,sBAAgB,UAAU;AAE1B,iBAAO,4CAAsB,KAAK;AAAA,IACpC,GAAG,CAAC,CAAC;AAAA,EACP,CAAC;AAMD,QAAM,qBAAiB,sBAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,oCAAgC,sBAAQ,MAAM;AAClD,aAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,YAAM,SAAS,eAAe,CAAC;AAC/B,UAAI,OAAO,iBAAiB,SAAS,OAAO,OAAO,cAAc,OAAO,OAAO,iBAAiB;AAC9F;AAAA,MACF;AACA,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,iBAAa,sBAAQ,UAAM,oCAAc,gBAAgB,eAAe,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAGlH,QAAM,wBAAoB;AAAA,IACxB,MACE,oBAAoB,iCAAgB,QAChC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF;AAAA,IACN,CAAC,iBAAiB,UAAU;AAAA,EAC9B;AAEA,QAAM,oBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AAEA,gDAAiB;AAAA,IACf;AAAA,IACA,oBAAoB,mBAAmB;AAAA,IACvC,kBAAkB;AAAA,EACpB,CAAC;AAKD,8BAAU,MAAM;AACd,QAAI,WAAW;AACb,gBAAU,QAAQ,gBAAgB,mBAAmB;AACrD,gBAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAEnF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-continue */\n/* eslint-disable consistent-return */\n/* eslint-disable no-plusplus */\n/* eslint-disable max-statements */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useVirtual, defaultRangeExtractor, type Range } from 'react-virtual';\nimport { type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useTableColsWithAddons } from '../useTableColsWithAddons.js';\nimport { useRowFlattenization } from '../useRowFlattenization.js';\nimport { usePaginationConfig } from '../usePaginationConfig.js';\nimport { columnsToGrid } from '../../helpers/columnsToGrid.js';\nimport { ColsLayoutStyle } from '../constants.js';\nimport { useTableResizeCb } from '../useTableResizeCb.js';\nimport { useNativeResizeObserver } from '../useNativeResizeObserver.js';\n\nconst estimateSize = () => 36;\n\nexport const useAutoCalculated = (propsWithDefaults: DSDataTableT.InternalProps): DSDataTableT.UseAutoCalculatedT => {\n  const { actionRef, colsLayoutStyle, hiddenColumns, isLoading } = propsWithDefaults;\n\n  const virtualListRef = useRef<HTMLDivElement | null>(null);\n  const [bodyClientWidth, setBodyClientWidth] = React.useState<number | string>('100%');\n  const columnHeaderRef = useRef<HTMLDivElement | null>(null);\n  const [headerHeightPx, setHeaderHeightPx] = React.useState(24);\n  const lastSelected = useRef<number>(-1);\n\n  const columnHeaderCallbackRef = React.useCallback((node: HTMLDivElement | null) => {\n    columnHeaderRef.current = node;\n    if (node) setHeaderHeightPx(node.getBoundingClientRect().height);\n  }, []);\n\n  useNativeResizeObserver(\n    columnHeaderRef.current,\n    React.useCallback((entry) => {\n      setHeaderHeightPx(entry.contentRect.height);\n    }, []),\n  );\n\n  // ===========================================================================\n  // Column config\n  // ===========================================================================\n  const visibleColumns = useTableColsWithAddons(propsWithDefaults, hiddenColumns);\n\n  // ===========================================================================\n  // Data flattenization and pagination\n  // ===========================================================================\n\n  const [flattenedData, allDataFlattened] = useRowFlattenization(propsWithDefaults);\n\n  const [paginatedData, paginationHelpers] = usePaginationConfig(propsWithDefaults, flattenedData);\n\n  const dataLength = useMemo(() => (paginatedData || flattenedData).length, [flattenedData, paginatedData]);\n\n  // when rangeExtractor is invoked this will be filled with the current range\n  const visibleRangeRef = useRef<Range>({ start: 0, end: 0, overscan: 15, size: dataLength });\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const virtualListHelpers = useVirtual({\n    size: dataLength,\n    parentRef: virtualListRef,\n    overscan: 15,\n    paddingStart: headerHeightPx,\n    estimateSize,\n    rangeExtractor: React.useCallback((range: Range) => {\n      visibleRangeRef.current = range;\n\n      return defaultRangeExtractor(range);\n    }, []),\n  });\n\n  // ===========================================================================\n  // Empty content config\n  // ===========================================================================\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const firstFocuseableColumnHeaderId = useMemo(() => {\n    for (let i = 0; i < visibleColumns.length; i++) {\n      const column = visibleColumns[i];\n      if (column.isFocuseable === false && column.id !== 'expander' && column.id !== 'multiSelecter') {\n        continue;\n      }\n      return column.id;\n    }\n  }, [visibleColumns]);\n\n  // ===========================================================================\n  // Layout config\n  // ===========================================================================\n\n  const gridLayout = useMemo(() => columnsToGrid(visibleColumns, colsLayoutStyle), [colsLayoutStyle, visibleColumns]);\n\n  // We need to listen and update the state based on this props\n  const totalColumnsWidth = useMemo(\n    () =>\n      colsLayoutStyle === ColsLayoutStyle.Fixed\n        ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n        : '100%',\n    [colsLayoutStyle, gridLayout],\n  );\n\n  const layoutHelpers = useMemo(\n    () => ({\n      gridLayout,\n      totalColumnsWidth,\n    }),\n    [gridLayout, totalColumnsWidth],\n  );\n\n  useTableResizeCb({\n    virtualListRef,\n    measureVirtualList: virtualListHelpers.measure,\n    propsWithDefault: propsWithDefaults,\n  });\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n      actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n    }\n  }, [actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n  return {\n    visibleRangeRef,\n    layoutHelpers,\n    paginationHelpers,\n    visibleColumns,\n    virtualListHelpers,\n    flattenedData: paginatedData || flattenedData,\n    allDataFlattened,\n    isEmptyContent,\n    firstFocuseableColumnHeaderId,\n    virtualListRef,\n    columnHeaderRef,\n    columnHeaderCallbackRef,\n    headerHeightPx,\n    lastSelected,\n    bodyClientWidth,\n    setBodyClientWidth,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js CHANGED Viewed

@@ -42,7 +42,6 @@ var import_createInternalAndPropsContext = require("../../configs/useStore/creat
 var import_constants = require("../../constants/index.js");
 var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
 var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
-var import_useOnClickOutside = require("./useOnClickOutside.js");
 var import_styled = require("./styled.js");
 const FilterPopoverV2 = (props) => {
   const {
@@ -78,20 +77,16 @@ const FilterPopoverV2 = (props) => {
     context
   } = (0, import_ds_floating_context.useFloatingContext)({
     externallyControlledIsOpen: isMenuOpen,
+    externalReferenceElement: columnReference,
     placement: "bottom-end",
     withoutAnimation: true,
-    customOffset: [0, 0]
+    customOffset: [0, 0],
+    onClickOutside: handleClickOutsideMenu
   });
-  (0, import_useOnClickOutside.useOnClickOutside)(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
   const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
     firstElementRef,
     lastElementRef
   });
-  (0, import_react.useEffect)(() => {
-    if (columnReference) {
-      refs.setReference(columnReference);
-    }
-  }, [columnReference, refs]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { useOnClickOutside } from './useOnClickOutside.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    onFilterSubmit,\n    onFilterReset,\n  } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const lastElementRef = useRef<HTMLButtonElement>(null);\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    floatingStyles,\n    isOpen: isFloatingOpen,\n    refs,\n    context,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    placement: 'bottom-end',\n    withoutAnimation: true,\n    customOffset: [0, 0],\n  });\n\n  useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  useEffect(() => {\n    if (columnReference) {\n      refs.setReference(columnReference);\n    }\n  }, [columnReference, refs]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV3\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onKeyDown={handleMenuOnKeyDown}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV3>\n      </FilterButton>\n      {refs.reference && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: 'min-content',\n          }}\n          context={context}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-label={`Filter by ${column.Header as string}`}\n          role=\"dialog\"\n        >\n          <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n            <form onSubmit={onFilterSubmit}>\n              {menuContent}\n              <StyledDSDialogFooter>\n                <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n                  Reset\n                </DSButtonV3>\n                <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n                  Apply\n                </DSButtonV3>\n              </StyledDSDialogFooter>\n            </form>\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    onFilterSubmit,\n    onFilterReset,\n  } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const lastElementRef = useRef<HTMLButtonElement>(null);\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    floatingStyles,\n    isOpen: isFloatingOpen,\n    refs,\n    context,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement: columnReference,\n    placement: 'bottom-end',\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: handleClickOutsideMenu,\n  });\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV3\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onKeyDown={handleMenuOnKeyDown}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV3>\n      </FilterButton>\n      {refs.reference && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: 'min-content',\n          }}\n          context={context}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-label={`Filter by ${column.Header as string}`}\n          role=\"dialog\"\n        >\n          <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n            <form onSubmit={onFilterSubmit}>\n              {menuContent}\n              <StyledDSDialogFooter>\n                <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n                  Reset\n                </DSButtonV3>\n                <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n                  Apply\n                </DSButtonV3>\n              </StyledDSDialogFooter>\n            </form>\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/exported-related/FilterPopover/index.js CHANGED Viewed

@@ -35,25 +35,14 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = require("react");
 var import_constants = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
-var import_constants2 = require("../../constants/index.js");
 var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
 var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
-const FilterButton = (0, import_ds_system.styled)("span", { name: import_constants2.DSDataTableName, slot: import_constants2.DSDataTableSlots.FILTER_POPOVER_BUTTON })`
-  display: inline-grid;
-  ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
-`;
-const PopperContent = (0, import_ds_system.styled)("div", { name: import_constants2.DSDataTableName, slot: import_constants2.DSDataTableSlots.FILTER_POPOVER_CONTENT })`
-  background-color: #fff;
-`;
-const StyledPoppoverJS = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
-  name: import_constants2.DSDataTableName,
-  slot: import_constants2.DSDataTableSlots.FILTER_POPOVER
-})``;
+var import_styled = require("./styled.js");
 const FilterPopover = (props) => {
   const {
     column,
@@ -79,17 +68,31 @@ const FilterPopover = (props) => {
   const [buttonReference, setButtonReference] = (0, import_react.useState)(null);
   const [isButtonFocused, setIsButtonFocused] = (0, import_react.useState)(false);
   const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } = (0, import_useGetFilterHandlers.useGetFilterHandlers)(props, isMenuOpen, buttonReference, setIsButtonFocused);
-  const actionRef = (0, import_react.useRef)({
-    update: null
+  const floatingOffset = (0, import_react.useMemo)(() => columnReference ? [0, 1] : [5, 4], [columnReference]);
+  const externalReferenceElement = columnReference || buttonReference;
+  const {
+    refs,
+    floatingStyles,
+    context,
+    isOpen: isFloatingOpen,
+    forceUpdatePosition
+  } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: isMenuOpen,
+    externalReferenceElement,
+    placement: "bottom-end",
+    customOffset: floatingOffset,
+    withoutAnimation: true,
+    placementOrderPreference: ["bottom-end", "top-end"],
+    onClickOutside: handleClickOutsideMenu
   });
+  (0, import_react.useEffect)(() => {
+    void forceUpdatePosition();
+  }, [filters, forceUpdatePosition]);
   const popoverContentRef = (0, import_react.useRef)(null);
   const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
     firstElementRef,
     lastElementRef
   });
-  (0, import_react.useEffect)(() => {
-    void actionRef.current.update?.();
-  }, [filters]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -97,7 +100,7 @@ const FilterPopover = (props) => {
       onKeyDown: handleMenuOnKeyDown,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          FilterButton,
+          import_styled.FilterButton,
           {
             hide: !isIconVisible,
             "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_BUTTON,
@@ -121,27 +124,22 @@ const FilterPopover = (props) => {
           }
         ),
         (columnReference || buttonReference) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledPoppoverJS,
+          import_styled.StyledFloatingWrapper,
           {
-            actionRef,
-            referenceElement: columnReference || buttonReference,
-            showPopover: isMenuOpen,
-            closeContextMenu: handleClickOutsideMenu,
-            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
-            startPlacementPreference: "bottom-end",
-            customOffset: columnReference ? [0, 1] : [5, 4],
-            withoutArrow: true,
-            withoutAnimation: true,
-            extraPopperStyles: {
+            innerRef: refs.setFloating,
+            isOpen: isFloatingOpen,
+            floatingStyles: {
+              ...floatingStyles,
               ...customStyles,
               minWidth: column.ref?.current?.offsetWidth ?? "0px"
             },
-            placementOrderPreference: ["bottom-end", "top-end"],
+            context,
+            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
             getOwnerProps,
             getOwnerPropsArguments,
             role: "dialog",
             "aria-label": `Filter by ${column.Header}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
           }
         )
       ]

package/dist/cjs/exported-related/FilterPopover/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterPopover/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n  hide: boolean;\n}>`\n  display: inline-grid;\n  ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nconst StyledPoppoverJS = styled(DSPopperJS, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FILTER_POPOVER,\n})``;\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    lastElementRef,\n  } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\n  });\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  useEffect(() => {\n    // When the filters change, we need to update the popper position,\n    // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n    void actionRef.current.update?.();\n  }, [filters]);\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {(columnReference || buttonReference) && (\n        <StyledPoppoverJS\n          actionRef={actionRef}\n          referenceElement={columnReference || buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={columnReference ? [0, 1] : [5, 4]}\n          withoutArrow\n          withoutAnimation\n          extraPopperStyles={{\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          placementOrderPreference={['bottom-end', 'top-end']}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          role=\"dialog\"\n          aria-label={`Filter by ${column.Header as string}`}\n        >\n          <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n            {menuContent}\n          </PopperContent>\n        </StyledPoppoverJS>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFnB;AA/EJ,0BAA2B;AAC3B,iCAA6B;AAE7B,yBAA2B;AAC3B,uBAAkC;AAClC,mBAAgE;AAChE,uBAA4B;AAC5B,2CAA8B;AAC9B,IAAAA,oBAAkD;AAElD,kCAAqC;AACrC,oCAAuC;AAEvC,MAAM,mBAAe,yBAAO,QAAQ,EAAE,MAAM,mCAAiB,MAAM,mCAAiB,sBAAsB,CAAC;AAAA;AAAA,IAIvG,CAAC,UAAW,MAAM,OAAO,yCAAyC,EAAG;AAAA;AAGzE,MAAM,oBAAgB,yBAAO,OAAO,EAAE,MAAM,mCAAiB,MAAM,mCAAiB,uBAAuB,CAAC;AAAA;AAAA;AAI5G,MAAM,uBAAmB,yBAAO,+BAAY;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,mCAAiB;AACzB,CAAC;AAEM,MAAM,gBAAyD,CAAC,UAA8B;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAU,oDAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,EAAE,eAAe,WAAW,QAAI,sDAAuB,WAAW;AAExE,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAmC,IAAI;AAErF,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,QACjH,kDAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,gBAAsD,qBAAO;AAAA,IACjE,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,QAAM,sBAAkB,yCAAa;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AAGd,SAAK,UAAU,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAClC,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC;AAAA,YACP,eAAa,6BAAY;AAAA,YACzB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,cAAU,4BAAU,iBAAiB,oBAAoB,QAAQ;AAAA,gBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,gBAC1C,cAAY;AAAA,gBACZ,eAAa,CAAC;AAAA,gBACd,eAAa,6BAAY;AAAA,gBAExB;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA,SACE,mBAAmB,oBACnB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,kBAAkB,mBAAmB;AAAA,YACrC,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB,eAAa,6BAAY;AAAA,YACzB,0BAAyB;AAAA,YACzB,cAAc,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAAA,YAC9C,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,mBAAmB;AAAA,cACjB,GAAG;AAAA,cACH,UAAU,OAAO,KAAK,SAAS,eAAe;AAAA,YAChD;AAAA,YACA,0BAA0B,CAAC,cAAc,SAAS;AAAA,YAClD;AAAA,YACA;AAAA,YACA,MAAK;AAAA,YACL,cAAY,aAAa,OAAO,MAAgB;AAAA,YAEhD,sDAAC,iBAAc,eAA8B,UAAU,mBAAmB,WAAW,iBAClF,uBACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
-  "names": ["import_constants"]
+  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    lastElementRef,\n  } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n  const externalReferenceElement = columnReference || buttonReference;\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n    forceUpdatePosition,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement,\n    placement: 'bottom-end',\n    customOffset: floatingOffset,\n    withoutAnimation: true,\n    placementOrderPreference: ['bottom-end', 'top-end'],\n    onClickOutside: handleClickOutsideMenu,\n  });\n\n  // When the filter bar changes height, re-compute the floating position\n  useEffect(() => {\n    void forceUpdatePosition();\n  }, [filters, forceUpdatePosition]);\n\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {(columnReference || buttonReference) && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          context={context}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          role=\"dialog\"\n          aria-label={`Filter by ${column.Header as string}`}\n        >\n          <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n            {menuContent}\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
 }

package/dist/cjs/parts/Cells/Cell.js CHANGED Viewed

@@ -34,13 +34,13 @@ module.exports = __toCommonJS(Cell_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_react = __toESM(require("react"));
 var import_Columns = require("../../addons/Columns/index.js");
 var import_Editables = require("../../addons/Editables/index.js");
 var import_constants = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_styled = require("../../styled.js");
+var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_SortableItemContext = require("../HoC/SortableItemContext.js");
 var import_useCellStyle = require("./useCellStyle.js");
 const PureStandardCell = (0, import_react.memo)(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/cjs/parts/Cells/Cell.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Cells/Cell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n  PropsWithChildren<{\n    cellStyle: React.CSSProperties;\n    column: DSDataTableT.InternalColumn;\n    getOwnerProps: DSDataTableT.GetOwnerPropsT;\n    getOwnerPropsArguments: () => DSDataTableT.Cell;\n  }>\n>(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => (\n  <StyledCell\n    column={column}\n    style={cellStyle}\n    role=\"cell\"\n    data-testid={DATA_TESTID.DATA_TABLE_CELL}\n    getOwnerProps={getOwnerProps}\n    getOwnerPropsArguments={getOwnerPropsArguments}\n  >\n    {children}\n  </StyledCell>\n));\n\ninterface CellProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n      isDisabledRow,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n  );\n\n  const CellComponent = cell.render;\n\n  const textValue = useMemo(\n    () =>\n      appliedTextWrap === 'truncate' ? (\n        // @ts-expect-error - data-table typescript is broken\n        <TruncatedTooltipText value={<CellComponent {...cellProps} />} />\n      ) : (\n        // @ts-expect-error - data-table typescript is broken\n        <CellComponent {...cellProps} />\n      ),\n    [CellComponent, appliedTextWrap, cellProps],\n  );\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {/* @ts-expect-error - data-table typescript is broken */}\n          {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n          {textValue}\n        </Grid>\n      );\n    }\n    return textValue;\n  }, [cellProps, shouldAddExpandCell, textValue]);\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {pureCellContent}\n      </StyledCellContent>\n    ),\n    [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      // @ts-expect-error - data-table typescript is broken\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n  PropsWithChildren<{\n    cellStyle: React.CSSProperties;\n    column: DSDataTableT.InternalColumn;\n    getOwnerProps: DSDataTableT.GetOwnerPropsT;\n    getOwnerPropsArguments: () => DSDataTableT.Cell;\n  }>\n>(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => (\n  <StyledCell\n    column={column}\n    style={cellStyle}\n    role=\"cell\"\n    data-testid={DATA_TESTID.DATA_TABLE_CELL}\n    getOwnerProps={getOwnerProps}\n    getOwnerPropsArguments={getOwnerPropsArguments}\n  >\n    {children}\n  </StyledCell>\n));\n\ninterface CellProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n  cell,\n  column,\n  row,\n  isRowSelected,\n  shouldAddExpandCell,\n  isDragOverlay,\n}) => {\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n  const cellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      cell,\n      row,\n      isRowSelected,\n      draggableProps,\n      isDragOverlay,\n      role: 'cell',\n      cellStyle,\n      column,\n      isDisabledRow,\n    }),\n    [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n  );\n\n  const CellComponent = cell.render;\n\n  const textValue = useMemo(\n    () =>\n      appliedTextWrap === 'truncate' ? (\n        // @ts-expect-error - data-table typescript is broken\n        <TruncatedTooltipText value={<CellComponent {...cellProps} />} />\n      ) : (\n        // @ts-expect-error - data-table typescript is broken\n        <CellComponent {...cellProps} />\n      ),\n    [CellComponent, appliedTextWrap, cellProps],\n  );\n  const pureCellContent = useMemo(() => {\n    if (shouldAddExpandCell) {\n      return (\n        <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n          {/* @ts-expect-error - data-table typescript is broken */}\n          {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n          {textValue}\n        </Grid>\n      );\n    }\n    return textValue;\n  }, [cellProps, shouldAddExpandCell, textValue]);\n  const DefaultCellContentJSX = useMemo(\n    () => (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {pureCellContent}\n      </StyledCellContent>\n    ),\n    [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n  );\n\n  const EditableContentJSX = useMemo(() => {\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function')\n      // @ts-expect-error - data-table typescript is broken\n      return column.editable({\n        DefaultCellRender: DefaultCellContentJSX,\n        ...cellProps,\n      }) as JSX.Element;\n\n    return null;\n  }, [DefaultCellContentJSX, cellProps, column]);\n\n  return (\n    <PureStandardCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n    </PureStandardCell>\n  );\n};\n\nexport { Cell };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/Cells/CellFactory.js CHANGED Viewed

@@ -33,13 +33,13 @@ __export(CellFactory_exports, {
 module.exports = __toCommonJS(CellFactory_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_react = __toESM(require("react"));
 var import_Columns = require("../../addons/Columns/index.js");
 var import_Editables = require("../../addons/Editables/index.js");
 var import_constants = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_styled = require("../../styled.js");
+var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_SortableItemContext = require("../HoC/SortableItemContext.js");
 var import_useCellStyle = require("./useCellStyle.js");
 const PureStandardCell = (0, import_react.memo)(

package/dist/cjs/parts/Cells/CellFactory.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Cells/CellFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n  ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n    const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n    return (\n      <StyledCell\n        column={column}\n        style={cellStyle}\n        role=\"cell\"\n        data-testid={DATA_TESTID.DATA_TABLE_CELL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledCell>\n    );\n  },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { cell, column } = props;\n  const { render: CellComponent } = cell;\n\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const appliedTextWrap = column.textWrap || textWrap;\n  if (appliedTextWrap === 'truncate') {\n    return <TruncatedTooltipText value={<CellComponent {...props} />} />;\n  }\n  return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n  (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;\n\n    return (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n      </StyledCellContent>\n    );\n  },\n);\n\nconst EditableCell = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n    const { column } = restProps;\n    const DefaultCellContentJSX = (\n      <DefaultCellContent\n        {...restProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function') {\n      const ColumnEditableRenderProps = column.editable as React.ComponentType<\n        DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n      >;\n      return <ColumnEditableRenderProps {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n\n    return null;\n  },\n);\n\ninterface CellFactoryProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  cellIsNextToExpander: boolean;\n  isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n  const { column, row, cell } = props;\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const cellProps: DSDataTableT.CellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      ...props,\n      role: 'cell',\n      draggableProps,\n      isDisabledRow,\n      domIdAffix,\n    }),\n    [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n  );\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? (\n        <EditableCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      ) : (\n        <DefaultCellContent\n          {...cellProps}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n    </PureStandardCell>\n  );\n};\n\nexport { CellFactory };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n  ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n    const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n    return (\n      <StyledCell\n        column={column}\n        style={cellStyle}\n        role=\"cell\"\n        data-testid={DATA_TESTID.DATA_TABLE_CELL}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledCell>\n    );\n  },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n  const { cell, column } = props;\n  const { render: CellComponent } = cell;\n\n  const textWrap = usePropsStore((state) => state.textWrap);\n  const appliedTextWrap = column.textWrap || textWrap;\n  if (appliedTextWrap === 'truncate') {\n    return <TruncatedTooltipText value={<CellComponent {...props} />} />;\n  }\n  return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n  (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;\n\n    return (\n      <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n      </StyledCellContent>\n    );\n  },\n);\n\nconst EditableCell = memo(\n  (\n    props: DSDataTableT.CellProps & {\n      getOwnerProps: DSDataTableT.GetOwnerPropsT;\n      getOwnerPropsArguments: () => DSDataTableT.Cell;\n    },\n  ) => {\n    const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n    const { column } = restProps;\n    const DefaultCellContentJSX = (\n      <DefaultCellContent\n        {...restProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    );\n\n    if (typeof column.editable === 'string') {\n      const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n      // @ts-expect-error - data-table typescript is broken\n      if (EditableComponent) return <EditableComponent {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n    if (typeof column.editable === 'function') {\n      const ColumnEditableRenderProps = column.editable as React.ComponentType<\n        DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n      >;\n      return <ColumnEditableRenderProps {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n    }\n\n    return null;\n  },\n);\n\ninterface CellFactoryProps {\n  cell: DSDataTableT.Cell;\n  column: DSDataTableT.InternalColumn;\n  row: DSDataTableT.InternalRow;\n  isRowSelected: boolean;\n  shouldAddExpandCell: boolean;\n  cellIsNextToExpander: boolean;\n  isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n  const { column, row, cell } = props;\n  const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n  const isDisabledRow = disabledRows[row.uid];\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const cellProps: DSDataTableT.CellProps = useMemo(\n    () => ({\n      ...cellRendererProps,\n      ...props,\n      role: 'cell',\n      draggableProps,\n      isDisabledRow,\n      domIdAffix,\n    }),\n    [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n  );\n\n  return (\n    <PureStandardCell {...cellProps}>\n      {column.editable && !disabledRows[row.uid] ? (\n        <EditableCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      ) : (\n        <DefaultCellContent\n          {...cellProps}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n    </PureStandardCell>\n  );\n};\n\nexport { CellFactory };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -146,7 +146,7 @@ const HeaderCell = (props) => {
     handleSort
   ]);
   const DnDHandleComponent = (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", alignItems: "center", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", alignItems: "flex-start", style: { position: "relative", paddingTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_DnDHandle.DragHandle,
       {
         innerRef: dragHandleRef,

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

@@ -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 { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\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<HTMLInputElement | 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\" alignItems=\"center\" 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  return (\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      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\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 { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n  colSpan,\n  draggable,\n  filterable,\n  sortable,\n}: {\n  colSpan: number;\n  draggable: boolean;\n  filterable: boolean;\n  sortable: boolean;\n}) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  colSpan: number;\n}\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<HTMLInputElement | 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\" alignItems=\"flex-start\" style={{ position: 'relative', paddingTop: '4px' }}>\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  return (\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      <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions({\n          colSpan,\n          draggable: dragAndDropColumns && column.disableDnD !== true,\n          filterable: hasFilter,\n          sortable: column.canSort ?? false,\n        })}\n      </span>\n    </StyledHeadTh>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }