@elliemae/ds-form-combobox 3.53.0-next.11 → 3.53.0-next.13

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 (45) hide show
  1. package/dist/cjs/constants/index.js +51 -0
  2. package/dist/cjs/constants/index.js.map +7 -0
  3. package/dist/cjs/parts/DropdownIndicator.js +10 -1
  4. package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
  5. package/dist/cjs/parts/Section.js +20 -2
  6. package/dist/cjs/parts/Section.js.map +3 -3
  7. package/dist/cjs/parts/container/Container.js +3 -0
  8. package/dist/cjs/parts/container/Container.js.map +2 -2
  9. package/dist/cjs/parts/controls/Controls.js +5 -0
  10. package/dist/cjs/parts/controls/Controls.js.map +2 -2
  11. package/dist/cjs/parts/controls-input/ControlsInput.js +4 -0
  12. package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
  13. package/dist/cjs/parts/menu-list/LoadingContainer.js +6 -1
  14. package/dist/cjs/parts/menu-list/LoadingContainer.js.map +2 -2
  15. package/dist/cjs/parts/menu-list/MenuList.js +24 -5
  16. package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
  17. package/dist/cjs/parts/menu-list/SkeletonContainer.js +12 -2
  18. package/dist/cjs/parts/menu-list/SkeletonContainer.js.map +2 -2
  19. package/dist/cjs/parts/menu-list/useItemRenderer.js +16 -4
  20. package/dist/cjs/parts/menu-list/useItemRenderer.js.map +3 -3
  21. package/dist/esm/constants/index.js +21 -0
  22. package/dist/esm/constants/index.js.map +7 -0
  23. package/dist/esm/parts/DropdownIndicator.js +10 -1
  24. package/dist/esm/parts/DropdownIndicator.js.map +2 -2
  25. package/dist/esm/parts/Section.js +20 -2
  26. package/dist/esm/parts/Section.js.map +2 -2
  27. package/dist/esm/parts/container/Container.js +4 -1
  28. package/dist/esm/parts/container/Container.js.map +2 -2
  29. package/dist/esm/parts/controls/Controls.js +5 -0
  30. package/dist/esm/parts/controls/Controls.js.map +2 -2
  31. package/dist/esm/parts/controls-input/ControlsInput.js +5 -1
  32. package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
  33. package/dist/esm/parts/menu-list/LoadingContainer.js +6 -1
  34. package/dist/esm/parts/menu-list/LoadingContainer.js.map +2 -2
  35. package/dist/esm/parts/menu-list/MenuList.js +24 -5
  36. package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
  37. package/dist/esm/parts/menu-list/SkeletonContainer.js +12 -2
  38. package/dist/esm/parts/menu-list/SkeletonContainer.js.map +2 -2
  39. package/dist/esm/parts/menu-list/useItemRenderer.js +16 -4
  40. package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
  41. package/dist/types/constants/index.d.ts +12 -0
  42. package/dist/types/parts/menu-list/LoadingContainer.d.ts +3 -1
  43. package/dist/types/parts/menu-list/SkeletonContainer.d.ts +2 -1
  44. package/dist/types/parts/menu-list/useItemRenderer.d.ts +1 -1
  45. package/package.json +15 -15
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmCI;AAnC3B,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB,OAAO,IAAI;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,IAAI,WAAW,eAAe;AAI9B,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,oBAAC,oBAAiB;AAExC,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,mBAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB;AAAA,UACA,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,mBAAmB;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;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC8CI;AA9C3B,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;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,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAI7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,oBAAC,oBAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,mBAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB;AAAA,UACA,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,mBAAmB;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;",
6
6
  "names": []
7
7
  }
@@ -2,9 +2,19 @@ import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { SkeletonMenuItem } from "@elliemae/ds-menu-items";
4
4
  import { Grid } from "@elliemae/ds-grid";
5
- const SkeletonContainer = ({ instanceUid }) => {
5
+ import { styled } from "@elliemae/ds-system";
6
+ import { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from "../../constants/index.js";
7
+ const StyledSkeletonMenuItem = styled(SkeletonMenuItem, {
8
+ name: DSFormComboboxName,
9
+ slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,
10
+ preserveLegacyDataTestId: true
11
+ })``;
12
+ const SkeletonContainer = ({
13
+ instanceUid,
14
+ getOwnerProps
15
+ }) => {
6
16
  const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
7
- return /* @__PURE__ */ jsx(Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(SkeletonMenuItem, { dsId: index.toString(), role: "presentation" }, n)) });
17
+ return /* @__PURE__ */ jsx(Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n)) });
8
18
  };
9
19
  export {
10
20
  SkeletonContainer
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/SkeletonContainer.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACUf;AATR,SAAS,wBAAwB;AACjC,SAAS,YAAY;AAEd,MAAM,oBAAoB,CAAC,EAAE,YAAY,MAA4C;AAC1F,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,oBAAC,QAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,oBAAC,oBAAyB,MAAM,MAAM,SAAS,GAAG,MAAK,kBAAhC,CAA+C,CACvE,GACH;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACyBf;AAxBR,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,SAAS,qBAAqB,0BAA0B;AAExD,MAAM,yBAAyB,OAAO,kBAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,oBAAoB;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,oBAAC,QAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,oBAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G,GACH;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -3,14 +3,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useMemo, useContext, useCallback } from "react";
4
4
  import { Grid } from "@elliemae/ds-grid";
5
5
  import { SingleMenuItem, MultiMenuItem, Separator } from "@elliemae/ds-menu-items";
6
+ import { styled } from "@elliemae/ds-system";
7
+ import { useOwnerProps } from "@elliemae/ds-props-helpers";
6
8
  import { Section } from "../Section.js";
7
9
  import { ComboBoxContext } from "../../ComboBoxCTX.js";
8
10
  import { StyledCreatableLabel, StyledCreatableValue } from "./styled.js";
9
11
  import { isSelected, getSuggestedValueOnChange } from "../../utils/listHelper.js";
10
12
  import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
11
13
  import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from "../../constants.js";
14
+ import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
15
+ const StyledSingleMenuItem = styled(SingleMenuItem, {
16
+ name: DSFormComboboxName,
17
+ slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
18
+ preserveLegacyDataTestId: true
19
+ })``;
12
20
  const ItemRenderer = ({ index, extraItemProps }) => {
13
21
  const {
22
+ props,
14
23
  props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
15
24
  setMenuState,
16
25
  inputValue,
@@ -18,9 +27,10 @@ const ItemRenderer = ({ index, extraItemProps }) => {
18
27
  setInputValue,
19
28
  optionsPerSection
20
29
  } = useContext(ComboBoxContext);
21
- const option = extraItemProps?.itemList[index];
30
+ const { getOwnerProps } = useOwnerProps(props);
31
+ const option = extraItemProps?.itemList?.[index];
22
32
  const multiple = Array.isArray(selectedValues);
23
- const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
33
+ const CBItem = multiple ? MultiMenuItem : StyledSingleMenuItem;
24
34
  const handleOnCreateClick = useCallback(() => {
25
35
  if (inputValue && onCreate) {
26
36
  onCreate(inputValue);
@@ -95,15 +105,17 @@ const ItemRenderer = ({ index, extraItemProps }) => {
95
105
  onMouseDown: handleOnMouseDown,
96
106
  isActive: dsId === focusOptionIdx,
97
107
  isSelected: isSelected(selectedValues, option),
98
- tabIndex: -1
108
+ tabIndex: -1,
109
+ getOwnerProps
99
110
  }
100
111
  )
101
112
  );
102
113
  }
103
114
  if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
104
115
  return /* @__PURE__ */ jsx(
105
- SingleMenuItem,
116
+ StyledSingleMenuItem,
106
117
  {
118
+ getOwnerProps,
107
119
  dataTestid: ComboboxDataTestid.OPTION,
108
120
  isActive: dsId === focusOptionIdx,
109
121
  ...generalProps,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
4
- "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 { 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"],
5
- "mappings": "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",
4
+ "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\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\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 />\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 />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <StyledSingleMenuItem\n getOwnerProps={getOwnerProps}\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,12 @@
1
+ export declare const DSFormComboboxName = "DSCombobox";
2
+ export declare const FORM_COMBOBOX_SLOTS: {
3
+ readonly ROOT: "root";
4
+ readonly INPUT_WRAPPER: "input-wrapper";
5
+ readonly INPUT: "input";
6
+ readonly DROPDOWN_BUTTON: "dropdown-button";
7
+ readonly FAST_LIST: "fast-list";
8
+ readonly SINGLE_MENU_ITEM: "single-menu-item";
9
+ readonly LOADING_INDICATOR: "loading-indicator";
10
+ readonly SKELETON_MENU_ITEM: "skeleton-menu-item";
11
+ };
12
+ export declare const FORM_COMBOBOX_DATA_TESTID: Record<string, string>;
@@ -1,3 +1,5 @@
1
- declare const LoadingContainer: () => import("react/jsx-runtime").JSX.Element;
1
+ declare const LoadingContainer: ({ getOwnerProps }: {
2
+ getOwnerProps: () => object;
3
+ }) => import("react/jsx-runtime.js").JSX.Element;
2
4
  export { LoadingContainer };
3
5
  export default LoadingContainer;
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
- export declare const SkeletonContainer: ({ instanceUid }: {
2
+ export declare const SkeletonContainer: ({ instanceUid, getOwnerProps, }: {
3
3
  instanceUid: string;
4
+ getOwnerProps: () => object;
4
5
  }) => JSX.Element;
@@ -2,7 +2,7 @@
2
2
  import type { DSComboboxT } from '../../react-desc-prop-types.js';
3
3
  interface ItemRendererT {
4
4
  extraItemProps?: {
5
- itemList: DSComboboxT.OptionTypes[];
5
+ itemList?: DSComboboxT.OptionTypes[];
6
6
  };
7
7
  index: number;
8
8
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-combobox",
3
- "version": "3.53.0-next.11",
3
+ "version": "3.53.0-next.13",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -38,18 +38,18 @@
38
38
  "dependencies": {
39
39
  "react-virtual": "~2.10.4",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-button-v2": "3.53.0-next.11",
42
- "@elliemae/ds-fast-list": "3.53.0-next.11",
43
- "@elliemae/ds-floating-context": "3.53.0-next.11",
44
- "@elliemae/ds-circular-progress-indicator": "3.53.0-next.11",
45
- "@elliemae/ds-form-checkbox": "3.53.0-next.11",
46
- "@elliemae/ds-grid": "3.53.0-next.11",
47
- "@elliemae/ds-icons": "3.53.0-next.11",
48
- "@elliemae/ds-menu-items": "3.53.0-next.11",
49
- "@elliemae/ds-props-helpers": "3.53.0-next.11",
50
- "@elliemae/ds-pills-v2": "3.53.0-next.11",
51
- "@elliemae/ds-system": "3.53.0-next.11",
52
- "@elliemae/ds-truncated-tooltip-text": "3.53.0-next.11"
41
+ "@elliemae/ds-button-v2": "3.53.0-next.13",
42
+ "@elliemae/ds-circular-progress-indicator": "3.53.0-next.13",
43
+ "@elliemae/ds-form-checkbox": "3.53.0-next.13",
44
+ "@elliemae/ds-fast-list": "3.53.0-next.13",
45
+ "@elliemae/ds-floating-context": "3.53.0-next.13",
46
+ "@elliemae/ds-menu-items": "3.53.0-next.13",
47
+ "@elliemae/ds-pills-v2": "3.53.0-next.13",
48
+ "@elliemae/ds-icons": "3.53.0-next.13",
49
+ "@elliemae/ds-grid": "3.53.0-next.13",
50
+ "@elliemae/ds-system": "3.53.0-next.13",
51
+ "@elliemae/ds-props-helpers": "3.53.0-next.13",
52
+ "@elliemae/ds-truncated-tooltip-text": "3.53.0-next.13"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@elliemae/pui-cli": "9.0.0-next.63",
@@ -57,8 +57,8 @@
57
57
  "jest": "~29.7.0",
58
58
  "styled-components": "~5.3.9",
59
59
  "styled-system": "^5.1.5",
60
- "@elliemae/ds-monorepo-devops": "3.53.0-next.11",
61
- "@elliemae/ds-form-helpers-mask-hooks": "3.53.0-next.11"
60
+ "@elliemae/ds-form-helpers-mask-hooks": "3.53.0-next.13",
61
+ "@elliemae/ds-monorepo-devops": "3.53.0-next.13"
62
62
  },
63
63
  "peerDependencies": {
64
64
  "@elliemae/pui-theme": "~2.13.0",