@elliemae/ds-pills-v2 3.51.0-next.1 → 3.51.0-next.3
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/types/ReadOnlyPill.js +8 -6
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +6 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +1 -0
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/esm/components/types/ReadOnlyPill.js +8 -6
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +6 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +1 -0
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +3 -0
- package/package.json +13 -65
|
@@ -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
|
}
|
|
@@ -56,6 +56,7 @@ const DSPillV2DefaultProps = {
|
|
|
56
56
|
tooltipValue: "",
|
|
57
57
|
iconLeft: null,
|
|
58
58
|
IconLeft: null,
|
|
59
|
+
IconRight: null,
|
|
59
60
|
iconRight: null,
|
|
60
61
|
onRemove: () => null,
|
|
61
62
|
inputPlaceholder: "",
|
|
@@ -99,7 +100,11 @@ const DSPillV2PropTypes = {
|
|
|
99
100
|
message: "Use IconLeft instead for accessibility reasons"
|
|
100
101
|
}),
|
|
101
102
|
IconLeft: import_ds_props_helpers.PropTypes.node.description("A component to show int the left of a label pill").defaultValue(null),
|
|
102
|
-
|
|
103
|
+
IconRight: import_ds_props_helpers.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
|
|
104
|
+
iconRight: import_ds_props_helpers.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null).deprecated({
|
|
105
|
+
version: "4.x",
|
|
106
|
+
message: "Use IconRight instead for accessibility reasons"
|
|
107
|
+
}),
|
|
103
108
|
onRemove: import_ds_props_helpers.PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
|
|
104
109
|
inputPlaceholder: import_ds_props_helpers.PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
|
|
105
110
|
onInputChange: import_ds_props_helpers.PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { 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: 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 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 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,qBAAwB;AACxB,4BAA0D;AAE1D,8BAAuE;
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/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 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,YAAuB;
|
|
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,YAAuB;AC0EF;AAxErB,eAAyB;AAUzB,MAAM,oBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,OAAO;AACT;AACA,MAAM,oBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,iBAAiB;AAAA,IACf,SAAS,CAAC;AAAA,IACV,eAAe,CAAC;AAAA,IAChB,gBAAgB,MAAM;AAAA,IAAC;AAAA,IACvB,gBAAgB,MAAM;AAAA,IAAC;AAAA,EACzB;AACF;AAIA,MAAM,sBAA2D;AAAA,EAC/D,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,cAAc;AAAA,EACd,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,YAAY;AAAA,EACZ,iBAAiB,MAAM;AAAA,EACvB,UAAU;AACZ;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa,MAAM,4CAAC,WAAM,MAAK,QAAO;AAAA,EACtC,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,0BAA0B;AAC5B;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa,MAAM,4CAAC,WAAM,MAAK,QAAO;AAAA,EACtC,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa,MAAM,4CAAC,WAAM,MAAK,QAAO;AAAA,EACtC,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa,MAAM,4CAAC,WAAM,MAAK,QAAO;AAAA,EACtC,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,UAAU;AACZ;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,cAAa;AAAA,MACb,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU,MAAM;AAAA,MAChB,kBAAiB;AAAA,MACjB,eAAe,MAAM;AAAA,MACrB,cAAc,MAAM;AAAA,MACpB,YAAY;AAAA,MAEZ,eAAe;AAAA,QACb,SAAS,CAAC;AAAA,QACV,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MACA,iBAAiB,MAAM;AAAA,MACvB,UAAU;AAAA,MACX;AAAA;AAAA,EAED;AAAA,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,11 @@ import React2 from "react";
|
|
|
4
4
|
import { TextComponent } from "../TextComponent.js";
|
|
5
5
|
import { StyledReadonlyPillWrapper } from "../styled.js";
|
|
6
6
|
const ReadOnlyPill = React2.memo(
|
|
7
|
-
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
|
|
7
|
+
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {
|
|
8
8
|
const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
|
|
9
9
|
const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
|
|
10
|
+
const hasIconLeftNew = IconLeft !== null || IconRight !== null && label === "";
|
|
11
|
+
const hasIconRightNew = IconRight !== null || IconLeft !== null && label === "";
|
|
10
12
|
return /* @__PURE__ */ jsxs(
|
|
11
13
|
StyledReadonlyPillWrapper,
|
|
12
14
|
{
|
|
@@ -15,16 +17,16 @@ const ReadOnlyPill = React2.memo(
|
|
|
15
17
|
className: "ds-pill-wrapper ds-pill-wrapper-readonly",
|
|
16
18
|
"data-testid": "ds-pill-wrapper",
|
|
17
19
|
"data-label": ariaLabel || label,
|
|
18
|
-
cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter(
|
|
20
|
+
cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
|
|
19
21
|
(notFalse) => notFalse
|
|
20
22
|
),
|
|
21
23
|
gutter: "xxxs",
|
|
22
|
-
hasIconRight,
|
|
23
|
-
hasIconLeft,
|
|
24
|
+
hasIconRight: hasIconRight || hasIconRightNew,
|
|
25
|
+
hasIconLeft: hasIconLeft || hasIconLeftNew,
|
|
24
26
|
children: [
|
|
25
|
-
iconLeft,
|
|
27
|
+
IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
|
|
26
28
|
label ? /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }) : null,
|
|
27
|
-
iconRight
|
|
29
|
+
IconRight ? /* @__PURE__ */ jsx(IconRight, { label }) : iconRight
|
|
28
30
|
]
|
|
29
31
|
}
|
|
30
32
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ReadOnlyPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACejB,SAec,KAfd;AAdN,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAEnC,MAAM,eAAeA,OAAM;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,oBAAC,YAAS,OAAc,IAAK;AAAA,UACxC,QAAQ,oBAAC,iBAAc,gBAAgC,OAAc,IAAK;AAAA,UAC1E,YAAY,oBAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ const DSPillV2DefaultProps = {
|
|
|
15
15
|
tooltipValue: "",
|
|
16
16
|
iconLeft: null,
|
|
17
17
|
IconLeft: null,
|
|
18
|
+
IconRight: null,
|
|
18
19
|
iconRight: null,
|
|
19
20
|
onRemove: () => null,
|
|
20
21
|
inputPlaceholder: "",
|
|
@@ -58,7 +59,11 @@ const DSPillV2PropTypes = {
|
|
|
58
59
|
message: "Use IconLeft instead for accessibility reasons"
|
|
59
60
|
}),
|
|
60
61
|
IconLeft: PropTypes.node.description("A component to show int the left of a label pill").defaultValue(null),
|
|
61
|
-
|
|
62
|
+
IconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
|
|
63
|
+
iconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null).deprecated({
|
|
64
|
+
version: "4.x",
|
|
65
|
+
message: "Use IconRight instead for accessibility reasons"
|
|
66
|
+
}),
|
|
62
67
|
onRemove: PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
|
|
63
68
|
inputPlaceholder: PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
|
|
64
69
|
onInputChange: PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
|
|
@@ -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: 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 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 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 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/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 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};\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,6 +20,9 @@ export declare namespace DSPillT {
|
|
|
20
20
|
IconLeft: React.ComponentType<{
|
|
21
21
|
label: string;
|
|
22
22
|
}> | null;
|
|
23
|
+
IconRight: React.ComponentType<{
|
|
24
|
+
label: string;
|
|
25
|
+
}> | null;
|
|
23
26
|
iconRight: JSX.Element | null;
|
|
24
27
|
onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;
|
|
25
28
|
inputPlaceholder: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pills-v2",
|
|
3
|
-
"version": "3.51.0-next.
|
|
3
|
+
"version": "3.51.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills V2",
|
|
6
6
|
"files": [
|
|
@@ -14,58 +14,6 @@
|
|
|
14
14
|
"types": "./dist/types/index.d.ts",
|
|
15
15
|
"import": "./dist/esm/index.js",
|
|
16
16
|
"require": "./dist/cjs/index.js"
|
|
17
|
-
},
|
|
18
|
-
"./props": {
|
|
19
|
-
"import": "./dist/esm/props.js",
|
|
20
|
-
"require": "./dist/cjs/props.js"
|
|
21
|
-
},
|
|
22
|
-
"./components/types/ValuePill": {
|
|
23
|
-
"import": "./dist/esm/components/types/ValuePill.js",
|
|
24
|
-
"require": "./dist/cjs/components/types/ValuePill.js"
|
|
25
|
-
},
|
|
26
|
-
"./components/types/RemovablePill": {
|
|
27
|
-
"import": "./dist/esm/components/types/RemovablePill.js",
|
|
28
|
-
"require": "./dist/cjs/components/types/RemovablePill.js"
|
|
29
|
-
},
|
|
30
|
-
"./components/types/ReadOnlyPill": {
|
|
31
|
-
"import": "./dist/esm/components/types/ReadOnlyPill.js",
|
|
32
|
-
"require": "./dist/cjs/components/types/ReadOnlyPill.js"
|
|
33
|
-
},
|
|
34
|
-
"./components/types/LabelPill": {
|
|
35
|
-
"import": "./dist/esm/components/types/LabelPill.js",
|
|
36
|
-
"require": "./dist/cjs/components/types/LabelPill.js"
|
|
37
|
-
},
|
|
38
|
-
"./components/types/InputPill": {
|
|
39
|
-
"import": "./dist/esm/components/types/InputPill.js",
|
|
40
|
-
"require": "./dist/cjs/components/types/InputPill.js"
|
|
41
|
-
},
|
|
42
|
-
"./components/types": {
|
|
43
|
-
"import": "./dist/esm/components/types/index.js",
|
|
44
|
-
"require": "./dist/cjs/components/types/index.js"
|
|
45
|
-
},
|
|
46
|
-
"./components/types/DropdownPill": {
|
|
47
|
-
"import": "./dist/esm/components/types/DropdownPill.js",
|
|
48
|
-
"require": "./dist/cjs/components/types/DropdownPill.js"
|
|
49
|
-
},
|
|
50
|
-
"./components/styled": {
|
|
51
|
-
"import": "./dist/esm/components/styled.js",
|
|
52
|
-
"require": "./dist/cjs/components/styled.js"
|
|
53
|
-
},
|
|
54
|
-
"./components/PillGroup": {
|
|
55
|
-
"import": "./dist/esm/components/PillGroup.js",
|
|
56
|
-
"require": "./dist/cjs/components/PillGroup.js"
|
|
57
|
-
},
|
|
58
|
-
"./components/PillButton": {
|
|
59
|
-
"import": "./dist/esm/components/PillButton.js",
|
|
60
|
-
"require": "./dist/cjs/components/PillButton.js"
|
|
61
|
-
},
|
|
62
|
-
"./components/Pill": {
|
|
63
|
-
"import": "./dist/esm/components/Pill.js",
|
|
64
|
-
"require": "./dist/cjs/components/Pill.js"
|
|
65
|
-
},
|
|
66
|
-
"./components": {
|
|
67
|
-
"import": "./dist/esm/components/index.js",
|
|
68
|
-
"require": "./dist/cjs/components/index.js"
|
|
69
17
|
}
|
|
70
18
|
},
|
|
71
19
|
"sideEffects": [
|
|
@@ -89,23 +37,23 @@
|
|
|
89
37
|
},
|
|
90
38
|
"dependencies": {
|
|
91
39
|
"uid": "~2.0.1",
|
|
92
|
-
"@elliemae/ds-button-v2": "3.51.0-next.
|
|
93
|
-
"@elliemae/ds-dropdownmenu-v2": "3.51.0-next.
|
|
94
|
-
"@elliemae/ds-form": "3.51.0-next.
|
|
95
|
-
"@elliemae/ds-grid": "3.51.0-next.
|
|
96
|
-
"@elliemae/ds-
|
|
97
|
-
"@elliemae/ds-
|
|
98
|
-
"@elliemae/ds-props-helpers": "3.51.0-next.
|
|
99
|
-
"@elliemae/ds-system": "3.51.0-next.
|
|
100
|
-
"@elliemae/ds-tooltip-v3": "3.51.0-next.
|
|
101
|
-
"@elliemae/ds-truncated-tooltip-text": "3.51.0-next.
|
|
102
|
-
"@elliemae/ds-typescript-helpers": "3.51.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.51.0-next.3",
|
|
41
|
+
"@elliemae/ds-dropdownmenu-v2": "3.51.0-next.3",
|
|
42
|
+
"@elliemae/ds-form": "3.51.0-next.3",
|
|
43
|
+
"@elliemae/ds-grid": "3.51.0-next.3",
|
|
44
|
+
"@elliemae/ds-menu-button": "3.51.0-next.3",
|
|
45
|
+
"@elliemae/ds-icons": "3.51.0-next.3",
|
|
46
|
+
"@elliemae/ds-props-helpers": "3.51.0-next.3",
|
|
47
|
+
"@elliemae/ds-system": "3.51.0-next.3",
|
|
48
|
+
"@elliemae/ds-tooltip-v3": "3.51.0-next.3",
|
|
49
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-next.3",
|
|
50
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-next.3"
|
|
103
51
|
},
|
|
104
52
|
"devDependencies": {
|
|
105
53
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
106
54
|
"jest": "~29.7.0",
|
|
107
55
|
"styled-components": "~5.3.9",
|
|
108
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-next.
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-next.3"
|
|
109
57
|
},
|
|
110
58
|
"peerDependencies": {
|
|
111
59
|
"lodash": "^4.17.21",
|