@elliemae/ds-form-combobox 3.55.0-next.7 → 3.55.0-next.9
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 +2 -4
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +2 -10
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/styled.js +1 -0
- package/dist/cjs/parts/controls-input/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/useControlsInput.js +13 -15
- package/dist/cjs/parts/controls-input/useControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +3 -22
- 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 +2 -4
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +2 -10
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/styled.js +1 -0
- package/dist/esm/parts/controls-input/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/useControlsInput.js +14 -16
- package/dist/esm/parts/controls-input/useControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/useMaskedOnChange.js +3 -22
- 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 +1 -4
- package/dist/types/parts/controls-input/ControlsInput.d.ts +1 -4
- package/dist/types/parts/controls-input/useControlsInput.d.ts +1 -4
- package/dist/types/parts/controls-input/useMaskedOnChange.d.ts +1 -4
- package/dist/types/react-desc-prop-types.d.ts +0 -1
- 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
|
|
86
|
+
const { refs, floatingStyles, context } = (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, {}),
|
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable consistent-return */\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2EnB;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,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,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;AAAA,QAET,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
|
}
|
|
@@ -43,9 +43,7 @@ var import_DropdownIndicator = require("../DropdownIndicator.js");
|
|
|
43
43
|
var import_multi_selected_values_container = require("../multi-selected-values-container/index.js");
|
|
44
44
|
var import_styled = require("./styled.js");
|
|
45
45
|
var import_useOnPillsNavigation = require("./useOnPillsNavigation.js");
|
|
46
|
-
const Controls = ({
|
|
47
|
-
mutableUpdateStyles
|
|
48
|
-
}) => {
|
|
46
|
+
const Controls = () => {
|
|
49
47
|
const {
|
|
50
48
|
props,
|
|
51
49
|
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
|
|
@@ -141,7 +139,7 @@ const Controls = ({
|
|
|
141
139
|
children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: selectedValues.label }) : null
|
|
142
140
|
}
|
|
143
141
|
) }),
|
|
144
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
|
|
145
143
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
146
144
|
!inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
147
145
|
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 { 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
|
|
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 { 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 = (): 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 />\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
|
}
|
|
@@ -43,9 +43,7 @@ var import_listHelper = require("../../utils/listHelper.js");
|
|
|
43
43
|
var import_styled = require("./styled.js");
|
|
44
44
|
var import_useControlsInput = require("./useControlsInput.js");
|
|
45
45
|
var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
|
|
46
|
-
const ControlsInput = ({
|
|
47
|
-
mutableUpdateStyles
|
|
48
|
-
}) => {
|
|
46
|
+
const ControlsInput = () => {
|
|
49
47
|
const {
|
|
50
48
|
props,
|
|
51
49
|
props: {
|
|
@@ -70,13 +68,7 @@ const ControlsInput = ({
|
|
|
70
68
|
instanceUid
|
|
71
69
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
72
70
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
73
|
-
const
|
|
74
|
-
() => ({
|
|
75
|
-
mutableUpdateStyles
|
|
76
|
-
}),
|
|
77
|
-
[mutableUpdateStyles]
|
|
78
|
-
);
|
|
79
|
-
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)(useControlsConfig);
|
|
71
|
+
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
|
|
80
72
|
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
81
73
|
const {
|
|
82
74
|
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 { 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
|
|
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 { 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 = (): 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\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\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
|
}
|
|
@@ -74,6 +74,7 @@ const StyledInput = (0, import_ds_system.styled)("input", {
|
|
|
74
74
|
&::placeholder {
|
|
75
75
|
color: transparent;
|
|
76
76
|
}
|
|
77
|
+
transition: none;
|
|
77
78
|
${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}
|
|
78
79
|
`;
|
|
79
80
|
const StyledInputPlaceHolder = import_ds_system.styled.div`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n line-height: 1rem;\n background: transparent;\n font-size: 1rem;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n line-height: 1rem;\n font-size: 1rem;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n line-height: 1rem;\n background: transparent;\n font-size: 1rem;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n transition: none;\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n line-height: 1rem;\n font-size: 1rem;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,9 +36,8 @@ 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
|
|
40
|
-
|
|
41
|
-
} = {}) => {
|
|
39
|
+
const PADDING_EXTRA = 2;
|
|
40
|
+
const useControlsInput = () => {
|
|
42
41
|
const {
|
|
43
42
|
props: { selectedValues, allOptions, placeholder, onFilter, inline },
|
|
44
43
|
setHasFocus,
|
|
@@ -48,23 +47,22 @@ const useControlsInput = ({
|
|
|
48
47
|
const [width, setWidth] = (0, import_react.useState)(1);
|
|
49
48
|
const spanReference = (0, import_react.useRef)(null);
|
|
50
49
|
const showPlaceholder = !inputValue && (inline || (0, import_listHelper.isSelectedValueEmpty)(selectedValues)) ? placeholder : null;
|
|
51
|
-
const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
|
|
52
|
-
(0, import_react.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
const spanReferenceText = (inputValue || "").replace(/\s/g, "\xA0") || "";
|
|
51
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
52
|
+
const el = spanReference.current;
|
|
53
|
+
if (!el) return;
|
|
54
|
+
const measured = Math.ceil(el.offsetWidth) + PADDING_EXTRA;
|
|
55
|
+
if (Math.abs(measured - width) >= 1) {
|
|
56
|
+
setWidth(measured);
|
|
57
57
|
}
|
|
58
|
-
}, [
|
|
59
|
-
const handleOnChange = (0, import_useMaskedOnChange.useMaskedOnChange)(
|
|
58
|
+
}, [spanReferenceText, width]);
|
|
59
|
+
const handleOnChange = (0, import_useMaskedOnChange.useMaskedOnChange)();
|
|
60
60
|
const handleOnBlur = (0, import_react.useCallback)(() => {
|
|
61
61
|
setInputValue("");
|
|
62
62
|
if (onFilter) onFilter(allOptions);
|
|
63
63
|
setHasFocus(false);
|
|
64
64
|
}, [setInputValue, onFilter, allOptions, setHasFocus]);
|
|
65
|
-
const handleOnFocus = (0, import_react.useCallback)(() =>
|
|
66
|
-
setHasFocus(true);
|
|
67
|
-
}, [setHasFocus]);
|
|
65
|
+
const handleOnFocus = (0, import_react.useCallback)(() => setHasFocus(true), [setHasFocus]);
|
|
68
66
|
return (0, import_react.useMemo)(
|
|
69
67
|
() => ({
|
|
70
68
|
handleOnBlur,
|
|
@@ -75,7 +73,7 @@ const useControlsInput = ({
|
|
|
75
73
|
width,
|
|
76
74
|
spanReference
|
|
77
75
|
}),
|
|
78
|
-
[handleOnBlur, handleOnChange, handleOnFocus,
|
|
76
|
+
[handleOnBlur, handleOnChange, handleOnFocus, showPlaceholder, spanReferenceText, width]
|
|
79
77
|
);
|
|
80
78
|
};
|
|
81
79
|
//# sourceMappingURL=useControlsInput.js.map
|
|
@@ -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,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { useContext, useLayoutEffect, 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}\n\nconst PADDING_EXTRA = 2; // espacio para el caret\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 const spanReference = useRef<HTMLSpanElement>(null);\n\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n\n const spanReferenceText = (inputValue || '').replace(/\\s/g, '\\u00a0') || '';\n\n useLayoutEffect(() => {\n const el = spanReference.current;\n if (!el) return;\n\n const measured = Math.ceil(el.offsetWidth) + PADDING_EXTRA;\n\n if (Math.abs(measured - width) >= 1) {\n setWidth(measured);\n }\n }, [spanReferenceText, width]);\n\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(() => setHasFocus(true), [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, showPlaceholder, spanReferenceText, width],\n );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoF;AACpF,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAYrC,MAAM,gBAAgB;AAEtB,MAAM,mBAAmB,MAAyB;AAChD,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;AACpC,QAAM,oBAAgB,qBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAAC,eAAe,cAAU,wCAAqB,cAAc,KAAK,cAAc;AAExG,QAAM,qBAAqB,cAAc,IAAI,QAAQ,OAAO,MAAQ,KAAK;AAEzE,oCAAgB,MAAM;AACpB,UAAM,KAAK,cAAc;AACzB,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,KAAK,KAAK,GAAG,WAAW,IAAI;AAE7C,QAAI,KAAK,IAAI,WAAW,KAAK,KAAK,GAAG;AACnC,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAE7B,QAAM,qBAAiB,4CAAkB;AAEzC,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,YAAY,IAAI,GAAG,CAAC,WAAW,CAAC;AAExE,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,iBAAiB,mBAAmB,KAAK;AAAA,EACzF;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -35,22 +35,13 @@ 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 = ({
|
|
39
|
-
mutableUpdateStyles
|
|
40
|
-
} = {}) => {
|
|
38
|
+
const useMaskedOnChange = () => {
|
|
41
39
|
const {
|
|
42
40
|
props: { useMask, onFilter, allOptions, applyAriaDisabled },
|
|
43
41
|
setMenuState,
|
|
44
42
|
setInputValue,
|
|
45
43
|
setFocusOptionIdx
|
|
46
44
|
} = (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]);
|
|
54
45
|
const handleOnChange = (0, import_react.useCallback)(
|
|
55
46
|
(e) => {
|
|
56
47
|
if (applyAriaDisabled) return;
|
|
@@ -60,26 +51,16 @@ const useMaskedOnChange = ({
|
|
|
60
51
|
}
|
|
61
52
|
setFocusOptionIdx("");
|
|
62
53
|
setInputValue(e.currentTarget.value);
|
|
63
|
-
repositionFloatingWrapper();
|
|
64
54
|
},
|
|
65
|
-
[
|
|
66
|
-
applyAriaDisabled,
|
|
67
|
-
setMenuState,
|
|
68
|
-
onFilter,
|
|
69
|
-
setFocusOptionIdx,
|
|
70
|
-
setInputValue,
|
|
71
|
-
repositionFloatingWrapper,
|
|
72
|
-
allOptions
|
|
73
|
-
]
|
|
55
|
+
[applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions]
|
|
74
56
|
);
|
|
75
57
|
const handleOnChangeMask = (0, import_react.useCallback)(
|
|
76
58
|
(e, mask) => {
|
|
77
59
|
setMenuState(true, "filter", e);
|
|
78
60
|
if (mask && onFilter) onFilter((0, import_listHelper.filterOptions)(mask, allOptions), mask);
|
|
79
61
|
else if (!mask && onFilter) onFilter(allOptions, "");
|
|
80
|
-
repositionFloatingWrapper();
|
|
81
62
|
},
|
|
82
|
-
[setMenuState, onFilter, allOptions
|
|
63
|
+
[setMenuState, onFilter, allOptions]
|
|
83
64
|
);
|
|
84
65
|
const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
|
|
85
66
|
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';\
|
|
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';\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, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\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 },\n [setMenuState, onFilter, allOptions],\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;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,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;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;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;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,UAAU,UAAU;AAAA,EACrC;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 { 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOvB,8BAAqD;AAI9C,SAAS,QAA6B,OAAgB;AAAC;
|
|
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 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;AAsGvD,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
|
|
53
|
+
const { refs, floatingStyles, context } = 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, {}),
|
|
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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\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;AC2EnB,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,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,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;AAAA,QAET,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
|
}
|
|
@@ -16,9 +16,7 @@ import {
|
|
|
16
16
|
StyleHeaderActionsSeparator
|
|
17
17
|
} from "./styled.js";
|
|
18
18
|
import { useOnPillsNavigation } from "./useOnPillsNavigation.js";
|
|
19
|
-
const Controls = ({
|
|
20
|
-
mutableUpdateStyles
|
|
21
|
-
}) => {
|
|
19
|
+
const Controls = () => {
|
|
22
20
|
const {
|
|
23
21
|
props,
|
|
24
22
|
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
|
|
@@ -114,7 +112,7 @@ const Controls = ({
|
|
|
114
112
|
children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: selectedValues.label }) : null
|
|
115
113
|
}
|
|
116
114
|
) }),
|
|
117
|
-
/* @__PURE__ */ jsx(ControlsInput, {
|
|
115
|
+
/* @__PURE__ */ jsx(ControlsInput, {}),
|
|
118
116
|
/* @__PURE__ */ jsx("div", {}),
|
|
119
117
|
!inline && /* @__PURE__ */ jsxs(
|
|
120
118
|
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 { 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
|
|
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 { 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 = (): 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 />\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
|
}
|
|
@@ -17,9 +17,7 @@ import {
|
|
|
17
17
|
} from "./styled.js";
|
|
18
18
|
import { useControlsInput } from "./useControlsInput.js";
|
|
19
19
|
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
20
|
-
const ControlsInput = ({
|
|
21
|
-
mutableUpdateStyles
|
|
22
|
-
}) => {
|
|
20
|
+
const ControlsInput = () => {
|
|
23
21
|
const {
|
|
24
22
|
props,
|
|
25
23
|
props: {
|
|
@@ -44,13 +42,7 @@ const ControlsInput = ({
|
|
|
44
42
|
instanceUid
|
|
45
43
|
} = useContext(ComboBoxContext);
|
|
46
44
|
const { onInputKeyDown } = useKeyboardNavigation();
|
|
47
|
-
const
|
|
48
|
-
() => ({
|
|
49
|
-
mutableUpdateStyles
|
|
50
|
-
}),
|
|
51
|
-
[mutableUpdateStyles]
|
|
52
|
-
);
|
|
53
|
-
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput(useControlsConfig);
|
|
45
|
+
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
|
|
54
46
|
const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
|
|
55
47
|
const {
|
|
56
48
|
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 { 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
|
|
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 { 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 = (): 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\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n line-height: 1rem;\n background: transparent;\n font-size: 1rem;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n line-height: 1rem;\n font-size: 1rem;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border: none;\n outline: none;\n background: transparent;\n width: 100%;\n &:focus {\n outline: none;\n }\n ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n line-height: 1rem;\n background: transparent;\n font-size: 1rem;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n transition: none;\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n\n line-height: 1rem;\n font-size: 1rem;\n\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n display: none;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { useContext,
|
|
2
|
+
import { useContext, useLayoutEffect, useMemo, useRef, useCallback, useState } from "react";
|
|
3
3
|
import { useMaskedOnChange } from "./useMaskedOnChange.js";
|
|
4
4
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
5
5
|
import { isSelectedValueEmpty } from "../../utils/listHelper.js";
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
} = {}) => {
|
|
6
|
+
const PADDING_EXTRA = 2;
|
|
7
|
+
const useControlsInput = () => {
|
|
9
8
|
const {
|
|
10
9
|
props: { selectedValues, allOptions, placeholder, onFilter, inline },
|
|
11
10
|
setHasFocus,
|
|
@@ -15,23 +14,22 @@ const useControlsInput = ({
|
|
|
15
14
|
const [width, setWidth] = useState(1);
|
|
16
15
|
const spanReference = useRef(null);
|
|
17
16
|
const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;
|
|
18
|
-
const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
const spanReferenceText = (inputValue || "").replace(/\s/g, "\xA0") || "";
|
|
18
|
+
useLayoutEffect(() => {
|
|
19
|
+
const el = spanReference.current;
|
|
20
|
+
if (!el) return;
|
|
21
|
+
const measured = Math.ceil(el.offsetWidth) + PADDING_EXTRA;
|
|
22
|
+
if (Math.abs(measured - width) >= 1) {
|
|
23
|
+
setWidth(measured);
|
|
24
24
|
}
|
|
25
|
-
}, [
|
|
26
|
-
const handleOnChange = useMaskedOnChange(
|
|
25
|
+
}, [spanReferenceText, width]);
|
|
26
|
+
const handleOnChange = useMaskedOnChange();
|
|
27
27
|
const handleOnBlur = useCallback(() => {
|
|
28
28
|
setInputValue("");
|
|
29
29
|
if (onFilter) onFilter(allOptions);
|
|
30
30
|
setHasFocus(false);
|
|
31
31
|
}, [setInputValue, onFilter, allOptions, setHasFocus]);
|
|
32
|
-
const handleOnFocus = useCallback(() =>
|
|
33
|
-
setHasFocus(true);
|
|
34
|
-
}, [setHasFocus]);
|
|
32
|
+
const handleOnFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
|
|
35
33
|
return useMemo(
|
|
36
34
|
() => ({
|
|
37
35
|
handleOnBlur,
|
|
@@ -42,7 +40,7 @@ const useControlsInput = ({
|
|
|
42
40
|
width,
|
|
43
41
|
spanReference
|
|
44
42
|
}),
|
|
45
|
-
[handleOnBlur, handleOnChange, handleOnFocus,
|
|
43
|
+
[handleOnBlur, handleOnChange, handleOnFocus, showPlaceholder, spanReferenceText, width]
|
|
46
44
|
);
|
|
47
45
|
};
|
|
48
46
|
export {
|
|
@@ -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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useLayoutEffect, 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}\n\nconst PADDING_EXTRA = 2; // espacio para el caret\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 const spanReference = useRef<HTMLSpanElement>(null);\n\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n\n const spanReferenceText = (inputValue || '').replace(/\\s/g, '\\u00a0') || '';\n\n useLayoutEffect(() => {\n const el = spanReference.current;\n if (!el) return;\n\n const measured = Math.ceil(el.offsetWidth) + PADDING_EXTRA;\n\n if (Math.abs(measured - width) >= 1) {\n setWidth(measured);\n }\n }, [spanReferenceText, width]);\n\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(() => setHasFocus(true), [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, showPlaceholder, spanReferenceText, width],\n );\n};\n\nexport { useControlsInput };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,iBAAiB,SAAS,QAAQ,aAAa,gBAAgB;AACpF,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,4BAA4B;AAYrC,MAAM,gBAAgB;AAEtB,MAAM,mBAAmB,MAAyB;AAChD,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;AACpC,QAAM,gBAAgB,OAAwB,IAAI;AAElD,QAAM,kBAAkB,CAAC,eAAe,UAAU,qBAAqB,cAAc,KAAK,cAAc;AAExG,QAAM,qBAAqB,cAAc,IAAI,QAAQ,OAAO,MAAQ,KAAK;AAEzE,kBAAgB,MAAM;AACpB,UAAM,KAAK,cAAc;AACzB,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,KAAK,KAAK,GAAG,WAAW,IAAI;AAE7C,QAAI,KAAK,IAAI,WAAW,KAAK,KAAK,GAAG;AACnC,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAE7B,QAAM,iBAAiB,kBAAkB;AAEzC,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,YAAY,IAAI,GAAG,CAAC,WAAW,CAAC;AAExE,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,iBAAiB,mBAAmB,KAAK;AAAA,EACzF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,22 +2,13 @@ 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 = ({
|
|
6
|
-
mutableUpdateStyles
|
|
7
|
-
} = {}) => {
|
|
5
|
+
const useMaskedOnChange = () => {
|
|
8
6
|
const {
|
|
9
7
|
props: { useMask, onFilter, allOptions, applyAriaDisabled },
|
|
10
8
|
setMenuState,
|
|
11
9
|
setInputValue,
|
|
12
10
|
setFocusOptionIdx
|
|
13
11
|
} = useContext(ComboBoxContext);
|
|
14
|
-
const repositionFloatingWrapper = useCallback(() => {
|
|
15
|
-
if (mutableUpdateStyles && mutableUpdateStyles.current) {
|
|
16
|
-
requestAnimationFrame(() => {
|
|
17
|
-
mutableUpdateStyles.current();
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
}, [mutableUpdateStyles]);
|
|
21
12
|
const handleOnChange = useCallback(
|
|
22
13
|
(e) => {
|
|
23
14
|
if (applyAriaDisabled) return;
|
|
@@ -27,26 +18,16 @@ const useMaskedOnChange = ({
|
|
|
27
18
|
}
|
|
28
19
|
setFocusOptionIdx("");
|
|
29
20
|
setInputValue(e.currentTarget.value);
|
|
30
|
-
repositionFloatingWrapper();
|
|
31
21
|
},
|
|
32
|
-
[
|
|
33
|
-
applyAriaDisabled,
|
|
34
|
-
setMenuState,
|
|
35
|
-
onFilter,
|
|
36
|
-
setFocusOptionIdx,
|
|
37
|
-
setInputValue,
|
|
38
|
-
repositionFloatingWrapper,
|
|
39
|
-
allOptions
|
|
40
|
-
]
|
|
22
|
+
[applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions]
|
|
41
23
|
);
|
|
42
24
|
const handleOnChangeMask = useCallback(
|
|
43
25
|
(e, mask) => {
|
|
44
26
|
setMenuState(true, "filter", e);
|
|
45
27
|
if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);
|
|
46
28
|
else if (!mask && onFilter) onFilter(allOptions, "");
|
|
47
|
-
repositionFloatingWrapper();
|
|
48
29
|
},
|
|
49
|
-
[setMenuState, onFilter, allOptions
|
|
30
|
+
[setMenuState, onFilter, allOptions]
|
|
50
31
|
);
|
|
51
32
|
const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
|
|
52
33
|
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';\
|
|
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';\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, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\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 },\n [setMenuState, onFilter, allOptions],\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;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,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;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;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;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,UAAU,UAAU;AAAA,EACrC;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 { 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACOvB,SAAS,2BAA2B,iBAAiB;AAI9C,SAAS,QAA6B,OAAgB;AAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type { 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 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;AAsGvD,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,4 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const ControlsInput: ({ mutableUpdateStyles, }: {
|
|
3
|
-
mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;
|
|
4
|
-
}) => JSX.Element;
|
|
1
|
+
export declare const ControlsInput: () => JSX.Element;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { type DSComboboxT } from '../../react-desc-prop-types.js';
|
|
2
1
|
interface UseControlsInputT {
|
|
3
2
|
handleOnBlur: () => void;
|
|
4
3
|
handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
@@ -8,7 +7,5 @@ interface UseControlsInputT {
|
|
|
8
7
|
width: number;
|
|
9
8
|
spanReference: React.Ref<HTMLSpanElement>;
|
|
10
9
|
}
|
|
11
|
-
declare const useControlsInput: (
|
|
12
|
-
mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;
|
|
13
|
-
}) => UseControlsInputT;
|
|
10
|
+
declare const useControlsInput: () => UseControlsInputT;
|
|
14
11
|
export { useControlsInput };
|
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const useMaskedOnChange: ({ mutableUpdateStyles, }?: {
|
|
3
|
-
mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;
|
|
4
|
-
}) => import("react").ChangeEventHandler<HTMLInputElement>;
|
|
1
|
+
declare const useMaskedOnChange: () => import("react").ChangeEventHandler<HTMLInputElement>;
|
|
5
2
|
export { useMaskedOnChange };
|
|
@@ -8,7 +8,6 @@ import type React from 'react';
|
|
|
8
8
|
export declare function noop<T extends unknown[]>(..._args: T): void;
|
|
9
9
|
export declare namespace DSComboboxT {
|
|
10
10
|
type ReturnOfUseFloatingContext = ReturnType<typeof useFloatingContext>;
|
|
11
|
-
type PopperMutableUpdateStylesT = ReturnOfUseFloatingContext['mutableUpdateStyles'];
|
|
12
11
|
interface CommonItemOptions extends GlobalAttributesT {
|
|
13
12
|
dsId: string;
|
|
14
13
|
disabled?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.55.0-next.
|
|
3
|
+
"version": "3.55.0-next.9",
|
|
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-button-v2": "3.55.0-next.
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.55.0-next.
|
|
43
|
-
"@elliemae/ds-fast-list": "3.55.0-next.
|
|
44
|
-
"@elliemae/ds-floating-context": "3.55.0-next.
|
|
45
|
-
"@elliemae/ds-form-checkbox": "3.55.0-next.
|
|
46
|
-
"@elliemae/ds-grid": "3.55.0-next.
|
|
47
|
-
"@elliemae/ds-menu-items": "3.55.0-next.
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-props-helpers": "3.55.0-next.
|
|
51
|
-
"@elliemae/ds-system": "3.55.0-next.
|
|
52
|
-
"@elliemae/ds-truncated-tooltip-text": "3.55.0-next.
|
|
41
|
+
"@elliemae/ds-button-v2": "3.55.0-next.9",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.55.0-next.9",
|
|
43
|
+
"@elliemae/ds-fast-list": "3.55.0-next.9",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.55.0-next.9",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.55.0-next.9",
|
|
46
|
+
"@elliemae/ds-grid": "3.55.0-next.9",
|
|
47
|
+
"@elliemae/ds-menu-items": "3.55.0-next.9",
|
|
48
|
+
"@elliemae/ds-pills-v2": "3.55.0-next.9",
|
|
49
|
+
"@elliemae/ds-icons": "3.55.0-next.9",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.55.0-next.9",
|
|
51
|
+
"@elliemae/ds-system": "3.55.0-next.9",
|
|
52
|
+
"@elliemae/ds-truncated-tooltip-text": "3.55.0-next.9"
|
|
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.55.0-next.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.55.0-next.
|
|
62
|
-
"@elliemae/ds-test-utils": "3.55.0-next.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.55.0-next.9",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.55.0-next.9",
|
|
62
|
+
"@elliemae/ds-test-utils": "3.55.0-next.9"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"@elliemae/pui-theme": "~2.13.0",
|