npm - @elliemae/ds-form-combobox - Versions diffs - 3.70.0-next.2 → 3.70.0-next.21 - Mend

@elliemae/ds-form-combobox 3.70.0-next.2 → 3.70.0-next.21

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

Files changed (146) hide show

package/dist/esm/parts/menu-list/styled.js CHANGED Viewed

@@ -1,26 +1,52 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-const StyledListWrapper = styled(Grid)`
+import { SingleMenuItem, MultiMenuItem } from "@elliemae/ds-menu-items";
+import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
+const StyledListWrapper = styled(Grid, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER
+})`
   min-width: ${({ inline, minWidth }) => inline ? "100%" : `${String(minWidth)}px`};
   width: ${({ width }) => `${width}px`};
   background-color: #ffffff;
   z-index: 100;
 `;
-const StyledCreatableLabel = styled.span`
+const StyledCreatableLabel = styled("span", {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL
+})`
   font-weight: bold;
   font-style: italic;
 `;
-const StyledCreatableValue = styled.span`
+const StyledCreatableValue = styled("span", {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE
+})`
   word-break: break-all;
 `;
-const StyledNoResultsWrapper = styled.div`
+const StyledNoResultsWrapper = styled("div", {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND
+})`
   padding: 14px;
 `;
+const StyledSingleMenuItem = styled(SingleMenuItem, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
+const StyledMultiMenuItem = styled(MultiMenuItem, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
 export {
   StyledCreatableLabel,
   StyledCreatableValue,
   StyledListWrapper,
-  StyledNoResultsWrapper
+  StyledMultiMenuItem,
+  StyledNoResultsWrapper,
+  StyledSingleMenuItem
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/parts/menu-list/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 14px;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AAQd,MAAM,oBAAoB,OAAO,IAAI;AAAA,eAC7B,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,oBAAoB,2BAA2B;AAQjD,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
   "names": []
 }

package/dist/esm/parts/menu-list/useItemRenderer.js CHANGED Viewed

@@ -2,26 +2,14 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useContext, useCallback } from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { SingleMenuItem, MultiMenuItem, Separator } from "@elliemae/ds-menu-items";
-import { styled } from "@elliemae/ds-system";
+import { Separator } from "@elliemae/ds-menu-items";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { Section } from "../Section.js";
 import { ComboBoxContext } from "../../ComboBoxCTX.js";
-import { StyledCreatableLabel, StyledCreatableValue } from "./styled.js";
+import { StyledCreatableLabel, StyledCreatableValue, StyledSingleMenuItem, StyledMultiMenuItem } from "./styled.js";
 import { isSelected, getSuggestedValueOnChange } from "../../utils/listHelper.js";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
 import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from "../../constants.js";
-import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
-const StyledSingleMenuItem = styled(SingleMenuItem, {
-  name: DSFormComboboxName,
-  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
-  preserveLegacyDataTestId: true
-})``;
-const StyledMultiMenuItem = styled(MultiMenuItem, {
-  name: DSFormComboboxName,
-  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
-  preserveLegacyDataTestId: true
-})``;
 const ItemRenderer = ({ index, extraItemProps }) => {
   const {
     props,
@@ -59,7 +47,11 @@ const ItemRenderer = ({ index, extraItemProps }) => {
           if (!multiple) {
             setMenuState(false, "selectOption", e);
           }
-          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);
+          onChange(
+            getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable),
+            currentOption,
+            e
+          );
         }
       }
       e.stopPropagation();
@@ -80,7 +72,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
         dsId: dsId.toString(),
         ...rest
       };
-      if (type === MENU_OPTION_TYPES.SECTION) {
+      if (option.type === MENU_OPTION_TYPES.SECTION) {
         return /* @__PURE__ */ jsx(
           Section,
           {
@@ -100,29 +92,26 @@ const ItemRenderer = ({ index, extraItemProps }) => {
         return /* @__PURE__ */ jsx(Separator, { ...generalProps, render: void 0 });
       }
       if (option.type === MENU_OPTION_TYPES.OPTION) {
-        return (
-          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.
-          /* @__PURE__ */ jsx(
-            CBItem,
-            {
-              ...generalProps,
-              value: option.value,
-              label: option.label,
-              dataTestid: ComboboxDataTestid.OPTION,
-              disabled,
-              applyAriaDisabled: applyAriaDisabled || itemReadOnly,
-              onClick: (e) => {
-                if (applyAriaDisabled) return;
-                handleClick(option, e);
-              },
-              onMouseDown: handleOnMouseDown,
-              isActive: dsId === focusOptionIdx,
-              tabIndex: -1,
-              isSelected: isSelected(selectedValues, option),
-              getOwnerProps,
-              getOwnerPropsArguments
-            }
-          )
+        return /* @__PURE__ */ jsx(
+          CBItem,
+          {
+            ...generalProps,
+            value: option.value,
+            label: option.label,
+            dataTestid: ComboboxDataTestid.OPTION,
+            disabled,
+            applyAriaDisabled: applyAriaDisabled || itemReadOnly,
+            onClick: (e) => {
+              if (applyAriaDisabled) return;
+              handleClick(option, e);
+            },
+            onMouseDown: handleOnMouseDown,
+            isActive: dsId === focusOptionIdx,
+            tabIndex: -1,
+            isSelected: isSelected(selectedValues, option),
+            getOwnerProps,
+            getOwnerPropsArguments
+          }
         );
       }
       if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
@@ -135,8 +124,8 @@ const ItemRenderer = ({ index, extraItemProps }) => {
             isActive: dsId === focusOptionIdx,
             ...generalProps,
             render: ({ label: labelCreatable }) => /* @__PURE__ */ jsxs(Grid, { p: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
-              /* @__PURE__ */ jsx(StyledCreatableLabel, { children: "Add:" }),
-              /* @__PURE__ */ jsx(StyledCreatableValue, { children: `"${labelCreatable}"` })
+              /* @__PURE__ */ jsx(StyledCreatableLabel, { getOwnerProps, children: "Add:" }),
+              /* @__PURE__ */ jsx(StyledCreatableValue, { getOwnerProps, children: `"${labelCreatable}"` })
             ] }),
             label: option.label,
             onClick: handleOnCreateClick,

package/dist/esm/parts/menu-list/useItemRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nconst StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            tabIndex={-1}\n            isSelected={isSelected(selectedValues, option)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n            tabIndex={-1}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0Gb,cAiDI,YAjDJ;AAvGV,SAAgB,SAAS,YAAY,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,gBAAgB,eAAe,iBAAiB;AACzD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB,4BAA4B;AAC3D,SAAS,YAAY,iCAAiC;AACtD,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB,kCAAkC;AAC9D,SAAS,oBAAoB,2BAA2B;AASxD,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAED,MAAM,sBAAsB,OAAO,eAAe;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,eAAe,CAAC,EAAE,OAAO,eAAe,MAAkC;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,UAAU,gBAAgB,gBAAgB,UAAU,YAAY,SAAS;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,SAAS,gBAAgB,WAAW,KAAK;AAE/C,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,SAAS,WAAW,sBAAsB;AAEhD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,cAAc,UAAU;AAC1B,eAAS,UAAU;AACnB,oBAAc,EAAE;AAChB,UAAI,SAAU,UAAS,YAAY,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,YAAY,YAAY,aAAa,CAAC;AAE9D,QAAM,cAAc;AAAA,IAClB,CAAC,eAAuC,MAAwB;AAC9D,UAAI,SAAU;AACd,UAAI,cAAc,SAAS,kBAAkB,QAAQ;AACnD,YAAI,CAAC,cAAc,UAAU;AAC3B,cAAI,SAAU,UAAS,YAAY,UAAU;AAC7C,wBAAc,EAAE;AAChB,cAAI,CAAC,UAAU;AACb,yBAAa,OAAO,gBAAgB,CAAC;AAAA,UACvC;AACA,mBAAS,0BAA0B,eAAe,gBAAgB,cAAc,GAAG,eAAe,CAAC;AAAA,QACrG;AAAA,MACF;AAEA,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,gBAAgB,YAAY,UAAU,cAAc,QAAQ;AAAA,EACzE;AAGA,QAAM,oBAAoB,YAAY,CAAC,MAAuC;AAC5E,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAGL,SAAO,QAAQ,MAAM;AACnB,QAAI,QAAQ;AACV,YAAM,EAAE,MAAM,MAAM,UAAU,mBAAmB,UAAU,cAAc,GAAG,KAAK,IAAI;AACrF,YAAM,eAAe;AAAA;AAAA;AAAA,QAGnB,KAAK,GAAG,IAAI;AAAA,QACZ,MAAM,KAAK,SAAS;AAAA,QACpB,GAAG;AAAA,MACL;AACA,UAAI,SAAS,kBAAkB,SAAS;AACtC,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO;AAAA,YACb,GAAG;AAAA,YAEJ,SAAS,OAAO;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,MAEJ;AACA,UAAI,SAAS,kBAAkB,WAAW;AACxC,eAAO,oBAAC,aAAW,GAAG,cAAc,QAAQ,QAAW;AAAA,MACzD;AACA,UAAI,OAAO,SAAS,kBAAkB,QAAQ;AAC5C;AAAA;AAAA,UAEE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,YAAY,mBAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAAwB;AAChC,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,UAAU;AAAA,cACV,YAAY,WAAW,gBAAgB,MAAM;AAAA,cAC7C;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AACA,UAAI,SAAS,2BAA2B,WAAW;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAY,mBAAmB;AAAA,YAC/B,UAAU,SAAS;AAAA,YAClB,GAAG;AAAA,YACJ,QAAQ,CAAC,EAAE,OAAO,eAAe,MAC/B,qBAAC,QAAK,GAAE,OAAM,MAAM,CAAC,eAAe,MAAM,GAAG,QAAO,OAAM,YAAW,UACnE;AAAA,kCAAC,wBAAqB,kBAAI;AAAA,cAC1B,oBAAC,wBAAsB,cAAI,cAAc,KAAI;AAAA,eAC/C;AAAA,YAEF,OAAO,OAAO;AAAA,YACd,SAAS;AAAA,YACT,UAAU;AAAA;AAAA,QACZ;AAAA,MAEJ;AACA,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,gBAAgB,YAAY,UAAU,YAAY,QAAQ,CAAC;AACpG;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Separator } from '@elliemae/ds-menu-items';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue, StyledSingleMenuItem, StyledMultiMenuItem } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): React.ReactElement | null => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = multiple\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.OptionTypes, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n            getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable),\n            currentOption,\n            e,\n          );\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            tabIndex={-1}\n            isSelected={isSelected(selectedValues, option)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel getOwnerProps={getOwnerProps}>Add:</StyledCreatableLabel>\n                <StyledCreatableValue getOwnerProps={getOwnerProps}>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n            tabIndex={-1}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js CHANGED Viewed

@@ -22,7 +22,7 @@ const MultiSelectedValuesContainer = () => {
       {
         style: { width: multiSelectedValue.length > 0 ? "max-content" : "0px" },
         "data-testid": ComboboxDataTestid.SELECTED_VALUES,
-        children: /* @__PURE__ */ jsxs(StyledDSPillGroupV2, { innerRef: pillGroupRef, children: [
+        children: /* @__PURE__ */ jsxs(StyledDSPillGroupV2, { innerRef: pillGroupRef, getOwnerProps: ownerProps.getOwnerProps, children: [
           multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill, idx) => /* @__PURE__ */ jsx(
             RemovableSelectedValuePill,
             {

package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { StyledDSPillGroupV2, StyledDSPillV2 } from '../styled.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nimport { useGroupPills } from './useGroupPills.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props,\n    props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  // this is always an array because logic in controls component\n  const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n  const correctPillsToShow = useGroupPills();\n  const ownerProps = useOwnerProps(props);\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <StyledDSPillGroupV2 innerRef={pillGroupRef}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((pill, idx) => (\n                <RemovableSelectedValuePill\n                  key={pill.dsId}\n                  pill={pill}\n                  trailingComma={\n                    ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n                    (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n                  }\n                  ownerProps={ownerProps}\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <StyledDSPillV2\n              size=\"s\"\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabledToContainer}\n              readOnly={readOnly}\n              className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n              {...ownerProps}\n            />\n          )}\n        </StyledDSPillGroupV2>\n      </div>\n    ),\n\n    [\n      pillGroupRef,\n      multiSelectedValue,\n      correctPillsToShow,\n      disabled,\n      applyAriaDisabledToContainer,\n      readOnly,\n      ownerProps,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Bf,SAKQ,KALR;AA3BR,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,qBAAqB,sBAAsB;AACpD,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AACzC,QAAM,aAAa,cAAc,KAAK;AAEtC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,uBAAoB,UAAU,cAC5B;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA,cAE9E;AAAA;AAAA,YANK,KAAK;AAAA,UAOZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,YAPA;AAAA,UAQN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { StyledDSPillGroupV2, StyledDSPillV2 } from '../styled.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nimport { useGroupPills } from './useGroupPills.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props,\n    props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  // this is always an array because logic in controls component\n  const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n  const correctPillsToShow = useGroupPills();\n  // useOwnerProps returns () => {} for getOwnerPropsArguments, but OwnerInterface expects () => object.\n  // The cast is safe \u2014 the actual return is always a plain object at runtime.\n  const ownerProps = useOwnerProps(props) as {\n    getOwnerProps: () => object;\n    getOwnerPropsArguments: () => object;\n  };\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <StyledDSPillGroupV2 innerRef={pillGroupRef} getOwnerProps={ownerProps.getOwnerProps}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((pill, idx) => (\n                <RemovableSelectedValuePill\n                  key={pill.dsId}\n                  pill={pill}\n                  trailingComma={\n                    ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n                    (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n                  }\n                  ownerProps={ownerProps}\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <StyledDSPillV2\n              size=\"s\"\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabledToContainer}\n              readOnly={readOnly}\n              className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n              {...ownerProps}\n            />\n          )}\n        </StyledDSPillGroupV2>\n      </div>\n    ),\n\n    [\n      pillGroupRef,\n      multiSelectedValue,\n      correctPillsToShow,\n      disabled,\n      applyAriaDisabledToContainer,\n      readOnly,\n      ownerProps,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCf,SAKQ,KALR;AAhCR,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,qBAAqB,sBAAsB;AACpD,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AAGzC,QAAM,aAAa,cAAc,KAAK;AAKtC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,uBAAoB,UAAU,cAAc,eAAe,WAAW,eACpE;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA,cAE9E;AAAA;AAAA,YANK,KAAK;AAAA,UAOZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,YAPA;AAAA,UAQN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js CHANGED Viewed

@@ -43,7 +43,11 @@ const RemovableSelectedValuePill = (props) => {
       onRemove: (e) => {
         if (readOnly) return;
         e.stopPropagation();
-        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
+        onChange(
+          getSuggestedValueOnChange(pill, selectedValues),
+          pill,
+          e
+        );
         internalRef.current?.focus();
       },
       ...ownerProps

package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n  ownerProps?: {\n    getOwnerProps: () => DSComboboxT.InternalProps;\n    getOwnerPropsArguments: () => object;\n  };\n}> = (props) => {\n  const { pill, trailingComma, ownerProps } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n  /**\n   * WORKAROUND: Manual className management\n   *\n   * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n   * When using the slot system (ownerProps), the internal component's className\n   * is overridden by the styled-component's generated className, causing\n   * DSPillV2's variant-specific classes to be lost.\n   *\n   * These classes are required for correct styling of different pill types:\n   * - ds-pill-wrapper-removable: Interactive pills with remove button\n   * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n   * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n   *\n   * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n   * when styled(InnerComponent) is used. Current implementation overwrites className\n   * instead of merging it.\n   *\n   * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n   * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n   *\n   *\n   * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n   */\n  const className = React.useMemo(() => {\n    if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n    if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n    return 'ds-pill-wrapper ds-pill-wrapper-value';\n  }, [type]);\n\n  return (\n    <StyledDSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled || pill.disabled}\n      type={type}\n      className={className}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      labelTruncated\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n      {...ownerProps}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,iBAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IAjBC,KAAK;AAAA,EAkBZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n  ownerProps?: {\n    getOwnerProps: () => object;\n    getOwnerPropsArguments: () => object;\n  };\n}> = (props) => {\n  const { pill, trailingComma, ownerProps } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n  /**\n   * WORKAROUND: Manual className management\n   *\n   * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n   * When using the slot system (ownerProps), the internal component's className\n   * is overridden by the styled-component's generated className, causing\n   * DSPillV2's variant-specific classes to be lost.\n   *\n   * These classes are required for correct styling of different pill types:\n   * - ds-pill-wrapper-removable: Interactive pills with remove button\n   * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n   * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n   *\n   * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n   * when styled(InnerComponent) is used. Current implementation overwrites className\n   * instead of merging it.\n   *\n   * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n   * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n   *\n   *\n   * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n   */\n  const className = React.useMemo(() => {\n    if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n    if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n    return 'ds-pill-wrapper ds-pill-wrapper-value';\n  }, [type]);\n\n  return (\n    <StyledDSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled || pill.disabled}\n      type={type}\n      className={className}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      labelTruncated\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n          getSuggestedValueOnChange(pill, selectedValues),\n          pill,\n          e,\n        );\n        internalRef.current?.focus();\n      }}\n      {...ownerProps}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,UACC,0BAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IArBC,KAAK;AAAA,EAsBZ;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/styled.js CHANGED Viewed

@@ -27,7 +27,10 @@ const StyledDSPillV2 = styled(DSPillV2, {
   color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
 `;
-const StyledDSPillGroupV2 = styled(DSPillGroupV2)`
+const StyledDSPillGroupV2 = styled(DSPillGroupV2, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP
+})`
   display: grid;
 `;
 export {

package/dist/esm/parts/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n *\n * Not adding the slot, because this a regression.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2)`\n  display: grid;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAY9E,MAAM,sBAAsB,OAAO,aAAa;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAU9E,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js CHANGED Viewed

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { createRef } from "react";
-import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import {
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  PropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
 import { commonComboboxPropTypes } from "./DSCommonComboboxPropsT.js";
+import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "./constants/index.js";
 const defaultProps = {
   hasError: false,
   inline: false,
@@ -24,6 +30,7 @@ const defaultProps = {
   menuMaxHeight: 300
 };
 const ComboboxPropTypes = {
+  ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   ...commonComboboxPropTypes,

package/dist/esm/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\n\nexport declare namespace DSComboboxT {\n  export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n  export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n  export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n  export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n  export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n  export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n  export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n  export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {\n    selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n  };\n\n  export type RequiredProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.RequiredProps\n    : SingleComboboxRequirePropsRenameInterface;\n\n  export type DefaultProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.DefaultProps : DSComboboxSingleT.DefaultProps;\n  export type OptionalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.OptionalProps : DSComboboxSingleT.OptionalProps;\n  export type PropsOptional = OptionalProps; // alias for backwards compatibility\n\n  export type Props<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.Props\n    : Omit<DSComboboxSingleT.Props, 'selectedValue'> & { selectedValues: DSComboboxSingleT.Props['selectedValue'] };\n  export type InternalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.InternalProps\n    : Omit<DSComboboxSingleT.InternalProps, 'selectedValue'> & {\n        selectedValues: DSComboboxSingleT.InternalProps['selectedValue'];\n      };\n}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: () => {},\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n  readOnly: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n};\n\n/**\n * Unified public schema used by polymorphic combobox consumption.\n *\n * `selectedValues` shape determines effective usage mode:\n * - object or null => single-select contract\n * - array => multi-select contract\n */\nexport const ComboboxPropTypes: DSPropTypesSchema<DSComboboxT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Polymorphic change callback. For single-select, suggestedValue is ItemOption | null; for multi-select, suggestedValue is ItemOption[].',\n    )\n    .signature(\n      '(suggestedValue: ItemOption | ItemOption[] | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])),\n    PropTypes.object,\n    PropTypes.oneOf([null]),\n  ]).isRequired.description(\n    'Either a single selectable option or an array of selectable options. This shape determines single vs multi selection behavior. Null is valid only for single-select with no selection; an empty array is valid only for multi-select with no selection.',\n  ),\n};\n\nexport const ComboboxPropTypesSchema = ComboboxPropTypes as unknown as ValidationMap<DSComboboxT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B,WAAW,wBAAwB;AAGvE,SAAS,+BAA4D;AAyD9D,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AASO,MAAM,oBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU;AAAA,IAClC,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,CAAC;AAAA,IACzD,UAAU;AAAA,IACV,UAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxT {\n  export type SlotFunctionArguments = {\n    dsComboboxRoot: () => object;\n    dsComboboxInputWrapper: () => object;\n    dsComboboxInput: () => object;\n    dsComboboxDropdownButton: () => object;\n    dsComboboxFastList: () => object;\n    dsComboboxSectionWrapper: () => object;\n    dsComboboxSectionLabel: () => object;\n    dsComboboxSingleMenuItem: () => object;\n    dsComboboxMultiMenuItem: () => object;\n    dsComboboxLoadingIndicator: () => object;\n    dsComboboxSkeletonMenuItem: () => object;\n    dsComboboxPill: () => object;\n    dsComboboxPillGroup: () => object;\n    dsComboboxPopperWrapper: () => object;\n    dsComboboxSelection: () => object;\n    dsComboboxSingleValueWrapper: () => object;\n    dsComboboxHeaderActions: () => object;\n    dsComboboxHeaderActionsSeparator: () => object;\n    dsComboboxInputPlaceholder: () => object;\n    dsComboboxInputFieldWrapper: () => object;\n    dsComboboxListWrapper: () => object;\n    dsComboboxNoResults: () => object;\n    dsComboboxCreatableLabel: () => object;\n    dsComboboxCreatableValue: () => object;\n    dsComboboxMenuItemsWrapper: () => object;\n    dsComboboxLoadingWrapper: () => object;\n  };\n\n  export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n  export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n  export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n  export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n  export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n  export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n  export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n  export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {\n    selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n  };\n\n  export type RequiredProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.RequiredProps\n    : SingleComboboxRequirePropsRenameInterface;\n\n  export type DefaultProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.DefaultProps : DSComboboxSingleT.DefaultProps;\n  export type OptionalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.OptionalProps : DSComboboxSingleT.OptionalProps;\n  export type PropsOptional = OptionalProps; // alias for backwards compatibility\n\n  export type Props<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.Props\n    : Omit<DSComboboxSingleT.Props, 'selectedValue'> & { selectedValues: DSComboboxSingleT.Props['selectedValue'] };\n  export type InternalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.InternalProps\n    : Omit<DSComboboxSingleT.InternalProps, 'selectedValue'> & {\n        selectedValues: DSComboboxSingleT.InternalProps['selectedValue'];\n      };\n}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: () => {},\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n  readOnly: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n};\n\n/**\n * Unified public schema used by polymorphic combobox consumption.\n *\n * `selectedValues` shape determines effective usage mode:\n * - object or null => single-select contract\n * - array => multi-select contract\n */\nexport const ComboboxPropTypes: DSPropTypesSchema<DSComboboxT.Props> = {\n  ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Polymorphic change callback. For single-select, suggestedValue is ItemOption | null; for multi-select, suggestedValue is ItemOption[].',\n    )\n    .signature(\n      '(suggestedValue: ItemOption | ItemOption[] | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])),\n    PropTypes.object,\n    PropTypes.oneOf([null]),\n  ]).isRequired.description(\n    'Either a single selectable option or an array of selectable options. This shape determines single vs multi selection behavior. Null is valid only for single-select with no selection; an empty array is valid only for multi-select with no selection.',\n  ),\n};\n\nexport const ComboboxPropTypesSchema = ComboboxPropTypes as unknown as ValidationMap<DSComboboxT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,2BAA2B;AAsFjD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AASO,MAAM,oBAA0D;AAAA,EACrE,GAAG,yBAAyB,oBAAoB,mBAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU;AAAA,IAClC,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,CAAC;AAAA,IACzD,UAAU;AAAA,IACV,UAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js ADDED Viewed

@@ -0,0 +1,59 @@
+import * as React from "react";
+const SlotPropsAsObj = {
+  dsComboboxRoot: { "aria-label": "just a typescript test" },
+  dsComboboxInputWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxInput: { "aria-label": "just a typescript test" },
+  dsComboboxDropdownButton: { "aria-label": "just a typescript test" },
+  dsComboboxFastList: { "aria-label": "just a typescript test" },
+  dsComboboxSectionWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxSectionLabel: { "aria-label": "just a typescript test" },
+  dsComboboxSingleMenuItem: { "aria-label": "just a typescript test" },
+  dsComboboxMultiMenuItem: { "aria-label": "just a typescript test" },
+  dsComboboxLoadingIndicator: { "aria-label": "just a typescript test" },
+  dsComboboxSkeletonMenuItem: { "aria-label": "just a typescript test" },
+  dsComboboxPill: { "aria-label": "just a typescript test" },
+  dsComboboxPillGroup: { "aria-label": "just a typescript test" },
+  dsComboboxPopperWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxSelection: { "aria-label": "just a typescript test" },
+  dsComboboxSingleValueWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxHeaderActions: { "aria-label": "just a typescript test" },
+  dsComboboxHeaderActionsSeparator: { "aria-label": "just a typescript test" },
+  dsComboboxInputPlaceholder: { "aria-label": "just a typescript test" },
+  dsComboboxInputFieldWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxListWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxNoResults: { "aria-label": "just a typescript test" },
+  dsComboboxCreatableLabel: { "aria-label": "just a typescript test" },
+  dsComboboxCreatableValue: { "aria-label": "just a typescript test" },
+  dsComboboxMenuItemsWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxLoadingWrapper: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsComboboxRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInputWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInput: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxDropdownButton: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxFastList: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSectionWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSectionLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSingleMenuItem: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxMultiMenuItem: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxLoadingIndicator: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSkeletonMenuItem: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxPill: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxPillGroup: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxPopperWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSelection: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSingleValueWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxHeaderActions: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxHeaderActionsSeparator: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInputPlaceholder: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInputFieldWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxListWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxNoResults: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxCreatableLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxCreatableValue: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxMenuItemsWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxLoadingWrapper: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/typescript-testing/slot-props.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\n\n// Object form \u2014 static slot props (validates slot keys exist on Props)\nconst SlotPropsAsObj: Partial<DSComboboxT.Props> = {\n  dsComboboxRoot: { 'aria-label': 'just a typescript test' },\n  dsComboboxInputWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxInput: { 'aria-label': 'just a typescript test' },\n  dsComboboxDropdownButton: { 'aria-label': 'just a typescript test' },\n  dsComboboxFastList: { 'aria-label': 'just a typescript test' },\n  dsComboboxSectionWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxSectionLabel: { 'aria-label': 'just a typescript test' },\n  dsComboboxSingleMenuItem: { 'aria-label': 'just a typescript test' },\n  dsComboboxMultiMenuItem: { 'aria-label': 'just a typescript test' },\n  dsComboboxLoadingIndicator: { 'aria-label': 'just a typescript test' },\n  dsComboboxSkeletonMenuItem: { 'aria-label': 'just a typescript test' },\n  dsComboboxPill: { 'aria-label': 'just a typescript test' },\n  dsComboboxPillGroup: { 'aria-label': 'just a typescript test' },\n  dsComboboxPopperWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxSelection: { 'aria-label': 'just a typescript test' },\n  dsComboboxSingleValueWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxHeaderActions: { 'aria-label': 'just a typescript test' },\n  dsComboboxHeaderActionsSeparator: { 'aria-label': 'just a typescript test' },\n  dsComboboxInputPlaceholder: { 'aria-label': 'just a typescript test' },\n  dsComboboxInputFieldWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxListWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxNoResults: { 'aria-label': 'just a typescript test' },\n  dsComboboxCreatableLabel: { 'aria-label': 'just a typescript test' },\n  dsComboboxCreatableValue: { 'aria-label': 'just a typescript test' },\n  dsComboboxMenuItemsWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxLoadingWrapper: { 'aria-label': 'just a typescript test' },\n};\n\n// Function form \u2014 dynamic slot props (validates SlotFunctionArguments is complete)\nconst SlotPropsAsFunctions: DSComboboxT.SlotFunctionArguments = {\n  dsComboboxRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInputWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInput: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxDropdownButton: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxFastList: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSectionWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSectionLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSingleMenuItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxMultiMenuItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxLoadingIndicator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSkeletonMenuItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxPill: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxPillGroup: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxPopperWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSelection: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSingleValueWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxHeaderActions: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxHeaderActionsSeparator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInputPlaceholder: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInputFieldWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxListWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxNoResults: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxCreatableLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxCreatableValue: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxMenuItemsWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxLoadingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if any slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "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",
+  "names": []
+}