@elliemae/ds-pills-v2 3.51.0-next.1 → 3.51.0-next.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSPillDefinitions.js +2 -2
- package/dist/cjs/DSPillDefinitions.js.map +1 -1
- package/dist/cjs/components/Pill.js +1 -0
- package/dist/cjs/components/Pill.js.map +2 -2
- package/dist/cjs/components/styled.js +18 -7
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/components/types/LabelOnlyPill.js +62 -0
- package/dist/cjs/components/types/LabelOnlyPill.js.map +7 -0
- package/dist/cjs/components/types/MenuButtonPill.js +2 -2
- package/dist/cjs/components/types/MenuButtonPill.js.map +1 -1
- package/dist/cjs/components/types/ReadOnlyPill.js +8 -6
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/ValuePill.js +5 -2
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/components/types/index.js +2 -0
- package/dist/cjs/components/types/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +21 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +12 -1
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/esm/DSPillDefinitions.js +2 -2
- package/dist/esm/DSPillDefinitions.js.map +1 -1
- package/dist/esm/components/Pill.js +2 -0
- package/dist/esm/components/Pill.js.map +2 -2
- package/dist/esm/components/styled.js +18 -7
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/components/types/LabelOnlyPill.js +32 -0
- package/dist/esm/components/types/LabelOnlyPill.js.map +7 -0
- package/dist/esm/components/types/MenuButtonPill.js +2 -2
- package/dist/esm/components/types/MenuButtonPill.js.map +1 -1
- package/dist/esm/components/types/ReadOnlyPill.js +8 -6
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +5 -2
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/components/types/index.js +2 -0
- package/dist/esm/components/types/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +21 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +12 -1
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/types/DSPillDefinitions.d.ts +2 -2
- package/dist/types/components/styled.d.ts +8 -0
- package/dist/types/components/types/LabelOnlyPill.d.ts +3 -0
- package/dist/types/components/types/index.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +6 -1
- package/package.json +16 -68
|
@@ -35,6 +35,6 @@ __export(DSPillDefinitions_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(DSPillDefinitions_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
const DSPillName = "DSPill";
|
|
38
|
-
const DSPillButtonName = "
|
|
39
|
-
const DSPillGroupName = "
|
|
38
|
+
const DSPillButtonName = "DSPillbutton";
|
|
39
|
+
const DSPillGroupName = "DSPillgroup";
|
|
40
40
|
//# sourceMappingURL=DSPillDefinitions.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSPillDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = '
|
|
4
|
+
"sourcesContent": ["export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = 'DSPillbutton';\n\nexport const DSPillGroupName = 'DSPillgroup';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,6 +43,7 @@ const pillComponentGetter = {
|
|
|
43
43
|
menubutton: import_types.MenuButtonPill,
|
|
44
44
|
input: import_types.InputPill,
|
|
45
45
|
label: import_types.LabelPill,
|
|
46
|
+
labelOnly: import_types.LabelOnlyPill,
|
|
46
47
|
readonly: import_types.ReadOnlyPill,
|
|
47
48
|
removable: import_types.RemovablePill,
|
|
48
49
|
value: import_types.ValuePill
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Pill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { DSPillName } from '../DSPillDefinitions.js';\nimport { DSPillV2DefaultProps, DSPillV2PropTypesSchema, type DSPillT } from '../react-desc-prop-types.js';\nimport {\n DropdownPill,\n InputPill,\n LabelPill,\n MenuButtonPill,\n ReadOnlyPill,\n RemovablePill,\n ValuePill,\n} from './types/index.js';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillT.InternalProps>> = {\n dropdown: DropdownPill,\n menubutton: MenuButtonPill,\n input: InputPill,\n label: LabelPill,\n readonly: ReadOnlyPill,\n removable: RemovablePill,\n value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalProps>(props, DSPillV2DefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypesSchema, DSPillName);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypesSchema;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { DSPillName } from '../DSPillDefinitions.js';\nimport { DSPillV2DefaultProps, DSPillV2PropTypesSchema, type DSPillT } from '../react-desc-prop-types.js';\nimport {\n DropdownPill,\n InputPill,\n LabelPill,\n LabelOnlyPill,\n MenuButtonPill,\n ReadOnlyPill,\n RemovablePill,\n ValuePill,\n} from './types/index.js';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillT.InternalProps>> = {\n dropdown: DropdownPill,\n menubutton: MenuButtonPill,\n input: InputPill,\n label: LabelPill,\n labelOnly: LabelOnlyPill,\n readonly: ReadOnlyPill,\n removable: RemovablePill,\n value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSPillT.InternalProps>(props, DSPillV2DefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypesSchema, DSPillName);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypesSchema;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCd;AAhCT,8BAAuF;AAEvF,+BAA2B;AAC3B,mCAA4E;AAC5E,mBASO;AAEP,MAAM,sBAAkF;AAAA,EACtF,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA+C,CAAC,UAAU;AAC9D,QAAM,wBAAoB,sDAAoD,OAAO,iDAAoB;AACzG,8DAA+B,mBAAmB,sDAAyB,mCAAU;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,4CAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,6 +30,7 @@ var styled_exports = {};
|
|
|
30
30
|
__export(styled_exports, {
|
|
31
31
|
StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
|
|
32
32
|
StyledInputPillWrapper: () => StyledInputPillWrapper,
|
|
33
|
+
StyledLabelOnlyPillWrapper: () => StyledLabelOnlyPillWrapper,
|
|
33
34
|
StyledLabelPillWrapper: () => StyledLabelPillWrapper,
|
|
34
35
|
StyledPillButton: () => StyledPillButton,
|
|
35
36
|
StyledPillGroup: () => StyledPillGroup,
|
|
@@ -60,7 +61,7 @@ const borderOutside = ({
|
|
|
60
61
|
right: 0px;
|
|
61
62
|
bottom: 0px;
|
|
62
63
|
border: ${size}px solid
|
|
63
|
-
${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral[400] : color};
|
|
64
|
+
${({ disabled, applyAriaDisabled, readOnly, theme }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : color};
|
|
64
65
|
border-top-left-radius: ${borderRadius};
|
|
65
66
|
border-top-right-radius: ${borderRadius};
|
|
66
67
|
border-bottom-left-radius: ${borderRadius};
|
|
@@ -78,7 +79,11 @@ const commonPillWrapperCss = import_ds_system.css`
|
|
|
78
79
|
|
|
79
80
|
width: fit-content;
|
|
80
81
|
|
|
81
|
-
background-color: ${({ theme, disabled, applyAriaDisabled }) =>
|
|
82
|
+
background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
|
|
83
|
+
if (disabled) return theme.colors.neutral["080"];
|
|
84
|
+
if (applyAriaDisabled || readOnly) return theme.colors.neutral["050"];
|
|
85
|
+
return theme.colors.brand[200];
|
|
86
|
+
}};
|
|
82
87
|
|
|
83
88
|
outline: none;
|
|
84
89
|
|
|
@@ -91,20 +96,26 @@ const commonPillWrapperCss = import_ds_system.css`
|
|
|
91
96
|
line-height: 1;
|
|
92
97
|
user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : "auto"};
|
|
93
98
|
cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "default"};
|
|
94
|
-
color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#616b7f" : theme.colors.brand["800"]};
|
|
95
|
-
${(
|
|
99
|
+
color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
|
|
100
|
+
${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? borderOutside({ color: theme.colors.brand[300] }) : ""};
|
|
96
101
|
`;
|
|
97
102
|
const StyledLabelPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
98
103
|
${commonPillWrapperCss}
|
|
99
104
|
|
|
100
105
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
101
|
-
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
106
|
+
padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled || props.readOnly ? "0px !important" : "12px"};
|
|
107
|
+
`;
|
|
108
|
+
const StyledLabelOnlyPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
109
|
+
${commonPillWrapperCss}
|
|
110
|
+
|
|
111
|
+
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
112
|
+
padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled ? "0px !important" : "12px"};
|
|
102
113
|
`;
|
|
103
114
|
const StyledValuePillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
104
115
|
${commonPillWrapperCss}
|
|
105
116
|
|
|
106
117
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
107
|
-
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
118
|
+
padding-left: ${(props) => props.hasIcon || props.disabled ? "0px !important" : "12px"};
|
|
108
119
|
`;
|
|
109
120
|
const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
110
121
|
${commonPillWrapperCss}
|
|
@@ -157,7 +168,7 @@ const StyledRemovablePillWrapper = (0, import_ds_system.styled)(import_ds_grid.G
|
|
|
157
168
|
${commonPillWrapperCss}
|
|
158
169
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
159
170
|
padding: 0 0 0 12px;
|
|
160
|
-
padding: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "0 12px 0 12px" : "0 0 0 12px"};
|
|
171
|
+
padding: ${({ disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "0 12px 0 12px" : "0 0 0 12px"};
|
|
161
172
|
line-height: 1.2307rem;
|
|
162
173
|
@media (max-width: ${(props) => props.theme.breakpoints?.small}) {
|
|
163
174
|
line-height: 1rem;
|
|
@@ -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';\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 }>`\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, theme }) => (disabled || applyAriaDisabled ? 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<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\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 }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral['080'] : theme.colors.brand[200]};\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 }) =>\n disabled || applyAriaDisabled ? '#616b7f' : theme.colors.brand['800']};\n ${(props) => borderOutside({ color: props.theme.colors.brand[300] })};\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)<{ pillSize: 'm' | 's'; hasIcon: boolean }>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\ntype StyledValuePillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled: boolean;\n};\nexport const StyledValuePillWrapper = styled(Grid)<StyledValuePillWrapperPropsT>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<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)<{ pillSize: 'm' | 's' }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\ntype StyledMenuButtonPillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIconRight: boolean;\n hasIconLeft: boolean;\n disabled?: boolean;\n};\nexport const StyledReadonlyPillWrapper = styled(Grid)<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`;\ntype StyledRemovablePillWrapperPropsT = {\n pillSize: 'm' | 's';\n disabled: boolean;\n applyAriaDisabled: boolean;\n};\nexport const StyledRemovablePillWrapper = styled(Grid)<StyledRemovablePillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n padding: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? '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)`\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)<{ width: string | number; height: string | number }>`\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`;\nexport const StyledPillMenuButton = styled(DSMenuButton)<{ width: string; height: string }>`\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;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,4BAA6B;AAC7B,uBAA4B;AAKrB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,MAKM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQQ,IAAI;AAAA,QACV,CAAC,EAAE,UAAU,mBAAmB,MAAM,
|
|
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';\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[200];\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 ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n !disabled && !applyAriaDisabled && !readOnly ? borderOutside({ color: theme.colors.brand[300] }) : ''};\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)<{\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)<{\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)<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)<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)<{ pillSize: 'm' | 's' }>`\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)<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)<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)`\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)<{ width: string | number; height: string | number }>`\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)<{ width: string; height: string }>`\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var LabelOnlyPill_exports = {};
|
|
30
|
+
__export(LabelOnlyPill_exports, {
|
|
31
|
+
LabelOnlyPill: () => LabelOnlyPill
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(LabelOnlyPill_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_TextComponent = require("../TextComponent.js");
|
|
38
|
+
var import_styled = require("../styled.js");
|
|
39
|
+
const LabelOnlyPill = import_react.default.memo(
|
|
40
|
+
({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
41
|
+
import_styled.StyledLabelOnlyPillWrapper,
|
|
42
|
+
{
|
|
43
|
+
pillSize: size,
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
className: "ds-pill-wrapper ds-pill-wrapper-label",
|
|
46
|
+
"data-testid": "ds-pill-wrapper",
|
|
47
|
+
"data-label": ariaLabel || label,
|
|
48
|
+
cols: [(iconLeft || IconLeft) && "min-content", "auto"].filter((notFalse) => notFalse),
|
|
49
|
+
gutter: "xxxs",
|
|
50
|
+
hasIcon: (iconLeft || IconLeft) !== null,
|
|
51
|
+
role: "group",
|
|
52
|
+
"aria-label": label,
|
|
53
|
+
applyAriaDisabled,
|
|
54
|
+
readOnly,
|
|
55
|
+
children: [
|
|
56
|
+
IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
|
|
57
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
//# sourceMappingURL=LabelOnlyPill.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/types/LabelOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\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>(\n ({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => (\n <StyledLabelOnlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n data-testid=\"ds-pill-wrapper\"\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 >\n {IconLeft ? <IconLeft label={label} /> : iconLeft}\n <TextComponent 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;ADQnB;AAPJ,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA2C;AAEpC,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,mBAAmB,UAAU,cAAc,MACxG;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,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,MAEC;AAAA,mBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,QACzC,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -55,7 +55,7 @@ const MenuButtonPill = import_react.default.memo(
|
|
|
55
55
|
const { width = import_react_desc_prop_types.DSPillButtonDefaultProps.width, height = import_react_desc_prop_types.DSPillButtonDefaultProps.height } = menuButtonProps;
|
|
56
56
|
const memoizedRows = (0, import_react.useMemo)(() => rowsForDsButtonV3(size), [size]);
|
|
57
57
|
const memoizedCols = (0, import_react.useMemo)(() => colsForDsButtonV3(size), [size]);
|
|
58
|
-
const
|
|
58
|
+
const dsMenubuttonRootProps = (0, import_react.useMemo)(
|
|
59
59
|
() => ({
|
|
60
60
|
width: `${width}`,
|
|
61
61
|
height: `${height}`
|
|
@@ -82,7 +82,7 @@ const MenuButtonPill = import_react.default.memo(
|
|
|
82
82
|
{
|
|
83
83
|
innerRef,
|
|
84
84
|
"aria-label": finalAriaLabel,
|
|
85
|
-
|
|
85
|
+
dsMenubuttonRoot: dsMenubuttonRootProps,
|
|
86
86
|
...menuButtonProps,
|
|
87
87
|
"data-testid": "ds-pill-menu-button-chevron",
|
|
88
88
|
buttonType: "raw",
|
|
@@ -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 React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n* 1 - StyledPillButton is based on DSButtonV2\n* StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n* DSButtonV2 and DSButtonV3 have different stylings.\n* 2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\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 [...]\n`\n* The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n* the \"magic\" values are actually 24px RT for \"m\" and 18px 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 = (size: 'm' | 's') =>\n size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\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(size), [size]);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n* 1 - StyledPillButton is based on DSButtonV2\n* StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n* DSButtonV2 and DSButtonV3 have different stylings.\n* 2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\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 [...]\n`\n* The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n* the \"magic\" values are actually 24px RT for \"m\" and 18px 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 = (size: 'm' | 's') =>\n size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\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(size), [size]);\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 data-testid=\"ds-pill-wrapper\"\n cols={memoizedCols}\n rows={memoizedRows}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent labelTruncated={labelTruncated} label={label} />\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=\"ds-pill-menu-button-chevron\"\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 >\n <ChevronSmallDown color={['brand-primary', '800']} />\n </StyledPillMenuButton>\n </StyledDropdownPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AA/DN,sBAAiC;AAEjC,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyC;AACzC,2BAA8B;AAC9B,oBAAgE;AAqBhE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MAAM,EAAE,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC5G,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,sBAAsB,GAAG,QAAQ,CAAC,QAAQ,wBAAwB,EAAE,IACtF,EAAE,OAAO,CAAC,QAAQ,wBAAwB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAExF,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,MAAM;AACzE,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAI,CAAC,iBAAiB;AAEpB,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,kCAAkC;AAAA,IACpD;AACA,QAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,0BAA0B;AAAA,IAC5C;AACA,UAAM,EAAE,QAAQ,sDAAyB,OAAO,SAAS,sDAAyB,OAAO,IAAI;AAE7F,UAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,4BAAwB;AAAA,MAC5B,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,QACf,QAAQ,GAAG,MAAM;AAAA,MACnB;AAAA,MACA,CAAC,QAAQ,KAAK;AAAA,IAChB;AAEA,UAAM,iBAAiB,aAAa;AAEpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,sCAAc,gBAAgC,OAAc;AAAA,UAC7D;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAY;AAAA,cACZ,kBAAkB;AAAA,cACjB,GAAG;AAAA,cAGJ,eAAY;AAAA,cACZ,YAAW;AAAA,cACX,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cAGjB,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -37,9 +37,11 @@ var import_react = __toESM(require("react"));
|
|
|
37
37
|
var import_TextComponent = require("../TextComponent.js");
|
|
38
38
|
var import_styled = require("../styled.js");
|
|
39
39
|
const ReadOnlyPill = import_react.default.memo(
|
|
40
|
-
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
|
|
40
|
+
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {
|
|
41
41
|
const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
|
|
42
42
|
const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
|
|
43
|
+
const hasIconLeftNew = IconLeft !== null || IconRight !== null && label === "";
|
|
44
|
+
const hasIconRightNew = IconRight !== null || IconLeft !== null && label === "";
|
|
43
45
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
44
46
|
import_styled.StyledReadonlyPillWrapper,
|
|
45
47
|
{
|
|
@@ -48,16 +50,16 @@ const ReadOnlyPill = import_react.default.memo(
|
|
|
48
50
|
className: "ds-pill-wrapper ds-pill-wrapper-readonly",
|
|
49
51
|
"data-testid": "ds-pill-wrapper",
|
|
50
52
|
"data-label": ariaLabel || label,
|
|
51
|
-
cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter(
|
|
53
|
+
cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
|
|
52
54
|
(notFalse) => notFalse
|
|
53
55
|
),
|
|
54
56
|
gutter: "xxxs",
|
|
55
|
-
hasIconRight,
|
|
56
|
-
hasIconLeft,
|
|
57
|
+
hasIconRight: hasIconRight || hasIconRightNew,
|
|
58
|
+
hasIconLeft: hasIconLeft || hasIconLeftNew,
|
|
57
59
|
children: [
|
|
58
|
-
iconLeft,
|
|
60
|
+
IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
|
|
59
61
|
label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }) : null,
|
|
60
|
-
iconRight
|
|
62
|
+
IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight
|
|
61
63
|
]
|
|
62
64
|
}
|
|
63
65
|
);
|
|
@@ -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 React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n const hasIconRight = 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-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n cols={\n [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n gutter=\"xxxs\"\n hasIconRight={hasIconRight}\n hasIconLeft={hasIconLeft}\n >\n {iconLeft}\n {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n {iconRight}\n </StyledReadonlyPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {\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-testid=\"ds-pill-wrapper\"\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=\"xxxs\"\n hasIconRight={hasIconRight || hasIconRightNew}\n hasIconLeft={hasIconLeft || hasIconLeftNew}\n >\n {IconLeft ? <IconLeft label={label} /> : iconLeft}\n {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n {IconRight ? <IconRight label={label} /> : iconRight}\n </StyledReadonlyPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,MAAM;AACxF,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,UAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,UACpG,CAAC,aAAa;AAAA,QAChB;AAAA,QAEF,QAAO;AAAA,QACP,cAAc,gBAAgB;AAAA,QAC9B,aAAa,eAAe;AAAA,QAE3B;AAAA,qBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,UACxC,QAAQ,4CAAC,sCAAc,gBAAgC,OAAc,IAAK;AAAA,UAC1E,YAAY,4CAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -47,7 +47,9 @@ const ValuePill = import_react.default.memo(
|
|
|
47
47
|
iconLeft,
|
|
48
48
|
ariaLabel,
|
|
49
49
|
applyAriaDisabled,
|
|
50
|
-
|
|
50
|
+
readOnly,
|
|
51
|
+
applyTooltipOverflowWrap,
|
|
52
|
+
trailingComma
|
|
51
53
|
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
52
54
|
import_styled.StyledValuePillWrapper,
|
|
53
55
|
{
|
|
@@ -61,6 +63,7 @@ const ValuePill = import_react.default.memo(
|
|
|
61
63
|
hasIcon: iconLeft !== null,
|
|
62
64
|
"data-label": ariaLabel || label,
|
|
63
65
|
applyAriaDisabled,
|
|
66
|
+
readOnly,
|
|
64
67
|
children: [
|
|
65
68
|
iconLeft,
|
|
66
69
|
tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -71,7 +74,7 @@ const ValuePill = import_react.default.memo(
|
|
|
71
74
|
applyTooltipOverflowWrap,
|
|
72
75
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label })
|
|
73
76
|
}
|
|
74
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label })
|
|
77
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
|
|
75
78
|
]
|
|
76
79
|
}
|
|
77
80
|
)
|
|
@@ -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": ["import { 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 { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n labelTruncated,\n disabled,\n tooltipValue,\n iconLeft,\n ariaLabel,\n applyAriaDisabled,\n applyTooltipOverflowWrap,\n }) => (\n <StyledValuePillWrapper\n disabled={disabled}\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n data-testid=\"ds-pill-wrapper\"\n cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n gutter=\"xxxs\"\n hasIcon={iconLeft !== null}\n data-label={ariaLabel || label}\n applyAriaDisabled={applyAriaDisabled}\n >\n {iconLeft}\n {tooltipValue !== '' ? (\n <DSTooltipV3\n text={tooltipValue ?? ''}\n ariaLabel={tooltipValue ?? ''}\n applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n >\n <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n {label}\n </StyledSpanWithTooltip>\n </DSTooltipV3>\n ) : (\n <TextComponent labelTruncated={labelTruncated} label={label} />\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": ["import { 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 { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n labelTruncated,\n disabled,\n tooltipValue,\n iconLeft,\n ariaLabel,\n applyAriaDisabled,\n readOnly,\n applyTooltipOverflowWrap,\n trailingComma,\n }) => (\n <StyledValuePillWrapper\n disabled={disabled}\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n data-testid=\"ds-pill-wrapper\"\n cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n gutter=\"xxxs\"\n hasIcon={iconLeft !== null}\n data-label={ariaLabel || label}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n >\n {iconLeft}\n {tooltipValue !== '' ? (\n <DSTooltipV3\n text={tooltipValue ?? ''}\n ariaLabel={tooltipValue ?? ''}\n applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n >\n <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n {label}\n </StyledSpanWithTooltip>\n </DSTooltipV3>\n ) : (\n <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n )}\n </StyledValuePillWrapper>\n ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AApBJ,2BAA4B;AAC5B,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA8D;AAEvD,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,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,gBAAgB;AAAA,YACtB,WAAW,gBAAgB;AAAA,YAC3B;AAAA,YAEA,sDAAC,uCAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,QACF,IAEA,4CAAC,sCAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -30,6 +30,7 @@ var types_exports = {};
|
|
|
30
30
|
__export(types_exports, {
|
|
31
31
|
DropdownPill: () => import_DropdownPill.DropdownPill,
|
|
32
32
|
InputPill: () => import_InputPill.InputPill,
|
|
33
|
+
LabelOnlyPill: () => import_LabelOnlyPill.LabelOnlyPill,
|
|
33
34
|
LabelPill: () => import_LabelPill.LabelPill,
|
|
34
35
|
MenuButtonPill: () => import_MenuButtonPill.MenuButtonPill,
|
|
35
36
|
ReadOnlyPill: () => import_ReadOnlyPill.ReadOnlyPill,
|
|
@@ -41,6 +42,7 @@ var React = __toESM(require("react"));
|
|
|
41
42
|
var import_DropdownPill = require("./DropdownPill.js");
|
|
42
43
|
var import_InputPill = require("./InputPill.js");
|
|
43
44
|
var import_LabelPill = require("./LabelPill.js");
|
|
45
|
+
var import_LabelOnlyPill = require("./LabelOnlyPill.js");
|
|
44
46
|
var import_MenuButtonPill = require("./MenuButtonPill.js");
|
|
45
47
|
var import_ReadOnlyPill = require("./ReadOnlyPill.js");
|
|
46
48
|
var import_RemovablePill = require("./RemovablePill.js");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DropdownPill } from './DropdownPill.js';\nexport { InputPill } from './InputPill.js';\nexport { LabelPill } from './LabelPill.js';\nexport { MenuButtonPill } from './MenuButtonPill.js';\nexport { ReadOnlyPill } from './ReadOnlyPill.js';\nexport { RemovablePill } from './RemovablePill.js';\nexport { ValuePill } from './ValuePill.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,4BAA+B;AAC/B,0BAA6B;AAC7B,2BAA8B;AAC9B,uBAA0B;",
|
|
4
|
+
"sourcesContent": ["export { DropdownPill } from './DropdownPill.js';\nexport { InputPill } from './InputPill.js';\nexport { LabelPill } from './LabelPill.js';\nexport { LabelOnlyPill } from './LabelOnlyPill.js';\nexport { MenuButtonPill } from './MenuButtonPill.js';\nexport { ReadOnlyPill } from './ReadOnlyPill.js';\nexport { RemovablePill } from './RemovablePill.js';\nexport { ValuePill } from './ValuePill.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA6B;AAC7B,uBAA0B;AAC1B,uBAA0B;AAC1B,2BAA8B;AAC9B,4BAA+B;AAC/B,0BAA6B;AAC7B,2BAA8B;AAC9B,uBAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -47,6 +47,7 @@ const DSPillV2DefaultProps = {
|
|
|
47
47
|
innerRef: () => null,
|
|
48
48
|
disabled: false,
|
|
49
49
|
applyAriaDisabled: false,
|
|
50
|
+
readOnly: false,
|
|
50
51
|
applyTooltipOverflowWrap: false,
|
|
51
52
|
// turn on for > 25.1
|
|
52
53
|
hasError: false,
|
|
@@ -56,6 +57,7 @@ const DSPillV2DefaultProps = {
|
|
|
56
57
|
tooltipValue: "",
|
|
57
58
|
iconLeft: null,
|
|
58
59
|
IconLeft: null,
|
|
60
|
+
IconRight: null,
|
|
59
61
|
iconRight: null,
|
|
60
62
|
onRemove: () => null,
|
|
61
63
|
inputPlaceholder: "",
|
|
@@ -82,7 +84,16 @@ const DSPillGroupDefaultProps = {
|
|
|
82
84
|
width: "fit-content",
|
|
83
85
|
innerRef: () => null
|
|
84
86
|
};
|
|
85
|
-
const pillTypes = import_ds_props_helpers.PropTypes.oneOf([
|
|
87
|
+
const pillTypes = import_ds_props_helpers.PropTypes.oneOf([
|
|
88
|
+
"label",
|
|
89
|
+
"labelOnly",
|
|
90
|
+
"value",
|
|
91
|
+
"input",
|
|
92
|
+
"dropdown",
|
|
93
|
+
"removable",
|
|
94
|
+
"readonly",
|
|
95
|
+
"menubutton"
|
|
96
|
+
]);
|
|
86
97
|
const { children, ...menuButtonPropsPropTypes } = import_ds_menu_button.DSMenuButtonPropTypes;
|
|
87
98
|
const DSPillV2PropTypes = {
|
|
88
99
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
@@ -99,7 +110,11 @@ const DSPillV2PropTypes = {
|
|
|
99
110
|
message: "Use IconLeft instead for accessibility reasons"
|
|
100
111
|
}),
|
|
101
112
|
IconLeft: import_ds_props_helpers.PropTypes.node.description("A component to show int the left of a label pill").defaultValue(null),
|
|
102
|
-
|
|
113
|
+
IconRight: import_ds_props_helpers.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
|
|
114
|
+
iconRight: import_ds_props_helpers.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null).deprecated({
|
|
115
|
+
version: "4.x",
|
|
116
|
+
message: "Use IconRight instead for accessibility reasons"
|
|
117
|
+
}),
|
|
103
118
|
onRemove: import_ds_props_helpers.PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
|
|
104
119
|
inputPlaceholder: import_ds_props_helpers.PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
|
|
105
120
|
onInputChange: import_ds_props_helpers.PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
|
|
@@ -110,12 +125,16 @@ const DSPillV2PropTypes = {
|
|
|
110
125
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
111
126
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
112
127
|
).defaultValue(false),
|
|
128
|
+
readOnly: import_ds_props_helpers.PropTypes.bool.description("Whether the Pill is in readonly state or not.").defaultValue(false),
|
|
113
129
|
applyTooltipOverflowWrap: import_ds_props_helpers.PropTypes.bool.description(
|
|
114
130
|
"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"
|
|
115
131
|
).defaultValue(false),
|
|
116
132
|
hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
|
|
117
133
|
inputRender: import_ds_props_helpers.PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`),
|
|
118
134
|
menuButtonProps: import_ds_props_helpers.PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
|
|
135
|
+
trailingComma: import_ds_props_helpers.PropTypes.bool.description(
|
|
136
|
+
"Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
|
|
137
|
+
),
|
|
119
138
|
dropdownProps: import_ds_props_helpers.PropTypes.object.description(
|
|
120
139
|
"Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps"
|
|
121
140
|
).defaultValue({}).deprecated({ version: "25.3" }),
|