npm - @elliemae/ds-data-table - Versions diffs - 3.57.0-next.2 → 3.57.0-next.22 - Mend

@elliemae/ds-data-table 3.57.0-next.2 → 3.57.0-next.22

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

Files changed (113) hide show

package/dist/cjs/exported-related/FilterBar/FilterBarDropdownMenu.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterBar/FilterBarDropdownMenu.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useCallback, useMemo } from 'react';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface FilterBarDropdownMenuProps {\n  options?: DSDropdownMenuT.Props['options'];\n  innerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport const FilterBarDropdownMenu: React.ComponentType<FilterBarDropdownMenuProps> = (props) => {\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const [isOpened, setIsOpened] = useState(false);\n\n  const { options: extraOptions = [], innerRef, ...restProps } = props;\n  const removeFilters: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(() => {\n    onFiltersChange([]);\n    setIsOpened(false);\n    innerRef?.current?.focus?.();\n  }, [innerRef, onFiltersChange]);\n\n  const options: DSDropdownMenuT.Item[] = useMemo(\n    () => [\n      {\n        dsId: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        value: 'clear',\n        type: 'action',\n        onClick: removeFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeFilters(e);\n        },\n      } as unknown as DSDropdownMenuT.Item,\n      ...extraOptions,\n    ],\n    [extraOptions, removeFilters],\n  );\n\n  return (\n    <div style={{ marginLeft: 'auto' }}>\n      <DSDropdownMenuV2\n        isOpened={isOpened}\n        startPlacementPreference=\"bottom-end\"\n        options={options}\n        onClickOutside={() => {\n          setIsOpened(false);\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => {\n          if (e.code === 'Escape') innerRef?.current?.focus?.();\n        }}\n      >\n        <DSButtonV2\n          buttonType={BUTTON_TYPES.ICON}\n          onClick={() => setIsOpened((prevOpened) => !prevOpened)}\n          innerRef={innerRef}\n          aria-label=\"Filter bar addon\"\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n          {...restProps}\n        >\n          <MoreOptionsVert />\n        </DSButtonV2>\n      </DSDropdownMenuV2>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Db;AA7DV,mBAAsD;AACtD,gCAAuD;AACvD,0BAAyC;AACzC,sBAAgC;AAChC,qBAA4B;AAC5B,2CAA8B;AAOvB,MAAM,wBAAyE,CAAC,UAAU;AAC/F,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,EAAE,SAAS,eAAe,CAAC,GAAG,UAAU,GAAG,UAAU,IAAI;AAC/D,QAAM,oBAAsE,0BAAY,MAAM;AAC5F,oBAAgB,CAAC,CAAC;AAClB,gBAAY,KAAK;AACjB,cAAU,SAAS,QAAQ;AAAA,EAC7B,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,QAAM,cAAkC;AAAA,IACtC,MAAM;AAAA,MACJ;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,eAAc,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,0BAAyB;AAAA,MACzB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,WAAW,CAAC,MAA2B;AACrC,YAAI,EAAE,SAAS,SAAU,WAAU,SAAS,QAAQ;AAAA,MACtD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,iCAAa;AAAA,UACzB,SAAS,MAAM,YAAY,CAAC,eAAe,CAAC,UAAU;AAAA,UACtD;AAAA,UACA,cAAW;AAAA,UACX,eAAa,2BAAY;AAAA,UACxB,GAAG;AAAA,UAEJ,sDAAC,mCAAgB;AAAA;AAAA,MACnB;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import React, { useState, useCallback, useMemo } from 'react';\nimport { checkAndConvertOptions, DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { FilterMenuButton } from './FilterMenuButton.js';\n\ninterface FilterBarDropdownMenuProps {\n  options?: DSDropdownMenuT.Props['options'];\n  innerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport const FilterBarDropdownMenu: React.ComponentType<FilterBarDropdownMenuProps> = (props) => {\n  const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n  const [isOpened, setIsOpened] = useState(false);\n\n  const { options: extraOptions = [], innerRef, ...restProps } = props;\n  const removeFilters: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(() => {\n    onFiltersChange([]);\n    setIsOpened(false);\n    innerRef?.current?.focus?.();\n  }, [innerRef, onFiltersChange]);\n  const onClearFilters = useCallback(() => {\n    onFiltersChange([]);\n  }, [onFiltersChange]);\n\n  const options: DSDropdownMenuT.Item[] = useMemo(\n    () => [\n      {\n        dsId: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        value: 'clear',\n        type: 'action',\n        onClick: removeFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) removeFilters(e);\n        },\n      } as unknown as DSDropdownMenuT.Item,\n      ...extraOptions,\n    ],\n    [extraOptions, removeFilters],\n  );\n\n  /** PUI-15557 (https://jira.elliemae.io/browse/PUI-15557)\n   * On behalf of this ticket, we are promoting the usage of withFilterBar always in combination with filterAddonRenderer, and never alone.\n   * On Storybook, we were using this component (FilterBarDropdownMenu) as the addon, which was using DSDropdownMenuV2.\n   * As DSDropdownMenuV2 is not accessible, we are enforcing the usage of DSMenuButton instead, by converting options from DSDropdownMenuV2 to DSMenuButton.\n   * If the conversion fails, we fallback to rendering the DSDropdownMenuV2 directly.\n   */\n\n  try {\n    const { convertedOptions, report } = checkAndConvertOptions(extraOptions);\n    // eslint-disable-next-line no-console\n    report.humanReadableWarnings.forEach((warning) => console.warn(warning));\n    return <FilterMenuButton options={convertedOptions} onClearFilters={onClearFilters} innerRef={innerRef} />;\n  } catch {\n    // eslint-disable-next-line no-console\n    console.error(`\n      In upcoming releases, DSDropdownMenuV2 will be deprecated as it is not accessible. \n      In effort to have compliant components we are enforcing MenuButton usage, by converting options.\n      If you find this error it is because the provided options are not possible to be made A11y accessible, and we are displaying the DSDropdownMenuV2 as fallback.`);\n    return (\n      <div style={{ marginLeft: 'auto' }}>\n        <DSDropdownMenuV2\n          isOpened={isOpened}\n          startPlacementPreference=\"bottom-end\"\n          options={options}\n          onClickOutside={() => {\n            setIsOpened(false);\n          }}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.code === 'Escape') innerRef?.current?.focus?.();\n          }}\n        >\n          <DSButtonV2\n            buttonType={BUTTON_TYPES.ICON}\n            onClick={() => setIsOpened((prevOpened) => !prevOpened)}\n            innerRef={innerRef}\n            aria-label=\"Filter bar addon\"\n            data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n            {...restProps}\n          >\n            <MoreOptionsVert />\n          </DSButtonV2>\n        </DSDropdownMenuV2>\n      </div>\n    );\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDZ;AAvDX,mBAAsD;AACtD,gCAA+E;AAC/E,0BAAyC;AACzC,sBAAgC;AAChC,qBAA4B;AAC5B,2CAA8B;AAC9B,8BAAiC;AAO1B,MAAM,wBAAyE,CAAC,UAAU;AAC/F,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,EAAE,SAAS,eAAe,CAAC,GAAG,UAAU,GAAG,UAAU,IAAI;AAC/D,QAAM,oBAAsE,0BAAY,MAAM;AAC5F,oBAAgB,CAAC,CAAC;AAClB,gBAAY,KAAK;AACjB,cAAU,SAAS,QAAQ;AAAA,EAC7B,GAAG,CAAC,UAAU,eAAe,CAAC;AAC9B,QAAM,qBAAiB,0BAAY,MAAM;AACvC,oBAAgB,CAAC,CAAC;AAAA,EACpB,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,cAAkC;AAAA,IACtC,MAAM;AAAA,MACJ;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,eAAc,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AASA,MAAI;AACF,UAAM,EAAE,kBAAkB,OAAO,QAAI,kDAAuB,YAAY;AAExE,WAAO,sBAAsB,QAAQ,CAAC,YAAY,QAAQ,KAAK,OAAO,CAAC;AACvE,WAAO,4CAAC,4CAAiB,SAAS,kBAAkB,gBAAgC,UAAoB;AAAA,EAC1G,QAAQ;AAEN,YAAQ,MAAM;AAAA;AAAA;AAAA,qKAGmJ;AACjK,WACE,4CAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,0BAAyB;AAAA,QACzB;AAAA,QACA,gBAAgB,MAAM;AACpB,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,WAAW,CAAC,MAA2B;AACrC,cAAI,EAAE,SAAS,SAAU,WAAU,SAAS,QAAQ;AAAA,QACtD;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,iCAAa;AAAA,YACzB,SAAS,MAAM,YAAY,CAAC,eAAe,CAAC,UAAU;AAAA,YACtD;AAAA,YACA,cAAW;AAAA,YACX,eAAa,2BAAY;AAAA,YACxB,GAAG;AAAA,YAEJ,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/dist/cjs/exported-related/FilterBar/FilterMenuButton.js ADDED Viewed

@@ -0,0 +1,113 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FilterMenuButton_exports = {};
+__export(FilterMenuButton_exports, {
+  FilterMenuButton: () => FilterMenuButton
+});
+module.exports = __toCommonJS(FilterMenuButton_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_menu_button = require("@elliemae/ds-menu-button");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
+var import_configs = require("../../configs/index.js");
+var import_constants = require("../../constants/index.js");
+const StyledDSMenuButton = (0, import_ds_system.styled)(import_ds_menu_button.DSMenuButton, {
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DATA_TABLE_SLOTS.FILTER_BAR_MENU_BUTTON
+})``;
+const FilterMenuButton = ({
+  options = [],
+  innerRef,
+  onClearFilters,
+  onItemSelected,
+  onActivateItem,
+  selectedItems,
+  ...restProps
+}) => {
+  const menuButtonOptions = (0, import_react.useMemo)(
+    () => [
+      {
+        type: import_ds_menu_button.MENU_ITEMS_TYPES.ACTIVABLE_ITEM,
+        dsId: "__internal__option__clear__filters",
+        label: "Clear Filters",
+        value: "clear",
+        onClick: onClearFilters,
+        onKeyDown: (e) => {
+          if (["Enter", "Space"].includes(e.code)) {
+            e.preventDefault();
+            onClearFilters();
+          }
+          return null;
+        }
+      },
+      ...options.map((option) => {
+        if (option.type !== import_ds_menu_button.MENU_ITEMS_TYPES.SEPARATOR && option.type !== import_ds_menu_button.MENU_ITEMS_TYPES.GROUP && option.type !== import_ds_menu_button.MENU_ITEMS_TYPES.SKELETON_ITEM) {
+          return {
+            ...option,
+            onKeyDown: (e) => {
+              if (["Enter", "Space"].includes(e.code)) {
+                e.preventDefault();
+                if (typeof option?.onClick === "function") {
+                  option.onClick(e);
+                }
+              }
+              return null;
+            }
+          };
+        }
+        return option;
+      })
+    ],
+    [options, onClearFilters]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledDSMenuButton,
+    {
+      buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
+      options: menuButtonOptions,
+      innerRef,
+      "aria-label": "Filter bar addon",
+      "data-testid": import_configs.DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON,
+      onClose: () => {
+        innerRef?.current?.focus?.();
+      },
+      onItemSelected: onItemSelected ?? (() => {
+      }),
+      onActivateItem: onActivateItem ?? (() => {
+      }),
+      selectedItems: selectedItems ?? [],
+      ...restProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, {})
+    }
+  ) });
+};
+//# sourceMappingURL=FilterMenuButton.js.map

package/dist/cjs/exported-related/FilterBar/FilterMenuButton.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/exported-related/FilterBar/FilterMenuButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DSMenuButton, MENU_ITEMS_TYPES, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { useMemo } from 'react';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DATA_TABLE_SLOTS, DSDataTableName } from '../../constants/index.js';\n\ninterface FilterMenuButtonProps {\n  options?: DSMenuButtonT.MenuItemInterface[];\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  onClearFilters: TypescriptHelpersT.GenericFunc;\n  onItemSelected?: (\n    newSelection: DSMenuButtonT.SelectionableMenuNodes[],\n    metainfo: { itemNode: DSMenuButtonT.SelectionableMenuNodes; event?: React.SyntheticEvent },\n  ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;\n  onActivateItem?: (\n    itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n    metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n  ) => void;\n  [key: string]: unknown;\n  selectedItems?: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[];\n}\n\nconst StyledDSMenuButton = styled(DSMenuButton, {\n  name: DSDataTableName,\n  slot: DATA_TABLE_SLOTS.FILTER_BAR_MENU_BUTTON,\n})``;\n\nexport const FilterMenuButton: React.ComponentType<FilterMenuButtonProps> = ({\n  options = [],\n  innerRef,\n  onClearFilters,\n  onItemSelected,\n  onActivateItem,\n  selectedItems,\n  ...restProps\n}) => {\n  const menuButtonOptions: DSMenuButtonT.MenuItemInterface[] = useMemo(\n    () => [\n      {\n        type: MENU_ITEMS_TYPES.ACTIVABLE_ITEM,\n        dsId: '__internal__option__clear__filters',\n        label: 'Clear Filters',\n        value: 'clear',\n        onClick: onClearFilters,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (['Enter', 'Space'].includes(e.code)) {\n            e.preventDefault();\n            onClearFilters();\n          }\n          return null;\n        },\n      },\n      ...options.map((option) => {\n        if (\n          option.type !== MENU_ITEMS_TYPES.SEPARATOR &&\n          option.type !== MENU_ITEMS_TYPES.GROUP &&\n          option.type !== MENU_ITEMS_TYPES.SKELETON_ITEM\n        ) {\n          return {\n            ...option,\n            onKeyDown: (e: React.KeyboardEvent) => {\n              if (['Enter', 'Space'].includes(e.code)) {\n                e.preventDefault();\n                if (typeof option?.onClick === 'function') {\n                  option.onClick(e);\n                }\n              }\n              return null;\n            },\n          };\n        }\n        return option;\n      }),\n    ],\n    [options, onClearFilters],\n  );\n\n  return (\n    <div style={{ marginLeft: 'auto' }}>\n      <StyledDSMenuButton\n        buttonType={BUTTON_TYPES.ICON}\n        options={menuButtonOptions}\n        innerRef={innerRef}\n        aria-label=\"Filter bar addon\"\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n        onClose={() => {\n          innerRef?.current?.focus?.();\n        }}\n        /** PUI-15557 (https://jira.elliemae.io/browse/PUI-15557)\n         * On behalf of this ticket, we are converting options from DSDropdownMenuV2 to DSMenuButton.\n         * As DSMenuButton handles selection differently than DSDropdownMenuV2, we are providing\n         * empty functions as onItemSelected and onActivateItem to avoid breaking changes for now.\n         * As those props are required if any of the options are selectionable/activable.\n         * In future releases, we should properly enforce user to provide these props as needed.\n         */\n        onItemSelected={onItemSelected ?? (() => {})}\n        onActivateItem={onActivateItem ?? (() => {})}\n        selectedItems={selectedItems ?? []}\n        {...restProps}\n      >\n        <MoreOptionsVert />\n      </StyledDSMenuButton>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuGf;AAvGR,0BAA6B;AAC7B,sBAAgC;AAChC,4BAAmE;AACnE,uBAAuB;AAEvB,mBAAwB;AACxB,qBAA4B;AAC5B,uBAAkD;AAkBlD,MAAM,yBAAqB,yBAAO,oCAAc;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAEM,MAAM,mBAA+D,CAAC;AAAA,EAC3E,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,wBAAuD;AAAA,IAC3D,MAAM;AAAA,MACJ;AAAA,QACE,MAAM,uCAAiB;AAAA,QACvB,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAA2B;AACrC,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,cAAE,eAAe;AACjB,2BAAe;AAAA,UACjB;AACA,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,GAAG,QAAQ,IAAI,CAAC,WAAW;AACzB,YACE,OAAO,SAAS,uCAAiB,aACjC,OAAO,SAAS,uCAAiB,SACjC,OAAO,SAAS,uCAAiB,eACjC;AACA,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,WAAW,CAAC,MAA2B;AACrC,kBAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,kBAAE,eAAe;AACjB,oBAAI,OAAO,QAAQ,YAAY,YAAY;AACzC,yBAAO,QAAQ,CAAC;AAAA,gBAClB;AAAA,cACF;AACA,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,SAAS,cAAc;AAAA,EAC1B;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,iCAAa;AAAA,MACzB,SAAS;AAAA,MACT;AAAA,MACA,cAAW;AAAA,MACX,eAAa,2BAAY;AAAA,MACzB,SAAS,MAAM;AACb,kBAAU,SAAS,QAAQ;AAAA,MAC7B;AAAA,MAQA,gBAAgB,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1C,gBAAgB,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1C,eAAe,iBAAiB,CAAC;AAAA,MAChC,GAAG;AAAA,MAEJ,sDAAC,mCAAgB;AAAA;AAAA,EACnB,GACF;AAEJ;",
+  "names": []
+}

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

@@ -28,9 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FilterBar_exports = {};
 __export(FilterBar_exports, {
-  FilterBarDropdownMenu: () => import_FilterBarDropdownMenu.FilterBarDropdownMenu
+  FilterBarDropdownMenu: () => import_FilterBarDropdownMenu.FilterBarDropdownMenu,
+  FilterMenuButton: () => import_FilterMenuButton.FilterMenuButton
 });
 module.exports = __toCommonJS(FilterBar_exports);
 var React = __toESM(require("react"));
 var import_FilterBarDropdownMenu = require("./FilterBarDropdownMenu.js");
+var import_FilterMenuButton = require("./FilterMenuButton.js");
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterBar/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { FilterBarDropdownMenu } from './FilterBarDropdownMenu.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mCAAsC;",
+  "sourcesContent": ["export { FilterBarDropdownMenu } from './FilterBarDropdownMenu.js';\nexport { FilterMenuButton } from './FilterMenuButton.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mCAAsC;AACtC,8BAAiC;",
   "names": []
 }

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

@@ -37,18 +37,22 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = require("react");
-var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
-var import_constants = require("../../configs/constants.js");
+var import_constants = require("../../constants/index.js");
+var import_constants2 = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
 var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
-const FilterButton = (0, import_ds_system.styled)("span", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.FILTER_POPOVER_BUTTON })`
+const FilterButton = (0, import_ds_system.styled)("span", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.FILTER_POPOVER_BUTTON })`
   display: inline-grid;
   ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
 `;
-const PopperContent = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.FILTER_POPOVER_CONTENT })`
+const PopperContent = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.FILTER_POPOVER_CONTENT })`
   background-color: #fff;
 `;
+const StyledPoppoverJS = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.FILTER_POPOVER
+})``;
 const ButtonTrap = ({ cb }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "span",
   {
@@ -63,6 +67,12 @@ const FilterPopover = (props) => {
   const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;
   const filters = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filters);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(
+    () => ({
+      columnId: column.id
+    }),
+    [column.id]
+  );
   const patchHeader = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.patchHeader);
   const { isIconVisible, isMenuOpen } = (0, import_useGetFilterVisibility.useGetFilterVisibility)(reduxHeader);
   const [buttonReference, setButtonReference] = (0, import_react.useState)(null);
@@ -88,7 +98,7 @@ const FilterPopover = (props) => {
           FilterButton,
           {
             hide: !isIconVisible,
-            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_BUTTON,
+            "data-testid": import_constants2.DATA_TESTID.DATA_TABLE_FILTER_BUTTON,
             getOwnerProps,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_ds_button_v2.DSButtonV2,
@@ -102,20 +112,20 @@ const FilterPopover = (props) => {
                 tabIndex: reduxHeader?.withTabStops ? 0 : -1,
                 "aria-label": ariaLabel,
                 "aria-hidden": !isButtonFocused,
-                "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT,
+                "data-testid": import_constants2.DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT,
                 children: triggerIcon
               }
             )
           }
         ),
         buttonReference && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_popperjs.DSPopperJS,
+          StyledPoppoverJS,
           {
             actionRef,
             referenceElement: buttonReference,
             showPopover: isMenuOpen,
             closeContextMenu: handleClickOutsideMenu,
-            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
+            "data-testid": import_constants2.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
             startPlacementPreference: "bottom-end",
             customOffset: [5, 4],
             withoutArrow: true,
@@ -125,6 +135,8 @@ const FilterPopover = (props) => {
               minWidth: column.ref?.current?.offsetWidth ?? "0px"
             },
             placementOrderPreference: ["bottom-end", "top-end"],
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PopperContent, { getOwnerProps, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonTrap, { cb: buttonTrapCallback }),
               menuContent,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/FilterPopover/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport 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 '../../DSDataTableDefinitions.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 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 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        <DSPopperJS\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        >\n          <PopperContent getOwnerProps={getOwnerProps}>\n            <ButtonTrap cb={buttonTrapCallback} />\n            {menuContent}\n            <ButtonTrap cb={buttonTrapCallback} />\n          </PopperContent>\n        </DSPopperJS>\n      )}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["import_constants"]
 }

package/dist/cjs/exported-related/Toolbar/Toolbar.js CHANGED Viewed

@@ -38,10 +38,10 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = require("react");
 var import_use_onclickoutside = __toESM(require("use-onclickoutside"));
-var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
-var import_constants = require("../../configs/constants.js");
+var import_constants = require("../../constants/index.js");
+var import_constants2 = require("../../configs/constants.js");
 var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
-const ToolbarBtns = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;
+const ToolbarBtns = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;
 const boxShadow = import_ds_system.css`
   box-shadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.13),
@@ -50,7 +50,7 @@ const boxShadow = import_ds_system.css`
     border: none;
   }
 `;
-const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_WRAPPER })`
+const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_WRAPPER })`
   display: flex;
   align-items: center;
   pointer-events: all;
@@ -61,10 +61,10 @@ const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_DSData
   ${({ isOpen }) => isOpen && boxShadow}
 `;
-const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_BUTTON })`
+const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_BUTTON })`
   background-color: transparent;
 `;
-const ToolbarPosition = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_POSITION })`
+const ToolbarPosition = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_POSITION })`
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -127,7 +127,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
           {
             buttonType: "icon",
             className: "toolbar-trigger",
-            "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
+            "data-testid": import_constants2.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
             innerRef: (0, import_ds_system.mergeRefs)(toolbarTriggerRef, cell?.ref),
             onClick: handleOnClick,
             tabIndex: isRowSelected === false ? -1 : 0,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-cycle */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 1px;\n  padding-right: 1px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2GjB;AA1GN,0BAA2B;AAC3B,sBAAgC;AAChC,uBAAuC;AACvC,mBAAqD;AACrD,gCAA8B;AAC9B,oCAAkD;AAClD,uBAA4B;AAC5B,2CAA8B;AAG9B,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,gCAAAA,SAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,4CAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,6BAAY;AAAA,YACzB,cAAU,4BAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
-  "names": ["useOnClickOutside"]
+  "sourcesContent": ["/* eslint-disable import/no-cycle */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n  box-shadow:\n    0 1px 2px 0 rgba(0, 0, 0, 0.13),\n    0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  & > .toolbar-trigger {\n    border: none;\n  }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n  isOpen: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n\n  & .toolbar-trigger:focus {\n    z-index: 8;\n  }\n\n  ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n  background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: transparent;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 1px;\n  padding-right: 1px;\n  outline: none;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: neutral-080;\n    z-index: 7;\n  }\n`;\n\ninterface ToolbarProps {\n  isRowSelected?: boolean;\n  cell: DSDataTableT.Cell;\n  children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n  const [show, setShow] = useState(false);\n\n  const toolbarRef = useRef<HTMLDivElement | null>(null);\n  const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n  const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Escape') {\n      setShow(false);\n      toolbarTriggerRef.current?.focus();\n    }\n    e.stopPropagation();\n  }, []);\n\n  const handleOnBlurToolBar = useCallback(() => {\n    setTimeout(() => {\n      if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n        setShow(false);\n      }\n    });\n  }, []);\n\n  return (\n    <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n      >\n        {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n        <StyledButton\n          buttonType=\"icon\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n          onClick={handleOnClick}\n          tabIndex={isRowSelected === false ? -1 : 0}\n          aria-label=\"Row actions\"\n        >\n          <MoreOptionsVert />\n        </StyledButton>\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2GjB;AA1GN,0BAA2B;AAC3B,sBAAgC;AAChC,uBAAuC;AACvC,mBAAqD;AACrD,gCAA8B;AAC9B,uBAAkD;AAClD,IAAAA,oBAA4B;AAC5B,2CAA8B;AAG9B,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,gCAAAC,SAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,4CAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,8BAAY;AAAA,YACzB,cAAU,4BAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "names": ["import_constants", "useOnClickOutside"]
 }

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

@@ -31,6 +31,7 @@ __export(exported_related_exports, {
   EditableCell: () => import_EditableCell.EditableCell,
   FILTER_TYPES: () => import_FilterTypes.FILTER_TYPES,
   FilterBarDropdownMenu: () => import_FilterBar.FilterBarDropdownMenu,
+  FilterMenuButton: () => import_FilterBar.FilterMenuButton,
   FilterPopover: () => import_FilterPopover.FilterPopover,
   ROW_VARIANTS: () => import_RowVariants.ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY: () => import_RowVariants.ROW_VARIANT_COMPACT_KEY,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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 } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA8B;AAC9B,0BAA6B;AAC7B,qBAAwB;AACxB,qBAAwB;AACxB,yBAA6B;AAC7B,yBAAuE;AACvE,qBAQO;AACP,uBAAsC;AACtC,sBAAiD;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA8B;AAC9B,0BAA6B;AAC7B,qBAAwB;AACxB,qBAAwB;AACxB,yBAA6B;AAC7B,yBAAuE;AACvE,qBAQO;AACP,uBAAwD;AACxD,sBAAiD;",
   "names": []
 }

package/dist/cjs/index.js CHANGED Viewed

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -29,11 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
+  DATA_TABLE_DATA_TESTID: () => import_constants.DATA_TABLE_DATA_TESTID,
+  DATA_TABLE_SLOTS: () => import_constants.DATA_TABLE_SLOTS,
+  DSDataTableDataTestIds: () => import_constants.DSDataTableDataTestIds,
+  DSDataTableName: () => import_constants.DSDataTableName,
+  DSDataTableSlots: () => import_constants.DSDataTableSlots,
   DataTable: () => import_DataTable.DataTable,
   DataTableWithSchema: () => import_DataTable.DataTableWithSchema,
   EditableCell: () => import_exported_related.EditableCell,
   FILTER_TYPES: () => import_exported_related.FILTER_TYPES,
   FilterBarDropdownMenu: () => import_exported_related.FilterBarDropdownMenu,
+  FilterMenuButton: () => import_exported_related.FilterMenuButton,
   FilterPopover: () => import_exported_related.FilterPopover,
   INTERNAL_COLUMNS: () => import_Columns.INTERNAL_COLUMNS,
   ROW_VARIANTS: () => import_exported_related.ROW_VARIANTS,
@@ -63,5 +68,5 @@ var import_DataTable = require("./DataTable.js");
 var import_exported_related = require("./exported-related/index.js");
 var import_Columns = require("./addons/Columns/index.js");
 var import_useStore = require("./configs/useStore/useStore.js");
-__reExport(index_exports, require("./DSDataTableDefinitions.js"), module.exports);
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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  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 * from './DSDataTableDefinitions.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAE/C,8BAmBO;AAEP,qBAOO;AAIP,sBAA8B;AAE9B,0BAAc,wCApCd;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAE/C,8BAoBO;AAEP,qBAOO;AAIP,sBAA8B;AAE9B,uBAMO;",
   "names": []
 }

package/dist/cjs/parts/DnDHandle.js CHANGED Viewed

@@ -38,10 +38,10 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react2 = require("react");
 var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
-var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
-var import_constants = require("../configs/constants.js");
+var import_constants = require("../constants/index.js");
+var import_constants2 = require("../configs/constants.js");
 var import_SortableItemContext = require("./HoC/SortableItemContext.js");
-const StyledGripperButton = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.DRAG_AND_DROP_GRIPPER })`
+const StyledGripperButton = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.DRAG_AND_DROP_GRIPPER })`
   pointer-events: ${({ isDisabled }) => isDisabled ? "none" : ""};
   cursor: ${({ isActive, isDragOverlay, isDisabled }) => {
   if (isDisabled) return "not-allowed";
@@ -75,7 +75,7 @@ const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) =>
       isDragOverlay,
       innerRef: (0, import_ds_system.mergeRefs)(innerRef, setActivatorNodeRef),
       tabIndex: isReachable ? 0 : -1,
-      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
+      "data-testid": import_constants2.DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
       id: `drag-handle-btn-${id}`,
       key: `${id}-drag-handle`,
       "aria-label": "Drag handle",

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

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

package/dist/cjs/parts/DropIndicator.js CHANGED Viewed

@@ -34,34 +34,34 @@ module.exports = __toCommonJS(DropIndicator_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
-var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
-var import_constants = require("../configs/constants.js");
+var import_constants = require("../constants/index.js");
+var import_constants2 = require("../configs/constants.js");
 var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
 var import_zIndexInternalConfig = require("../configs/zIndexInternalConfig.js");
 const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
   if (vertical) {
     return `
-      left: ${dropIndicatorPosition === import_constants.DropIndicatorPosition.Before ? "0" : "unset"};
-      right: ${dropIndicatorPosition === import_constants.DropIndicatorPosition.After ? "0" : "unset"};
+      left: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "0" : "unset"};
+      right: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "0" : "unset"};
     `;
   }
   return `
-      top: ${dropIndicatorPosition === import_constants.DropIndicatorPosition.Before ? "0" : "unset"};
-      bottom: ${dropIndicatorPosition === import_constants.DropIndicatorPosition.After ? "0" : "unset"};
+      top: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "0" : "unset"};
+      bottom: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "0" : "unset"};
     `;
 };
 const getCircleStyles = ({ dropIndicatorPosition, vertical }) => ({
   position: "absolute",
   zIndex: import_zIndexInternalConfig.ZIndexDataTable.DROP_INDICATOR,
-  top: vertical || dropIndicatorPosition === import_constants.DropIndicatorPosition.After ? "unset" : "-2px",
-  bottom: vertical || dropIndicatorPosition === import_constants.DropIndicatorPosition.Before ? "unset" : "-2px",
-  left: !vertical || dropIndicatorPosition === import_constants.DropIndicatorPosition.After ? "unset" : "-2px",
-  right: !vertical || dropIndicatorPosition === import_constants.DropIndicatorPosition.Before ? "unset" : "-2px",
+  top: vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "unset" : "-2px",
+  bottom: vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "unset" : "-2px",
+  left: !vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "unset" : "-2px",
+  right: !vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "unset" : "-2px",
   opacity: 1
 });
 const StyledIndicator = (0, import_ds_system.styled)("div", {
-  name: import_DSDataTableDefinitions.DSDataTableName,
-  slot: import_DSDataTableDefinitions.DSDataTableSlots.DROP_INDICATOR
+  name: import_constants.DSDataTableName,
+  slot: import_constants.DSDataTableSlots.DROP_INDICATOR
 })`
   position: absolute;
   ${getPositionStyles}
@@ -75,9 +75,9 @@ const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ (0, import_jsx_r
 const DropIndicator = (props) => {
   const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
-  if (dropIndicatorPosition === false || dropIndicatorPosition === import_constants.DropIndicatorPosition.None || dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside)
+  if (dropIndicatorPosition === false || dropIndicatorPosition === import_constants2.DropIndicatorPosition.None || dropIndicatorPosition === import_constants2.DropIndicatorPosition.Inside)
     return null;
-  const safeDropIndicatorPosition = isLast ? import_constants.DropIndicatorPosition.Before : dropIndicatorPosition;
+  const safeDropIndicatorPosition = isLast ? import_constants2.DropIndicatorPosition.Before : dropIndicatorPosition;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(