@elliemae/ds-form-combobox 3.53.0-next.11 → 3.53.0-next.12
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 +51 -0
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/parts/DropdownIndicator.js +10 -1
- package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
- package/dist/cjs/parts/Section.js +20 -2
- package/dist/cjs/parts/Section.js.map +3 -3
- package/dist/cjs/parts/container/Container.js +3 -0
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +5 -0
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +4 -0
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/menu-list/LoadingContainer.js +6 -1
- package/dist/cjs/parts/menu-list/LoadingContainer.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +24 -5
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/SkeletonContainer.js +12 -2
- package/dist/cjs/parts/menu-list/SkeletonContainer.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +16 -4
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +3 -3
- package/dist/esm/constants/index.js +21 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/parts/DropdownIndicator.js +10 -1
- package/dist/esm/parts/DropdownIndicator.js.map +2 -2
- package/dist/esm/parts/Section.js +20 -2
- package/dist/esm/parts/Section.js.map +2 -2
- package/dist/esm/parts/container/Container.js +4 -1
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +5 -0
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +5 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/menu-list/LoadingContainer.js +6 -1
- package/dist/esm/parts/menu-list/LoadingContainer.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +24 -5
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/SkeletonContainer.js +12 -2
- package/dist/esm/parts/menu-list/SkeletonContainer.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +16 -4
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/types/constants/index.d.ts +12 -0
- package/dist/types/parts/menu-list/LoadingContainer.d.ts +3 -1
- package/dist/types/parts/menu-list/SkeletonContainer.d.ts +2 -1
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +1 -1
- package/package.json +15 -15
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var constants_exports = {};
|
|
30
|
+
__export(constants_exports, {
|
|
31
|
+
DSFormComboboxName: () => DSFormComboboxName,
|
|
32
|
+
FORM_COMBOBOX_DATA_TESTID: () => FORM_COMBOBOX_DATA_TESTID,
|
|
33
|
+
FORM_COMBOBOX_SLOTS: () => FORM_COMBOBOX_SLOTS
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(constants_exports);
|
|
36
|
+
var React = __toESM(require("react"));
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
const DSFormComboboxName = "DSCombobox";
|
|
39
|
+
const FORM_COMBOBOX_SLOTS = {
|
|
40
|
+
// Same as old container
|
|
41
|
+
ROOT: "root",
|
|
42
|
+
INPUT_WRAPPER: "input-wrapper",
|
|
43
|
+
INPUT: "input",
|
|
44
|
+
DROPDOWN_BUTTON: "dropdown-button",
|
|
45
|
+
FAST_LIST: "fast-list",
|
|
46
|
+
SINGLE_MENU_ITEM: "single-menu-item",
|
|
47
|
+
LOADING_INDICATOR: "loading-indicator",
|
|
48
|
+
SKELETON_MENU_ITEM: "skeleton-menu-item"
|
|
49
|
+
};
|
|
50
|
+
const FORM_COMBOBOX_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSFormComboboxName, FORM_COMBOBOX_SLOTS);
|
|
51
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 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,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,gCAA4B,0CAAwB,oBAAoB,mBAAmB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -37,9 +37,14 @@ var import_react = require("react");
|
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
39
39
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
40
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
41
|
var import_ComboBoxCTX = __toESM(require("../ComboBoxCTX.js"));
|
|
41
42
|
var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
|
|
42
|
-
|
|
43
|
+
var import_constants = require("../constants/index.js");
|
|
44
|
+
const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
|
|
45
|
+
name: import_constants.DSFormComboboxName,
|
|
46
|
+
slot: import_constants.FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON
|
|
47
|
+
})`
|
|
43
48
|
&:focus::after {
|
|
44
49
|
border: none;
|
|
45
50
|
}
|
|
@@ -55,16 +60,20 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DS
|
|
|
55
60
|
`;
|
|
56
61
|
const DropdownIndicator = () => {
|
|
57
62
|
const {
|
|
63
|
+
props,
|
|
58
64
|
props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
|
|
59
65
|
menuState,
|
|
60
66
|
instanceUid
|
|
61
67
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
68
|
+
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
62
69
|
const handleOnClick = (0, import_react.useCallback)((e) => {
|
|
63
70
|
e.preventDefault();
|
|
64
71
|
}, []);
|
|
65
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
73
|
StyledDropDownButton,
|
|
67
74
|
{
|
|
75
|
+
getOwnerProps,
|
|
76
|
+
getOwnerPropsArguments,
|
|
68
77
|
onClick: handleOnClick,
|
|
69
78
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
|
|
70
79
|
"aria-controls": `combo-listbox-${instanceUid}`,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)<{ applyAriaDisabled: boolean }>`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n }\n\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n size=\"s\"\n applyAriaDisabled={applyAriaDisabled}\n >\n <ChevronSmallDown size=\"s\" />\n </StyledDropDownButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV2, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean }>`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n }\n\n ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props,\n props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n size=\"s\"\n applyAriaDisabled={applyAriaDisabled}\n >\n <ChevronSmallDown size=\"s\" />\n </StyledDropDownButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AA7DN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,8BAA8B;AAC9B,yBAA4B;AAC5B,iCAAmC;AACnC,uBAAwD;AAExD,MAAM,2BAAuB,yBAAO,gCAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,oBACJ,0BAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -37,9 +37,11 @@ var import_react = require("react");
|
|
|
37
37
|
var import_react2 = __toESM(require("react"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_ds_menu_items = require("@elliemae/ds-menu-items");
|
|
40
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
41
|
var import_constants = require("../constants.js");
|
|
41
42
|
var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
|
|
42
43
|
var import_listHelper = require("../utils/listHelper.js");
|
|
44
|
+
var import_constants2 = require("../constants/index.js");
|
|
43
45
|
const StyledSectionWrapper = (0, import_ds_system.styled)("section")`
|
|
44
46
|
list-style: none;
|
|
45
47
|
min-height: 24px;
|
|
@@ -54,20 +56,36 @@ const StyledSectionLabel = (0, import_ds_system.styled)("header")`
|
|
|
54
56
|
font-size: 1rem;
|
|
55
57
|
color: neutral-500;
|
|
56
58
|
`;
|
|
59
|
+
const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SingleMenuItem, {
|
|
60
|
+
name: import_constants2.DSFormComboboxName,
|
|
61
|
+
slot: import_constants2.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM
|
|
62
|
+
})``;
|
|
57
63
|
const Section = import_react2.default.memo((props) => {
|
|
58
64
|
const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } = props;
|
|
59
65
|
const id = `${label.replace(/ /g, "")}-section`;
|
|
60
|
-
const
|
|
66
|
+
const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
67
|
+
const CBItem = Array.isArray(selectedValues) ? import_ds_menu_items.MultiMenuItem : StyledSingleMenuItem;
|
|
61
68
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSectionWrapper, { role: "group", "aria-labelledby": id, style: wrapperStyles, innerRef, children: [
|
|
62
69
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSectionLabel, { id, role: "presentation", children: label }),
|
|
63
70
|
options?.map((option) => {
|
|
64
|
-
const {
|
|
71
|
+
const {
|
|
72
|
+
dsId,
|
|
73
|
+
type,
|
|
74
|
+
value,
|
|
75
|
+
label: optionLabel,
|
|
76
|
+
readOnly,
|
|
77
|
+
disabled,
|
|
78
|
+
applyAriaDisabled,
|
|
79
|
+
render,
|
|
80
|
+
...rest
|
|
81
|
+
} = option;
|
|
65
82
|
if (type === import_constants.MENU_OPTION_TYPES.SEPARATOR) {
|
|
66
83
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Separator, {}, dsId);
|
|
67
84
|
}
|
|
68
85
|
return /* @__PURE__ */ (0, import_react.createElement)(
|
|
69
86
|
CBItem,
|
|
70
87
|
{
|
|
88
|
+
getOwnerProps,
|
|
71
89
|
value,
|
|
72
90
|
label: optionLabel,
|
|
73
91
|
dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Section.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles: React.CSSProperties;\n innerRef: (instance: HTMLDivElement | null) => void;\n options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n focusOptionIdx: string;\n selectedValues: DSComboboxT.SelectedOptionsT;\n}\n\nconst StyledSectionWrapper = styled('section')`\n list-style: none;\n min-height: 24px;\n display: grid;\n align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header')`\n display: flex;\n align-items: center;\n padding: 0px 16px;\n min-height: 24px;\n font-size: 1rem;\n color: neutral-500;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } =\n props;\n const id = `${label.replace(/ /g, '')}-section`;\n\n const CBItem = Array.isArray(selectedValues) ? MultiMenuItem :
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["import_react", "React"]
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles: React.CSSProperties;\n innerRef: (instance: HTMLDivElement | null) => void;\n options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n focusOptionIdx: string;\n selectedValues: DSComboboxT.SelectedOptionsT;\n}\n\nconst StyledSectionWrapper = styled('section')`\n list-style: none;\n min-height: 24px;\n display: grid;\n align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header')`\n display: flex;\n align-items: center;\n padding: 0px 16px;\n min-height: 24px;\n font-size: 1rem;\n color: neutral-500;\n`;\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n})``;\n\nexport const Section = React.memo((props: SectionProps) => {\n const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } =\n props;\n const id = `${label.replace(/ /g, '')}-section`;\n const { getOwnerProps } = useOwnerProps(props);\n\n const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : StyledSingleMenuItem;\n\n return (\n <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n <StyledSectionLabel id={id} role=\"presentation\">\n {label}\n </StyledSectionLabel>\n {options?.map((option) => {\n const {\n dsId,\n type,\n value,\n label: optionLabel,\n readOnly,\n disabled,\n applyAriaDisabled,\n render,\n ...rest\n } = option;\n\n if (type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator key={dsId} />;\n }\n\n return (\n <CBItem\n getOwnerProps={getOwnerProps}\n value={value}\n label={optionLabel}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n if (applyAriaDisabled) return;\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n {...rest}\n key={option.dsId}\n dsId={option.dsId}\n />\n );\n })}\n </StyledSectionWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDnB;AAsBM;AA1EV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,2BAAyD;AACzD,8BAA8B;AAC9B,uBAAkC;AAElC,iCAAmC;AAEnC,wBAA2B;AAC3B,IAAAC,oBAAwD;AAaxD,MAAM,2BAAuB,yBAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,yBAAqB,yBAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1C,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAoB;AAC5B,CAAC;AAEM,MAAM,UAAU,cAAAC,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,gBAAgB,UAAU,mBAAmB,SAAS,YAAY,IAC9G;AACF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAE7C,QAAM,SAAS,MAAM,QAAQ,cAAc,IAAI,qCAAgB;AAE/D,SACE,6CAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,gDAAC,sBAAmB,IAAQ,MAAK,gBAC9B,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WAAW;AACxB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI;AAEJ,UAAI,SAAS,mCAAkB,WAAW;AACxC,eAAO,4CAAC,oCAAe,IAAM;AAAA,MAC/B;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,YAAY,8CAAmB;AAAA,UAC/B;AAAA,UACA,mBAAmB,qBAAqB;AAAA,UACxC,SAAS,CAAC,MAA0C;AAClD,gBAAI,kBAAmB;AACvB,wBAAY,QAAQ,CAAC;AAAA,UACvB;AAAA,UACA,aAAa;AAAA,UACb,UAAU,SAAS;AAAA,UACnB,gBAAY,8BAAW,gBAAgB,MAAM;AAAA,UAC7C,UAAU;AAAA,UACT,GAAG;AAAA,UACJ,KAAK,OAAO;AAAA,UACZ,MAAM,OAAO;AAAA;AAAA,MACf;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ,CAAC;",
|
|
6
|
+
"names": ["import_react", "import_constants", "React"]
|
|
7
7
|
}
|
|
@@ -50,6 +50,7 @@ const Container = () => {
|
|
|
50
50
|
const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
|
|
51
51
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
52
52
|
const { zIndex, ...xStyledProps } = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
53
|
+
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
53
54
|
const correctZIndex = zIndex ? parseInt(zIndex, 10) : void 0;
|
|
54
55
|
const { className, "data-testid": dataTestId } = globalAttributes;
|
|
55
56
|
const handleMouseDown = (0, import_react.useCallback)((e) => {
|
|
@@ -96,6 +97,8 @@ const Container = () => {
|
|
|
96
97
|
className,
|
|
97
98
|
applyAriaDisabled,
|
|
98
99
|
...xStyledProps,
|
|
100
|
+
getOwnerProps,
|
|
101
|
+
getOwnerPropsArguments,
|
|
99
102
|
children: [
|
|
100
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
|
|
101
104
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
|
|
@@ -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 } 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\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 >\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;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n 'data-testid'?: string;\n };\n const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n if (menuState) setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [menuState, setMenuState]);\n\n const config = useMemo(\n () => ({\n placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n withoutAnimation: true,\n startPlacementPreference,\n placementOrderPreference,\n zIndex: correctZIndex,\n customOffset: [0, 5] as [number, number],\n handleCloseMenu,\n portalDOMContainer: document.body,\n externallyControlledIsOpen: menuState,\n }),\n [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n );\n\n const { refs, floatingStyles, context } = useFloatingContext(config);\n\n const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n const hideTooltip = useCallback(() => {\n setMenuState(false, 'blur');\n }, [setMenuState]);\n\n useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n return (\n <StyledContainer\n data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n innerRef={comboboxRef}\n className={className}\n applyAriaDisabled={applyAriaDisabled}\n {...xStyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <LiveRegion />\n <Controls />\n\n {menuState && inline ? <MenuList /> : null}\n {menuState && !inline && referenceElement ? (\n <FloatingWrapper\n innerRef={refs.setFloating}\n floatingStyles={floatingStyles}\n isOpen={menuState}\n context={context}\n {...props.popperProps}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n <MenuList />\n </StyledPopperWrapper>\n </FloatingWrapper>\n ) : null}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAzEJ,mBAAmE;AACnE,8BAA0E;AAC1E,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,QAAI,yBAAW,mBAAAC,OAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,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
|
}
|
|
@@ -35,6 +35,7 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
37
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
39
|
var import_DropdownIndicator = require("../DropdownIndicator.js");
|
|
39
40
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
40
41
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
@@ -44,6 +45,7 @@ var import_ControlsInput = require("../controls-input/ControlsInput.js");
|
|
|
44
45
|
var import_useOnPillsNavigation = require("./useOnPillsNavigation.js");
|
|
45
46
|
const Controls = () => {
|
|
46
47
|
const {
|
|
48
|
+
props,
|
|
47
49
|
props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
|
|
48
50
|
selectedOptionsRef,
|
|
49
51
|
setMenuState,
|
|
@@ -57,6 +59,7 @@ const Controls = () => {
|
|
|
57
59
|
internalRef,
|
|
58
60
|
shouldPreventContextMenuOpening
|
|
59
61
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
62
|
+
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
60
63
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
|
61
64
|
if (disabled) return;
|
|
62
65
|
if (applyAriaDisabled || shouldPreventContextMenuOpening) {
|
|
@@ -111,6 +114,8 @@ const Controls = () => {
|
|
|
111
114
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
112
115
|
import_styled.StyledControlsWrapper,
|
|
113
116
|
{
|
|
117
|
+
getOwnerProps,
|
|
118
|
+
getOwnerPropsArguments,
|
|
114
119
|
innerRef: controlsWrapperRef,
|
|
115
120
|
readOnly,
|
|
116
121
|
cols,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, 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 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 innerRef={controlsWrapperRef}\n readOnly={readOnly}\n cols={cols}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n aria-disabled={applyAriaDisabled}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper\n readOnly={readOnly}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n </StyledSingleSelectWraper>\n )}\n </StyledSelection>\n )}\n\n <ControlsInput />\n {/** This empty div is a gap between the input and the drop down indicator */}\n <div />\n {!inline && (\n <StyledHeaderActionsWrapper\n justifyItems=\"center\"\n cols={['min-content', 'minmax(28px,max-content)']}\n justifyContent=\"flex-end\"\n >\n <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n const {\n props,\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
|
}
|
|
@@ -45,6 +45,7 @@ var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
|
45
45
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
46
46
|
const ControlsInput = () => {
|
|
47
47
|
const {
|
|
48
|
+
props,
|
|
48
49
|
props: {
|
|
49
50
|
autoFocus,
|
|
50
51
|
inline,
|
|
@@ -68,6 +69,7 @@ const ControlsInput = () => {
|
|
|
68
69
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
69
70
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
70
71
|
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
|
|
72
|
+
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
71
73
|
const {
|
|
72
74
|
tabIndex,
|
|
73
75
|
id,
|
|
@@ -114,6 +116,8 @@ const ControlsInput = () => {
|
|
|
114
116
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
115
117
|
import_styled.StyledInput,
|
|
116
118
|
{
|
|
119
|
+
getOwnerProps,
|
|
120
|
+
getOwnerPropsArguments,
|
|
117
121
|
onBlur: handleOnBlur,
|
|
118
122
|
onFocus: handleOnFocus,
|
|
119
123
|
readOnly: readOnly || onlySelectable,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n StyledInput,\n StyledInputWrapper,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledHiddenDiv,\n StyleHiddenInput,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n const currentPlaceholder = useMemo(() => {\n if (isArrayOfItems(selectedValues)) {\n return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (typeof selectedValues?.label === 'string') {\n return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (readOnly) {\n return `${placeholder}. Read only`;\n }\n return placeholder;\n }, [placeholder, selectedValues, readOnly]);\n\n const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n setInputValue(e.clipboardData.getData('text/plain'));\n internalRef.current?.focus();\n };\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder aria-hidden=\"true\">\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n {/* Fix for PUI-11597 */}\n {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n {/* Fix for PUI-9609 */}\n <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={readOnly || onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={currentPlaceholder}\n aria-activedescendant={activeDescendant}\n aria-expanded={menuState}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-describedby={actualAriaDescribedBy}\n aria-autocomplete=\"list\"\n role=\"combobox\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n style={{ width }}\n innerRef={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n name=\"hidden\"\n tabIndex={-1}\n onPaste={handleOnPaste}\n aria-hidden=\"true\"\n isDisabled={disabled || applyAriaDisabled}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n StyledInput,\n StyledInputWrapper,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledHiddenDiv,\n StyleHiddenInput,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props,\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n const currentPlaceholder = useMemo(() => {\n if (isArrayOfItems(selectedValues)) {\n return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (typeof selectedValues?.label === 'string') {\n return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n }\n if (readOnly) {\n return `${placeholder}. Read only`;\n }\n return placeholder;\n }, [placeholder, selectedValues, readOnly]);\n\n const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n setInputValue(e.clipboardData.getData('text/plain'));\n internalRef.current?.focus();\n };\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder aria-hidden=\"true\">\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n {/* Fix for PUI-11597 */}\n {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n {/* Fix for PUI-9609 */}\n <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n <StyledInput\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={readOnly || onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={currentPlaceholder}\n aria-activedescendant={activeDescendant}\n aria-expanded={menuState}\n aria-controls={`combo-listbox-${instanceUid}`}\n aria-describedby={actualAriaDescribedBy}\n aria-autocomplete=\"list\"\n role=\"combobox\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n style={{ width }}\n innerRef={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n name=\"hidden\"\n tabIndex={-1}\n onPaste={handleOnPaste}\n aria-hidden=\"true\"\n isDisabled={disabled || applyAriaDisabled}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,11 +36,16 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
|
|
39
|
+
var import_constants = require("../../constants/index.js");
|
|
39
40
|
const Wrapper = import_ds_system.styled.div`
|
|
40
41
|
display: flex;
|
|
41
42
|
justify-content: center;
|
|
42
43
|
height: 56px;
|
|
43
44
|
`;
|
|
44
|
-
const
|
|
45
|
+
const StyledDSCircularIndeterminateIndicator = (0, import_ds_system.styled)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, {
|
|
46
|
+
name: import_constants.DSFormComboboxName,
|
|
47
|
+
slot: import_constants.FORM_COMBOBOX_SLOTS.LOADING_INDICATOR
|
|
48
|
+
})``;
|
|
49
|
+
const LoadingContainer = ({ getOwnerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { id: "combobox-list", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps }) });
|
|
45
50
|
var LoadingContainer_default = LoadingContainer;
|
|
46
51
|
//# sourceMappingURL=LoadingContainer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/LoadingContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\n\nconst LoadingContainer = () => (\n <Wrapper id=\"combobox-list\">\n <
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({ getOwnerProps }: { getOwnerProps: () => object }) => (\n <Wrapper id=\"combobox-list\">\n <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAhBJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AAExD,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAKvB,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC,EAAE,cAAc,MACxC,4CAAC,WAAQ,IAAG,iBACV,sDAAC,0CAAuC,MAAK,KAAI,eAA8B,GACjF;AAIF,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,6 +37,7 @@ var import_react = require("react");
|
|
|
37
37
|
var import_ds_fast_list = require("@elliemae/ds-fast-list");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
40
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
41
|
var import_styled = require("./styled.js");
|
|
41
42
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
42
43
|
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
@@ -44,12 +45,18 @@ var import_useItemRenderer = require("./useItemRenderer.js");
|
|
|
44
45
|
var import_LoadingContainer = require("./LoadingContainer.js");
|
|
45
46
|
var import_SkeletonContainer = require("./SkeletonContainer.js");
|
|
46
47
|
var import_useOnElementResize = require("../../utils/useOnElementResize.js");
|
|
48
|
+
var import_constants = require("../../constants/index.js");
|
|
49
|
+
const StyledFastList = (0, import_ds_system.styled)(import_ds_fast_list.DSFastList, {
|
|
50
|
+
name: import_constants.DSFormComboboxName,
|
|
51
|
+
slot: import_constants.FORM_COMBOBOX_SLOTS.FAST_LIST
|
|
52
|
+
})``;
|
|
47
53
|
const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
48
54
|
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
49
55
|
`;
|
|
50
56
|
const estimatedSize = () => 32;
|
|
51
57
|
const MenuList = () => {
|
|
52
58
|
const {
|
|
59
|
+
props,
|
|
53
60
|
props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
|
|
54
61
|
controlsWrapperRef,
|
|
55
62
|
listRef,
|
|
@@ -57,16 +64,17 @@ const MenuList = () => {
|
|
|
57
64
|
correctOptions: filteredOptions,
|
|
58
65
|
instanceUid
|
|
59
66
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
67
|
+
const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
60
68
|
const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
|
|
61
69
|
const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
|
|
62
70
|
e.preventDefault();
|
|
63
71
|
}, []);
|
|
64
72
|
const menuListRender = (0, import_react.useMemo)(() => {
|
|
65
|
-
if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid });
|
|
66
|
-
if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, {});
|
|
73
|
+
if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
|
|
74
|
+
if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
|
|
67
75
|
if (filteredOptions && filteredOptions.length > 0 || onCreate) {
|
|
68
76
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
-
|
|
77
|
+
StyledFastList,
|
|
70
78
|
{
|
|
71
79
|
dsFastlistWrapperList: { role: "listbox", "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST, "aria-label": "listbox" },
|
|
72
80
|
dsFastlistItem: { role: "none" },
|
|
@@ -75,7 +83,8 @@ const MenuList = () => {
|
|
|
75
83
|
ItemRenderer: import_useItemRenderer.ItemRenderer,
|
|
76
84
|
extraItemProps: { itemList: filteredOptions },
|
|
77
85
|
getId: (index) => filteredOptions[index].dsId,
|
|
78
|
-
estimateSize: estimatedSize
|
|
86
|
+
estimateSize: estimatedSize,
|
|
87
|
+
getOwnerProps
|
|
79
88
|
}
|
|
80
89
|
) });
|
|
81
90
|
}
|
|
@@ -88,7 +97,17 @@ const MenuList = () => {
|
|
|
88
97
|
children: noOptionsMessage
|
|
89
98
|
}
|
|
90
99
|
);
|
|
91
|
-
}, [
|
|
100
|
+
}, [
|
|
101
|
+
isSkeleton,
|
|
102
|
+
instanceUid,
|
|
103
|
+
isLoading,
|
|
104
|
+
filteredOptions,
|
|
105
|
+
onCreate,
|
|
106
|
+
noOptionsMessage,
|
|
107
|
+
menuMaxHeight,
|
|
108
|
+
listRef,
|
|
109
|
+
getOwnerProps
|
|
110
|
+
]);
|
|
92
111
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
93
112
|
import_styled.StyledListWrapper,
|
|
94
113
|
{
|
|
@@ -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, useMemo, 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 { 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';\n\nconst StyledItemsWrapper = styled(Grid)<{
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, 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;\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 const { getOwnerProps } = useOwnerProps(props);\n\n // removing the header list if we are filtering or is inline cb or we have no options to show\n\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n\n if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n return (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <StyledFastList\n dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\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 }\n\n return (\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 isSkeleton,\n instanceUid,\n isLoading,\n filteredOptions,\n onCreate,\n noOptionsMessage,\n menuMaxHeight,\n listRef,\n getOwnerProps,\n ]);\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CI;AA9C3B,mBAAwD;AACxD,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;AACrB,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;AAC9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAI7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,8CAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB,cAAc;AAAA,UACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA,UACd;AAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,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
|
}
|
|
@@ -35,8 +35,18 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_menu_items = require("@elliemae/ds-menu-items");
|
|
37
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
|
-
|
|
38
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
+
var import_constants = require("../../constants/index.js");
|
|
40
|
+
const StyledSkeletonMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SkeletonMenuItem, {
|
|
41
|
+
name: import_constants.DSFormComboboxName,
|
|
42
|
+
slot: import_constants.FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,
|
|
43
|
+
preserveLegacyDataTestId: true
|
|
44
|
+
})``;
|
|
45
|
+
const SkeletonContainer = ({
|
|
46
|
+
instanceUid,
|
|
47
|
+
getOwnerProps
|
|
48
|
+
}) => {
|
|
39
49
|
const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
|
|
40
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
50
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n)) });
|
|
41
51
|
};
|
|
42
52
|
//# sourceMappingURL=SkeletonContainer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/SkeletonContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const SkeletonContainer = ({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n instanceUid,\n getOwnerProps,\n}: {\n instanceUid: string;\n getOwnerProps: () => object;\n}): JSX.Element => {\n const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n return (\n <Grid id={`combo-listbox-${instanceUid}`}>\n {SKELETON_AMOUNT.map((n, index) => (\n <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n ))}\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBf;AAxBR,2BAAiC;AACjC,qBAAqB;AACrB,uBAAuB;AAEvB,uBAAwD;AAExD,MAAM,6BAAyB,yBAAO,uCAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGmB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,4CAAC,uBAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,4CAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|