@elliemae/ds-form-combobox 3.55.0-next.1 → 3.55.0-next.11
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/constants/index.js +14 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js +15 -5
- package/dist/cjs/index.js.map +2 -2
- 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/parts/menu-list/MenuList.js +28 -32
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +6 -1
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/constants/index.js +14 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +15 -4
- package/dist/esm/index.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/parts/menu-list/MenuList.js +29 -33
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +6 -1
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/constants/index.d.ts +20 -10
- package/dist/types/index.d.ts +4 -3
- 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/dist/types/tests/DSCombobox.exports.test.d.ts +1 -0
- package/dist/types/tests/DSCombobox.get-owner-props.test.d.ts +1 -0
- package/package.json +16 -16
|
@@ -46,8 +46,21 @@ const FORM_COMBOBOX_SLOTS = {
|
|
|
46
46
|
SECTION_WRAPPER: "section-wrapper",
|
|
47
47
|
SECTION_LABEL: "section-label",
|
|
48
48
|
SINGLE_MENU_ITEM: "single-menu-item",
|
|
49
|
+
MULTI_MENU_ITEM: "multi-menu-item",
|
|
49
50
|
LOADING_INDICATOR: "loading-indicator",
|
|
50
51
|
SKELETON_MENU_ITEM: "skeleton-menu-item"
|
|
51
52
|
};
|
|
52
|
-
const FORM_COMBOBOX_DATA_TESTID =
|
|
53
|
+
const FORM_COMBOBOX_DATA_TESTID = {
|
|
54
|
+
...(0, import_ds_system.slotObjectToDataTestIds)(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
|
|
55
|
+
// legacy data-testid
|
|
56
|
+
CONTROLS_WRAPPER: "combobox-controls-wrapper",
|
|
57
|
+
CONTAINER: "combobox-container",
|
|
58
|
+
INPUT: "combobox-input",
|
|
59
|
+
LIST: "combobox-menu-list",
|
|
60
|
+
NO_MATCHES_FOUND: "combobox-no-matches-found",
|
|
61
|
+
SELECTED_VALUES: "combobox-selected-values",
|
|
62
|
+
DROPDOWN: "combobox-dropdown-btn",
|
|
63
|
+
OPTION: "combobox-option",
|
|
64
|
+
ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
|
|
65
|
+
};
|
|
53
66
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n // Same as old container\n ROOT: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n DROPDOWN_BUTTON: 'dropdown-button',\n FAST_LIST: 'fast-list',\n SECTION_WRAPPER: 'section-wrapper',\n SECTION_LABEL: 'section-label',\n SINGLE_MENU_ITEM: 'single-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n // Same as old container\n ROOT: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n DROPDOWN_BUTTON: 'dropdown-button',\n FAST_LIST: 'fast-list',\n SECTION_WRAPPER: 'section-wrapper',\n SECTION_LABEL: 'section-label',\n SINGLE_MENU_ITEM: 'single-menu-item',\n MULTI_MENU_ITEM: 'multi-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n // legacy data-testid\n CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n CONTAINER: 'combobox-container',\n INPUT: 'combobox-input',\n LIST: 'combobox-menu-list',\n NO_MATCHES_FOUND: 'combobox-no-matches-found',\n SELECTED_VALUES: 'combobox-selected-values',\n DROPDOWN: 'combobox-dropdown-btn',\n OPTION: 'combobox-option',\n ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
21
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
22
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -29,12 +28,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
29
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
29
|
var index_exports = {};
|
|
31
30
|
__export(index_exports, {
|
|
32
|
-
|
|
31
|
+
ComboboxDataTestid: () => import_ComboboxDataTestids.ComboboxDataTestid,
|
|
32
|
+
ComboboxPropTypes: () => import_react_desc_prop_types.ComboboxPropTypes,
|
|
33
|
+
DSComboBox: () => import_ComboBox.DSComboBox,
|
|
34
|
+
DSComboBoxName: () => import_theming.DSComboBoxName,
|
|
35
|
+
DSComboBoxV3: () => import_ComboBox.DSComboBoxV3,
|
|
36
|
+
DSComboBoxWithSchema: () => import_ComboBox.DSComboBoxWithSchema,
|
|
37
|
+
DSComboboxSlots: () => import_theming.DSComboboxSlots,
|
|
38
|
+
DSFormComboboxName: () => import_constants.DSFormComboboxName,
|
|
39
|
+
FORM_COMBOBOX_DATA_TESTID: () => import_constants.FORM_COMBOBOX_DATA_TESTID,
|
|
40
|
+
FORM_COMBOBOX_SLOTS: () => import_constants.FORM_COMBOBOX_SLOTS,
|
|
41
|
+
offScreenStyle: () => import_ComboBox.offScreenStyle
|
|
33
42
|
});
|
|
34
43
|
module.exports = __toCommonJS(index_exports);
|
|
35
44
|
var React = __toESM(require("react"));
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
var import_ComboBox = require("./ComboBox.js");
|
|
46
|
+
var import_theming = require("./theming.js");
|
|
47
|
+
var import_constants = require("./constants/index.js");
|
|
48
|
+
var import_ComboboxDataTestids = require("./ComboboxDataTestids.js");
|
|
39
49
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
50
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from './ComboBox.js';\nexport { DSComboBoxName, DSComboboxSlots } from './theming.js';\nexport { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from './constants/index.js';\nexport { ComboboxDataTestid } from './ComboboxDataTestids.js';\nexport { type DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAA+E;AAC/E,qBAAgD;AAChD,uBAAmF;AACnF,iCAAmC;AACnC,mCAAoD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4FnB;AA5FJ,8BAAsD;AACtD,uBAA0B;AAC1B,uCAA2C;AAC3C,mBAA2C;AAC3C,yBAAgC;AAChC,iCAAmC;AACnC,wBAA+B;AAC/B,oBAOO;AACP,8BAAiC;AACjC,mCAAsC;AAE/B,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,YAAI,kCAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC,cAAc,WAAW,cAAc,EAAE;AAAA,IAChH;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK,cAAc,WAAW,cAAc,EAAE;AAAA,IAChF;AACA,QAAI,UAAU;AACZ,aAAO,GAAG,WAAW;AAAA,IACvB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,gBAAgB,QAAQ,CAAC;AAE1C,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,QAAM,gBAAgB,CAAC,MAA8C;AACnE,MAAE,eAAe;AACjB,kBAAc,EAAE,cAAc,QAAQ,YAAY,CAAC;AACnD,gBAAY,SAAS,MAAM;AAAA,EAC7B;AACA,SACE,6CAAC,oCACC;AAAA,gDAAC,2CAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,4CAAC,wCAAuB,eAAY,QAClC,sDAAC,+DAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,SAAS,CAAC,SAAS,4CAAC,iCAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAM5G,4CAAC,iCAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,oBAAkB;AAAA,QAClB,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,cAAU,4BAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA,QACb,iBAAe;AAAA;AAAA,IACjB;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,YAAY,YAAY;AAAA;AAAA,IAC1B;AAAA,KACF;AAEJ;",
|
|
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
|
}
|
|
@@ -69,26 +69,32 @@ const MenuList = () => {
|
|
|
69
69
|
const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
|
|
70
70
|
e.preventDefault();
|
|
71
71
|
}, []);
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
72
|
+
let content;
|
|
73
|
+
if (isSkeleton) {
|
|
74
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
|
|
75
|
+
} else if (isLoading) {
|
|
76
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
|
|
77
|
+
} else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {
|
|
78
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
+
StyledFastList,
|
|
80
|
+
{
|
|
81
|
+
dsFastlistWrapperList: {
|
|
82
|
+
role: "listbox",
|
|
83
|
+
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
|
|
84
|
+
"aria-label": "listbox"
|
|
85
|
+
},
|
|
86
|
+
dsFastlistItem: { role: "none" },
|
|
87
|
+
actionRef: listRef,
|
|
88
|
+
count: filteredOptions.length,
|
|
89
|
+
ItemRenderer: import_useItemRenderer.ItemRenderer,
|
|
90
|
+
extraItemProps: { itemList: filteredOptions },
|
|
91
|
+
getId: (index) => filteredOptions[index].dsId,
|
|
92
|
+
estimateSize: estimatedSize,
|
|
93
|
+
getOwnerProps
|
|
94
|
+
}
|
|
95
|
+
) });
|
|
96
|
+
} else {
|
|
97
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
98
|
import_styled.StyledNoResultsWrapper,
|
|
93
99
|
{
|
|
94
100
|
id: `combo-listbox-${instanceUid}`,
|
|
@@ -97,17 +103,7 @@ const MenuList = () => {
|
|
|
97
103
|
children: noOptionsMessage
|
|
98
104
|
}
|
|
99
105
|
);
|
|
100
|
-
}
|
|
101
|
-
isSkeleton,
|
|
102
|
-
instanceUid,
|
|
103
|
-
isLoading,
|
|
104
|
-
filteredOptions,
|
|
105
|
-
onCreate,
|
|
106
|
-
noOptionsMessage,
|
|
107
|
-
menuMaxHeight,
|
|
108
|
-
listRef,
|
|
109
|
-
getOwnerProps
|
|
110
|
-
]);
|
|
106
|
+
}
|
|
111
107
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
108
|
import_styled.StyledListWrapper,
|
|
113
109
|
{
|
|
@@ -116,7 +112,7 @@ const MenuList = () => {
|
|
|
116
112
|
onMouseDown: preventLoseInputFocus,
|
|
117
113
|
width,
|
|
118
114
|
minWidth: menuMinWidth,
|
|
119
|
-
children:
|
|
115
|
+
children: content
|
|
120
116
|
}
|
|
121
117
|
);
|
|
122
118
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n maxHeight: SizingProps['maxHeight'];\n}>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\n\nexport const MenuList = (): JSX.Element => {\n const {\n props,\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n const { width } = useOnElementResize(controlsWrapperRef);\n\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n let content: JSX.Element;\n\n if (isSkeleton) {\n content = <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n } else if (isLoading) {\n content = <LoadingContainer getOwnerProps={getOwnerProps} />;\n } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {\n content = (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <StyledFastList\n dsFastlistWrapperList={{\n role: 'listbox',\n 'data-testid': ComboboxDataTestid.LIST,\n 'aria-label': 'listbox',\n }}\n dsFastlistItem={{ role: 'none' }}\n actionRef={listRef}\n count={filteredOptions.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList: filteredOptions }}\n getId={(index: number) => filteredOptions[index].dsId}\n estimateSize={estimatedSize}\n getOwnerProps={getOwnerProps}\n />\n </StyledItemsWrapper>\n );\n } else {\n content = (\n <StyledNoResultsWrapper\n id={`combo-listbox-${instanceUid}`}\n data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n role=\"alert\"\n >\n {noOptionsMessage}\n </StyledNoResultsWrapper>\n );\n }\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n {content}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDT;AAhDd,mBAA+C;AAC/C,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,8BAA8B;AAC9B,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AACnC,uBAAwD;AAExD,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AAErB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,MAAI;AAEJ,MAAI,YAAY;AACd,cAAU,4CAAC,8CAAkB,aAA0B,eAA8B;AAAA,EACvF,WAAW,WAAW;AACpB,cAAU,4CAAC,4CAAiB,eAA8B;AAAA,EAC5D,YAAY,iBAAiB,UAAU,KAAK,KAAK,UAAU;AACzD,cACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,MAAC;AAAA;AAAA,QACC,uBAAuB;AAAA,UACrB,MAAM;AAAA,UACN,eAAe,8CAAmB;AAAA,UAClC,cAAc;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,gBAAgB;AAAA,QACvB,cAAc;AAAA,QACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,QAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,QACjD,cAAc;AAAA,QACd;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,OAAO;AACL,cACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|