@elliemae/ds-form-combobox 3.49.0-rc.2 → 3.49.0-rc.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ComboBoxCTX.js +4 -2
- package/dist/cjs/ComboBoxCTX.js.map +2 -2
- package/dist/cjs/ComboboxDataTestids.js +0 -4
- package/dist/cjs/ComboboxDataTestids.js.map +2 -2
- package/dist/cjs/config/useClickOutside.js +52 -0
- package/dist/cjs/config/useClickOutside.js.map +7 -0
- package/dist/cjs/config/useComboBox.js +7 -3
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/config/useOptionsPerSection.js +56 -0
- package/dist/cjs/config/useOptionsPerSection.js.map +7 -0
- package/dist/cjs/parts/Section.js +92 -0
- package/dist/cjs/parts/Section.js.map +7 -0
- package/dist/cjs/parts/container/Container.js +29 -14
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +6 -4
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls/styled.js +21 -5
- package/dist/cjs/parts/controls/styled.js.map +2 -2
- package/dist/cjs/parts/controls/useOnPillsNavigation.js +3 -3
- package/dist/cjs/parts/controls/useOnPillsNavigation.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +21 -6
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/styled.js +3 -1
- package/dist/cjs/parts/controls-input/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +6 -5
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +22 -9
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +8 -1
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +19 -5
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +3 -3
- package/dist/cjs/react-desc-prop-types.js +3 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/esm/ComboBoxCTX.js +4 -2
- package/dist/esm/ComboBoxCTX.js.map +2 -2
- package/dist/esm/ComboboxDataTestids.js +0 -4
- package/dist/esm/ComboboxDataTestids.js.map +2 -2
- package/dist/esm/config/useClickOutside.js +22 -0
- package/dist/esm/config/useClickOutside.js.map +7 -0
- package/dist/esm/config/useComboBox.js +7 -3
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/config/useOptionsPerSection.js +26 -0
- package/dist/esm/config/useOptionsPerSection.js.map +7 -0
- package/dist/esm/parts/Section.js +62 -0
- package/dist/esm/parts/Section.js.map +7 -0
- package/dist/esm/parts/container/Container.js +30 -15
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +6 -4
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls/styled.js +21 -5
- package/dist/esm/parts/controls/styled.js.map +2 -2
- package/dist/esm/parts/controls/useOnPillsNavigation.js +3 -3
- package/dist/esm/parts/controls/useOnPillsNavigation.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +21 -6
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/styled.js +3 -1
- package/dist/esm/parts/controls-input/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +6 -5
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +23 -10
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +8 -1
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +19 -5
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +3 -3
- package/dist/esm/react-desc-prop-types.js +3 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/types/ComboboxDataTestids.d.ts +0 -4
- package/dist/types/config/useClickOutside.d.ts +1 -0
- package/dist/types/config/useOptionsPerSection.d.ts +2 -0
- package/dist/types/parts/DropdownIndicator.d.ts +1 -0
- package/dist/types/parts/Section.d.ts +14 -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/styled.d.ts +2 -0
- package/dist/types/parts/controls-input/ControlsInput.d.ts +1 -0
- package/dist/types/parts/controls-input/styled.d.ts +3 -1
- package/dist/types/parts/menu-list/MenuList.d.ts +1 -0
- package/dist/types/parts/menu-list/SkeletonContainer.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/dist/types/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +4 -1
- package/dist/types/sharedTypes.d.ts +1 -0
- package/dist/types/tests/read-only.test.d.ts +1 -0
- package/package.json +18 -16
|
@@ -40,21 +40,37 @@ var React = __toESM(require("react"));
|
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
41
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
42
42
|
var import_theming = require("../../theming.js");
|
|
43
|
-
const
|
|
43
|
+
const readOnlyBorder = import_ds_system.css`
|
|
44
|
+
border: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
|
|
45
|
+
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};
|
|
46
|
+
`;
|
|
47
|
+
const borderStyles = import_ds_system.css`
|
|
44
48
|
border: 1px solid ${({ hasError, theme }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
49
|
+
${({ readOnly, applyAriaDisabled }) => readOnly || applyAriaDisabled ? readOnlyBorder : ""}
|
|
50
|
+
`;
|
|
51
|
+
const backgroundStyles = import_ds_system.css`
|
|
52
|
+
background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {
|
|
53
|
+
if (readOnly || applyAriaDisabled) {
|
|
54
|
+
return theme.colors.neutral["050"];
|
|
55
|
+
}
|
|
56
|
+
if (disabled) {
|
|
57
|
+
return theme.colors.neutral["080"];
|
|
58
|
+
}
|
|
59
|
+
return "#ffffff";
|
|
60
|
+
}};
|
|
45
61
|
`;
|
|
46
62
|
const focusBorder = import_ds_system.css`
|
|
47
63
|
outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
48
64
|
outline-offset: -2px;
|
|
49
65
|
`;
|
|
50
66
|
const hoverBorder = import_ds_system.css`
|
|
51
|
-
border: 1px solid ${({ theme }) => theme.colors.brand[
|
|
67
|
+
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
52
68
|
`;
|
|
53
69
|
const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
54
70
|
name: import_theming.DSComboBoxName,
|
|
55
71
|
slot: import_theming.DSComboboxSlots.INPUT_WRAPPER
|
|
56
72
|
})`
|
|
57
|
-
|
|
73
|
+
${backgroundStyles}
|
|
58
74
|
position: relative;
|
|
59
75
|
border-radius: 2px;
|
|
60
76
|
min-width: ${({ minWidth, inline }) => inline || !minWidth ? "" : `${minWidth}px`};
|
|
@@ -66,7 +82,7 @@ const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
|
|
|
66
82
|
padding: 1.25px 0px 1.25px 8px;
|
|
67
83
|
}
|
|
68
84
|
margin: ${({ inline }) => inline ? "10px 16px" : ""};
|
|
69
|
-
${
|
|
85
|
+
${borderStyles}
|
|
70
86
|
&:hover {
|
|
71
87
|
${({ disabled }) => !disabled ? hoverBorder : ""}
|
|
72
88
|
}
|
|
@@ -78,7 +94,7 @@ const StyledSingleSelectWraper = import_ds_system.styled.div`
|
|
|
78
94
|
display: flex;
|
|
79
95
|
width: 100%;
|
|
80
96
|
align-items: center;
|
|
81
|
-
color: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#616b7f" : ""};
|
|
97
|
+
color: ${({ disabled, readOnly, applyAriaDisabled }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : ""};
|
|
82
98
|
user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : ""};
|
|
83
99
|
`;
|
|
84
100
|
const StyledSelection = import_ds_system.styled.div`
|
|
@@ -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, 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 applyAriaDisabled: boolean;\n}\nconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAChC,qBAAqB;AACrB,qBAAgD;
|
|
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 applyAriaDisabled: boolean;\n readOnly: boolean;\n}\n\nconst readOnlyBorder = css`\n border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst borderStyles = css<{ hasError: boolean; readOnly: boolean; applyAriaDisabled: boolean }>`\n border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n ${({ readOnly, applyAriaDisabled }) => (readOnly || applyAriaDisabled ? readOnlyBorder : '')}\n`;\n\nconst backgroundStyles = css<{ disabled: boolean; applyAriaDisabled: boolean; readOnly: boolean }>`\n background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {\n if (readOnly || applyAriaDisabled) {\n return theme.colors.neutral['050'];\n }\n if (disabled) {\n return theme.colors.neutral['080'];\n }\n return '#ffffff';\n }};\n`;\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[600]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n ${backgroundStyles}\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 min-height: 28px;\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 ${borderStyles}\n &:hover {\n ${({ disabled }) => (!disabled ? hoverBorder : '')}\n }\n &:focus-within {\n ${focusBorder}\n }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n}>`\n display: flex;\n width: 100%;\n align-items: center;\n color: ${({ disabled, readOnly, applyAriaDisabled }) => (disabled || applyAriaDisabled || readOnly ? '#616b7f' : '')};\n user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? '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, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? 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;AAWhD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,6BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGrE,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,IAC5G,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,iBAAiB,EAAG;AAAA;AAG9F,MAAM,mBAAmB;AAAA,gBACT,CAAC,EAAE,UAAU,mBAAmB,UAAU,MAAM,MAAM;AAClE,MAAI,YAAY,mBAAmB;AACjC,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,MAAI,UAAU;AACZ,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAGrD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA,IACG,gBAAgB;AAAA;AAAA;AAAA,eAGL,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,oBAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,EAAG;AAAA,IACnD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,UAAU,UAAU,kBAAkB,MAAO,YAAY,qBAAqB,WAAW,YAAY,EAAG;AAAA,iBACrG,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,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,UAAU,kBAAkB,MACxD,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,12 +41,12 @@ const useOnPillsNavigation = () => {
|
|
|
41
41
|
hasFocus,
|
|
42
42
|
setMenuState,
|
|
43
43
|
selectedOptionsRef,
|
|
44
|
-
props: { applyAriaDisabled }
|
|
44
|
+
props: { applyAriaDisabled, readOnly }
|
|
45
45
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
46
46
|
const REMOVABLE_PILL_SELECTOR = ".ds-pill-wrapper-removable button";
|
|
47
47
|
const onKeyDownPills = (0, import_react.useCallback)(
|
|
48
48
|
(e) => {
|
|
49
|
-
if (applyAriaDisabled) {
|
|
49
|
+
if (applyAriaDisabled || readOnly) {
|
|
50
50
|
return;
|
|
51
51
|
}
|
|
52
52
|
if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
|
|
@@ -67,7 +67,7 @@ const useOnPillsNavigation = () => {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
|
-
[inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled]
|
|
70
|
+
[inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled, readOnly]
|
|
71
71
|
);
|
|
72
72
|
return { onKeyDownPills };
|
|
73
73
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/useOnPillsNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nexport const useOnPillsNavigation = () => {\n const {\n internalRef,\n inputValue,\n hasFocus,\n setMenuState,\n selectedOptionsRef,\n props: { applyAriaDisabled },\n } = useContext(ComboBoxContext);\n\n // todo: constant must be defined on pills component\n const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';\n\n const onKeyDownPills: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (applyAriaDisabled) {\n return;\n }\n if (\n (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n inputValue === ''\n ) {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n internalRef.current?.focus();\n setMenuState(true, 'open', e);\n return;\n }\n if (e.key === 'ArrowLeft') {\n const removablePills: NodeListOf<HTMLButtonElement> | undefined =\n selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);\n\n if (hasFocus && removablePills) {\n removablePills[removablePills.length - 1]?.focus();\n }\n }\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n internalRef.current?.focus();\n }\n }\n },\n [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled],\n );\n\n return { onKeyDownPills };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAwC;AACxC,yBAA4B;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nexport const useOnPillsNavigation = () => {\n const {\n internalRef,\n inputValue,\n hasFocus,\n setMenuState,\n selectedOptionsRef,\n props: { applyAriaDisabled, readOnly },\n } = useContext(ComboBoxContext);\n\n // todo: constant must be defined on pills component\n const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';\n\n const onKeyDownPills: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (applyAriaDisabled || readOnly) {\n return;\n }\n if (\n (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n inputValue === ''\n ) {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n internalRef.current?.focus();\n setMenuState(true, 'open', e);\n return;\n }\n if (e.key === 'ArrowLeft') {\n const removablePills: NodeListOf<HTMLButtonElement> | undefined =\n selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);\n\n if (hasFocus && removablePills) {\n removablePills[removablePills.length - 1]?.focus();\n }\n }\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n internalRef.current?.focus();\n }\n }\n },\n [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled, readOnly],\n );\n\n return { onKeyDownPills };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAwC;AACxC,yBAA4B;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,mBAAmB,SAAS;AAAA,EACvC,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,qBAAqB,UAAU;AACjC;AAAA,MACF;AACA,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,sBAAY,SAAS,MAAM;AAC3B,uBAAa,MAAM,QAAQ,CAAC;AAC5B;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,aAAa;AACzB,gBAAM,iBACJ,mBAAmB,SAAS,iBAAiB,uBAAuB;AAEtE,cAAI,YAAY,gBAAgB;AAC9B,2BAAe,eAAe,SAAS,CAAC,GAAG,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,sBAAY,SAAS,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,cAAc,oBAAoB,UAAU,mBAAmB,QAAQ;AAAA,EACnG;AAEA,SAAO,EAAE,eAAe;AAC1B;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -55,6 +55,7 @@ const ControlsInput = () => {
|
|
|
55
55
|
isLoading,
|
|
56
56
|
onlySelectable,
|
|
57
57
|
applyAriaDisabled,
|
|
58
|
+
readOnly,
|
|
58
59
|
...restProps
|
|
59
60
|
},
|
|
60
61
|
focusOptionIdx,
|
|
@@ -84,13 +85,16 @@ const ControlsInput = () => {
|
|
|
84
85
|
}, [ariaDescribedBy, id]);
|
|
85
86
|
const currentPlaceholder = (0, import_react.useMemo)(() => {
|
|
86
87
|
if ((0, import_listHelper.isArrayOfItems)(selectedValues)) {
|
|
87
|
-
return `options ${selectedValues.map((item) => item.label).join(", ")} selected`;
|
|
88
|
+
return `options ${selectedValues.map((item) => item.label).join(", ")} selected. ${readOnly ? "Read only" : ""}`;
|
|
88
89
|
}
|
|
89
90
|
if (typeof selectedValues?.label === "string") {
|
|
90
|
-
return `option ${selectedValues.label} selected`;
|
|
91
|
+
return `option ${selectedValues.label} selected. ${readOnly ? "Read only" : ""}`;
|
|
92
|
+
}
|
|
93
|
+
if (readOnly) {
|
|
94
|
+
return `${placeholder}. Read only`;
|
|
91
95
|
}
|
|
92
96
|
return placeholder;
|
|
93
|
-
}, [placeholder, selectedValues]);
|
|
97
|
+
}, [placeholder, selectedValues, readOnly]);
|
|
94
98
|
const activeDescendant = (0, import_react.useMemo)(() => {
|
|
95
99
|
if (!isLoading && hasFocus && menuState) {
|
|
96
100
|
return focusOptionIdx;
|
|
@@ -112,7 +116,7 @@ const ControlsInput = () => {
|
|
|
112
116
|
{
|
|
113
117
|
onBlur: handleOnBlur,
|
|
114
118
|
onFocus: handleOnFocus,
|
|
115
|
-
readOnly: onlySelectable,
|
|
119
|
+
readOnly: readOnly || onlySelectable,
|
|
116
120
|
...globalAttrs,
|
|
117
121
|
id,
|
|
118
122
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
|
|
@@ -134,10 +138,21 @@ const ControlsInput = () => {
|
|
|
134
138
|
onChange: handleOnChange,
|
|
135
139
|
tabIndex,
|
|
136
140
|
withoutCaret: onlySelectable,
|
|
137
|
-
autoComplete: "off"
|
|
141
|
+
autoComplete: "off",
|
|
142
|
+
"aria-readonly": readOnly
|
|
138
143
|
}
|
|
139
144
|
),
|
|
140
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
146
|
+
import_styled.StyleHiddenInput,
|
|
147
|
+
{
|
|
148
|
+
type: "text",
|
|
149
|
+
name: "hidden",
|
|
150
|
+
tabIndex: -1,
|
|
151
|
+
onPaste: handleOnPaste,
|
|
152
|
+
"aria-hidden": "true",
|
|
153
|
+
isDisabled: disabled || applyAriaDisabled
|
|
154
|
+
}
|
|
155
|
+
)
|
|
141
156
|
] });
|
|
142
157
|
};
|
|
143
158
|
//# sourceMappingURL=ControlsInput.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n StyledInput,\n StyledInputWrapper,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledHiddenDiv,\n StyleHiddenInput,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n const currentPlaceholder = useMemo(() => {\n if (isArrayOfItems(selectedValues)) {\n return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n }\n if (typeof selectedValues?.label === 'string') {\n return `option ${selectedValues.label} selected`;\n }\n return placeholder;\n }, [placeholder, selectedValues]);\n\n const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n setInputValue(e.clipboardData.getData('text/plain'));\n internalRef.current?.focus();\n };\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder aria-hidden=\"true\">\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n {/* Fix for PUI-11597 */}\n {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n {/* Fix for PUI-9609 */}\n <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={currentPlaceholder}\n aria-activedescendant={activeDescendant}\n aria-expanded={menuState}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-describedby={actualAriaDescribedBy}\n aria-autocomplete=\"list\"\n role=\"combobox\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n style={{ width }}\n innerRef={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n autoComplete=\"off\"\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n StyledInput,\n StyledInputWrapper,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledHiddenDiv,\n StyleHiddenInput,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n const currentPlaceholder = useMemo(() => {\n if (isArrayOfItems(selectedValues)) {\n return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (typeof selectedValues?.label === 'string') {\n return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (readOnly) {\n return `${placeholder}. Read only`;\n }\n return placeholder;\n }, [placeholder, selectedValues, readOnly]);\n\n const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n setInputValue(e.clipboardData.getData('text/plain'));\n internalRef.current?.focus();\n };\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder aria-hidden=\"true\">\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n {/* Fix for PUI-11597 */}\n {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n {/* Fix for PUI-9609 */}\n <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={readOnly || onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={currentPlaceholder}\n aria-activedescendant={activeDescendant}\n aria-expanded={menuState}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-describedby={actualAriaDescribedBy}\n aria-autocomplete=\"list\"\n role=\"combobox\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n style={{ width }}\n innerRef={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n name=\"hidden\"\n tabIndex={-1}\n onPaste={handleOnPaste}\n aria-hidden=\"true\"\n isDisabled={disabled || applyAriaDisabled}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -52,12 +52,14 @@ const StyleHiddenInput = (0, import_ds_system.styled)("input")`
|
|
|
52
52
|
&:focus {
|
|
53
53
|
outline: none;
|
|
54
54
|
}
|
|
55
|
+
${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}
|
|
55
56
|
`;
|
|
56
57
|
const StyledInput = (0, import_ds_system.styled)("input", {
|
|
57
58
|
name: import_theming.DSComboBoxName,
|
|
58
59
|
slot: import_theming.DSComboboxSlots.INPUT
|
|
59
60
|
})`
|
|
60
61
|
line-height: 1rem;
|
|
62
|
+
background: transparent;
|
|
61
63
|
font-size: 1rem;
|
|
62
64
|
border: none;
|
|
63
65
|
overflow: hidden;
|
|
@@ -72,7 +74,7 @@ const StyledInput = (0, import_ds_system.styled)("input", {
|
|
|
72
74
|
&::placeholder {
|
|
73
75
|
color: transparent;
|
|
74
76
|
}
|
|
75
|
-
${({ applyAriaDisabled
|
|
77
|
+
${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}
|
|
76
78
|
`;
|
|
77
79
|
const StyledInputPlaceHolder = import_ds_system.styled.div`
|
|
78
80
|
font-style: italic;
|
|
@@ -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 StyleHiddenInput = styled('input')
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n line-height: 1rem;\n background: transparent;\n font-size: 1rem;\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 ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\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 overflow: hidden;\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;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,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,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ var import_react = require("react");
|
|
|
36
36
|
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
37
37
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
38
38
|
var import_constants = require("../../constants.js");
|
|
39
|
-
const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type)
|
|
39
|
+
const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
|
|
40
40
|
const optionHasFirstLetter = (opt, letter) => opt.label !== void 0 && opt.label.toLowerCase().startsWith(letter.toLowerCase());
|
|
41
41
|
const useKeyboardNavigation = () => {
|
|
42
42
|
const {
|
|
@@ -53,7 +53,8 @@ const useKeyboardNavigation = () => {
|
|
|
53
53
|
selectedValues,
|
|
54
54
|
withoutPortal,
|
|
55
55
|
onlySelectable,
|
|
56
|
-
applyAriaDisabled
|
|
56
|
+
applyAriaDisabled,
|
|
57
|
+
readOnly
|
|
57
58
|
},
|
|
58
59
|
inputValue,
|
|
59
60
|
correctOptions: filteredOptions,
|
|
@@ -71,7 +72,7 @@ const useKeyboardNavigation = () => {
|
|
|
71
72
|
const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
|
|
72
73
|
const onInputKeyDown = (0, import_react.useCallback)(
|
|
73
74
|
(e) => {
|
|
74
|
-
if (applyAriaDisabled) return;
|
|
75
|
+
if (applyAriaDisabled || readOnly) return;
|
|
75
76
|
if (onKeyDown && currentItem?.type === import_constants.MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
|
|
76
77
|
if ((["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) && !menuState) {
|
|
77
78
|
setMenuState(true, import_constants.MENU_CONTROL_REASONS.OPEN, e);
|
|
@@ -92,7 +93,7 @@ const useKeyboardNavigation = () => {
|
|
|
92
93
|
return;
|
|
93
94
|
}
|
|
94
95
|
if (e.key === "Enter" || e.keyCode === 32 && e.altKey || e.key === "Tab" && !multiple && !inline) {
|
|
95
|
-
if (currentItem?.applyAriaDisabled) return;
|
|
96
|
+
if (readOnly || currentItem?.applyAriaDisabled) return;
|
|
96
97
|
if (e.key !== "Tab") e.preventDefault();
|
|
97
98
|
e.stopPropagation();
|
|
98
99
|
if (focusOptionIdx !== "" && (menuState || inline) && currentItem?.type === import_constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
|
|
@@ -149,6 +150,7 @@ const useKeyboardNavigation = () => {
|
|
|
149
150
|
}
|
|
150
151
|
}
|
|
151
152
|
if (e.key === "Backspace" && e.currentTarget.value.length <= 0 && !inline) {
|
|
153
|
+
if (readOnly) return;
|
|
152
154
|
const lastValue = (0, import_listHelper.getLastValueSelected)(selectedValues);
|
|
153
155
|
if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {
|
|
154
156
|
onChange((0, import_listHelper.getSuggestedValueOnChange)(lastValue, selectedValues), lastValue, e);
|
|
@@ -164,7 +166,6 @@ const useKeyboardNavigation = () => {
|
|
|
164
166
|
const isOptionFocusableByLetter = (opt) => isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);
|
|
165
167
|
const nextItemIndexIndex = (0, import_listHelper.findInCircularList)(filteredOptions, currentItemIndex, isOptionFocusableByLetter);
|
|
166
168
|
const nextItem = filteredOptions[nextItemIndexIndex];
|
|
167
|
-
console.log("nextItem", nextItem);
|
|
168
169
|
if (!nextItem) return;
|
|
169
170
|
setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);
|
|
170
171
|
scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n findInCircularList,\n getOptions,\n getSuggestedValueOnChange,\n getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AAExC,yBAAgC;AAChC,wBAKO;AACP,uBAAoF;AACpF,MAAM,qBAAqB,CAAC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n findInCircularList,\n getOptions,\n getSuggestedValueOnChange,\n getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\nexport const useKeyboardNavigation = () => {\n const {\n props: {\n allOptions,\n isNonClearable,\n onCancel,\n onKeyDown,\n onChange,\n onCreate,\n onFilter,\n onSelectAll,\n inline,\n selectedValues,\n withoutPortal,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n },\n inputValue,\n correctOptions: filteredOptions,\n menuState,\n focusOptionIdx,\n listRef,\n setMenuState,\n setInputValue,\n scrollOptionIntoView,\n setFocusOptionIdx,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n const selectableOptions = getOptions(filteredOptions);\n const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (applyAriaDisabled || readOnly) return;\n\n // =============================================================================\n // CUSTOM KEYS\n // =============================================================================\n if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n if (\n (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || (e.keyCode >= 48 && e.keyCode <= 90)) &&\n !menuState\n ) {\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n }\n // =============================================================================\n // ESCAPE\n // =============================================================================\n if (e.key === 'Escape') {\n if (onCancel) onCancel();\n if (inputValue) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n }\n if (!inline) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\n }\n // =============================================================================\n // ENTER KEY TO CREATE ELEMENTS\n // =============================================================================\n if (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n onCreate(inputValue);\n // blank active item to force search last one\n setFocusOptionIdx('');\n if (onFilter) onFilter(allOptions, '');\n setInputValue('');\n return;\n }\n\n // =============================================================================\n // Enter, space and Tab on selection\n // =============================================================================\n if (e.key === 'Enter' || (e.keyCode === 32 && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n if (readOnly || currentItem?.applyAriaDisabled) return;\n\n if (e.key !== 'Tab') e.preventDefault();\n e.stopPropagation();\n\n if (\n focusOptionIdx !== '' &&\n (menuState || inline) &&\n currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n !currentItem.disabled\n ) {\n if (onFilter) onFilter(allOptions, '');\n setInputValue('');\n if (!multiple) {\n setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n }\n onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n }\n }\n\n if (e.key === 'Enter' && e.altKey) {\n setMenuState(false, 'selectOption', e);\n }\n\n if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n }\n // =============================================================================\n // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n // =============================================================================\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n if ((menuState || inline) && (selectableOptions.length || onCreate)) {\n const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n if (nextItemIndexIndex > -1) {\n setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n }\n }\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n if (!selectableOptions.length && !onCreate) return;\n const prevItemIndex = findInCircularList(\n filteredOptions,\n currentItemIndex === -1 ? 0 : currentItemIndex,\n isOptionFocuseable,\n -1,\n );\n if (prevItemIndex > -1) {\n if (menuState || inline) {\n setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n } else {\n // open menu and search last item to focused\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n setTimeout(() => {\n scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n });\n }\n }\n }\n\n // =============================================================================\n // BACKSPACE\n // =============================================================================\n if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n if (readOnly) return;\n const lastValue = getLastValueSelected(selectedValues);\n if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {\n onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n }\n }\n\n if (e.key === 'Tab' && !inline && menuState) {\n setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n }\n\n // =============================================================================\n // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n // =============================================================================\n\n if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n if (!menuState) {\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n }\n\n const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n const nextItem = filteredOptions[nextItemIndexIndex];\n if (!nextItem) return;\n setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n onKeyDown,\n currentItem,\n onCreate,\n multiple,\n inputValue,\n inline,\n withoutPortal,\n setMenuState,\n onCancel,\n onFilter,\n setInputValue,\n listRef,\n focusOptionIdx,\n menuState,\n selectableOptions.length,\n filteredOptions,\n currentItemIndex,\n setFocusOptionIdx,\n selectedValues,\n onChange,\n isNonClearable,\n ],\n );\n\n return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
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_grid = require("@elliemae/ds-grid");
|
|
38
38
|
var import_ds_menu_items = require("@elliemae/ds-menu-items");
|
|
39
|
+
var import_Section = require("../Section.js");
|
|
39
40
|
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
40
41
|
var import_styled = require("./styled.js");
|
|
41
42
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
@@ -43,13 +44,13 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
|
43
44
|
var import_constants = require("../../constants.js");
|
|
44
45
|
const useItemRenderer = () => {
|
|
45
46
|
const {
|
|
46
|
-
props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },
|
|
47
|
+
props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
|
|
47
48
|
setMenuState,
|
|
48
49
|
inputValue,
|
|
49
50
|
focusOptionIdx,
|
|
50
51
|
setInputValue,
|
|
51
52
|
virtualListHelpers,
|
|
52
|
-
|
|
53
|
+
optionsPerSection
|
|
53
54
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
54
55
|
const multiple = Array.isArray(selectedValues);
|
|
55
56
|
const CBItem = multiple ? import_ds_menu_items.MultiMenuItem : import_ds_menu_items.SingleMenuItem;
|
|
@@ -62,6 +63,7 @@ const useItemRenderer = () => {
|
|
|
62
63
|
}, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
|
|
63
64
|
const handleClick = (0, import_react.useCallback)(
|
|
64
65
|
(option, e) => {
|
|
66
|
+
if (readOnly) return;
|
|
65
67
|
if (option.type === import_constants.MENU_OPTION_TYPES.OPTION) {
|
|
66
68
|
if (!option.disabled) {
|
|
67
69
|
if (onFilter) onFilter(allOptions, inputValue);
|
|
@@ -85,8 +87,8 @@ const useItemRenderer = () => {
|
|
|
85
87
|
return null;
|
|
86
88
|
}
|
|
87
89
|
return virtualListHelpers.virtualItems.map((vItem) => {
|
|
88
|
-
const option =
|
|
89
|
-
const { dsId, type, disabled, applyAriaDisabled, ...rest } = option;
|
|
90
|
+
const option = optionsPerSection[vItem.index];
|
|
91
|
+
const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;
|
|
90
92
|
const generalProps = {
|
|
91
93
|
wrapperStyles: {
|
|
92
94
|
position: "absolute",
|
|
@@ -95,15 +97,26 @@ const useItemRenderer = () => {
|
|
|
95
97
|
width: "100%",
|
|
96
98
|
transform: `translateY(${vItem.start}px)`
|
|
97
99
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
+
// 'aria-setsize': `${allOptions.length}`,
|
|
101
|
+
// 'aria-posinset': `${vItem.index + 1}`,
|
|
100
102
|
key: `${dsId}`,
|
|
101
103
|
innerRef: vItem.measureRef,
|
|
102
104
|
dsId: dsId.toString(),
|
|
103
105
|
...rest
|
|
104
106
|
};
|
|
105
107
|
if (type === import_constants.MENU_OPTION_TYPES.SECTION) {
|
|
106
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
+
import_Section.Section,
|
|
110
|
+
{
|
|
111
|
+
label: option.label,
|
|
112
|
+
...generalProps,
|
|
113
|
+
options: option.options,
|
|
114
|
+
handleClick,
|
|
115
|
+
focusOptionIdx,
|
|
116
|
+
handleOnMouseDown,
|
|
117
|
+
selectedValues
|
|
118
|
+
}
|
|
119
|
+
);
|
|
107
120
|
}
|
|
108
121
|
if (type === import_constants.MENU_OPTION_TYPES.SEPARATOR) {
|
|
109
122
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Separator, { ...generalProps, render: void 0 });
|
|
@@ -117,7 +130,7 @@ const useItemRenderer = () => {
|
|
|
117
130
|
label: option.label,
|
|
118
131
|
dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
|
|
119
132
|
disabled,
|
|
120
|
-
applyAriaDisabled,
|
|
133
|
+
applyAriaDisabled: applyAriaDisabled || itemReadOnly,
|
|
121
134
|
onClick: (e) => {
|
|
122
135
|
if (applyAriaDisabled) return;
|
|
123
136
|
handleClick(option, e);
|
|
@@ -147,6 +160,6 @@ const useItemRenderer = () => {
|
|
|
147
160
|
}
|
|
148
161
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
|
|
149
162
|
});
|
|
150
|
-
}, [
|
|
163
|
+
}, [focusOptionIdx, selectedValues, virtualListHelpers]);
|
|
151
164
|
};
|
|
152
165
|
//# sourceMappingURL=useItemRenderer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n setMenuState,\n inputValue,\n focusOptionIdx,\n setInputValue,\n virtualListHelpers,\n optionsPerSection,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n const handleOnCreateClick = useCallback(() => {\n if (inputValue && onCreate) {\n onCreate(inputValue);\n setInputValue('');\n if (onFilter) onFilter(allOptions, inputValue);\n }\n }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n const handleClick = useCallback(\n (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n if (readOnly) return;\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n if (!option.disabled) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n if (!multiple) {\n setMenuState(false, 'selectOption', e);\n }\n onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n }\n }\n // prevent for loosing focus on input control\n e.stopPropagation();\n e.preventDefault();\n },\n [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n );\n\n // prevent blur from controls input\n const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n }, []);\n\n return useMemo(() => {\n if (!virtualListHelpers) {\n return null;\n }\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = optionsPerSection[vItem.index];\n const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n const generalProps = {\n wrapperStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${vItem.start}px)`,\n },\n // 'aria-setsize': `${allOptions.length}`,\n // 'aria-posinset': `${vItem.index + 1}`,\n key: `${dsId}`,\n innerRef: vItem.measureRef,\n dsId: dsId.toString(),\n ...rest,\n };\n if (type === MENU_OPTION_TYPES.SECTION) {\n return (\n <Section\n label={option.label}\n {...generalProps}\n options={option.options}\n handleClick={handleClick}\n focusOptionIdx={focusOptionIdx}\n handleOnMouseDown={handleOnMouseDown}\n selectedValues={selectedValues}\n />\n );\n }\n if (type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator {...generalProps} render={undefined} />;\n }\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n return (\n <CBItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n onClick={(e: React.MouseEvent) => {\n if (applyAriaDisabled) return;\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <SingleMenuItem\n dataTestid={ComboboxDataTestid.OPTION}\n isActive={dsId === focusOptionIdx}\n {...generalProps}\n render={({ label: labelCreatable }: { label?: string }) => (\n <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n <StyledCreatableLabel>Add:</StyledCreatableLabel>\n <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n </Grid>\n )}\n label={option.label}\n onClick={handleOnCreateClick}\n />\n );\n }\n return <></>;\n });\n }, [focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -53,7 +53,14 @@ const MultiSelectedValuesContainer = () => {
|
|
|
53
53
|
style: { width: multiSelectedValue.length > 0 ? "max-content" : "0px" },
|
|
54
54
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
|
|
55
55
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { innerRef: pillGroupRef, children: [
|
|
56
|
-
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
57
|
+
import_RemovableSelectedValuePill.RemovableSelectedValuePill,
|
|
58
|
+
{
|
|
59
|
+
pill,
|
|
60
|
+
trailingComma: (disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
61
|
+
},
|
|
62
|
+
pill.dsId
|
|
63
|
+
)),
|
|
57
64
|
multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
65
|
import_ds_pills_v2.DSPillV2,
|
|
59
66
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill, idx) => (\n <RemovableSelectedValuePill\n key={pill.dsId}\n pill={pill}\n trailingComma={\n ((disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow) ||\n (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n }\n />\n ))}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabledToContainer}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBf;AAxBR,mBAA2C;AAC3C,yBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,6BAA6B;AAAA,IACnF;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AAEzC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,oCAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,iCAAiC,MAAM,IAAI,sBACxD,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA;AAAA,YAJzE,KAAK;AAAA,UAMZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA;AAAA,YAJf;AAAA,UAKN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,4BAA4B;AAAA,EAC/F;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|