@elliemae/ds-form-combobox 3.0.0-next.37 → 3.0.0-next.40
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/parts/DropdownIndicator.js +1 -8
- package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +2 -4
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/DropdownIndicator.js +2 -9
- package/dist/esm/parts/DropdownIndicator.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +2 -4
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/package.json +11 -11
- package/dist/cjs/parts/dropdown-indicator/DropdownIndicator.js +0 -58
- package/dist/cjs/parts/dropdown-indicator/DropdownIndicator.js.map +0 -7
- package/dist/cjs/parts/dropdown-indicator/styled.js +0 -44
- package/dist/cjs/parts/dropdown-indicator/styled.js.map +0 -7
- package/dist/esm/parts/dropdown-indicator/DropdownIndicator.js +0 -29
- package/dist/esm/parts/dropdown-indicator/DropdownIndicator.js.map +0 -7
- package/dist/esm/parts/dropdown-indicator/styled.js +0 -15
- package/dist/esm/parts/dropdown-indicator/styled.js.map +0 -7
|
@@ -43,17 +43,12 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button.DSBut
|
|
|
43
43
|
&:hover:not(:disabled) {
|
|
44
44
|
background-color: transparent;
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
& svg {
|
|
48
|
-
fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["700"]};
|
|
49
|
-
}
|
|
50
46
|
`;
|
|
51
47
|
const DropdownIndicator = () => {
|
|
52
48
|
const {
|
|
53
49
|
props: { disabled },
|
|
54
50
|
menuState
|
|
55
51
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
56
|
-
const colorButton = (0, import_react.useMemo)(() => disabled ? ["neutral", 400] : ["brand-primary", 700], [disabled]);
|
|
57
52
|
const handleOnClick = (0, import_react.useCallback)((e) => {
|
|
58
53
|
e.preventDefault();
|
|
59
54
|
}, []);
|
|
@@ -68,9 +63,7 @@ const DropdownIndicator = () => {
|
|
|
68
63
|
"aria-hidden": true,
|
|
69
64
|
buttonType: "icon",
|
|
70
65
|
tabIndex: -1
|
|
71
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown,
|
|
72
|
-
color: colorButton
|
|
73
|
-
}));
|
|
66
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null));
|
|
74
67
|
};
|
|
75
68
|
module.exports = __toCommonJS(DropdownIndicator_exports);
|
|
76
69
|
//# sourceMappingURL=DropdownIndicator.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,uBAAuB,6BAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls=\"combo-listbox\"\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n >\n <ChevronSmallDown />\n </StyledDropDownButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,uBAAuB,6BAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvC,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,0BAAe;AAE9B,QAAM,gBAAgB,8BAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,mDAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,8CAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,mDAAC,sCAAiB,CACpB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -66,10 +66,8 @@ const Controls = () => {
|
|
|
66
66
|
innerRef.current?.focus();
|
|
67
67
|
setMenuState(true);
|
|
68
68
|
window.requestAnimationFrame(() => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
(0, import_listHelper.scrollIfNeeded)(listRef.current);
|
|
72
|
-
});
|
|
69
|
+
if (listRef.current)
|
|
70
|
+
(0, import_listHelper.scrollIfNeeded)(listRef.current);
|
|
73
71
|
});
|
|
74
72
|
}, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);
|
|
75
73
|
const handleOnPillsClick = (0, import_react.useCallback)((e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { scrollIfNeeded } from '../../utils/listHelper';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n innerRef.current?.blur();\n return;\n }\n innerRef.current?.focus();\n setMenuState(true);\n window.requestAnimationFrame(() => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,wBAA+B;AAC/B,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,0BAAe;AAE9B,QAAM,gBAAgB,8BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,sBAAsB,MAAM;AACjC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { scrollIfNeeded } from '../../utils/listHelper';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n innerRef.current?.blur();\n return;\n }\n innerRef.current?.focus();\n setMenuState(true);\n window.requestAnimationFrame(() => {\n if (listRef.current) scrollIfNeeded(listRef.current);\n });\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n innerRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, innerRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === innerRef.current || inline) {\n e.preventDefault();\n }\n },\n [innerRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n <A11ySelectedValues />\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,wBAA+B;AAC/B,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,0BAAe;AAE9B,QAAM,gBAAgB,8BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,sBAAsB,MAAM;AACjC,UAAI,QAAQ;AAAS,8CAAe,QAAQ,OAAO;AAAA,IACrD,CAAC;AAAA,EAGH,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C,8BAClD,CAAC,MAAM;AACL,QAAI,aAAa,UAAU;AACzB,QAAE,gBAAgB;AAAA,IACpB,OAAO;AACL,eAAS,SAAS,MAAM;AACxB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GACA,CAAC,WAAW,UAAU,UAAU,YAAY,CAC9C;AAGA,QAAM,oBAA6C,8BACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GACA,CAAC,UAAU,MAAM,CACnB;AAEA,QAAM,EAAE,mBAAmB,sDAAqB;AAEhD,QAAM,OAAO,0BACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB,GACjG,CAAC,MAAM,CACT;AACA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,KAE/B,CAAC,UACA,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,mDAAC,kDAAmB,GACnB,MAAM,QAAQ,cAAc,IAC3B,mDAAC,yEAA6B,IAE9B,mDAAC;AAAA,IAAI,eAAa,8CAAmB;AAAA,KAClC,kBAAkB,mDAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,mDAAC,gDAAkB,GAEnB,mDAAC,wCAAc,GACd,CAAC,UACA,mDAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,mDAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,mDAAC,gDAAkB,CACrB,CAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React2, { useCallback,
|
|
2
|
+
import React2, { useCallback, useContext } from "react";
|
|
3
3
|
import { styled } from "@elliemae/ds-system";
|
|
4
4
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
5
|
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
@@ -12,17 +12,12 @@ const StyledDropDownButton = styled(DSButtonV2)`
|
|
|
12
12
|
&:hover:not(:disabled) {
|
|
13
13
|
background-color: transparent;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
& svg {
|
|
17
|
-
fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["700"]};
|
|
18
|
-
}
|
|
19
15
|
`;
|
|
20
16
|
const DropdownIndicator = () => {
|
|
21
17
|
const {
|
|
22
18
|
props: { disabled },
|
|
23
19
|
menuState
|
|
24
20
|
} = useContext(ComboBoxContext);
|
|
25
|
-
const colorButton = useMemo(() => disabled ? ["neutral", 400] : ["brand-primary", 700], [disabled]);
|
|
26
21
|
const handleOnClick = useCallback((e) => {
|
|
27
22
|
e.preventDefault();
|
|
28
23
|
}, []);
|
|
@@ -37,9 +32,7 @@ const DropdownIndicator = () => {
|
|
|
37
32
|
"aria-hidden": true,
|
|
38
33
|
buttonType: "icon",
|
|
39
34
|
tabIndex: -1
|
|
40
|
-
}, /* @__PURE__ */ React2.createElement(ChevronSmallDown,
|
|
41
|
-
color: colorButton
|
|
42
|
-
}));
|
|
35
|
+
}, /* @__PURE__ */ React2.createElement(ChevronSmallDown, null));
|
|
43
36
|
};
|
|
44
37
|
export {
|
|
45
38
|
DropdownIndicator
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls=\"combo-listbox\"\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n >\n <ChevronSmallDown />\n </StyledDropDownButton>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvC,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,sBAAiB,CACpB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,10 +40,8 @@ const Controls = () => {
|
|
|
40
40
|
innerRef.current?.focus();
|
|
41
41
|
setMenuState(true);
|
|
42
42
|
window.requestAnimationFrame(() => {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
scrollIfNeeded(listRef.current);
|
|
46
|
-
});
|
|
43
|
+
if (listRef.current)
|
|
44
|
+
scrollIfNeeded(listRef.current);
|
|
47
45
|
});
|
|
48
46
|
}, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);
|
|
49
47
|
const handleOnPillsClick = useCallback((e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { scrollIfNeeded } from '../../utils/listHelper';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n innerRef.current?.blur();\n return;\n }\n innerRef.current?.focus();\n setMenuState(true);\n window.requestAnimationFrame(() => {\n
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,sBAAsB,MAAM;AACjC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { scrollIfNeeded } from '../../utils/listHelper';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n innerRef.current?.blur();\n return;\n }\n innerRef.current?.focus();\n setMenuState(true);\n window.requestAnimationFrame(() => {\n if (listRef.current) scrollIfNeeded(listRef.current);\n });\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n innerRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, innerRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === innerRef.current || inline) {\n e.preventDefault();\n }\n },\n [innerRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n <A11ySelectedValues />\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AACjB,WAAO,sBAAsB,MAAM;AACjC,UAAI,QAAQ;AAAS,uBAAe,QAAQ,OAAO;AAAA,IACrD,CAAC;AAAA,EAGH,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C,YAClD,CAAC,MAAM;AACL,QAAI,aAAa,UAAU;AACzB,QAAE,gBAAgB;AAAA,IACpB,OAAO;AACL,eAAS,SAAS,MAAM;AACxB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GACA,CAAC,WAAW,UAAU,UAAU,YAAY,CAC9C;AAGA,QAAM,oBAA6C,YACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GACA,CAAC,UAAU,MAAM,CACnB;AAEA,QAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAM,OAAO,QACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB,GACjG,CAAC,MAAM,CACT;AACA,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,KAE/B,CAAC,UACA,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,qCAAC,wBAAmB,GACnB,MAAM,QAAQ,cAAc,IAC3B,qCAAC,kCAA6B,IAE9B,qCAAC;AAAA,IAAI,eAAa,mBAAmB;AAAA,KAClC,kBAAkB,qCAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,qCAAC,uBAAkB,GAEnB,qCAAC,mBAAc,GACd,CAAC,UACA,qCAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,qCAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,qCAAC,uBAAkB,CACrB,CAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.40",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.0.0-next.
|
|
39
|
-
"@elliemae/ds-common": "3.0.0-next.
|
|
40
|
-
"@elliemae/ds-form-checkbox": "3.0.0-next.
|
|
41
|
-
"@elliemae/ds-grid": "3.0.0-next.
|
|
42
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
43
|
-
"@elliemae/ds-pills": "3.0.0-next.
|
|
44
|
-
"@elliemae/ds-popperjs": "3.0.0-next.
|
|
38
|
+
"@elliemae/ds-button": "3.0.0-next.40",
|
|
39
|
+
"@elliemae/ds-common": "3.0.0-next.40",
|
|
40
|
+
"@elliemae/ds-form-checkbox": "3.0.0-next.40",
|
|
41
|
+
"@elliemae/ds-grid": "3.0.0-next.40",
|
|
42
|
+
"@elliemae/ds-icons": "3.0.0-next.40",
|
|
43
|
+
"@elliemae/ds-pills": "3.0.0-next.40",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.0.0-next.40",
|
|
45
45
|
"@elliemae/ds-system": "3.0.0-next.29",
|
|
46
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.
|
|
47
|
-
"@elliemae/ds-utilities": "3.0.0-next.
|
|
46
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.40",
|
|
47
|
+
"@elliemae/ds-utilities": "3.0.0-next.40",
|
|
48
48
|
"react-virtual": "~2.8.2",
|
|
49
49
|
"uid": "~2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.0.0-next.
|
|
52
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.0.0-next.40",
|
|
53
53
|
"@elliemae/pui-theme": "~2.3.0",
|
|
54
54
|
"@testing-library/dom": "~8.11.3",
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.2",
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var DropdownIndicator_exports = {};
|
|
29
|
-
__export(DropdownIndicator_exports, {
|
|
30
|
-
DropdownIndicator: () => DropdownIndicator,
|
|
31
|
-
default: () => DropdownIndicator_default
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react = __toESM(require("react"));
|
|
35
|
-
var import_ds_icons = require("@elliemae/ds-icons");
|
|
36
|
-
var import_ComboBoxCTX = require("../../ComboBoxCTX");
|
|
37
|
-
var import_styled = require("./styled");
|
|
38
|
-
var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
|
|
39
|
-
const DropdownIndicator = () => {
|
|
40
|
-
const {
|
|
41
|
-
props: { disabled },
|
|
42
|
-
menuState
|
|
43
|
-
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
44
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledDropDownButton, {
|
|
45
|
-
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
|
|
46
|
-
"aria-controls": "combo-listbox",
|
|
47
|
-
"aria-labelledby": "combo-label",
|
|
48
|
-
disabled,
|
|
49
|
-
"aria-expanded": menuState,
|
|
50
|
-
"aria-haspopup": "listbox",
|
|
51
|
-
"aria-hidden": true,
|
|
52
|
-
buttonType: "icon",
|
|
53
|
-
tabIndex: -1
|
|
54
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null));
|
|
55
|
-
};
|
|
56
|
-
var DropdownIndicator_default = DropdownIndicator;
|
|
57
|
-
module.exports = __toCommonJS(DropdownIndicator_exports);
|
|
58
|
-
//# sourceMappingURL=DropdownIndicator.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/dropdown-indicator/DropdownIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useContext } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledDropDownButton } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nconst DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n } = useContext(ComboBoxContext);\n return (\n <StyledDropDownButton\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls=\"combo-listbox\"\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n >\n <ChevronSmallDown />\n </StyledDropDownButton>\n );\n};\n\nexport { DropdownIndicator };\nexport default DropdownIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkC;AAClC,sBAAiC;AACjC,yBAAgC;AAChC,oBAAqC;AACrC,iCAAmC;AACnC,MAAM,oBAAoB,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,kCAAe;AAC9B,SACE,mDAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,mDAAC,sCAAiB,CACpB;AAEJ;AAGA,IAAO,4BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var styled_exports = {};
|
|
29
|
-
__export(styled_exports, {
|
|
30
|
-
StyledDropDownButton: () => StyledDropDownButton
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
34
|
-
var import_ds_button = require("@elliemae/ds-button");
|
|
35
|
-
const StyledDropDownButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
|
|
36
|
-
&:focus::after {
|
|
37
|
-
border: none;
|
|
38
|
-
}
|
|
39
|
-
& svg {
|
|
40
|
-
fill: ${(props) => props.theme.colors.brand["700"]};
|
|
41
|
-
}
|
|
42
|
-
`;
|
|
43
|
-
module.exports = __toCommonJS(styled_exports);
|
|
44
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/dropdown-indicator/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nexport const StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand['700']};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAA2B;AAEpB,MAAM,uBAAuB,sCAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useContext } from "react";
|
|
3
|
-
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
4
|
-
import { ComboBoxContext } from "../../ComboBoxCTX";
|
|
5
|
-
import { StyledDropDownButton } from "./styled";
|
|
6
|
-
import { ComboboxDataTestid } from "../../ComboboxDataTestids";
|
|
7
|
-
const DropdownIndicator = () => {
|
|
8
|
-
const {
|
|
9
|
-
props: { disabled },
|
|
10
|
-
menuState
|
|
11
|
-
} = useContext(ComboBoxContext);
|
|
12
|
-
return /* @__PURE__ */ React2.createElement(StyledDropDownButton, {
|
|
13
|
-
"data-testid": ComboboxDataTestid.DROPDOWN,
|
|
14
|
-
"aria-controls": "combo-listbox",
|
|
15
|
-
"aria-labelledby": "combo-label",
|
|
16
|
-
disabled,
|
|
17
|
-
"aria-expanded": menuState,
|
|
18
|
-
"aria-haspopup": "listbox",
|
|
19
|
-
"aria-hidden": true,
|
|
20
|
-
buttonType: "icon",
|
|
21
|
-
tabIndex: -1
|
|
22
|
-
}, /* @__PURE__ */ React2.createElement(ChevronSmallDown, null));
|
|
23
|
-
};
|
|
24
|
-
var DropdownIndicator_default = DropdownIndicator;
|
|
25
|
-
export {
|
|
26
|
-
DropdownIndicator,
|
|
27
|
-
DropdownIndicator_default as default
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=DropdownIndicator.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/dropdown-indicator/DropdownIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useContext } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledDropDownButton } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nconst DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n } = useContext(ComboBoxContext);\n return (\n <StyledDropDownButton\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls=\"combo-listbox\"\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n >\n <ChevronSmallDown />\n </StyledDropDownButton>\n );\n};\n\nexport { DropdownIndicator };\nexport default DropdownIndicator;\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAC9B,SACE,qCAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,sBAAiB,CACpB;AAEJ;AAGA,IAAO,4BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
|
-
const StyledDropDownButton = styled(DSButtonV2)`
|
|
5
|
-
&:focus::after {
|
|
6
|
-
border: none;
|
|
7
|
-
}
|
|
8
|
-
& svg {
|
|
9
|
-
fill: ${(props) => props.theme.colors.brand["700"]};
|
|
10
|
-
}
|
|
11
|
-
`;
|
|
12
|
-
export {
|
|
13
|
-
StyledDropDownButton
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/dropdown-indicator/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nexport const StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n & svg {\n fill: ${(props) => props.theme.colors.brand['700']};\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|