@elliemae/ds-pills-v2 3.60.0-next.9 → 3.70.0-next.1
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/components/TextComponent.js +2 -6
- package/dist/cjs/components/TextComponent.js.map +2 -2
- package/dist/cjs/components/styled.js +62 -32
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +5 -5
- package/dist/cjs/components/types/DropdownPill.js.map +2 -2
- package/dist/cjs/components/types/InputPill.js +5 -5
- package/dist/cjs/components/types/InputPill.js.map +2 -2
- package/dist/cjs/components/types/LabelOnlyPill.js +3 -2
- package/dist/cjs/components/types/LabelOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/LabelPill.js +5 -4
- package/dist/cjs/components/types/LabelPill.js.map +2 -2
- package/dist/cjs/components/types/MenuButtonPill.js +10 -8
- package/dist/cjs/components/types/MenuButtonPill.js.map +2 -2
- package/dist/cjs/components/types/ReadOnlyPill.js +6 -5
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/RemovablePill.js +31 -20
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/components/types/ValuePill.js +14 -6
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/constants/index.js +12 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/DSPillButton/DSPillButton.js +4 -4
- package/dist/cjs/parts/DSPillButton/DSPillButton.js.map +2 -2
- package/dist/cjs/parts/DSPillButton/react-desc-prop-types.js +2 -2
- package/dist/cjs/parts/DSPillButton/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -4
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/components/TextComponent.js +2 -6
- package/dist/esm/components/TextComponent.js.map +2 -2
- package/dist/esm/components/styled.js +63 -33
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +6 -6
- package/dist/esm/components/types/DropdownPill.js.map +2 -2
- package/dist/esm/components/types/InputPill.js +6 -6
- package/dist/esm/components/types/InputPill.js.map +2 -2
- package/dist/esm/components/types/LabelOnlyPill.js +4 -3
- package/dist/esm/components/types/LabelOnlyPill.js.map +2 -2
- package/dist/esm/components/types/LabelPill.js +7 -6
- package/dist/esm/components/types/LabelPill.js.map +2 -2
- package/dist/esm/components/types/MenuButtonPill.js +12 -10
- package/dist/esm/components/types/MenuButtonPill.js.map +2 -2
- package/dist/esm/components/types/ReadOnlyPill.js +8 -7
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/components/types/RemovablePill.js +33 -22
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +16 -8
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/constants/index.js +12 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/DSPillButton/DSPillButton.js +4 -4
- package/dist/esm/parts/DSPillButton/DSPillButton.js.map +2 -2
- package/dist/esm/parts/DSPillButton/react-desc-prop-types.js +2 -2
- package/dist/esm/parts/DSPillButton/react-desc-prop-types.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +3 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/components/TextComponent.d.ts +1 -0
- package/dist/types/components/styled.d.ts +11 -3
- package/dist/types/constants/index.d.ts +4 -0
- package/dist/types/parts/DSPillButton/react-desc-prop-types.d.ts +12 -3
- package/dist/types/react-desc-prop-types.d.ts +2 -34
- package/package.json +31 -33
|
@@ -35,10 +35,6 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label });
|
|
41
|
-
}
|
|
42
|
-
return label;
|
|
43
|
-
});
|
|
38
|
+
var import_styled = require("./styled.js");
|
|
39
|
+
const TextComponent = import_react.default.memo(({ labelTruncated, label, pillSize }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTextWrapper, { pillSize, children: labelTruncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { containerProps: { style: { display: "block" } }, value: label }) : label }));
|
|
44
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": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React from 'react';\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}>(({ labelTruncated, label, pillSize }) => (\n <StyledTextWrapper pillSize={pillSize}>\n {labelTruncated ? (\n <SimpleTruncatedTooltipText containerProps={{ style: { display: 'block' } }} value={label} />\n ) : (\n label\n )}\n </StyledTextWrapper>\n));\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYjB;AAZN,uCAA2C;AAC3C,mBAAkB;AAElB,oBAAkC;AAE3B,MAAM,gBAAgB,aAAAA,QAAM,KAIhC,CAAC,EAAE,gBAAgB,OAAO,SAAS,MACpC,4CAAC,mCAAkB,UAChB,2BACC,4CAAC,+DAA2B,gBAAgB,EAAE,OAAO,EAAE,SAAS,QAAQ,EAAE,GAAG,OAAO,OAAO,IAE3F,OAEJ,CACD;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var styled_exports = {};
|
|
30
30
|
__export(styled_exports, {
|
|
31
|
+
StyledAgnosticPillRegion: () => StyledAgnosticPillRegion,
|
|
31
32
|
StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
|
|
32
33
|
StyledInputPillWrapper: () => StyledInputPillWrapper,
|
|
33
34
|
StyledLabelOnlyPillWrapper: () => StyledLabelOnlyPillWrapper,
|
|
@@ -38,6 +39,7 @@ __export(styled_exports, {
|
|
|
38
39
|
StyledReadonlyPillWrapper: () => StyledReadonlyPillWrapper,
|
|
39
40
|
StyledRemovablePillWrapper: () => StyledRemovablePillWrapper,
|
|
40
41
|
StyledSpanWithTooltip: () => StyledSpanWithTooltip,
|
|
42
|
+
StyledTextWrapper: () => StyledTextWrapper,
|
|
41
43
|
StyledValuePillWrapper: () => StyledValuePillWrapper,
|
|
42
44
|
borderOutside: () => borderOutside
|
|
43
45
|
});
|
|
@@ -59,12 +61,11 @@ const borderOutside = ({
|
|
|
59
61
|
:after {
|
|
60
62
|
content: ' ';
|
|
61
63
|
position: absolute;
|
|
62
|
-
top:
|
|
63
|
-
left:
|
|
64
|
-
right:
|
|
65
|
-
bottom:
|
|
66
|
-
border: ${size}px solid
|
|
67
|
-
${({ disabled, applyAriaDisabled, readOnly, theme }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : color};
|
|
64
|
+
top: -${size}px;
|
|
65
|
+
left: -${size}px;
|
|
66
|
+
right: -${size}px;
|
|
67
|
+
bottom: -${size}px;
|
|
68
|
+
border: ${size}px solid ${color};
|
|
68
69
|
border-top-left-radius: ${borderRadius};
|
|
69
70
|
border-top-right-radius: ${borderRadius};
|
|
70
71
|
border-bottom-left-radius: ${borderRadius};
|
|
@@ -73,45 +74,54 @@ const borderOutside = ({
|
|
|
73
74
|
z-index: ${zIndex || ""};
|
|
74
75
|
}
|
|
75
76
|
`;
|
|
77
|
+
const fontSize13Base16 = 13 / 16;
|
|
78
|
+
const lineHeight17Base13 = 17 / 13;
|
|
79
|
+
const lineHeight17Base16 = 17 / 16;
|
|
76
80
|
const commonPillWrapperCss = import_ds_system.css`
|
|
77
|
-
height: ${(props) => props?.pillSize === "m" ? "1.846rem" : "1.3846rem"};
|
|
78
|
-
@media (max-width: ${(props) => props.theme.breakpoints?.small}) {
|
|
79
|
-
height: ${(props) => props?.pillSize === "m" ? "1.5rem" : "1.125rem"};
|
|
80
|
-
}
|
|
81
81
|
position: relative;
|
|
82
82
|
|
|
83
83
|
width: fit-content;
|
|
84
84
|
|
|
85
|
-
background-color: ${({ theme
|
|
86
|
-
if (disabled) return theme.colors.neutral["080"];
|
|
87
|
-
if (applyAriaDisabled || readOnly) return theme.colors.neutral["050"];
|
|
88
|
-
return theme.colors.brand[250];
|
|
89
|
-
}};
|
|
85
|
+
background-color: ${({ theme }) => theme.colors.brand[250]};
|
|
90
86
|
|
|
91
87
|
outline: none;
|
|
92
88
|
|
|
93
|
-
white-space: nowrap;
|
|
94
|
-
|
|
95
89
|
padding: 0px 12px 0 12px;
|
|
90
|
+
|
|
96
91
|
border-radius: 12px;
|
|
97
92
|
|
|
93
|
+
height: fit-content;
|
|
94
|
+
place-items: start normal;
|
|
95
|
+
|
|
98
96
|
font-size: 1rem;
|
|
99
|
-
|
|
97
|
+
font-size: ${fontSize13Base16}rem;
|
|
98
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
99
|
+
font-size: 1rem;
|
|
100
|
+
}
|
|
101
|
+
line-height: ${lineHeight17Base16}rem;
|
|
102
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
103
|
+
line-height: ${lineHeight17Base13}rem;
|
|
104
|
+
}
|
|
100
105
|
user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : "auto"};
|
|
101
|
-
|
|
102
|
-
|
|
106
|
+
color: ${({ theme }) => theme.colors.brand["800"]};
|
|
107
|
+
word-break: break-word;
|
|
108
|
+
`;
|
|
109
|
+
const commonSpanStyles = import_ds_system.css`
|
|
110
|
+
display: grid;
|
|
111
|
+
padding: ${(props) => props?.pillSize === "m" ? "4px 0" : "1px 0"};
|
|
112
|
+
align-self: center;
|
|
103
113
|
`;
|
|
104
114
|
const StyledLabelPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
|
|
105
115
|
${commonPillWrapperCss}
|
|
106
116
|
|
|
107
117
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
108
|
-
padding-left: ${(props) => props.hasIcon
|
|
118
|
+
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
109
119
|
`;
|
|
110
120
|
const StyledLabelOnlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
|
|
111
121
|
${commonPillWrapperCss}
|
|
112
122
|
|
|
113
123
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
114
|
-
padding-left: ${(props) => props.hasIcon
|
|
124
|
+
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
115
125
|
`;
|
|
116
126
|
const StyledValuePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
117
127
|
name: import_constants.DSPillV2Name,
|
|
@@ -120,7 +130,8 @@ const StyledValuePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
|
|
|
120
130
|
${commonPillWrapperCss}
|
|
121
131
|
|
|
122
132
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
123
|
-
padding-left: ${(props) => props.hasIcon
|
|
133
|
+
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
134
|
+
padding-right: ${(props) => props.hasIconRight ? "0px !important" : "12px"};
|
|
124
135
|
`;
|
|
125
136
|
const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
126
137
|
name: import_constants.DSPillV2Name,
|
|
@@ -181,15 +192,14 @@ const StyledRemovablePillWrapper = (0, import_ds_system.styled)(import_ds_grid.G
|
|
|
181
192
|
})`
|
|
182
193
|
${commonPillWrapperCss}
|
|
183
194
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
184
|
-
padding:
|
|
185
|
-
padding:
|
|
186
|
-
line-height: 1.2307rem;
|
|
187
|
-
@media (max-width: ${(props) => props.theme.breakpoints?.small}) {
|
|
188
|
-
line-height: 1rem;
|
|
189
|
-
}
|
|
195
|
+
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
196
|
+
padding-right: 0px;
|
|
190
197
|
`;
|
|
191
198
|
const StyledPillGroup = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants3.PILL_GROUP_SLOTS.PILL_GROUP })`
|
|
192
199
|
width: ${({ width }) => width};
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-wrap: wrap;
|
|
202
|
+
row-gap: 8px;
|
|
193
203
|
|
|
194
204
|
// Pill edges
|
|
195
205
|
& .ds-pill-wrapper {
|
|
@@ -255,12 +265,13 @@ const StyledPillGroup = (0, import_ds_system.styled)(import_ds_grid.Grid, { name
|
|
|
255
265
|
}
|
|
256
266
|
`;
|
|
257
267
|
const StyledSpanWithTooltip = import_ds_system.styled.span`
|
|
268
|
+
${commonSpanStyles}
|
|
258
269
|
outline: none;
|
|
259
270
|
:focus {
|
|
260
271
|
${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}
|
|
261
272
|
}
|
|
262
273
|
`;
|
|
263
|
-
const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.
|
|
274
|
+
const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
|
|
264
275
|
name: import_constants.DSPillV2Name,
|
|
265
276
|
slot: import_constants2.PILL_BUTTON_SLOTS.PILL_BUTTON,
|
|
266
277
|
preserveLegacyDataTestId: true
|
|
@@ -275,7 +286,7 @@ const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButt
|
|
|
275
286
|
if (String(width).includes("px") && String(height).includes("px"))
|
|
276
287
|
return `
|
|
277
288
|
width: ${parseInt(width, 10) / 13}rem;
|
|
278
|
-
|
|
289
|
+
height: ${parseInt(height, 10) / 13}rem;
|
|
279
290
|
|
|
280
291
|
@media (max-width: ${theme.breakpoints?.small}) {
|
|
281
292
|
width: ${parseInt(width, 10) / 16}rem;
|
|
@@ -293,7 +304,19 @@ const StyledPillButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButt
|
|
|
293
304
|
${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: "inherit" })}
|
|
294
305
|
}
|
|
295
306
|
|
|
296
|
-
cursor:
|
|
307
|
+
cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "default"};
|
|
308
|
+
|
|
309
|
+
:hover {
|
|
310
|
+
background-color: ${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? "transparent" : theme.colors.brand[200]};
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
& svg {
|
|
314
|
+
fill: ${({ disabled, applyAriaDisabled, theme }) => {
|
|
315
|
+
if (disabled) return "#5C6574";
|
|
316
|
+
if (applyAriaDisabled) return theme.colors.neutral[500];
|
|
317
|
+
return theme.colors.brand[700];
|
|
318
|
+
}};
|
|
319
|
+
}
|
|
297
320
|
`;
|
|
298
321
|
const StyledPillMenuButton = (0, import_ds_system.styled)(import_ds_menu_button.DSMenuButton, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.PILL_MENU_BUTTON })`
|
|
299
322
|
display: grid;
|
|
@@ -326,4 +349,11 @@ const StyledPillMenuButton = (0, import_ds_system.styled)(import_ds_menu_button.
|
|
|
326
349
|
|
|
327
350
|
cursor: pointer;
|
|
328
351
|
`;
|
|
352
|
+
const StyledAgnosticPillRegion = import_ds_system.styled.div`
|
|
353
|
+
display: flex;
|
|
354
|
+
padding: 2px;
|
|
355
|
+
`;
|
|
356
|
+
const StyledTextWrapper = import_ds_system.styled.span`
|
|
357
|
+
${commonSpanStyles}
|
|
358
|
+
`;
|
|
329
359
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n color,\n size = 1,\n zIndex = 0,\n borderRadius = '12px',\n}: {\n color: string;\n size?: number;\n zIndex?: number;\n borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid\n ${({ disabled, applyAriaDisabled, readOnly, theme }) =>\n disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : color};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex || ''};\n }\n`;\n\nconst commonPillWrapperCss = css<{\n pillSize: 'm' | 's';\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: boolean;\n}>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n if (disabled) return theme.colors.neutral['080'];\n if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n return theme.colors.brand[250];\n }};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 1rem;\n line-height: 1;\n user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n pillSize: 'm' | 's';\n disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: boolean;\n}>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon || props.applyAriaDisabled || props.readOnly ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled?: boolean;\n}>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon || props.applyAriaDisabled ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon || props.disabled ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n return borderOutside({ color: theme.colors.brand[500] });\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n}>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIconRight: boolean;\n hasIconLeft: boolean;\n disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n pillSize: 'm' | 's';\n disabled: boolean;\n applyAriaDisabled: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n padding: ${({ disabled, applyAriaDisabled, readOnly }) =>\n disabled || applyAriaDisabled || readOnly ? '0 12px 0 12px' : '0 0 0 12px'};\n line-height: 1.2307rem;\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n line-height: 1rem;\n }\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2, {\n name: DSPillV2Name,\n slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n preserveLegacyDataTestId: true,\n})<{\n width: string | number;\n height: string | number;\n}>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width as string, 10) / 13}rem;\n height: ${parseInt(height as string, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width as string, 10) / 16}rem;\n height: ${parseInt(height as string, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: pointer;\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n width: string;\n height: string;\n}>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width, 10) / 13}rem;\n height: ${parseInt(height, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width, 10) / 16}rem;\n height: ${parseInt(height, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,4BAA6B;AAC7B,uBAA4B;AAC5B,uBAA4C;AAC5C,IAAAA,oBAAkC;AAClC,IAAAA,oBAAiC;AAM1B,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,MAKM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n color,\n size = 1,\n zIndex = 0,\n borderRadius = '12px',\n}: {\n color: string;\n size?: number;\n zIndex?: number;\n borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n :after {\n content: ' ';\n position: absolute;\n top: -${size}px;\n left: -${size}px;\n right: -${size}px;\n bottom: -${size}px;\n border: ${size}px solid ${color};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex || ''};\n }\n`;\n\nconst fontSize13Base16 = 13 / 16;\nconst lineHeight17Base13 = 17 / 13;\nconst lineHeight17Base16 = 17 / 16;\nconst commonPillWrapperCss = css<{\n pillSize: 'm' | 's';\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: boolean;\n}>`\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme }) => theme.colors.brand[250]};\n\n outline: none;\n\n padding: 0px 12px 0 12px;\n\n border-radius: 12px;\n\n height: fit-content;\n place-items: start normal;\n\n font-size: 1rem;\n font-size: ${fontSize13Base16}rem;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1rem;\n }\n line-height: ${lineHeight17Base16}rem;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n line-height: ${lineHeight17Base13}rem;\n }\n user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n color: ${({ theme }) => theme.colors.brand['800']};\n word-break: break-word;\n`;\n\nconst commonSpanStyles = css<{ pillSize: 'm' | 's' }>`\n display: grid;\n padding: ${(props) => (props?.pillSize === 'm' ? '4px 0' : '1px 0')};\n align-self: center;\n`;\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n pillSize: 'm' | 's';\n disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: boolean;\n}>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled?: boolean;\n}>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIcon: boolean;\n hasIconRight: boolean;\n applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n padding-right: ${(props) => (props.hasIconRight ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n return borderOutside({ color: theme.colors.brand[500] });\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n}>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIconRight: boolean;\n hasIconLeft: boolean;\n disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n pillSize: 'm' | 's';\n disabled: boolean;\n applyAriaDisabled: boolean;\n hasIcon: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n padding-right: 0px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n width: ${({ width }) => width};\n display: flex;\n flex-wrap: wrap;\n row-gap: 8px;\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span<{ pillSize: 'm' | 's' }>`\n ${commonSpanStyles}\n outline: none;\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV3, {\n name: DSPillV2Name,\n slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n preserveLegacyDataTestId: true,\n})<{\n width: string | number;\n height: string | number;\n}>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width as string, 10) / 13}rem;\n height: ${parseInt(height as string, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width as string, 10) / 16}rem;\n height: ${parseInt(height as string, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n\n :hover {\n background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? 'transparent' : theme.colors.brand[200]};\n }\n\n & svg {\n fill: ${({ disabled, applyAriaDisabled, theme }) => {\n if (disabled) return '#5C6574';\n if (applyAriaDisabled) return theme.colors.neutral[500];\n return theme.colors.brand[700];\n }};\n }\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n width: string;\n height: string;\n}>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width, 10) / 13}rem;\n height: ${parseInt(height, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width, 10) / 16}rem;\n height: ${parseInt(height, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: pointer;\n`;\n\nexport const StyledAgnosticPillRegion = styled.div`\n display: flex;\n padding: 2px;\n`;\n\nexport const StyledTextWrapper = styled.span<{ pillSize: 'm' | 's' }>`\n ${commonSpanStyles}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -41,6 +41,7 @@ var import_uid = require("uid");
|
|
|
41
41
|
var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
|
|
42
42
|
var import_TextComponent = require("../TextComponent.js");
|
|
43
43
|
var import_styled = require("../styled.js");
|
|
44
|
+
var import_constants = require("../../constants/index.js");
|
|
44
45
|
const DropdownPill = import_react.default.memo(
|
|
45
46
|
({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
|
|
46
47
|
const chevronRef = (0, import_react.useRef)(null);
|
|
@@ -51,13 +52,12 @@ const DropdownPill = import_react.default.memo(
|
|
|
51
52
|
pillSize: size,
|
|
52
53
|
id: pillUid,
|
|
53
54
|
className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
|
|
54
|
-
"data-testid": "ds-pill-wrapper",
|
|
55
55
|
cols: ["auto", "minmax(24px, auto)"],
|
|
56
56
|
gutter: "2px",
|
|
57
57
|
alignItems: "center",
|
|
58
58
|
justifyItems: "center",
|
|
59
59
|
children: [
|
|
60
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }),
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label }),
|
|
61
61
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
62
|
import_ds_dropdownmenu_v2.DSDropdownMenuV2,
|
|
63
63
|
{
|
|
@@ -76,18 +76,18 @@ const DropdownPill = import_react.default.memo(
|
|
|
76
76
|
if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
|
|
77
77
|
},
|
|
78
78
|
wrapperStyles: { w: "100%", h: "100%" },
|
|
79
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
80
80
|
import_DSPillButton.DSPillButton,
|
|
81
81
|
{
|
|
82
82
|
className: "ds-pill-focus-point",
|
|
83
|
-
"data-testid":
|
|
83
|
+
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON,
|
|
84
84
|
innerRef: (0, import_ds_system.mergeRefs)(chevronRef, innerRef),
|
|
85
85
|
"aria-label": ariaLabel || label,
|
|
86
86
|
type: "right",
|
|
87
87
|
onClick: onDropdownClick,
|
|
88
88
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "800"], width: 20, height: 20 })
|
|
89
89
|
}
|
|
90
|
-
)
|
|
90
|
+
) })
|
|
91
91
|
}
|
|
92
92
|
)
|
|
93
93
|
]
|
|
@@ -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 { 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 { StyledDropdownPillWrapper } from '../styled.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\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
|
|
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 { 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>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\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 pillSize={size} labelTruncated={labelTruncated} label={label} />\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\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);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBjB;AAnBN,gCAAiC;AACjC,sBAAiC;AACjC,uBAA0B;AAE1B,mBAAuC;AACvC,iBAAoB;AAEpB,0BAA6B;AAC7B,2BAA8B;AAC9B,oBAAoE;AACpE,uBAAoC;AAE7B,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,UAC7E;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,oBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC,sDAAC,0CACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAa,qCAAoB;AAAA,kBACjC,cAAU,4BAAU,YAAY,QAAwD;AAAA,kBACxF,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E,GACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -38,6 +38,7 @@ var import_uid = require("uid");
|
|
|
38
38
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
39
|
var import_styled = require("../styled.js");
|
|
40
40
|
var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
|
|
41
|
+
var import_constants = require("../../constants/index.js");
|
|
41
42
|
const InputPill = import_react.default.memo(
|
|
42
43
|
({
|
|
43
44
|
label,
|
|
@@ -70,7 +71,6 @@ const InputPill = import_react.default.memo(
|
|
|
70
71
|
{
|
|
71
72
|
pillSize: size,
|
|
72
73
|
className: "ds-pill-wrapper",
|
|
73
|
-
"data-testid": "ds-pill-wrapper",
|
|
74
74
|
cols: label === "" ? ["auto"] : ["auto", "24px"],
|
|
75
75
|
inputWidth,
|
|
76
76
|
value: label ?? "",
|
|
@@ -82,7 +82,7 @@ const InputPill = import_react.default.memo(
|
|
|
82
82
|
{
|
|
83
83
|
id: pillUid,
|
|
84
84
|
className: "ds-pill-focus-point",
|
|
85
|
-
"data-testid":
|
|
85
|
+
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
|
|
86
86
|
innerRef: (_ref) => {
|
|
87
87
|
ref.current = _ref;
|
|
88
88
|
},
|
|
@@ -94,18 +94,18 @@ const InputPill = import_react.default.memo(
|
|
|
94
94
|
disableTooltip: false
|
|
95
95
|
}
|
|
96
96
|
),
|
|
97
|
-
label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
97
|
+
label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
98
|
import_DSPillButton.DSPillButton,
|
|
99
99
|
{
|
|
100
100
|
id: pillUid,
|
|
101
|
-
"data-testid":
|
|
101
|
+
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_CLEAR_ICON,
|
|
102
102
|
innerRef,
|
|
103
103
|
onClick: onCloseIconClick,
|
|
104
104
|
"aria-label": "Clear input",
|
|
105
105
|
type: "right",
|
|
106
106
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { size: "s", color: ["brand-primary", "700"] })
|
|
107
107
|
}
|
|
108
|
-
)
|
|
108
|
+
) })
|
|
109
109
|
]
|
|
110
110
|
}
|
|
111
111
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label ?? ''}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <StyledAgnosticPillRegion>\n <DSPillButton\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA1CN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAiE;AACjE,0BAA6B;AAE7B,uBAAoC;AAE7B,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAa,qCAAoB;AAAA,cACjC,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT,4CAAC,0CACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,qCAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -40,13 +40,13 @@ var import_styled = require("../styled.js");
|
|
|
40
40
|
const LabelOnlyPill = import_react.default.memo((props) => {
|
|
41
41
|
const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } = props;
|
|
42
42
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
43
|
+
const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
43
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
44
45
|
import_styled.StyledLabelOnlyPillWrapper,
|
|
45
46
|
{
|
|
46
47
|
pillSize: size,
|
|
47
48
|
alignItems: "center",
|
|
48
49
|
className: "ds-pill-wrapper ds-pill-wrapper-label",
|
|
49
|
-
"data-testid": "ds-pill-wrapper",
|
|
50
50
|
"data-label": ariaLabel || label,
|
|
51
51
|
cols: [(iconLeft || IconLeft) && "min-content", "auto"].filter((notFalse) => notFalse),
|
|
52
52
|
gutter: "xxxs",
|
|
@@ -55,10 +55,11 @@ const LabelOnlyPill = import_react.default.memo((props) => {
|
|
|
55
55
|
"aria-label": label,
|
|
56
56
|
applyAriaDisabled,
|
|
57
57
|
readOnly,
|
|
58
|
+
...globalAttributes,
|
|
58
59
|
...ownerProps,
|
|
59
60
|
children: [
|
|
60
61
|
IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
|
|
61
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
|
|
62
63
|
]
|
|
63
64
|
}
|
|
64
65
|
);
|
|
@@ -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 { 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 { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma } =\n props;\n const ownerProps = useOwnerProps(props);\n return (\n <StyledLabelOnlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n data-
|
|
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 { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, 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 pillSize={size} labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n </StyledLabelOnlyPillWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAZJ,8BAAsD;AACtD,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACxE,QAAM,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,IAC7G;AACF,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,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/G;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -40,23 +40,24 @@ var import_styled = require("../styled.js");
|
|
|
40
40
|
const LabelPill = import_react.default.memo((props) => {
|
|
41
41
|
const { label, size, labelTruncated, iconLeft, IconLeft, ariaLabel } = props;
|
|
42
42
|
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
43
|
+
const { wrap, tabIndex, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
43
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
44
45
|
import_styled.StyledLabelPillWrapper,
|
|
45
46
|
{
|
|
46
47
|
pillSize: size,
|
|
47
48
|
alignItems: "center",
|
|
48
49
|
className: "ds-pill-wrapper ds-pill-wrapper-label",
|
|
49
|
-
"data-testid": "ds-pill-wrapper",
|
|
50
50
|
"data-label": ariaLabel || label,
|
|
51
51
|
cols: [(iconLeft || IconLeft) && "min-content", "auto"].filter((notFalse) => notFalse),
|
|
52
|
-
gutter:
|
|
52
|
+
gutter: 0,
|
|
53
53
|
hasIcon: (iconLeft || IconLeft) !== null,
|
|
54
54
|
role: "group",
|
|
55
55
|
"aria-label": label,
|
|
56
|
+
...globalAttributes,
|
|
56
57
|
...ownerProps,
|
|
57
58
|
children: [
|
|
58
|
-
IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label })
|
|
59
|
+
(iconLeft || IconLeft) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft }),
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { pillSize: size, labelTruncated, label })
|
|
60
61
|
]
|
|
61
62
|
}
|
|
62
63
|
);
|
|
@@ -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 { 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 { 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 return (\n <StyledLabelPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n data-
|
|
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 { 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 pillSize={size} labelTruncated={labelTruncated} label={label} />\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;AACvE,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,4CAAC,sCAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAC/E;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|