@elliemae/ds-pills-v2 3.51.0-next.1 → 3.51.0-next.12

package/dist/esm/components/types/ValuePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    applyTooltipOverflowWrap,\n  }) => (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3\n          text={tooltipValue ?? ''}\n          ariaLabel={tooltipValue ?? ''}\n          applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n        >\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={label} />\n      )}\n    </StyledValuePillWrapper>\n  ),\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBnB,SAmBM,KAnBN;AAlBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,8BAA8B;AAEvD,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,gBAAgB;AAAA,YACtB,WAAW,gBAAgB;AAAA,YAC3B;AAAA,YAEA,8BAAC,yBAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,QACF,IAEA,oBAAC,iBAAc,gBAAgC,OAAc;AAAA;AAAA;AAAA,EAEjE;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  }) => (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3\n          text={tooltipValue ?? ''}\n          ariaLabel={tooltipValue ?? ''}\n          applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n        >\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n    </StyledValuePillWrapper>\n  ),\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBnB,SAoBM,KApBN;AApBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,8BAA8B;AAEvD,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,gBAAgB;AAAA,YACtB,WAAW,gBAAgB;AAAA,YAC3B;AAAA,YAEA,8BAAC,yBAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH;AAAA;AAAA,QACF,IAEA,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/components/types/index.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { DropdownPill } from "./DropdownPill.js";
 import { InputPill } from "./InputPill.js";
 import { LabelPill } from "./LabelPill.js";
+import { LabelOnlyPill } from "./LabelOnlyPill.js";
 import { MenuButtonPill } from "./MenuButtonPill.js";
 import { ReadOnlyPill } from "./ReadOnlyPill.js";
 import { RemovablePill } from "./RemovablePill.js";
@@ -9,6 +10,7 @@ import { ValuePill } from "./ValuePill.js";
 export {
   DropdownPill,
   InputPill,
+  LabelOnlyPill,
   LabelPill,
   MenuButtonPill,
   ReadOnlyPill,

package/dist/esm/components/types/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DropdownPill } from './DropdownPill.js';\nexport { InputPill } from './InputPill.js';\nexport { LabelPill } from './LabelPill.js';\nexport { MenuButtonPill } from './MenuButtonPill.js';\nexport { ReadOnlyPill } from './ReadOnlyPill.js';\nexport { RemovablePill } from './RemovablePill.js';\nexport { ValuePill } from './ValuePill.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DropdownPill } from './DropdownPill.js';\nexport { InputPill } from './InputPill.js';\nexport { LabelPill } from './LabelPill.js';\nexport { LabelOnlyPill } from './LabelOnlyPill.js';\nexport { MenuButtonPill } from './MenuButtonPill.js';\nexport { ReadOnlyPill } from './ReadOnlyPill.js';\nexport { RemovablePill } from './RemovablePill.js';\nexport { ValuePill } from './ValuePill.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -6,6 +6,7 @@ const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   applyTooltipOverflowWrap: false,
   // turn on for > 25.1
   hasError: false,
@@ -15,6 +16,7 @@ const DSPillV2DefaultProps = {
   tooltipValue: "",
   iconLeft: null,
   IconLeft: null,
+  IconRight: null,
   iconRight: null,
   onRemove: () => null,
   inputPlaceholder: "",
@@ -41,7 +43,16 @@ const DSPillGroupDefaultProps = {
   width: "fit-content",
   innerRef: () => null
 };
-const pillTypes = PropTypes.oneOf(["label", "value", "input", "dropdown", "removable", "readonly", "menubutton"]);
+const pillTypes = PropTypes.oneOf([
+  "label",
+  "labelOnly",
+  "value",
+  "input",
+  "dropdown",
+  "removable",
+  "readonly",
+  "menubutton"
+]);
 const { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;
 const DSPillV2PropTypes = {
   ...globalAttributesPropTypes,
@@ -58,7 +69,11 @@ const DSPillV2PropTypes = {
     message: "Use IconLeft instead for accessibility reasons"
   }),
   IconLeft: PropTypes.node.description("A component to show int the left of a label pill").defaultValue(null),
-  iconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
+  IconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
+  iconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null).deprecated({
+    version: "4.x",
+    message: "Use IconRight instead for accessibility reasons"
+  }),
   onRemove: PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
   inputPlaceholder: PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
   onInputChange: PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
@@ -69,12 +84,16 @@ const DSPillV2PropTypes = {
   applyAriaDisabled: PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
   ).defaultValue(false),
+  readOnly: PropTypes.bool.description("Whether the Pill is in readonly state or not.").defaultValue(false),
   applyTooltipOverflowWrap: PropTypes.bool.description(
     "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"
   ).defaultValue(false),
   hasError: PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
   inputRender: PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`),
   menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
+  trailingComma: PropTypes.bool.description(
+    "Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
+  ),
   dropdownProps: PropTypes.object.description(
     "Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps"
   ).defaultValue({}).deprecated({ version: "25.3" }),

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n  export interface DefaultProps {\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    applyTooltipOverflowWrap: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    IconLeft: React.ComponentType<{ label: string }> | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n    menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface DSPillButtonDefaultPropsT {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n    applyAriaDisabled?: boolean;\n  }\n  export interface InternalButtonProps\n    extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface DefaultGroupPropsT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  applyTooltipOverflowWrap: false, // turn on for > 25.1\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  IconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node\n    .description('A component to show int the left of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconLeft instead for accessibility reasons',\n    }),\n  IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  applyTooltipOverflowWrap: PropTypes.bool\n    .description(\n      'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n    .description('Props for the menu button pill')\n    .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n  dropdownProps: PropTypes.object\n    .description(\n      'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue({})\n    .deprecated({ version: '25.3' }),\n  onDropdownClick: PropTypes.func\n    .description(\n      'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue(() => null)\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n  export interface DefaultProps {\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    applyTooltipOverflowWrap: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    IconLeft: React.ComponentType<{ label: string }> | null;\n    IconRight: React.ComponentType<{ label: string }> | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n    menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n    trailingComma?: boolean;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n  }\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface DSPillButtonDefaultPropsT {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n    applyAriaDisabled?: boolean;\n  }\n  export interface InternalButtonProps\n    extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface DefaultGroupPropsT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n  }\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  applyTooltipOverflowWrap: false, // turn on for > 25.1\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  IconLeft: null,\n  IconRight: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf([\n  'label',\n  'labelOnly',\n  'value',\n  'input',\n  'dropdown',\n  'removable',\n  'readonly',\n  'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node\n    .description('A component to show int the left of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconLeft instead for accessibility reasons',\n    }),\n  IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n  IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node\n    .description('A component to show in the right of a readonly pill')\n    .defaultValue(null)\n    .deprecated({\n      version: '4.x',\n      message: 'Use IconRight instead for accessibility reasons',\n    }),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n  applyTooltipOverflowWrap: PropTypes.bool\n    .description(\n      'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n    )\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n    .description('Props for the menu button pill')\n    .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n  trailingComma: PropTypes.bool.description(\n    'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n  ),\n  dropdownProps: PropTypes.object\n    .description(\n      'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue({})\n    .deprecated({ version: '25.3' }),\n  onDropdownClick: PropTypes.func\n    .description(\n      'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n    )\n    .defaultValue(() => null)\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-pills-v2-valid.js

@@ -14,7 +14,8 @@ const testOptionalProps = {
     },
     onActivateItem: () => {
     }
-  }
+  },
+  trailingComma: true
 };
 const testPartialDefaults = {
   innerRef: () => null,
@@ -44,6 +45,7 @@ const testCompleteDefaults = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -52,6 +54,7 @@ const testCompleteDefaults = {
   iconLeft: null,
   iconRight: null,
   IconLeft: () => null,
+  IconRight: () => null,
   onRemove: () => null,
   inputPlaceholder: "",
   onInputChange: () => null,
@@ -84,6 +87,7 @@ const testExplicitDefinition = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -102,6 +106,7 @@ const testExplicitDefinition = {
     isSkeleton: false,
     isOpened: false
   },
+  trailingComma: false,
   onDropdownClick: () => null,
   tabIndex: 0
 };
@@ -112,6 +117,7 @@ const testInferedTypeCompatibility = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -130,6 +136,7 @@ const testInferedTypeCompatibility = {
     isSkeleton: false,
     isOpened: false
   },
+  trailingComma: false,
   onDropdownClick: () => null,
   tabIndex: 0
 };
@@ -140,6 +147,7 @@ const testDefinitionAsConst = {
   innerRef: () => null,
   disabled: false,
   applyAriaDisabled: false,
+  readOnly: false,
   hasError: false,
   ariaLabel: "",
   size: "m",
@@ -158,6 +166,7 @@ const testDefinitionAsConst = {
     isSkeleton: false,
     isOpened: false
   },
+  trailingComma: false,
   onDropdownClick: () => null,
   tabIndex: 0
 };
@@ -174,6 +183,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
       innerRef: () => null,
       disabled: false,
       applyAriaDisabled: false,
+      readOnly: false,
       hasError: false,
       ariaLabel: "",
       size: "m",
@@ -191,6 +201,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
         isSkeleton: false,
         isOpened: false
       },
+      trailingComma: false,
       onDropdownClick: () => null,
       tabIndex: 0,
       children: "Button Label"

package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-pills-v2-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  type: 'value',\n  label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n  inputId: 'dsId',\n  menuButtonProps: {\n    options: [],\n    selectedItems: [],\n    onItemSelected: () => {},\n    onActivateItem: () => {},\n  },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  ariaLabel: '',\n  size: 'm',\n  tooltipValue: '',\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  inputWidth: 72,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  IconLeft: () => null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n  applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPillV2 {...testExplicitDefinition} />\n    <DSPillV2 {...testInferedTypeCompatibility} />\n    <DSPillV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPillV2\n      type=\"value\"\n      label=\"label\"\n      inputId=\"dsId\"\n      innerRef={() => null}\n      disabled={false}\n      applyAriaDisabled={false}\n      hasError={false}\n      ariaLabel=\"\"\n      size=\"m\"\n      labelTruncated\n      tooltipValue=\"\"\n      iconLeft={null}\n      iconRight={null}\n      onRemove={() => null}\n      inputPlaceholder=\"\"\n      onInputChange={() => null}\n      onInputClear={() => null}\n      inputWidth={72}\n      // inputRender={() => <input type=\"text\"></input>}\n      dropdownProps={{\n        options: [],\n        isSkeleton: false,\n        isOpened: false,\n      }}\n      onDropdownClick={() => null}\n      tabIndex={0}\n    >\n      Button Label\n    </DSPillV2>\n  </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  type: 'value',\n  label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n  inputId: 'dsId',\n  menuButtonProps: {\n    options: [],\n    selectedItems: [],\n    onItemSelected: () => {},\n    onActivateItem: () => {},\n  },\n  trailingComma: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  ariaLabel: '',\n  size: 'm',\n  tooltipValue: '',\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  inputWidth: 72,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  IconLeft: () => null,\n  IconRight: () => null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n  applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  type: 'value',\n  label: 'label',\n  inputId: 'dsId',\n  innerRef: () => null,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  inputRender: () => <input type=\"text\"></input>,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  trailingComma: false,\n  onDropdownClick: () => null,\n  tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPillV2 {...testExplicitDefinition} />\n    <DSPillV2 {...testInferedTypeCompatibility} />\n    <DSPillV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPillV2\n      type=\"value\"\n      label=\"label\"\n      inputId=\"dsId\"\n      innerRef={() => null}\n      disabled={false}\n      applyAriaDisabled={false}\n      readOnly={false}\n      hasError={false}\n      ariaLabel=\"\"\n      size=\"m\"\n      labelTruncated\n      tooltipValue=\"\"\n      iconLeft={null}\n      iconRight={null}\n      onRemove={() => null}\n      inputPlaceholder=\"\"\n      onInputChange={() => null}\n      onInputClear={() => null}\n      inputWidth={72}\n      // inputRender={() => <input type=\"text\"></input>}\n      dropdownProps={{\n        options: [],\n        isSkeleton: false,\n        isOpened: false,\n      }}\n      trailingComma={false}\n      onDropdownClick={() => null}\n      tabIndex={0}\n    >\n      Button Label\n    </DSPillV2>\n  </>\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/DSPillDefinitions.d.ts

@@ -1,3 +1,3 @@
 export declare const DSPillName = "DSPill";
-export declare const DSPillButtonName = "DSPillButton";
-export declare const DSPillGroupName = "DSPillGroup";
+export declare const DSPillButtonName = "DSPillbutton";
+export declare const DSPillGroupName = "DSPillgroup";

package/dist/types/components/styled.d.ts

@@ -7,6 +7,7 @@ export declare const borderOutside: ({ color, size, zIndex, borderRadius, }: {
 }) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
     disabled?: boolean | undefined;
     applyAriaDisabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
 }, import("@xstyled/styled-components").Theme>>;
 interface InputPillWrapperProps {
     value: string;
@@ -19,6 +20,13 @@ interface InputPillWrapperProps {
 export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
     pillSize: 'm' | 's';
     hasIcon: boolean;
+    applyAriaDisabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledLabelOnlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    pillSize: 'm' | 's';
+    hasIcon: boolean;
+    applyAriaDisabled?: boolean | undefined;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 type StyledValuePillWrapperPropsT = {
     pillSize: 'm' | 's';

package/dist/types/components/types/LabelOnlyPill.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DSPillT } from '../../react-desc-prop-types.js';
+export declare const LabelOnlyPill: React.NamedExoticComponent<DSPillT.InternalProps>;

package/dist/types/components/types/index.d.ts

@@ -1,6 +1,7 @@
 export { DropdownPill } from './DropdownPill.js';
 export { InputPill } from './InputPill.js';
 export { LabelPill } from './LabelPill.js';
+export { LabelOnlyPill } from './LabelOnlyPill.js';
 export { MenuButtonPill } from './MenuButtonPill.js';
 export { ReadOnlyPill } from './ReadOnlyPill.js';
 export { RemovablePill } from './RemovablePill.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -10,6 +10,7 @@ export declare namespace DSPillT {
         innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
         disabled: boolean;
         applyAriaDisabled: boolean;
+        readOnly: boolean;
         applyTooltipOverflowWrap: boolean;
         hasError: boolean;
         ariaLabel: string;
@@ -20,6 +21,9 @@ export declare namespace DSPillT {
         IconLeft: React.ComponentType<{
             label: string;
         }> | null;
+        IconRight: React.ComponentType<{
+            label: string;
+        }> | null;
         iconRight: JSX.Element | null;
         onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;
         inputPlaceholder: string;
@@ -34,10 +38,11 @@ export declare namespace DSPillT {
     interface OptionalProps {
         inputId?: string;
         menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;
+        trailingComma?: boolean;
     }
     interface RequiredProps {
         label: string;
-        type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';
+        type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';
     }
     interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills-v2",
-  "version": "3.51.0-next.1",
+  "version": "3.51.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills V2",
   "files": [
@@ -14,58 +14,6 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
-    },
-    "./props": {
-      "import": "./dist/esm/props.js",
-      "require": "./dist/cjs/props.js"
-    },
-    "./components/types/ValuePill": {
-      "import": "./dist/esm/components/types/ValuePill.js",
-      "require": "./dist/cjs/components/types/ValuePill.js"
-    },
-    "./components/types/RemovablePill": {
-      "import": "./dist/esm/components/types/RemovablePill.js",
-      "require": "./dist/cjs/components/types/RemovablePill.js"
-    },
-    "./components/types/ReadOnlyPill": {
-      "import": "./dist/esm/components/types/ReadOnlyPill.js",
-      "require": "./dist/cjs/components/types/ReadOnlyPill.js"
-    },
-    "./components/types/LabelPill": {
-      "import": "./dist/esm/components/types/LabelPill.js",
-      "require": "./dist/cjs/components/types/LabelPill.js"
-    },
-    "./components/types/InputPill": {
-      "import": "./dist/esm/components/types/InputPill.js",
-      "require": "./dist/cjs/components/types/InputPill.js"
-    },
-    "./components/types": {
-      "import": "./dist/esm/components/types/index.js",
-      "require": "./dist/cjs/components/types/index.js"
-    },
-    "./components/types/DropdownPill": {
-      "import": "./dist/esm/components/types/DropdownPill.js",
-      "require": "./dist/cjs/components/types/DropdownPill.js"
-    },
-    "./components/styled": {
-      "import": "./dist/esm/components/styled.js",
-      "require": "./dist/cjs/components/styled.js"
-    },
-    "./components/PillGroup": {
-      "import": "./dist/esm/components/PillGroup.js",
-      "require": "./dist/cjs/components/PillGroup.js"
-    },
-    "./components/PillButton": {
-      "import": "./dist/esm/components/PillButton.js",
-      "require": "./dist/cjs/components/PillButton.js"
-    },
-    "./components/Pill": {
-      "import": "./dist/esm/components/Pill.js",
-      "require": "./dist/cjs/components/Pill.js"
-    },
-    "./components": {
-      "import": "./dist/esm/components/index.js",
-      "require": "./dist/cjs/components/index.js"
     }
   },
   "sideEffects": [
@@ -77,8 +25,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -89,23 +37,23 @@
   },
   "dependencies": {
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.51.0-next.1",
-    "@elliemae/ds-dropdownmenu-v2": "3.51.0-next.1",
-    "@elliemae/ds-form": "3.51.0-next.1",
-    "@elliemae/ds-grid": "3.51.0-next.1",
-    "@elliemae/ds-icons": "3.51.0-next.1",
-    "@elliemae/ds-menu-button": "3.51.0-next.1",
-    "@elliemae/ds-props-helpers": "3.51.0-next.1",
-    "@elliemae/ds-system": "3.51.0-next.1",
-    "@elliemae/ds-tooltip-v3": "3.51.0-next.1",
-    "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.1",
-    "@elliemae/ds-typescript-helpers": "3.51.0-next.1"
+    "@elliemae/ds-button-v2": "3.51.0-next.12",
+    "@elliemae/ds-dropdownmenu-v2": "3.51.0-next.12",
+    "@elliemae/ds-form": "3.51.0-next.12",
+    "@elliemae/ds-grid": "3.51.0-next.12",
+    "@elliemae/ds-menu-button": "3.51.0-next.12",
+    "@elliemae/ds-props-helpers": "3.51.0-next.12",
+    "@elliemae/ds-icons": "3.51.0-next.12",
+    "@elliemae/ds-system": "3.51.0-next.12",
+    "@elliemae/ds-tooltip-v3": "3.51.0-next.12",
+    "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.12",
+    "@elliemae/ds-typescript-helpers": "3.51.0-next.12"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.50",
+    "@elliemae/pui-cli": "9.0.0-next.55",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.51.0-next.1"
+    "@elliemae/ds-monorepo-devops": "3.51.0-next.12"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",