@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.
- package/dist/cjs/ComboBoxCTX.js +0 -4
- package/dist/cjs/ComboBoxCTX.js.map +2 -2
- package/dist/cjs/config/useComboBox.js +19 -36
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/config/useCorrectOptions.js +3 -6
- package/dist/cjs/config/useCorrectOptions.js.map +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +10 -14
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -5
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +20 -35
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/styled.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/cjs/utils/listHelper.js +7 -23
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/esm/ComboBoxCTX.js +0 -4
- package/dist/esm/ComboBoxCTX.js.map +2 -2
- package/dist/esm/config/useComboBox.js +20 -37
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/config/useCorrectOptions.js +4 -7
- package/dist/esm/config/useCorrectOptions.js.map +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +10 -14
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/parts/controls-input/useMaskedOnChange.js +4 -5
- package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +21 -36
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/styled.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/esm/utils/listHelper.js +7 -23
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/dist/types/config/useCorrectOptions.d.ts +1 -1
- package/dist/types/parts/menu-list/styled.d.ts +0 -1
- package/dist/types/sharedTypes.d.ts +0 -4
- package/dist/types/utils/listHelper.d.ts +0 -1
- package/package.json +14 -14
- package/dist/cjs/parts/header-list/HeaderList.js +0 -104
- package/dist/cjs/parts/header-list/HeaderList.js.map +0 -7
- package/dist/cjs/parts/header-list/index.js +0 -36
- package/dist/cjs/parts/header-list/index.js.map +0 -7
- package/dist/cjs/parts/header-list/styled.js +0 -85
- package/dist/cjs/parts/header-list/styled.js.map +0 -7
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js +0 -140
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +0 -7
- package/dist/esm/parts/header-list/HeaderList.js +0 -80
- package/dist/esm/parts/header-list/HeaderList.js.map +0 -7
- package/dist/esm/parts/header-list/index.js +0 -6
- package/dist/esm/parts/header-list/index.js.map +0 -7
- package/dist/esm/parts/header-list/styled.js +0 -55
- package/dist/esm/parts/header-list/styled.js.map +0 -7
- package/dist/esm/parts/header-list/useHeaderListHandlers.js +0 -110
- package/dist/esm/parts/header-list/useHeaderListHandlers.js.map +0 -7
- package/dist/types/parts/header-list/HeaderList.d.ts +0 -1
- package/dist/types/parts/header-list/index.d.ts +0 -1
- package/dist/types/parts/header-list/styled.d.ts +0 -6
- package/dist/types/parts/header-list/useHeaderListHandlers.d.ts +0 -11
|
@@ -1,27 +1,23 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
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,
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
"
|
|
60
|
-
|
|
61
|
-
|
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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
|
|
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,
|
|
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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;
|
|
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
|
-
|
|
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", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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
|
|
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.
|
|
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.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-truncated-tooltip-text": "3.49.0-rc.
|
|
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.
|
|
59
|
-
"@elliemae/ds-monorepo-devops": "3.49.0-rc.
|
|
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
|
-
}
|