@elliemae/ds-form-combobox 3.51.0-rc.0 → 3.51.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/DropdownIndicator.js +1 -1
- package/dist/cjs/parts/DropdownIndicator.js.map +1 -1
- package/dist/cjs/parts/container/styled.js +1 -0
- package/dist/cjs/parts/container/styled.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +3 -3
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls/styled.js +2 -2
- package/dist/cjs/parts/controls/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +0 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DropdownIndicator.js +1 -1
- package/dist/esm/parts/DropdownIndicator.js.map +1 -1
- package/dist/esm/parts/container/styled.js +1 -0
- package/dist/esm/parts/container/styled.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +3 -3
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls/styled.js +2 -2
- package/dist/esm/parts/controls/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +0 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +0 -2
- package/package.json +14 -14
|
@@ -48,7 +48,7 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DS
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
& svg {
|
|
51
|
-
fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["
|
|
51
|
+
fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}
|
|
@@ -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)<{ applyAriaDisabled: boolean }>`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['
|
|
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)<{ applyAriaDisabled: boolean }>`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n }\n\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled, applyAriaDisabled, readOnly },\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 readOnly={readOnly}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n size=\"s\"\n applyAriaDisabled={applyAriaDisabled}\n >\n <ChevronSmallDown size=\"s\" />\n </StyledDropDownButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDjB;AAnDN,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,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,mBAAmB,SAAS;AAAA,IAC/C;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,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -42,6 +42,7 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
42
42
|
position: relative;
|
|
43
43
|
cursor: ${({ disabled }) => disabled ? "not-allowed" : "default"};
|
|
44
44
|
cursor: ${({ applyAriaDisabled }) => applyAriaDisabled ? "not-allowed" : "default"};
|
|
45
|
+
min-width: 64px;
|
|
45
46
|
${import_ds_system.xStyledCommonProps}
|
|
46
47
|
`;
|
|
47
48
|
const StyledPopperWrapper = (0, import_ds_system.styled)("div")`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nimport type {} from '@xstyled/system';\n\nexport const StyledContainer = styled('div', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.CONTAINER,\n})<XstyledProps & { disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')<{ disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n overflow: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,qBAAgD;AAIzC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA,
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nimport type {} from '@xstyled/system';\n\nexport const StyledContainer = styled('div', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.CONTAINER,\n})<XstyledProps & { disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n min-width: 64px;\n ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')<{ disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n overflow: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,qBAAgD;AAIzC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA,IAElF,mCAAkB;AAAA;AAGf,MAAM,0BAAsB,yBAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ var import_ControlsInput = require("../controls-input/ControlsInput.js");
|
|
|
44
44
|
var import_useOnPillsNavigation = require("./useOnPillsNavigation.js");
|
|
45
45
|
const Controls = () => {
|
|
46
46
|
const {
|
|
47
|
-
props: { inline, disabled,
|
|
47
|
+
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly },
|
|
48
48
|
selectedOptionsRef,
|
|
49
49
|
setMenuState,
|
|
50
50
|
setFocusOptionIdx,
|
|
@@ -93,7 +93,7 @@ const Controls = () => {
|
|
|
93
93
|
);
|
|
94
94
|
const { onKeyDownPills } = (0, import_useOnPillsNavigation.useOnPillsNavigation)();
|
|
95
95
|
const cols = (0, import_react.useMemo)(
|
|
96
|
-
() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "2.231rem"] : ["minmax(0px, auto)"],
|
|
96
|
+
() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "8px", "2.231rem"] : ["minmax(0px, auto)"],
|
|
97
97
|
[inline]
|
|
98
98
|
);
|
|
99
99
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -104,7 +104,6 @@ const Controls = () => {
|
|
|
104
104
|
cols,
|
|
105
105
|
disabled,
|
|
106
106
|
applyAriaDisabled,
|
|
107
|
-
minWidth: inputMinWidth,
|
|
108
107
|
hasError,
|
|
109
108
|
inline,
|
|
110
109
|
onClick: handleOnClick,
|
|
@@ -124,6 +123,7 @@ const Controls = () => {
|
|
|
124
123
|
}
|
|
125
124
|
) }),
|
|
126
125
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
127
127
|
!inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
128
128
|
import_styled.StyledHeaderActionsWrapper,
|
|
129
129
|
{
|
|
@@ -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,
|
|
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, hasError, selectedValues, applyAriaDisabled, readOnly },\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 (applyAriaDisabled) {\n internalRef.current?.focus();\n return;\n }\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 (applyAriaDisabled) return;\n if (menuState || disabled || readOnly) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, readOnly, internalRef, 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(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n readOnly={readOnly}\n cols={cols}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n aria-disabled={applyAriaDisabled}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper\n readOnly={readOnly}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {/** This empty div is a gap between the input and the drop down indicator */}\n <div />\n {!inline && (\n <StyledHeaderActionsWrapper\n justifyItems=\"center\"\n cols={['min-content', 'minmax(28px,max-content)']}\n justifyContent=\"flex-end\"\n >\n <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\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;ADmGX;AAjGZ,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,UAAU,gBAAgB,mBAAmB,SAAS;AAAA,IACjF;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,SAAU;AACd,QAAI,mBAAmB;AACrB,kBAAY,SAAS,MAAM;AAC3B;AAAA,IACF;AACA,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,kBAAmB;AACvB,UAAI,aAAa,YAAY,UAAU;AACrC,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,WAAW,UAAU,UAAU,aAAa,YAAY;AAAA,EAC9E;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;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,OAAO,UAAU,IAAI,CAAC,mBAAmB;AAAA,IAC5G,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,iBAAe;AAAA,MACf,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,8CAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YAEC,4BAAkB,eAAe,KAAK,4CAAC,+DAA2B,OAAO,eAAe,OAAO,IAAK;AAAA;AAAA,QACvG,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QAEf,4CAAC,SAAI;AAAA,QACJ,CAAC,UACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAa;AAAA,YACb,MAAM,CAAC,eAAe,0BAA0B;AAAA,YAChD,gBAAe;AAAA,YAEf;AAAA,0DAAC,6CAA4B,UAAoB,mBAAsC,UAAoB;AAAA,cAC3G,4CAAC,8CAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -94,7 +94,7 @@ const StyledSingleSelectWraper = import_ds_system.styled.div`
|
|
|
94
94
|
display: flex;
|
|
95
95
|
width: 100%;
|
|
96
96
|
align-items: center;
|
|
97
|
-
color: ${({ disabled, readOnly,
|
|
97
|
+
color: ${({ disabled, readOnly, theme }) => disabled || readOnly ? theme.colors.neutral["600"] : theme.colors.neutral["700"]};
|
|
98
98
|
user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : ""};
|
|
99
99
|
`;
|
|
100
100
|
const StyledSelection = import_ds_system.styled.div`
|
|
@@ -112,6 +112,6 @@ const StyleDropdownIndicator = import_ds_system.styled.div``;
|
|
|
112
112
|
const StyleHeaderActionsSeparator = import_ds_system.styled.span`
|
|
113
113
|
height: 100%;
|
|
114
114
|
width: 1px;
|
|
115
|
-
background-color: ${({ theme
|
|
115
|
+
background-color: ${({ theme }) => theme.colors.neutral["400"]};
|
|
116
116
|
`;
|
|
117
117
|
//# sourceMappingURL=styled.js.map
|
|
@@ -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 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,
|
|
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,
|
|
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, theme }) =>\n disabled || readOnly ? theme.colors.neutral['600'] : theme.colors.neutral['700']};\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 }) => theme.colors.neutral['400']};\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,MAAM,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACnE,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,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -72,7 +72,7 @@ const useKeyboardNavigation = () => {
|
|
|
72
72
|
const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
|
|
73
73
|
const onInputKeyDown = (0, import_react.useCallback)(
|
|
74
74
|
(e) => {
|
|
75
|
-
if (applyAriaDisabled
|
|
75
|
+
if (applyAriaDisabled) return;
|
|
76
76
|
if (onKeyDown && currentItem?.type === import_constants.MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
|
|
77
77
|
if ((["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) || /^[a-zA-Z0-9]$/.test(e.key)) && !menuState) {
|
|
78
78
|
setMenuState(true, import_constants.MENU_CONTROL_REASONS.OPEN, e);
|
|
@@ -85,7 +85,7 @@ const useKeyboardNavigation = () => {
|
|
|
85
85
|
}
|
|
86
86
|
if (!inline) setMenuState(false, import_constants.MENU_CONTROL_REASONS.CLOSE, e);
|
|
87
87
|
}
|
|
88
|
-
if (e.key === "Enter" && currentItem?.type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
|
|
88
|
+
if (!readOnly && e.key === "Enter" && currentItem?.type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
|
|
89
89
|
onCreate(inputValue);
|
|
90
90
|
setFocusOptionIdx("");
|
|
91
91
|
if (onFilter) onFilter(allOptions, "");
|
|
@@ -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 => !['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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AAExC,yBAAgC;AAChC,wBAKO;AACP,uBAAoF;AACpF,MAAM,qBAAqB,CAAC,QAA0C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAEjH,MAAM,uBAAuB,CAAC,KAA8B,WAC1D,IAAI,UAAU,UAAa,IAAI,MAAM,YAAY,EAAE,WAAW,OAAO,YAAY,CAAC;AAC7E,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,wBAAoB,8BAAW,eAAe;AACpD,QAAM,mBAAmB,gBAAgB,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AACvF,QAAM,cAAc,gBAAgB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc;AAE/E,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,
|
|
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) 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) || /^[a-zA-Z0-9]$/.test(e.key)) &&\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 (!readOnly && 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.key === ' ' && 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
|
}
|
|
@@ -55,7 +55,6 @@ const ComboboxPropTypes = {
|
|
|
55
55
|
).defaultValue(""),
|
|
56
56
|
onCancel: import_ds_props_helpers.PropTypes.func.description("function triggered when user press ESC key").defaultValue("() => {}"),
|
|
57
57
|
onMenuChange: import_ds_props_helpers.PropTypes.func.description("function triggered when user open or close the menu list").defaultValue("() => {}"),
|
|
58
|
-
inputMinWidth: import_ds_props_helpers.PropTypes.any.description("Minimum width for the combo box input controller").defaultValue(void 0),
|
|
59
58
|
menuMinWidth: import_ds_props_helpers.PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
|
|
60
59
|
menuMaxHeight: import_ds_props_helpers.PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
|
|
61
60
|
withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether the combobox menu is rendered in a portal or not").defaultValue(false),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAqD;AAO9C,SAAS,QAA6B,OAAgB;AAAC;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n menuMinWidth?: SizingProps['minWidth'];\n menuMaxHeight?: SizingProps['maxHeight'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n isLoading?: boolean;\n popperProps?: DSFloatingWrapperT.Props;\n }\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n selectedValues: SelectedOptionsT;\n onChange: (\n suggestedValue: SelectedOptionsT,\n selectedOption: ItemOption,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: DSPopperJST.PopperPlacementsT;\n placementOrderPreference: DSPopperJST.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n type ActionRefVirtualized = {\n scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;\n };\n}\n\nexport const ComboboxPropTypes = {\n ...globalAttributesPropTypes,\n placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of original options')\n .defaultValue([]),\n filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .description('List of filtered options to show in the menu based on the current internal input filter value')\n .defaultValue([]),\n selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n 'Array of option or single option selected',\n ),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering')\n .defaultValue('No Matches Found'),\n onChange: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue('() => {}'),\n onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n onCreate: PropTypes.func\n .description(\n 'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n )\n .defaultValue(''),\n onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n onMenuChange: PropTypes.func\n .description('function triggered when user open or close the menu list')\n .defaultValue('() => {}'),\n menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n withoutPortal: PropTypes.bool\n .description('Whether the combobox menu is rendered in a portal or not')\n .defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n onlySelectable: PropTypes.bool.description('filtering is disabled'),\n isSkeleton: PropTypes.bool.description('whether or not the component is in skeleton state').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description('Makes the component non-editable while remaining accessible.')\n .defaultValue(false),\n onSelectAll: PropTypes.func\n .description('function triggered when user select all the options')\n .defaultValue('() => {}')\n .deprecated({ version: '25.2' }),\n popperProps: PropTypes.object\n .description('props to be passed to the FloatingWrapper component')\n .defaultValue(undefined),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAqD;AAO9C,SAAS,QAA6B,OAAgB;AAAC;AAmGvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,GAAG,kCAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,kCAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,kCAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,cAAc,kCAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,kCAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,kCAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,uBAAuB;AAAA,EAClE,YAAY,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,KAAK;AAAA,EAC9G,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB,YAAY,8DAA8D,EAC1E,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KACpB,YAAY,qDAAqD,EACjE,aAAa,UAAU,EACvB,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,aAAa,kCAAU,OACpB,YAAY,qDAAqD,EACjE,aAAa,MAAS;AAC3B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,7 +15,7 @@ const StyledDropDownButton = styled(DSButtonV2)`
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
& svg {
|
|
18
|
-
fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["
|
|
18
|
+
fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}
|
|
@@ -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)<{ applyAriaDisabled: boolean }>`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['
|
|
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)<{ applyAriaDisabled: boolean }>`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n }\n\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled, applyAriaDisabled, readOnly },\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 readOnly={readOnly}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n size=\"s\"\n applyAriaDisabled={applyAriaDisabled}\n >\n <ChevronSmallDown size=\"s\" />\n </StyledDropDownButton>\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACqDjB;AAnDN,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,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,mBAAmB,SAAS;AAAA,IAC/C;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,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,6 +8,7 @@ const StyledContainer = styled("div", {
|
|
|
8
8
|
position: relative;
|
|
9
9
|
cursor: ${({ disabled }) => disabled ? "not-allowed" : "default"};
|
|
10
10
|
cursor: ${({ applyAriaDisabled }) => applyAriaDisabled ? "not-allowed" : "default"};
|
|
11
|
+
min-width: 64px;
|
|
11
12
|
${xStyledCommonProps}
|
|
12
13
|
`;
|
|
13
14
|
const StyledPopperWrapper = styled("div")`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nimport type {} from '@xstyled/system';\n\nexport const StyledContainer = styled('div', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.CONTAINER,\n})<XstyledProps & { disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')<{ disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n overflow: auto;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,gBAAgB,uBAAuB;AAIzC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nimport type {} from '@xstyled/system';\n\nexport const StyledContainer = styled('div', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.CONTAINER,\n})<XstyledProps & { disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n min-width: 64px;\n ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')<{ disabled?: boolean; applyAriaDisabled: boolean }>`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n overflow: auto;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,gBAAgB,uBAAuB;AAIzC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA,IAElF,kBAAkB;AAAA;AAGf,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ import { ControlsInput } from "../controls-input/ControlsInput.js";
|
|
|
17
17
|
import { useOnPillsNavigation } from "./useOnPillsNavigation.js";
|
|
18
18
|
const Controls = () => {
|
|
19
19
|
const {
|
|
20
|
-
props: { inline, disabled,
|
|
20
|
+
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly },
|
|
21
21
|
selectedOptionsRef,
|
|
22
22
|
setMenuState,
|
|
23
23
|
setFocusOptionIdx,
|
|
@@ -66,7 +66,7 @@ const Controls = () => {
|
|
|
66
66
|
);
|
|
67
67
|
const { onKeyDownPills } = useOnPillsNavigation();
|
|
68
68
|
const cols = useMemo(
|
|
69
|
-
() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "2.231rem"] : ["minmax(0px, auto)"],
|
|
69
|
+
() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "8px", "2.231rem"] : ["minmax(0px, auto)"],
|
|
70
70
|
[inline]
|
|
71
71
|
);
|
|
72
72
|
return /* @__PURE__ */ jsxs(
|
|
@@ -77,7 +77,6 @@ const Controls = () => {
|
|
|
77
77
|
cols,
|
|
78
78
|
disabled,
|
|
79
79
|
applyAriaDisabled,
|
|
80
|
-
minWidth: inputMinWidth,
|
|
81
80
|
hasError,
|
|
82
81
|
inline,
|
|
83
82
|
onClick: handleOnClick,
|
|
@@ -97,6 +96,7 @@ const Controls = () => {
|
|
|
97
96
|
}
|
|
98
97
|
) }),
|
|
99
98
|
/* @__PURE__ */ jsx(ControlsInput, {}),
|
|
99
|
+
/* @__PURE__ */ jsx("div", {}),
|
|
100
100
|
!inline && /* @__PURE__ */ jsxs(
|
|
101
101
|
StyledHeaderActionsWrapper,
|
|
102
102
|
{
|
|
@@ -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,
|
|
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, hasError, selectedValues, applyAriaDisabled, readOnly },\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 (applyAriaDisabled) {\n internalRef.current?.focus();\n return;\n }\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 (applyAriaDisabled) return;\n if (menuState || disabled || readOnly) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, readOnly, internalRef, 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(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n innerRef={controlsWrapperRef}\n readOnly={readOnly}\n cols={cols}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n aria-disabled={applyAriaDisabled}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper\n readOnly={readOnly}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {/** This empty div is a gap between the input and the drop down indicator */}\n <div />\n {!inline && (\n <StyledHeaderActionsWrapper\n justifyItems=\"center\"\n cols={['min-content', 'minmax(28px,max-content)']}\n justifyContent=\"flex-end\"\n >\n <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,7 +56,7 @@ const StyledSingleSelectWraper = styled.div`
|
|
|
56
56
|
display: flex;
|
|
57
57
|
width: 100%;
|
|
58
58
|
align-items: center;
|
|
59
|
-
color: ${({ disabled, readOnly,
|
|
59
|
+
color: ${({ disabled, readOnly, theme }) => disabled || readOnly ? theme.colors.neutral["600"] : theme.colors.neutral["700"]};
|
|
60
60
|
user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : ""};
|
|
61
61
|
`;
|
|
62
62
|
const StyledSelection = styled.div`
|
|
@@ -74,7 +74,7 @@ const StyleDropdownIndicator = styled.div``;
|
|
|
74
74
|
const StyleHeaderActionsSeparator = styled.span`
|
|
75
75
|
height: 100%;
|
|
76
76
|
width: 1px;
|
|
77
|
-
background-color: ${({ theme
|
|
77
|
+
background-color: ${({ theme }) => theme.colors.neutral["400"]};
|
|
78
78
|
`;
|
|
79
79
|
export {
|
|
80
80
|
StyleDropdownIndicator,
|
|
@@ -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, 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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;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,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;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,GAAG,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,OAAO;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,UAAU,UAAU,
|
|
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 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, theme }) =>\n disabled || readOnly ? theme.colors.neutral['600'] : theme.colors.neutral['700']};\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 }) => theme.colors.neutral['400']};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;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,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;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,GAAG,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,OAAO;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,UAAU,UAAU,MAAM,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACnE,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,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,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ const useKeyboardNavigation = () => {
|
|
|
44
44
|
const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
|
|
45
45
|
const onInputKeyDown = useCallback(
|
|
46
46
|
(e) => {
|
|
47
|
-
if (applyAriaDisabled
|
|
47
|
+
if (applyAriaDisabled) return;
|
|
48
48
|
if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
|
|
49
49
|
if ((["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) || /^[a-zA-Z0-9]$/.test(e.key)) && !menuState) {
|
|
50
50
|
setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);
|
|
@@ -57,7 +57,7 @@ const useKeyboardNavigation = () => {
|
|
|
57
57
|
}
|
|
58
58
|
if (!inline) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);
|
|
59
59
|
}
|
|
60
|
-
if (e.key === "Enter" && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
|
|
60
|
+
if (!readOnly && e.key === "Enter" && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
|
|
61
61
|
onCreate(inputValue);
|
|
62
62
|
setFocusOptionIdx("");
|
|
63
63
|
if (onFilter) onFilter(allOptions, "");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useKeyboardNavigation.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B,mBAAmB,4BAA4B;AACpF,MAAM,qBAAqB,CAAC,QAA0C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAEjH,MAAM,uBAAuB,CAAC,KAA8B,WAC1D,IAAI,UAAU,UAAa,IAAI,MAAM,YAAY,EAAE,WAAW,OAAO,YAAY,CAAC;AAC7E,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,oBAAoB,WAAW,eAAe;AACpD,QAAM,mBAAmB,gBAAgB,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AACvF,QAAM,cAAc,gBAAgB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc;AAE/E,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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) 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) || /^[a-zA-Z0-9]$/.test(e.key)) &&\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 (!readOnly && 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.key === ' ' && 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,7 +21,6 @@ const ComboboxPropTypes = {
|
|
|
21
21
|
).defaultValue(""),
|
|
22
22
|
onCancel: PropTypes.func.description("function triggered when user press ESC key").defaultValue("() => {}"),
|
|
23
23
|
onMenuChange: PropTypes.func.description("function triggered when user open or close the menu list").defaultValue("() => {}"),
|
|
24
|
-
inputMinWidth: PropTypes.any.description("Minimum width for the combo box input controller").defaultValue(void 0),
|
|
25
24
|
menuMinWidth: PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
|
|
26
25
|
menuMaxHeight: PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
|
|
27
26
|
withoutPortal: PropTypes.bool.description("Whether the combobox menu is rendered in a portal or not").defaultValue(false),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,iBAAiB;AAO9C,SAAS,QAA6B,OAAgB;AAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n menuMinWidth?: SizingProps['minWidth'];\n menuMaxHeight?: SizingProps['maxHeight'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n isLoading?: boolean;\n popperProps?: DSFloatingWrapperT.Props;\n }\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n selectedValues: SelectedOptionsT;\n onChange: (\n suggestedValue: SelectedOptionsT,\n selectedOption: ItemOption,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: DSPopperJST.PopperPlacementsT;\n placementOrderPreference: DSPopperJST.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n type ActionRefVirtualized = {\n scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;\n };\n}\n\nexport const ComboboxPropTypes = {\n ...globalAttributesPropTypes,\n placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of original options')\n .defaultValue([]),\n filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .description('List of filtered options to show in the menu based on the current internal input filter value')\n .defaultValue([]),\n selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n 'Array of option or single option selected',\n ),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering')\n .defaultValue('No Matches Found'),\n onChange: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue('() => {}'),\n onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n onCreate: PropTypes.func\n .description(\n 'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n )\n .defaultValue(''),\n onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n onMenuChange: PropTypes.func\n .description('function triggered when user open or close the menu list')\n .defaultValue('() => {}'),\n menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n withoutPortal: PropTypes.bool\n .description('Whether the combobox menu is rendered in a portal or not')\n .defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n onlySelectable: PropTypes.bool.description('filtering is disabled'),\n isSkeleton: PropTypes.bool.description('whether or not the component is in skeleton state').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description('Makes the component non-editable while remaining accessible.')\n .defaultValue(false),\n onSelectAll: PropTypes.func\n .description('function triggered when user select all the options')\n .defaultValue('() => {}')\n .deprecated({ version: '25.2' }),\n popperProps: PropTypes.object\n .description('props to be passed to the FloatingWrapper component')\n .defaultValue(undefined),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,iBAAiB;AAO9C,SAAS,QAA6B,OAAgB;AAAC;AAmGvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,GAAG,UAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,UAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,UAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,cAAc,UAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,UAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,UAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,KAAK,YAAY,uBAAuB;AAAA,EAClE,YAAY,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,KAAK;AAAA,EAC9G,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,8DAA8D,EAC1E,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KACpB,YAAY,qDAAqD,EACjE,aAAa,UAAU,EACvB,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,aAAa,UAAU,OACpB,YAAY,qDAAqD,EACjE,aAAa,MAAS;AAC3B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,6 @@ export declare namespace DSComboboxT {
|
|
|
33
33
|
type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;
|
|
34
34
|
type SelectedOptionsT = ItemOption[] | ItemOption | null;
|
|
35
35
|
interface PropsOptional {
|
|
36
|
-
inputMinWidth?: number;
|
|
37
36
|
menuMinWidth?: SizingProps['minWidth'];
|
|
38
37
|
menuMaxHeight?: SizingProps['maxHeight'];
|
|
39
38
|
placeholder?: string;
|
|
@@ -92,7 +91,6 @@ export declare const ComboboxPropTypes: {
|
|
|
92
91
|
onCreate: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
93
92
|
onCancel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
94
93
|
onMenuChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
95
|
-
inputMinWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
96
94
|
menuMinWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
97
95
|
menuMaxHeight: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
98
96
|
withoutPortal: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.51.0-rc.
|
|
3
|
+
"version": "3.51.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.51.0-rc.
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.51.0-rc.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-icons": "3.51.0-rc.
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-props-helpers": "3.51.0-rc.
|
|
50
|
-
"@elliemae/ds-system": "3.51.0-rc.
|
|
51
|
-
"@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.
|
|
41
|
+
"@elliemae/ds-button-v2": "3.51.0-rc.2",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.51.0-rc.2",
|
|
43
|
+
"@elliemae/ds-form-checkbox": "3.51.0-rc.2",
|
|
44
|
+
"@elliemae/ds-grid": "3.51.0-rc.2",
|
|
45
|
+
"@elliemae/ds-floating-context": "3.51.0-rc.2",
|
|
46
|
+
"@elliemae/ds-menu-items": "3.51.0-rc.2",
|
|
47
|
+
"@elliemae/ds-icons": "3.51.0-rc.2",
|
|
48
|
+
"@elliemae/ds-pills-v2": "3.51.0-rc.2",
|
|
49
|
+
"@elliemae/ds-props-helpers": "3.51.0-rc.2",
|
|
50
|
+
"@elliemae/ds-system": "3.51.0-rc.2",
|
|
51
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
"jest": "~29.7.0",
|
|
57
57
|
"styled-components": "~5.3.9",
|
|
58
58
|
"styled-system": "^5.1.5",
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
59
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.51.0-rc.2",
|
|
60
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-rc.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@elliemae/pui-theme": "~2.10.0",
|