@elliemae/ds-pills-v2 3.25.0-next.2 → 3.25.0-next.3

package/dist/cjs/components/types/DropdownPill.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(DropdownPill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_ds_dropdownmenu_v2 = require("@elliemae/ds-dropdownmenu-v2");
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
@@ -60,7 +60,7 @@ const DropdownPill = import_react.default.memo(
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_dropdownmenu.DSDropdownMenuV2,
+            import_ds_dropdownmenu_v2.DSDropdownMenuV2,
             {
               placementOrderPreference: [
                 "bottom-start",

package/dist/cjs/components/types/DropdownPill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        pillSize={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={mergeRefs(chevronRef, innerRef as AnyRef<HTMLButtonElement>)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBkC;AAjBzD,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAC1C,0BAA0B;AAC1B,wBAA6B;AAGtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,iBAAe,iBAAM;AAAA,UACtB;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS;AAAU,6BAAW,SAAS,MAAM;AAClE,oBAAI,cAAc;AAAgB,gCAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,cAAU,+BAAU,YAAY,QAAqC;AAAA,kBACrE,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        pillSize={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={mergeRefs(chevronRef, innerRef as AnyRef<HTMLButtonElement>)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBkC;AAjBzD,mBAAuC;AACvC,gCAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAC1C,0BAA0B;AAC1B,wBAA6B;AAGtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAiC,IAAI;AAExD,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,4CAAC,+DAA2B,OAAO,UAAU,IAC9F,aAAAA,QAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,iBAAe,iBAAM;AAAA,UACtB;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS;AAAU,6BAAW,SAAS,MAAM;AAClE,oBAAI,cAAc;AAAgB,gCAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,cAAU,+BAAU,YAAY,QAAqC;AAAA,kBACrE,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport { DSInput } from '@elliemae/ds-form';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    innerRef: AnyRef<HTMLElement>;\n    disabled: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n  }\n  export interface InternalButtonProps extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: Omit<DSPillT.ButtonProps, 'children'> = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n  onDropdownClick: PropTypes.func\n    .description('Callback when dropdown button is clicked or pressed')\n    .defaultValue(() => null),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    innerRef: AnyRef<HTMLElement>;\n    disabled: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n  }\n  export interface InternalButtonProps extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: Omit<DSPillT.ButtonProps, 'children'> = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n  onDropdownClick: PropTypes.func\n    .description('Callback when dropdown button is clicked or pressed')\n    .defaultValue(() => null),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useMemo, useRef } from "react";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
+import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
 import { uid } from "uid";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/DropdownPill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        pillSize={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={mergeRefs(chevronRef, innerRef as AnyRef<HTMLButtonElement>)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled.js';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DSPillButton } from '../PillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }: { children: React.ReactNode }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        pillSize={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if ('code' in e && e.code === 'Escape') chevronRef.current?.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={mergeRefs(chevronRef, innerRef as AnyRef<HTMLButtonElement>)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkBkC,cAInD,YAJmD;AAjBzD,OAAOA,UAAS,SAAS,cAAc;AACvC,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAGtB,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,aAAa,OAAiC,IAAI;AAExD,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAqC,oBAAC,8BAA2B,OAAO,UAAU,IAC9FA,OAAM;AAEV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,8BAAC,iBAAe,iBAAM;AAAA,UACtB;AAAA,YAAC;AAAA;AAAA,cACC,0BAA0B;AAAA,gBACxB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cACJ,gBAAgB,CAAC,MAAM;AACrB,oBAAI,UAAU,KAAK,EAAE,SAAS;AAAU,6BAAW,SAAS,MAAM;AAClE,oBAAI,cAAc;AAAgB,gCAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,UAAU,UAAU,YAAY,QAAqC;AAAA,kBACrE,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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 @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport { DSInput } from '@elliemae/ds-form';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    innerRef: AnyRef<HTMLElement>;\n    disabled: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n  }\n  export interface InternalButtonProps extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: Omit<DSPillT.ButtonProps, 'children'> = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n  onDropdownClick: PropTypes.func\n    .description('Callback when dropdown button is clicked or pressed')\n    .defaultValue(() => null),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport namespace DSPillT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    innerRef: AnyRef<HTMLElement>;\n    disabled: boolean;\n    hasError: boolean;\n    ariaLabel: string;\n    size: 'm' | 's';\n    labelTruncated: boolean;\n    tooltipValue: string;\n    iconLeft: JSX.Element | null;\n    iconRight: JSX.Element | null;\n    onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputPlaceholder: string;\n    onInputChange: (e: React.ChangeEvent, newValue: string) => void;\n    onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    inputWidth: number;\n    inputRender: React.ComponentType<any>;\n    dropdownProps: DSDropdownMenuT.Props;\n    onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    tabIndex: WCAGTabIndex;\n  }\n  export interface OptionalProps {\n    inputId?: string;\n  }\n  export interface RequiredProps {\n    label: string;\n    type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLDivElement>;\n\n  export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType'> {\n    type?: 'left' | 'right' | 'only';\n    width?: string;\n    height?: string;\n  }\n  export interface InternalButtonProps extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType'> {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface GroupProps extends GlobalAttributesT {\n    width?: string;\n    innerRef?: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n  export interface InternalGroupProps extends GlobalAttributesT {\n    width: string;\n    innerRef: AnyRef<HTMLDivElement>;\n    children: React.ReactNode;\n  }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n  innerRef: () => null,\n  disabled: false,\n  hasError: false,\n  ariaLabel: '',\n  size: 'm',\n  labelTruncated: true,\n  tooltipValue: '',\n  iconLeft: null,\n  iconRight: null,\n  onRemove: () => null,\n  inputPlaceholder: '',\n  onInputChange: () => null,\n  onInputClear: () => null,\n  inputWidth: 72,\n  // TODO: remove DSInput in favor of V2\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  inputRender: DSInput,\n  dropdownProps: {\n    options: [],\n    isSkeleton: false,\n    isOpened: false,\n  },\n  onDropdownClick: () => null,\n  tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: Omit<DSPillT.ButtonProps, 'children'> = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: Omit<DSPillT.GroupProps, 'children'> = {\n  width: 'fit-content',\n  innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Label to show in the pill').isRequired,\n  type: pillTypes.description('The type of pill that you want to render').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n    .defaultValue(() => null),\n  size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n  ariaLabel: PropTypes.string\n    .description('Aria label for the pill. If not provided we will use the label')\n    .defaultValue(''),\n  labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n  tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n  iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n  iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n  onRemove: PropTypes.func\n    .description('Callback triggered when removing a pill with the close icon')\n    .defaultValue(() => null),\n  inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n  onInputChange: PropTypes.func\n    .description('Callback triggered when user provides input to the input pill')\n    .defaultValue(() => null),\n  onInputClear: PropTypes.func\n    .description('Callback triggered when the user clears an input pill')\n    .defaultValue(() => null),\n  inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n  dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n  onDropdownClick: PropTypes.func\n    .description('Callback when dropdown button is clicked or pressed')\n    .defaultValue(() => null),\n  disabled: PropTypes.bool\n    .description('Whether the pill should be disabled. Only for value and removable pill')\n    .defaultValue(false),\n  hasError: PropTypes.bool\n    .description('Whether the pill should be in an error state. Only for input pill')\n    .defaultValue(false),\n  inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n  ...globalAttributesPropTypes,\n  width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n    .description('Reference to the pill group wrapper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as WeakValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as WeakValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as WeakValidationMap<DSPillT.GroupProps>;\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -30,8 +30,8 @@ export declare const StyledRemovablePillWrapper: import("styled-components").Sty
 } & 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 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>;
 export declare const StyledSpanWithTooltip: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
-export declare const StyledPillButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, {
+export declare const StyledPillButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, {
     width: string;
     height: string;
-} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>>, never>;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
 export {};

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

@@ -1,5 +1,5 @@
 import type { DSButtonT } from '@elliemae/ds-button-v2';
-import type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';
+import type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';
 import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
 import type { WeakValidationMap } from 'react';
 export declare namespace DSPillT {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills-v2",
-  "version": "3.25.0-next.2",
+  "version": "3.25.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills V2",
   "files": [
@@ -88,21 +88,21 @@
   },
   "dependencies": {
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.25.0-next.2",
-    "@elliemae/ds-dropdownmenu": "3.25.0-next.2",
-    "@elliemae/ds-form": "3.25.0-next.2",
-    "@elliemae/ds-grid": "3.25.0-next.2",
-    "@elliemae/ds-icons": "3.25.0-next.2",
-    "@elliemae/ds-system": "3.25.0-next.2",
-    "@elliemae/ds-props-helpers": "3.25.0-next.2",
-    "@elliemae/ds-tooltip": "3.25.0-next.2",
-    "@elliemae/ds-utilities": "3.25.0-next.2",
-    "@elliemae/ds-truncated-tooltip-text": "3.25.0-next.2"
+    "@elliemae/ds-button-v2": "3.25.0-next.3",
+    "@elliemae/ds-form": "3.25.0-next.3",
+    "@elliemae/ds-props-helpers": "3.25.0-next.3",
+    "@elliemae/ds-system": "3.25.0-next.3",
+    "@elliemae/ds-dropdownmenu-v2": "3.25.0-next.3",
+    "@elliemae/ds-tooltip": "3.25.0-next.3",
+    "@elliemae/ds-truncated-tooltip-text": "3.25.0-next.3",
+    "@elliemae/ds-utilities": "3.25.0-next.3",
+    "@elliemae/ds-grid": "3.25.0-next.3",
+    "@elliemae/ds-icons": "3.25.0-next.3"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.25.0-next.2"
+    "@elliemae/ds-monorepo-devops": "3.25.0-next.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",