@elliemae/ds-form-combobox 3.53.1-rc.0 → 3.54.0-beta.2

package/dist/cjs/parts/menu-list/MenuList.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_ds_fast_list = require("@elliemae/ds-fast-list");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styled = require("./styled.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
@@ -44,12 +45,18 @@ var import_useItemRenderer = require("./useItemRenderer.js");
 var import_LoadingContainer = require("./LoadingContainer.js");
 var import_SkeletonContainer = require("./SkeletonContainer.js");
 var import_useOnElementResize = require("../../utils/useOnElementResize.js");
+var import_constants = require("../../constants/index.js");
+const StyledFastList = (0, import_ds_system.styled)(import_ds_fast_list.DSFastList, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.FAST_LIST
+})``;
 const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
 `;
 const estimatedSize = () => 32;
 const MenuList = () => {
   const {
+    props,
     props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
     controlsWrapperRef,
     listRef,
@@ -57,16 +64,17 @@ const MenuList = () => {
     correctOptions: filteredOptions,
     instanceUid
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
+  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
   const menuListRender = (0, import_react.useMemo)(() => {
-    if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid });
-    if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, {});
+    if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
+    if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
     if (filteredOptions && filteredOptions.length > 0 || onCreate) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_fast_list.DSFastList,
+        StyledFastList,
         {
           dsFastlistWrapperList: { role: "listbox", "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST, "aria-label": "listbox" },
           dsFastlistItem: { role: "none" },
@@ -75,7 +83,8 @@ const MenuList = () => {
           ItemRenderer: import_useItemRenderer.ItemRenderer,
           extraItemProps: { itemList: filteredOptions },
           getId: (index) => filteredOptions[index].dsId,
-          estimateSize: estimatedSize
+          estimateSize: estimatedSize,
+          getOwnerProps
         }
       ) });
     }
@@ -88,7 +97,17 @@ const MenuList = () => {
         children: noOptionsMessage
       }
     );
-  }, [isSkeleton, instanceUid, isLoading, filteredOptions, onCreate, noOptionsMessage, menuMaxHeight, listRef]);
+  }, [
+    isSkeleton,
+    instanceUid,
+    isLoading,
+    filteredOptions,
+    onCreate,
+    noOptionsMessage,
+    menuMaxHeight,
+    listRef,
+    getOwnerProps
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledListWrapper,
     {

package/dist/cjs/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nconst StyledItemsWrapper = styled(Grid)<{ maxHeight: SizingProps['maxHeight'] }>`\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n      return (\n        <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n          <DSFastList\n            dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n            dsFastlistItem={{ role: 'none' }}\n            actionRef={listRef}\n            count={filteredOptions.length}\n            ItemRenderer={ItemRenderer}\n            extraItemProps={{ itemList: filteredOptions }}\n            getId={(index: number) => filteredOptions[index].dsId}\n            estimateSize={estimatedSize}\n          />\n        </StyledItemsWrapper>\n      );\n    }\n\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }, [isSkeleton, instanceUid, isLoading, filteredOptions, onCreate, noOptionsMessage, menuMaxHeight, listRef]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCI;AAnC3B,mBAAwD;AACxD,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAEnC,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBACtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAI9B,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,8CAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB,cAAc;AAAA,UACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA;AAAA,MAChB,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG,CAAC,YAAY,aAAa,WAAW,iBAAiB,UAAU,kBAAkB,eAAe,OAAO,CAAC;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { getOwnerProps } = useOwnerProps(props);\n\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n\n    if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n    if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n      return (\n        <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n          <StyledFastList\n            dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n            dsFastlistItem={{ role: 'none' }}\n            actionRef={listRef}\n            count={filteredOptions.length}\n            ItemRenderer={ItemRenderer}\n            extraItemProps={{ itemList: filteredOptions }}\n            getId={(index: number) => filteredOptions[index].dsId}\n            estimateSize={estimatedSize}\n            getOwnerProps={getOwnerProps}\n          />\n        </StyledItemsWrapper>\n      );\n    }\n\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }, [\n    isSkeleton,\n    instanceUid,\n    isLoading,\n    filteredOptions,\n    onCreate,\n    noOptionsMessage,\n    menuMaxHeight,\n    listRef,\n    getOwnerProps,\n  ]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CI;AA9C3B,mBAAwD;AACxD,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,8BAA8B;AAC9B,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AACnC,uBAAwD;AAExD,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAI7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,8CAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB,cAAc;AAAA,UACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA,UACd;AAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/menu-list/SkeletonContainer.js

@@ -35,8 +35,18 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
 var import_ds_grid = require("@elliemae/ds-grid");
-const SkeletonContainer = ({ instanceUid }) => {
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+const StyledSkeletonMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SkeletonMenuItem, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
+const SkeletonContainer = ({
+  instanceUid,
+  getOwnerProps
+}) => {
   const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.SkeletonMenuItem, { dsId: index.toString(), role: "presentation" }, n)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n)) });
 };
 //# sourceMappingURL=SkeletonContainer.js.map

package/dist/cjs/parts/menu-list/SkeletonContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/SkeletonContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const SkeletonContainer = ({ instanceUid }: { instanceUid: string }): JSX.Element => {\n  const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n  return (\n    <Grid id={`combo-listbox-${instanceUid}`}>\n      {SKELETON_AMOUNT.map((n, index) => (\n        <SkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" />\n      ))}\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUf;AATR,2BAAiC;AACjC,qBAAqB;AAEd,MAAM,oBAAoB,CAAC,EAAE,YAAY,MAA4C;AAC1F,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,4CAAC,uBAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,4CAAC,yCAAyB,MAAM,MAAM,SAAS,GAAG,MAAK,kBAAhC,CAA+C,CACvE,GACH;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n  instanceUid,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  getOwnerProps: () => object;\n}): JSX.Element => {\n  const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n  return (\n    <Grid id={`combo-listbox-${instanceUid}`}>\n      {SKELETON_AMOUNT.map((n, index) => (\n        <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n      ))}\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBf;AAxBR,2BAAiC;AACjC,qBAAqB;AACrB,uBAAuB;AAEvB,uBAAwD;AAExD,MAAM,6BAAyB,yBAAO,uCAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGmB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,4CAAC,uBAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,4CAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/menu-list/useItemRenderer.js

@@ -36,14 +36,23 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_Section = require("../Section.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
 var import_styled = require("./styled.js");
 var import_listHelper = require("../../utils/listHelper.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_constants = require("../../constants.js");
+var import_constants2 = require("../../constants/index.js");
+const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SingleMenuItem, {
+  name: import_constants2.DSFormComboboxName,
+  slot: import_constants2.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
 const ItemRenderer = ({ index, extraItemProps }) => {
   const {
+    props,
     props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
     setMenuState,
     inputValue,
@@ -51,9 +60,16 @@ const ItemRenderer = ({ index, extraItemProps }) => {
     setInputValue,
     optionsPerSection
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
-  const option = extraItemProps?.itemList[index];
+  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(
+    () => ({
+      index
+    }),
+    [index]
+  );
+  const option = extraItemProps?.itemList?.[index];
   const multiple = Array.isArray(selectedValues);
-  const CBItem = multiple ? import_ds_menu_items.MultiMenuItem : import_ds_menu_items.SingleMenuItem;
+  const CBItem = multiple ? import_ds_menu_items.MultiMenuItem : StyledSingleMenuItem;
   const handleOnCreateClick = (0, import_react.useCallback)(() => {
     if (inputValue && onCreate) {
       onCreate(inputValue);
@@ -102,7 +118,9 @@ const ItemRenderer = ({ index, extraItemProps }) => {
             handleClick,
             focusOptionIdx,
             handleOnMouseDown,
-            selectedValues
+            selectedValues,
+            getOwnerProps,
+            getOwnerPropsArguments
           }
         );
       }
@@ -128,15 +146,19 @@ const ItemRenderer = ({ index, extraItemProps }) => {
               onMouseDown: handleOnMouseDown,
               isActive: dsId === focusOptionIdx,
               isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
-              tabIndex: -1
+              tabIndex: -1,
+              getOwnerProps,
+              getOwnerPropsArguments
             }
           )
         );
       }
       if (type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_menu_items.SingleMenuItem,
+          StyledSingleMenuItem,
           {
+            getOwnerProps,
+            getOwnerPropsArguments,
             dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
             isActive: dsId === focusOptionIdx,
             ...generalProps,

package/dist/cjs/parts/menu-list/useItemRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 { 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';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\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 option = extraItemProps?.itemList[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\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          />\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            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <SingleMenuItem\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          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFb;AA/EV,mBAAwD;AACxD,qBAAqB;AACrB,2BAAyD;AACzD,qBAAwB;AACxB,yBAAgC;AAChC,oBAA2D;AAC3D,wBAAsD;AACtD,iCAAmC;AAEnC,uBAA8D;AASvD,MAAM,eAAe,CAAC,EAAE,OAAO,eAAe,MAAkC;AACrF,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,UAAU,gBAAgB,gBAAgB,UAAU,YAAY,SAAS;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,SAAS,gBAAgB,SAAS,KAAK;AAE7C,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,SAAS,WAAW,qCAAgB;AAE1C,QAAM,0BAAsB,0BAAY,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,kBAAc;AAAA,IAClB,CAAC,eAAuC,MAAwB;AAC9D,UAAI,SAAU;AACd,UAAI,cAAc,SAAS,mCAAkB,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,uBAAS,6CAA0B,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,wBAAoB,0BAAY,CAAC,MAAuC;AAC5E,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAGL,aAAO,sBAAQ,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,mCAAkB,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;AAAA,QACF;AAAA,MAEJ;AACA,UAAI,SAAS,mCAAkB,WAAW;AACxC,eAAO,4CAAC,kCAAW,GAAG,cAAc,QAAQ,QAAW;AAAA,MACzD;AACA,UAAI,OAAO,SAAS,mCAAkB,QAAQ;AAC5C;AAAA;AAAA,UAEE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,YAAY,8CAAmB;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,gBAAY,8BAAW,gBAAgB,MAAM;AAAA,cAC7C,UAAU;AAAA;AAAA,UACZ;AAAA;AAAA,MAEJ;AACA,UAAI,SAAS,4CAA2B,WAAW;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,8CAAmB;AAAA,YAC/B,UAAU,SAAS;AAAA,YAClB,GAAG;AAAA,YACJ,QAAQ,CAAC,EAAE,OAAO,eAAe,MAC/B,6CAAC,uBAAK,GAAE,OAAM,MAAM,CAAC,eAAe,MAAM,GAAG,QAAO,OAAM,YAAW,UACnE;AAAA,0DAAC,sCAAqB,kBAAI;AAAA,cAC1B,4CAAC,sCAAsB,cAAI,cAAc,KAAI;AAAA,eAC/C;AAAA,YAEF,OAAO,OAAO;AAAA,YACd,SAAS;AAAA;AAAA,QACX;AAAA,MAEJ;AACA,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,gBAAgB,YAAY,UAAU,YAAY,QAAQ,CAAC;AACpG;",
-  "names": []
+  "sourcesContent": ["/* 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\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 ? MultiMenuItem : 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            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\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          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["import_constants"]
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSFormComboboxName = "DSCombobox";
+const FORM_COMBOBOX_SLOTS = {
+  // Same as old container
+  ROOT: "root",
+  INPUT_WRAPPER: "input-wrapper",
+  INPUT: "input",
+  DROPDOWN_BUTTON: "dropdown-button",
+  FAST_LIST: "fast-list",
+  SECTION_WRAPPER: "section-wrapper",
+  SECTION_LABEL: "section-label",
+  SINGLE_MENU_ITEM: "single-menu-item",
+  LOADING_INDICATOR: "loading-indicator",
+  SKELETON_MENU_ITEM: "skeleton-menu-item"
+};
+const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);
+export {
+  DSFormComboboxName,
+  FORM_COMBOBOX_DATA_TESTID,
+  FORM_COMBOBOX_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n  // Same as old container\n  ROOT: 'root',\n  INPUT_WRAPPER: 'input-wrapper',\n  INPUT: 'input',\n  DROPDOWN_BUTTON: 'dropdown-button',\n  FAST_LIST: 'fast-list',\n  SECTION_WRAPPER: 'section-wrapper',\n  SECTION_LABEL: 'section-label',\n  SINGLE_MENU_ITEM: 'single-menu-item',\n  LOADING_INDICATOR: 'loading-indicator',\n  SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B,wBAAwB,oBAAoB,mBAAmB;",
+  "names": []
+}

package/dist/esm/package.json

@@ -3,5 +3,8 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/dist/esm/parts/DropdownIndicator.js

@@ -4,9 +4,14 @@ import { useCallback, useContext } from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import ComboBoxContext from "../ComboBoxCTX.js";
 import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
-const StyledDropDownButton = styled(DSButtonV2)`
+import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../constants/index.js";
+const StyledDropDownButton = styled(DSButtonV2, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON
+})`
   &:focus::after {
     border: none;
   }
@@ -22,16 +27,20 @@ const StyledDropDownButton = styled(DSButtonV2)`
 `;
 const DropdownIndicator = () => {
   const {
+    props,
     props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
     menuState,
     instanceUid
   } = useContext(ComboBoxContext);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
   const handleOnClick = useCallback((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsx(
     StyledDropDownButton,
     {
+      getOwnerProps,
+      getOwnerPropsArguments,
       onClick: handleOnClick,
       "data-testid": ComboboxDataTestid.DROPDOWN,
       "aria-controls": `combo-listbox-${instanceUid}`,

package/dist/esm/parts/DropdownIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)<{ applyAriaDisabled: boolean }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n      disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqDjB;AAnDN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n      disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+DjB;AA7DN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,uBAAuB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Section.js

@@ -7,13 +7,14 @@ import { SingleMenuItem, MultiMenuItem, Separator } from "@elliemae/ds-menu-item
 import { MENU_OPTION_TYPES } from "../constants.js";
 import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
 import { isSelected } from "../utils/listHelper.js";
-const StyledSectionWrapper = styled("section")`
+import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../constants/index.js";
+const StyledSectionWrapper = styled("section", { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`
   list-style: none;
   min-height: 24px;
   display: grid;
   align-items: center;
 `;
-const StyledSectionLabel = styled("header")`
+const StyledSectionLabel = styled("header", { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
   display: flex;
   align-items: center;
   padding: 0px 16px;
@@ -21,40 +22,87 @@ const StyledSectionLabel = styled("header")`
   font-size: 1rem;
   color: neutral-500;
 `;
+const StyledSingleMenuItem = styled(SingleMenuItem, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM
+})``;
 const Section = React2.memo((props) => {
-  const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } = props;
+  const {
+    label,
+    wrapperStyles,
+    focusOptionIdx,
+    selectedValues,
+    innerRef,
+    handleOnMouseDown,
+    options,
+    handleClick,
+    getOwnerProps,
+    getOwnerPropsArguments
+  } = props;
   const id = `${label.replace(/ /g, "")}-section`;
-  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : SingleMenuItem;
-  return /* @__PURE__ */ jsxs(StyledSectionWrapper, { role: "group", "aria-labelledby": id, style: wrapperStyles, innerRef, children: [
-    /* @__PURE__ */ jsx(StyledSectionLabel, { id, role: "presentation", children: label }),
-    options?.map((option) => {
-      const { dsId, type, value, label: optionLabel, readOnly, disabled, applyAriaDisabled, ...rest } = option;
-      if (type === MENU_OPTION_TYPES.SEPARATOR) {
-        return /* @__PURE__ */ jsx(Separator, {}, dsId);
-      }
-      return /* @__PURE__ */ createElement(
-        CBItem,
-        {
-          value,
-          label: optionLabel,
-          dataTestid: ComboboxDataTestid.OPTION,
-          disabled,
-          applyAriaDisabled: applyAriaDisabled || readOnly,
-          onClick: (e) => {
-            if (applyAriaDisabled) return;
-            handleClick(option, e);
-          },
-          onMouseDown: handleOnMouseDown,
-          isActive: dsId === focusOptionIdx,
-          isSelected: isSelected(selectedValues, option),
-          tabIndex: -1,
-          ...rest,
-          key: option.dsId,
-          dsId: option.dsId
-        }
-      );
-    })
-  ] });
+  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : StyledSingleMenuItem;
+  return /* @__PURE__ */ jsxs(
+    StyledSectionWrapper,
+    {
+      role: "group",
+      "aria-labelledby": id,
+      style: wrapperStyles,
+      innerRef,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledSectionLabel,
+          {
+            id,
+            role: "presentation",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: label
+          }
+        ),
+        options?.map((option) => {
+          const {
+            dsId,
+            type,
+            value,
+            label: optionLabel,
+            readOnly,
+            disabled,
+            applyAriaDisabled,
+            render,
+            ...rest
+          } = option;
+          if (type === MENU_OPTION_TYPES.SEPARATOR) {
+            return /* @__PURE__ */ jsx(Separator, {}, dsId);
+          }
+          return /* @__PURE__ */ createElement(
+            CBItem,
+            {
+              getOwnerProps,
+              getOwnerPropsArguments,
+              value,
+              label: optionLabel,
+              dataTestid: ComboboxDataTestid.OPTION,
+              disabled,
+              applyAriaDisabled: applyAriaDisabled || readOnly,
+              onClick: (e) => {
+                if (applyAriaDisabled) return;
+                handleClick(option, e);
+              },
+              onMouseDown: handleOnMouseDown,
+              isActive: dsId === focusOptionIdx,
+              isSelected: isSelected(selectedValues, option),
+              tabIndex: -1,
+              ...rest,
+              key: option.dsId,
+              dsId: option.dsId
+            }
+          );
+        })
+      ]
+    }
+  );
 });
 export {
   Section

package/dist/esm/parts/Section.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Section.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n  handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n}\n\nconst StyledSectionWrapper = styled('section')`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header')`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } =\n    props;\n  const id = `${label.replace(/ /g, '')}-section`;\n\n  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : SingleMenuItem;\n\n  return (\n    <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n      <StyledSectionLabel id={id} role=\"presentation\">\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const { dsId, type, value, label: optionLabel, readOnly, disabled, applyAriaDisabled, ...rest } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4CnB,SACE,KADF;AAYM;AAxDV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,gBAAgB,eAAe,iBAAiB;AACzD,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAa3B,MAAM,uBAAuB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,qBAAqB,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnC,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,gBAAgB,UAAU,mBAAmB,SAAS,YAAY,IAC9G;AACF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AAErC,QAAM,SAAS,MAAM,QAAQ,cAAc,IAAI,gBAAgB;AAE/D,SACE,qBAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,wBAAC,sBAAmB,IAAQ,MAAK,gBAC9B,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WAAW;AACxB,YAAM,EAAE,MAAM,MAAM,OAAO,OAAO,aAAa,UAAU,UAAU,mBAAmB,GAAG,KAAK,IAAI;AAElG,UAAI,SAAS,kBAAkB,WAAW;AACxC,eAAO,oBAAC,eAAe,IAAM;AAAA,MAC/B;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,YAAY,mBAAmB;AAAA,UAC/B;AAAA,UACA,mBAAmB,qBAAqB;AAAA,UACxC,SAAS,CAAC,MAA0C;AAClD,gBAAI,kBAAmB;AACvB,wBAAY,QAAQ,CAAC;AAAA,UACvB;AAAA,UACA,aAAa;AAAA,UACb,UAAU,SAAS;AAAA,UACnB,YAAY,WAAW,gBAAgB,MAAM;AAAA,UAC7C,UAAU;AAAA,UACT,GAAG;AAAA,UACJ,KAAK,OAAO;AAAA,UACZ,MAAM,OAAO;AAAA;AAAA,MACf;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n  handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n})``;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8DnB,SAQE,KARF;AAkCM;AAhGV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,gBAAgB,eAAe,iBAAiB;AAEzD,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,2BAA2B;AAexD,MAAM,uBAAuB,OAAO,WAAW,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,qBAAqB,OAAO,UAAU,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjH,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAEM,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAS,MAAM,QAAQ,cAAc,IAAI,gBAAgB;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,kBAAkB,WAAW;AACxC,mBAAO,oBAAC,eAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,mBAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,WAAW,gBAAgB,MAAM;AAAA,cAC7C,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/container/Container.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useMemo, useEffect, useContext } from "react";
-import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from "@elliemae/ds-props-helpers";
 import { mergeRefs } from "@elliemae/ds-system";
 import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
 import ComboBoxContext from "../../ComboBoxCTX.js";
@@ -17,6 +17,7 @@ const Container = () => {
   const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
   const globalAttributes = useGetGlobalAttributes(props);
   const { zIndex, ...xStyledProps } = useGetXstyledProps(props);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
   const correctZIndex = zIndex ? parseInt(zIndex, 10) : void 0;
   const { className, "data-testid": dataTestId } = globalAttributes;
   const handleMouseDown = useCallback((e) => {
@@ -63,6 +64,8 @@ const Container = () => {
       className,
       applyAriaDisabled,
       ...xStyledProps,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsx(LiveRegion, {}),
         /* @__PURE__ */ jsx(Controls, {}),

package/dist/esm/parts/container/Container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={comboboxRef}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled}\n      {...xStyledProps}\n    >\n      <LiveRegion />\n      <Controls />\n\n      {menuState && inline ? <MenuList /> : null}\n      {menuState && !inline && referenceElement ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          floatingStyles={floatingStyles}\n          isOpen={menuState}\n          context={context}\n          {...props.popperProps}\n        >\n          <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyEnB,SAOE,KAPF;AAxEJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,YAAS;AAAA,QAET,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={comboboxRef}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled}\n      {...xStyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <LiveRegion />\n      <Controls />\n\n      {menuState && inline ? <MenuList /> : null}\n      {menuState && !inline && referenceElement ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          floatingStyles={floatingStyles}\n          isOpen={menuState}\n          context={context}\n          {...props.popperProps}\n        >\n          <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0EnB,SASE,KATF;AAzEJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,YAAS;AAAA,QAET,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": ["React"]
 }