@elliemae/ds-form-combobox 3.54.0-next.5 → 3.54.0-next.7
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/container/Container.js +2 -2
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +10 -8
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +16 -8
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/useControlsInput.js +4 -2
- package/dist/cjs/parts/controls-input/useControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +22 -3
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/container/Container.js +2 -2
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +12 -10
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +18 -10
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/useControlsInput.js +4 -2
- package/dist/esm/parts/controls-input/useControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/useMaskedOnChange.js +22 -3
- package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/parts/controls/Controls.d.ts +4 -1
- package/dist/types/parts/controls-input/ControlsInput.d.ts +4 -1
- package/dist/types/parts/controls-input/useControlsInput.d.ts +4 -1
- package/dist/types/parts/controls-input/useMaskedOnChange.d.ts +4 -1
- package/dist/types/react-desc-prop-types.d.ts +7 -5
- package/package.json +16 -16
|
@@ -83,7 +83,7 @@ const Container = () => {
|
|
|
83
83
|
}),
|
|
84
84
|
[startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
|
|
85
85
|
);
|
|
86
|
-
const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
|
|
86
|
+
const { refs, floatingStyles, context, mutableUpdateStyles } = (0, import_ds_floating_context.useFloatingContext)(config);
|
|
87
87
|
const comboboxRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
|
|
88
88
|
const hideTooltip = (0, import_react.useCallback)(() => {
|
|
89
89
|
setMenuState(false, "blur");
|
|
@@ -101,7 +101,7 @@ const Container = () => {
|
|
|
101
101
|
getOwnerPropsArguments,
|
|
102
102
|
children: [
|
|
103
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
|
|
104
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
|
|
104
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, { mutableUpdateStyles }),
|
|
105
105
|
menuState && inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) : null,
|
|
106
106
|
menuState && !inline && referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
107
|
import_ds_floating_context.FloatingWrapper,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n externallyControlledIsOpen: menuState,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <LiveRegion />\n <Controls />\n\n {menuState && inline ? <MenuList /> : null}\n {menuState && !inline && referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n {...props.popperProps}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAzEJ,mBAAmE;AACnE,8BAA0E;AAC1E,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,QAAI,yBAAW,mBAAAC,OAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n externallyControlledIsOpen: menuState,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n );\n\n const { refs, floatingStyles, context, mutableUpdateStyles } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <LiveRegion />\n <Controls mutableUpdateStyles={mutableUpdateStyles} />\n\n {menuState && inline ? <MenuList /> : null}\n {menuState && !inline && referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n {...props.popperProps}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAzEJ,mBAAmE;AACnE,8BAA0E;AAC1E,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,QAAI,yBAAW,mBAAAC,OAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,SAAS,oBAAoB,QAAI,+CAAmB,MAAM;AAExF,QAAM,kBAAc,4BAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,kBAAc,0BAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,gDAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,4BAAS,qBAA0C;AAAA,QAEnD,aAAa,SAAS,4CAAC,6BAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["React", "ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -33,17 +33,19 @@ __export(Controls_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(Controls_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
37
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
|
-
var
|
|
40
|
-
var
|
|
37
|
+
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
|
+
var import_react = require("react");
|
|
41
39
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
42
|
-
var
|
|
43
|
-
var import_multi_selected_values_container = require("../multi-selected-values-container/index.js");
|
|
40
|
+
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
44
41
|
var import_ControlsInput = require("../controls-input/ControlsInput.js");
|
|
42
|
+
var import_DropdownIndicator = require("../DropdownIndicator.js");
|
|
43
|
+
var import_multi_selected_values_container = require("../multi-selected-values-container/index.js");
|
|
44
|
+
var import_styled = require("./styled.js");
|
|
45
45
|
var import_useOnPillsNavigation = require("./useOnPillsNavigation.js");
|
|
46
|
-
const Controls = (
|
|
46
|
+
const Controls = ({
|
|
47
|
+
mutableUpdateStyles
|
|
48
|
+
}) => {
|
|
47
49
|
const {
|
|
48
50
|
props,
|
|
49
51
|
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
|
|
@@ -139,7 +141,7 @@ const Controls = () => {
|
|
|
139
141
|
children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: selectedValues.label }) : null
|
|
140
142
|
}
|
|
141
143
|
) }),
|
|
142
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, { mutableUpdateStyles }),
|
|
143
145
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
144
146
|
!inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
145
147
|
import_styled.StyledHeaderActionsWrapper,
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n StyledControlsWrapper,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;\n}): JSX.Element => {\n const {\n props,\n props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n shouldPreventContextMenuOpening,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (applyAriaDisabled || shouldPreventContextMenuOpening) {\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 }, [\n disabled,\n listRef,\n hasFocus,\n menuState,\n inline,\n setMenuState,\n focusOptionIdx,\n readOnly,\n applyAriaDisabled,\n isMenuOpenableWithReadOnly,\n ]);\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 || shouldPreventContextMenuOpening) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\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 getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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 mutableUpdateStyles={mutableUpdateStyles} />\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": "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",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -33,17 +33,19 @@ __export(ControlsInput_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(ControlsInput_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
37
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
39
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
39
|
+
var import_react = require("react");
|
|
40
|
+
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
40
41
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
42
|
+
var import_listHelper = require("../../utils/listHelper.js");
|
|
41
43
|
var import_styled = require("./styled.js");
|
|
42
|
-
var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
|
|
43
44
|
var import_useControlsInput = require("./useControlsInput.js");
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
|
|
46
|
+
const ControlsInput = ({
|
|
47
|
+
mutableUpdateStyles
|
|
48
|
+
}) => {
|
|
47
49
|
const {
|
|
48
50
|
props,
|
|
49
51
|
props: {
|
|
@@ -68,7 +70,13 @@ const ControlsInput = () => {
|
|
|
68
70
|
instanceUid
|
|
69
71
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
70
72
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
71
|
-
const
|
|
73
|
+
const useControlsConfig = (0, import_react.useMemo)(
|
|
74
|
+
() => ({
|
|
75
|
+
mutableUpdateStyles
|
|
76
|
+
}),
|
|
77
|
+
[mutableUpdateStyles]
|
|
78
|
+
);
|
|
79
|
+
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)(useControlsConfig);
|
|
72
80
|
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
73
81
|
const {
|
|
74
82
|
tabIndex,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useContext, useMemo } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n StyledHiddenDiv,\n StyledInput,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledInputWrapper,\n StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;\n}): JSX.Element => {\n const {\n props,\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const useControlsConfig = useMemo(\n () => ({\n mutableUpdateStyles,\n }),\n [mutableUpdateStyles],\n );\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput(useControlsConfig);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n const currentPlaceholder = useMemo(() => {\n if (isArrayOfItems(selectedValues)) {\n return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (typeof selectedValues?.label === 'string') {\n return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (readOnly) {\n return `${placeholder}. Read only`;\n }\n return placeholder;\n }, [placeholder, selectedValues, readOnly]);\n\n const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n setInputValue(e.clipboardData.getData('text/plain'));\n internalRef.current?.focus();\n };\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder aria-hidden=\"true\">\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n {/* Fix for PUI-11597 */}\n {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n {/* Fix for PUI-9609 */}\n <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n <StyledInput\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={readOnly || onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={currentPlaceholder}\n aria-activedescendant={activeDescendant}\n aria-expanded={menuState}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-describedby={actualAriaDescribedBy}\n aria-autocomplete=\"list\"\n role=\"combobox\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n style={{ width }}\n innerRef={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n name=\"hidden\"\n tabIndex={-1}\n onPaste={handleOnPaste}\n aria-hidden=\"true\"\n isDisabled={disabled || applyAriaDisabled}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,9 @@ var import_react = require("react");
|
|
|
36
36
|
var import_useMaskedOnChange = require("./useMaskedOnChange.js");
|
|
37
37
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
38
38
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
39
|
-
const useControlsInput = (
|
|
39
|
+
const useControlsInput = ({
|
|
40
|
+
mutableUpdateStyles
|
|
41
|
+
} = {}) => {
|
|
40
42
|
const {
|
|
41
43
|
props: { selectedValues, allOptions, placeholder, onFilter, inline },
|
|
42
44
|
setHasFocus,
|
|
@@ -54,7 +56,7 @@ const useControlsInput = () => {
|
|
|
54
56
|
spanReference.current.style.display = "none";
|
|
55
57
|
}
|
|
56
58
|
}, [inputValue]);
|
|
57
|
-
const handleOnChange = (0, import_useMaskedOnChange.useMaskedOnChange)();
|
|
59
|
+
const handleOnChange = (0, import_useMaskedOnChange.useMaskedOnChange)({ mutableUpdateStyles });
|
|
58
60
|
const handleOnBlur = (0, import_react.useCallback)(() => {
|
|
59
61
|
setInputValue("");
|
|
60
62
|
if (onFilter) onFilter(allOptions);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { isSelectedValueEmpty } from '../../utils/listHelper.js';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter, inline },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n // if user type we remove the placeholder\n // else if there is a selection we dont show it unless is inline combobox\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAC9E,+BAAkC;AAClC,yBAA4B;
|
|
4
|
+
"sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { type DSComboboxT } from '../../react-desc-prop-types.js';\nimport { isSelectedValueEmpty } from '../../utils/listHelper.js';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter, inline },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n // if user type we remove the placeholder\n // else if there is a selection we dont show it unless is inline combobox\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange({ mutableUpdateStyles });\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAC9E,+BAAkC;AAClC,yBAA4B;AAE5B,wBAAqC;AAWrC,MAAM,mBAAmB,CAAC;AAAA,EACxB;AACF,IAEI,CAAC,MAAyB;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,UAAU,OAAO;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,QAAM,oBAAgB,qBAAwB,IAAI;AAGlD,QAAM,kBAAkB,CAAC,eAAe,cAAU,wCAAqB,cAAc,KAAK,cAAc;AACxG,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,8BAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,qBAAiB,4CAAkB,EAAE,oBAAoB,CAAC;AAEhE,QAAM,mBAAe,0BAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI,SAAU,UAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -35,13 +35,22 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
37
37
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
38
|
-
const useMaskedOnChange = (
|
|
38
|
+
const useMaskedOnChange = ({
|
|
39
|
+
mutableUpdateStyles
|
|
40
|
+
} = {}) => {
|
|
39
41
|
const {
|
|
40
42
|
props: { useMask, onFilter, allOptions, applyAriaDisabled },
|
|
41
43
|
setMenuState,
|
|
42
44
|
setInputValue,
|
|
43
45
|
setFocusOptionIdx
|
|
44
46
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
47
|
+
const repositionFloatingWrapper = (0, import_react.useCallback)(() => {
|
|
48
|
+
if (mutableUpdateStyles && mutableUpdateStyles.current) {
|
|
49
|
+
requestAnimationFrame(() => {
|
|
50
|
+
mutableUpdateStyles.current();
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
}, [mutableUpdateStyles]);
|
|
45
54
|
const handleOnChange = (0, import_react.useCallback)(
|
|
46
55
|
(e) => {
|
|
47
56
|
if (applyAriaDisabled) return;
|
|
@@ -51,16 +60,26 @@ const useMaskedOnChange = () => {
|
|
|
51
60
|
}
|
|
52
61
|
setFocusOptionIdx("");
|
|
53
62
|
setInputValue(e.currentTarget.value);
|
|
63
|
+
repositionFloatingWrapper();
|
|
54
64
|
},
|
|
55
|
-
[
|
|
65
|
+
[
|
|
66
|
+
applyAriaDisabled,
|
|
67
|
+
setMenuState,
|
|
68
|
+
onFilter,
|
|
69
|
+
setFocusOptionIdx,
|
|
70
|
+
setInputValue,
|
|
71
|
+
repositionFloatingWrapper,
|
|
72
|
+
allOptions
|
|
73
|
+
]
|
|
56
74
|
);
|
|
57
75
|
const handleOnChangeMask = (0, import_react.useCallback)(
|
|
58
76
|
(e, mask) => {
|
|
59
77
|
setMenuState(true, "filter", e);
|
|
60
78
|
if (mask && onFilter) onFilter((0, import_listHelper.filterOptions)(mask, allOptions), mask);
|
|
61
79
|
else if (!mask && onFilter) onFilter(allOptions, "");
|
|
80
|
+
repositionFloatingWrapper();
|
|
62
81
|
},
|
|
63
|
-
[
|
|
82
|
+
[setMenuState, onFilter, allOptions, repositionFloatingWrapper]
|
|
64
83
|
);
|
|
65
84
|
const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
|
|
66
85
|
return onChangeMask?.onChange || handleOnChange;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask, onFilter, allOptions, applyAriaDisabled },\n setMenuState,\n setInputValue,\n setFocusOptionIdx,\n } = useContext(ComboBoxContext);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (applyAriaDisabled) return;\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setFocusOptionIdx('');\n setInputValue(e.currentTarget.value);\n },\n [applyAriaDisabled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;
|
|
4
|
+
"sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst useMaskedOnChange = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}) => {\n const {\n props: { useMask, onFilter, allOptions, applyAriaDisabled },\n setMenuState,\n setInputValue,\n setFocusOptionIdx,\n } = useContext(ComboBoxContext);\n\n const repositionFloatingWrapper = useCallback(() => {\n if (mutableUpdateStyles && mutableUpdateStyles.current) {\n requestAnimationFrame(() => {\n mutableUpdateStyles.current();\n });\n }\n }, [mutableUpdateStyles]);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (applyAriaDisabled) return;\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setFocusOptionIdx('');\n setInputValue(e.currentTarget.value);\n repositionFloatingWrapper();\n },\n [\n applyAriaDisabled,\n setMenuState,\n onFilter,\n setFocusOptionIdx,\n setInputValue,\n repositionFloatingWrapper,\n allOptions,\n ],\n );\n\n // onchange used when mask is provided\n const handleOnChangeMask = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n setMenuState(true, 'filter', e);\n if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n else if (!mask && onFilter) onFilter(allOptions, '');\n repositionFloatingWrapper();\n },\n [setMenuState, onFilter, allOptions, repositionFloatingWrapper],\n );\n\n const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAG9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AACF,IAEI,CAAC,MAAM;AACT,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,gCAA4B,0BAAY,MAAM;AAClD,QAAI,uBAAuB,oBAAoB,SAAS;AACtD,4BAAsB,MAAM;AAC1B,4BAAoB,QAAQ;AAAA,MAC9B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAGxB,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AACnC,gCAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AACnD,gCAA0B;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,UAAU,YAAY,yBAAyB;AAAA,EAChE;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\nimport type { DSFloatingWrapperT, useFloatingContext } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n type ReturnOfUseFloatingContext = ReturnType<typeof useFloatingContext>;\n export type PopperMutableUpdateStylesT = ReturnOfUseFloatingContext['mutableUpdateStyles'];\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 isMenuOpenableWithReadOnly: boolean;\n forceFocusFirstOptionOnType: 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 isMenuOpenableWithReadOnly: PropTypes.bool\n .description('Whether the menu can be opened when the input is readonly')\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 forceFocusFirstOptionOnType: PropTypes.bool\n .description('Whether to focus the first option when typing in the input.')\n .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOvB,8BAAqD;AAI9C,SAAS,QAA6B,OAAgB;AAAC;AAuGvD,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,4BAA4B,kCAAU,KACnC,YAAY,2DAA2D,EACvE,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;AAAA,EACzB,6BAA6B,kCAAU,KACpC,YAAY,6DAA6D,EACzE,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,7 +50,7 @@ const Container = () => {
|
|
|
50
50
|
}),
|
|
51
51
|
[startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
|
|
52
52
|
);
|
|
53
|
-
const { refs, floatingStyles, context } = useFloatingContext(config);
|
|
53
|
+
const { refs, floatingStyles, context, mutableUpdateStyles } = useFloatingContext(config);
|
|
54
54
|
const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);
|
|
55
55
|
const hideTooltip = useCallback(() => {
|
|
56
56
|
setMenuState(false, "blur");
|
|
@@ -68,7 +68,7 @@ const Container = () => {
|
|
|
68
68
|
getOwnerPropsArguments,
|
|
69
69
|
children: [
|
|
70
70
|
/* @__PURE__ */ jsx(LiveRegion, {}),
|
|
71
|
-
/* @__PURE__ */ jsx(Controls, {}),
|
|
71
|
+
/* @__PURE__ */ jsx(Controls, { mutableUpdateStyles }),
|
|
72
72
|
menuState && inline ? /* @__PURE__ */ jsx(MenuList, {}) : null,
|
|
73
73
|
menuState && !inline && referenceElement ? /* @__PURE__ */ jsx(
|
|
74
74
|
FloatingWrapper,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n externallyControlledIsOpen: menuState,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <LiveRegion />\n <Controls />\n\n {menuState && inline ? <MenuList /> : null}\n {menuState && !inline && referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n {...props.popperProps}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </StyledContainer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0EnB,SASE,KATF;AAzEJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n externallyControlledIsOpen: menuState,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n );\n\n const { refs, floatingStyles, context, mutableUpdateStyles } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <LiveRegion />\n <Controls mutableUpdateStyles={mutableUpdateStyles} />\n\n {menuState && inline ? <MenuList /> : null}\n {menuState && !inline && referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n {...props.popperProps}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </StyledContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0EnB,SASE,KATF;AAzEJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,SAAS,oBAAoB,IAAI,mBAAmB,MAAM;AAExF,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,YAAS,qBAA0C;AAAA,QAEnD,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useMemo, useCallback } from "react";
|
|
4
|
-
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
3
|
import { useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
4
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
import { useCallback, useContext, useMemo } from "react";
|
|
8
6
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
7
|
+
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
8
|
+
import { ControlsInput } from "../controls-input/ControlsInput.js";
|
|
9
|
+
import { DropdownIndicator } from "../DropdownIndicator.js";
|
|
10
|
+
import { MultiSelectedValuesContainer } from "../multi-selected-values-container/index.js";
|
|
9
11
|
import {
|
|
10
12
|
StyledControlsWrapper,
|
|
11
|
-
StyleHeaderActionsSeparator,
|
|
12
13
|
StyledHeaderActionsWrapper,
|
|
13
14
|
StyledSelection,
|
|
14
|
-
StyledSingleSelectWraper
|
|
15
|
+
StyledSingleSelectWraper,
|
|
16
|
+
StyleHeaderActionsSeparator
|
|
15
17
|
} from "./styled.js";
|
|
16
|
-
import { MultiSelectedValuesContainer } from "../multi-selected-values-container/index.js";
|
|
17
|
-
import { ControlsInput } from "../controls-input/ControlsInput.js";
|
|
18
18
|
import { useOnPillsNavigation } from "./useOnPillsNavigation.js";
|
|
19
|
-
const Controls = (
|
|
19
|
+
const Controls = ({
|
|
20
|
+
mutableUpdateStyles
|
|
21
|
+
}) => {
|
|
20
22
|
const {
|
|
21
23
|
props,
|
|
22
24
|
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
|
|
@@ -112,7 +114,7 @@ const Controls = () => {
|
|
|
112
114
|
children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: selectedValues.label }) : null
|
|
113
115
|
}
|
|
114
116
|
) }),
|
|
115
|
-
/* @__PURE__ */ jsx(ControlsInput, {}),
|
|
117
|
+
/* @__PURE__ */ jsx(ControlsInput, { mutableUpdateStyles }),
|
|
116
118
|
/* @__PURE__ */ jsx("div", {}),
|
|
117
119
|
!inline && /* @__PURE__ */ jsxs(
|
|
118
120
|
StyledHeaderActionsWrapper,
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n StyledControlsWrapper,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;\n}): JSX.Element => {\n const {\n props,\n props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n shouldPreventContextMenuOpening,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (applyAriaDisabled || shouldPreventContextMenuOpening) {\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 }, [\n disabled,\n listRef,\n hasFocus,\n menuState,\n inline,\n setMenuState,\n focusOptionIdx,\n readOnly,\n applyAriaDisabled,\n isMenuOpenableWithReadOnly,\n ]);\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 || shouldPreventContextMenuOpening) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\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 getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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 mutableUpdateStyles={mutableUpdateStyles} />\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
|
}
|
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useMemo } from "react";
|
|
4
|
-
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
-
import { mergeRefs } from "@elliemae/ds-system";
|
|
6
3
|
import { useGetGlobalAttributes, useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
4
|
+
import { mergeRefs } from "@elliemae/ds-system";
|
|
5
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
6
|
+
import { useContext, useMemo } from "react";
|
|
7
|
+
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
7
8
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
9
|
+
import { isArrayOfItems } from "../../utils/listHelper.js";
|
|
8
10
|
import {
|
|
11
|
+
StyledHiddenDiv,
|
|
9
12
|
StyledInput,
|
|
10
|
-
StyledInputWrapper,
|
|
11
13
|
StyledInputPlaceHolder,
|
|
12
14
|
StyledInputWidthReference,
|
|
13
|
-
|
|
15
|
+
StyledInputWrapper,
|
|
14
16
|
StyleHiddenInput
|
|
15
17
|
} from "./styled.js";
|
|
16
|
-
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
17
18
|
import { useControlsInput } from "./useControlsInput.js";
|
|
18
|
-
import {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
20
|
+
const ControlsInput = ({
|
|
21
|
+
mutableUpdateStyles
|
|
22
|
+
}) => {
|
|
21
23
|
const {
|
|
22
24
|
props,
|
|
23
25
|
props: {
|
|
@@ -42,7 +44,13 @@ const ControlsInput = () => {
|
|
|
42
44
|
instanceUid
|
|
43
45
|
} = useContext(ComboBoxContext);
|
|
44
46
|
const { onInputKeyDown } = useKeyboardNavigation();
|
|
45
|
-
const
|
|
47
|
+
const useControlsConfig = useMemo(
|
|
48
|
+
() => ({
|
|
49
|
+
mutableUpdateStyles
|
|
50
|
+
}),
|
|
51
|
+
[mutableUpdateStyles]
|
|
52
|
+
);
|
|
53
|
+
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput(useControlsConfig);
|
|
46
54
|
const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
|
|
47
55
|
const {
|
|
48
56
|
tabIndex,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useContext, useMemo } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n StyledHiddenDiv,\n StyledInput,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledInputWrapper,\n StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;\n}): JSX.Element => {\n const {\n props,\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const useControlsConfig = useMemo(\n () => ({\n mutableUpdateStyles,\n }),\n [mutableUpdateStyles],\n );\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput(useControlsConfig);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n const currentPlaceholder = useMemo(() => {\n if (isArrayOfItems(selectedValues)) {\n return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (typeof selectedValues?.label === 'string') {\n return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (readOnly) {\n return `${placeholder}. Read only`;\n }\n return placeholder;\n }, [placeholder, selectedValues, readOnly]);\n\n const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n setInputValue(e.clipboardData.getData('text/plain'));\n internalRef.current?.focus();\n };\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder aria-hidden=\"true\">\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n {/* Fix for PUI-11597 */}\n {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n {/* Fix for PUI-9609 */}\n <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n <StyledInput\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={readOnly || onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={currentPlaceholder}\n aria-activedescendant={activeDescendant}\n aria-expanded={menuState}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-describedby={actualAriaDescribedBy}\n aria-autocomplete=\"list\"\n role=\"combobox\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n style={{ width }}\n innerRef={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n name=\"hidden\"\n tabIndex={-1}\n onPaste={handleOnPaste}\n aria-hidden=\"true\"\n isDisabled={disabled || applyAriaDisabled}\n />\n </StyledInputWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,9 @@ import { useContext, useEffect, useMemo, useRef, useCallback, useState } from "r
|
|
|
3
3
|
import { useMaskedOnChange } from "./useMaskedOnChange.js";
|
|
4
4
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
5
5
|
import { isSelectedValueEmpty } from "../../utils/listHelper.js";
|
|
6
|
-
const useControlsInput = (
|
|
6
|
+
const useControlsInput = ({
|
|
7
|
+
mutableUpdateStyles
|
|
8
|
+
} = {}) => {
|
|
7
9
|
const {
|
|
8
10
|
props: { selectedValues, allOptions, placeholder, onFilter, inline },
|
|
9
11
|
setHasFocus,
|
|
@@ -21,7 +23,7 @@ const useControlsInput = () => {
|
|
|
21
23
|
spanReference.current.style.display = "none";
|
|
22
24
|
}
|
|
23
25
|
}, [inputValue]);
|
|
24
|
-
const handleOnChange = useMaskedOnChange();
|
|
26
|
+
const handleOnChange = useMaskedOnChange({ mutableUpdateStyles });
|
|
25
27
|
const handleOnBlur = useCallback(() => {
|
|
26
28
|
setInputValue("");
|
|
27
29
|
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/useControlsInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { isSelectedValueEmpty } from '../../utils/listHelper.js';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter, inline },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n // if user type we remove the placeholder\n // else if there is a selection we dont show it unless is inline combobox\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa,gBAAgB;AAC9E,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { type DSComboboxT } from '../../react-desc-prop-types.js';\nimport { isSelectedValueEmpty } from '../../utils/listHelper.js';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter, inline },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n // if user type we remove the placeholder\n // else if there is a selection we dont show it unless is inline combobox\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange({ mutableUpdateStyles });\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa,gBAAgB;AAC9E,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,4BAA4B;AAWrC,MAAM,mBAAmB,CAAC;AAAA,EACxB;AACF,IAEI,CAAC,MAAyB;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,UAAU,OAAO;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,QAAM,gBAAgB,OAAwB,IAAI;AAGlD,QAAM,kBAAkB,CAAC,eAAe,UAAU,qBAAqB,cAAc,KAAK,cAAc;AACxG,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,YAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,iBAAiB,kBAAkB,EAAE,oBAAoB,CAAC;AAEhE,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI,SAAU,UAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,13 +2,22 @@ import * as React from "react";
|
|
|
2
2
|
import { useContext, useCallback } from "react";
|
|
3
3
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
4
4
|
import { filterOptions } from "../../utils/listHelper.js";
|
|
5
|
-
const useMaskedOnChange = (
|
|
5
|
+
const useMaskedOnChange = ({
|
|
6
|
+
mutableUpdateStyles
|
|
7
|
+
} = {}) => {
|
|
6
8
|
const {
|
|
7
9
|
props: { useMask, onFilter, allOptions, applyAriaDisabled },
|
|
8
10
|
setMenuState,
|
|
9
11
|
setInputValue,
|
|
10
12
|
setFocusOptionIdx
|
|
11
13
|
} = useContext(ComboBoxContext);
|
|
14
|
+
const repositionFloatingWrapper = useCallback(() => {
|
|
15
|
+
if (mutableUpdateStyles && mutableUpdateStyles.current) {
|
|
16
|
+
requestAnimationFrame(() => {
|
|
17
|
+
mutableUpdateStyles.current();
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}, [mutableUpdateStyles]);
|
|
12
21
|
const handleOnChange = useCallback(
|
|
13
22
|
(e) => {
|
|
14
23
|
if (applyAriaDisabled) return;
|
|
@@ -18,16 +27,26 @@ const useMaskedOnChange = () => {
|
|
|
18
27
|
}
|
|
19
28
|
setFocusOptionIdx("");
|
|
20
29
|
setInputValue(e.currentTarget.value);
|
|
30
|
+
repositionFloatingWrapper();
|
|
21
31
|
},
|
|
22
|
-
[
|
|
32
|
+
[
|
|
33
|
+
applyAriaDisabled,
|
|
34
|
+
setMenuState,
|
|
35
|
+
onFilter,
|
|
36
|
+
setFocusOptionIdx,
|
|
37
|
+
setInputValue,
|
|
38
|
+
repositionFloatingWrapper,
|
|
39
|
+
allOptions
|
|
40
|
+
]
|
|
23
41
|
);
|
|
24
42
|
const handleOnChangeMask = useCallback(
|
|
25
43
|
(e, mask) => {
|
|
26
44
|
setMenuState(true, "filter", e);
|
|
27
45
|
if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);
|
|
28
46
|
else if (!mask && onFilter) onFilter(allOptions, "");
|
|
47
|
+
repositionFloatingWrapper();
|
|
29
48
|
},
|
|
30
|
-
[
|
|
49
|
+
[setMenuState, onFilter, allOptions, repositionFloatingWrapper]
|
|
31
50
|
);
|
|
32
51
|
const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
|
|
33
52
|
return onChangeMask?.onChange || handleOnChange;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useMaskedOnChange.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask, onFilter, allOptions, applyAriaDisabled },\n setMenuState,\n setInputValue,\n setFocusOptionIdx,\n } = useContext(ComboBoxContext);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (applyAriaDisabled) return;\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setFocusOptionIdx('');\n setInputValue(e.currentTarget.value);\n },\n [applyAriaDisabled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst useMaskedOnChange = ({\n mutableUpdateStyles,\n}: {\n mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}) => {\n const {\n props: { useMask, onFilter, allOptions, applyAriaDisabled },\n setMenuState,\n setInputValue,\n setFocusOptionIdx,\n } = useContext(ComboBoxContext);\n\n const repositionFloatingWrapper = useCallback(() => {\n if (mutableUpdateStyles && mutableUpdateStyles.current) {\n requestAnimationFrame(() => {\n mutableUpdateStyles.current();\n });\n }\n }, [mutableUpdateStyles]);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (applyAriaDisabled) return;\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setFocusOptionIdx('');\n setInputValue(e.currentTarget.value);\n repositionFloatingWrapper();\n },\n [\n applyAriaDisabled,\n setMenuState,\n onFilter,\n setFocusOptionIdx,\n setInputValue,\n repositionFloatingWrapper,\n allOptions,\n ],\n );\n\n // onchange used when mask is provided\n const handleOnChangeMask = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n setMenuState(true, 'filter', e);\n if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n else if (!mask && onFilter) onFilter(allOptions, '');\n repositionFloatingWrapper();\n },\n [setMenuState, onFilter, allOptions, repositionFloatingWrapper],\n );\n\n const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AACF,IAEI,CAAC,MAAM;AACT,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,4BAA4B,YAAY,MAAM;AAClD,QAAI,uBAAuB,oBAAoB,SAAS;AACtD,4BAAsB,MAAM;AAC1B,4BAAoB,QAAQ;AAAA,MAC9B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAGxB,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,iBAAS,cAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AACnC,gCAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,UAAS,cAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AACnD,gCAA0B;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,UAAU,YAAY,yBAAyB;AAAA,EAChE;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 { DSFastListT } from '@elliemae/ds-fast-list';\nimport type { DSFloatingWrapperT, useFloatingContext } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n type ReturnOfUseFloatingContext = ReturnType<typeof useFloatingContext>;\n export type PopperMutableUpdateStylesT = ReturnOfUseFloatingContext['mutableUpdateStyles'];\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 isMenuOpenableWithReadOnly: boolean;\n forceFocusFirstOptionOnType: 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 isMenuOpenableWithReadOnly: PropTypes.bool\n .description('Whether the menu can be opened when the input is readonly')\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 forceFocusFirstOptionOnType: PropTypes.bool\n .description('Whether to focus the first option when typing in the input.')\n .defaultValue(false),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACOvB,SAAS,2BAA2B,iBAAiB;AAI9C,SAAS,QAA6B,OAAgB;AAAC;AAuGvD,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,4BAA4B,UAAU,KACnC,YAAY,2DAA2D,EACvE,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;AAAA,EACzB,6BAA6B,UAAU,KACpC,YAAY,6DAA6D,EACzE,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import type { DSComboboxT } from '../../react-desc-prop-types.js';
|
|
2
|
+
export declare const ControlsInput: ({ mutableUpdateStyles, }: {
|
|
3
|
+
mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;
|
|
4
|
+
}) => JSX.Element;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type DSComboboxT } from '../../react-desc-prop-types.js';
|
|
1
2
|
interface UseControlsInputT {
|
|
2
3
|
handleOnBlur: () => void;
|
|
3
4
|
handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
@@ -7,5 +8,7 @@ interface UseControlsInputT {
|
|
|
7
8
|
width: number;
|
|
8
9
|
spanReference: React.Ref<HTMLSpanElement>;
|
|
9
10
|
}
|
|
10
|
-
declare const useControlsInput: (
|
|
11
|
+
declare const useControlsInput: ({ mutableUpdateStyles, }?: {
|
|
12
|
+
mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;
|
|
13
|
+
}) => UseControlsInputT;
|
|
11
14
|
export { useControlsInput };
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import type { DSComboboxT } from '../../react-desc-prop-types.js';
|
|
2
|
+
declare const useMaskedOnChange: ({ mutableUpdateStyles, }?: {
|
|
3
|
+
mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;
|
|
4
|
+
}) => import("react").ChangeEventHandler<HTMLInputElement>;
|
|
2
5
|
export { useMaskedOnChange };
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import type {
|
|
3
|
-
import type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';
|
|
1
|
+
import type { DSFastListT } from '@elliemae/ds-fast-list';
|
|
2
|
+
import type { DSFloatingWrapperT, useFloatingContext } from '@elliemae/ds-floating-context';
|
|
4
3
|
import type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';
|
|
5
|
-
import type { SizingProps } from '@elliemae/ds-system';
|
|
6
4
|
import type { DSPopperJST } from '@elliemae/ds-popperjs';
|
|
7
|
-
import type {
|
|
5
|
+
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
6
|
+
import type { SizingProps } from '@elliemae/ds-system';
|
|
7
|
+
import type React from 'react';
|
|
8
8
|
export declare function noop<T extends unknown[]>(..._args: T): void;
|
|
9
9
|
export declare namespace DSComboboxT {
|
|
10
|
+
type ReturnOfUseFloatingContext = ReturnType<typeof useFloatingContext>;
|
|
11
|
+
type PopperMutableUpdateStylesT = ReturnOfUseFloatingContext['mutableUpdateStyles'];
|
|
10
12
|
interface CommonItemOptions extends GlobalAttributesT {
|
|
11
13
|
dsId: string;
|
|
12
14
|
disabled?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.54.0-next.
|
|
3
|
+
"version": "3.54.0-next.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-form-checkbox": "3.54.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-props-helpers": "3.54.0-next.
|
|
51
|
-
"@elliemae/ds-system": "3.54.0-next.
|
|
52
|
-
"@elliemae/ds-truncated-tooltip-text": "3.54.0-next.
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.54.0-next.7",
|
|
42
|
+
"@elliemae/ds-button-v2": "3.54.0-next.7",
|
|
43
|
+
"@elliemae/ds-fast-list": "3.54.0-next.7",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.54.0-next.7",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.54.0-next.7",
|
|
46
|
+
"@elliemae/ds-grid": "3.54.0-next.7",
|
|
47
|
+
"@elliemae/ds-icons": "3.54.0-next.7",
|
|
48
|
+
"@elliemae/ds-menu-items": "3.54.0-next.7",
|
|
49
|
+
"@elliemae/ds-pills-v2": "3.54.0-next.7",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.54.0-next.7",
|
|
51
|
+
"@elliemae/ds-system": "3.54.0-next.7",
|
|
52
|
+
"@elliemae/ds-truncated-tooltip-text": "3.54.0-next.7"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"jest": "~29.7.0",
|
|
58
58
|
"styled-components": "~5.3.9",
|
|
59
59
|
"styled-system": "^5.1.5",
|
|
60
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.54.0-next.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.54.0-next.
|
|
62
|
-
"@elliemae/ds-test-utils": "3.54.0-next.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.54.0-next.7",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.54.0-next.7",
|
|
62
|
+
"@elliemae/ds-test-utils": "3.54.0-next.7"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"@elliemae/pui-theme": "~2.13.0",
|