@elliemae/ds-form-combobox 3.70.0-next.45 → 3.70.0-next.47
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/TruncatedText.js +47 -0
- package/dist/cjs/TruncatedText.js.map +7 -0
- package/dist/cjs/parts/controls/Controls.js +2 -2
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/esm/TruncatedText.js +17 -0
- package/dist/esm/TruncatedText.js.map +7 -0
- package/dist/esm/parts/controls/Controls.js +2 -2
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/types/TruncatedText.d.ts +13 -0
- package/package.json +15 -15
- package/dist/cjs/TruncatedTooltipText.js +0 -96
- package/dist/cjs/TruncatedTooltipText.js.map +0 -7
- package/dist/esm/TruncatedTooltipText.js +0 -70
- package/dist/esm/TruncatedTooltipText.js.map +0 -7
- package/dist/types/TruncatedTooltipText.d.ts +0 -8
|
@@ -0,0 +1,47 @@
|
|
|
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 TruncatedText_exports = {};
|
|
30
|
+
__export(TruncatedText_exports, {
|
|
31
|
+
TruncatedText: () => TruncatedText,
|
|
32
|
+
default: () => TruncatedText_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(TruncatedText_exports);
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
const TruncatedSpan = import_ds_system.styled.span`
|
|
39
|
+
text-overflow: ellipsis;
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
max-width: 100%;
|
|
44
|
+
`;
|
|
45
|
+
const TruncatedText = ({ value = "" }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { children: value });
|
|
46
|
+
var TruncatedText_default = TruncatedText;
|
|
47
|
+
//# sourceMappingURL=TruncatedText.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/TruncatedText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\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\ninterface TruncatedTextProps {\n value?: string;\n}\n\n/**\n * PUI-18660: this used to render its own hand-rolled hover tooltip on truncation.\n * That internal tooltip was removed \u2014 truncation is visual-only here. Consumers who\n * need the full value on hover/focus (e.g. readOnly/aria-disabled states where the\n * menu can't be opened) wrap the combobox in DSTooltipV3 themselves; see the\n * \"WithTooltip\" examples in ds-form-single-combobox / ds-form-multi-combobox.\n */\nconst TruncatedText = ({ value = '' }: TruncatedTextProps) => <TruncatedSpan>{value}</TruncatedSpan>;\n\nexport { TruncatedText };\nexport default TruncatedText;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBuC;AArB9D,uBAAuB;AAEvB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7B,MAAM,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAA0B,4CAAC,iBAAe,iBAAM;AAGpF,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -37,7 +37,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
37
37
|
var import_react = require("react");
|
|
38
38
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
39
39
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
40
|
-
var
|
|
40
|
+
var import_TruncatedText = require("../../TruncatedText.js");
|
|
41
41
|
var import_ControlsInput = require("../controls-input/ControlsInput.js");
|
|
42
42
|
var import_DropdownIndicator = require("../DropdownIndicator.js");
|
|
43
43
|
var import_multi_selected_values_container = require("../multi-selected-values-container/index.js");
|
|
@@ -145,7 +145,7 @@ const Controls = () => {
|
|
|
145
145
|
disabled: disabled ?? false,
|
|
146
146
|
applyAriaDisabled: applyAriaDisabled ?? false,
|
|
147
147
|
getOwnerProps,
|
|
148
|
-
children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
148
|
+
children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedText.TruncatedText, { value: selectedValues.label }) : null
|
|
149
149
|
}
|
|
150
150
|
)
|
|
151
151
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2HX;AAzHZ,8BAA8B;AAC9B,mBAAwD;AACxD,yBAA4B;AAC5B,iCAAmC;AACnC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { TruncatedText } from '../../TruncatedText.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n StyledControlsWrapper,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = (): JSX.Element => {\n const {\n props,\n props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n shouldPreventContextMenuOpening,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (applyAriaDisabled || shouldPreventContextMenuOpening) {\n internalRef.current?.focus();\n return;\n }\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n disabled,\n listRef,\n hasFocus,\n menuState,\n inline,\n setMenuState,\n focusOptionIdx,\n readOnly,\n applyAriaDisabled,\n isMenuOpenableWithReadOnly,\n ]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (applyAriaDisabled) return;\n if (menuState || disabled || shouldPreventContextMenuOpening) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n innerRef={controlsWrapperRef}\n readOnly={readOnly ?? false}\n cols={cols}\n disabled={disabled ?? false}\n applyAriaDisabled={applyAriaDisabled ?? false}\n hasError={hasError ?? false}\n inline={inline ?? false}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n aria-disabled={applyAriaDisabled}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection\n variant=\"b2\"\n component=\"div\"\n innerRef={selectedOptionsRef}\n onClick={handleOnPillsClick}\n getOwnerProps={getOwnerProps}\n >\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper\n readOnly={readOnly ?? false}\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n disabled={disabled ?? false}\n applyAriaDisabled={applyAriaDisabled ?? false}\n getOwnerProps={getOwnerProps}\n >\n {selectedValues && inputValue === '' ? <TruncatedText 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 getOwnerProps={getOwnerProps}\n >\n <StyleHeaderActionsSeparator\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getOwnerProps}\n />\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
|
}
|
|
@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_react = require("react");
|
|
37
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
-
var
|
|
39
|
+
var import_TruncatedText = require("../../TruncatedText.js");
|
|
40
40
|
var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
|
|
41
41
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
42
42
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
@@ -120,7 +120,7 @@ const ControlsInput = () => {
|
|
|
120
120
|
getOwnerProps,
|
|
121
121
|
"aria-hidden": "true",
|
|
122
122
|
$nonInteractive: isNonInteractive,
|
|
123
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
123
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedText.TruncatedText, { value: showPlaceholder })
|
|
124
124
|
}
|
|
125
125
|
),
|
|
126
126
|
menuState === false && !inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHiddenDiv, { id: `combo-listbox-${instanceUid}` }) : null,
|
|
@@ -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 { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgGnB;AAhGJ,mBAA2C;AAC3C,8BAAsD;AACtD,uBAA0B;AAC1B,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedText } from '../../TruncatedText.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n StyledHiddenDiv,\n StyledInput,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledInputWrapper,\n StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props,\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\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 // `.some(Boolean)` over `||` keeps this component within its cyclomatic-complexity limit.\n const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);\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 getOwnerProps={getOwnerProps}>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder\n variant=\"b2\"\n component=\"span\"\n getOwnerProps={getOwnerProps}\n aria-hidden=\"true\"\n $nonInteractive={isNonInteractive}\n >\n <TruncatedText value={showPlaceholder} />\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 ?? false}\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 ?? false}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n disabled={disabled || applyAriaDisabled}\n readOnly={readOnly}\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;ADgGnB;AAhGJ,mBAA2C;AAC3C,8BAAsD;AACtD,uBAA0B;AAC1B,2BAA8B;AAC9B,yBAAgC;AAChC,iCAAmC;AACnC,wBAA+B;AAC/B,oBAOO;AACP,8BAAiC;AACjC,mCAAsC;AAE/B,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,YAAM,cAAc,GAAG,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAC1E,aAAO,kBAAkB,GAAG,eAAe,IAAI,WAAW,KAAK;AAAA,IACjE;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,YAAI,kCAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC,cAAc,WAAW,cAAc,EAAE;AAAA,IAChH;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK,cAAc,WAAW,cAAc,EAAE;AAAA,IAChF;AACA,QAAI,UAAU;AACZ,aAAO,GAAG,WAAW;AAAA,IACvB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,gBAAgB,QAAQ,CAAC;AAE1C,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAGnD,QAAM,mBAAmB,CAAC,UAAU,mBAAmB,QAAQ,EAAE,KAAK,OAAO;AAE7E,QAAM,gBAAgB,CAAC,MAA8C;AACnE,MAAE,eAAe;AACjB,kBAAc,EAAE,cAAc,QAAQ,YAAY,CAAC;AACnD,gBAAY,SAAS,MAAM;AAAA,EAC7B;AACA,SACE,6CAAC,oCAAmB,eAClB;AAAA,gDAAC,2CAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV;AAAA,QACA,eAAY;AAAA,QACZ,iBAAiB;AAAA,QAEjB,sDAAC,sCAAc,OAAO,iBAAiB;AAAA;AAAA,IACzC;AAAA,IAKD,cAAc,SAAS,CAAC,SAAS,4CAAC,iCAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAM5G,4CAAC,iCAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,oBAAkB;AAAA,QAClB,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC,OAAO,EAAE,MAAM;AAAA,QACf,cAAU,4BAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc,kBAAkB;AAAA,QAChC,cAAa;AAAA,QACb,iBAAe;AAAA;AAAA,IACjB;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,YAAY,CAAC,EAAE,YAAY;AAAA;AAAA,IAC7B;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n ownerProps?: {\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n };\n}> = (props) => {\n const { pill, trailingComma, ownerProps } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n /**\n * WORKAROUND: Manual className management\n *\n * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n * When using the slot system (ownerProps), the internal component's className\n * is overridden by the styled-component's generated className, causing\n * DSPillV2's variant-specific classes to be lost.\n *\n * These classes are required for correct styling of different pill types:\n * - ds-pill-wrapper-removable: Interactive pills with remove button\n * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n *\n * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n * when styled(InnerComponent) is used. Current implementation overwrites className\n * instead of merging it.\n *\n * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n *\n *\n * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n */\n const className = React.useMemo(() => {\n if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n return 'ds-pill-wrapper ds-pill-wrapper-value';\n }, [type]);\n\n return (\n <StyledDSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled || pill.disabled}\n type={type}\n className={className}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n readOnly={readOnly}\n trailingComma={trailingComma}\n tabIndex={-1}\n labelTruncated\n disableTruncationTooltip\n onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n if (readOnly) return;\n // preventing the menu to be opened\n e.stopPropagation();\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(pill, selectedValues),\n pill,\n e,\n );\n internalRef.current?.focus();\n }}\n {...ownerProps}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA/DJ,mBAAkC;AAClC,yBAA4B;AAE5B,wBAA0C;AAC1C,oBAA+B;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,OAAO,aAAAC,QAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAY,aAAAA,QAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n ownerProps?: {\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n };\n}> = (props) => {\n const { pill, trailingComma, ownerProps } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n /**\n * WORKAROUND: Manual className management\n *\n * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n * When using the slot system (ownerProps), the internal component's className\n * is overridden by the styled-component's generated className, causing\n * DSPillV2's variant-specific classes to be lost.\n *\n * These classes are required for correct styling of different pill types:\n * - ds-pill-wrapper-removable: Interactive pills with remove button\n * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n *\n * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n * when styled(InnerComponent) is used. Current implementation overwrites className\n * instead of merging it.\n *\n * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n *\n *\n * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n */\n const className = React.useMemo(() => {\n if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n return 'ds-pill-wrapper ds-pill-wrapper-value';\n }, [type]);\n\n return (\n <StyledDSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled || pill.disabled}\n type={type}\n className={className}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n readOnly={readOnly}\n trailingComma={trailingComma}\n tabIndex={-1}\n labelTruncated\n /**\n * PUI-18660: intentionally unconditional for every pill type (removable/labelOnly/value),\n * not a bug. The pill never shows its own hover tooltip on truncation here \u2014 consumers who\n * need the full value in readOnly/aria-disabled states (where the menu can't be opened)\n * are expected to wrap the combobox itself in DSTooltipV3. See the Heads Up entry in the\n * v27.1 Incoming Changes release notes and the \"WithTooltip\" example in ds-form-multi-combobox.\n */\n disableTruncationTooltip\n onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n if (readOnly) return;\n // preventing the menu to be opened\n e.stopPropagation();\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(pill, selectedValues),\n pill,\n e,\n );\n internalRef.current?.focus();\n }}\n {...ownerProps}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA/DJ,mBAAkC;AAClC,yBAA4B;AAE5B,wBAA0C;AAC1C,oBAA+B;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,OAAO,aAAAC,QAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAY,aAAAA,QAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MAQd,0BAAwB;AAAA,MACxB,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,cACC,6CAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IA7BC,KAAK;AAAA,EA8BZ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext", "React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { styled } from "@elliemae/ds-system";
|
|
4
|
+
const TruncatedSpan = styled.span`
|
|
5
|
+
text-overflow: ellipsis;
|
|
6
|
+
white-space: nowrap;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
display: inline-block;
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
`;
|
|
11
|
+
const TruncatedText = ({ value = "" }) => /* @__PURE__ */ jsx(TruncatedSpan, { children: value });
|
|
12
|
+
var TruncatedText_default = TruncatedText;
|
|
13
|
+
export {
|
|
14
|
+
TruncatedText,
|
|
15
|
+
TruncatedText_default as default
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=TruncatedText.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedText.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\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\ninterface TruncatedTextProps {\n value?: string;\n}\n\n/**\n * PUI-18660: this used to render its own hand-rolled hover tooltip on truncation.\n * That internal tooltip was removed \u2014 truncation is visual-only here. Consumers who\n * need the full value on hover/focus (e.g. readOnly/aria-disabled states where the\n * menu can't be opened) wrap the combobox in DSTooltipV3 themselves; see the\n * \"WithTooltip\" examples in ds-form-single-combobox / ds-form-multi-combobox.\n */\nconst TruncatedText = ({ value = '' }: TruncatedTextProps) => <TruncatedSpan>{value}</TruncatedSpan>;\n\nexport { TruncatedText };\nexport default TruncatedText;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqBuC;AArB9D,SAAS,cAAc;AAEvB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7B,MAAM,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAA0B,oBAAC,iBAAe,iBAAM;AAGpF,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -4,7 +4,7 @@ import { useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
|
4
4
|
import { useCallback, useContext, useMemo } from "react";
|
|
5
5
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
6
6
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
7
|
-
import {
|
|
7
|
+
import { TruncatedText } from "../../TruncatedText.js";
|
|
8
8
|
import { ControlsInput } from "../controls-input/ControlsInput.js";
|
|
9
9
|
import { DropdownIndicator } from "../DropdownIndicator.js";
|
|
10
10
|
import { MultiSelectedValuesContainer } from "../multi-selected-values-container/index.js";
|
|
@@ -118,7 +118,7 @@ const Controls = () => {
|
|
|
118
118
|
disabled: disabled ?? false,
|
|
119
119
|
applyAriaDisabled: applyAriaDisabled ?? false,
|
|
120
120
|
getOwnerProps,
|
|
121
|
-
children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(
|
|
121
|
+
children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(TruncatedText, { value: selectedValues.label }) : null
|
|
122
122
|
}
|
|
123
123
|
)
|
|
124
124
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC2HX,cAoBJ,YApBI;AAzHZ,SAAS,qBAAqB;AAC9B,SAAgB,aAAa,YAAY,eAAe;AACxD,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { TruncatedText } from '../../TruncatedText.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n StyledControlsWrapper,\n StyledHeaderActionsWrapper,\n StyledSelection,\n StyledSingleSelectWraper,\n StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = (): JSX.Element => {\n const {\n props,\n props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n inputValue,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n shouldPreventContextMenuOpening,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (applyAriaDisabled || shouldPreventContextMenuOpening) {\n internalRef.current?.focus();\n return;\n }\n if (hasFocus && menuState && !inline) {\n setMenuState(false, 'click');\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true, 'click');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n disabled,\n listRef,\n hasFocus,\n menuState,\n inline,\n setMenuState,\n focusOptionIdx,\n readOnly,\n applyAriaDisabled,\n isMenuOpenableWithReadOnly,\n ]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (applyAriaDisabled) return;\n if (menuState || disabled || shouldPreventContextMenuOpening) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true, 'pill-click');\n }\n },\n [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n innerRef={controlsWrapperRef}\n readOnly={readOnly ?? false}\n cols={cols}\n disabled={disabled ?? false}\n applyAriaDisabled={applyAriaDisabled ?? false}\n hasError={hasError ?? false}\n inline={inline ?? false}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n aria-disabled={applyAriaDisabled}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection\n variant=\"b2\"\n component=\"div\"\n innerRef={selectedOptionsRef}\n onClick={handleOnPillsClick}\n getOwnerProps={getOwnerProps}\n >\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <StyledSingleSelectWraper\n readOnly={readOnly ?? false}\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n disabled={disabled ?? false}\n applyAriaDisabled={applyAriaDisabled ?? false}\n getOwnerProps={getOwnerProps}\n >\n {selectedValues && inputValue === '' ? <TruncatedText 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 getOwnerProps={getOwnerProps}\n >\n <StyleHeaderActionsSeparator\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getOwnerProps}\n />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useContext, useMemo } from "react";
|
|
4
4
|
import { useGetGlobalAttributes, useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { mergeRefs } from "@elliemae/ds-system";
|
|
6
|
-
import {
|
|
6
|
+
import { TruncatedText } from "../../TruncatedText.js";
|
|
7
7
|
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
8
8
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
9
9
|
import { isArrayOfItems } from "../../utils/listHelper.js";
|
|
@@ -94,7 +94,7 @@ const ControlsInput = () => {
|
|
|
94
94
|
getOwnerProps,
|
|
95
95
|
"aria-hidden": "true",
|
|
96
96
|
$nonInteractive: isNonInteractive,
|
|
97
|
-
children: /* @__PURE__ */ jsx(
|
|
97
|
+
children: /* @__PURE__ */ jsx(TruncatedText, { value: showPlaceholder })
|
|
98
98
|
}
|
|
99
99
|
),
|
|
100
100
|
menuState === false && !inline ? /* @__PURE__ */ jsx(StyledHiddenDiv, { id: `combo-listbox-${instanceUid}` }) : null,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgGnB,SACE,KADF;AAhGJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,iBAAiB;AAC1B,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedText } from '../../TruncatedText.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n StyledHiddenDiv,\n StyledInput,\n StyledInputPlaceHolder,\n StyledInputWidthReference,\n StyledInputWrapper,\n StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props,\n props: {\n autoFocus,\n inline,\n selectedValues,\n placeholder,\n disabled,\n innerRef,\n isLoading,\n onlySelectable,\n applyAriaDisabled,\n readOnly,\n ...restProps\n },\n focusOptionIdx,\n hasFocus,\n internalRef,\n inputValue,\n setInputValue,\n menuState,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n const {\n tabIndex,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\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 // `.some(Boolean)` over `||` keeps this component within its cyclomatic-complexity limit.\n const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);\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 getOwnerProps={getOwnerProps}>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder\n variant=\"b2\"\n component=\"span\"\n getOwnerProps={getOwnerProps}\n aria-hidden=\"true\"\n $nonInteractive={isNonInteractive}\n >\n <TruncatedText value={showPlaceholder} />\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 ?? false}\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 ?? false}\n autoComplete=\"off\"\n aria-readonly={readOnly}\n />\n {/* This input is used to handle the paste event */}\n <StyleHiddenInput\n type=\"text\"\n disabled={disabled || applyAriaDisabled}\n readOnly={readOnly}\n name=\"hidden\"\n tabIndex={-1}\n onPaste={handleOnPaste}\n aria-hidden=\"true\"\n isDisabled={!!(disabled || applyAriaDisabled)}\n />\n </StyledInputWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n ownerProps?: {\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n };\n}> = (props) => {\n const { pill, trailingComma, ownerProps } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n /**\n * WORKAROUND: Manual className management\n *\n * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n * When using the slot system (ownerProps), the internal component's className\n * is overridden by the styled-component's generated className, causing\n * DSPillV2's variant-specific classes to be lost.\n *\n * These classes are required for correct styling of different pill types:\n * - ds-pill-wrapper-removable: Interactive pills with remove button\n * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n *\n * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n * when styled(InnerComponent) is used. Current implementation overwrites className\n * instead of merging it.\n *\n * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n *\n *\n * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n */\n const className = React.useMemo(() => {\n if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n return 'ds-pill-wrapper ds-pill-wrapper-value';\n }, [type]);\n\n return (\n <StyledDSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled || pill.disabled}\n type={type}\n className={className}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n readOnly={readOnly}\n trailingComma={trailingComma}\n tabIndex={-1}\n labelTruncated\n disableTruncationTooltip\n onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n if (readOnly) return;\n // preventing the menu to be opened\n e.stopPropagation();\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(pill, selectedValues),\n pill,\n e,\n );\n internalRef.current?.focus();\n }}\n {...ownerProps}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n ownerProps?: {\n getOwnerProps: () => object;\n getOwnerPropsArguments: () => object;\n };\n}> = (props) => {\n const { pill, trailingComma, ownerProps } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n /**\n * WORKAROUND: Manual className management\n *\n * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n * When using the slot system (ownerProps), the internal component's className\n * is overridden by the styled-component's generated className, causing\n * DSPillV2's variant-specific classes to be lost.\n *\n * These classes are required for correct styling of different pill types:\n * - ds-pill-wrapper-removable: Interactive pills with remove button\n * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n *\n * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n * when styled(InnerComponent) is used. Current implementation overwrites className\n * instead of merging it.\n *\n * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n *\n *\n * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n */\n const className = React.useMemo(() => {\n if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n return 'ds-pill-wrapper ds-pill-wrapper-value';\n }, [type]);\n\n return (\n <StyledDSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled || pill.disabled}\n type={type}\n className={className}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n readOnly={readOnly}\n trailingComma={trailingComma}\n tabIndex={-1}\n labelTruncated\n /**\n * PUI-18660: intentionally unconditional for every pill type (removable/labelOnly/value),\n * not a bug. The pill never shows its own hover tooltip on truncation here \u2014 consumers who\n * need the full value in readOnly/aria-disabled states (where the menu can't be opened)\n * are expected to wrap the combobox itself in DSTooltipV3. See the Heads Up entry in the\n * v27.1 Incoming Changes release notes and the \"WithTooltip\" example in ds-form-multi-combobox.\n */\n disableTruncationTooltip\n onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n if (readOnly) return;\n // preventing the menu to be opened\n e.stopPropagation();\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(pill, selectedValues),\n pill,\n e,\n );\n internalRef.current?.focus();\n }}\n {...ownerProps}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MAQd,0BAAwB;AAAA,MACxB,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,UACC,0BAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IA7BC,KAAK;AAAA,EA8BZ;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface TruncatedTextProps {
|
|
2
|
+
value?: string;
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* PUI-18660: this used to render its own hand-rolled hover tooltip on truncation.
|
|
6
|
+
* That internal tooltip was removed — truncation is visual-only here. Consumers who
|
|
7
|
+
* need the full value on hover/focus (e.g. readOnly/aria-disabled states where the
|
|
8
|
+
* menu can't be opened) wrap the combobox in DSTooltipV3 themselves; see the
|
|
9
|
+
* "WithTooltip" examples in ds-form-single-combobox / ds-form-multi-combobox.
|
|
10
|
+
*/
|
|
11
|
+
declare const TruncatedText: ({ value }: TruncatedTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export { TruncatedText };
|
|
13
|
+
export default TruncatedText;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.47",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -37,26 +37,26 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-pills-v2": "3.70.0-next.
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-fast-list": "3.70.0-next.47",
|
|
41
|
+
"@elliemae/ds-button-v2": "3.70.0-next.47",
|
|
42
|
+
"@elliemae/ds-floating-context": "3.70.0-next.47",
|
|
43
|
+
"@elliemae/ds-menu-items": "3.70.0-next.47",
|
|
44
|
+
"@elliemae/ds-icons": "3.70.0-next.47",
|
|
45
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.47",
|
|
46
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.47",
|
|
47
|
+
"@elliemae/ds-pills-v2": "3.70.0-next.47",
|
|
48
|
+
"@elliemae/ds-system": "3.70.0-next.47",
|
|
49
|
+
"@elliemae/ds-typography": "3.70.0-next.47",
|
|
50
|
+
"@elliemae/ds-grid": "3.70.0-next.47"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.13.0",
|
|
54
54
|
"jest": "^30.0.0",
|
|
55
55
|
"styled-components": "~5.3.9",
|
|
56
56
|
"styled-system": "^5.1.5",
|
|
57
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.
|
|
58
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
59
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
57
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.47",
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.47",
|
|
59
|
+
"@elliemae/ds-test-utils": "3.70.0-next.47"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"@elliemae/pui-theme": "~2.13.0",
|
|
@@ -1,96 +0,0 @@
|
|
|
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 TruncatedTooltipText_exports = {};
|
|
30
|
-
__export(TruncatedTooltipText_exports, {
|
|
31
|
-
TruncatedTooltipText: () => TruncatedTooltipText,
|
|
32
|
-
default: () => TruncatedTooltipText_default
|
|
33
|
-
});
|
|
34
|
-
module.exports = __toCommonJS(TruncatedTooltipText_exports);
|
|
35
|
-
var React = __toESM(require("react"));
|
|
36
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
-
var import_react = require("react");
|
|
38
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
-
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
40
|
-
const TruncatedSpan = import_ds_system.styled.span`
|
|
41
|
-
text-overflow: ellipsis;
|
|
42
|
-
white-space: nowrap;
|
|
43
|
-
overflow: hidden;
|
|
44
|
-
display: inline-block;
|
|
45
|
-
max-width: 100%;
|
|
46
|
-
`;
|
|
47
|
-
const TooltipContainer = import_ds_system.styled.div`
|
|
48
|
-
text-align: center;
|
|
49
|
-
min-width: ${({ theme }) => theme.space.l};
|
|
50
|
-
max-width: 250px;
|
|
51
|
-
overflow-wrap: break-word;
|
|
52
|
-
word-break: break-word;
|
|
53
|
-
min-height: 30px;
|
|
54
|
-
display: grid;
|
|
55
|
-
align-items: center;
|
|
56
|
-
padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
|
|
57
|
-
position: relative;
|
|
58
|
-
background-color: white;
|
|
59
|
-
border-radius: 2px;
|
|
60
|
-
font-size: 13px;
|
|
61
|
-
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
62
|
-
pointer-events: none;
|
|
63
|
-
`;
|
|
64
|
-
const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
65
|
-
const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
|
|
66
|
-
const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
|
|
67
|
-
placement,
|
|
68
|
-
externallyControlledIsOpen: showTooltip,
|
|
69
|
-
withoutAnimation: true
|
|
70
|
-
});
|
|
71
|
-
const handleMouseEnter = (0, import_react.useCallback)((e) => {
|
|
72
|
-
const el = e.currentTarget;
|
|
73
|
-
setShowTooltip(el.offsetWidth < el.scrollWidth);
|
|
74
|
-
}, []);
|
|
75
|
-
const handleMouseLeave = (0, import_react.useCallback)(() => {
|
|
76
|
-
setShowTooltip(false);
|
|
77
|
-
}, []);
|
|
78
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
79
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
|
|
80
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
-
import_ds_floating_context.FloatingWrapper,
|
|
82
|
-
{
|
|
83
|
-
innerRef: refs.setFloating,
|
|
84
|
-
isOpen: showTooltip,
|
|
85
|
-
floatingStyles,
|
|
86
|
-
context,
|
|
87
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
|
|
88
|
-
value,
|
|
89
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
|
|
90
|
-
] })
|
|
91
|
-
}
|
|
92
|
-
)
|
|
93
|
-
] });
|
|
94
|
-
};
|
|
95
|
-
var TruncatedTooltipText_default = TruncatedTooltipText;
|
|
96
|
-
//# sourceMappingURL=TruncatedTooltipText.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AA5DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,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,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,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,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,70 +0,0 @@
|
|
|
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: center;
|
|
19
|
-
min-width: ${({ theme }) => theme.space.l};
|
|
20
|
-
max-width: 250px;
|
|
21
|
-
overflow-wrap: break-word;
|
|
22
|
-
word-break: break-word;
|
|
23
|
-
min-height: 30px;
|
|
24
|
-
display: grid;
|
|
25
|
-
align-items: center;
|
|
26
|
-
padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
|
|
27
|
-
position: relative;
|
|
28
|
-
background-color: white;
|
|
29
|
-
border-radius: 2px;
|
|
30
|
-
font-size: 13px;
|
|
31
|
-
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
32
|
-
pointer-events: none;
|
|
33
|
-
`;
|
|
34
|
-
const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
35
|
-
const [showTooltip, setShowTooltip] = useState(false);
|
|
36
|
-
const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
|
|
37
|
-
placement,
|
|
38
|
-
externallyControlledIsOpen: showTooltip,
|
|
39
|
-
withoutAnimation: true
|
|
40
|
-
});
|
|
41
|
-
const handleMouseEnter = useCallback((e) => {
|
|
42
|
-
const el = e.currentTarget;
|
|
43
|
-
setShowTooltip(el.offsetWidth < el.scrollWidth);
|
|
44
|
-
}, []);
|
|
45
|
-
const handleMouseLeave = useCallback(() => {
|
|
46
|
-
setShowTooltip(false);
|
|
47
|
-
}, []);
|
|
48
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
49
|
-
/* @__PURE__ */ jsx(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
|
|
50
|
-
/* @__PURE__ */ jsx(
|
|
51
|
-
FloatingWrapper,
|
|
52
|
-
{
|
|
53
|
-
innerRef: refs.setFloating,
|
|
54
|
-
isOpen: showTooltip,
|
|
55
|
-
floatingStyles,
|
|
56
|
-
context,
|
|
57
|
-
children: /* @__PURE__ */ jsxs(TooltipContainer, { children: [
|
|
58
|
-
value,
|
|
59
|
-
/* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
|
|
60
|
-
] })
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
] });
|
|
64
|
-
};
|
|
65
|
-
var TruncatedTooltipText_default = TruncatedTooltipText;
|
|
66
|
-
export {
|
|
67
|
-
TruncatedTooltipText,
|
|
68
|
-
TruncatedTooltipText_default as default
|
|
69
|
-
};
|
|
70
|
-
//# sourceMappingURL=TruncatedTooltipText.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${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;AC4DnB,mBACE,KASE,YAVJ;AA5DJ,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;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,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 +0,0 @@
|
|
|
1
|
-
import { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';
|
|
2
|
-
interface TruncatedTooltipTextProps {
|
|
3
|
-
value?: string;
|
|
4
|
-
placement?: DSHookFloatingContextT.PopperPlacementsT;
|
|
5
|
-
}
|
|
6
|
-
declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export { TruncatedTooltipText };
|
|
8
|
-
export default TruncatedTooltipText;
|