@elliemae/ds-form-combobox 3.70.0-next.2 → 3.70.0-next.4
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/DSComboboxMultiT.js +2 -0
- package/dist/cjs/DSComboboxMultiT.js.map +2 -2
- package/dist/cjs/DSComboboxSingleT.js +2 -0
- package/dist/cjs/DSComboboxSingleT.js.map +2 -2
- package/dist/cjs/TruncatedTooltipText.js +94 -0
- package/dist/cjs/TruncatedTooltipText.js.map +7 -0
- package/dist/cjs/constants/index.js +32 -4
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/Section.js +3 -6
- package/dist/cjs/parts/Section.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +12 -2
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/container/styled.js +7 -4
- package/dist/cjs/parts/container/styled.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +22 -12
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls/styled.js +19 -7
- package/dist/cjs/parts/controls/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +7 -7
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/styled.js +11 -5
- package/dist/cjs/parts/controls-input/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +10 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +1 -1
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/cjs/parts/menu-list/LoadingContainer.js +5 -2
- package/dist/cjs/parts/menu-list/LoadingContainer.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +9 -2
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/styled.js +31 -5
- package/dist/cjs/parts/menu-list/styled.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +30 -41
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +3 -3
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +1 -1
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +5 -1
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/cjs/parts/styled.js +4 -1
- package/dist/cjs/parts/styled.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js +82 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/typescript-testing/typescript-combobox-multi-valid.js +158 -0
- package/dist/cjs/typescript-testing/typescript-combobox-multi-valid.js.map +7 -0
- package/dist/cjs/typescript-testing/typescript-combobox-single-valid.js +158 -0
- package/dist/cjs/typescript-testing/typescript-combobox-single-valid.js.map +7 -0
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/esm/DSComboboxMultiT.js +8 -1
- package/dist/esm/DSComboboxMultiT.js.map +2 -2
- package/dist/esm/DSComboboxSingleT.js +8 -1
- package/dist/esm/DSComboboxSingleT.js.map +2 -2
- package/dist/esm/TruncatedTooltipText.js +68 -0
- package/dist/esm/TruncatedTooltipText.js.map +7 -0
- package/dist/esm/constants/index.js +32 -4
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/Section.js +4 -7
- package/dist/esm/parts/Section.js.map +2 -2
- package/dist/esm/parts/container/Container.js +12 -2
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/container/styled.js +7 -4
- package/dist/esm/parts/container/styled.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +22 -12
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls/styled.js +19 -7
- package/dist/esm/parts/controls/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +7 -7
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/styled.js +11 -5
- package/dist/esm/parts/controls-input/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +10 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/parts/controls-input/useMaskedOnChange.js +1 -1
- package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/esm/parts/menu-list/LoadingContainer.js +5 -2
- package/dist/esm/parts/menu-list/LoadingContainer.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +9 -2
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/styled.js +31 -5
- package/dist/esm/parts/menu-list/styled.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +30 -41
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +1 -1
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +5 -1
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/esm/parts/styled.js +4 -1
- package/dist/esm/parts/styled.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +8 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +59 -0
- package/dist/esm/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/typescript-testing/typescript-combobox-multi-valid.js +135 -0
- package/dist/esm/typescript-testing/typescript-combobox-multi-valid.js.map +7 -0
- package/dist/esm/typescript-testing/typescript-combobox-single-valid.js +135 -0
- package/dist/esm/typescript-testing/typescript-combobox-single-valid.js.map +7 -0
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/dist/types/DSComboboxMultiT.d.ts +3 -1
- package/dist/types/DSComboboxSingleT.d.ts +3 -1
- package/dist/types/TruncatedTooltipText.d.ts +8 -0
- package/dist/types/constants/index.d.ts +80 -2
- package/dist/types/parts/Section.d.ts +4 -4
- package/dist/types/parts/menu-list/styled.d.ts +2 -0
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +2 -1
- package/dist/types/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +28 -0
- package/dist/types/tests/DSCombobox.read-only.test.d.ts +1 -0
- package/dist/types/tests/DSCombobox.single-select.test.d.ts +1 -0
- package/dist/types/tests/DSCombobox.usemask.test.d.ts +1 -0
- package/dist/types/typescript-testing/slot-props.d.ts +1 -0
- package/dist/types/typescript-testing/typescript-combobox-multi-valid.d.ts +1 -0
- package/dist/types/typescript-testing/typescript-combobox-single-valid.d.ts +1 -0
- package/dist/types/utils/listHelper.d.ts +1 -1
- package/package.json +15 -16
- /package/dist/types/tests/{a11y.test.d.ts → DSCombobox.a11y.test.d.ts} +0 -0
- /package/dist/types/tests/{creatable.test.d.ts → DSCombobox.api.test.d.ts} +0 -0
- /package/dist/types/tests/{disabled.test.d.ts → DSCombobox.creatable.test.d.ts} +0 -0
- /package/dist/types/tests/{force-focus-first-option-on-type.test.d.ts → DSCombobox.data-testid.test.d.ts} +0 -0
- /package/dist/types/tests/{general.test.d.ts → DSCombobox.disabled.test.d.ts} +0 -0
- /package/dist/types/tests/{multi-select.test.d.ts → DSCombobox.events.test.d.ts} +0 -0
- /package/dist/types/tests/{onlyselectable.test.d.ts → DSCombobox.force-focus-first-option-on-type.test.d.ts} +0 -0
- /package/dist/types/tests/{read-only.test.d.ts → DSCombobox.keyboard.test.d.ts} +0 -0
- /package/dist/types/tests/{single-select.test.d.ts → DSCombobox.multi-select.test.d.ts} +0 -0
- /package/dist/types/tests/{usemask.test.d.ts → DSCombobox.onlyselectable.test.d.ts} +0 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-combobox-multi-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSComboBox } from '../index.js';\nimport type { DSComboboxMultiT } from '../index.js';\n\n// Verify namespace exports are correctly shaped\ntype ComponentProps = DSComboboxMultiT.Props;\ntype ComponentInternalProps = DSComboboxMultiT.InternalProps;\ntype ComponentDefaultProps = DSComboboxMultiT.DefaultProps;\ntype ComponentOptionalProps = DSComboboxMultiT.OptionalProps;\ntype ComponentRequiredProps = DSComboboxMultiT.RequiredProps;\n\nconst noop = (..._args: unknown[]): void => {};\nconst inputRef = React.createRef() as React.MutableRefObject<HTMLInputElement | null>;\n\n// \u2500\u2500\u2500 Required props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testRequiredProps: ComponentRequiredProps = {\n allOptions: [],\n selectedValues: [],\n onChange: noop,\n};\n\n// \u2500\u2500\u2500 Optional props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testOptionalProps: ComponentOptionalProps = {\n placeholder: 'Select options',\n autoFocus: false,\n filteredOptions: [],\n isMenuOpen: false,\n onMenuChange: noop,\n onCreate: noop,\n onFilter: noop,\n onCancel: noop,\n onSelectAll: noop,\n onKeyDown: noop,\n isLoading: false,\n menuMinWidth: 200,\n // popperProps omitted \u2014 DSFloatingWrapperT.Props requires children/innerRef/isOpen/floatingStyles\n};\n\n// \u2500\u2500\u2500 Partial defaults (consumer usage simulation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testPartialDefaults: Partial<ComponentDefaultProps> = {\n hasError: false,\n inline: false,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n isNonClearable: false,\n onlySelectable: false,\n};\n\n// \u2500\u2500\u2500 Complete defaults (all defaults required) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testCompleteDefaults: Required<ComponentDefaultProps> = {\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n hasError: false,\n inline: false,\n withoutPortal: false,\n isNonClearable: false,\n disabled: false,\n noOptionsMessage: 'No Matches Found',\n innerRef: inputRef,\n useMask: noop,\n onlySelectable: false,\n isSkeleton: false,\n applyAriaDisabled: false,\n readOnly: false,\n isMenuOpenableWithReadOnly: false,\n forceFocusFirstOptionOnType: false,\n menuMaxHeight: 300,\n};\n\n// \u2500\u2500\u2500 Internal props (all defaults filled in) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInternalProps: ComponentInternalProps = {\n ...testRequiredProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testCompleteDefaults,\n} as ComponentInternalProps;\n\n// \u2500\u2500\u2500 Public Props (defaults optional) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testProps: ComponentProps = {\n allOptions: [],\n selectedValues: [],\n onChange: noop,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n allOptions: [],\n selectedValues: [],\n onChange: noop,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 Explicit full definition (error pinpoints the wrong key) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testExplicitDefinition: ComponentProps = {\n allOptions: [],\n selectedValues: [],\n onChange: noop,\n placeholder: 'Select options',\n autoFocus: false,\n hasError: false,\n inline: false,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n isNonClearable: false,\n onlySelectable: false,\n noOptionsMessage: 'No Matches Found',\n withoutPortal: false,\n isSkeleton: false,\n isMenuOpenableWithReadOnly: false,\n forceFocusFirstOptionOnType: false,\n menuMaxHeight: 300,\n innerRef: inputRef,\n useMask: noop,\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n menuMinWidth: 200,\n isLoading: false,\n onFilter: noop,\n onCancel: noop,\n};\n\n// \u2500\u2500\u2500 As-syntax (error marks whole object) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInferredTypeCompatibility = {\n allOptions: [],\n selectedValues: [],\n onChange: noop,\n hasError: false,\n disabled: false,\n placeholder: 'Select options',\n menuMaxHeight: 300,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 JSX usage \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst ExampleUsageMulti = () => (\n <>\n {/* minimum required props */}\n <DSComboBox allOptions={[]} selectedValues={[]} onChange={noop} />\n {/* with optional props */}\n <DSComboBox\n allOptions={[]}\n selectedValues={[]}\n onChange={noop}\n placeholder=\"Select options\"\n hasError={false}\n disabled={false}\n applyAriaDisabled={false}\n readOnly={false}\n isNonClearable={false}\n onlySelectable={false}\n noOptionsMessage=\"No Matches Found\"\n />\n {/* with spread optional + partial defaults */}\n <DSComboBox allOptions={[]} selectedValues={[]} onChange={noop} {...testOptionalProps} {...testPartialDefaults} />\n </>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
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 __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import_react = __toESM(require("react"));
|
|
27
|
+
var import__ = require("../index.js");
|
|
28
|
+
const noop = (..._args) => {
|
|
29
|
+
};
|
|
30
|
+
const inputRef = import_react.default.createRef();
|
|
31
|
+
const testRequiredProps = {
|
|
32
|
+
allOptions: [],
|
|
33
|
+
selectedValue: null,
|
|
34
|
+
onChange: noop
|
|
35
|
+
};
|
|
36
|
+
const testOptionalProps = {
|
|
37
|
+
placeholder: "Select an option",
|
|
38
|
+
autoFocus: false,
|
|
39
|
+
filteredOptions: [],
|
|
40
|
+
isMenuOpen: false,
|
|
41
|
+
onMenuChange: noop,
|
|
42
|
+
onCreate: noop,
|
|
43
|
+
onFilter: noop,
|
|
44
|
+
onCancel: noop,
|
|
45
|
+
onSelectAll: noop,
|
|
46
|
+
onKeyDown: noop,
|
|
47
|
+
isLoading: false,
|
|
48
|
+
menuMinWidth: 200
|
|
49
|
+
// popperProps omitted — DSFloatingWrapperT.Props requires children/innerRef/isOpen/floatingStyles
|
|
50
|
+
};
|
|
51
|
+
const testPartialDefaults = {
|
|
52
|
+
hasError: false,
|
|
53
|
+
inline: false,
|
|
54
|
+
disabled: false,
|
|
55
|
+
applyAriaDisabled: false,
|
|
56
|
+
readOnly: false,
|
|
57
|
+
isNonClearable: false,
|
|
58
|
+
onlySelectable: false
|
|
59
|
+
};
|
|
60
|
+
const testCompleteDefaults = {
|
|
61
|
+
startPlacementPreference: "bottom-start",
|
|
62
|
+
placementOrderPreference: ["bottom-start", "top-start"],
|
|
63
|
+
hasError: false,
|
|
64
|
+
inline: false,
|
|
65
|
+
withoutPortal: false,
|
|
66
|
+
isNonClearable: false,
|
|
67
|
+
disabled: false,
|
|
68
|
+
noOptionsMessage: "No Matches Found",
|
|
69
|
+
innerRef: inputRef,
|
|
70
|
+
useMask: noop,
|
|
71
|
+
onlySelectable: false,
|
|
72
|
+
isSkeleton: false,
|
|
73
|
+
applyAriaDisabled: false,
|
|
74
|
+
readOnly: false,
|
|
75
|
+
isMenuOpenableWithReadOnly: false,
|
|
76
|
+
forceFocusFirstOptionOnType: false,
|
|
77
|
+
menuMaxHeight: 300
|
|
78
|
+
};
|
|
79
|
+
const testInternalProps = {
|
|
80
|
+
...testRequiredProps,
|
|
81
|
+
...testCompleteDefaults
|
|
82
|
+
};
|
|
83
|
+
const testInternalPropsAsSyntax = {
|
|
84
|
+
...testRequiredProps,
|
|
85
|
+
...testCompleteDefaults
|
|
86
|
+
};
|
|
87
|
+
const testProps = {
|
|
88
|
+
allOptions: [],
|
|
89
|
+
selectedValue: null,
|
|
90
|
+
onChange: noop,
|
|
91
|
+
...testOptionalProps,
|
|
92
|
+
...testPartialDefaults
|
|
93
|
+
};
|
|
94
|
+
const testPropsAsSyntax = {
|
|
95
|
+
allOptions: [],
|
|
96
|
+
selectedValue: null,
|
|
97
|
+
onChange: noop,
|
|
98
|
+
...testOptionalProps,
|
|
99
|
+
...testPartialDefaults
|
|
100
|
+
};
|
|
101
|
+
const testExplicitDefinition = {
|
|
102
|
+
allOptions: [],
|
|
103
|
+
selectedValue: null,
|
|
104
|
+
onChange: noop,
|
|
105
|
+
placeholder: "Select an option",
|
|
106
|
+
autoFocus: false,
|
|
107
|
+
hasError: false,
|
|
108
|
+
inline: false,
|
|
109
|
+
disabled: false,
|
|
110
|
+
applyAriaDisabled: false,
|
|
111
|
+
readOnly: false,
|
|
112
|
+
isNonClearable: false,
|
|
113
|
+
onlySelectable: false,
|
|
114
|
+
noOptionsMessage: "No Matches Found",
|
|
115
|
+
withoutPortal: false,
|
|
116
|
+
isSkeleton: false,
|
|
117
|
+
isMenuOpenableWithReadOnly: false,
|
|
118
|
+
forceFocusFirstOptionOnType: false,
|
|
119
|
+
menuMaxHeight: 300,
|
|
120
|
+
innerRef: inputRef,
|
|
121
|
+
useMask: noop,
|
|
122
|
+
startPlacementPreference: "bottom-start",
|
|
123
|
+
placementOrderPreference: ["bottom-start", "top-start"],
|
|
124
|
+
menuMinWidth: 200,
|
|
125
|
+
isLoading: false,
|
|
126
|
+
onFilter: noop,
|
|
127
|
+
onCancel: noop
|
|
128
|
+
};
|
|
129
|
+
const testInferredTypeCompatibility = {
|
|
130
|
+
allOptions: [],
|
|
131
|
+
selectedValue: null,
|
|
132
|
+
onChange: noop,
|
|
133
|
+
hasError: false,
|
|
134
|
+
disabled: false,
|
|
135
|
+
placeholder: "Select an option",
|
|
136
|
+
menuMaxHeight: 300
|
|
137
|
+
};
|
|
138
|
+
const ExampleUsageSingle = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
139
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSComboBox, { allOptions: [], selectedValues: null, onChange: noop }),
|
|
140
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
|
+
import__.DSComboBox,
|
|
142
|
+
{
|
|
143
|
+
allOptions: [],
|
|
144
|
+
selectedValues: null,
|
|
145
|
+
onChange: noop,
|
|
146
|
+
placeholder: "Select...",
|
|
147
|
+
hasError: false,
|
|
148
|
+
disabled: false,
|
|
149
|
+
applyAriaDisabled: false,
|
|
150
|
+
readOnly: false,
|
|
151
|
+
isNonClearable: false,
|
|
152
|
+
onlySelectable: false,
|
|
153
|
+
noOptionsMessage: "No Matches Found"
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSComboBox, { allOptions: [], selectedValues: null, onChange: noop, ...testOptionalProps, ...testPartialDefaults })
|
|
157
|
+
] });
|
|
158
|
+
//# sourceMappingURL=typescript-combobox-single-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-combobox-single-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSComboBox } from '../index.js';\nimport type { DSComboboxSingleT } from '../index.js';\n\n// Verify namespace exports are correctly shaped\ntype ComponentProps = DSComboboxSingleT.Props;\ntype ComponentInternalProps = DSComboboxSingleT.InternalProps;\ntype ComponentDefaultProps = DSComboboxSingleT.DefaultProps;\ntype ComponentOptionalProps = DSComboboxSingleT.OptionalProps;\ntype ComponentRequiredProps = DSComboboxSingleT.RequiredProps;\n\nconst noop = (..._args: unknown[]): void => {};\nconst inputRef = React.createRef() as React.MutableRefObject<HTMLInputElement | null>;\n\n// \u2500\u2500\u2500 Required props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testRequiredProps: ComponentRequiredProps = {\n allOptions: [],\n selectedValue: null,\n onChange: noop,\n};\n\n// \u2500\u2500\u2500 Optional props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testOptionalProps: ComponentOptionalProps = {\n placeholder: 'Select an option',\n autoFocus: false,\n filteredOptions: [],\n isMenuOpen: false,\n onMenuChange: noop,\n onCreate: noop,\n onFilter: noop,\n onCancel: noop,\n onSelectAll: noop,\n onKeyDown: noop,\n isLoading: false,\n menuMinWidth: 200,\n // popperProps omitted \u2014 DSFloatingWrapperT.Props requires children/innerRef/isOpen/floatingStyles\n};\n\n// \u2500\u2500\u2500 Partial defaults (consumer usage simulation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testPartialDefaults: Partial<ComponentDefaultProps> = {\n hasError: false,\n inline: false,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n isNonClearable: false,\n onlySelectable: false,\n};\n\n// \u2500\u2500\u2500 Complete defaults (all defaults required) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testCompleteDefaults: Required<ComponentDefaultProps> = {\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n hasError: false,\n inline: false,\n withoutPortal: false,\n isNonClearable: false,\n disabled: false,\n noOptionsMessage: 'No Matches Found',\n innerRef: inputRef,\n useMask: noop,\n onlySelectable: false,\n isSkeleton: false,\n applyAriaDisabled: false,\n readOnly: false,\n isMenuOpenableWithReadOnly: false,\n forceFocusFirstOptionOnType: false,\n menuMaxHeight: 300,\n};\n\n// \u2500\u2500\u2500 Internal props (all defaults filled in) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInternalProps: ComponentInternalProps = {\n ...testRequiredProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testCompleteDefaults,\n} as ComponentInternalProps;\n\n// \u2500\u2500\u2500 Public Props (defaults optional) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testProps: ComponentProps = {\n allOptions: [],\n selectedValue: null,\n onChange: noop,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n allOptions: [],\n selectedValue: null,\n onChange: noop,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 Explicit full definition (error pinpoints the wrong key) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testExplicitDefinition: ComponentProps = {\n allOptions: [],\n selectedValue: null,\n onChange: noop,\n placeholder: 'Select an option',\n autoFocus: false,\n hasError: false,\n inline: false,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n isNonClearable: false,\n onlySelectable: false,\n noOptionsMessage: 'No Matches Found',\n withoutPortal: false,\n isSkeleton: false,\n isMenuOpenableWithReadOnly: false,\n forceFocusFirstOptionOnType: false,\n menuMaxHeight: 300,\n innerRef: inputRef,\n useMask: noop,\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n menuMinWidth: 200,\n isLoading: false,\n onFilter: noop,\n onCancel: noop,\n};\n\n// \u2500\u2500\u2500 As-syntax (error marks whole object) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInferredTypeCompatibility = {\n allOptions: [],\n selectedValue: null,\n onChange: noop,\n hasError: false,\n disabled: false,\n placeholder: 'Select an option',\n menuMaxHeight: 300,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 JSX usage \u2014 DSComboBox with single-select explicit generic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Note: DSComboBox is the underlying polymorphic component; consumers use DSSingleComboBox from\n// ds-form-single-combobox which accepts DSComboboxSingleT.Props (selectedValue).\n// Here we verify DSComboBox accepts single-select props via explicit generic.\nconst ExampleUsageSingle = () => (\n <>\n {/* minimum required props */}\n <DSComboBox allOptions={[]} selectedValues={null} onChange={noop} />\n {/* with optional props */}\n <DSComboBox\n allOptions={[]}\n selectedValues={null}\n onChange={noop}\n placeholder=\"Select...\"\n hasError={false}\n disabled={false}\n applyAriaDisabled={false}\n readOnly={false}\n isNonClearable={false}\n onlySelectable={false}\n noOptionsMessage=\"No Matches Found\"\n />\n {/* with spread testExplicitDefinition (using unified selectedValues API) */}\n <DSComboBox allOptions={[]} selectedValues={null} onChange={noop} {...testOptionalProps} {...testPartialDefaults} />\n </>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues?: DSComboboxT.SelectedOptionsT,\n): string => {\n if (selectedValues) {\n const lastValue = getLastValueSelected(selectedValues);\n if (lastValue) return lastValue.dsId;\n }\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.ItemOption,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n):
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAkC;AAC3B,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,CAAC,OAAO,QAAQ;AAElF,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,MAAM;AAE9D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ,KAAK;AAErG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,KAAK,GAAG;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc,KAAK;AAAA,EACtE;AACA,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAC7C;AAEO,SAAS,eAAe,OAAwE;AACrG,SAAO,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS;AAChD;AAEO,MAAM,SAAS,CAAC,UACrB,CAAC,MAAM,QAAQ,KAAK,KAAK,UAAU,QAAQ,OAAO,UAAU;AAEvD,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MACI;AACX,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,MAAI,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK;AAC3C,MAAI,aAAa;AAEjB,SAAO,aAAa,KAAK,QAAQ;AAC/B,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAE9B,SAAK,IAAI,OAAO,KAAK,UAAU,KAAK;AACpC,kBAAc;AAAA,EAChB;AAEA,SAAO;AACT;AACO,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,WAAO,eAAe,eAAe,SAAS,CAAC;AAAA,EACjD;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACA,mBACW;AACX,MAAI,gBAAgB;AAClB,UAAM,YAAY,qBAAqB,cAAc;AACrD,QAAI,UAAW,QAAO,UAAU;AAAA,EAClC;AACA,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,UAAU;AAC/E,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AAEF,SAAO;AACT;AAEO,MAAM,4BAA4B,CACvC,gBACA,gBACA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues?: DSComboboxT.SelectedOptionsT,\n): string => {\n if (selectedValues) {\n const lastValue = getLastValueSelected(selectedValues);\n if (lastValue) return lastValue.dsId;\n }\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.ItemOption,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n): DSComboboxT.SelectedOptionsT => {\n if (Array.isArray(selectedValues)) {\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (\n !(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n )\n elem.scrollIntoView(options);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
getPropsPerSlotPropTypes,
|
|
4
|
+
globalAttributesPropTypes,
|
|
5
|
+
PropTypes,
|
|
6
|
+
xstyledPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
3
8
|
import { commonComboboxPropTypes } from "./DSCommonComboboxPropsT.js";
|
|
9
|
+
import { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from "./constants/index.js";
|
|
4
10
|
const multiComboboxPropTypes = {
|
|
11
|
+
...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS),
|
|
5
12
|
...globalAttributesPropTypes,
|
|
6
13
|
...xstyledPropTypes,
|
|
7
14
|
...commonComboboxPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSComboboxMultiT.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxMultiT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValues: DSCommonComboboxPropsT.ItemOption[];\n onChange: (\n suggestedValue: DSCommonComboboxPropsT.ItemOption[],\n selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n export interface OptionalProps\n extends DSCommonComboboxPropsT.OptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_MULTI_SLOTS> {}\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\n/**\n * Multi-select schema variant.\n *\n * - `selectedValues` is always an array of selectable option objects.\n * - empty array indicates no current selection.\n */\nexport const multiComboboxPropTypes: DSPropTypesSchema<DSComboboxMultiT.Props> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected.',\n )\n .signature(\n '(suggestedValue: ItemOption[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.arrayOf(PropTypes.object).isRequired.description(\n 'Multi-select values as an array of selectable option objects. Use an empty array for no selection.',\n ),\n};\n\nexport const multiComboboxPropTypesSchema = multiComboboxPropTypes as unknown as ValidationMap<DSComboboxMultiT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,iCAAiC;AAoDvD,MAAM,yBAAoE;AAAA,EAC/E,GAAG,yBAAyB,oBAAoB,yBAAyB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,QAAQ,UAAU,MAAM,EAAE,WAAW;AAAA,IAC7D;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
getPropsPerSlotPropTypes,
|
|
4
|
+
globalAttributesPropTypes,
|
|
5
|
+
PropTypes,
|
|
6
|
+
xstyledPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
3
8
|
import { commonComboboxPropTypes } from "./DSCommonComboboxPropsT.js";
|
|
9
|
+
import { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from "./constants/index.js";
|
|
4
10
|
const singleComboboxPropTypes = {
|
|
11
|
+
...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS),
|
|
5
12
|
...globalAttributesPropTypes,
|
|
6
13
|
...xstyledPropTypes,
|
|
7
14
|
...commonComboboxPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSComboboxSingleT.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxSingleT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValue: DSCommonComboboxPropsT.ItemOption | null;\n onChange: (\n suggestedValue: DSCommonComboboxPropsT.ItemOption | null,\n selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n export interface OptionalProps\n extends DSCommonComboboxPropsT.OptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SINGLE_SLOTS> {}\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\ntype SingleComboboxWithSelectedValues = Omit<DSComboboxSingleT.Props, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n};\n\n/**\n * Single-select schema variant.\n *\n * - `selectedValues` is a single selectable option object.\n * - `null` indicates no current selection.\n */\nexport const singleComboboxPropTypes: DSPropTypesSchema<SingleComboboxWithSelectedValues> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Single-select change callback. Receives the next single selected option or null when selection is cleared.',\n )\n .signature(\n '(suggestedValue: ItemOption | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]).isRequired.description(\n 'Single-select value. Use a selectable option object for a selected state, or null for no selection.',\n ),\n};\n\nexport const singleComboboxPropTypesSchema =\n singleComboboxPropTypes as unknown as ValidationMap<SingleComboboxWithSelectedValues>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,kCAAkC;AAwDxD,MAAM,0BAA+E;AAAA,EAC1F,GAAG,yBAAyB,oBAAoB,0BAA0B;AAAA,EAC1E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW;AAAA,IAC1F;AAAA,EACF;AACF;AAEO,MAAM,gCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useState } from "react";
|
|
4
|
+
import { styled } from "@elliemae/ds-system";
|
|
5
|
+
import {
|
|
6
|
+
useFloatingContext,
|
|
7
|
+
FloatingWrapper,
|
|
8
|
+
PopoverArrow
|
|
9
|
+
} from "@elliemae/ds-floating-context";
|
|
10
|
+
const TruncatedSpan = styled.span`
|
|
11
|
+
text-overflow: ellipsis;
|
|
12
|
+
white-space: nowrap;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
display: inline-block;
|
|
15
|
+
max-width: 100%;
|
|
16
|
+
`;
|
|
17
|
+
const TooltipContainer = styled.div`
|
|
18
|
+
text-align: left;
|
|
19
|
+
min-width: ${({ theme }) => theme.space.l};
|
|
20
|
+
max-width: 250px;
|
|
21
|
+
min-height: 30px;
|
|
22
|
+
display: grid;
|
|
23
|
+
align-items: center;
|
|
24
|
+
padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
|
|
25
|
+
position: relative;
|
|
26
|
+
background-color: white;
|
|
27
|
+
border-radius: 2px;
|
|
28
|
+
font-size: 13px;
|
|
29
|
+
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
`;
|
|
32
|
+
const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
33
|
+
const [showTooltip, setShowTooltip] = useState(false);
|
|
34
|
+
const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
|
|
35
|
+
placement,
|
|
36
|
+
externallyControlledIsOpen: showTooltip,
|
|
37
|
+
withoutAnimation: true
|
|
38
|
+
});
|
|
39
|
+
const handleMouseEnter = useCallback((e) => {
|
|
40
|
+
const el = e.currentTarget;
|
|
41
|
+
setShowTooltip(el.offsetWidth < el.scrollWidth);
|
|
42
|
+
}, []);
|
|
43
|
+
const handleMouseLeave = useCallback(() => {
|
|
44
|
+
setShowTooltip(false);
|
|
45
|
+
}, []);
|
|
46
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
47
|
+
/* @__PURE__ */ jsx(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
|
|
48
|
+
/* @__PURE__ */ jsx(
|
|
49
|
+
FloatingWrapper,
|
|
50
|
+
{
|
|
51
|
+
innerRef: refs.setFloating,
|
|
52
|
+
isOpen: showTooltip,
|
|
53
|
+
floatingStyles,
|
|
54
|
+
context,
|
|
55
|
+
children: /* @__PURE__ */ jsxs(TooltipContainer, { children: [
|
|
56
|
+
value,
|
|
57
|
+
/* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
|
|
58
|
+
] })
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
] });
|
|
62
|
+
};
|
|
63
|
+
var TruncatedTooltipText_default = TruncatedTooltipText;
|
|
64
|
+
export {
|
|
65
|
+
TruncatedTooltipText,
|
|
66
|
+
TruncatedTooltipText_default as default
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=TruncatedTooltipText.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedTooltipText.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n text-align: left;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n {value}\n </TruncatedSpan>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <TooltipContainer>\n {value}\n <PopoverArrow {...arrowStyles} />\n </TooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0DnB,mBACE,KASE,YAVJ;AA1DJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,wBAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBACE;AAAA;AAAA,UACD,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
3
|
const DSFormComboboxName = "DSCombobox";
|
|
4
|
-
const
|
|
5
|
-
// Same as old container
|
|
4
|
+
const FORM_COMBOBOX_COMMON_SLOTS = {
|
|
6
5
|
ROOT: "root",
|
|
7
6
|
INPUT_WRAPPER: "input-wrapper",
|
|
8
7
|
INPUT: "input",
|
|
@@ -10,11 +9,38 @@ const FORM_COMBOBOX_SLOTS = {
|
|
|
10
9
|
FAST_LIST: "fast-list",
|
|
11
10
|
SECTION_WRAPPER: "section-wrapper",
|
|
12
11
|
SECTION_LABEL: "section-label",
|
|
12
|
+
// Single-select: regular menu items. Both modes: creatable items (when `onCreate` is provided).
|
|
13
13
|
SINGLE_MENU_ITEM: "single-menu-item",
|
|
14
|
-
MULTI_MENU_ITEM: "multi-menu-item",
|
|
15
14
|
LOADING_INDICATOR: "loading-indicator",
|
|
16
15
|
SKELETON_MENU_ITEM: "skeleton-menu-item",
|
|
17
|
-
|
|
16
|
+
POPPER_WRAPPER: "popper-wrapper",
|
|
17
|
+
SELECTION: "selection",
|
|
18
|
+
HEADER_ACTIONS: "header-actions",
|
|
19
|
+
HEADER_ACTIONS_SEPARATOR: "header-actions-separator",
|
|
20
|
+
INPUT_PLACEHOLDER: "input-placeholder",
|
|
21
|
+
INPUT_FIELD_WRAPPER: "input-field-wrapper",
|
|
22
|
+
LIST_WRAPPER: "list-wrapper",
|
|
23
|
+
NO_MATCHES_FOUND: "no-results",
|
|
24
|
+
// legacy data-testid: combobox-no-matches-found — breaking change if removed
|
|
25
|
+
CREATABLE_LABEL: "creatable-label",
|
|
26
|
+
CREATABLE_VALUE: "creatable-value",
|
|
27
|
+
MENU_ITEMS_WRAPPER: "menu-items-wrapper",
|
|
28
|
+
LOADING_WRAPPER: "loading-wrapper"
|
|
29
|
+
};
|
|
30
|
+
const FORM_COMBOBOX_SINGLE_SLOTS = {
|
|
31
|
+
...FORM_COMBOBOX_COMMON_SLOTS,
|
|
32
|
+
SELECTED_VALUES: "single-value-wrapper"
|
|
33
|
+
// legacy data-testid: combobox-selected-values — breaking change if removed
|
|
34
|
+
};
|
|
35
|
+
const FORM_COMBOBOX_MULTI_SLOTS = {
|
|
36
|
+
...FORM_COMBOBOX_COMMON_SLOTS,
|
|
37
|
+
PILL: "pill",
|
|
38
|
+
PILL_GROUP: "pill-group",
|
|
39
|
+
MULTI_MENU_ITEM: "multi-menu-item"
|
|
40
|
+
};
|
|
41
|
+
const FORM_COMBOBOX_SLOTS = {
|
|
42
|
+
...FORM_COMBOBOX_SINGLE_SLOTS,
|
|
43
|
+
...FORM_COMBOBOX_MULTI_SLOTS
|
|
18
44
|
};
|
|
19
45
|
const FORM_COMBOBOX_DATA_TESTID = {
|
|
20
46
|
...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
|
|
@@ -33,6 +59,8 @@ const FORM_COMBOBOX_DATA_TESTID = {
|
|
|
33
59
|
export {
|
|
34
60
|
DSFormComboboxName,
|
|
35
61
|
FORM_COMBOBOX_DATA_TESTID,
|
|
62
|
+
FORM_COMBOBOX_MULTI_SLOTS,
|
|
63
|
+
FORM_COMBOBOX_SINGLE_SLOTS,
|
|
36
64
|
FORM_COMBOBOX_SLOTS
|
|
37
65
|
};
|
|
38
66
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n//
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// Slots available in both single and multi-select modes\nconst FORM_COMBOBOX_COMMON_SLOTS = {\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-select: regular menu items. Both modes: creatable items (when `onCreate` is provided).\n SINGLE_MENU_ITEM: 'single-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n POPPER_WRAPPER: 'popper-wrapper',\n SELECTION: 'selection',\n HEADER_ACTIONS: 'header-actions',\n HEADER_ACTIONS_SEPARATOR: 'header-actions-separator',\n INPUT_PLACEHOLDER: 'input-placeholder',\n INPUT_FIELD_WRAPPER: 'input-field-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n NO_MATCHES_FOUND: 'no-results', // legacy data-testid: combobox-no-matches-found \u2014 breaking change if removed\n CREATABLE_LABEL: 'creatable-label',\n CREATABLE_VALUE: 'creatable-value',\n MENU_ITEMS_WRAPPER: 'menu-items-wrapper',\n LOADING_WRAPPER: 'loading-wrapper',\n} as const;\n\n// Slots available in single-select mode only\nexport const FORM_COMBOBOX_SINGLE_SLOTS = {\n ...FORM_COMBOBOX_COMMON_SLOTS,\n SELECTED_VALUES: 'single-value-wrapper', // legacy data-testid: combobox-selected-values \u2014 breaking change if removed\n} as const;\n\n// Slots available in multi-select mode only\nexport const FORM_COMBOBOX_MULTI_SLOTS = {\n ...FORM_COMBOBOX_COMMON_SLOTS,\n PILL: 'pill',\n PILL_GROUP: 'pill-group',\n MULTI_MENU_ITEM: 'multi-menu-item',\n} as const;\n\n// Full slot set \u2014 union of both modes. Used for slot declarations in styled components and runtime helpers.\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 ...FORM_COMBOBOX_SINGLE_SLOTS,\n ...FORM_COMBOBOX_MULTI_SLOTS,\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 PILL: 'ds-pill-wrapper',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAGlC,MAAM,6BAA6B;AAAA,EACjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA;AAAA,EAEf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,kBAAkB;AAAA;AAAA,EAClB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AACnB;AAGO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,iBAAiB;AAAA;AACnB;AAGO,MAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,iBAAiB;AACnB;AAIO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,GAAG;AACL;AAGO,MAAM,4BAA4B;AAAA,EACvC,GAAG,wBAAwB,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;AAAA,EACtB,MAAM;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,11 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { createElement } from "react";
|
|
4
4
|
import React2 from "react";
|
|
5
5
|
import { styled } from "@elliemae/ds-system";
|
|
6
|
-
import {
|
|
6
|
+
import { Separator } from "@elliemae/ds-menu-items";
|
|
7
7
|
import { MENU_OPTION_TYPES } from "../constants.js";
|
|
8
8
|
import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
|
|
9
9
|
import { isSelected } from "../utils/listHelper.js";
|
|
10
10
|
import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../constants/index.js";
|
|
11
|
+
import { StyledSingleMenuItem, StyledMultiMenuItem } from "./menu-list/styled.js";
|
|
11
12
|
const StyledSectionWrapper = styled("section", { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`
|
|
12
13
|
list-style: none;
|
|
13
14
|
min-height: 24px;
|
|
@@ -22,10 +23,6 @@ const StyledSectionLabel = styled("header", { name: DSFormComboboxName, slot: FO
|
|
|
22
23
|
font-size: 1rem;
|
|
23
24
|
color: neutral-500;
|
|
24
25
|
`;
|
|
25
|
-
const StyledSingleMenuItem = styled(SingleMenuItem, {
|
|
26
|
-
name: DSFormComboboxName,
|
|
27
|
-
slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM
|
|
28
|
-
})``;
|
|
29
26
|
const Section = React2.memo((props) => {
|
|
30
27
|
const {
|
|
31
28
|
label,
|
|
@@ -40,7 +37,7 @@ const Section = React2.memo((props) => {
|
|
|
40
37
|
getOwnerPropsArguments
|
|
41
38
|
} = props;
|
|
42
39
|
const id = `${label.replace(/ /g, "")}-section`;
|
|
43
|
-
const CBItem = Array.isArray(selectedValues) ?
|
|
40
|
+
const CBItem = Array.isArray(selectedValues) ? StyledMultiMenuItem : StyledSingleMenuItem;
|
|
44
41
|
return /* @__PURE__ */ jsxs(
|
|
45
42
|
StyledSectionWrapper,
|
|
46
43
|
{
|
|
@@ -92,7 +89,7 @@ const Section = React2.memo((props) => {
|
|
|
92
89
|
},
|
|
93
90
|
onMouseDown: handleOnMouseDown,
|
|
94
91
|
isActive: dsId === focusOptionIdx,
|
|
95
|
-
isSelected: isSelected(selectedValues, option),
|
|
92
|
+
isSelected: option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option),
|
|
96
93
|
tabIndex: -1,
|
|
97
94
|
...rest,
|
|
98
95
|
key: option.dsId,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Section.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Separator } from '@elliemae/ds-menu-items';\n\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';\nimport { StyledSingleMenuItem, StyledMultiMenuItem } from './menu-list/styled.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles?: React.CSSProperties;\n innerRef?: (instance: HTMLDivElement | null) => void;\n options: DSComboboxT.OptionTypes[];\n handleClick: (option: DSComboboxT.OptionTypes, e: React.MouseEvent<HTMLInputElement>) => void;\n handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n focusOptionIdx: string;\n selectedValues: DSComboboxT.SelectedOptionsT;\n getOwnerProps: () => object;\n getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n list-style: none;\n min-height: 24px;\n display: grid;\n align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\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 {\n label,\n wrapperStyles,\n focusOptionIdx,\n selectedValues,\n innerRef,\n handleOnMouseDown,\n options,\n handleClick,\n getOwnerProps,\n getOwnerPropsArguments,\n } = props;\n const id = `${label.replace(/ /g, '')}-section`;\n const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = Array.isArray(selectedValues)\n ? StyledMultiMenuItem\n : StyledSingleMenuItem;\n\n return (\n <StyledSectionWrapper\n role=\"group\"\n aria-labelledby={id}\n style={wrapperStyles}\n innerRef={innerRef}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledSectionLabel\n id={id}\n role=\"presentation\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\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 getOwnerPropsArguments={getOwnerPropsArguments}\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={option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option)}\n tabIndex={-1}\n {...rest}\n key={option.dsId}\n dsId={option.dsId}\n />\n );\n })}\n </StyledSectionWrapper>\n );\n});\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4DnB,SAQE,KARF;AAkCM;AA9FV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,sBAAsB,2BAA2B;AAe1D,MAAM,uBAAuB,OAAO,WAAW,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,qBAAqB,OAAO,UAAU,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1G,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAiF,MAAM,QAAQ,cAAc,IAC/G,sBACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,kBAAkB,WAAW;AACxC,mBAAO,oBAAC,eAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,mBAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,OAAO,SAAS,kBAAkB,UAAU,WAAW,gBAAgB,MAAM;AAAA,cACzF,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -66,7 +66,7 @@ const Container = () => {
|
|
|
66
66
|
"data-testid": dataTestId ?? ComboboxDataTestid.CONTAINER,
|
|
67
67
|
innerRef: refs.setReference,
|
|
68
68
|
className,
|
|
69
|
-
applyAriaDisabled,
|
|
69
|
+
applyAriaDisabled: applyAriaDisabled ?? false,
|
|
70
70
|
...xStyledProps,
|
|
71
71
|
getOwnerProps,
|
|
72
72
|
getOwnerPropsArguments,
|
|
@@ -84,7 +84,17 @@ const Container = () => {
|
|
|
84
84
|
...popperProps,
|
|
85
85
|
key: `${isLoading}${isSkeleton}`
|
|
86
86
|
},
|
|
87
|
-
/* @__PURE__ */ jsx(
|
|
87
|
+
/* @__PURE__ */ jsx(
|
|
88
|
+
StyledPopperWrapper,
|
|
89
|
+
{
|
|
90
|
+
tabIndex: -1,
|
|
91
|
+
onMouseDown: handleMouseDown,
|
|
92
|
+
applyAriaDisabled: applyAriaDisabled ?? false,
|
|
93
|
+
getOwnerProps,
|
|
94
|
+
getOwnerPropsArguments,
|
|
95
|
+
children: /* @__PURE__ */ jsx(MenuList, {})
|
|
96
|
+
}
|
|
97
|
+
)
|
|
88
98
|
) : null
|
|
89
99
|
]
|
|
90
100
|
}
|