@elliemae/ds-pills-v2 3.39.2 → 3.39.4
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/ValuePill.js +20 -2
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +5 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +20 -2
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +5 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/package.json +12 -12
|
@@ -38,7 +38,17 @@ var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
|
38
38
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
39
39
|
var import_styled = require("../styled.js");
|
|
40
40
|
const ValuePill = import_react.default.memo(
|
|
41
|
-
({
|
|
41
|
+
({
|
|
42
|
+
label,
|
|
43
|
+
size,
|
|
44
|
+
labelTruncated,
|
|
45
|
+
disabled,
|
|
46
|
+
tooltipValue,
|
|
47
|
+
iconLeft,
|
|
48
|
+
ariaLabel,
|
|
49
|
+
applyAriaDisabled,
|
|
50
|
+
applyTooltipOverflowWrap
|
|
51
|
+
}) => {
|
|
42
52
|
const TextComponent = labelTruncated ? (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: props.children }) : import_react.default.Fragment;
|
|
43
53
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
44
54
|
import_styled.StyledValuePillWrapper,
|
|
@@ -55,7 +65,15 @@ const ValuePill = import_react.default.memo(
|
|
|
55
65
|
applyAriaDisabled,
|
|
56
66
|
children: [
|
|
57
67
|
iconLeft,
|
|
58
|
-
tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
tooltipValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
import_ds_tooltip.DSTooltipV3,
|
|
70
|
+
{
|
|
71
|
+
text: tooltipValue ?? "",
|
|
72
|
+
ariaLabel: tooltipValue ?? "",
|
|
73
|
+
applyTooltipOverflowWrap,
|
|
74
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label })
|
|
75
|
+
}
|
|
76
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label })
|
|
59
77
|
]
|
|
60
78
|
}
|
|
61
79
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n ({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.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 const TextComponent = labelTruncated\n ? (props: { children: string }) => <SimpleTruncatedTooltipText value={props.children} />\n : React.Fragment;\n\n return (\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>{label}</TextComponent>\n )}\n </StyledValuePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBkB;AAnBzC,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAC3C,oBAA8D;AAGvD,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,gBAAgB,iBAClB,CAAC,UAAgC,4CAAC,+DAA2B,OAAO,MAAM,UAAU,IACpF,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,QACvE,QAAO;AAAA,QACP,SAAS,aAAa;AAAA,QACtB,cAAY,aAAa;AAAA,QACzB;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,gBAAgB;AAAA,cACtB,WAAW,gBAAgB;AAAA,cAC3B;AAAA,cAEA,sDAAC,uCAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,UACF,IAEA,4CAAC,iBAAe,iBAAM;AAAA;AAAA;AAAA,IAE1B;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -46,6 +46,8 @@ const DSPillV2DefaultProps = {
|
|
|
46
46
|
innerRef: () => null,
|
|
47
47
|
disabled: false,
|
|
48
48
|
applyAriaDisabled: false,
|
|
49
|
+
applyTooltipOverflowWrap: false,
|
|
50
|
+
// turn on for > 25.1
|
|
49
51
|
hasError: false,
|
|
50
52
|
ariaLabel: "",
|
|
51
53
|
size: "m",
|
|
@@ -103,6 +105,9 @@ const DSPillV2PropTypes = {
|
|
|
103
105
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
104
106
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
105
107
|
).defaultValue(false),
|
|
108
|
+
applyTooltipOverflowWrap: import_ds_props_helpers.PropTypes.bool.description(
|
|
109
|
+
"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"
|
|
110
|
+
).defaultValue(false),
|
|
106
111
|
hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
|
|
107
112
|
inputRender: import_ds_props_helpers.PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`)
|
|
108
113
|
};
|
|
@@ -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 @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 type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent, 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 }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\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 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 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 // 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: Omit<DSPillT.ButtonProps, 'children'> = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\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.description('A component to show int the left of a readonly 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 dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\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 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};\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 WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<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;ADGvB,qBAAwB;AAExB,8BAAuE;
|
|
4
|
+
"sourcesContent": ["/* 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 type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\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 iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent, 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 }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\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 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 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: Omit<DSPillT.ButtonProps, 'children'> = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\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.description('A component to show int the left of a readonly 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 dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\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};\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 WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,17 @@ import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
|
5
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
6
6
|
import { StyledSpanWithTooltip, StyledValuePillWrapper } from "../styled.js";
|
|
7
7
|
const ValuePill = React2.memo(
|
|
8
|
-
({
|
|
8
|
+
({
|
|
9
|
+
label,
|
|
10
|
+
size,
|
|
11
|
+
labelTruncated,
|
|
12
|
+
disabled,
|
|
13
|
+
tooltipValue,
|
|
14
|
+
iconLeft,
|
|
15
|
+
ariaLabel,
|
|
16
|
+
applyAriaDisabled,
|
|
17
|
+
applyTooltipOverflowWrap
|
|
18
|
+
}) => {
|
|
9
19
|
const TextComponent = labelTruncated ? (props) => /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: props.children }) : React2.Fragment;
|
|
10
20
|
return /* @__PURE__ */ jsxs(
|
|
11
21
|
StyledValuePillWrapper,
|
|
@@ -22,7 +32,15 @@ const ValuePill = React2.memo(
|
|
|
22
32
|
applyAriaDisabled,
|
|
23
33
|
children: [
|
|
24
34
|
iconLeft,
|
|
25
|
-
tooltipValue !== "" ? /* @__PURE__ */ jsx(
|
|
35
|
+
tooltipValue !== "" ? /* @__PURE__ */ jsx(
|
|
36
|
+
DSTooltipV3,
|
|
37
|
+
{
|
|
38
|
+
text: tooltipValue ?? "",
|
|
39
|
+
ariaLabel: tooltipValue ?? "",
|
|
40
|
+
applyTooltipOverflowWrap,
|
|
41
|
+
children: /* @__PURE__ */ jsx(StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label })
|
|
42
|
+
}
|
|
43
|
+
) : /* @__PURE__ */ jsx(TextComponent, { children: label })
|
|
26
44
|
]
|
|
27
45
|
}
|
|
28
46
|
);
|
|
@@ -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 React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n ({
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\nimport type { DSPillT } from '../../react-desc-prop-types.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 const TextComponent = labelTruncated\n ? (props: { children: string }) => <SimpleTruncatedTooltipText value={props.children} />\n : React.Fragment;\n\n return (\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>{label}</TextComponent>\n )}\n </StyledValuePillWrapper>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmBkB,cAInC,YAJmC;AAnBzC,OAAOA,YAAW;AAClB,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB,8BAA8B;AAGvD,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,EACF,MAAM;AACJ,UAAM,gBAAgB,iBAClB,CAAC,UAAgC,oBAAC,8BAA2B,OAAO,MAAM,UAAU,IACpFA,OAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,QACvE,QAAO;AAAA,QACP,SAAS,aAAa;AAAA,QACtB,cAAY,aAAa;AAAA,QACzB;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,gBAAgB;AAAA,cACtB,WAAW,gBAAgB;AAAA,cAC3B;AAAA,cAEA,8BAAC,yBAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,UACF,IAEA,oBAAC,iBAAe,iBAAM;AAAA;AAAA;AAAA,IAE1B;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -5,6 +5,8 @@ const DSPillV2DefaultProps = {
|
|
|
5
5
|
innerRef: () => null,
|
|
6
6
|
disabled: false,
|
|
7
7
|
applyAriaDisabled: false,
|
|
8
|
+
applyTooltipOverflowWrap: false,
|
|
9
|
+
// turn on for > 25.1
|
|
8
10
|
hasError: false,
|
|
9
11
|
ariaLabel: "",
|
|
10
12
|
size: "m",
|
|
@@ -62,6 +64,9 @@ const DSPillV2PropTypes = {
|
|
|
62
64
|
applyAriaDisabled: PropTypes.bool.description(
|
|
63
65
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
64
66
|
).defaultValue(false),
|
|
67
|
+
applyTooltipOverflowWrap: PropTypes.bool.description(
|
|
68
|
+
"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"
|
|
69
|
+
).defaultValue(false),
|
|
65
70
|
hasError: PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
|
|
66
71
|
inputRender: PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`)
|
|
67
72
|
};
|
|
@@ -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 @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 type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent, 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 }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\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 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 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 // 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: Omit<DSPillT.ButtonProps, 'children'> = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\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.description('A component to show int the left of a readonly 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 dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\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 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};\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 WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,eAAe;AAExB,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\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 type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\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 iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent, 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 }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\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 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 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: Omit<DSPillT.ButtonProps, 'children'> = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\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.description('A component to show int the left of a readonly 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 dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\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};\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 WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pills-v2",
|
|
3
|
-
"version": "3.39.
|
|
3
|
+
"version": "3.39.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills V2",
|
|
6
6
|
"files": [
|
|
@@ -89,21 +89,21 @@
|
|
|
89
89
|
},
|
|
90
90
|
"dependencies": {
|
|
91
91
|
"uid": "~2.0.1",
|
|
92
|
-
"@elliemae/ds-button-v2": "3.39.
|
|
93
|
-
"@elliemae/ds-
|
|
94
|
-
"@elliemae/ds-
|
|
95
|
-
"@elliemae/ds-
|
|
96
|
-
"@elliemae/ds-
|
|
97
|
-
"@elliemae/ds-
|
|
98
|
-
"@elliemae/ds-
|
|
99
|
-
"@elliemae/ds-
|
|
100
|
-
"@elliemae/ds-
|
|
101
|
-
"@elliemae/ds-
|
|
92
|
+
"@elliemae/ds-button-v2": "3.39.4",
|
|
93
|
+
"@elliemae/ds-icons": "3.39.4",
|
|
94
|
+
"@elliemae/ds-props-helpers": "3.39.4",
|
|
95
|
+
"@elliemae/ds-system": "3.39.4",
|
|
96
|
+
"@elliemae/ds-truncated-tooltip-text": "3.39.4",
|
|
97
|
+
"@elliemae/ds-typescript-helpers": "3.39.4",
|
|
98
|
+
"@elliemae/ds-grid": "3.39.4",
|
|
99
|
+
"@elliemae/ds-form": "3.39.4",
|
|
100
|
+
"@elliemae/ds-dropdownmenu-v2": "3.39.4",
|
|
101
|
+
"@elliemae/ds-tooltip": "3.39.4"
|
|
102
102
|
},
|
|
103
103
|
"devDependencies": {
|
|
104
104
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
105
105
|
"styled-components": "~5.3.9",
|
|
106
|
-
"@elliemae/ds-monorepo-devops": "3.39.
|
|
106
|
+
"@elliemae/ds-monorepo-devops": "3.39.4"
|
|
107
107
|
},
|
|
108
108
|
"peerDependencies": {
|
|
109
109
|
"lodash": "^4.17.21",
|