@elliemae/ds-pills-v2 3.62.1 → 3.70.0-alpha.9
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/TruncatedTooltipText.js +112 -0
- package/dist/cjs/TruncatedTooltipText.js.map +7 -0
- package/dist/cjs/components/Pill.js +2 -1
- package/dist/cjs/components/Pill.js.map +2 -2
- package/dist/cjs/components/TextComponent.js +2 -2
- package/dist/cjs/components/TextComponent.js.map +2 -2
- package/dist/cjs/components/styled.js +62 -20
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +55 -53
- package/dist/cjs/components/types/DropdownPill.js.map +2 -2
- package/dist/cjs/components/types/InputPill.js +91 -61
- package/dist/cjs/components/types/InputPill.js.map +2 -2
- package/dist/cjs/components/types/LabelOnlyPill.js +22 -2
- package/dist/cjs/components/types/LabelOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/LabelPill.js +11 -2
- package/dist/cjs/components/types/LabelPill.js.map +2 -2
- package/dist/cjs/components/types/MenuButtonPill.js +11 -2
- package/dist/cjs/components/types/MenuButtonPill.js.map +2 -2
- package/dist/cjs/components/types/ReadOnlyPill.js +11 -2
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/components/types/RemovablePill.js +15 -5
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/components/types/ValuePill.js +22 -1
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/config/useValidateProps.js +63 -0
- package/dist/cjs/config/useValidateProps.js.map +7 -0
- package/dist/cjs/constants/index.js +3 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/DSPillButton/react-desc-prop-types.js +8 -2
- package/dist/cjs/parts/DSPillButton/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSPillGroup/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +19 -9
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js +42 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +1 -1
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/esm/TruncatedTooltipText.js +86 -0
- package/dist/esm/TruncatedTooltipText.js.map +7 -0
- package/dist/esm/components/Pill.js +3 -2
- package/dist/esm/components/Pill.js.map +2 -2
- package/dist/esm/components/TextComponent.js +2 -2
- package/dist/esm/components/TextComponent.js.map +2 -2
- package/dist/esm/components/styled.js +62 -20
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +55 -53
- package/dist/esm/components/types/DropdownPill.js.map +2 -2
- package/dist/esm/components/types/InputPill.js +92 -62
- package/dist/esm/components/types/InputPill.js.map +2 -2
- package/dist/esm/components/types/LabelOnlyPill.js +22 -2
- package/dist/esm/components/types/LabelOnlyPill.js.map +2 -2
- package/dist/esm/components/types/LabelPill.js +11 -2
- package/dist/esm/components/types/LabelPill.js.map +2 -2
- package/dist/esm/components/types/MenuButtonPill.js +11 -2
- package/dist/esm/components/types/MenuButtonPill.js.map +2 -2
- package/dist/esm/components/types/ReadOnlyPill.js +11 -2
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/components/types/RemovablePill.js +15 -5
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +22 -1
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/config/useValidateProps.js +33 -0
- package/dist/esm/config/useValidateProps.js.map +7 -0
- package/dist/esm/constants/index.js +3 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/DSPillButton/react-desc-prop-types.js +8 -2
- package/dist/esm/parts/DSPillButton/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSPillGroup/react-desc-prop-types.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +20 -10
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +19 -0
- package/dist/esm/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +1 -1
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/types/TruncatedTooltipText.d.ts +10 -0
- package/dist/types/components/TextComponent.d.ts +2 -0
- package/dist/types/components/styled.d.ts +5 -4
- package/dist/types/config/useValidateProps.d.ts +3 -0
- package/dist/types/constants/index.d.ts +3 -0
- package/dist/types/parts/DSPillGroup/config/usePillGroup.d.ts +91 -91
- package/dist/types/parts/DSPillGroup/react-desc-prop-types.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +11 -2
- package/package.json +20 -18
- package/dist/types/parts/DSPillButton/tests/DSPillButton.test.d.ts +0 -1
- package/dist/types/parts/DSPillGroup/tests/DSPillGroup.test.d.ts +0 -1
- package/dist/types/tests/DSPill.a11y.test.d.ts +0 -1
- package/dist/types/tests/DSPill.exports.test.d.ts +0 -1
- package/dist/types/tests/DSPill.get-owner-props.test.d.ts +0 -1
- package/dist/types/tests/DSPill.test.d.ts +0 -1
- package/dist/types/tests/DSPillGroup.test.d.ts +0 -1
- package/dist/types/tests/events/DSPill.events.keyboard.test.d.ts +0 -1
- package/dist/types/tests/events/DSPill.events.test.d.ts +0 -1
- package/dist/types/tests/events/DSPillGroup.events.keyboard.test.d.ts +0 -1
- package/dist/types/tests/events/DSPillGroup.events.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-pills-v2-valid.d.ts +0 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { DSInput } from "@elliemae/ds-legacy-form";
|
|
3
2
|
import { DSMenuButtonPropTypes } from "@elliemae/ds-menu-button";
|
|
4
3
|
import {
|
|
5
4
|
PropTypes,
|
|
@@ -7,7 +6,7 @@ import {
|
|
|
7
6
|
globalAttributesPropTypes,
|
|
8
7
|
xstyledPropTypes
|
|
9
8
|
} from "@elliemae/ds-props-helpers";
|
|
10
|
-
import {
|
|
9
|
+
import { DSPillV2Name, PILL_V2_SLOTS } from "./constants/index.js";
|
|
11
10
|
const DSPillV2DefaultProps = {
|
|
12
11
|
innerRef: () => null,
|
|
13
12
|
disabled: false,
|
|
@@ -19,6 +18,7 @@ const DSPillV2DefaultProps = {
|
|
|
19
18
|
ariaLabel: "",
|
|
20
19
|
size: "m",
|
|
21
20
|
labelTruncated: false,
|
|
21
|
+
disableTruncationTooltip: false,
|
|
22
22
|
tooltipValue: "",
|
|
23
23
|
iconLeft: null,
|
|
24
24
|
IconLeft: null,
|
|
@@ -29,9 +29,6 @@ const DSPillV2DefaultProps = {
|
|
|
29
29
|
onInputChange: () => null,
|
|
30
30
|
onInputClear: () => null,
|
|
31
31
|
inputWidth: 72,
|
|
32
|
-
// TODO: remove DSInput in favor of V2
|
|
33
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
34
|
-
inputRender: DSInput,
|
|
35
32
|
dropdownProps: {
|
|
36
33
|
options: [],
|
|
37
34
|
isSkeleton: false,
|
|
@@ -61,14 +58,25 @@ const DSPillV2PropTypes = {
|
|
|
61
58
|
size: PropTypes.oneOf(["s", "m"]).description("Vertical pill size").defaultValue("m"),
|
|
62
59
|
ariaLabel: PropTypes.string.description("Aria label for the pill. If not provided we will use the label").defaultValue(""),
|
|
63
60
|
labelTruncated: PropTypes.bool.description("Whether to truncate the pills label").defaultValue(false),
|
|
61
|
+
disableTruncationTooltip: PropTypes.bool.description(
|
|
62
|
+
"When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti)."
|
|
63
|
+
).defaultValue(false),
|
|
64
64
|
tooltipValue: PropTypes.string.description("String to show as a tooltip in the value pill").defaultValue(""),
|
|
65
|
-
iconLeft: PropTypes.node.description(
|
|
65
|
+
iconLeft: PropTypes.node.description(
|
|
66
|
+
"Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only."
|
|
67
|
+
).defaultValue(null).deprecated({
|
|
66
68
|
version: "4.x",
|
|
67
69
|
message: "Use IconLeft instead for accessibility reasons"
|
|
68
70
|
}),
|
|
69
|
-
IconLeft: PropTypes.node.description(
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
IconLeft: PropTypes.node.description(
|
|
72
|
+
"Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only."
|
|
73
|
+
).defaultValue(null),
|
|
74
|
+
IconRight: PropTypes.node.description(
|
|
75
|
+
"Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type."
|
|
76
|
+
).defaultValue(null),
|
|
77
|
+
iconRight: PropTypes.node.description(
|
|
78
|
+
"Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type."
|
|
79
|
+
).defaultValue(null).deprecated({
|
|
72
80
|
version: "4.x",
|
|
73
81
|
message: "Use IconRight instead for accessibility reasons"
|
|
74
82
|
}),
|
|
@@ -87,7 +95,9 @@ const DSPillV2PropTypes = {
|
|
|
87
95
|
"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"
|
|
88
96
|
).defaultValue(false),
|
|
89
97
|
hasError: PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
|
|
90
|
-
inputRender: PropTypes.func.description(
|
|
98
|
+
inputRender: PropTypes.func.description(
|
|
99
|
+
"Custom render function for the input pill. When omitted, the pill renders its own slot-enabled default input, exposing the dsPillInput slot for consumer overrides."
|
|
100
|
+
),
|
|
91
101
|
menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
|
|
92
102
|
trailingComma: PropTypes.bool.description(
|
|
93
103
|
"Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
|
|
@@ -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 { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-legacy-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { PILL_V2_SLOTS, DSPillV2Name } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS> {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\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 | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\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\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\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(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\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-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_V2_SLOTS } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: 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 dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n dsPillInput: () => object;\n };\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_V2_SLOTS\n > {\n inputId?: string;\n // Optional, not default-filled: when absent, InputPill renders its own slot-enabled DSInputText.\n // When present, InputPill still injects the core input wiring (id, value, onChange/onValueChange,\n // aria-invalid, placeholder, focus/blur handlers, innerRef, className, data-testid) so the provided\n // component works correctly whether it's a plain <input>-shaped or DSInputText-shaped component \u2014\n // it just doesn't force DSInputText-specific internal slot overrides (e.g. dsInputtextInput) onto it.\n inputRender?: React.ComponentType<any>;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends\n RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends\n RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\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 dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\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(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null),\n IconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null),\n iconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description(\n 'Custom render function for the input pill. When omitted, the pill renders its own slot-enabled default input, exposing the dsPillInput slot for consumer overrides.',\n ),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SlotPropsAsObj = {
|
|
3
|
+
dsPillWrapper: { "aria-label": "just a typescript test" },
|
|
4
|
+
dsPillLabel: { "aria-label": "just a typescript test" },
|
|
5
|
+
dsPillPillGroup: { "aria-label": "just a typescript test" },
|
|
6
|
+
dsPillPillButton: { "aria-label": "just a typescript test" },
|
|
7
|
+
dsPillMenuButtonChevron: { "aria-label": "just a typescript test" },
|
|
8
|
+
dsPillInput: { "aria-label": "just a typescript test" }
|
|
9
|
+
};
|
|
10
|
+
const SlotPropsAsFunctions = {
|
|
11
|
+
dsPillWrapper: () => ({ "aria-label": "just a typescript test" }),
|
|
12
|
+
dsPillLabel: () => ({ "aria-label": "just a typescript test" }),
|
|
13
|
+
dsPillPillGroup: () => ({ "aria-label": "just a typescript test" }),
|
|
14
|
+
dsPillPillButton: () => ({ "aria-label": "just a typescript test" }),
|
|
15
|
+
dsPillMenuButtonChevron: () => ({ "aria-label": "just a typescript test" }),
|
|
16
|
+
dsPillInput: () => ({ "aria-label": "just a typescript test" })
|
|
17
|
+
};
|
|
18
|
+
const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
|
|
19
|
+
//# sourceMappingURL=slot-props.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPillV2Name, PILL_V2_SLOTS } from '../constants/index.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPillT.Props> = {\n dsPillWrapper: { 'aria-label': 'just a typescript test' },\n dsPillLabel: { 'aria-label': 'just a typescript test' },\n dsPillPillGroup: { 'aria-label': 'just a typescript test' },\n dsPillPillButton: { 'aria-label': 'just a typescript test' },\n dsPillMenuButtonChevron: { 'aria-label': 'just a typescript test' },\n dsPillInput: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSPillT.SlotFunctionArguments = {\n dsPillWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillLabel: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillPillGroup: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillPillButton: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillMenuButtonChevron: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillInput: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS>\n> = SlotPropsAsFunctions;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,iBAAyC;AAAA,EAC7C,eAAe,EAAE,cAAc,yBAAyB;AAAA,EACxD,aAAa,EAAE,cAAc,yBAAyB;AAAA,EACtD,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,aAAa,EAAE,cAAc,yBAAyB;AACxD;AAEA,MAAM,uBAAsD;AAAA,EAC1D,eAAe,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC/D,aAAa,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7D,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,aAAa,OAAO,EAAE,cAAc,yBAAyB;AAC/D;AAGA,MAAM,6CAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -50,6 +50,7 @@ const testCompleteDefaults = {
|
|
|
50
50
|
ariaLabel: "",
|
|
51
51
|
size: "m",
|
|
52
52
|
labelTruncated: true,
|
|
53
|
+
disableTruncationTooltip: false,
|
|
53
54
|
tooltipValue: "",
|
|
54
55
|
iconLeft: null,
|
|
55
56
|
iconRight: null,
|
|
@@ -60,7 +61,6 @@ const testCompleteDefaults = {
|
|
|
60
61
|
onInputChange: () => null,
|
|
61
62
|
onInputClear: () => null,
|
|
62
63
|
inputWidth: 72,
|
|
63
|
-
inputRender: () => /* @__PURE__ */ jsx("input", { type: "text" }),
|
|
64
64
|
dropdownProps: {
|
|
65
65
|
options: [],
|
|
66
66
|
isSkeleton: false,
|
|
@@ -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: ComponentPropsOptionalProps = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n IconRight: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n
|
|
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: ComponentPropsOptionalProps = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n disableTruncationTooltip: false,\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 dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n trailingComma: false,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n trailingComma: false,\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n trailingComma: false,\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n readOnly={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n trailingComma={false}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';
|
|
3
|
+
interface TruncatedTooltipTextProps {
|
|
4
|
+
value?: string;
|
|
5
|
+
placement?: DSHookFloatingContextT.PopperPlacementsT;
|
|
6
|
+
disableTooltip?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const TruncatedTooltipText: ({ value, placement, disableTooltip }: TruncatedTooltipTextProps) => React.JSX.Element;
|
|
9
|
+
export { TruncatedTooltipText };
|
|
10
|
+
export default TruncatedTooltipText;
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import type { DSPillT } from '../react-desc-prop-types.js';
|
|
3
3
|
export declare const TextComponent: React.NamedExoticComponent<{
|
|
4
4
|
labelTruncated: DSPillT.InternalProps["labelTruncated"];
|
|
5
|
+
disableTruncationTooltip: DSPillT.InternalProps["disableTruncationTooltip"];
|
|
5
6
|
label: DSPillT.InternalProps["label"];
|
|
6
7
|
pillSize: DSPillT.InternalProps["size"];
|
|
8
|
+
getOwnerProps?: () => object;
|
|
7
9
|
}>;
|
|
@@ -35,6 +35,7 @@ type StyledValuePillWrapperPropsT = {
|
|
|
35
35
|
};
|
|
36
36
|
export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledValuePillWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
37
37
|
export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, InputPillWrapperProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
38
|
+
export declare const StyledDSInputText: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-form-input-text").DSInputTextT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-form-input-text").DSInputTextT.Props>>, never>;
|
|
38
39
|
export declare const StyledDropdownPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
39
40
|
pillSize: "m" | "s";
|
|
40
41
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
@@ -53,9 +54,9 @@ type StyledRemovablePillWrapperPropsT = {
|
|
|
53
54
|
};
|
|
54
55
|
export declare const StyledRemovablePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledRemovablePillWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
55
56
|
export declare const StyledPillGroup: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
56
|
-
export declare const StyledSpanWithTooltip: import("styled-components").StyledComponent<"
|
|
57
|
+
export declare const StyledSpanWithTooltip: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, {
|
|
57
58
|
pillSize: "m" | "s";
|
|
58
|
-
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"
|
|
59
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
59
60
|
export declare const StyledPillButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, {
|
|
60
61
|
width: string | number;
|
|
61
62
|
height: string | number;
|
|
@@ -65,7 +66,7 @@ export declare const StyledPillMenuButton: import("styled-components").StyledCom
|
|
|
65
66
|
height: string;
|
|
66
67
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-button").DSMenuButtonT.Props>>, never>;
|
|
67
68
|
export declare const StyledAgnosticPillRegion: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
68
|
-
export declare const StyledTextWrapper: import("styled-components").StyledComponent<"
|
|
69
|
+
export declare const StyledTextWrapper: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, {
|
|
69
70
|
pillSize: "m" | "s";
|
|
70
|
-
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"
|
|
71
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
71
72
|
export {};
|
|
@@ -2,9 +2,11 @@ export declare const DSPillV2Name = "DSPill";
|
|
|
2
2
|
export declare const DSPillName = "DSPill";
|
|
3
3
|
export declare const PILL_V2_SLOTS: {
|
|
4
4
|
readonly WRAPPER: "wrapper";
|
|
5
|
+
readonly LABEL: "label";
|
|
5
6
|
readonly PILL_GROUP: "pill-group";
|
|
6
7
|
readonly PILL_BUTTON: "pill-button";
|
|
7
8
|
readonly PILL_MENU_BUTTON: "menu-button-chevron";
|
|
9
|
+
readonly PILL_INPUT: "input";
|
|
8
10
|
};
|
|
9
11
|
export declare const PILL_V2_DATA_TESTID: {
|
|
10
12
|
PILL_REMOVABLE_ICON: string;
|
|
@@ -13,6 +15,7 @@ export declare const PILL_V2_DATA_TESTID: {
|
|
|
13
15
|
PILL_INPUT: string;
|
|
14
16
|
PILL_BUTTON: string;
|
|
15
17
|
WRAPPER: "ds-pill-wrapper";
|
|
18
|
+
LABEL: "ds-pill-label";
|
|
16
19
|
PILL_GROUP: "ds-pill-pill-group";
|
|
17
20
|
PILL_MENU_BUTTON: "ds-pill-menu-button-chevron";
|
|
18
21
|
};
|