@elliemae/ds-pills-v2 3.51.0-next.9 → 3.51.0-rc.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/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/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 +15 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +11 -1
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- 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/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 +15 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +11 -1
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +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 +3 -1
- package/package.json +13 -13
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Pill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgCd;AAhCT,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,+BAA6C;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;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,oBAAoB,6BAAoD,OAAO,oBAAoB;AACzG,iCAA+B,mBAAmB,yBAAyB,UAAU;AACrF,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB,IAAI;AAE9C,SAAO,oBAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ const borderOutside = ({
|
|
|
17
17
|
right: 0px;
|
|
18
18
|
bottom: 0px;
|
|
19
19
|
border: ${size}px solid
|
|
20
|
-
${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral[400] : color};
|
|
20
|
+
${({ disabled, applyAriaDisabled, readOnly, theme }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[400] : color};
|
|
21
21
|
border-top-left-radius: ${borderRadius};
|
|
22
22
|
border-top-right-radius: ${borderRadius};
|
|
23
23
|
border-bottom-left-radius: ${borderRadius};
|
|
@@ -35,7 +35,11 @@ const commonPillWrapperCss = css`
|
|
|
35
35
|
|
|
36
36
|
width: fit-content;
|
|
37
37
|
|
|
38
|
-
background-color: ${({ theme, disabled, applyAriaDisabled }) =>
|
|
38
|
+
background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
|
|
39
|
+
if (disabled) return theme.colors.neutral["080"];
|
|
40
|
+
if (applyAriaDisabled || readOnly) return theme.colors.neutral["050"];
|
|
41
|
+
return theme.colors.brand[200];
|
|
42
|
+
}};
|
|
39
43
|
|
|
40
44
|
outline: none;
|
|
41
45
|
|
|
@@ -48,20 +52,26 @@ const commonPillWrapperCss = css`
|
|
|
48
52
|
line-height: 1;
|
|
49
53
|
user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : "auto"};
|
|
50
54
|
cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "default"};
|
|
51
|
-
color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#616b7f" : theme.colors.brand["800"]};
|
|
52
|
-
${(
|
|
55
|
+
color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
|
|
56
|
+
${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? borderOutside({ color: theme.colors.brand[300] }) : ""};
|
|
53
57
|
`;
|
|
54
58
|
const StyledLabelPillWrapper = styled(Grid)`
|
|
55
59
|
${commonPillWrapperCss}
|
|
56
60
|
|
|
57
61
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
58
|
-
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
62
|
+
padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled || props.readOnly ? "0px !important" : "12px"};
|
|
63
|
+
`;
|
|
64
|
+
const StyledLabelOnlyPillWrapper = styled(Grid)`
|
|
65
|
+
${commonPillWrapperCss}
|
|
66
|
+
|
|
67
|
+
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
68
|
+
padding-left: ${(props) => props.hasIcon || props.applyAriaDisabled ? "0px !important" : "12px"};
|
|
59
69
|
`;
|
|
60
70
|
const StyledValuePillWrapper = styled(Grid)`
|
|
61
71
|
${commonPillWrapperCss}
|
|
62
72
|
|
|
63
73
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
64
|
-
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
74
|
+
padding-left: ${(props) => props.hasIcon || props.disabled ? "0px !important" : "12px"};
|
|
65
75
|
`;
|
|
66
76
|
const StyledInputPillWrapper = styled(Grid)`
|
|
67
77
|
${commonPillWrapperCss}
|
|
@@ -114,7 +124,7 @@ const StyledRemovablePillWrapper = styled(Grid)`
|
|
|
114
124
|
${commonPillWrapperCss}
|
|
115
125
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
116
126
|
padding: 0 0 0 12px;
|
|
117
|
-
padding: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "0 12px 0 12px" : "0 0 0 12px"};
|
|
127
|
+
padding: ${({ disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "0 12px 0 12px" : "0 0 0 12px"};
|
|
118
128
|
line-height: 1.2307rem;
|
|
119
129
|
@media (max-width: ${(props) => props.theme.breakpoints?.small}) {
|
|
120
130
|
line-height: 1rem;
|
|
@@ -257,6 +267,7 @@ const StyledPillMenuButton = styled(DSMenuButton)`
|
|
|
257
267
|
export {
|
|
258
268
|
StyledDropdownPillWrapper,
|
|
259
269
|
StyledInputPillWrapper,
|
|
270
|
+
StyledLabelOnlyPillWrapper,
|
|
260
271
|
StyledLabelPillWrapper,
|
|
261
272
|
StyledPillButton,
|
|
262
273
|
StyledPillGroup,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,KAAK,cAAc;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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React2 from "react";
|
|
4
|
+
import { TextComponent } from "../TextComponent.js";
|
|
5
|
+
import { StyledLabelOnlyPillWrapper } from "../styled.js";
|
|
6
|
+
const LabelOnlyPill = React2.memo(
|
|
7
|
+
({ label, size, labelTruncated, iconLeft, IconLeft, ariaLabel, applyAriaDisabled, readOnly, trailingComma }) => /* @__PURE__ */ jsxs(
|
|
8
|
+
StyledLabelOnlyPillWrapper,
|
|
9
|
+
{
|
|
10
|
+
pillSize: size,
|
|
11
|
+
alignItems: "center",
|
|
12
|
+
className: "ds-pill-wrapper ds-pill-wrapper-label",
|
|
13
|
+
"data-testid": "ds-pill-wrapper",
|
|
14
|
+
"data-label": ariaLabel || label,
|
|
15
|
+
cols: [(iconLeft || IconLeft) && "min-content", "auto"].filter((notFalse) => notFalse),
|
|
16
|
+
gutter: "xxxs",
|
|
17
|
+
hasIcon: (iconLeft || IconLeft) !== null,
|
|
18
|
+
role: "group",
|
|
19
|
+
"aria-label": label,
|
|
20
|
+
applyAriaDisabled,
|
|
21
|
+
readOnly,
|
|
22
|
+
children: [
|
|
23
|
+
IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
|
|
24
|
+
/* @__PURE__ */ jsx(TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
);
|
|
29
|
+
export {
|
|
30
|
+
LabelOnlyPill
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=LabelOnlyPill.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/LabelOnlyPill.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACQnB,SAcc,KAdd;AAPJ,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAEpC,MAAM,gBAAgBA,OAAM;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,oBAAC,YAAS,OAAc,IAAK;AAAA,QACzC,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAC/F;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -14,7 +14,9 @@ const ValuePill = React2.memo(
|
|
|
14
14
|
iconLeft,
|
|
15
15
|
ariaLabel,
|
|
16
16
|
applyAriaDisabled,
|
|
17
|
-
|
|
17
|
+
readOnly,
|
|
18
|
+
applyTooltipOverflowWrap,
|
|
19
|
+
trailingComma
|
|
18
20
|
}) => /* @__PURE__ */ jsxs(
|
|
19
21
|
StyledValuePillWrapper,
|
|
20
22
|
{
|
|
@@ -28,6 +30,7 @@ const ValuePill = React2.memo(
|
|
|
28
30
|
hasIcon: iconLeft !== null,
|
|
29
31
|
"data-label": ariaLabel || label,
|
|
30
32
|
applyAriaDisabled,
|
|
33
|
+
readOnly,
|
|
31
34
|
children: [
|
|
32
35
|
iconLeft,
|
|
33
36
|
tooltipValue !== "" ? /* @__PURE__ */ jsx(
|
|
@@ -38,7 +41,7 @@ const ValuePill = React2.memo(
|
|
|
38
41
|
applyTooltipOverflowWrap,
|
|
39
42
|
children: /* @__PURE__ */ jsx(StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label })
|
|
40
43
|
}
|
|
41
|
-
) : /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label })
|
|
44
|
+
) : /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
|
|
42
45
|
]
|
|
43
46
|
}
|
|
44
47
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoBnB,SAoBM,KApBN;AApBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,8BAA8B;AAEvD,MAAM,YAAYA,OAAM;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,8BAAC,yBAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,QACF,IAEA,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { DropdownPill } from "./DropdownPill.js";
|
|
3
3
|
import { InputPill } from "./InputPill.js";
|
|
4
4
|
import { LabelPill } from "./LabelPill.js";
|
|
5
|
+
import { LabelOnlyPill } from "./LabelOnlyPill.js";
|
|
5
6
|
import { MenuButtonPill } from "./MenuButtonPill.js";
|
|
6
7
|
import { ReadOnlyPill } from "./ReadOnlyPill.js";
|
|
7
8
|
import { RemovablePill } from "./RemovablePill.js";
|
|
@@ -9,6 +10,7 @@ import { ValuePill } from "./ValuePill.js";
|
|
|
9
10
|
export {
|
|
10
11
|
DropdownPill,
|
|
11
12
|
InputPill,
|
|
13
|
+
LabelOnlyPill,
|
|
12
14
|
LabelPill,
|
|
13
15
|
MenuButtonPill,
|
|
14
16
|
ReadOnlyPill,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,6 +6,7 @@ const DSPillV2DefaultProps = {
|
|
|
6
6
|
innerRef: () => null,
|
|
7
7
|
disabled: false,
|
|
8
8
|
applyAriaDisabled: false,
|
|
9
|
+
readOnly: false,
|
|
9
10
|
applyTooltipOverflowWrap: false,
|
|
10
11
|
// turn on for > 25.1
|
|
11
12
|
hasError: false,
|
|
@@ -42,7 +43,16 @@ const DSPillGroupDefaultProps = {
|
|
|
42
43
|
width: "fit-content",
|
|
43
44
|
innerRef: () => null
|
|
44
45
|
};
|
|
45
|
-
const pillTypes = PropTypes.oneOf([
|
|
46
|
+
const pillTypes = PropTypes.oneOf([
|
|
47
|
+
"label",
|
|
48
|
+
"labelOnly",
|
|
49
|
+
"value",
|
|
50
|
+
"input",
|
|
51
|
+
"dropdown",
|
|
52
|
+
"removable",
|
|
53
|
+
"readonly",
|
|
54
|
+
"menubutton"
|
|
55
|
+
]);
|
|
46
56
|
const { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;
|
|
47
57
|
const DSPillV2PropTypes = {
|
|
48
58
|
...globalAttributesPropTypes,
|
|
@@ -74,12 +84,16 @@ const DSPillV2PropTypes = {
|
|
|
74
84
|
applyAriaDisabled: PropTypes.bool.description(
|
|
75
85
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
76
86
|
).defaultValue(false),
|
|
87
|
+
readOnly: PropTypes.bool.description("Whether the Pill is in readonly state or not.").defaultValue(false),
|
|
77
88
|
applyTooltipOverflowWrap: PropTypes.bool.description(
|
|
78
89
|
"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"
|
|
79
90
|
).defaultValue(false),
|
|
80
91
|
hasError: PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
|
|
81
92
|
inputRender: PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`),
|
|
82
93
|
menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
|
|
94
|
+
trailingComma: PropTypes.bool.description(
|
|
95
|
+
"Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
|
|
96
|
+
),
|
|
83
97
|
dropdownProps: PropTypes.object.description(
|
|
84
98
|
"Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps"
|
|
85
99
|
).defaultValue({}).deprecated({ version: "25.3" }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface DSPillButtonDefaultPropsT {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type?: 'left' | 'right' | 'only';\n width?: string;\n height?: string;\n applyAriaDisabled?: boolean;\n }\n export interface InternalButtonProps\n extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n applyAriaDisabled: boolean;\n }\n\n export interface DefaultGroupPropsT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n export interface GroupProps extends GlobalAttributesT {\n width?: string;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n export interface InternalGroupProps extends GlobalAttributesT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n ...globalAttributesPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,eAAe;AACxB,SAAS,6BAAiD;AAE1D,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface DSPillButtonDefaultPropsT {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type?: 'left' | 'right' | 'only';\n width?: string;\n height?: string;\n applyAriaDisabled?: boolean;\n }\n export interface InternalButtonProps\n extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n applyAriaDisabled: boolean;\n }\n\n export interface DefaultGroupPropsT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n export interface GroupProps extends GlobalAttributesT {\n width?: string;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n export interface InternalGroupProps extends GlobalAttributesT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n ...globalAttributesPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,7 +14,8 @@ const testOptionalProps = {
|
|
|
14
14
|
},
|
|
15
15
|
onActivateItem: () => {
|
|
16
16
|
}
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
trailingComma: true
|
|
18
19
|
};
|
|
19
20
|
const testPartialDefaults = {
|
|
20
21
|
innerRef: () => null,
|
|
@@ -44,6 +45,7 @@ const testCompleteDefaults = {
|
|
|
44
45
|
innerRef: () => null,
|
|
45
46
|
disabled: false,
|
|
46
47
|
applyAriaDisabled: false,
|
|
48
|
+
readOnly: false,
|
|
47
49
|
hasError: false,
|
|
48
50
|
ariaLabel: "",
|
|
49
51
|
size: "m",
|
|
@@ -85,6 +87,7 @@ const testExplicitDefinition = {
|
|
|
85
87
|
innerRef: () => null,
|
|
86
88
|
disabled: false,
|
|
87
89
|
applyAriaDisabled: false,
|
|
90
|
+
readOnly: false,
|
|
88
91
|
hasError: false,
|
|
89
92
|
ariaLabel: "",
|
|
90
93
|
size: "m",
|
|
@@ -103,6 +106,7 @@ const testExplicitDefinition = {
|
|
|
103
106
|
isSkeleton: false,
|
|
104
107
|
isOpened: false
|
|
105
108
|
},
|
|
109
|
+
trailingComma: false,
|
|
106
110
|
onDropdownClick: () => null,
|
|
107
111
|
tabIndex: 0
|
|
108
112
|
};
|
|
@@ -113,6 +117,7 @@ const testInferedTypeCompatibility = {
|
|
|
113
117
|
innerRef: () => null,
|
|
114
118
|
disabled: false,
|
|
115
119
|
applyAriaDisabled: false,
|
|
120
|
+
readOnly: false,
|
|
116
121
|
hasError: false,
|
|
117
122
|
ariaLabel: "",
|
|
118
123
|
size: "m",
|
|
@@ -131,6 +136,7 @@ const testInferedTypeCompatibility = {
|
|
|
131
136
|
isSkeleton: false,
|
|
132
137
|
isOpened: false
|
|
133
138
|
},
|
|
139
|
+
trailingComma: false,
|
|
134
140
|
onDropdownClick: () => null,
|
|
135
141
|
tabIndex: 0
|
|
136
142
|
};
|
|
@@ -141,6 +147,7 @@ const testDefinitionAsConst = {
|
|
|
141
147
|
innerRef: () => null,
|
|
142
148
|
disabled: false,
|
|
143
149
|
applyAriaDisabled: false,
|
|
150
|
+
readOnly: false,
|
|
144
151
|
hasError: false,
|
|
145
152
|
ariaLabel: "",
|
|
146
153
|
size: "m",
|
|
@@ -159,6 +166,7 @@ const testDefinitionAsConst = {
|
|
|
159
166
|
isSkeleton: false,
|
|
160
167
|
isOpened: false
|
|
161
168
|
},
|
|
169
|
+
trailingComma: false,
|
|
162
170
|
onDropdownClick: () => null,
|
|
163
171
|
tabIndex: 0
|
|
164
172
|
};
|
|
@@ -175,6 +183,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
|
175
183
|
innerRef: () => null,
|
|
176
184
|
disabled: false,
|
|
177
185
|
applyAriaDisabled: false,
|
|
186
|
+
readOnly: false,
|
|
178
187
|
hasError: false,
|
|
179
188
|
ariaLabel: "",
|
|
180
189
|
size: "m",
|
|
@@ -192,6 +201,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
|
192
201
|
isSkeleton: false,
|
|
193
202
|
isOpened: false
|
|
194
203
|
},
|
|
204
|
+
trailingComma: false,
|
|
195
205
|
onDropdownClick: () => null,
|
|
196
206
|
tabIndex: 0,
|
|
197
207
|
children: "Button Label"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-pills-v2-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n type: 'value',\n label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n IconRight: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n type: 'value',\n label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n IconRight: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n trailingComma: false,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n trailingComma: false,\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n trailingComma: false,\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n readOnly={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n trailingComma={false}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ export declare const borderOutside: ({ color, size, zIndex, borderRadius, }: {
|
|
|
7
7
|
}) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
|
|
8
8
|
disabled?: boolean | undefined;
|
|
9
9
|
applyAriaDisabled?: boolean | undefined;
|
|
10
|
+
readOnly?: boolean | undefined;
|
|
10
11
|
}, import("@xstyled/styled-components").Theme>>;
|
|
11
12
|
interface InputPillWrapperProps {
|
|
12
13
|
value: string;
|
|
@@ -19,6 +20,13 @@ interface InputPillWrapperProps {
|
|
|
19
20
|
export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
20
21
|
pillSize: 'm' | 's';
|
|
21
22
|
hasIcon: boolean;
|
|
23
|
+
applyAriaDisabled?: boolean | undefined;
|
|
24
|
+
readOnly?: boolean | undefined;
|
|
25
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
26
|
+
export declare const StyledLabelOnlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
27
|
+
pillSize: 'm' | 's';
|
|
28
|
+
hasIcon: boolean;
|
|
29
|
+
applyAriaDisabled?: boolean | undefined;
|
|
22
30
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
23
31
|
type StyledValuePillWrapperPropsT = {
|
|
24
32
|
pillSize: 'm' | 's';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { DropdownPill } from './DropdownPill.js';
|
|
2
2
|
export { InputPill } from './InputPill.js';
|
|
3
3
|
export { LabelPill } from './LabelPill.js';
|
|
4
|
+
export { LabelOnlyPill } from './LabelOnlyPill.js';
|
|
4
5
|
export { MenuButtonPill } from './MenuButtonPill.js';
|
|
5
6
|
export { ReadOnlyPill } from './ReadOnlyPill.js';
|
|
6
7
|
export { RemovablePill } from './RemovablePill.js';
|
|
@@ -10,6 +10,7 @@ export declare namespace DSPillT {
|
|
|
10
10
|
innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
|
|
11
11
|
disabled: boolean;
|
|
12
12
|
applyAriaDisabled: boolean;
|
|
13
|
+
readOnly: boolean;
|
|
13
14
|
applyTooltipOverflowWrap: boolean;
|
|
14
15
|
hasError: boolean;
|
|
15
16
|
ariaLabel: string;
|
|
@@ -37,10 +38,11 @@ export declare namespace DSPillT {
|
|
|
37
38
|
interface OptionalProps {
|
|
38
39
|
inputId?: string;
|
|
39
40
|
menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;
|
|
41
|
+
trailingComma?: boolean;
|
|
40
42
|
}
|
|
41
43
|
interface RequiredProps {
|
|
42
44
|
label: string;
|
|
43
|
-
type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';
|
|
45
|
+
type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';
|
|
44
46
|
}
|
|
45
47
|
interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
|
|
46
48
|
}
|