@elliemae/ds-pills-v2 3.70.0-next.36 → 3.70.0-next.38
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/TruncatedTooltipText.js +34 -18
- package/dist/cjs/TruncatedTooltipText.js.map +2 -2
- package/dist/cjs/components/TextComponent.js +1 -1
- package/dist/cjs/components/TextComponent.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +2 -1
- package/dist/cjs/components/types/DropdownPill.js.map +2 -2
- package/dist/cjs/components/types/LabelOnlyPill.js +13 -1
- package/dist/cjs/components/types/LabelOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/LabelPill.js +2 -1
- package/dist/cjs/components/types/LabelPill.js.map +2 -2
- package/dist/cjs/components/types/MenuButtonPill.js +2 -1
- package/dist/cjs/components/types/MenuButtonPill.js.map +2 -2
- package/dist/cjs/components/types/ReadOnlyPill.js +2 -1
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/RemovablePill.js +2 -0
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/components/types/ValuePill.js +2 -0
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +1 -0
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/esm/TruncatedTooltipText.js +35 -19
- package/dist/esm/TruncatedTooltipText.js.map +2 -2
- package/dist/esm/components/TextComponent.js +1 -1
- package/dist/esm/components/TextComponent.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +2 -1
- package/dist/esm/components/types/DropdownPill.js.map +2 -2
- package/dist/esm/components/types/LabelOnlyPill.js +13 -1
- package/dist/esm/components/types/LabelOnlyPill.js.map +2 -2
- package/dist/esm/components/types/LabelPill.js +2 -1
- package/dist/esm/components/types/LabelPill.js.map +2 -2
- package/dist/esm/components/types/MenuButtonPill.js +2 -1
- package/dist/esm/components/types/MenuButtonPill.js.map +2 -2
- package/dist/esm/components/types/ReadOnlyPill.js +2 -1
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/components/types/RemovablePill.js +2 -0
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +2 -0
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +4 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +1 -0
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/types/TruncatedTooltipText.d.ts +2 -1
- package/dist/types/components/TextComponent.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/package.json +14 -14
|
@@ -59,9 +59,16 @@ const TooltipContainer = import_ds_system.styled.div`
|
|
|
59
59
|
border-radius: 2px;
|
|
60
60
|
font-size: 13px;
|
|
61
61
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
62
|
-
pointer-events: none;
|
|
63
62
|
`;
|
|
64
|
-
const
|
|
63
|
+
const TruncatedTooltipDetectionBox = import_ds_system.styled.div`
|
|
64
|
+
position: absolute;
|
|
65
|
+
top: -15px;
|
|
66
|
+
right: -15px;
|
|
67
|
+
width: calc(100% + 30px);
|
|
68
|
+
height: calc(100% + 30px);
|
|
69
|
+
z-index: -1;
|
|
70
|
+
`;
|
|
71
|
+
const TruncatedTooltipText = ({ value = "", placement = "top", disableTooltip = false }) => {
|
|
65
72
|
const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
|
|
66
73
|
const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
|
|
67
74
|
placement,
|
|
@@ -75,22 +82,31 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
|
75
82
|
const handleMouseLeave = (0, import_react.useCallback)(() => {
|
|
76
83
|
setShowTooltip(false);
|
|
77
84
|
}, []);
|
|
78
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
85
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
86
|
+
TruncatedSpan,
|
|
87
|
+
{
|
|
88
|
+
innerRef: refs.setReference,
|
|
89
|
+
onMouseEnter: disableTooltip ? void 0 : handleMouseEnter,
|
|
90
|
+
onMouseLeave: disableTooltip ? void 0 : handleMouseLeave,
|
|
91
|
+
children: [
|
|
92
|
+
value,
|
|
93
|
+
!disableTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
import_ds_floating_context.FloatingWrapper,
|
|
95
|
+
{
|
|
96
|
+
innerRef: refs.setFloating,
|
|
97
|
+
isOpen: showTooltip,
|
|
98
|
+
floatingStyles,
|
|
99
|
+
context,
|
|
100
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
|
|
101
|
+
value,
|
|
102
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedTooltipDetectionBox, {}),
|
|
103
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
|
|
104
|
+
] })
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
94
110
|
};
|
|
95
111
|
var TruncatedTooltipText_default = TruncatedTooltipText;
|
|
96
112
|
//# sourceMappingURL=TruncatedTooltipText.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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`;\n\n/**\n * Mirrors DSTooltipV3's StyledMouseOverDetectionBox \u2014 extends hover area 15px on all sides,\n * covering the 12px floating offset gap so the tooltip doesn't close while the mouse crosses it.\n */\nconst TruncatedTooltipDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n disableTooltip?: boolean;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top', disableTooltip = false }: 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 <TruncatedSpan\n innerRef={refs.setReference}\n onMouseEnter={disableTooltip ? undefined : handleMouseEnter}\n onMouseLeave={disableTooltip ? undefined : handleMouseLeave}\n >\n {value}\n {!disableTooltip && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <TooltipContainer>\n {value}\n <TruncatedTooltipDetectionBox />\n <PopoverArrow {...arrowStyles} />\n </TooltipContainer>\n </FloatingWrapper>\n )}\n </TruncatedSpan>\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;ADsFb;AAtFV,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;AAOnD,MAAM,+BAA+B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5C,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,OAAO,iBAAiB,MAAM,MAAiC;AACrH,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;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,cAAc,iBAAiB,SAAY;AAAA,MAC3C,cAAc,iBAAiB,SAAY;AAAA,MAE1C;AAAA;AAAA,QACA,CAAC,kBACA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YAEA,uDAAC,oBACE;AAAA;AAAA,cACD,4CAAC,gCAA6B;AAAA,cAC9B,4CAAC,2CAAc,GAAG,aAAa;AAAA,eACjC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGA,IAAO,+BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,5 +36,5 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_TruncatedTooltipText = require("../TruncatedTooltipText.js");
|
|
38
38
|
var import_styled = require("./styled.js");
|
|
39
|
-
const TextComponent = import_react.default.memo(({ labelTruncated, label, pillSize, getOwnerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTextWrapper, { pillSize, variant: "b2", component: "span", getOwnerProps, children: labelTruncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: label }) : label }));
|
|
39
|
+
const TextComponent = import_react.default.memo(({ labelTruncated, disableTruncationTooltip, label, pillSize, getOwnerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTextWrapper, { pillSize, variant: "b2", component: "span", getOwnerProps, children: labelTruncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: label, disableTooltip: disableTruncationTooltip }) : label }));
|
|
40
40
|
//# sourceMappingURL=TextComponent.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/TextComponent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\nimport { StyledTextWrapper } from './styled.js';\n\nexport const TextComponent = React.memo<{\n labelTruncated: DSPillT.InternalProps['labelTruncated'];\n label: DSPillT.InternalProps['label'];\n pillSize: DSPillT.InternalProps['size'];\n getOwnerProps?: () => object;\n}>(({ labelTruncated, label, pillSize, getOwnerProps }) => (\n <StyledTextWrapper pillSize={pillSize} variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n {labelTruncated ? <TruncatedTooltipText value={label} /> : label}\n </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\nimport { StyledTextWrapper } from './styled.js';\n\nexport const TextComponent = React.memo<{\n labelTruncated: DSPillT.InternalProps['labelTruncated'];\n disableTruncationTooltip: DSPillT.InternalProps['disableTruncationTooltip'];\n label: DSPillT.InternalProps['label'];\n pillSize: DSPillT.InternalProps['size'];\n getOwnerProps?: () => object;\n}>(({ labelTruncated, disableTruncationTooltip, label, pillSize, getOwnerProps }) => (\n <StyledTextWrapper pillSize={pillSize} variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n {labelTruncated ? <TruncatedTooltipText value={label} disableTooltip={disableTruncationTooltip} /> : label}\n </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaD;AAbtB,mBAAkB;AAClB,kCAAqC;AAErC,oBAAkC;AAE3B,MAAM,gBAAgB,aAAAA,QAAM,KAMhC,CAAC,EAAE,gBAAgB,0BAA0B,OAAO,UAAU,cAAc,MAC7E,4CAAC,mCAAkB,UAAoB,SAAQ,MAAK,WAAU,QAAO,eAClE,2BAAiB,4CAAC,oDAAqB,OAAO,OAAO,gBAAgB,0BAA0B,IAAK,OACvG,CACD;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ var import_TextComponent = require("../TextComponent.js");
|
|
|
44
44
|
var import_styled = require("../styled.js");
|
|
45
45
|
var import_constants = require("../../constants/index.js");
|
|
46
46
|
const DropdownPill = import_react.default.memo((props) => {
|
|
47
|
-
const { label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick } = props;
|
|
47
|
+
const { label, size, labelTruncated, disableTruncationTooltip, dropdownProps, innerRef, ariaLabel, onDropdownClick } = props;
|
|
48
48
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
49
49
|
const chevronRef = (0, import_react.useRef)(null);
|
|
50
50
|
const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
|
|
@@ -65,6 +65,7 @@ const DropdownPill = import_react.default.memo((props) => {
|
|
|
65
65
|
pillSize: size,
|
|
66
66
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
67
67
|
labelTruncated,
|
|
68
|
+
disableTruncationTooltip,
|
|
68
69
|
label
|
|
69
70
|
}
|
|
70
71
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, disableTruncationTooltip, dropdownProps, innerRef, ariaLabel, onDropdownClick } =\n props;\n const ownerProps = useOwnerProps(props);\n const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n cols={['auto', 'minmax(24px, auto)']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={label}\n />\n <DSDropdownMenuV2\n placementOrderPreference={['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']}\n {...dropdownProps}\n onClickOutside={(e) => {\n if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <StyledAgnosticPillRegion>\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid={PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON}\n innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAtBJ,gCAAiC;AACjC,sBAAiC;AACjC,uBAA0B;AAC1B,8BAA8B;AAE9B,mBAAuC;AACvC,iBAAoB;AAEpB,0BAA6B;AAC7B,2BAA8B;AAC9B,oBAAoE;AACpE,uBAAoC;AAE7B,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,eAAe,UAAU,WAAW,gBAAgB,IACjH;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,iBAAa,qBAAiC,IAAI;AAExD,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,MACnC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,0BAA0B,CAAC,gBAAgB,UAAU,cAAc,aAAa,aAAa,OAAO,SAAS;AAAA,YAC5G,GAAG;AAAA,YACJ,gBAAgB,CAAC,MAAM;AACrB,kBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,kBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,YAClE;AAAA,YACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,YAEtC,sDAAC,0CACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAa,qCAAoB;AAAA,gBACjC,cAAU,4BAAU,YAAY,QAAwD;AAAA,gBACxF,cAAY,aAAa;AAAA,gBACzB,MAAK;AAAA,gBACL,SAAS;AAAA,gBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YAC5E,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,18 @@ var import_react = __toESM(require("react"));
|
|
|
38
38
|
var import_TextComponent = require("../TextComponent.js");
|
|
39
39
|
var import_styled = require("../styled.js");
|
|
40
40
|
const LabelOnlyPill = import_react.default.memo((props) => {
|
|
41
|
-
const {
|
|
41
|
+
const {
|
|
42
|
+
label,
|
|
43
|
+
size,
|
|
44
|
+
labelTruncated,
|
|
45
|
+
disableTruncationTooltip,
|
|
46
|
+
iconLeft,
|
|
47
|
+
IconLeft,
|
|
48
|
+
ariaLabel,
|
|
49
|
+
applyAriaDisabled,
|
|
50
|
+
readOnly,
|
|
51
|
+
trailingComma
|
|
52
|
+
} = props;
|
|
42
53
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
43
54
|
const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
44
55
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -65,6 +76,7 @@ const LabelOnlyPill = import_react.default.memo((props) => {
|
|
|
65
76
|
pillSize: size,
|
|
66
77
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
67
78
|
labelTruncated,
|
|
79
|
+
disableTruncationTooltip,
|
|
68
80
|
label: `${label}${trailingComma ? "," : ""}`
|
|
69
81
|
}
|
|
70
82
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/LabelOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledLabelOnlyPillWrapper } from '../styled.js';\n\nexport const LabelOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n const {\n label,\n size,\n labelTruncated,\n disableTruncationTooltip,\n iconLeft,\n IconLeft,\n ariaLabel,\n applyAriaDisabled,\n readOnly,\n trailingComma,\n } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n return (\n <StyledLabelOnlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n data-label={ariaLabel || label}\n cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n gutter=\"xxxs\"\n hasIcon={(iconLeft || IconLeft) !== null}\n role=\"group\"\n aria-label={label}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n {...globalAttributes}\n {...ownerProps}\n >\n {IconLeft ? <IconLeft label={label} /> : iconLeft}\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={`${label}${trailingComma ? ',' : ''}`}\n />\n </StyledLabelOnlyPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAtBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,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,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAO;AAAA,MACP,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
|
|
|
38
38
|
var import_TextComponent = require("../TextComponent.js");
|
|
39
39
|
var import_styled = require("../styled.js");
|
|
40
40
|
const LabelPill = import_react.default.memo((props) => {
|
|
41
|
-
const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;
|
|
41
|
+
const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, IconLeft, ariaLabel } = props;
|
|
42
42
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
43
43
|
const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
44
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -63,6 +63,7 @@ const LabelPill = import_react.default.memo((props) => {
|
|
|
63
63
|
pillSize: size,
|
|
64
64
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
65
65
|
labelTruncated,
|
|
66
|
+
disableTruncationTooltip,
|
|
66
67
|
label
|
|
67
68
|
}
|
|
68
69
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/LabelPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n return (\n <StyledLabelPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n data-label={ariaLabel || label}\n cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n gutter={0}\n hasIcon={(iconLeft || IconLeft) !== null}\n role=\"group\"\n aria-label={label}\n {...globalAttributes}\n {...ownerProps}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n label={label}\n />\n </StyledLabelPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAiE;AAE1D,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,UAAU,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledLabelPillWrapper } from '../styled.js';\n\nexport const LabelPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, IconLeft, ariaLabel } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n return (\n <StyledLabelPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n data-label={ariaLabel || label}\n cols={[(iconLeft || IconLeft) && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n gutter={0}\n hasIcon={(iconLeft || IconLeft) !== null}\n role=\"group\"\n aria-label={label}\n {...globalAttributes}\n {...ownerProps}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={label}\n />\n </StyledLabelPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAiE;AAE1D,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,UAAU,UAAU,IAAI;AACjG,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACrF,QAAQ;AAAA,MACR,UAAU,YAAY,cAAc;AAAA,MACpC,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE9E;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ var import_constants = require("../../constants/index.js");
|
|
|
44
44
|
const rowsForDsButtonV3 = () => ({ small: ["auto"], medium: ["auto"] });
|
|
45
45
|
const colsForDsButtonV3 = (size) => size === "m" ? { small: ["auto", "minmax(1.5625rem, auto)"], medium: ["auto", "minmax(1.9230rem, auto)"] } : { small: ["auto", "minmax(1.1875rem, auto)"], medium: ["auto", "minmax(1.4615rem, auto)"] };
|
|
46
46
|
const MenuButtonPill = import_react.default.memo((props) => {
|
|
47
|
-
const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;
|
|
47
|
+
const { label, size, labelTruncated, disableTruncationTooltip, innerRef, ariaLabel, menuButtonProps } = props;
|
|
48
48
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
49
49
|
const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
50
50
|
const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
|
|
@@ -87,6 +87,7 @@ const MenuButtonPill = import_react.default.memo((props) => {
|
|
|
87
87
|
pillSize: size,
|
|
88
88
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
89
89
|
labelTruncated,
|
|
90
|
+
disableTruncationTooltip,
|
|
90
91
|
label
|
|
91
92
|
}
|
|
92
93
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/MenuButtonPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { defaultProps as DSPillButtonDefaultProps } from '../../parts/DSPillButton/react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\n/* ************************************************************************************************************\n * Regarding magic numbers, default width and height\n * The Wrapper is setting a min-height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n * the \"magic\" values are actually 25px RT for \"m\" and 19px RT for \"s\"\n ***************************************************************************************************************\n * Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n * and I'm basing the styles on the same assumptions for width/height magic values.\n ************************************************************************************************************* */\nconst rowsForDsButtonV3 = () => ({ small: ['auto'], medium: ['auto'] });\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5625rem, auto)'], medium: ['auto', 'minmax(1.9230rem, auto)'] }\n : { small: ['auto', 'minmax(1.1875rem, auto)'], medium: ['auto', 'minmax(1.4615rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n if (!menuButtonProps) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps was not provided');\n }\n if (Object.keys(menuButtonProps).length === 0) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps is empty');\n }\n const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n const memoizedRows = useMemo(() => rowsForDsButtonV3(), []);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const dsMenubuttonRootProps = useMemo(\n () => ({\n width: `${width}`,\n height: `${height}`,\n }),\n [height, width],\n );\n\n const finalAriaLabel = ariaLabel || label;\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n cols={memoizedCols}\n rows={memoizedRows}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n {...globalAttributes}\n {...ownerProps}\n >\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n label={label}\n />\n <StyledAgnosticPillRegion>\n <StyledPillMenuButton\n innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n aria-label={finalAriaLabel}\n dsMenubuttonRoot={dsMenubuttonRootProps}\n {...menuButtonProps}\n // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n // are based on the button having the following props:\n data-testid={PILL_V2_DATA_TESTID.PILL_MENU_BUTTON}\n buttonType=\"raw\"\n className=\"ds-pill-button-right ds-pill-focus-point\"\n type=\"button\"\n width={`${width}`}\n height={`${height}`}\n // end of props for correcr circle/square/pill group visual behavior\n {...ownerProps}\n >\n <ChevronSmallDown color={['brand-primary', '800']} />\n </StyledPillMenuButton>\n </StyledAgnosticPillRegion>\n </StyledDropdownPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAvDJ,sBAAiC;AAEjC,8BAAsD;AACtD,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAA0F;AAC1F,uBAAoC;AAUpC,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;AACrE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE,IAC1F,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAEzF,MAAM,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { defaultProps as DSPillButtonDefaultProps } from '../../parts/DSPillButton/react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\n/* ************************************************************************************************************\n * Regarding magic numbers, default width and height\n * The Wrapper is setting a min-height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n * the \"magic\" values are actually 25px RT for \"m\" and 19px RT for \"s\"\n ***************************************************************************************************************\n * Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n * and I'm basing the styles on the same assumptions for width/height magic values.\n ************************************************************************************************************* */\nconst rowsForDsButtonV3 = () => ({ small: ['auto'], medium: ['auto'] });\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5625rem, auto)'], medium: ['auto', 'minmax(1.9230rem, auto)'] }\n : { small: ['auto', 'minmax(1.1875rem, auto)'], medium: ['auto', 'minmax(1.4615rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, disableTruncationTooltip, innerRef, ariaLabel, menuButtonProps } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n if (!menuButtonProps) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps was not provided');\n }\n if (Object.keys(menuButtonProps).length === 0) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps is empty');\n }\n const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n const memoizedRows = useMemo(() => rowsForDsButtonV3(), []);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const dsMenubuttonRootProps = useMemo(\n () => ({\n width: `${width}`,\n height: `${height}`,\n }),\n [height, width],\n );\n\n const finalAriaLabel = ariaLabel || label;\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n cols={memoizedCols}\n rows={memoizedRows}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n {...globalAttributes}\n {...ownerProps}\n >\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={label}\n />\n <StyledAgnosticPillRegion>\n <StyledPillMenuButton\n innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n aria-label={finalAriaLabel}\n dsMenubuttonRoot={dsMenubuttonRootProps}\n {...menuButtonProps}\n // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n // are based on the button having the following props:\n data-testid={PILL_V2_DATA_TESTID.PILL_MENU_BUTTON}\n buttonType=\"raw\"\n className=\"ds-pill-button-right ds-pill-focus-point\"\n type=\"button\"\n width={`${width}`}\n height={`${height}`}\n // end of props for correcr circle/square/pill group visual behavior\n {...ownerProps}\n >\n <ChevronSmallDown color={['brand-primary', '800']} />\n </StyledPillMenuButton>\n </StyledAgnosticPillRegion>\n </StyledDropdownPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAvDJ,sBAAiC;AAEjC,8BAAsD;AACtD,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyD;AACzD,2BAA8B;AAC9B,oBAA0F;AAC1F,uBAAoC;AAUpC,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;AACrE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE,IAC1F,EAAE,OAAO,CAAC,QAAQ,yBAAyB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAEzF,MAAM,iBAAiB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACzE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,WAAW,gBAAgB,IAAI;AACxG,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,MAAI,CAAC,iBAAiB;AAEpB,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,MAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,YAAQ,IAAI,mBAAmB,eAAe;AAC9C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,QAAM,EAAE,QAAQ,6BAAAC,aAAyB,OAAO,SAAS,6BAAAA,aAAyB,OAAO,IAAI;AAE7F,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC1D,QAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,QAAM,4BAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,OAAO,GAAG,KAAK;AAAA,MACf,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAiB,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,0CACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YAGJ,eAAa,qCAAoB;AAAA,YACjC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,GAAG,KAAK;AAAA,YACf,QAAQ,GAAG,MAAM;AAAA,YAEhB,GAAG;AAAA,YAEJ,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACrD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React", "DSPillButtonDefaultProps"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
|
|
|
38
38
|
var import_TextComponent = require("../TextComponent.js");
|
|
39
39
|
var import_styled = require("../styled.js");
|
|
40
40
|
const ReadOnlyPill = import_react.default.memo((props) => {
|
|
41
|
-
const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;
|
|
41
|
+
const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } = props;
|
|
42
42
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
43
43
|
const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
44
44
|
const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
|
|
@@ -68,6 +68,7 @@ const ReadOnlyPill = import_react.default.memo((props) => {
|
|
|
68
68
|
pillSize: size,
|
|
69
69
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
70
70
|
labelTruncated,
|
|
71
|
+
disableTruncationTooltip,
|
|
71
72
|
label
|
|
72
73
|
}
|
|
73
74
|
) : null,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>((props) => {\n const { label, size, labelTruncated, disableTruncationTooltip, iconLeft, iconRight, ariaLabel, IconLeft, IconRight } =\n props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n return (\n <StyledReadonlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n data-label={ariaLabel || label}\n cols={\n [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n gutter={0}\n hasIconRight={hasIconRight || hasIconRightNew}\n hasIconLeft={hasIconLeft || hasIconLeftNew}\n {...globalAttributes}\n {...ownerProps}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n {label ? (\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={label}\n />\n ) : null}\n {(iconRight || IconRight) && (\n <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n )}\n </StyledReadonlyPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAlBJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAoE;AAE7D,MAAM,eAAe,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,UAAU,WAAW,WAAW,UAAU,UAAU,IACjH;AACF,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAC5E,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,QAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,cAAY,aAAa;AAAA,MACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,QAAQ;AAAA,MACR,cAAc,gBAAgB;AAAA,MAC9B,aAAa,eAAe;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MAEF;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,QACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,IACE;AAAA,SACF,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -48,6 +48,7 @@ const RemovablePill = import_react.default.memo((props) => {
|
|
|
48
48
|
size,
|
|
49
49
|
disabled,
|
|
50
50
|
labelTruncated,
|
|
51
|
+
disableTruncationTooltip,
|
|
51
52
|
onRemove,
|
|
52
53
|
innerRef,
|
|
53
54
|
ariaLabel,
|
|
@@ -110,6 +111,7 @@ const RemovablePill = import_react.default.memo((props) => {
|
|
|
110
111
|
pillSize: size,
|
|
111
112
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
112
113
|
labelTruncated,
|
|
114
|
+
disableTruncationTooltip,
|
|
113
115
|
label
|
|
114
116
|
}
|
|
115
117
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nimport { DSPillGroupV2Context } from '../../parts/DSPillGroup/index.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledRemovablePillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>((props) => {\n const {\n label,\n size,\n disabled,\n labelTruncated,\n onRemove,\n innerRef,\n ariaLabel,\n tabIndex,\n applyAriaDisabled,\n iconLeft,\n IconLeft,\n } = props;\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex: globalTabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n if (applyAriaDisabled) return;\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onKeyboardNavigation, pillUid, applyAriaDisabled],\n );\n\n const handleOnRemove = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (applyAriaDisabled) return;\n if (onRemove) onRemove(e);\n },\n [onRemove, applyAriaDisabled],\n );\n\n return (\n <StyledRemovablePillWrapper\n pillSize={size}\n cols={\n [(iconLeft || IconLeft) && 'min-content', 'auto', `minmax(${size === 's' ? 14 : 20}px, auto)`].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n gutter={0}\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-label={ariaLabel || label}\n hasIcon={(iconLeft || IconLeft) !== null}\n {...globalAttributes}\n {...ownerProps}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n label={label}\n />\n <StyledAgnosticPillRegion>\n {/**\n * Button size = pill fit-content target (18 small / 24 medium) minus the agnostic\n * region's 2px top+bottom padding (\u00D72 = 4) \u2192 14 / 20. The pill height is fit-content,\n * and this button region would otherwise dominate the b2 label box (18/24) and force\n * the old 19/25. NOTE: no spec value exists for the button size that yields the pill's\n * target height (the spec only gives \"Button V3 small square\" + region 2px); 14/20 is\n * derived from the pill target \u2212 region padding. Raised as a spec concern.\n */}\n <DSPillButton\n {...props}\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_REMOVABLE_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={handleOnRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n applyAriaDisabled={applyAriaDisabled}\n disabled={disabled}\n width={`${size === 's' ? 14 : 20}px`}\n height={`${size === 's' ? 14 : 20}px`}\n >\n <CloseXsmall width={size === 's' ? 14 : 20} height={size === 's' ? 14 : 20} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n </StyledRemovablePillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nimport { DSPillGroupV2Context } from '../../parts/DSPillGroup/index.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledRemovablePillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const RemovablePill = React.memo<DSPillT.InternalProps>((props) => {\n const {\n label,\n size,\n disabled,\n labelTruncated,\n disableTruncationTooltip,\n onRemove,\n innerRef,\n ariaLabel,\n tabIndex,\n applyAriaDisabled,\n iconLeft,\n IconLeft,\n } = props;\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex: globalTabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n if (applyAriaDisabled) return;\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onKeyboardNavigation, pillUid, applyAriaDisabled],\n );\n\n const handleOnRemove = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (applyAriaDisabled) return;\n if (onRemove) onRemove(e);\n },\n [onRemove, applyAriaDisabled],\n );\n\n return (\n <StyledRemovablePillWrapper\n pillSize={size}\n cols={\n [(iconLeft || IconLeft) && 'min-content', 'auto', `minmax(${size === 's' ? 14 : 20}px, auto)`].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n gutter={0}\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-label={ariaLabel || label}\n hasIcon={(iconLeft || IconLeft) !== null}\n {...globalAttributes}\n {...ownerProps}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={label}\n />\n <StyledAgnosticPillRegion>\n {/**\n * Button size = pill fit-content target (18 small / 24 medium) minus the agnostic\n * region's 2px top+bottom padding (\u00D72 = 4) \u2192 14 / 20. The pill height is fit-content,\n * and this button region would otherwise dominate the b2 label box (18/24) and force\n * the old 19/25. NOTE: no spec value exists for the button size that yields the pill's\n * target height (the spec only gives \"Button V3 small square\" + region 2px); 14/20 is\n * derived from the pill target \u2212 region padding. Raised as a spec concern.\n */}\n <DSPillButton\n {...props}\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_REMOVABLE_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={handleOnRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n applyAriaDisabled={applyAriaDisabled}\n disabled={disabled}\n width={`${size === 's' ? 14 : 20}px`}\n height={`${size === 's' ? 14 : 20}px`}\n >\n <CloseXsmall width={size === 's' ? 14 : 20} height={size === 's' ? 14 : 20} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n </StyledRemovablePillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,6 +43,7 @@ const ValuePill = import_react.default.memo((props) => {
|
|
|
43
43
|
label,
|
|
44
44
|
size,
|
|
45
45
|
labelTruncated,
|
|
46
|
+
disableTruncationTooltip,
|
|
46
47
|
disabled,
|
|
47
48
|
tooltipValue,
|
|
48
49
|
iconLeft,
|
|
@@ -94,6 +95,7 @@ const ValuePill = import_react.default.memo((props) => {
|
|
|
94
95
|
pillSize: size,
|
|
95
96
|
getOwnerProps: ownerProps.getOwnerProps,
|
|
96
97
|
labelTruncated,
|
|
98
|
+
disableTruncationTooltip,
|
|
97
99
|
label: `${label}${trailingComma ? "," : ""}`
|
|
98
100
|
}
|
|
99
101
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>((props) => {\n const {\n label,\n size,\n labelTruncated,\n disabled,\n tooltipValue,\n iconLeft,\n IconLeft,\n iconRight,\n IconRight,\n ariaLabel,\n applyAriaDisabled,\n readOnly,\n applyTooltipOverflowWrap,\n trailingComma,\n } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n return (\n <StyledValuePillWrapper\n disabled={disabled}\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n cols={\n [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n hasIcon={(iconLeft || IconLeft) !== null}\n hasIconRight={(iconRight || IconRight) !== null}\n data-label={ariaLabel || label}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n {...globalAttributes}\n {...ownerProps}\n tabIndex={-1}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n {tooltipValue !== '' ? (\n <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n <StyledSpanWithTooltip\n pillSize={size}\n variant=\"b2\"\n component=\"span\"\n getOwnerProps={ownerProps.getOwnerProps}\n className=\"ds-pill-tooltip-value\"\n aria-disabled={applyAriaDisabled}\n >\n {label}\n </StyledSpanWithTooltip>\n </DSTooltipV3>\n ) : (\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n label={`${label}${trailingComma ? ',' : ''}`}\n />\n )}\n {(iconRight || IconRight) && (\n <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n )}\n </StyledValuePillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>((props) => {\n const {\n label,\n size,\n labelTruncated,\n disableTruncationTooltip,\n disabled,\n tooltipValue,\n iconLeft,\n IconLeft,\n iconRight,\n IconRight,\n ariaLabel,\n applyAriaDisabled,\n readOnly,\n applyTooltipOverflowWrap,\n trailingComma,\n } = props;\n const ownerProps = useOwnerProps(props);\n const { wrap, tabIndex, ...globalAttributes } = useGetGlobalAttributes(props);\n\n return (\n <StyledValuePillWrapper\n disabled={disabled}\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n cols={\n [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n hasIcon={(iconLeft || IconLeft) !== null}\n hasIconRight={(iconRight || IconRight) !== null}\n data-label={ariaLabel || label}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n {...globalAttributes}\n {...ownerProps}\n tabIndex={-1}\n >\n {(iconLeft || IconLeft) && (\n <StyledAgnosticPillRegion>{IconLeft ? <IconLeft label={label} /> : iconLeft}</StyledAgnosticPillRegion>\n )}\n {tooltipValue !== '' ? (\n <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n <StyledSpanWithTooltip\n pillSize={size}\n variant=\"b2\"\n component=\"span\"\n getOwnerProps={ownerProps.getOwnerProps}\n className=\"ds-pill-tooltip-value\"\n aria-disabled={applyAriaDisabled}\n >\n {label}\n </StyledSpanWithTooltip>\n </DSTooltipV3>\n ) : (\n <TextComponent\n pillSize={size}\n getOwnerProps={ownerProps.getOwnerProps}\n labelTruncated={labelTruncated}\n disableTruncationTooltip={disableTruncationTooltip}\n label={`${label}${trailingComma ? ',' : ''}`}\n />\n )}\n {(iconRight || IconRight) && (\n <StyledAgnosticPillRegion>{IconRight ? <IconRight label={label} /> : iconRight}</StyledAgnosticPillRegion>\n )}\n </StyledValuePillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AA7BJ,8BAAsD;AACtD,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAAwF;AAEjF,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,MAAM,UAAU,GAAG,iBAAiB,QAAI,gDAAuB,KAAK;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,QACpG,CAAC,aAAa;AAAA,MAChB;AAAA,MAEF,UAAU,YAAY,cAAc;AAAA,MACpC,eAAe,aAAa,eAAe;AAAA,MAC3C,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,UAAU;AAAA,MAER;AAAA,qBAAY,aACZ,4CAAC,0CAA0B,qBAAW,4CAAC,YAAS,OAAc,IAAK,UAAS;AAAA,QAE7E,iBAAiB,KAChB,4CAAC,oCAAY,MAAM,gBAAgB,IAAI,0BACrC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B,WAAU;AAAA,YACV,iBAAe;AAAA,YAEd;AAAA;AAAA,QACH,GACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE;AAAA;AAAA,QAC5C;AAAA,SAEA,aAAa,cACb,4CAAC,0CAA0B,sBAAY,4CAAC,aAAU,OAAc,IAAK,WAAU;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -49,6 +49,7 @@ const DSPillV2DefaultProps = {
|
|
|
49
49
|
ariaLabel: "",
|
|
50
50
|
size: "m",
|
|
51
51
|
labelTruncated: false,
|
|
52
|
+
disableTruncationTooltip: false,
|
|
52
53
|
tooltipValue: "",
|
|
53
54
|
iconLeft: null,
|
|
54
55
|
IconLeft: null,
|
|
@@ -91,6 +92,9 @@ const DSPillV2PropTypes = {
|
|
|
91
92
|
size: import_ds_props_helpers.PropTypes.oneOf(["s", "m"]).description("Vertical pill size").defaultValue("m"),
|
|
92
93
|
ariaLabel: import_ds_props_helpers.PropTypes.string.description("Aria label for the pill. If not provided we will use the label").defaultValue(""),
|
|
93
94
|
labelTruncated: import_ds_props_helpers.PropTypes.bool.description("Whether to truncate the pills label").defaultValue(false),
|
|
95
|
+
disableTruncationTooltip: import_ds_props_helpers.PropTypes.bool.description(
|
|
96
|
+
"When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti)."
|
|
97
|
+
).defaultValue(false),
|
|
94
98
|
tooltipValue: import_ds_props_helpers.PropTypes.string.description("String to show as a tooltip in the value pill").defaultValue(""),
|
|
95
99
|
iconLeft: import_ds_props_helpers.PropTypes.node.description("A component to show int the left of a readonly pill").defaultValue(null).deprecated({
|
|
96
100
|
version: "4.x",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-legacy-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { PILL_V2_SLOTS, DSPillV2Name } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n };\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS> {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,4BAAwB;AACxB,4BAA0D;AAE1D,8BAKO;AAEP,uBAA4C;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-legacy-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { PILL_V2_SLOTS, DSPillV2Name } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n };\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS> {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|