@elliemae/ds-form-combobox 3.49.0-rc.0 → 3.49.0-rc.2

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 (57) hide show
  1. package/dist/cjs/ComboBoxCTX.js +0 -4
  2. package/dist/cjs/ComboBoxCTX.js.map +2 -2
  3. package/dist/cjs/config/useComboBox.js +19 -36
  4. package/dist/cjs/config/useComboBox.js.map +2 -2
  5. package/dist/cjs/config/useCorrectOptions.js +3 -6
  6. package/dist/cjs/config/useCorrectOptions.js.map +2 -2
  7. package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +10 -14
  8. package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
  9. package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -5
  10. package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
  11. package/dist/cjs/parts/menu-list/MenuList.js +20 -35
  12. package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
  13. package/dist/cjs/parts/menu-list/styled.js.map +2 -2
  14. package/dist/cjs/sharedTypes.js.map +2 -2
  15. package/dist/cjs/utils/listHelper.js +7 -23
  16. package/dist/cjs/utils/listHelper.js.map +2 -2
  17. package/dist/esm/ComboBoxCTX.js +0 -4
  18. package/dist/esm/ComboBoxCTX.js.map +2 -2
  19. package/dist/esm/config/useComboBox.js +20 -37
  20. package/dist/esm/config/useComboBox.js.map +2 -2
  21. package/dist/esm/config/useCorrectOptions.js +4 -7
  22. package/dist/esm/config/useCorrectOptions.js.map +2 -2
  23. package/dist/esm/parts/controls-input/useKeyboardNavigation.js +10 -14
  24. package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
  25. package/dist/esm/parts/controls-input/useMaskedOnChange.js +4 -5
  26. package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
  27. package/dist/esm/parts/menu-list/MenuList.js +21 -36
  28. package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
  29. package/dist/esm/parts/menu-list/styled.js.map +2 -2
  30. package/dist/esm/sharedTypes.js.map +2 -2
  31. package/dist/esm/utils/listHelper.js +7 -23
  32. package/dist/esm/utils/listHelper.js.map +2 -2
  33. package/dist/types/config/useCorrectOptions.d.ts +1 -1
  34. package/dist/types/parts/menu-list/styled.d.ts +0 -1
  35. package/dist/types/sharedTypes.d.ts +0 -4
  36. package/dist/types/utils/listHelper.d.ts +0 -1
  37. package/package.json +14 -14
  38. package/dist/cjs/parts/header-list/HeaderList.js +0 -104
  39. package/dist/cjs/parts/header-list/HeaderList.js.map +0 -7
  40. package/dist/cjs/parts/header-list/index.js +0 -36
  41. package/dist/cjs/parts/header-list/index.js.map +0 -7
  42. package/dist/cjs/parts/header-list/styled.js +0 -85
  43. package/dist/cjs/parts/header-list/styled.js.map +0 -7
  44. package/dist/cjs/parts/header-list/useHeaderListHandlers.js +0 -140
  45. package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +0 -7
  46. package/dist/esm/parts/header-list/HeaderList.js +0 -80
  47. package/dist/esm/parts/header-list/HeaderList.js.map +0 -7
  48. package/dist/esm/parts/header-list/index.js +0 -6
  49. package/dist/esm/parts/header-list/index.js.map +0 -7
  50. package/dist/esm/parts/header-list/styled.js +0 -55
  51. package/dist/esm/parts/header-list/styled.js.map +0 -7
  52. package/dist/esm/parts/header-list/useHeaderListHandlers.js +0 -110
  53. package/dist/esm/parts/header-list/useHeaderListHandlers.js.map +0 -7
  54. package/dist/types/parts/header-list/HeaderList.d.ts +0 -1
  55. package/dist/types/parts/header-list/index.d.ts +0 -1
  56. package/dist/types/parts/header-list/styled.d.ts +0 -6
  57. package/dist/types/parts/header-list/useHeaderListHandlers.d.ts +0 -11
@@ -1,27 +1,23 @@
1
1
  import * as React from "react";
2
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { jsx } from "react/jsx-runtime";
3
3
  import { useContext, useMemo, useCallback, useLayoutEffect } from "react";
4
4
  import { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from "./styled.js";
5
5
  import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
6
6
  import { ComboBoxContext } from "../../ComboBoxCTX.js";
7
- import { HeaderList } from "../header-list/index.js";
8
7
  import { useItemRenderer } from "./useItemRenderer.js";
9
8
  import { LoadingContainer } from "./LoadingContainer.js";
10
9
  import { SkeletonContainer } from "./SkeletonContainer.js";
11
10
  import { useOnElementResize } from "../../utils/useOnElementResize.js";
12
11
  const MenuList = () => {
13
12
  const {
14
- props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },
13
+ props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
15
14
  controlsWrapperRef,
16
15
  listRef,
17
- inputValue,
18
16
  wrapperListRef,
19
17
  virtualListHelpers,
20
18
  correctOptions: filteredOptions,
21
19
  instanceUid
22
20
  } = useContext(ComboBoxContext);
23
- const multiple = Array.isArray(selectedValues);
24
- const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;
25
21
  const ItemRenderer = useItemRenderer();
26
22
  const { width } = useOnElementResize(controlsWrapperRef);
27
23
  const preventLoseInputFocus = useCallback((e) => {
@@ -30,43 +26,32 @@ const MenuList = () => {
30
26
  const menuListRender = useMemo(() => {
31
27
  if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid });
32
28
  if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, {});
33
- return /* @__PURE__ */ jsxs(Fragment, { children: [
34
- withHeader && /* @__PURE__ */ jsx(HeaderList, {}),
35
- filteredOptions && filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ jsx(
36
- StyledVirtualListWrapper,
37
- {
38
- tabIndex: -1,
39
- inline,
40
- maxHeight: menuMaxHeight,
41
- innerRef: listRef,
42
- withHeader,
43
- children: /* @__PURE__ */ jsx(
44
- StyledList,
45
- {
46
- "aria-label": "listbox",
47
- id: `combo-listbox-${instanceUid}`,
48
- role: "listbox",
49
- "data-testid": ComboboxDataTestid.LIST,
50
- style: { height: virtualListHelpers?.totalSize, margin: inline ? "0px" : "8px 0px" },
51
- children: ItemRenderer
52
- }
53
- )
54
- }
55
- ) : /* @__PURE__ */ jsx(
56
- StyledNoResultsWrapper,
29
+ if (filteredOptions && filteredOptions.length > 0 || onCreate) {
30
+ return /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, inline, maxHeight: menuMaxHeight, innerRef: listRef, children: /* @__PURE__ */ jsx(
31
+ StyledList,
57
32
  {
33
+ "aria-label": "listbox",
58
34
  id: `combo-listbox-${instanceUid}`,
59
- "data-testid": ComboboxDataTestid.NO_MATCHES_FOUND,
60
- role: "alert",
61
- children: noOptionsMessage
35
+ role: "listbox",
36
+ "data-testid": ComboboxDataTestid.LIST,
37
+ style: { height: virtualListHelpers?.totalSize, margin: inline ? "0px" : "8px 0px" },
38
+ children: ItemRenderer
62
39
  }
63
- )
64
- ] });
40
+ ) });
41
+ }
42
+ return /* @__PURE__ */ jsx(
43
+ StyledNoResultsWrapper,
44
+ {
45
+ id: `combo-listbox-${instanceUid}`,
46
+ "data-testid": ComboboxDataTestid.NO_MATCHES_FOUND,
47
+ role: "alert",
48
+ children: noOptionsMessage
49
+ }
50
+ );
65
51
  }, [
66
52
  instanceUid,
67
53
  isSkeleton,
68
54
  isLoading,
69
- withHeader,
70
55
  filteredOptions,
71
56
  onCreate,
72
57
  inline,
@@ -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, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\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 return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n tabIndex={-1}\n inline={inline}\n maxHeight={menuMaxHeight}\n innerRef={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n id={`combo-listbox-${instanceUid}`}\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\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 );\n }, [\n instanceUid,\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\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;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,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,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,iBAAiB,WAAW;AAAA,UAChC,eAAa,mBAAmB;AAAA,UAChC,MAAK;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,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, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n virtualListHelpers,\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 const ItemRenderer = useItemRenderer();\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 <StyledVirtualListWrapper tabIndex={-1} inline={inline} maxHeight={menuMaxHeight} innerRef={listRef}>\n <StyledList\n aria-label=\"listbox\"\n id={`combo-listbox-${instanceUid}`}\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\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 instanceUid,\n isSkeleton,\n isLoading,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\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;AC4BI;AA5B3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,eAAe,gBAAgB;AACrC,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,4BAAyB,UAAU,IAAI,QAAgB,WAAW,eAAe,UAAU,SAC1F;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,IAAI,iBAAiB,WAAW;AAAA,UAChC,MAAK;AAAA,UACL,eAAa,mBAAmB;AAAA,UAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,UAElF;AAAA;AAAA,MACH,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,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,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
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n minWidth: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n width: ${({ width }) => `${width}px`};\n background-color: #ffffff;\n max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n position: relative;\n padding: 0;\n background-color: #ffffff;\n overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n inline: boolean | undefined;\n maxHeight: SizingProps['maxHeight'];\n withHeader?: boolean;\n}>`\n overflow-y: auto;\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n font-weight: bold;\n font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n padding: 16px;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA,gBAEtB,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAAA;AAIpD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAG5E,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n minWidth: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n width: ${({ width }) => `${width}px`};\n background-color: #ffffff;\n max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n position: relative;\n padding: 0;\n background-color: #ffffff;\n overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n inline: boolean | undefined;\n maxHeight: SizingProps['maxHeight'];\n}>`\n overflow-y: auto;\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n font-weight: bold;\n font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n padding: 16px;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA,gBAEtB,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAAA;AAIpD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAK/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAG5E,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n showSelectedOptions: boolean;\n setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n setMenuState: (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n correctOptions: DSComboboxT.OptionTypes[];\n instanceUid: string;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAoC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n setMenuState: (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n correctOptions: DSComboboxT.OptionTypes[];\n instanceUid: string;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAgC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
6
6
  "names": []
7
7
  }
@@ -17,8 +17,13 @@ function isArrayOfItems(value) {
17
17
  }
18
18
  const isItem = (value) => !Array.isArray(value) && value !== null && typeof value === "object";
19
19
  const findInCircularList = (list, from, criteria, step = 1) => {
20
- for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
20
+ if (list.length === 0) return from;
21
+ let i = (from + step + list.length) % list.length;
22
+ let iterations = 0;
23
+ while (iterations < list.length) {
21
24
  if (criteria(list[i])) return i;
25
+ i = (i + step + list.length) % list.length;
26
+ iterations += 1;
22
27
  }
23
28
  return from;
24
29
  };
@@ -58,26 +63,6 @@ const filterOptions = (inputValue, options) => {
58
63
  (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase())
59
64
  );
60
65
  };
61
- const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
62
- const items = [];
63
- if (optionsToParse)
64
- optionsToParse.forEach((option) => {
65
- if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
66
- items.push(option);
67
- }
68
- if (option.type === MENU_OPTION_TYPES.SECTION) {
69
- if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
70
- items[items.length - 1] = option;
71
- } else {
72
- items.push(option);
73
- }
74
- }
75
- });
76
- if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
77
- items.pop();
78
- }
79
- return items;
80
- };
81
66
  const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
82
67
  const scrollIfNeeded = (elem, options = { behavior: "smooth", block: "end", inline: "nearest" }) => {
83
68
  const bounding = elem.getBoundingClientRect();
@@ -98,7 +83,6 @@ export {
98
83
  isSelected,
99
84
  isSelectedValueEmpty,
100
85
  isSelectedValueMultiple,
101
- scrollIfNeeded,
102
- selectedValuesWithSections
86
+ scrollIfNeeded
103
87
  };
104
88
  //# sourceMappingURL=listHelper.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.SelectedOptionsT,\n): string => {\n const lastValue = getLastValueSelected(selectedValues);\n if (lastValue) return lastValue.dsId;\n\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.ItemOption,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n) => {\n if (Array.isArray(selectedValues)) {\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const selectedValuesWithSections = (\n optionsToParse: DSComboboxT.OptionTypes[],\n multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n const items = [] as DSComboboxT.OptionTypes[];\n\n if (optionsToParse)\n optionsToParse.forEach((option) => {\n // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\n items.push(option);\n }\n\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n items[items.length - 1] = option;\n } else {\n items.push(option);\n }\n }\n });\n if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n items.pop();\n }\n\n return items;\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (\n !(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n )\n elem.scrollIntoView(options);\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.SelectedOptionsT,\n): string => {\n const lastValue = getLastValueSelected(selectedValues);\n if (lastValue) return lastValue.dsId;\n\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.ItemOption,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n) => {\n if (Array.isArray(selectedValues)) {\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (\n !(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n )\n elem.scrollIntoView(options);\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,3 +1,3 @@
1
1
  import type { DSComboboxT } from '../react-desc-prop-types.js';
2
- declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => DSComboboxT.OptionTypes[];
2
+ declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, inputValue: string) => DSComboboxT.OptionTypes[];
3
3
  export { useCorrectOptions };
@@ -10,7 +10,6 @@ export declare const StyledList: import("styled-components").StyledComponent<"ul
10
10
  export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
11
11
  inline: boolean | undefined;
12
12
  maxHeight: SizingProps['maxHeight'];
13
- withHeader?: boolean | undefined;
14
13
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
15
14
  export declare const StyledCreatableLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
16
15
  export declare const StyledCreatableValue: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
@@ -20,12 +20,8 @@ export declare namespace DSComboboxInternalsT {
20
20
  setInputValue: React.Dispatch<React.SetStateAction<string>>;
21
21
  selectedOptionsRef: React.RefObject<HTMLDivElement>;
22
22
  controlsWrapperRef: React.RefObject<HTMLDivElement>;
23
- selectAllCheckboxRef: React.RefObject<HTMLInputElement>;
24
- toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;
25
23
  focusOptionIdx: string;
26
24
  setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;
27
- showSelectedOptions: boolean;
28
- setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;
29
25
  setMenuState: (newState: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void;
30
26
  correctOptions: DSComboboxT.OptionTypes[];
31
27
  instanceUid: string;
@@ -11,6 +11,5 @@ export declare const getLastValueSelected: (selectedValues: DSComboboxT.Selected
11
11
  export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.SelectedOptionsT) => string;
12
12
  export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT, isNonClearable?: boolean) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
13
13
  export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];
14
- export declare const selectedValuesWithSections: (optionsToParse: DSComboboxT.OptionTypes[], multiSelectedValue: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
15
14
  export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
16
15
  export declare const scrollIfNeeded: (elem: HTMLElement, options?: ScrollIntoViewOptions | undefined) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-combobox",
3
- "version": "3.49.0-rc.0",
3
+ "version": "3.49.0-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -38,25 +38,25 @@
38
38
  "dependencies": {
39
39
  "react-virtual": "~2.10.4",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-button-v2": "3.49.0-rc.0",
42
- "@elliemae/ds-circular-progress-indicator": "3.49.0-rc.0",
43
- "@elliemae/ds-form-checkbox": "3.49.0-rc.0",
44
- "@elliemae/ds-grid": "3.49.0-rc.0",
45
- "@elliemae/ds-icons": "3.49.0-rc.0",
46
- "@elliemae/ds-menu-items": "3.49.0-rc.0",
47
- "@elliemae/ds-pills-v2": "3.49.0-rc.0",
48
- "@elliemae/ds-popperjs": "3.49.0-rc.0",
49
- "@elliemae/ds-props-helpers": "3.49.0-rc.0",
50
- "@elliemae/ds-system": "3.49.0-rc.0",
51
- "@elliemae/ds-truncated-tooltip-text": "3.49.0-rc.0"
41
+ "@elliemae/ds-button-v2": "3.49.0-rc.2",
42
+ "@elliemae/ds-form-checkbox": "3.49.0-rc.2",
43
+ "@elliemae/ds-grid": "3.49.0-rc.2",
44
+ "@elliemae/ds-icons": "3.49.0-rc.2",
45
+ "@elliemae/ds-pills-v2": "3.49.0-rc.2",
46
+ "@elliemae/ds-circular-progress-indicator": "3.49.0-rc.2",
47
+ "@elliemae/ds-menu-items": "3.49.0-rc.2",
48
+ "@elliemae/ds-props-helpers": "3.49.0-rc.2",
49
+ "@elliemae/ds-system": "3.49.0-rc.2",
50
+ "@elliemae/ds-popperjs": "3.49.0-rc.2",
51
+ "@elliemae/ds-truncated-tooltip-text": "3.49.0-rc.2"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@elliemae/pui-cli": "9.0.0-next.50",
55
55
  "@elliemae/pui-theme": "~2.10.0",
56
56
  "styled-components": "~5.3.9",
57
57
  "styled-system": "~5.1.5",
58
- "@elliemae/ds-form-helpers-mask-hooks": "3.49.0-rc.0",
59
- "@elliemae/ds-monorepo-devops": "3.49.0-rc.0"
58
+ "@elliemae/ds-form-helpers-mask-hooks": "3.49.0-rc.2",
59
+ "@elliemae/ds-monorepo-devops": "3.49.0-rc.2"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@elliemae/pui-theme": "~2.10.0",
@@ -1,104 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var HeaderList_exports = {};
30
- __export(HeaderList_exports, {
31
- HeaderList: () => HeaderList
32
- });
33
- module.exports = __toCommonJS(HeaderList_exports);
34
- var React = __toESM(require("react"));
35
- var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_react = require("react");
37
- var import_ds_button_v2 = require("@elliemae/ds-button-v2");
38
- var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
39
- var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
40
- var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
41
- var import_styled = require("./styled.js");
42
- var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
43
- var import_useHeaderListHandlers = require("./useHeaderListHandlers.js");
44
- const HeaderList = () => {
45
- const {
46
- props: { selectedValues, onSelectAll },
47
- showSelectedOptions,
48
- selectAllCheckboxRef,
49
- toggleSelectionButtonRef,
50
- correctOptions: filteredOptions
51
- } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
52
- const multiSelectedValues = selectedValues;
53
- const {
54
- handleKeyDown,
55
- handleOnMouseDown,
56
- handleFilterSelectionBtnOnTab,
57
- handleToggleSelectedValuesFilter,
58
- handleCheckAllOnTab,
59
- checkboxStatus,
60
- handleSelectAllCheckboxChange
61
- } = (0, import_useHeaderListHandlers.useHeaderListHandlers)();
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
63
- import_styled.StyledHeaderListWrapper,
64
- {
65
- onKeyDown: handleKeyDown,
66
- onMouseDown: handleOnMouseDown,
67
- "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.HEADER_LIST,
68
- children: [
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectAllCheckbox, { children: onSelectAll && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
- import_ds_form_checkbox.DSControlledCheckbox,
71
- {
72
- checked: checkboxStatus,
73
- "aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
74
- name: "select-all-checkbox",
75
- "aria-label": "Select/Unselect All Items",
76
- "aria-labelledby": "",
77
- id: "select-all-checkbox",
78
- onChange: handleSelectAllCheckboxChange,
79
- onKeyDown: handleCheckAllOnTab,
80
- innerRef: selectAllCheckboxRef
81
- }
82
- ) }),
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
- import_styled.StyledButtonSelection,
85
- {
86
- onKeyDown: handleFilterSelectionBtnOnTab,
87
- buttonType: import_ds_button_v2.BUTTON_TYPES.TEXT,
88
- onClick: handleToggleSelectedValuesFilter,
89
- size: import_ds_button_v2.BUTTON_SIZES.S,
90
- "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
91
- innerRef: toggleSelectionButtonRef,
92
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
93
- import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText,
94
- {
95
- value: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
96
- }
97
- )
98
- }
99
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNoOptionsSelected, { children: "0 SELECTED" }) })
100
- ]
101
- }
102
- );
103
- };
104
- //# sourceMappingURL=HeaderList.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n StyledHeaderListWrapper,\n StyledButtonSelection,\n StyledSelectedItems,\n StyledSelectAllCheckbox,\n StyledNoOptionsSelected,\n} from './styled.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { useHeaderListHandlers } from './useHeaderListHandlers.js';\nexport const HeaderList = (): JSX.Element => {\n const {\n props: { selectedValues, onSelectAll },\n showSelectedOptions,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n correctOptions: filteredOptions,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const {\n handleKeyDown,\n handleOnMouseDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleCheckAllOnTab,\n checkboxStatus,\n handleSelectAllCheckboxChange,\n } = useHeaderListHandlers();\n\n return (\n <StyledHeaderListWrapper\n onKeyDown={handleKeyDown}\n onMouseDown={handleOnMouseDown}\n data-testid={ComboboxDataTestid.MULTISELECT.HEADER_LIST}\n >\n <StyledSelectAllCheckbox>\n {onSelectAll && (\n <DSControlledCheckbox\n checked={checkboxStatus}\n aria-controls={filteredOptions.map((item) => item.dsId).join(' ')}\n name=\"select-all-checkbox\"\n aria-label=\"Select/Unselect All Items\"\n aria-labelledby=\"\"\n id=\"select-all-checkbox\"\n onChange={handleSelectAllCheckboxChange}\n onKeyDown={handleCheckAllOnTab}\n innerRef={selectAllCheckboxRef}\n />\n )}\n </StyledSelectAllCheckbox>\n <StyledSelectedItems>\n {multiSelectedValues.length > 0 ? (\n <StyledButtonSelection\n onKeyDown={handleFilterSelectionBtnOnTab}\n buttonType={BUTTON_TYPES.TEXT}\n onClick={handleToggleSelectedValuesFilter}\n size={BUTTON_SIZES.S}\n data-testid={ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE}\n innerRef={toggleSelectionButtonRef}\n >\n <SimpleTruncatedTooltipText\n value={!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n ></SimpleTruncatedTooltipText>\n </StyledButtonSelection>\n ) : (\n <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n )}\n </StyledSelectedItems>\n </StyledHeaderListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCnB;AApCJ,mBAAkC;AAClC,0BAA2C;AAC3C,8BAAqC;AACrC,uCAA2C;AAC3C,yBAAgC;AAChC,oBAMO;AAEP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oDAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,8CAAmB,YAAY;AAAA,MAE5C;AAAA,oDAAC,yCACE,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,YAChE,MAAK;AAAA,YACL,cAAW;AAAA,YACX,mBAAgB;AAAA,YAChB,IAAG;AAAA,YACH,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GAEJ;AAAA,QACA,4CAAC,qCACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,iCAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,iCAAa;AAAA,YACnB,eAAa,8CAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,CAAC,sBAAsB,kBAAkB,oBAAoB,MAAM,MAAM;AAAA;AAAA,YACjF;AAAA;AAAA,QACH,IAEA,4CAAC,yCAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
- "names": []
7
- }
@@ -1,36 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var header_list_exports = {};
30
- __export(header_list_exports, {
31
- HeaderList: () => import_HeaderList.HeaderList
32
- });
33
- module.exports = __toCommonJS(header_list_exports);
34
- var React = __toESM(require("react"));
35
- var import_HeaderList = require("./HeaderList.js");
36
- //# sourceMappingURL=index.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export { HeaderList } from './HeaderList.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA2B;",
6
- "names": []
7
- }
@@ -1,85 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var styled_exports = {};
30
- __export(styled_exports, {
31
- StyledButtonSelection: () => StyledButtonSelection,
32
- StyledHeaderListWrapper: () => StyledHeaderListWrapper,
33
- StyledNoOptionsSelected: () => StyledNoOptionsSelected,
34
- StyledSelectAllCheckbox: () => StyledSelectAllCheckbox,
35
- StyledSelectedItems: () => StyledSelectedItems
36
- });
37
- module.exports = __toCommonJS(styled_exports);
38
- var React = __toESM(require("react"));
39
- var import_ds_system = require("@elliemae/ds-system");
40
- var import_ds_button_v2 = require("@elliemae/ds-button-v2");
41
- const StyledHeaderListWrapper = import_ds_system.styled.div`
42
- display: flex;
43
- position: sticky;
44
- top: 0;
45
- z-index: 10;
46
- justify-content: space-between;
47
- width: inherit;
48
- padding: 5px 12px 5px 16px;
49
- @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
50
- padding: 3.25px 12px 3.25px 16px;
51
- }
52
-
53
- background-color: #fff;
54
- box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
55
- overflow-x: hidden;
56
-
57
- & button {
58
- font-size: 1rem;
59
- }
60
- `;
61
- const StyledButtonSelection = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
62
- border-radius: 0px;
63
- padding: 0 ${(props) => props.theme.space.xxs};
64
- margin: 0;
65
- font-size: 1rem;
66
- align-items: center;
67
- transition: unset;
68
- &:hover:not([disabled]) {
69
- background-color: transparent;
70
- color: ${(props) => props.theme.colors.brand["700"]};
71
- }
72
- `;
73
- const StyledSelectedItems = import_ds_system.styled.div`
74
- display: flex;
75
- align-items: center;
76
- `;
77
- const StyledNoOptionsSelected = import_ds_system.styled.div`
78
- padding: 0 ${(props) => props.theme.space.xxs};
79
- font-size: 1rem;
80
- `;
81
- const StyledSelectAllCheckbox = import_ds_system.styled.div`
82
- display: flex;
83
- align-items: center;
84
- `;
85
- //# sourceMappingURL=styled.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-len */\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nexport const StyledHeaderListWrapper = styled.div`\n display: flex;\n position: sticky;\n top: 0;\n z-index: 10;\n justify-content: space-between;\n width: inherit;\n padding: 5px 12px 5px 16px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 3.25px 12px 3.25px 16px;\n }\n\n background-color: #fff;\n box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};\n overflow-x: hidden;\n\n & button {\n font-size: 1rem;\n }\n`;\n\nexport const StyledButtonSelection = styled(DSButtonV2)`\n border-radius: 0px;\n padding: 0 ${(props) => props.theme.space.xxs};\n margin: 0;\n font-size: 1rem;\n align-items: center;\n transition: unset;\n &:hover:not([disabled]) {\n background-color: transparent;\n color: ${(props) => props.theme.colors.brand['700']};\n }\n`;\n\nexport const StyledSelectedItems = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledNoOptionsSelected = styled.div`\n padding: 0 ${(props) => props.theme.space.xxs};\n font-size: 1rem;\n`;\n\nexport const StyledSelectAllCheckbox = styled.div`\n display: flex;\n align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2B;AAC3B,0BAA2B;AAEpB,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQvB,oBAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlE,MAAM,4BAAwB,yBAAO,8BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAIxC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }