@elliemae/ds-data-table 3.60.0-next.6 → 3.60.0-next.61

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

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { useFloatingContext } from "@elliemae/ds-floating-context";
+import { useFocusTrap } from "@elliemae/ds-hooks-focus-trap";
+import { mergeRefs } from "@elliemae/ds-system";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { DATA_TABLE_DATA_TESTID } from "../../constants/index.js";
+import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
+import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
+import { useOnClickOutside } from "./useOnClickOutside.js";
+import { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from "./styled.js";
+const FilterPopoverV2 = (props) => {
+  const {
+    column,
+    customStyles,
+    reduxHeader,
+    menuContent,
+    ariaLabel,
+    triggerIcon,
+    innerRef,
+    columnReference,
+    firstElementRef,
+    onFilterSubmit,
+    onFilterReset
+  } = props;
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(
+    () => ({
+      columnId: column.id
+    }),
+    [column.id]
+  );
+  const [buttonReference, setButtonReference] = useState(null);
+  const [isButtonFocused, setIsButtonFocused] = useState(false);
+  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);
+  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } = useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);
+  const lastElementRef = useRef(null);
+  const boundaryRef = useRef(null);
+  const {
+    floatingStyles,
+    isOpen: isFloatingOpen,
+    refs,
+    context
+  } = useFloatingContext({
+    externallyControlledIsOpen: isMenuOpen,
+    placement: "bottom-end",
+    withoutAnimation: true,
+    customOffset: [0, 0]
+  });
+  useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
+  const handleOnKeyDown = useFocusTrap({
+    firstElementRef,
+    lastElementRef
+  });
+  useEffect(() => {
+    if (columnReference) {
+      refs.setReference(columnReference);
+    }
+  }, [columnReference, refs]);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: (e) => e.stopPropagation(),
+        onKeyDown: handleMenuOnKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            FilterButton,
+            {
+              hide: !isIconVisible,
+              "data-testid": DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON,
+              getOwnerProps,
+              children: /* @__PURE__ */ jsx(
+                DSButtonV3,
+                {
+                  buttonType: "icon",
+                  size: "s",
+                  onClick: handleTriggerClick,
+                  onKeyDown: handleMenuOnKeyDown,
+                  onFocus: handleTriggerOnFocus,
+                  onBlur: handleTriggerOnBlur,
+                  innerRef: mergeRefs(isIconVisible && setButtonReference, innerRef),
+                  tabIndex: reduxHeader?.withTabStops ? 0 : -1,
+                  "aria-label": ariaLabel,
+                  "aria-hidden": !isButtonFocused,
+                  "data-testid": DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT,
+                  children: triggerIcon
+                }
+              )
+            }
+          ),
+          refs.reference && /* @__PURE__ */ jsx(
+            StyledFloatingWrapper,
+            {
+              innerRef: refs.setFloating,
+              isOpen: isFloatingOpen,
+              floatingStyles: {
+                ...floatingStyles,
+                ...customStyles,
+                minWidth: "min-content"
+              },
+              context,
+              "data-testid": DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
+              getOwnerProps,
+              getOwnerPropsArguments,
+              "aria-label": `Filter by ${column.Header}`,
+              role: "dialog",
+              children: /* @__PURE__ */ jsx(PopperContent, { getOwnerProps, onKeyDown: handleOnKeyDown, innerRef: boundaryRef, children: /* @__PURE__ */ jsxs("form", { onSubmit: onFilterSubmit, children: [
+                menuContent,
+                /* @__PURE__ */ jsxs(StyledDSDialogFooter, { children: [
+                  /* @__PURE__ */ jsx(DSButtonV3, { onClick: onFilterReset, buttonType: "outline", size: "s", children: "Reset" }),
+                  /* @__PURE__ */ jsx(DSButtonV3, { type: "submit", innerRef: lastElementRef, size: "s", children: "Apply" })
+                ] })
+              ] }) })
+            }
+          )
+        ]
+      }
+    )
+  );
+};
+export {
+  FilterPopoverV2
+};
+//# sourceMappingURL=FilterPopoverV2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACuFf,cAmCM,YAnCN;AAvFR,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,WAAW,QAAQ,gBAAgB;AAEhE,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,cAAc,eAAe,sBAAsB,6BAA6B;AAElF,MAAM,kBAA6D,CAAC,UAAgC;AACzG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAmC,IAAI;AAErF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,EAAE,eAAe,WAAW,IAAI,uBAAuB,WAAW;AAExE,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,IACjH,qBAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,iBAAiB,OAA0B,IAAI;AACrD,QAAM,cAAc,OAA8B,IAAI;AAEtD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,oBAAkB,aAAa,KAAK,WAAW,MAAM,sBAAsB;AAC3E,QAAM,kBAAkB,aAAa;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,QAAI,iBAAiB;AACnB,WAAK,aAAa,eAAe;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,CAAC;AAAA,cACP,eAAa,uBAAuB;AAAA,cACpC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,UAAU,UAAU,iBAAiB,oBAAoB,QAAQ;AAAA,kBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,kBAC1C,cAAY;AAAA,kBACZ,eAAa,CAAC;AAAA,kBACd,eAAa,uBAAuB;AAAA,kBAEnC;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,KAAK,aACJ;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,KAAK;AAAA,cACf,QAAQ;AAAA,cACR,gBAAgB;AAAA,gBACd,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,UAAU;AAAA,cACZ;AAAA,cACA;AAAA,cACA,eAAa,uBAAuB;AAAA,cACpC;AAAA,cACA;AAAA,cACA,cAAY,aAAa,OAAO,MAAgB;AAAA,cAChD,MAAK;AAAA,cAEL,8BAAC,iBAAc,eAA8B,WAAW,iBAAiB,UAAU,aACjF,+BAAC,UAAK,UAAU,gBACb;AAAA;AAAA,gBACD,qBAAC,wBACC;AAAA,sCAAC,cAAW,SAAS,eAAe,YAAW,WAAU,MAAK,KAAI,mBAElE;AAAA,kBACA,oBAAC,cAAW,MAAK,UAAS,UAAU,gBAAgB,MAAK,KAAI,mBAE7D;AAAA,mBACF;AAAA,iBACF,GACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA;AAEJ;",
+  "names": []
+}

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

@@ -1,12 +1,13 @@
 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";
 const FilterButton = styled("span", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })`
@@ -20,18 +21,19 @@ 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,
+    firstElementRef,
+    lastElementRef
+  } = props;
   const filters = usePropsStore((state) => state.filters);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = useCallback(
@@ -40,18 +42,18 @@ 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 handleOnKeyDown = useFocusTrap({
+    firstElementRef,
+    lastElementRef
+  });
   useEffect(() => {
     void actionRef.current.update?.();
   }, [filters]);
@@ -85,16 +87,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 +106,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';\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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { DSDialogFooter } from "@elliemae/ds-dialog";
+import { FloatingWrapper } from "@elliemae/ds-floating-context";
+import { DSDataTableName, DSDataTableSlots } from "../../constants/index.js";
+const FilterButton = styled("span", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })`
+  display: inline-grid;
+  ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
+`;
+const PopperContent = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`
+  background-color: #fff;
+`;
+const StyledFloatingWrapper = styled(FloatingWrapper, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FILTER_POPOVER
+})``;
+const StyledDSDialogFooter = styled(DSDialogFooter, {
+  name: DSDataTableName,
+  slot: DSDataTableSlots.FILTER_POPOVER_FOOTER
+})`
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 8px;
+  padding-bottom: 8px;
+`;
+export {
+  FilterButton,
+  PopperContent,
+  StyledDSDialogFooter,
+  StyledFloatingWrapper
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSDialogFooter } from '@elliemae/ds-dialog';\nimport { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\n\nexport const 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\nexport const PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n  background-color: #fff;\n`;\n\nexport const StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FILTER_POPOVER,\n})``;\n\nexport const StyledDSDialogFooter = styled(DSDialogFooter, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FILTER_POPOVER_FOOTER,\n})`\n  display: flex;\n  flex-wrap: wrap;\n  padding-top: 8px;\n  padding-bottom: 8px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAE3C,MAAM,eAAe,OAAO,QAAQ,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA,IAI9G,CAAC,UAAW,MAAM,OAAO,yCAAyC,EAAG;AAAA;AAGlE,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,uBAAuB,CAAC;AAAA;AAAA;AAI5G,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EAC3D,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAEM,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/useGetFilterHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useEffect, useRef } from 'react';\nimport { useInternalStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\n\nconst emptyFunc = () => null;\n\n// https://jira.elliemae.io/browse/PUI-12457\nconst useIframeClickCloseWorkaround = ({\n  columnId,\n  isMenuOpen,\n}: {\n  columnId: FilterPopoverProps['columnId'];\n  isMenuOpen: boolean;\n}) => {\n  // due to how browser handle events when iframes are involved we can only listen to window \"blur\" event to understand if the user clicked on any iframe\n  // out of the box the filter are supposed to close when the user clicks outside of the filter contextual region\n  // this helper ensure that the filter will close even if the user clicks on an iframe.\n  // since we must do vanilla javascript we need to handle this with extreme care and ensure we optimize as much as possible.\n  // we want to attach/detach the event listener only when the filter is open and we want to detach it as soon as the filter is closed.\n  // this is to ensure that no matter how many columns have filter functionality we only pay the performance cost for the filter that would do anything with it.\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n\n  // we only care to invoke the latest version of patchHeaderFilterButtonAndMenu\n  // we do not need to reattach the event listener if pathHeaderFilterButtonAndMenu changes\n  // event attachment/detachment is more expensive than a simple ref update performance wise.\n  const patchRef = useRef(patchHeaderFilterButtonAndMenu);\n  useEffect(() => {\n    patchRef.current = patchHeaderFilterButtonAndMenu;\n  }, [patchHeaderFilterButtonAndMenu]);\n\n  // extremely optimized event listener attachment/detachment\n  //  we run this side effect strictly when required to ensure the best performance possible.\n  //  it's strictly required when:\n  //    - the filter is open ( so clicking an iframe will close it )\n  //    - the columnId changes ( so we close the correct filter )\n  //  if patchHeaderFilterButtonAndMenu changes we do not care to reattach the event listener\n  //    as long as the .current ref is updated in time before the close event is triggered.\n  //  which is guaranteed by:\n  //    - the fact that we update the ref in the useEffect above\n  //    - the fact that we invoke patchRef.current as a consquence of the user \"clicking\" on the filter button (which happens after the previous useEffect)\n  useEffect(() => {\n    // we declare the function locally in the closure to ensure we can detach it later\n    // useEffect is run after render, useCallBack is run before render,\n    // which means that using useCallback here could potentially cause a memory-leak/dangling reference/attached event listener that is never detached\n    const handleBlur = () => {\n      patchRef.current(columnId, true);\n    };\n\n    if (isMenuOpen) window.addEventListener('blur', handleBlur);\n    else window.removeEventListener('blur', handleBlur);\n\n    return () => {\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, [columnId, isMenuOpen]);\n};\n\nexport const useGetFilterHandlers = (\n  props: FilterPopoverProps,\n  isMenuOpen: boolean,\n  buttonReference: HTMLButtonElement | null,\n  setIsButtonFocused: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  const { columnId, onTriggerClick = emptyFunc, onClickOutsideMenu = emptyFunc } = props;\n  useIframeClickCloseWorkaround({ columnId, isMenuOpen });\n\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      onTriggerClick(columnId, e);\n      patchHeader(columnId, { hideFilterMenu: isMenuOpen, hideFilterButton: false });\n      e.stopPropagation();\n    },\n    [columnId, isMenuOpen, onTriggerClick, patchHeader],\n  );\n\n  const handleTriggerOnFocus = useCallback(() => setIsButtonFocused(true), [setIsButtonFocused]);\n  const handleTriggerOnBlur = useCallback(() => setIsButtonFocused(false), [setIsButtonFocused]);\n\n  const handleClickOutsideMenu = useCallback(() => {\n    onClickOutsideMenu(columnId);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  }, [columnId, isMenuOpen, onClickOutsideMenu, patchHeaderFilterButtonAndMenu]);\n\n  const handleMenuOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      e.stopPropagation();\n      if (e.code === 'Escape') {\n        patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false, showSortCaret: true });\n        buttonReference?.focus();\n      }\n      // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n      // so we just prevent default behaviour in this case\n      if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n        e.preventDefault();\n      }\n    },\n    [buttonReference, columnId, patchHeader],\n  );\n\n  return { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useEffect, useRef } from 'react';\nimport { useInternalStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps, FilterPopoverV2Props } from './types.js';\n\nconst emptyFunc = () => null;\n\n// https://jira.elliemae.io/browse/PUI-12457\nconst useIframeClickCloseWorkaround = ({\n  columnId,\n  isMenuOpen,\n}: {\n  columnId: FilterPopoverProps['columnId'];\n  isMenuOpen: boolean;\n}) => {\n  // due to how browser handle events when iframes are involved we can only listen to window \"blur\" event to understand if the user clicked on any iframe\n  // out of the box the filter are supposed to close when the user clicks outside of the filter contextual region\n  // this helper ensure that the filter will close even if the user clicks on an iframe.\n  // since we must do vanilla javascript we need to handle this with extreme care and ensure we optimize as much as possible.\n  // we want to attach/detach the event listener only when the filter is open and we want to detach it as soon as the filter is closed.\n  // this is to ensure that no matter how many columns have filter functionality we only pay the performance cost for the filter that would do anything with it.\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n\n  // we only care to invoke the latest version of patchHeaderFilterButtonAndMenu\n  // we do not need to reattach the event listener if pathHeaderFilterButtonAndMenu changes\n  // event attachment/detachment is more expensive than a simple ref update performance wise.\n  const patchRef = useRef(patchHeaderFilterButtonAndMenu);\n  useEffect(() => {\n    patchRef.current = patchHeaderFilterButtonAndMenu;\n  }, [patchHeaderFilterButtonAndMenu]);\n\n  // extremely optimized event listener attachment/detachment\n  //  we run this side effect strictly when required to ensure the best performance possible.\n  //  it's strictly required when:\n  //    - the filter is open ( so clicking an iframe will close it )\n  //    - the columnId changes ( so we close the correct filter )\n  //  if patchHeaderFilterButtonAndMenu changes we do not care to reattach the event listener\n  //    as long as the .current ref is updated in time before the close event is triggered.\n  //  which is guaranteed by:\n  //    - the fact that we update the ref in the useEffect above\n  //    - the fact that we invoke patchRef.current as a consquence of the user \"clicking\" on the filter button (which happens after the previous useEffect)\n  useEffect(() => {\n    // we declare the function locally in the closure to ensure we can detach it later\n    // useEffect is run after render, useCallBack is run before render,\n    // which means that using useCallback here could potentially cause a memory-leak/dangling reference/attached event listener that is never detached\n    const handleBlur = () => {\n      patchRef.current(columnId, true);\n    };\n\n    if (isMenuOpen) window.addEventListener('blur', handleBlur);\n    else window.removeEventListener('blur', handleBlur);\n\n    return () => {\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, [columnId, isMenuOpen]);\n};\n\nexport const useGetFilterHandlers = (\n  props: FilterPopoverProps | FilterPopoverV2Props,\n  isMenuOpen: boolean,\n  buttonReference: HTMLButtonElement | null,\n  setIsButtonFocused: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  const { columnId, onTriggerClick = emptyFunc, onClickOutsideMenu = emptyFunc } = props;\n  useIframeClickCloseWorkaround({ columnId, isMenuOpen });\n\n  const patchHeaderFilterButtonAndMenu = useInternalStore((state) => state.patchHeaderFilterButtonAndMenu);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n\n  const handleTriggerClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      onTriggerClick(columnId, e);\n      patchHeader(columnId, { hideFilterMenu: isMenuOpen, hideFilterButton: false });\n      e.stopPropagation();\n    },\n    [columnId, isMenuOpen, onTriggerClick, patchHeader],\n  );\n\n  const handleTriggerOnFocus = useCallback(() => setIsButtonFocused(true), [setIsButtonFocused]);\n  const handleTriggerOnBlur = useCallback(() => setIsButtonFocused(false), [setIsButtonFocused]);\n\n  const handleClickOutsideMenu = useCallback(() => {\n    onClickOutsideMenu(columnId);\n    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n  }, [columnId, isMenuOpen, onClickOutsideMenu, patchHeaderFilterButtonAndMenu]);\n\n  const handleMenuOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      e.stopPropagation();\n      if (e.code === 'Escape') {\n        patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false, showSortCaret: true });\n        buttonReference?.focus();\n      }\n      // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n      // so we just prevent default behaviour in this case\n      if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n        e.preventDefault();\n      }\n    },\n    [buttonReference, columnId, patchHeader],\n  );\n\n  return { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,wBAAwB;AAGjC,MAAM,YAAY,MAAM;AAGxB,MAAM,gCAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAGM;AAOJ,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AAKvG,QAAM,WAAW,OAAO,8BAA8B;AACtD,YAAU,MAAM;AACd,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,8BAA8B,CAAC;AAYnC,YAAU,MAAM;AAId,UAAM,aAAa,MAAM;AACvB,eAAS,QAAQ,UAAU,IAAI;AAAA,IACjC;AAEA,QAAI,WAAY,QAAO,iBAAiB,QAAQ,UAAU;AAAA,QACrD,QAAO,oBAAoB,QAAQ,UAAU;AAElD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,CAAC;AAC3B;AAEO,MAAM,uBAAuB,CAClC,OACA,YACA,iBACA,uBACG;AACH,QAAM,EAAE,UAAU,iBAAiB,WAAW,qBAAqB,UAAU,IAAI;AACjF,gCAA8B,EAAE,UAAU,WAAW,CAAC;AAEtD,QAAM,iCAAiC,iBAAiB,CAAC,UAAU,MAAM,8BAA8B;AACvG,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AAEjE,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAA8C;AAC7C,qBAAe,UAAU,CAAC;AAC1B,kBAAY,UAAU,EAAE,gBAAgB,YAAY,kBAAkB,MAAM,CAAC;AAC7E,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,UAAU,YAAY,gBAAgB,WAAW;AAAA,EACpD;AAEA,QAAM,uBAAuB,YAAY,MAAM,mBAAmB,IAAI,GAAG,CAAC,kBAAkB,CAAC;AAC7F,QAAM,sBAAsB,YAAY,MAAM,mBAAmB,KAAK,GAAG,CAAC,kBAAkB,CAAC;AAE7F,QAAM,yBAAyB,YAAY,MAAM;AAC/C,uBAAmB,QAAQ;AAC3B,QAAI,WAAY,gCAA+B,UAAU,IAAI;AAAA,EAC/D,GAAG,CAAC,UAAU,YAAY,oBAAoB,8BAA8B,CAAC;AAE7E,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,QAAE,gBAAgB;AAClB,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB,OAAO,eAAe,KAAK,CAAC;AAC5F,yBAAiB,MAAM;AAAA,MACzB;AAGA,UAAI,CAAC,WAAW,WAAW,EAAE,SAAS,EAAE,IAAI,GAAG;AAC7C,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,UAAU,WAAW;AAAA,EACzC;AAEA,SAAO,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB;AACtH;",
   "names": []
 }

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import React2, { useEffect } from "react";
+function useOnClickOutside(ref, cb) {
+  const cbRef = React2.useRef(cb);
+  useEffect(() => {
+    cbRef.current = cb;
+  }, [cb]);
+  useEffect(() => {
+    if (!ref) {
+      return () => {
+      };
+    }
+    const listener = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (ref.contains(target)) return;
+      cbRef.current(event);
+    };
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+    return () => {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
+    };
+  }, [ref]);
+}
+export {
+  useOnClickOutside
+};
+//# sourceMappingURL=useOnClickOutside.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/useOnClickOutside.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node>(ref: T | null, cb: (event: Event) => void): void {\n  const cbRef = React.useRef(cb);\n\n  useEffect(() => {\n    cbRef.current = cb;\n  }, [cb]);\n\n  useEffect(() => {\n    if (!ref) {\n      return () => {};\n    }\n\n    const listener = (event: MouseEvent | TouchEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n\n      if (ref.contains(target)) return;\n\n      cbRef.current(event);\n    };\n\n    document.addEventListener('mousedown', listener, true);\n    document.addEventListener('touchstart', listener, true);\n\n    return () => {\n      document.removeEventListener('mousedown', listener, true);\n      document.removeEventListener('touchstart', listener, true);\n    };\n  }, [ref]);\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,iBAAiB;AAE1B,SAAS,kBAAkC,KAAe,IAAkC;AACjG,QAAM,QAAQA,OAAM,OAAO,EAAE;AAE7B,YAAU,MAAM;AACd,UAAM,UAAU;AAAA,EAClB,GAAG,CAAC,EAAE,CAAC;AAEP,YAAU,MAAM;AACd,QAAI,CAAC,KAAK;AACR,aAAO,MAAM;AAAA,MAAC;AAAA,IAChB;AAEA,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AAEb,UAAI,IAAI,SAAS,MAAM,EAAG;AAE1B,YAAM,QAAQ,KAAK;AAAA,IACrB;AAEA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AAEtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACV;",
+  "names": ["React"]
+}

package/dist/esm/exported-related/FilterTypes.js

@@ -1,15 +1,25 @@
 import * as React from "react";
 const FILTER_TYPES = {
   SELECT: "ds-filter-select",
+  SELECT_V2: "ds-filter-select-v2",
   CREATABLE_SELECT: "ds-filter-creatable-select",
+  CREATABLE_SELECT_V2: "ds-filter-creatable-select-v2",
   MULTI_SELECT: "ds-filter-multi-select",
+  MULTI_SELECT_V2: "ds-filter-multi-select-v2",
   CREATABLE_MULTI_SELECT: "ds-filter-multi-creatable-select",
+  CREATABLE_MULTI_SELECT_V2: "ds-filter-multi-creatable-select-v2",
   SINGLE_DATE: "ds-filter-single-date",
+  SINGLE_DATE_V2: "ds-filter-single-date-v2",
   DATE_RANGE: "ds-filter-date-range",
+  DATE_RANGE_V2: "ds-filter-date-range-v2",
   DATE_SWITCHER: "ds-filter-date-switcher",
+  DATE_SWITCHER_V2: "ds-filter-date-switcher-v2",
   NUMBER_RANGE: "ds-filter-number-range",
+  NUMBER_RANGE_V2: "ds-filter-number-range-v2",
   CURRENCY_RANGE: "ds-filter-currency-range",
-  FREE_TEXT_SEARCH: "ds-filter-free-text-search"
+  CURRENCY_RANGE_V2: "ds-filter-currency-range-v2",
+  FREE_TEXT_SEARCH: "ds-filter-free-text-search",
+  FREE_TEXT_SEARCH_V2: "ds-filter-free-text-search-v2"
 };
 export {
   FILTER_TYPES

package/dist/esm/exported-related/FilterTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/FilterTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const FILTER_TYPES = {\n  SELECT: 'ds-filter-select',\n  CREATABLE_SELECT: 'ds-filter-creatable-select',\n  MULTI_SELECT: 'ds-filter-multi-select',\n  CREATABLE_MULTI_SELECT: 'ds-filter-multi-creatable-select',\n  SINGLE_DATE: 'ds-filter-single-date',\n  DATE_RANGE: 'ds-filter-date-range',\n  DATE_SWITCHER: 'ds-filter-date-switcher',\n  NUMBER_RANGE: 'ds-filter-number-range',\n  CURRENCY_RANGE: 'ds-filter-currency-range',\n  FREE_TEXT_SEARCH: 'ds-filter-free-text-search',\n} as const;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,wBAAwB;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const FILTER_TYPES = {\n  SELECT: 'ds-filter-select',\n  SELECT_V2: 'ds-filter-select-v2',\n  CREATABLE_SELECT: 'ds-filter-creatable-select',\n  CREATABLE_SELECT_V2: 'ds-filter-creatable-select-v2',\n  MULTI_SELECT: 'ds-filter-multi-select',\n  MULTI_SELECT_V2: 'ds-filter-multi-select-v2',\n  CREATABLE_MULTI_SELECT: 'ds-filter-multi-creatable-select',\n  CREATABLE_MULTI_SELECT_V2: 'ds-filter-multi-creatable-select-v2',\n  SINGLE_DATE: 'ds-filter-single-date',\n  SINGLE_DATE_V2: 'ds-filter-single-date-v2',\n  DATE_RANGE: 'ds-filter-date-range',\n  DATE_RANGE_V2: 'ds-filter-date-range-v2',\n  DATE_SWITCHER: 'ds-filter-date-switcher',\n  DATE_SWITCHER_V2: 'ds-filter-date-switcher-v2',\n  NUMBER_RANGE: 'ds-filter-number-range',\n  NUMBER_RANGE_V2: 'ds-filter-number-range-v2',\n  CURRENCY_RANGE: 'ds-filter-currency-range',\n  CURRENCY_RANGE_V2: 'ds-filter-currency-range-v2',\n  FREE_TEXT_SEARCH: 'ds-filter-free-text-search',\n  FREE_TEXT_SEARCH_V2: 'ds-filter-free-text-search-v2',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,qBAAqB;AACvB;",
   "names": []
 }

package/dist/esm/exported-related/Filters/applyOutOfTheBoxFilters.js

@@ -23,8 +23,9 @@ const applyOutOfTheBoxFilters = (data, filters) => {
   let filteredData = data;
   filters.forEach((filter) => {
     const { type } = filter;
-    if (isFilterTypeOutOfTheBox(type)) {
-      const outOfTheBoxfilterFromMapper = filterMapper[type];
+    const fromV2toV1Type = type.replace("-v2", "");
+    if (isFilterTypeOutOfTheBox(fromV2toV1Type)) {
+      const outOfTheBoxfilterFromMapper = filterMapper[fromV2toV1Type];
       const outOfTheBoxFilterValue = filter.value;
       filteredData = outOfTheBoxfilterFromMapper(filteredData, filter.id, outOfTheBoxFilterValue);
     }

package/dist/esm/exported-related/Filters/applyOutOfTheBoxFilters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Filters/applyOutOfTheBoxFilters.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { singleSelectFilterFn } from './singleSelectFilterFn.js';\nimport { multiSelectFilterFn } from './multiSelectFilterFn.js';\nimport { singleDateFilterFn } from './singleDateFilterFn.js';\nimport { dateRangeFilterFn } from './dateRangeFilterFn.js';\nimport { dateSwitcherFilterFn } from './dateSwitcherFilterFn.js';\nimport { numberRangeFilterFn } from './numberRangeFilterFn.js';\nimport { currencyRangeFilterFn } from './currencyRangeFilterFn.js';\nimport { freeTextSearchFilterFn } from './freeTextSearchFilterFn.js';\nimport { FILTER_TYPES } from '../FilterTypes.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst filterMapper = {\n  [FILTER_TYPES.SELECT]: singleSelectFilterFn,\n  [FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn,\n  [FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn,\n  [FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn,\n  [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,\n  [FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn,\n  [FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: freeTextSearchFilterFn,\n} as const;\n\ntype OutOfTheBoxFilterType = keyof typeof filterMapper;\n\nconst isFilterTypeOutOfTheBox = (type: string): type is OutOfTheBoxFilterType =>\n  Object.keys(filterMapper).includes(type);\n\nexport const applyOutOfTheBoxFilters = (\n  data: DSDataTableT.Row[],\n  filters: DSDataTableT.Filter[],\n): DSDataTableT.Row[] => {\n  let filteredData = data;\n\n  filters.forEach((filter) => {\n    const { type } = filter;\n    if (isFilterTypeOutOfTheBox(type)) {\n      // all the out of the box filters have internal validation for the filter value\n      // so we can safely call the filter function with the filter value as unknown, and let the filter function validate it\n      const outOfTheBoxfilterFromMapper = filterMapper[type] as DSDataTableT.FilterFn<unknown>;\n      const outOfTheBoxFilterValue = filter.value;\n      filteredData = outOfTheBoxfilterFromMapper(filteredData, filter.id, outOfTheBoxFilterValue);\n    }\n  });\n\n  return filteredData;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,gBAAgB,GAAG;AACnC;AAIA,MAAM,0BAA0B,CAAC,SAC/B,OAAO,KAAK,YAAY,EAAE,SAAS,IAAI;AAElC,MAAM,0BAA0B,CACrC,MACA,YACuB;AACvB,MAAI,eAAe;AAEnB,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,EAAE,KAAK,IAAI;AACjB,QAAI,wBAAwB,IAAI,GAAG;AAGjC,YAAM,8BAA8B,aAAa,IAAI;AACrD,YAAM,yBAAyB,OAAO;AACtC,qBAAe,4BAA4B,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC5F;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { singleSelectFilterFn } from './singleSelectFilterFn.js';\nimport { multiSelectFilterFn } from './multiSelectFilterFn.js';\nimport { singleDateFilterFn } from './singleDateFilterFn.js';\nimport { dateRangeFilterFn } from './dateRangeFilterFn.js';\nimport { dateSwitcherFilterFn } from './dateSwitcherFilterFn.js';\nimport { numberRangeFilterFn } from './numberRangeFilterFn.js';\nimport { currencyRangeFilterFn } from './currencyRangeFilterFn.js';\nimport { freeTextSearchFilterFn } from './freeTextSearchFilterFn.js';\nimport { FILTER_TYPES } from '../FilterTypes.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst filterMapper = {\n  [FILTER_TYPES.SELECT]: singleSelectFilterFn,\n  [FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn,\n  [FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn,\n  [FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn,\n  [FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn,\n  [FILTER_TYPES.NUMBER_RANGE]: numberRangeFilterFn,\n  [FILTER_TYPES.CURRENCY_RANGE]: currencyRangeFilterFn,\n  [FILTER_TYPES.FREE_TEXT_SEARCH]: freeTextSearchFilterFn,\n} as const;\n\ntype OutOfTheBoxFilterType = keyof typeof filterMapper;\n\nconst isFilterTypeOutOfTheBox = (type: string): type is OutOfTheBoxFilterType =>\n  Object.keys(filterMapper).includes(type);\n\nexport const applyOutOfTheBoxFilters = (\n  data: DSDataTableT.Row[],\n  filters: DSDataTableT.Filter[],\n): DSDataTableT.Row[] => {\n  let filteredData = data;\n\n  filters.forEach((filter) => {\n    const { type } = filter;\n    const fromV2toV1Type = type.replace('-v2', '');\n    if (isFilterTypeOutOfTheBox(fromV2toV1Type)) {\n      // all the out of the box filters have internal validation for the filter value\n      // so we can safely call the filter function with the filter value as unknown, and let the filter function validate it\n      const outOfTheBoxfilterFromMapper = filterMapper[fromV2toV1Type] as DSDataTableT.FilterFn<unknown>;\n      const outOfTheBoxFilterValue = filter.value;\n      filteredData = outOfTheBoxfilterFromMapper(filteredData, filter.id, outOfTheBoxFilterValue);\n    }\n  });\n\n  return filteredData;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAG7B,MAAM,eAAe;AAAA,EACnB,CAAC,aAAa,MAAM,GAAG;AAAA,EACvB,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,aAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,aAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,aAAa,gBAAgB,GAAG;AACnC;AAIA,MAAM,0BAA0B,CAAC,SAC/B,OAAO,KAAK,YAAY,EAAE,SAAS,IAAI;AAElC,MAAM,0BAA0B,CACrC,MACA,YACuB;AACvB,MAAI,eAAe;AAEnB,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,iBAAiB,KAAK,QAAQ,OAAO,EAAE;AAC7C,QAAI,wBAAwB,cAAc,GAAG;AAG3C,YAAM,8BAA8B,aAAa,cAAc;AAC/D,YAAM,yBAAyB,OAAO;AACtC,qBAAe,4BAA4B,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC5F;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

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

@@ -14,7 +14,7 @@ import {
   currencyRangeFilterFn,
   dateRangeFilterFn
 } from "./Filters/index.js";
-import { FilterBarDropdownMenu, FilterMenuButton } from "./FilterBar/index.js";
+import { FilterBarDropdownMenu, FilterMenuButton, PillsFromDataTableFilters } from "./FilterBar/index.js";
 import { SkeletonCell, SkeletonHeaderCell } from "./Skeleton/index.js";
 export {
   EditableCell,
@@ -22,6 +22,7 @@ export {
   FilterBarDropdownMenu,
   FilterMenuButton,
   FilterPopover,
+  PillsFromDataTableFilters,
   ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY,
   ROW_VARIANT_KEY,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu, FilterMenuButton } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,iBAAiB,+BAA+B;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,wBAAwB;AACxD,SAAS,cAAc,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu, FilterMenuButton, PillsFromDataTableFilters } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,iBAAiB,+BAA+B;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,kBAAkB,iCAAiC;AACnF,SAAS,cAAc,0BAA0B;",
   "names": []
 }

package/dist/esm/index.js

@@ -18,6 +18,7 @@ import {
   dateRangeFilterFn,
   FilterBarDropdownMenu,
   FilterMenuButton,
+  PillsFromDataTableFilters,
   SkeletonCell,
   SkeletonHeaderCell
 } from "./exported-related/index.js";
@@ -51,6 +52,7 @@ export {
   FilterMenuButton,
   FilterPopover,
   INTERNAL_COLUMNS,
+  PillsFromDataTableFilters,
   ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY,
   ROW_VARIANT_KEY,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n  FilterPopover,\n  EditableCell,\n  Toolbar,\n  groupBy,\n  FILTER_TYPES,\n  ROW_VARIANTS,\n  ROW_VARIANT_KEY,\n  ROW_VARIANT_COMPACT_KEY,\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n  FilterBarDropdownMenu,\n  FilterMenuButton,\n  SkeletonCell,\n  SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n  actionColumn,\n  expandRowColumn,\n  multiSelectColumn,\n  singleSelectColumn,\n  dragHandleColumn,\n  INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n  DATA_TABLE_DATA_TESTID,\n  DATA_TABLE_SLOTS,\n  DSDataTableDataTestIds,\n  DSDataTableName,\n  DSDataTableSlots,\n} from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n  FilterPopover,\n  EditableCell,\n  Toolbar,\n  groupBy,\n  FILTER_TYPES,\n  ROW_VARIANTS,\n  ROW_VARIANT_KEY,\n  ROW_VARIANT_COMPACT_KEY,\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n  FilterBarDropdownMenu,\n  FilterMenuButton,\n  PillsFromDataTableFilters,\n  SkeletonCell,\n  SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n  actionColumn,\n  expandRowColumn,\n  multiSelectColumn,\n  singleSelectColumn,\n  dragHandleColumn,\n  INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n  DATA_TABLE_DATA_TESTID,\n  DATA_TABLE_SLOTS,\n  DSDataTableDataTestIds,\n  DSDataTableName,\n  DSDataTableSlots,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,2BAA2B;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "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": []
 }