@elliemae/ds-data-table 3.60.0-next.2 → 3.60.0-next.21

package/dist/esm/exported-related/FilterPopover/index.js

@@ -1,14 +1,16 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
+import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { mergeRefs, styled } from "@elliemae/ds-system";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
 import { DATA_TESTID } from "../../configs/constants.js";
-import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
 import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
 import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
+import { useTrackFocusableElements } from "./useTrackFocusableElements.js";
 const FilterButton = styled("span", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })`
   display: inline-grid;
   ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
@@ -20,18 +22,8 @@ const StyledPoppoverJS = styled(DSPopperJS, {
   name: DSDataTableName,
   slot: DSDataTableSlots.FILTER_POPOVER
 })``;
-const ButtonTrap = ({ cb }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    tabIndex: 0,
-    onFocus: (e) => {
-      e.stopPropagation();
-      cb();
-    }
-  }
-);
 const FilterPopover = (props) => {
-  const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;
+  const { column, customStyles, reduxHeader, menuContent, ariaLabel, triggerIcon, innerRef, columnReference } = props;
   const filters = usePropsStore((state) => state.filters);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = useCallback(
@@ -40,18 +32,40 @@ const FilterPopover = (props) => {
     }),
     [column.id]
   );
-  const patchHeader = useInternalStore((state) => state.patchHeader);
   const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);
   const [buttonReference, setButtonReference] = useState(null);
   const [isButtonFocused, setIsButtonFocused] = useState(false);
   const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } = useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);
-  const buttonTrapCallback = useCallback(() => {
-    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });
-    buttonReference?.focus();
-  }, [columnId, patchHeader, buttonReference]);
   const actionRef = useRef({
     update: null
   });
+  const popoverContentRef = useRef(null);
+  const { firstElementRef, lastElementRef } = useTrackFocusableElements({
+    containerRef: popoverContentRef,
+    dependencies: [isMenuOpen, menuContent]
+  });
+  const focusedDayRef = useRef(null);
+  const handleOnKeyDown = useFocusTrap({
+    firstElementRef,
+    lastElementRef,
+    onKeyDown: (e) => {
+      const target = e.target;
+      const dayWrapper = target.closest(".focusedDay");
+      if (dayWrapper) {
+        if (focusedDayRef.current && focusedDayRef.current !== dayWrapper) {
+          focusedDayRef.current.classList.remove("focusedDay");
+        }
+        focusedDayRef.current = dayWrapper;
+        lastElementRef.current = target;
+      }
+      if (e.key === "Tab" && focusedDayRef.current) {
+        setTimeout(() => {
+          focusedDayRef.current?.classList.remove("focusedDay");
+          focusedDayRef.current = null;
+        }, 0);
+      }
+    }
+  });
   useEffect(() => {
     void actionRef.current.update?.();
   }, [filters]);
@@ -85,16 +99,16 @@ const FilterPopover = (props) => {
             )
           }
         ),
-        buttonReference && /* @__PURE__ */ jsx(
+        (columnReference || buttonReference) && /* @__PURE__ */ jsx(
           StyledPoppoverJS,
           {
             actionRef,
-            referenceElement: buttonReference,
+            referenceElement: columnReference || buttonReference,
             showPopover: isMenuOpen,
             closeContextMenu: handleClickOutsideMenu,
             "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
             startPlacementPreference: "bottom-end",
-            customOffset: [5, 4],
+            customOffset: columnReference ? [0, 1] : [5, 4],
             withoutArrow: true,
             withoutAnimation: true,
             extraPopperStyles: {
@@ -104,11 +118,9 @@ const FilterPopover = (props) => {
             placementOrderPreference: ["bottom-end", "top-end"],
             getOwnerProps,
             getOwnerPropsArguments,
-            children: /* @__PURE__ */ jsxs(PopperContent, { getOwnerProps, children: [
-              /* @__PURE__ */ jsx(ButtonTrap, { cb: buttonTrapCallback }),
-              menuContent,
-              /* @__PURE__ */ jsx(ButtonTrap, { cb: buttonTrapCallback })
-            ] })
+            role: "dialog",
+            "aria-label": `Filter by ${column.Header}`,
+            children: /* @__PURE__ */ jsx(PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
           }
         )
       ]

package/dist/esm/exported-related/FilterPopover/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 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 { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.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\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n  <span\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    tabIndex={0}\n    onFocus={(e: React.FocusEvent) => {\n      e.stopPropagation();\n      cb();\n    }}\n  />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = 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 patchHeader = useInternalStore((state) => state.patchHeader);\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 buttonTrapCallback = useCallback(() => {\n    patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n    buttonReference?.focus();\n  }, [columnId, patchHeader, buttonReference]);\n\n  const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n    update: null,\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      {buttonReference && (\n        <StyledPoppoverJS\n          actionRef={actionRef}\n          referenceElement={buttonReference}\n          showPopover={isMenuOpen}\n          closeContextMenu={handleClickOutsideMenu}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          startPlacementPreference=\"bottom-end\"\n          customOffset={[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        >\n          <PopperContent getOwnerProps={getOwnerProps}>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </StyledPoppoverJS>\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\nimport { useTrackFocusableElements } from './useTrackFocusableElements.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 { column, customStyles, reduxHeader, menuContent, ariaLabel, triggerIcon, innerRef, columnReference } = 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  const { firstElementRef, lastElementRef } = useTrackFocusableElements({\n    containerRef: popoverContentRef,\n    dependencies: [isMenuOpen, menuContent],\n  });\n\n  const focusedDayRef = useRef<HTMLElement | null>(null);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n    onKeyDown: (e) => {\n      const target = e.target as HTMLElement;\n      // Special handling for DateRangePicker calendar: days use a roving tabindex pattern.\n      // Track the focused day to update the lastElementRef and clear visual focus on Tab loop.\n      const dayWrapper = target.closest('.focusedDay') as HTMLElement;\n      if (dayWrapper) {\n        // Remove visual focus from the previously focused day\n        if (focusedDayRef.current && focusedDayRef.current !== dayWrapper) {\n          focusedDayRef.current.classList.remove('focusedDay');\n        }\n\n        focusedDayRef.current = dayWrapper;\n        // Update trap boundary to the focused day's button\n        lastElementRef.current = target;\n      }\n      // Clear visual focus when Tab navigates away from the calendar\n      if (e.key === 'Tab' && focusedDayRef.current) {\n        setTimeout(() => {\n          focusedDayRef.current?.classList.remove('focusedDay');\n          focusedDayRef.current = null;\n        }, 0);\n      }\n    },\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/exported-related/FilterPopover/useTrackFocusableElements.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { useEffect, useRef } from "react";
+const DEFAULT_FOCUSABLE_SELECTOR = 'button:not([disabled]):not([tabindex="-1"]), [href], input:not([disabled]):not([tabindex="-1"]), select:not([disabled]), button[data-isfocused="true"],textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+const useTrackFocusableElements = ({
+  containerRef,
+  selector = DEFAULT_FOCUSABLE_SELECTOR,
+  dependencies = []
+}) => {
+  const firstElementRef = useRef(null);
+  const lastElementRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef && "current" in containerRef ? containerRef.current : containerRef;
+    if (!container) return;
+    const elements = container.querySelectorAll(selector);
+    if (elements.length > 0) {
+      const [firstElement] = elements;
+      firstElementRef.current = firstElement;
+      lastElementRef.current = elements[elements.length - 1];
+    } else {
+      firstElementRef.current = null;
+      lastElementRef.current = null;
+    }
+  }, [containerRef, selector, ...dependencies]);
+  return { firstElementRef, lastElementRef };
+};
+export {
+  useTrackFocusableElements
+};
+//# sourceMappingURL=useTrackFocusableElements.js.map

package/dist/esm/exported-related/FilterPopover/useTrackFocusableElements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/useTrackFocusableElements.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useRef } from 'react';\n\n/**\n * Tracks the first and last focusable elements in a container.\n * Used by the FilterPopover focus trap.\n */\ninterface UseTrackFocusableElementsConfig {\n  /** Container element (HTMLElement or RefObject) */\n  containerRef: React.RefObject<HTMLElement> | HTMLElement | null;\n\n  /** CSS selector for focusable elements */\n  selector?: string;\n\n  /** Dependencies to trigger re-scan */\n  dependencies?: React.DependencyList;\n}\n\nconst DEFAULT_FOCUSABLE_SELECTOR =\n  'button:not([disabled]):not([tabindex=\"-1\"]), ' +\n  '[href], ' +\n  'input:not([disabled]):not([tabindex=\"-1\"]), ' +\n  'select:not([disabled]), ' +\n  'button[data-isfocused=\"true\"],' +\n  'textarea:not([disabled]), ' +\n  '[tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\nexport const useTrackFocusableElements = ({\n  containerRef,\n  selector = DEFAULT_FOCUSABLE_SELECTOR,\n  dependencies = [],\n}: UseTrackFocusableElementsConfig) => {\n  const firstElementRef = useRef<HTMLElement | null>(null);\n  const lastElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const container = containerRef && 'current' in containerRef ? containerRef.current : containerRef;\n\n    if (!container) return;\n\n    const elements = container.querySelectorAll<HTMLElement>(selector);\n\n    if (elements.length > 0) {\n      const [firstElement] = elements;\n      firstElementRef.current = firstElement;\n      lastElementRef.current = elements[elements.length - 1];\n    } else {\n      firstElementRef.current = null;\n      lastElementRef.current = null;\n    }\n    // Spread operator is intentionally used to allow consumers to pass dynamic dependencies.\n    // ESLint cannot statically verify spread elements, but this pattern enables flexible hook composition.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [containerRef, selector, ...dependencies]);\n\n  return { firstElementRef, lastElementRef };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,cAAc;AAiBlC,MAAM,6BACJ;AAQK,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA,WAAW;AAAA,EACX,eAAe,CAAC;AAClB,MAAuC;AACrC,QAAM,kBAAkB,OAA2B,IAAI;AACvD,QAAM,iBAAiB,OAA2B,IAAI;AAEtD,YAAU,MAAM;AACd,UAAM,YAAY,gBAAgB,aAAa,eAAe,aAAa,UAAU;AAErF,QAAI,CAAC,UAAW;AAEhB,UAAM,WAAW,UAAU,iBAA8B,QAAQ;AAEjE,QAAI,SAAS,SAAS,GAAG;AACvB,YAAM,CAAC,YAAY,IAAI;AACvB,sBAAgB,UAAU;AAC1B,qBAAe,UAAU,SAAS,SAAS,SAAS,CAAC;AAAA,IACvD,OAAO;AACL,sBAAgB,UAAU;AAC1B,qBAAe,UAAU;AAAA,IAC3B;AAAA,EAIF,GAAG,CAAC,cAAc,UAAU,GAAG,YAAY,CAAC;AAE5C,SAAO,EAAE,iBAAiB,eAAe;AAC3C;",
+  "names": []
+}

package/dist/esm/parts/FilterBar/DeprecatedDropdown.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
+import { DSDropdownMenu } from "@elliemae/ds-legacy-dropdownmenu";
 import { DATA_TESTID } from "../../configs/index.js";
 const DeprecatedDropdown = ({
   finalIsOpen,

package/dist/esm/parts/FilterBar/DeprecatedDropdown.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/DeprecatedDropdown.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck This is using the deprecated dropdown menu\nimport React from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface DeprecatedDropdownProps {\n  finalIsOpen: boolean;\n  onFilterBarClose: () => void;\n  onFilterBarOnClickOutside: () => void;\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onTriggerClick: () => void;\n}\n\nexport const DeprecatedDropdown: React.ComponentType<DeprecatedDropdownProps> = ({\n  finalIsOpen,\n  onFilterBarClose,\n  onFilterBarOnClickOutside,\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n  onTriggerClick,\n}) => (\n  <DSDropdownMenu\n    preventOverflow=\"scrollParent\"\n    isOpen={finalIsOpen}\n    onClose={onFilterBarClose}\n    onClickOutsideMenu={onFilterBarOnClickOutside}\n    options={[\n      {\n        id: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        onClick: removeAllFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n        },\n      },\n      ...(filterBarProps?.extraOptions || []).map((option) => ({\n        ...option,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) option?.onClick?.(e);\n        },\n      })),\n    ]}\n    triggerComponent={\n      <DSButtonV2\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        buttonType=\"icon\"\n        innerRef={dropdownMenuRef}\n        onClick={onTriggerClick}\n        aria-label=\"Filter bar addon\"\n        style={{ marginLeft: 'auto' }}\n      >\n        <MoreOptionsVert />\n      </DSButtonV2>\n    }\n  />\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck This is using the deprecated dropdown menu\nimport React from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-legacy-dropdownmenu';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface DeprecatedDropdownProps {\n  finalIsOpen: boolean;\n  onFilterBarClose: () => void;\n  onFilterBarOnClickOutside: () => void;\n  removeAllFilters: () => void;\n  filterBarProps: DSDataTableT.Props['filterBarProps'];\n  dropdownMenuRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onTriggerClick: () => void;\n}\n\nexport const DeprecatedDropdown: React.ComponentType<DeprecatedDropdownProps> = ({\n  finalIsOpen,\n  onFilterBarClose,\n  onFilterBarOnClickOutside,\n  removeAllFilters,\n  filterBarProps,\n  dropdownMenuRef,\n  onTriggerClick,\n}) => (\n  <DSDropdownMenu\n    preventOverflow=\"scrollParent\"\n    isOpen={finalIsOpen}\n    onClose={onFilterBarClose}\n    onClickOutsideMenu={onFilterBarOnClickOutside}\n    options={[\n      {\n        id: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        onClick: removeAllFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n        },\n      },\n      ...(filterBarProps?.extraOptions || []).map((option) => ({\n        ...option,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) option?.onClick?.(e);\n        },\n      })),\n    ]}\n    triggerComponent={\n      <DSButtonV2\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        buttonType=\"icon\"\n        innerRef={dropdownMenuRef}\n        onClick={onTriggerClick}\n        aria-label=\"Filter bar addon\"\n        style={{ marginLeft: 'auto' }}\n      >\n        <MoreOptionsVert />\n      </DSButtonV2>\n    }\n  />\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;AC0Df;AAvDR,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAarB,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,iBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,SAAS;AAAA,MACP;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,kBAAiB;AAAA,QAC5D;AAAA,MACF;AAAA,MACA,IAAI,gBAAgB,gBAAgB,CAAC,GAAG,IAAI,CAAC,YAAY;AAAA,QACvD,GAAG;AAAA,QACH,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,SAAQ,UAAU,CAAC;AAAA,QAC9D;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,kBACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,YAAY;AAAA,QACzB,YAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,OAAO,EAAE,YAAY,OAAO;AAAA,QAE5B,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA;AAEJ;",
   "names": []
 }

package/dist/types/exported-related/FilterPopover/types.d.ts

@@ -3,6 +3,7 @@ import type { DSDataTableT } from '../../react-desc-prop-types.js';
 export interface FilterPopoverProps {
     column: DSDataTableT.InternalColumn;
     columnId: string;
+    columnReference?: HTMLElement | null;
     triggerIcon: JSX.Element;
     menuContent: JSX.Element;
     onTriggerClick?: (id: string, e: React.MouseEvent | React.KeyboardEvent) => void;

package/dist/types/exported-related/FilterPopover/useTrackFocusableElements.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Tracks the first and last focusable elements in a container.
+ * Used by the FilterPopover focus trap.
+ */
+interface UseTrackFocusableElementsConfig {
+    /** Container element (HTMLElement or RefObject) */
+    containerRef: React.RefObject<HTMLElement> | HTMLElement | null;
+    /** CSS selector for focusable elements */
+    selector?: string;
+    /** Dependencies to trigger re-scan */
+    dependencies?: React.DependencyList;
+}
+export declare const useTrackFocusableElements: ({ containerRef, selector, dependencies, }: UseTrackFocusableElementsConfig) => {
+    firstElementRef: import("react").MutableRefObject<HTMLElement | null>;
+    lastElementRef: import("react").MutableRefObject<HTMLElement | null>;
+};
+export {};

package/dist/types/tests/playwright/DSDataTable.ControlledFilterTestRenderer.d.ts

@@ -0,0 +1,2 @@
+export const ControlledFilterTestRenderer: React.FunctionComponent<React.JSX.IntrinsicAttributes>;
+import React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.60.0-next.2",
+  "version": "3.60.0-next.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -35,64 +35,62 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "playwright test -c ./playwright.config.mjs && pui-cli test --passWithNoTests --coverage=\"false\"",
-    "lint": "node ../../../scripts/lint.mjs --fix",
-    "lint:strict": "node ../../../scripts/lint-strict.mjs",
-    "dts": "node ../../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
-  },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.60.0-next.2",
-    "@elliemae/ds-circular-progress-indicator": "3.60.0-next.2",
-    "@elliemae/ds-drag-and-drop": "3.60.0-next.2",
-    "@elliemae/ds-dropdownmenu": "3.60.0-next.2",
-    "@elliemae/ds-dropdownmenu-v2": "3.60.0-next.2",
-    "@elliemae/ds-form-checkbox": "3.60.0-next.2",
-    "@elliemae/ds-form-combobox": "3.60.0-next.2",
-    "@elliemae/ds-form-date-range-picker": "3.60.0-next.2",
-    "@elliemae/ds-form-date-time-picker": "3.60.0-next.2",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.2",
-    "@elliemae/ds-form-input-text": "3.60.0-next.2",
-    "@elliemae/ds-form-layout-blocks": "3.60.0-next.2",
-    "@elliemae/ds-form-radio": "3.60.0-next.2",
-    "@elliemae/ds-grid": "3.60.0-next.2",
-    "@elliemae/ds-icons": "3.60.0-next.2",
-    "@elliemae/ds-menu-button": "3.60.0-next.2",
-    "@elliemae/ds-pagination": "3.60.0-next.2",
-    "@elliemae/ds-pills-v2": "3.60.0-next.2",
-    "@elliemae/ds-popperjs": "3.60.0-next.2",
-    "@elliemae/ds-props-helpers": "3.60.0-next.2",
-    "@elliemae/ds-skeleton": "3.60.0-next.2",
-    "@elliemae/ds-system": "3.60.0-next.2",
-    "@elliemae/ds-truncated-tooltip-text": "3.60.0-next.2",
-    "@elliemae/ds-typescript-helpers": "3.60.0-next.2",
-    "@elliemae/ds-zustand-helpers": "3.60.0-next.2",
-    "react-virtual": "catalog:",
-    "uid": "catalog:",
-    "use-onclickoutside": "catalog:"
+    "@elliemae/ds-legacy-dropdownmenu": "1.0.16",
+    "react-virtual": "~2.10.4",
+    "uid": "^2.0.2",
+    "use-onclickoutside": "0.4.1",
+    "@elliemae/ds-button-v2": "3.60.0-next.21",
+    "@elliemae/ds-circular-progress-indicator": "3.60.0-next.21",
+    "@elliemae/ds-drag-and-drop": "3.60.0-next.21",
+    "@elliemae/ds-dropdownmenu-v2": "3.60.0-next.21",
+    "@elliemae/ds-form-checkbox": "3.60.0-next.21",
+    "@elliemae/ds-form-combobox": "3.60.0-next.21",
+    "@elliemae/ds-form-date-range-picker": "3.60.0-next.21",
+    "@elliemae/ds-form-date-time-picker": "3.60.0-next.21",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.21",
+    "@elliemae/ds-form-input-text": "3.60.0-next.21",
+    "@elliemae/ds-form-layout-blocks": "3.60.0-next.21",
+    "@elliemae/ds-form-radio": "3.60.0-next.21",
+    "@elliemae/ds-grid": "3.60.0-next.21",
+    "@elliemae/ds-menu-button": "3.60.0-next.21",
+    "@elliemae/ds-pagination": "3.60.0-next.21",
+    "@elliemae/ds-icons": "3.60.0-next.21",
+    "@elliemae/ds-pills-v2": "3.60.0-next.21",
+    "@elliemae/ds-popperjs": "3.60.0-next.21",
+    "@elliemae/ds-props-helpers": "3.60.0-next.21",
+    "@elliemae/ds-skeleton": "3.60.0-next.21",
+    "@elliemae/ds-system": "3.60.0-next.21",
+    "@elliemae/ds-truncated-tooltip-text": "3.60.0-next.21",
+    "@elliemae/ds-typescript-helpers": "3.60.0-next.21",
+    "@elliemae/ds-zustand-helpers": "3.60.0-next.21"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.2",
-    "@elliemae/ds-test-utils": "3.60.0-next.2",
-    "@elliemae/ds-toolbar-v2": "3.60.0-next.2",
-    "@elliemae/pui-cli": "catalog:",
-    "jest": "catalog:",
-    "styled-components": "catalog:",
-    "styled-system": "catalog:"
+    "jest": "^30.0.0",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.60.0-next.21",
+    "@elliemae/ds-test-utils": "3.60.0-next.21",
+    "@elliemae/ds-toolbar-v2": "3.60.0-next.21"
   },
   "peerDependencies": {
-    "lodash-es": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "styled-components": "catalog:",
-    "styled-system": "catalog:"
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
   },
-  "gitHead": "a9ff7492ac8a5acc283cb1f59cb8c153823b24ec"
-}
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "playwright test -c ./playwright.config.mjs && ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}