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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/exported-related/FilterBar/dropdownMenuV2Bridge/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { MENU_ITEMS_TYPES, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { type DSDropdownMenuT } from './types.js';\nimport { type DSDropdownV2BridgeT } from './bridgeTypes.js';\nimport {\n  convertDropdownItemToMenuButtonItem,\n  convertSkeletonOptToMenuButtonItem,\n  isItemSectionOptions,\n  isItemSingleWithSubmenuOptions,\n  isItemSubmenuOptions,\n} from './conversionHelpers.js';\nimport { getHumanReadableWarnings } from './getHumanReadableWarnings.js';\n\nexport type ConvertOptionsRT = {\n  convertedOptions: DSMenuButtonT.MenuItemInterface[];\n  report: DSDropdownV2BridgeT.ConversionReportT;\n};\ntype GroupItemWithSubItems = DSMenuButtonT.GroupItem & { subitems: DSMenuButtonT.MenuItemInterface[] };\n\n/**\n * A level (the root, a submenu, a section) needs at least one focusable item: opening it moves the focus to its first\n * focusable item. Separators are not focusable and sections (groups) only hold items \u2014 what counts is what they hold.\n */\nconst hasFocusableItem = (items: readonly DSMenuButtonT.MenuItemInterface[]): boolean =>\n  items.some((item) =>\n    item.type === MENU_ITEMS_TYPES.GROUP\n      ? hasFocusableItem((item as GroupItemWithSubItems).subitems ?? [])\n      : item.type !== MENU_ITEMS_TYPES.SEPARATOR,\n  );\n\n/**\n * Recovery of an invalid state the consumer can produce with DSDropdownMenuV2-shaped options (an empty level, only\n * separators/sections, a section with no options of its own): a menu with nothing focusable has no item to receive\n * focus, which reads as an interaction that did nothing. ONE skeleton item reads as \"no content (yet)\" instead.\n */\nconst fillWithSkeleton = (ownerDsId: string, adjustments: DSDropdownV2BridgeT.ConversionAdjustmentsT) => {\n  // eslint-disable-next-line no-param-reassign\n  adjustments.filledSkeleton = true;\n  return convertSkeletonOptToMenuButtonItem({\n    type: 'skeleton',\n    dsId: `filter-bar-bridge-filled-skeleton-${ownerDsId}`,\n  });\n};\n\n/** What DSMenuButton items cannot honor from a DSDropdownMenuV2 option: it is ignored by the conversion. Only `render` and `rightAddon: 'ellipsis'` are reported; other fields it does not copy are dropped silently. */\nconst recordLostFeatures = (option: DSDropdownMenuT.Item, adjustments: DSDropdownV2BridgeT.ConversionAdjustmentsT) => {\n  /* eslint-disable no-param-reassign */\n  if (option.render) adjustments.lostRender = true;\n  if ((option as Partial<DSDropdownMenuT.ItemSubmenuOptions>).rightAddon === 'ellipsis')\n    adjustments.lostEllipsis = true;\n  /* eslint-enable no-param-reassign */\n};\n\n/**\n * Converts one option, recording what the conversion cannot honor of it; an option the conversion cannot convert\n * (unknown `type`) is dropped, not thrown: what converts stays, only what fails goes. The failure is recorded in\n * `adjustments`.\n */\nconst convertOrDrop = (\n  option: DSDropdownMenuT.Item,\n  adjustments: DSDropdownV2BridgeT.ConversionAdjustmentsT,\n): DSMenuButtonT.MenuItemInterface | null => {\n  recordLostFeatures(option, adjustments);\n  try {\n    return convertDropdownItemToMenuButtonItem(option);\n  } catch {\n    // eslint-disable-next-line no-param-reassign\n    adjustments.droppedUnknownType = true;\n    return null;\n  }\n};\n\n/**\n * Converts dropdown menu items to menu button items, handling nested structures and grouping (including filling for\n * missing groups if single selections are present and filling the levels that would have nothing to focus).\n * Everything that is adjusted or lost on the way is recorded in `adjustments`.\n * @param options - The dropdown menu items to convert.\n * @param adjustments - Mutable record of what the conversion had to do (or lose).\n * @param parentDsId - dsId of the item that owns this level (unique per level).\n * @returns The converted menu button items.\n */\nconst convertOptionsRecursive = (\n  options: DSDropdownMenuT.Item[] | readonly DSDropdownMenuT.Item[],\n  adjustments: DSDropdownV2BridgeT.ConversionAdjustmentsT,\n  parentDsId = '__first-level-root',\n): DSMenuButtonT.MenuItemInterface[] => {\n  const convertedOptions: DSMenuButtonT.MenuItemInterface[] = [];\n  const groups: GroupItemWithSubItems[] = [];\n  options.forEach((option) => {\n    const convertedOption = convertOrDrop(option, adjustments);\n    if (convertedOption === null) return;\n    if (isItemSingleWithSubmenuOptions(option) || isItemSubmenuOptions(option)) {\n      // we need to iterate over the subitems found at option.options\n      const subitems = convertOptionsRecursive(option.options, adjustments, option.dsId);\n      const typecastedOption = convertedOption as\n        DSMenuButtonT.WithSubmenuItem | DSMenuButtonT.SingleSelectWithSubmenuItem;\n      typecastedOption.subitems = subitems as DSMenuButtonT.WithSubmenuItem['subitems'];\n    }\n    // we need to unwind the sections\n    // step 1 - if we encounter a new section, we start tracking a new group\n    if (isItemSectionOptions(option)) {\n      const typecastedOption = convertedOption as DSMenuButtonT.GroupItem;\n      // step 2 - we assure subitems property is present as an array (per new API contract)\n      const subitems = [...((typecastedOption as GroupItemWithSubItems).subitems ?? [])];\n      // step 3 - we add the group to the groups array\n      groups.push({ ...typecastedOption, subitems });\n      return;\n    }\n    // here we can be in three scenarios:\n    //  A - a \"section\" is present and we are adding items to it\n    if (groups.length > 0) {\n      const lastGroup = groups[groups.length - 1];\n      lastGroup.subitems.push(convertedOption);\n      return;\n    }\n    //  B - we encountered a single select without a \"section\": a single selection is only exclusive inside a group,\n    //      we fill a placeholder group\n    if (option.type === 'single' || option.type === 'singleWithSubmenu') {\n      adjustments.filledPlaceholderGroup = true;\n      groups.push({\n        type: 'group',\n        subitems: [convertedOption as DSMenuButtonT.GroupItem],\n        dsId: `filled-group-starting-from-${option.dsId}`,\n      });\n      return;\n    }\n    //  C - we are adding items to the root level\n    convertedOptions.push(convertedOption);\n  });\n  // a section with nothing focusable under it (nothing after it, only separators, or directly followed by another\n  //  section) is the \"nothing to show\" state of that section\n  groups.forEach((group) => {\n    if (!hasFocusableItem(group.subitems)) group.subitems.push(fillWithSkeleton(group.dsId, adjustments));\n  });\n  convertedOptions.push(...groups);\n  // ... and so is a level with nothing focusable at all (empty, or only separators)\n  if (!hasFocusableItem(convertedOptions)) convertedOptions.push(fillWithSkeleton(parentDsId, adjustments));\n  return convertedOptions;\n};\n\n/**\n * Converts the `FilterBarDropdownMenu` `options` contract (DSDropdownMenuV2-shaped items) into\n * `DSMenuButtonT.MenuItemInterface[]`.\n *\n * It never throws: what cannot be converted is dropped and reported (`report.humanReadableWarnings`), what can is kept.\n */\nexport const convertDropdownOptionsToMenuButtonOptions = (\n  options: DSDropdownMenuT.Item[] | readonly DSDropdownMenuT.Item[],\n): ConvertOptionsRT => {\n  const adjustments: DSDropdownV2BridgeT.ConversionAdjustmentsT = {\n    lostRender: false,\n    lostEllipsis: false,\n    filledPlaceholderGroup: false,\n    filledSkeleton: false,\n    droppedUnknownType: false,\n  };\n  const convertedOptions = convertOptionsRecursive(options, adjustments);\n  return { convertedOptions, report: { ...adjustments, humanReadableWarnings: getHumanReadableWarnings(adjustments) } };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAA4C;AAGrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAYzC,MAAM,mBAAmB,CAAC,UACxB,MAAM;AAAA,EAAK,CAAC,SACV,KAAK,SAAS,iBAAiB,QAC3B,iBAAkB,KAA+B,YAAY,CAAC,CAAC,IAC/D,KAAK,SAAS,iBAAiB;AACrC;AAOF,MAAM,mBAAmB,CAAC,WAAmB,gBAA4D;AAEvG,cAAY,iBAAiB;AAC7B,SAAO,mCAAmC;AAAA,IACxC,MAAM;AAAA,IACN,MAAM,qCAAqC,SAAS;AAAA,EACtD,CAAC;AACH;AAGA,MAAM,qBAAqB,CAAC,QAA8B,gBAA4D;AAEpH,MAAI,OAAO,OAAQ,aAAY,aAAa;AAC5C,MAAK,OAAuD,eAAe;AACzE,gBAAY,eAAe;AAE/B;AAOA,MAAM,gBAAgB,CACpB,QACA,gBAC2C;AAC3C,qBAAmB,QAAQ,WAAW;AACtC,MAAI;AACF,WAAO,oCAAoC,MAAM;AAAA,EACnD,QAAQ;AAEN,gBAAY,qBAAqB;AACjC,WAAO;AAAA,EACT;AACF;AAWA,MAAM,0BAA0B,CAC9B,SACA,aACA,aAAa,yBACyB;AACtC,QAAM,mBAAsD,CAAC;AAC7D,QAAM,SAAkC,CAAC;AACzC,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,kBAAkB,cAAc,QAAQ,WAAW;AACzD,QAAI,oBAAoB,KAAM;AAC9B,QAAI,+BAA+B,MAAM,KAAK,qBAAqB,MAAM,GAAG;AAE1E,YAAM,WAAW,wBAAwB,OAAO,SAAS,aAAa,OAAO,IAAI;AACjF,YAAM,mBAAmB;AAEzB,uBAAiB,WAAW;AAAA,IAC9B;AAGA,QAAI,qBAAqB,MAAM,GAAG;AAChC,YAAM,mBAAmB;AAEzB,YAAM,WAAW,CAAC,GAAK,iBAA2C,YAAY,CAAC,CAAE;AAEjF,aAAO,KAAK,EAAE,GAAG,kBAAkB,SAAS,CAAC;AAC7C;AAAA,IACF;AAGA,QAAI,OAAO,SAAS,GAAG;AACrB,YAAM,YAAY,OAAO,OAAO,SAAS,CAAC;AAC1C,gBAAU,SAAS,KAAK,eAAe;AACvC;AAAA,IACF;AAGA,QAAI,OAAO,SAAS,YAAY,OAAO,SAAS,qBAAqB;AACnE,kBAAY,yBAAyB;AACrC,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,UAAU,CAAC,eAA0C;AAAA,QACrD,MAAM,8BAA8B,OAAO,IAAI;AAAA,MACjD,CAAC;AACD;AAAA,IACF;AAEA,qBAAiB,KAAK,eAAe;AAAA,EACvC,CAAC;AAGD,SAAO,QAAQ,CAAC,UAAU;AACxB,QAAI,CAAC,iBAAiB,MAAM,QAAQ,EAAG,OAAM,SAAS,KAAK,iBAAiB,MAAM,MAAM,WAAW,CAAC;AAAA,EACtG,CAAC;AACD,mBAAiB,KAAK,GAAG,MAAM;AAE/B,MAAI,CAAC,iBAAiB,gBAAgB,EAAG,kBAAiB,KAAK,iBAAiB,YAAY,WAAW,CAAC;AACxG,SAAO;AACT;AAQO,MAAM,4CAA4C,CACvD,YACqB;AACrB,QAAM,cAA0D;AAAA,IAC9D,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,wBAAwB;AAAA,IACxB,gBAAgB;AAAA,IAChB,oBAAoB;AAAA,EACtB;AACA,QAAM,mBAAmB,wBAAwB,SAAS,WAAW;AACrE,SAAO,EAAE,kBAAkB,QAAQ,EAAE,GAAG,aAAa,uBAAuB,yBAAyB,WAAW,EAAE,EAAE;AACtH;",
+  "names": []
+}

package/dist/esm/exported-related/{FilterPopover → FilterBar/dropdownMenuV2Bridge}/types.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
   "mappings": "AAAA,YAAY,WAAW;",
   "names": []

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

@@ -79,11 +79,11 @@ const FilterPopoverV2 = (props) => {
               hide: !isIconVisible,
               "data-testid": DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON,
               getOwnerProps,
+              getOwnerPropsArguments,
               children: /* @__PURE__ */ jsx(
                 DSButtonV3,
                 {
                   buttonType: "icon",
-                  size: "s",
                   onClick: handleTriggerClick,
                   onKeyDown: handleMenuOnKeyDown,
                   onFocus: handleTriggerOnFocus,
@@ -114,13 +114,22 @@ const FilterPopoverV2 = (props) => {
               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" })
-                ] })
-              ] }) })
+              children: /* @__PURE__ */ jsx(
+                PopperContent,
+                {
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  onKeyDown: handleOnKeyDown,
+                  innerRef: boundaryRef,
+                  children: /* @__PURE__ */ jsxs("form", { onSubmit: onFilterSubmit, children: [
+                    menuContent,
+                    /* @__PURE__ */ jsxs(StyledDSDialogFooter, { getOwnerProps, getOwnerPropsArguments, children: [
+                      /* @__PURE__ */ jsx(DSButtonV3, { onClick: onFilterReset, buttonType: "outline", children: "Reset" }),
+                      /* @__PURE__ */ jsx(DSButtonV3, { type: "submit", innerRef: lastElementRef, children: "Apply" })
+                    ] })
+                  ] })
+                }
+              )
             }
           )
         ]

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

@@ -1,7 +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, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    onFilterSubmit,\n    onFilterReset,\n  } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const lastElementRef = useRef<HTMLButtonElement>(null);\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    floatingStyles,\n    isOpen: isFloatingOpen,\n    refs,\n    context,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement: columnReference,\n    placement: 'bottom-end',\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: handleClickOutsideMenu,\n    /**\n     * PUI-17187: same fix as FilterPopover/index.tsx (V1) \u2014 see the full rationale there,\n     * including why `withoutPortal: true` was tried and rejected (breaks any filter whose\n     * content is larger than the table, e.g. DateRangeFilter's calendar, because withoutPortal\n     * makes the popover a literal DOM descendant of the table's overflow:auto container, which\n     * unconditionally CSS-clips oversized content \u2014 position math cannot override that).\n     * boundaryElement keeps the portal and only changes the clipping math, with a per-axis\n     * fallback to the viewport when the content doesn't fit the boundary.\n     */\n    boundaryElement: virtualListRef.current,\n  });\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV3\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onKeyDown={handleMenuOnKeyDown}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV3>\n      </FilterButton>\n      {refs.reference && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: 'min-content',\n          }}\n          context={context}\n          data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-label={`Filter by ${column.Header as string}`}\n          role=\"dialog\"\n        >\n          <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n            <form onSubmit={onFilterSubmit}>\n              {menuContent}\n              <StyledDSDialogFooter>\n                <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n                  Reset\n                </DSButtonV3>\n                <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n                  Apply\n                </DSButtonV3>\n              </StyledDSDialogFooter>\n            </form>\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "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, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const FilterPopoverV2: React.ComponentType<DSDataTableT.FilterPopoverV2Props> = (\n  props: DSDataTableT.FilterPopoverV2Props,\n) => {\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  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const lastElementRef = useRef<HTMLButtonElement>(null);\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    floatingStyles,\n    isOpen: isFloatingOpen,\n    refs,\n    context,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement: columnReference,\n    placement: 'bottom-end',\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: handleClickOutsideMenu,\n    /**\n     * PUI-17187: same fix as FilterPopover/index.tsx (V1) \u2014 see the full rationale there,\n     * including why `withoutPortal: true` was tried and rejected (breaks any filter whose\n     * content is larger than the table, e.g. DateRangeFilter's calendar, because withoutPortal\n     * makes the popover a literal DOM descendant of the table's overflow:auto container, which\n     * unconditionally CSS-clips oversized content \u2014 position math cannot override that).\n     * boundaryElement keeps the portal and only changes the clipping math, with a per-axis\n     * fallback to the viewport when the content doesn't fit the boundary.\n     */\n    boundaryElement: virtualListRef.current,\n  });\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <DSButtonV3\n          buttonType=\"icon\"\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\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            onKeyDown={handleOnKeyDown}\n            innerRef={boundaryRef}\n          >\n            <form onSubmit={onFilterSubmit}>\n              {menuContent}\n              <StyledDSDialogFooter getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\">\n                  Reset\n                </DSButtonV3>\n                <DSButtonV3 type=\"submit\" innerRef={lastElementRef}>\n                  Apply\n                </DSButtonV3>\n              </StyledDSDialogFooter>\n            </form>\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -99,11 +99,11 @@ const FilterPopover = (props) => {
             hide: !isIconVisible,
             "data-testid": DATA_TESTID.DATA_TABLE_FILTER_BUTTON,
             getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsx(
               DSButtonV2,
               {
                 buttonType: "icon",
-                size: "s",
                 onClick: handleTriggerClick,
                 onFocus: handleTriggerOnFocus,
                 onBlur: handleTriggerOnBlur,
@@ -133,7 +133,16 @@ const FilterPopover = (props) => {
             getOwnerPropsArguments,
             role: "dialog",
             "aria-label": `Filter by ${column.Header}`,
-            children: /* @__PURE__ */ jsx(PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
+            children: /* @__PURE__ */ jsx(
+              PopperContent,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                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 { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n  const {\n    column,\n    customStyles,\n    reduxHeader,\n    menuContent,\n    ariaLabel,\n    triggerIcon,\n    innerRef,\n    columnReference,\n    firstElementRef,\n    lastElementRef,\n  } = props;\n\n  const filters = usePropsStore((state) => state.filters);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n  const externalReferenceElement = columnReference || buttonReference;\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n    forceUpdatePosition,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement,\n    placement: 'bottom-end',\n    customOffset: floatingOffset,\n    withoutAnimation: true,\n    placementOrderPreference: ['bottom-end', 'top-end'],\n    onClickOutside: handleClickOutsideMenu,\n    /**\n     * PUI-17187: the filter trigger lives inside DataTable's own horizontally-scrollable\n     * container (virtualListRef, overflow: auto). Without a boundary, computePosition only\n     * clips against the browser viewport, so once the column scrolls near the table's own edge\n     * the popover keeps tracking the trigger's raw (partially clipped) screen position and\n     * spills past the table's visible bounds, into the rest of the page.\n     *\n     * Why not `withoutPortal: true` instead (it also derives a clipping boundary \u2014 see\n     * getClippingParent \u2014 which would resolve to this same scroll container automatically, no\n     * explicit boundaryElement needed): withoutPortal renders the popover as a literal DOM\n     * descendant of that overflow:auto container instead of portaling it to <body>. The browser\n     * then clips ANY content exceeding the container's bounds unconditionally \u2014 CSS overflow\n     * clipping is not something position math can override. That breaks any filter whose content\n     * is taller/wider than the table itself: confirmed regression via this exact change during\n     * development \u2014 DateRangeFilter's dual-calendar popover (in a 300px-tall table) got its\n     * inputs pushed outside the actual browser viewport entirely, failing the existing\n     * `DSDataTable - FilterPopover focus trap` Playwright CT tests (clicks on\n     * ds-controlled-date-time-picker-month-input timed out as \"outside of the viewport\").\n     *\n     * boundaryElement keeps the portal (so oversized content still escapes fully into the page,\n     * unclipped, exactly as before) and only changes computePosition's clipping *math*, with a\n     * per-axis fallback to the plain viewport when the floating content doesn't fit the boundary\n     * on that axis (see getBoundaryConstrainedRect) \u2014 small popovers (this one) get clamped to\n     * the table; oversized ones (DateRangeFilter's calendar) are unaffected.\n     */\n    boundaryElement: virtualListRef.current,\n  });\n\n  // When the filter bar changes height, re-compute the floating position\n  useEffect(() => {\n    void forceUpdatePosition();\n  }, [filters, forceUpdatePosition]);\n\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          size=\"s\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {(columnReference || buttonReference) && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          context={context}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          role=\"dialog\"\n          aria-label={`Filter by ${column.Header as string}`}\n        >\n          <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n            {menuContent}\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n"],
-  "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 { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const FilterPopover: React.ComponentType<DSDataTableT.FilterPopoverProps> = (\n  props: DSDataTableT.FilterPopoverProps,\n) => {\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  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      columnId: column.id,\n    }),\n    [column.id],\n  );\n\n  const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n  const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n  const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n  const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n    useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n  const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n  const externalReferenceElement = columnReference || buttonReference;\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n    forceUpdatePosition,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isMenuOpen,\n    externalReferenceElement,\n    placement: 'bottom-end',\n    customOffset: floatingOffset,\n    withoutAnimation: true,\n    placementOrderPreference: ['bottom-end', 'top-end'],\n    onClickOutside: handleClickOutsideMenu,\n    /**\n     * PUI-17187: the filter trigger lives inside DataTable's own horizontally-scrollable\n     * container (virtualListRef, overflow: auto). Without a boundary, computePosition only\n     * clips against the browser viewport, so once the column scrolls near the table's own edge\n     * the popover keeps tracking the trigger's raw (partially clipped) screen position and\n     * spills past the table's visible bounds, into the rest of the page.\n     *\n     * Why not `withoutPortal: true` instead (it also derives a clipping boundary \u2014 see\n     * getClippingParent \u2014 which would resolve to this same scroll container automatically, no\n     * explicit boundaryElement needed): withoutPortal renders the popover as a literal DOM\n     * descendant of that overflow:auto container instead of portaling it to <body>. The browser\n     * then clips ANY content exceeding the container's bounds unconditionally \u2014 CSS overflow\n     * clipping is not something position math can override. That breaks any filter whose content\n     * is taller/wider than the table itself: confirmed regression via this exact change during\n     * development \u2014 DateRangeFilter's dual-calendar popover (in a 300px-tall table) got its\n     * inputs pushed outside the actual browser viewport entirely, failing the existing\n     * `DSDataTable - FilterPopover focus trap` Playwright CT tests (clicks on\n     * ds-controlled-date-time-picker-month-input timed out as \"outside of the viewport\").\n     *\n     * boundaryElement keeps the portal (so oversized content still escapes fully into the page,\n     * unclipped, exactly as before) and only changes computePosition's clipping *math*, with a\n     * per-axis fallback to the plain viewport when the floating content doesn't fit the boundary\n     * on that axis (see getBoundaryConstrainedRect) \u2014 small popovers (this one) get clamped to\n     * the table; oversized ones (DateRangeFilter's calendar) are unaffected.\n     */\n    boundaryElement: virtualListRef.current,\n  });\n\n  // When the filter bar changes height, re-compute the floating position\n  useEffect(() => {\n    void forceUpdatePosition();\n  }, [filters, forceUpdatePosition]);\n\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n  const handleOnKeyDown = useFocusTrap({\n    firstElementRef,\n    lastElementRef,\n  });\n\n  return (\n    <div\n      // This is here to prevent propagation, and not trigger the sort functionality\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={handleMenuOnKeyDown}\n    >\n      <FilterButton\n        hide={!isIconVisible}\n        data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <DSButtonV2\n          buttonType=\"icon\"\n          onClick={handleTriggerClick}\n          onFocus={handleTriggerOnFocus}\n          onBlur={handleTriggerOnBlur}\n          innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n          tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n          aria-label={ariaLabel}\n          aria-hidden={!isButtonFocused}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n        >\n          {triggerIcon}\n        </DSButtonV2>\n      </FilterButton>\n      {(columnReference || buttonReference) && (\n        <StyledFloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={isFloatingOpen}\n          floatingStyles={{\n            ...floatingStyles,\n            ...customStyles,\n            minWidth: column.ref?.current?.offsetWidth ?? '0px',\n          }}\n          context={context}\n          data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          role=\"dialog\"\n          aria-label={`Filter by ${column.Header as string}`}\n        >\n          <PopperContent\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            innerRef={popoverContentRef}\n            onKeyDown={handleOnKeyDown}\n          >\n            {menuContent}\n          </PopperContent>\n        </StyledFloatingWrapper>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,9 +3,13 @@ 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";
+import { smallButtonSizeCss } from "../../helpers/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;" : ""}
+  & > button {
+    ${smallButtonSizeCss}
+  }
 `;
 const PopperContent = styled("div", { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`
   background-color: #fff;
@@ -22,6 +26,13 @@ const StyledDSDialogFooter = styled(DSDialogFooter, {
   flex-wrap: wrap;
   padding-top: 8px;
   padding-bottom: 8px;
+  & button {
+    ${smallButtonSizeCss}
+    padding: 0.5px ${({ theme }) => theme.space.xs} 0.5px;
+  }
+  & button[type='submit'] {
+    border-width: 1px;
+  }
 `;
 export {
   FilterButton,

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

@@ -1,7 +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;",
+  "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';\nimport { smallButtonSizeCss } from '../../helpers/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  & > button {\n    ${smallButtonSizeCss}\n  }\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  & button {\n    ${smallButtonSizeCss}\n    padding: 0.5px ${({ theme }) => theme.space.xs} 0.5px;\n  }\n  & button[type='submit'] {\n    border-width: 1px;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,0BAA0B;AAE5B,MAAM,eAAe,OAAO,QAAQ,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,CAAC;AAAA;AAAA,IAI9G,CAAC,UAAW,MAAM,OAAO,yCAAyC,EAAG;AAAA;AAAA,MAEnE,kBAAkB;AAAA;AAAA;AAIjB,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;AAAA,MAMK,kBAAkB;AAAA,qBACH,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;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, 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"],
+  "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 { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst emptyFunc = () => null;\n\n// https://jira.elliemae.io/browse/PUI-12457\nconst useIframeClickCloseWorkaround = ({\n  columnId,\n  isMenuOpen,\n}: {\n  columnId: DSDataTableT.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: DSDataTableT.FilterPopoverProps | DSDataTableT.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/FilterTypes.js

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

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  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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const FILTER_TYPES = {\n  /** @deprecated Use FILTER_TYPES.SELECT_V2. */\n  SELECT: 'ds-filter-select',\n  SELECT_V2: 'ds-filter-select-v2',\n  /** @deprecated Use FILTER_TYPES.CREATABLE_SELECT_V2. */\n  CREATABLE_SELECT: 'ds-filter-creatable-select',\n  CREATABLE_SELECT_V2: 'ds-filter-creatable-select-v2',\n  /** @deprecated Use FILTER_TYPES.MULTI_SELECT_V2. */\n  MULTI_SELECT: 'ds-filter-multi-select',\n  MULTI_SELECT_V2: 'ds-filter-multi-select-v2',\n  /** @deprecated Use FILTER_TYPES.CREATABLE_MULTI_SELECT_V2. */\n  CREATABLE_MULTI_SELECT: 'ds-filter-multi-creatable-select',\n  CREATABLE_MULTI_SELECT_V2: 'ds-filter-multi-creatable-select-v2',\n  /** @deprecated Use FILTER_TYPES.SINGLE_DATE_V2. */\n  SINGLE_DATE: 'ds-filter-single-date',\n  SINGLE_DATE_V2: 'ds-filter-single-date-v2',\n  /** @deprecated Use FILTER_TYPES.DATE_RANGE_V2. */\n  DATE_RANGE: 'ds-filter-date-range',\n  DATE_RANGE_V2: 'ds-filter-date-range-v2',\n  /** @deprecated Use FILTER_TYPES.DATE_SWITCHER_V2. */\n  DATE_SWITCHER: 'ds-filter-date-switcher',\n  DATE_SWITCHER_V2: 'ds-filter-date-switcher-v2',\n  /** @deprecated Use FILTER_TYPES.NUMBER_RANGE_V2. */\n  NUMBER_RANGE: 'ds-filter-number-range',\n  NUMBER_RANGE_V2: 'ds-filter-number-range-v2',\n  /** @deprecated Use FILTER_TYPES.CURRENCY_RANGE_V2. */\n  CURRENCY_RANGE: 'ds-filter-currency-range',\n  CURRENCY_RANGE_V2: 'ds-filter-currency-range-v2',\n  /** @deprecated Use FILTER_TYPES.FREE_TEXT_SEARCH_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;AAAA,EAE1B,QAAQ;AAAA,EACR,WAAW;AAAA;AAAA,EAEX,kBAAkB;AAAA,EAClB,qBAAqB;AAAA;AAAA,EAErB,cAAc;AAAA,EACd,iBAAiB;AAAA;AAAA,EAEjB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA;AAAA,EAE3B,aAAa;AAAA,EACb,gBAAgB;AAAA;AAAA,EAEhB,YAAY;AAAA,EACZ,eAAe;AAAA;AAAA,EAEf,eAAe;AAAA,EACf,kBAAkB;AAAA;AAAA,EAElB,cAAc;AAAA,EACd,iBAAiB;AAAA;AAAA,EAEjB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA;AAAA,EAEnB,kBAAkB;AAAA,EAClB,qBAAqB;AACvB;",
   "names": []
 }

package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren, useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren & { row: DSDataTableT.InternalRow }> = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    id={`${props.row.uid}-detail-view-container`}\n    data-role=\"detail-view\"\n    role=\"region\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n  row,\n  selected,\n  disabled,\n  expanded,\n  expandable,\n}: {\n  row: DSDataTableT.InternalRow;\n  selected: boolean;\n  disabled: boolean;\n  expanded: boolean;\n  expandable: boolean;\n}) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n    // eslint-disable-next-line no-nested-ternary\n    expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n  }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'neutral-000',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const selection = usePropsStore((state) => state.selection);\n  const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n  const expandedRows = usePropsStore((state) => state.expandedRows);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width as number;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  const rowAriaLabelProps = {\n    row,\n    selected: selection?.[row.uid] === true,\n    disabled: disabledRows[row.uid],\n    expandable: isExpandable,\n    expanded: expandedRows[row.uid] === true,\n  };\n\n  const isDetailShown = !isDragOverlay && isExpandable && row.isExpanded;\n\n  return (\n    <>\n      <StyledCellContainer\n        id={`${row.uid}-row`}\n        innerRef={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-disabled={disabledRows[row.uid]}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Cells\n          row={row}\n          isRowSelected={drilldownRowId === row.uid}\n          isDragOverlay={isDragOverlay}\n          key={row.uid}\n          // @ts-expect-error - data-table typescript is broken\n          domIdAffix={domIdAffix}\n        />\n      </StyledCellContainer>\n      {isDetailShown && DetailsView ? (\n        <DetailsWrapper row={row}>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      ) : null}\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n/* eslint-disable complexity */\nimport React, { useMemo, useLayoutEffect, useRef, type PropsWithChildren, useCallback } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { DATA_TESTID, DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { Cells } from '../../parts/Cells/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCellContainer } from '../../styled.js';\n\nconst DetailsWrapper: React.ComponentType<PropsWithChildren & { row: DSDataTableT.InternalRow }> = (props) => (\n  // This can be further customized\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div\n    id={`${props.row.uid}-detail-view-container`}\n    data-role=\"detail-view\"\n    role=\"region\"\n    style={{\n      borderTop: '1px solid #EBEDF0',\n      borderBottom: '1px solid #EBEDF0',\n    }}\n    onClick={(e) => e.stopPropagation()}\n    onKeyDown={(e) => e.stopPropagation()}\n  >\n    {props.children}\n  </div>\n);\n\nconst getDefaultAriaLabelMessageForRow = ({\n  row,\n  selected,\n  disabled,\n  expanded,\n  expandable,\n}: {\n  row: DSDataTableT.InternalRow;\n  selected: boolean;\n  disabled: boolean;\n  expanded: boolean;\n  expandable: boolean;\n}) =>\n  `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n    selected ? 'Selected. ' : ''\n  }${disabled ? 'Disabled. ' : 'To interact with the cells press enter. '}${\n    // eslint-disable-next-line no-nested-ternary\n    expandable ? (expanded ? 'Expanded. ' : 'Collapsed. ') : ''\n  }`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<DSDataTableT.RowContentRendererProps> = (props) => {\n  const {\n    row,\n    draggableProps,\n    isDragOverlay,\n    backgroundColor = 'neutral-000',\n    dropIndicatorPosition,\n    isDropValid,\n    focusedRowId,\n    drilldownRowId,\n    compact,\n  } = props;\n\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const selection = usePropsStore((state) => state.selection);\n  const noSelectionColumn = usePropsStore((state) => state.noSelectionColumn);\n  const expandedRows = usePropsStore((state) => state.expandedRows);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getAriaLabelForRow = usePropsStore((state) => state.getAriaLabelForRow);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const domIdAffix = usePropsStore((state) => state.domIdAffix);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isDndActive = draggableProps && draggableProps.active;\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const detailsIndent = useMemo(() => {\n    let padding = 0;\n    for (let i = 0; i < visibleColumns.length; i += 1) {\n      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n        padding += visibleColumns[i].width as number;\n      } else {\n        padding += row.depth * 32 + 15;\n        break;\n      }\n    }\n    return padding;\n  }, [row.depth, visibleColumns]);\n\n  const DetailsView = row.original.tableRowDetails;\n\n  const rowAriaLabelProps = {\n    row,\n    selected: selection?.[row.uid] === true,\n    disabled: disabledRows[row.uid],\n    expandable: isExpandable,\n    expanded: expandedRows[row.uid] === true,\n  };\n\n  const isDetailShown = !isDragOverlay && isExpandable && row.isExpanded;\n\n  return (\n    <>\n      <StyledCellContainer\n        id={`${row.uid}-row`}\n        innerRef={rowRef}\n        key={row.uid}\n        tabIndex={0}\n        role=\"row\"\n        aria-rowindex={row.realIndex + 1}\n        aria-label={(getAriaLabelForRow ?? getDefaultAriaLabelMessageForRow)(rowAriaLabelProps)}\n        aria-selected={selection?.[row.uid] === true}\n        aria-disabled={disabledRows[row.uid]}\n        backgroundColor={backgroundColor}\n        height={compact ? '24px' : 'auto'}\n        minHeight={compact ? '24px' : '36px'}\n        isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n        isDropValid={isDropValid}\n        shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n        isDragOverlay={isDragOverlay}\n        isDragging={isDragging}\n        selected={noSelectionColumn && selection?.[row.uid] === true}\n        isDisabled={disabledRows[row.uid]}\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Cells\n          row={row}\n          isRowSelected={drilldownRowId === row.uid}\n          isDragOverlay={isDragOverlay}\n          key={row.uid}\n          // @ts-expect-error - data-table typescript is broken\n          domIdAffix={domIdAffix}\n        />\n      </StyledCellContainer>\n      {isDetailShown && DetailsView ? (\n        <DetailsWrapper row={row}>\n          <DetailsView row={row} detailsIndent={detailsIndent} />\n        </DetailsWrapper>\n      ) : null}\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { useContext } from "react";
+import { useCallback, useContext } from "react";
 import { DATA_TESTID } from "../../configs/constants.js";
 import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 import { DropIndicator } from "../../parts/DropIndicator.js";
@@ -39,6 +39,7 @@ const RowRenderer = (props) => {
   const flattenedData = usePropsStore((state) => state.flattenedData);
   const { draggableProps } = useContext(SortableItemContext);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => ({ row }), [row]);
   const { userDataProperties, rowStyle, shouldAppendDottedBorder, dropIndicatorPosition, isDropValid } = useRowRendererProperties({
     row
   });
@@ -74,6 +75,7 @@ const RowRenderer = (props) => {
       minHeight,
       height,
       getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         CustomRowContentRenderer ? /* @__PURE__ */ jsx(CustomRowContentRenderer, { ...rowContentProps }) : /* @__PURE__ */ createElement(DefaultRowContentRenderer, { ...rowContentProps, key: row.uid }),
         shouldAppendDottedBorder && !isDragOverlay && magicDottedBorder,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DropIndicator } from '../../parts/DropIndicator.js';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';\nimport type { RowVariantProps } from '../../parts/RowVariants/types.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledFullsizeGrid } from '../../styled.js';\nimport { DefaultRowContentRenderer } from './DefaultRowContentRenderer.js';\nimport { useRowRendererHandlers } from './useRowRendererHandlers.js';\nimport { useRowRendererProperties } from './useRowRendererProperties.js';\n\ninterface RowRendererProps {\n  row: DSDataTableT.InternalRow;\n  compact?: boolean;\n  itemIndex: number;\n  isDragOverlay: boolean;\n  minHeight: string;\n  height: string;\n  rowsLayout?: string[] | number[];\n  CustomRowContentRenderer?: React.ComponentType<RowVariantProps>;\n  focusedRowId: string | null;\n  drilldownRowId: string | null;\n  backgroundColor?: XstyledProps['backgroundColor'];\n}\n\n// CSS don't let us modify the spacing between the dots, so one solution is to use SVG\nconst magicDottedBorder = (\n  <svg width=\"100%\" height=\"1px\">\n    <line\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"100%\"\n      y2=\"0\"\n      stroke=\"#B0B9C8FF\"\n      strokeWidth=\"1.5\"\n      strokeDasharray=\"0, 5\"\n      strokeDashoffset=\"0\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nconst RowRenderer: React.ComponentType<RowRendererProps> = (props) => {\n  const {\n    row,\n    itemIndex,\n    minHeight = '36px',\n    height = 'auto',\n    rowsLayout = [1],\n    CustomRowContentRenderer,\n    focusedRowId,\n    drilldownRowId,\n    isDragOverlay,\n  } = props;\n\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  // ===========================================================================\n  // Properties for the row\n  // ===========================================================================\n\n  const { userDataProperties, rowStyle, shouldAppendDottedBorder, dropIndicatorPosition, isDropValid } =\n    useRowRendererProperties({\n      row,\n    });\n\n  // ===========================================================================\n  // Handlers\n  // ===========================================================================\n\n  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = useRowRendererHandlers({\n    row,\n    itemIndex,\n    items: flattenedData,\n    draggableProps,\n    isDragOverlay,\n    drilldownRowId,\n  });\n\n  const rowContentProps: RowVariantProps = {\n    ...props,\n    focusedRowId,\n    drilldownRowId,\n    draggableProps,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n\n  return (\n    <StyledFullsizeGrid\n      data-testid={DATA_TESTID.DATA_TABLE_ROW}\n      key={row.uid}\n      {...userDataProperties}\n      style={rowStyle}\n      onClick={handleItemClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      data-expandable={Boolean(row.original.tableRowDetails)}\n      data-is-row-expanded={row.isExpanded}\n      rows={rowsLayout}\n      minHeight={minHeight}\n      height={height}\n      getOwnerProps={getOwnerProps}\n    >\n      {CustomRowContentRenderer ? (\n        <CustomRowContentRenderer {...rowContentProps} />\n      ) : (\n        <DefaultRowContentRenderer {...rowContentProps} key={row.uid} />\n      )}\n      {shouldAppendDottedBorder && !isDragOverlay && magicDottedBorder}\n      <DropIndicator\n        vertical={false}\n        dropIndicatorPosition={dropIndicatorPosition}\n        isDropValid={isDropValid}\n        isLast={row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging}\n      />\n    </StyledFullsizeGrid>\n  );\n};\n\nexport { RowRenderer };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+BnB,cA+DA,YA/DA;AAkFI;AA/GR,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AAiBzC,MAAM,oBACJ,oBAAC,SAAI,OAAM,QAAO,QAAO,OACvB;AAAA,EAAC;AAAA;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,kBAAiB;AAAA,IACjB,eAAc;AAAA;AAChB,GACF;AAGF,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,aAAa,CAAC,CAAC;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAMxD,QAAM,EAAE,oBAAoB,UAAU,0BAA0B,uBAAuB,YAAY,IACjG,yBAAyB;AAAA,IACvB;AAAA,EACF,CAAC;AAMH,QAAM,EAAE,iBAAiB,eAAe,cAAc,cAAc,IAAI,uBAAuB;AAAA,IAC7F;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAmC;AAAA,IACvC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MAExB,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,mBAAiB,QAAQ,IAAI,SAAS,eAAe;AAAA,MACrD,wBAAsB,IAAI;AAAA,MAC1B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,mCACC,oBAAC,4BAA0B,GAAG,iBAAiB,IAE/C,8BAAC,6BAA2B,GAAG,iBAAiB,KAAK,IAAI,KAAK;AAAA,QAE/D,4BAA4B,CAAC,iBAAiB;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,QAAQ,IAAI,UAAU,cAAc,SAAS,KAAK,kBAAkB,eAAe;AAAA;AAAA,QACrF;AAAA;AAAA;AAAA,IAzBK,IAAI;AAAA,EA0BX;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DropIndicator } from '../../parts/DropIndicator.js';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledFullsizeGrid } from '../../styled.js';\nimport { DefaultRowContentRenderer } from './DefaultRowContentRenderer.js';\nimport { useRowRendererHandlers } from './useRowRendererHandlers.js';\nimport { useRowRendererProperties } from './useRowRendererProperties.js';\n\n// CSS don't let us modify the spacing between the dots, so one solution is to use SVG\nconst magicDottedBorder = (\n  <svg width=\"100%\" height=\"1px\">\n    <line\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"100%\"\n      y2=\"0\"\n      stroke=\"#B0B9C8FF\"\n      strokeWidth=\"1.5\"\n      strokeDasharray=\"0, 5\"\n      strokeDashoffset=\"0\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nconst RowRenderer: React.ComponentType<DSDataTableT.RowRendererProps> = (props) => {\n  const {\n    row,\n    itemIndex,\n    minHeight = '36px',\n    height = 'auto',\n    rowsLayout = [1],\n    CustomRowContentRenderer,\n    focusedRowId,\n    drilldownRowId,\n    isDragOverlay,\n  } = props;\n\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const { draggableProps } = useContext(SortableItemContext);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => ({ row }), [row]);\n\n  // ===========================================================================\n  // Properties for the row\n  // ===========================================================================\n\n  const { userDataProperties, rowStyle, shouldAppendDottedBorder, dropIndicatorPosition, isDropValid } =\n    useRowRendererProperties({\n      row,\n    });\n\n  // ===========================================================================\n  // Handlers\n  // ===========================================================================\n\n  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = useRowRendererHandlers({\n    row,\n    itemIndex,\n    items: flattenedData,\n    draggableProps,\n    isDragOverlay,\n    drilldownRowId,\n  });\n\n  const rowContentProps: DSDataTableT.RowContentRendererProps = {\n    ...props,\n    focusedRowId,\n    drilldownRowId,\n    draggableProps,\n    dropIndicatorPosition,\n    isDropValid,\n  };\n\n  return (\n    <StyledFullsizeGrid\n      data-testid={DATA_TESTID.DATA_TABLE_ROW}\n      key={row.uid}\n      {...userDataProperties}\n      style={rowStyle}\n      onClick={handleItemClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      data-expandable={Boolean(row.original.tableRowDetails)}\n      data-is-row-expanded={row.isExpanded}\n      rows={rowsLayout}\n      minHeight={minHeight}\n      height={height}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {CustomRowContentRenderer ? (\n        <CustomRowContentRenderer {...rowContentProps} />\n      ) : (\n        <DefaultRowContentRenderer {...rowContentProps} key={row.uid} />\n      )}\n      {shouldAppendDottedBorder && !isDragOverlay && magicDottedBorder}\n      <DropIndicator\n        vertical={false}\n        dropIndicatorPosition={dropIndicatorPosition}\n        isDropValid={isDropValid}\n        isLast={row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging}\n      />\n    </StyledFullsizeGrid>\n  );\n};\n\nexport { RowRenderer };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcnB,cAgEA,YAhEA;AAoFI;AAlGR,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AAEpC,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AAGzC,MAAM,oBACJ,oBAAC,SAAI,OAAM,QAAO,QAAO,OACvB;AAAA,EAAC;AAAA;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,kBAAiB;AAAA,IACjB,eAAc;AAAA;AAChB,GACF;AAGF,MAAM,cAAkE,CAAC,UAAU;AACjF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,aAAa,CAAC,CAAC;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC;AAMjE,QAAM,EAAE,oBAAoB,UAAU,0BAA0B,uBAAuB,YAAY,IACjG,yBAAyB;AAAA,IACvB;AAAA,EACF,CAAC;AAMH,QAAM,EAAE,iBAAiB,eAAe,cAAc,cAAc,IAAI,uBAAuB;AAAA,IAC7F;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAwD;AAAA,IAC5D,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MAExB,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,mBAAiB,QAAQ,IAAI,SAAS,eAAe;AAAA,MACrD,wBAAsB,IAAI;AAAA,MAC1B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,mCACC,oBAAC,4BAA0B,GAAG,iBAAiB,IAE/C,8BAAC,6BAA2B,GAAG,iBAAiB,KAAK,IAAI,KAAK;AAAA,QAE/D,4BAA4B,CAAC,iBAAiB;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,QAAQ,IAAI,UAAU,cAAc,SAAS,KAAK,kBAAkB,eAAe;AAAA;AAAA,QACrF;AAAA;AAAA;AAAA,IA1BK,IAAI;AAAA,EA2BX;AAEJ;",
   "names": []
 }

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

@@ -64,6 +64,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
   const handleOnClickOutside = useCallback(() => setShow(false), []);
   const handleOnClick = useCallback(() => setShow((prev) => !prev), []);
   const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => ({ row: cell?.row }), [cell]);
   const stopPropagation = useCallback((e) => e.stopPropagation(), []);
   useOnClickOutside(toolbarRef, handleOnClickOutside);
   const onToolbarKeyDown = useCallback((e) => {
@@ -80,31 +81,44 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
       }
     });
   }, []);
-  return /* @__PURE__ */ jsx(ToolbarPosition, { onBlur: handleOnBlurToolBar, innerRef: toolbarRef, tabIndex: -1, getOwnerProps, children: /* @__PURE__ */ jsxs(
-    ToolbarWrapper,
+  return /* @__PURE__ */ jsx(
+    ToolbarPosition,
     {
-      onKeyDown: onToolbarKeyDown,
-      onClick: stopPropagation,
-      isOpen: show,
+      onBlur: handleOnBlurToolBar,
+      innerRef: toolbarRef,
+      tabIndex: -1,
       getOwnerProps,
-      children: [
-        show && /* @__PURE__ */ jsx(ToolbarBtns, { getOwnerProps, children }),
-        /* @__PURE__ */ jsx(
-          StyledButton,
-          {
-            buttonType: "icon",
-            className: "toolbar-trigger",
-            "data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
-            innerRef: mergeRefs(toolbarTriggerRef, cell?.ref),
-            onClick: handleOnClick,
-            tabIndex: isRowSelected === false ? -1 : 0,
-            "aria-label": "Row actions",
-            children: /* @__PURE__ */ jsx(MoreOptionsVert, {})
-          }
-        )
-      ]
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsxs(
+        ToolbarWrapper,
+        {
+          onKeyDown: onToolbarKeyDown,
+          onClick: stopPropagation,
+          isOpen: show,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            show && /* @__PURE__ */ jsx(ToolbarBtns, { getOwnerProps, getOwnerPropsArguments, children }),
+            /* @__PURE__ */ jsx(
+              StyledButton,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                buttonType: "icon",
+                className: "toolbar-trigger",
+                "data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
+                innerRef: mergeRefs(toolbarTriggerRef, cell?.ref),
+                onClick: handleOnClick,
+                tabIndex: isRowSelected === false ? -1 : 0,
+                "aria-label": "Row actions",
+                children: /* @__PURE__ */ jsx(MoreOptionsVert, {})
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   Toolbar

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC2GjB,SAMW,KANX;AA1GN,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,KAAK,WAAW,cAAc;AACvC,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,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,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,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,sBAAsB,YAAY,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,oBAAC,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,oBAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,YAAY;AAAA,YACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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\nexport const Toolbar: React.ComponentType<DSDataTableT.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  const getOwnerPropsArguments = useCallback(() => ({ row: cell?.row }), [cell]);\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\n      onBlur={handleOnBlurToolBar}\n      innerRef={toolbarRef}\n      tabIndex={-1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <ToolbarWrapper\n        onKeyDown={onToolbarKeyDown}\n        onClick={stopPropagation}\n        isOpen={show}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {show && (\n          <ToolbarBtns getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {children}\n          </ToolbarBtns>\n        )}\n        <StyledButton\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\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"],
+  "mappings": "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",
   "names": []
 }