@elliemae/ds-form-combobox 3.29.2-rc.0 → 3.30.0-next.0
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 +2 -1
- package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +2 -5
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls/styled.js +6 -5
- package/dist/cjs/parts/controls/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/styled.js +7 -4
- package/dist/cjs/parts/controls-input/styled.js.map +2 -2
- package/dist/cjs/parts/header-list/HeaderList.js +8 -3
- package/dist/cjs/parts/header-list/HeaderList.js.map +2 -2
- package/dist/cjs/parts/header-list/styled.js +9 -6
- package/dist/cjs/parts/header-list/styled.js.map +2 -2
- package/dist/cjs/parts/menu-list/styled.js +0 -1
- package/dist/cjs/parts/menu-list/styled.js.map +2 -2
- package/dist/esm/parts/DropdownIndicator.js +2 -1
- package/dist/esm/parts/DropdownIndicator.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +2 -5
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls/styled.js +7 -6
- package/dist/esm/parts/controls/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/styled.js +7 -4
- package/dist/esm/parts/controls-input/styled.js.map +2 -2
- package/dist/esm/parts/header-list/HeaderList.js +8 -3
- package/dist/esm/parts/header-list/HeaderList.js.map +2 -2
- package/dist/esm/parts/header-list/styled.js +10 -7
- package/dist/esm/parts/header-list/styled.js.map +2 -2
- package/dist/esm/parts/menu-list/styled.js +0 -1
- package/dist/esm/parts/menu-list/styled.js.map +2 -2
- package/dist/types/parts/DropdownIndicator.d.ts +1 -0
- package/dist/types/parts/LiveRegion.d.ts +1 -0
- package/dist/types/parts/container/Container.d.ts +1 -0
- package/dist/types/parts/controls/Controls.d.ts +1 -0
- package/dist/types/parts/controls-input/ControlsInput.d.ts +1 -0
- package/dist/types/parts/header-list/HeaderList.d.ts +1 -0
- package/dist/types/parts/menu-list/MenuList.d.ts +1 -0
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +1 -0
- package/dist/types/parts/multi-selected-values-container/MultiSelectedValuesContainer.d.ts +1 -0
- package/package.json +15 -15
|
@@ -73,7 +73,8 @@ const DropdownIndicator = () => {
|
|
|
73
73
|
"aria-hidden": true,
|
|
74
74
|
buttonType: "icon",
|
|
75
75
|
tabIndex: -1,
|
|
76
|
-
|
|
76
|
+
size: "s",
|
|
77
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { size: "s" })
|
|
77
78
|
}
|
|
78
79
|
);
|
|
79
80
|
};
|
|
@@ -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, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-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;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n size=\"s\"\n >\n <ChevronSmallDown size=\"s\" />\n </StyledDropDownButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDjB;AA9CN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAIhG,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBACJ,0BAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAe,iBAAiB;AAAA,MAChC,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MAEL,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -88,10 +88,7 @@ const Controls = () => {
|
|
|
88
88
|
[internalRef, inline]
|
|
89
89
|
);
|
|
90
90
|
const { onKeyDownPills } = (0, import_useOnPillsNavigation.useOnPillsNavigation)();
|
|
91
|
-
const cols = (0, import_react.useMemo)(
|
|
92
|
-
() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "29px"] : ["minmax(0px, auto)"],
|
|
93
|
-
[inline]
|
|
94
|
-
);
|
|
91
|
+
const cols = (0, import_react.useMemo)(() => !inline ? ["minmax(0px,max-content)", "1fr", "auto"] : ["minmax(0px, auto)"], [inline]);
|
|
95
92
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
96
93
|
import_styled.StyledControlsWrapper,
|
|
97
94
|
{
|
|
@@ -108,7 +105,7 @@ const Controls = () => {
|
|
|
108
105
|
children: [
|
|
109
106
|
!inline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelection, { innerRef: selectedOptionsRef, onClick: handleOnPillsClick, children: Array.isArray(selectedValues) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selected_values_container.MultiSelectedValuesContainer, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSingleSelectWraper, { "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES, disabled, children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: selectedValues.label }) : null }) }),
|
|
110
107
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
|
|
111
|
-
!inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderActionsWrapper, {
|
|
108
|
+
!inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderActionsWrapper, { justifyItems: "center", cols: ["min-content", "minmax(28px,max-content)"], children: [
|
|
112
109
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHeaderActionsSeparator, { disabled }),
|
|
113
110
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownIndicator.DropdownIndicator, {})
|
|
114
111
|
] })
|
|
@@ -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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, 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 internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, 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 === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, 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 internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, 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 === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(() => (!inline ? ['minmax(0px,max-content)', '1fr', 'auto'] : ['minmax(0px, auto)']), [inline]);\n return (\n <StyledControlsWrapper\n innerRef={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 innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper data-testid={ComboboxDataTestid.SELECTED_VALUES} disabled={disabled}>\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyItems=\"center\" cols={['min-content', 'minmax(28px,max-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;AAAA;ACAA,YAAuB;ADyFX;AAvFZ,mBAAwD;AACxD,uCAA2C;AAC3C,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAE5B,oBAMO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO,sBAAQ,MAAO,CAAC,SAAS,CAAC,2BAA2B,OAAO,MAAM,IAAI,CAAC,mBAAmB,GAAI,CAAC,MAAM,CAAC;AACnH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC,0CAAyB,eAAa,8CAAmB,iBAAiB,UACxE,4BAAkB,eAAe,KAAK,4CAAC,+DAA2B,OAAO,eAAe,OAAO,IAAK,MACvG,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QACd,CAAC,UACA,6CAAC,4CAA2B,cAAa,UAAS,MAAM,CAAC,eAAe,0BAA0B,GAChG;AAAA,sDAAC,6CAA4B,UAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -60,8 +60,10 @@ const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
|
|
|
60
60
|
min-width: ${({ minWidth, inline }) => inline || !minWidth ? "" : `${minWidth}px`};
|
|
61
61
|
align-items: center;
|
|
62
62
|
align-content: center;
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
padding: 3px 0px 3px 8px;
|
|
64
|
+
@media (max-width: ${import_ds_system.th.breakpoint("small")}) {
|
|
65
|
+
padding: 1.25px 0px 1.25px 8px;
|
|
66
|
+
}
|
|
65
67
|
margin: ${({ inline }) => inline ? "10px 16px" : ""};
|
|
66
68
|
${normalBorder}
|
|
67
69
|
&:hover {
|
|
@@ -79,7 +81,7 @@ const StyledSingleSelectWraper = import_ds_system.styled.div`
|
|
|
79
81
|
user-select: ${({ disabled }) => disabled ? "none" : ""};
|
|
80
82
|
`;
|
|
81
83
|
const StyledSelection = import_ds_system.styled.div`
|
|
82
|
-
font-size:
|
|
84
|
+
font-size: 1rem;
|
|
83
85
|
margin-right: 3px;
|
|
84
86
|
display: flex;
|
|
85
87
|
`;
|
|
@@ -91,8 +93,7 @@ const StyledHeaderActionsWrapper = (0, import_ds_system.styled)(import_ds_grid.G
|
|
|
91
93
|
`;
|
|
92
94
|
const StyleDropdownIndicator = import_ds_system.styled.div``;
|
|
93
95
|
const StyleHeaderActionsSeparator = import_ds_system.styled.span`
|
|
94
|
-
|
|
95
|
-
margin: 4px 0px;
|
|
96
|
+
height: 100%;
|
|
96
97
|
width: 1px;
|
|
97
98
|
background-color: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.neutral["500"]};
|
|
98
99
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n padding: 3px 0px 3px 8px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 1.25px 0px 1.25px 8px;\n }\n margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n ${normalBorder}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean }>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['400'] : '')};\n user-select: ${({ disabled }) => (disabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n font-size: 1rem;\n margin-right: 3px;\n display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n height: 100%;\n .em-ds-button--text:focus::after {\n border: none;\n }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n height: 100%;\n width: 1px;\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAChC,qBAAqB;AACrB,qBAAgD;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,uBAIjD,oBAAG,WAAW,OAAO;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,iBAC7D,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA;AAGjD,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,iCAA6B,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,wBAAO;AAEtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,8 +42,9 @@ const StyledInput = (0, import_ds_system.styled)("input", {
|
|
|
42
42
|
name: import_theming.DSComboBoxName,
|
|
43
43
|
slot: import_theming.DSComboboxSlots.INPUT
|
|
44
44
|
})`
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
line-height: 1rem;
|
|
46
|
+
font-size: 1rem;
|
|
47
|
+
|
|
47
48
|
border: none;
|
|
48
49
|
overflow: hidden;
|
|
49
50
|
padding: 0;
|
|
@@ -66,8 +67,10 @@ const StyledInputPlaceHolder = import_ds_system.styled.div`
|
|
|
66
67
|
align-items: center;
|
|
67
68
|
width: 100%;
|
|
68
69
|
user-select: none;
|
|
69
|
-
|
|
70
|
-
|
|
70
|
+
|
|
71
|
+
line-height: 1rem;
|
|
72
|
+
font-size: 1rem;
|
|
73
|
+
|
|
71
74
|
& span::after {
|
|
72
75
|
content: '';
|
|
73
76
|
padding: 1px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, th } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n line-height: 1rem;\n font-size: 1rem;\n\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n line-height: 1rem;\n font-size: 1rem;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2B;AAC3B,qBAAgD;AAEzC,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAIhD,CAAC,EAAE,aAAa,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB7C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_react = require("react");
|
|
37
37
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
38
38
|
var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
|
|
39
|
+
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
39
40
|
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
40
41
|
var import_styled = require("./styled.js");
|
|
41
42
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
@@ -76,8 +77,7 @@ const HeaderList = () => {
|
|
|
76
77
|
id: "select-all-checkbox",
|
|
77
78
|
onChange: handleSelectAllCheckboxChange,
|
|
78
79
|
onKeyDown: handleCheckAllOnTab,
|
|
79
|
-
innerRef: selectAllCheckboxRef
|
|
80
|
-
device: "desktop"
|
|
80
|
+
innerRef: selectAllCheckboxRef
|
|
81
81
|
}
|
|
82
82
|
) }),
|
|
83
83
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -89,7 +89,12 @@ const HeaderList = () => {
|
|
|
89
89
|
size: import_ds_button_v2.BUTTON_SIZES.S,
|
|
90
90
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
|
|
91
91
|
innerRef: toggleSelectionButtonRef,
|
|
92
|
-
children:
|
|
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
|
+
)
|
|
93
98
|
}
|
|
94
99
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNoOptionsSelected, { children: "0 SELECTED" }) })
|
|
95
100
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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,YAAY;AAAA;AAAA,YACjF;AAAA;AAAA,QACH,IAEA,4CAAC,yCAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,26 +40,29 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
40
40
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
41
41
|
const StyledHeaderListWrapper = import_ds_system.styled.div`
|
|
42
42
|
display: flex;
|
|
43
|
-
position:
|
|
43
|
+
position: sticky;
|
|
44
44
|
top: 0;
|
|
45
45
|
z-index: 10;
|
|
46
46
|
justify-content: space-between;
|
|
47
|
-
padding: 0px 12px 0px 16px;
|
|
48
47
|
width: inherit;
|
|
49
|
-
|
|
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
|
+
|
|
50
53
|
background-color: #fff;
|
|
51
54
|
box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
|
|
52
55
|
overflow-x: hidden;
|
|
53
56
|
|
|
54
57
|
& button {
|
|
55
|
-
font-size:
|
|
58
|
+
font-size: 1rem;
|
|
56
59
|
}
|
|
57
60
|
`;
|
|
58
61
|
const StyledButtonSelection = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
|
|
59
62
|
border-radius: 0px;
|
|
60
63
|
padding: 0 ${(props) => props.theme.space.xxs};
|
|
61
64
|
margin: 0;
|
|
62
|
-
font-size:
|
|
65
|
+
font-size: 1rem;
|
|
63
66
|
align-items: center;
|
|
64
67
|
transition: unset;
|
|
65
68
|
&:hover:not([disabled]) {
|
|
@@ -73,7 +76,7 @@ const StyledSelectedItems = import_ds_system.styled.div`
|
|
|
73
76
|
`;
|
|
74
77
|
const StyledNoOptionsSelected = import_ds_system.styled.div`
|
|
75
78
|
padding: 0 ${(props) => props.theme.space.xxs};
|
|
76
|
-
font-size:
|
|
79
|
+
font-size: 1rem;
|
|
77
80
|
`;
|
|
78
81
|
const StyledSelectAllCheckbox = import_ds_system.styled.div`
|
|
79
82
|
display: flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-len */\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nexport const StyledHeaderListWrapper = styled.div`\n display: flex;\n position:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
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;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjE,MAAM,4BAAwB,yBAAO,8BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI/C,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -53,7 +53,6 @@ const StyledList = import_ds_system.styled.ul`
|
|
|
53
53
|
`;
|
|
54
54
|
const StyledVirtualListWrapper = import_ds_system.styled.div`
|
|
55
55
|
overflow-y: auto;
|
|
56
|
-
margin-top: ${({ withHeader }) => withHeader ? "28px" : ""};
|
|
57
56
|
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
58
57
|
`;
|
|
59
58
|
const StyledCreatableLabel = import_ds_system.styled.span`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ;AAAA,WACnE,CAAC,EAAE,MAAM,MAAM,GAAG;AAAA;AAAA,gBAEb,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAI/C,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ;AAAA,WACnE,CAAC,EAAE,MAAM,MAAM,GAAG;AAAA;AAAA,gBAEb,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAI/C,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,QAAQ;AAAA;AAGpE,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;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/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, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-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,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n size=\"s\"\n >\n <ChevronSmallDown size=\"s\" />\n </StyledDropDownButton>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDjB;AA9CN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAIhG,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB;AAAA,MAChC,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MAEL,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -61,10 +61,7 @@ const Controls = () => {
|
|
|
61
61
|
[internalRef, inline]
|
|
62
62
|
);
|
|
63
63
|
const { onKeyDownPills } = useOnPillsNavigation();
|
|
64
|
-
const cols = useMemo(
|
|
65
|
-
() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "29px"] : ["minmax(0px, auto)"],
|
|
66
|
-
[inline]
|
|
67
|
-
);
|
|
64
|
+
const cols = useMemo(() => !inline ? ["minmax(0px,max-content)", "1fr", "auto"] : ["minmax(0px, auto)"], [inline]);
|
|
68
65
|
return /* @__PURE__ */ jsxs(
|
|
69
66
|
StyledControlsWrapper,
|
|
70
67
|
{
|
|
@@ -81,7 +78,7 @@ const Controls = () => {
|
|
|
81
78
|
children: [
|
|
82
79
|
!inline && /* @__PURE__ */ jsx(StyledSelection, { innerRef: selectedOptionsRef, onClick: handleOnPillsClick, children: Array.isArray(selectedValues) ? /* @__PURE__ */ jsx(MultiSelectedValuesContainer, {}) : /* @__PURE__ */ jsx(StyledSingleSelectWraper, { "data-testid": ComboboxDataTestid.SELECTED_VALUES, disabled, children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: selectedValues.label }) : null }) }),
|
|
83
80
|
/* @__PURE__ */ jsx(ControlsInput, {}),
|
|
84
|
-
!inline && /* @__PURE__ */ jsxs(StyledHeaderActionsWrapper, {
|
|
81
|
+
!inline && /* @__PURE__ */ jsxs(StyledHeaderActionsWrapper, { justifyItems: "center", cols: ["min-content", "minmax(28px,max-content)"], children: [
|
|
85
82
|
/* @__PURE__ */ jsx(StyleHeaderActionsSeparator, { disabled }),
|
|
86
83
|
/* @__PURE__ */ jsx(DropdownIndicator, {})
|
|
87
84
|
] })
|
|
@@ -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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, 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 internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, 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 === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, 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 internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [menuState, internalRef, 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 === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(() => (!inline ? ['minmax(0px,max-content)', '1fr', 'auto'] : ['minmax(0px, auto)']), [inline]);\n return (\n <StyledControlsWrapper\n innerRef={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 innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper data-testid={ComboboxDataTestid.SELECTED_VALUES} disabled={disabled}>\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyItems=\"center\" cols={['min-content', 'minmax(28px,max-content)']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyFX,cAWJ,YAXI;AAvFZ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO,QAAQ,MAAO,CAAC,SAAS,CAAC,2BAA2B,OAAO,MAAM,IAAI,CAAC,mBAAmB,GAAI,CAAC,MAAM,CAAC;AACnH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,mBAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,oBAAC,mBAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC,4BAAyB,eAAa,mBAAmB,iBAAiB,UACxE,4BAAkB,eAAe,KAAK,oBAAC,8BAA2B,OAAO,eAAe,OAAO,IAAK,MACvG,GAEJ;AAAA,QAGF,oBAAC,iBAAc;AAAA,QACd,CAAC,UACA,qBAAC,8BAA2B,cAAa,UAAS,MAAM,CAAC,eAAe,0BAA0B,GAChG;AAAA,8BAAC,+BAA4B,UAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled, css } from "@elliemae/ds-system";
|
|
2
|
+
import { styled, css, th } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSComboBoxName, DSComboboxSlots } from "../../theming.js";
|
|
5
5
|
const normalBorder = css`
|
|
@@ -22,8 +22,10 @@ const StyledControlsWrapper = styled(Grid, {
|
|
|
22
22
|
min-width: ${({ minWidth, inline }) => inline || !minWidth ? "" : `${minWidth}px`};
|
|
23
23
|
align-items: center;
|
|
24
24
|
align-content: center;
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
padding: 3px 0px 3px 8px;
|
|
26
|
+
@media (max-width: ${th.breakpoint("small")}) {
|
|
27
|
+
padding: 1.25px 0px 1.25px 8px;
|
|
28
|
+
}
|
|
27
29
|
margin: ${({ inline }) => inline ? "10px 16px" : ""};
|
|
28
30
|
${normalBorder}
|
|
29
31
|
&:hover {
|
|
@@ -41,7 +43,7 @@ const StyledSingleSelectWraper = styled.div`
|
|
|
41
43
|
user-select: ${({ disabled }) => disabled ? "none" : ""};
|
|
42
44
|
`;
|
|
43
45
|
const StyledSelection = styled.div`
|
|
44
|
-
font-size:
|
|
46
|
+
font-size: 1rem;
|
|
45
47
|
margin-right: 3px;
|
|
46
48
|
display: flex;
|
|
47
49
|
`;
|
|
@@ -53,8 +55,7 @@ const StyledHeaderActionsWrapper = styled(Grid)`
|
|
|
53
55
|
`;
|
|
54
56
|
const StyleDropdownIndicator = styled.div``;
|
|
55
57
|
const StyleHeaderActionsSeparator = styled.span`
|
|
56
|
-
|
|
57
|
-
margin: 4px 0px;
|
|
58
|
+
height: 100%;
|
|
58
59
|
width: 1px;
|
|
59
60
|
background-color: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.neutral["500"]};
|
|
60
61
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n hasError: boolean;\n inline: boolean;\n minWidth?: number;\n disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n position: relative;\n border-radius: 2px;\n min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n align-items: center;\n align-content: center;\n padding: 3px 0px 3px 8px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 1.25px 0px 1.25px 8px;\n }\n margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n ${normalBorder}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean }>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['400'] : '')};\n user-select: ${({ disabled }) => (disabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n font-size: 1rem;\n margin-right: 3px;\n display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n height: 100%;\n .em-ds-button--text:focus::after {\n border: none;\n }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n height: 100%;\n width: 1px;\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,uBAIjD,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA,YAGhC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,iBAC7D,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA;AAGjD,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,8 +5,9 @@ const StyledInput = styled("input", {
|
|
|
5
5
|
name: DSComboBoxName,
|
|
6
6
|
slot: DSComboboxSlots.INPUT
|
|
7
7
|
})`
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
line-height: 1rem;
|
|
9
|
+
font-size: 1rem;
|
|
10
|
+
|
|
10
11
|
border: none;
|
|
11
12
|
overflow: hidden;
|
|
12
13
|
padding: 0;
|
|
@@ -29,8 +30,10 @@ const StyledInputPlaceHolder = styled.div`
|
|
|
29
30
|
align-items: center;
|
|
30
31
|
width: 100%;
|
|
31
32
|
user-select: none;
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
|
|
34
|
+
line-height: 1rem;
|
|
35
|
+
font-size: 1rem;
|
|
36
|
+
|
|
34
37
|
& span::after {
|
|
35
38
|
content: '';
|
|
36
39
|
padding: 1px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, th } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n line-height: 1rem;\n font-size: 1rem;\n\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n line-height: 1rem;\n font-size: 1rem;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAkB;AAC3B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAIhD,CAAC,EAAE,aAAa,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB7C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useContext } from "react";
|
|
4
4
|
import { BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-button-v2";
|
|
5
5
|
import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
|
|
6
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
6
7
|
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
7
8
|
import {
|
|
8
9
|
StyledHeaderListWrapper,
|
|
@@ -49,8 +50,7 @@ const HeaderList = () => {
|
|
|
49
50
|
id: "select-all-checkbox",
|
|
50
51
|
onChange: handleSelectAllCheckboxChange,
|
|
51
52
|
onKeyDown: handleCheckAllOnTab,
|
|
52
|
-
innerRef: selectAllCheckboxRef
|
|
53
|
-
device: "desktop"
|
|
53
|
+
innerRef: selectAllCheckboxRef
|
|
54
54
|
}
|
|
55
55
|
) }),
|
|
56
56
|
/* @__PURE__ */ jsx(StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ jsx(
|
|
@@ -62,7 +62,12 @@ const HeaderList = () => {
|
|
|
62
62
|
size: BUTTON_SIZES.S,
|
|
63
63
|
"data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
|
|
64
64
|
innerRef: toggleSelectionButtonRef,
|
|
65
|
-
children:
|
|
65
|
+
children: /* @__PURE__ */ jsx(
|
|
66
|
+
SimpleTruncatedTooltipText,
|
|
67
|
+
{
|
|
68
|
+
value: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
|
|
69
|
+
}
|
|
70
|
+
)
|
|
66
71
|
}
|
|
67
72
|
) : /* @__PURE__ */ jsx(StyledNoOptionsSelected, { children: "0 SELECTED" }) })
|
|
68
73
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/HeaderList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 { 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuCnB,SAOM,KAPN;AApCJ,SAAgB,kBAAkB;AAClC,SAAS,cAAc,oBAAoB;AAC3C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,mBAAmB,YAAY;AAAA,MAE5C;AAAA,4BAAC,2BACE,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,oBAAC,uBACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,aAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,aAAa;AAAA,YACnB,eAAa,mBAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,CAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA;AAAA,YACjF;AAAA;AAAA,QACH,IAEA,oBAAC,2BAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,28 +1,31 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
2
|
+
import { styled, th } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
4
4
|
const StyledHeaderListWrapper = styled.div`
|
|
5
5
|
display: flex;
|
|
6
|
-
position:
|
|
6
|
+
position: sticky;
|
|
7
7
|
top: 0;
|
|
8
8
|
z-index: 10;
|
|
9
9
|
justify-content: space-between;
|
|
10
|
-
padding: 0px 12px 0px 16px;
|
|
11
10
|
width: inherit;
|
|
12
|
-
|
|
11
|
+
padding: 5px 12px 5px 16px;
|
|
12
|
+
@media (max-width: ${th.breakpoint("small")}) {
|
|
13
|
+
padding: 3.25px 12px 3.25px 16px;
|
|
14
|
+
}
|
|
15
|
+
|
|
13
16
|
background-color: #fff;
|
|
14
17
|
box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
|
|
15
18
|
overflow-x: hidden;
|
|
16
19
|
|
|
17
20
|
& button {
|
|
18
|
-
font-size:
|
|
21
|
+
font-size: 1rem;
|
|
19
22
|
}
|
|
20
23
|
`;
|
|
21
24
|
const StyledButtonSelection = styled(DSButtonV2)`
|
|
22
25
|
border-radius: 0px;
|
|
23
26
|
padding: 0 ${(props) => props.theme.space.xxs};
|
|
24
27
|
margin: 0;
|
|
25
|
-
font-size:
|
|
28
|
+
font-size: 1rem;
|
|
26
29
|
align-items: center;
|
|
27
30
|
transition: unset;
|
|
28
31
|
&:hover:not([disabled]) {
|
|
@@ -36,7 +39,7 @@ const StyledSelectedItems = styled.div`
|
|
|
36
39
|
`;
|
|
37
40
|
const StyledNoOptionsSelected = styled.div`
|
|
38
41
|
padding: 0 ${(props) => props.theme.space.xxs};
|
|
39
|
-
font-size:
|
|
42
|
+
font-size: 1rem;
|
|
40
43
|
`;
|
|
41
44
|
const StyledSelectAllCheckbox = styled.div`
|
|
42
45
|
display: flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nexport const StyledHeaderListWrapper = styled.div`\n display: flex;\n position:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,kBAAkB;AAEpB,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQvB,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKb,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjE,MAAM,wBAAwB,OAAO,UAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI/C,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,OAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,7 +15,6 @@ const StyledList = styled.ul`
|
|
|
15
15
|
`;
|
|
16
16
|
const StyledVirtualListWrapper = styled.div`
|
|
17
17
|
overflow-y: auto;
|
|
18
|
-
margin-top: ${({ withHeader }) => withHeader ? "28px" : ""};
|
|
19
18
|
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
20
19
|
`;
|
|
21
20
|
const StyledCreatableLabel = styled.span`
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ;AAAA,WACnE,CAAC,EAAE,MAAM,MAAM,GAAG;AAAA;AAAA,gBAEb,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAI/C,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,
|
|
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;AAAA,WACnE,CAAC,EAAE,MAAM,MAAM,GAAG;AAAA;AAAA,gBAEb,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS;AAAA;AAAA;AAI/C,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,QAAQ;AAAA;AAGpE,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
|
|
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.
|
|
3
|
+
"version": "3.30.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -37,26 +37,26 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-virtual": "~2.10.4",
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
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-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.30.0-next.0",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.30.0-next.0",
|
|
42
|
+
"@elliemae/ds-form-checkbox": "3.30.0-next.0",
|
|
43
|
+
"@elliemae/ds-grid": "3.30.0-next.0",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.30.0-next.0",
|
|
45
|
+
"@elliemae/ds-icons": "3.30.0-next.0",
|
|
46
|
+
"@elliemae/ds-pills-v2": "3.30.0-next.0",
|
|
47
|
+
"@elliemae/ds-popperjs": "3.30.0-next.0",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.30.0-next.0",
|
|
49
|
+
"@elliemae/ds-system": "3.30.0-next.0",
|
|
50
|
+
"@elliemae/ds-truncated-tooltip-text": "3.30.0-next.0",
|
|
51
|
+
"@elliemae/ds-utilities": "3.30.0-next.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
55
55
|
"@elliemae/pui-theme": "~2.7.0",
|
|
56
56
|
"styled-components": "~5.3.9",
|
|
57
57
|
"styled-system": "~5.1.5",
|
|
58
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.
|
|
59
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
58
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.30.0-next.0",
|
|
59
|
+
"@elliemae/ds-monorepo-devops": "3.30.0-next.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"@elliemae/pui-theme": "~2.7.0",
|