@elliemae/ds-pills-v2 3.62.1 → 3.70.0-alpha.9

package/dist/esm/components/TextComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/TextComponent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React from 'react';\nimport type { DSPillT } from '../react-desc-prop-types.js';\nimport { StyledTextWrapper } from './styled.js';\n\nexport const TextComponent = React.memo<{\n  labelTruncated: DSPillT.InternalProps['labelTruncated'];\n  label: DSPillT.InternalProps['label'];\n  pillSize: DSPillT.InternalProps['size'];\n}>(({ labelTruncated, label, pillSize }) => (\n  <StyledTextWrapper pillSize={pillSize}>\n    {labelTruncated ? (\n      <SimpleTruncatedTooltipText containerProps={{ style: { display: 'block' } }} value={label} />\n    ) : (\n      label\n    )}\n  </StyledTextWrapper>\n));\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYjB;AAZN,SAAS,kCAAkC;AAC3C,OAAOA,YAAW;AAElB,SAAS,yBAAyB;AAE3B,MAAM,gBAAgBA,OAAM,KAIhC,CAAC,EAAE,gBAAgB,OAAO,SAAS,MACpC,oBAAC,qBAAkB,UAChB,2BACC,oBAAC,8BAA2B,gBAAgB,EAAE,OAAO,EAAE,SAAS,QAAQ,EAAE,GAAG,OAAO,OAAO,IAE3F,OAEJ,CACD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\nimport { StyledTextWrapper } from './styled.js';\n\nexport const TextComponent = React.memo<{\n  labelTruncated: DSPillT.InternalProps['labelTruncated'];\n  disableTruncationTooltip: DSPillT.InternalProps['disableTruncationTooltip'];\n  label: DSPillT.InternalProps['label'];\n  pillSize: DSPillT.InternalProps['size'];\n  getOwnerProps?: () => object;\n}>(({ labelTruncated, disableTruncationTooltip, label, pillSize, getOwnerProps }) => (\n  <StyledTextWrapper pillSize={pillSize} variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n    {labelTruncated ? <TruncatedTooltipText value={label} disableTooltip={disableTruncationTooltip} /> : label}\n  </StyledTextWrapper>\n));\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACaD;AAbtB,OAAOA,YAAW;AAClB,SAAS,4BAA4B;AAErC,SAAS,yBAAyB;AAE3B,MAAM,gBAAgBA,OAAM,KAMhC,CAAC,EAAE,gBAAgB,0BAA0B,OAAO,UAAU,cAAc,MAC7E,oBAAC,qBAAkB,UAAoB,SAAQ,MAAK,WAAU,QAAO,eAClE,2BAAiB,oBAAC,wBAAqB,OAAO,OAAO,gBAAgB,0BAA0B,IAAK,OACvG,CACD;",
   "names": ["React"]
 }

package/dist/esm/components/styled.js

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { DSInputText } from "@elliemae/ds-form-input-text";
 import { Grid } from "@elliemae/ds-grid";
 import { DSMenuButton } from "@elliemae/ds-menu-button";
 import { css, styled } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
 import { PILL_V2_SLOTS, DSPillV2Name } from "../constants/index.js";
 import { PILL_BUTTON_SLOTS } from "../parts/DSPillButton/constants/index.js";
 import { PILL_GROUP_SLOTS } from "../parts/DSPillGroup/constants/index.js";
@@ -28,9 +30,14 @@ const borderOutside = ({
     z-index: ${zIndex || ""};
   }
 `;
-const fontSize13Base16 = 13 / 16;
-const lineHeight17Base13 = 17 / 13;
-const lineHeight17Base16 = 17 / 16;
+const b2FontMirror = css`
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+    line-height: 1.2307692308rem;
+  }
+`;
 const commonPillWrapperCss = css`
   position: relative;
 
@@ -47,15 +54,9 @@ const commonPillWrapperCss = css`
   height: fit-content;
   place-items: start normal;
 
-  font-size: 1rem;
-  font-size: ${fontSize13Base16}rem;
-  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-    font-size: 1rem;
-  }
-  line-height: ${lineHeight17Base16}rem;
-  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-    line-height: ${lineHeight17Base13}rem;
-  }
+  /** PUI typography: the pill label owns b2 via styled(DSTypography); font-size/line-height no
+   *  longer live here. Only the InputPill wrapper re-adds b2 (see b2FontMirror) for its
+   *  consumer-rendered input. color + font-weight stay here for inheritance into the label. */
   user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : "auto"};
   color: ${({ theme }) => theme.colors.brand["800"]};
   word-break: break-word;
@@ -92,6 +93,9 @@ const StyledInputPillWrapper = styled(Grid, {
   slot: PILL_V2_SLOTS.WRAPPER
 })`
   ${commonPillWrapperCss}
+  /** The only place the b2 mirror is still needed: the input is a consumer render-prop, not a
+   *  DSTypography component. All other pill text nodes own b2 via styled(DSTypography). */
+  ${b2FontMirror}
 
   background: ${(props) => props.theme.colors.neutral["000"]};
   padding: 0;
@@ -109,22 +113,55 @@ const StyledInputPillWrapper = styled(Grid, {
     ${(props) => props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : ""}
   }
 
-  & .em-ds-input {
+  /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot "root"). The pill owns the
+   *  border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */
+  & .DSInputtext-root {
+    border: none !important;
+    /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only
+     *  the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */
+    outline: none !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    width: 100%;
+    /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),
+     *  keeping the typed value vertically centered when the clear button grows the row. */
+    height: 100%;
+  }
+
+  /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy
+   *  visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.
+   *  DSInputText adds its own padding, themed font-family and an italic placeholder — neutralize those
+   *  so the typed value and placeholder render identically to the previous DSInput. */
+  & input {
     outline: none !important;
     border: none !important;
     box-shadow: none !important;
     border-radius: 0 !important;
     height: 100%;
     background: transparent;
-    width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
+    width: ${(props) => `${props.inputWidth}px`};
     padding: 0;
     margin: 0 0 0 8px;
-  }
-
-  & .em-ds-input__tooltip-ref {
-    height: 100%;
+    /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert
+     *  DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput
+     *  rendered with, so the typed value and placeholder look identical. */
+    line-height: inherit;
+    font-family: revert;
+    color: revert;
+
+    ::placeholder {
+      color: revert;
+      font-style: revert;
+      font-weight: revert;
+    }
   }
 `;
+const StyledDSInputText = styled(DSInputText, {
+  name: DSPillV2Name,
+  slot: PILL_V2_SLOTS.PILL_INPUT
+})``;
 const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })`
   ${commonPillWrapperCss}
   font-weight: ${(props) => props.theme.fontWeights.semibold};
@@ -218,8 +255,10 @@ const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOT
     }
   }
 `;
-const StyledSpanWithTooltip = styled.span`
+const StyledSpanWithTooltip = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })`
   ${commonSpanStyles}
+  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */
+  font-weight: inherit;
   outline: none;
   :focus {
     ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}
@@ -307,11 +346,14 @@ const StyledAgnosticPillRegion = styled.div`
   display: flex;
   padding: 2px;
 `;
-const StyledTextWrapper = styled.span`
+const StyledTextWrapper = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })`
   ${commonSpanStyles}
+  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */
+  font-weight: inherit;
 `;
 export {
   StyledAgnosticPillRegion,
+  StyledDSInputText,
   StyledDropdownPillWrapper,
   StyledInputPillWrapper,
   StyledLabelOnlyPillWrapper,

package/dist/esm/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n  color,\n  size = 1,\n  zIndex = 0,\n  borderRadius = '12px',\n}: {\n  color: string;\n  size?: number;\n  zIndex?: number;\n  borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: -${size}px;\n    left: -${size}px;\n    right: -${size}px;\n    bottom: -${size}px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex || ''};\n  }\n`;\n\nconst fontSize13Base16 = 13 / 16;\nconst lineHeight17Base13 = 17 / 13;\nconst lineHeight17Base16 = 17 / 16;\nconst commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme }) => theme.colors.brand[250]};\n\n  outline: none;\n\n  padding: 0px 12px 0 12px;\n\n  border-radius: 12px;\n\n  height: fit-content;\n  place-items: start normal;\n\n  font-size: 1rem;\n  font-size: ${fontSize13Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n  }\n  line-height: ${lineHeight17Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    line-height: ${lineHeight17Base13}rem;\n  }\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  color: ${({ theme }) => theme.colors.brand['800']};\n  word-break: break-word;\n`;\n\nconst commonSpanStyles = css<{ pillSize: 'm' | 's' }>`\n  display: grid;\n  padding: ${(props) => (props?.pillSize === 'm' ? '4px 0' : '1px 0')};\n  align-self: center;\n`;\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  hasIconRight: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: ${(props) => (props.hasIconRight ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n    return borderOutside({ color: theme.colors.brand[500] });\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIconRight: boolean;\n  hasIconLeft: boolean;\n  disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  hasIcon: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: 0px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n  width: ${({ width }) => width};\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: 8px;\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span<{ pillSize: 'm' | 's' }>`\n  ${commonSpanStyles}\n  outline: none;\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV3, {\n  name: DSPillV2Name,\n  slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n  preserveLegacyDataTestId: true,\n})<{\n  width: string | number;\n  height: string | number;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width as string, 10) / 13}rem;\n      height: ${parseInt(height as string, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width as string, 10) / 16}rem;\n      height: ${parseInt(height as string, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? 'transparent' : theme.colors.brand[200]};\n  }\n\n  & svg {\n    fill: ${({ disabled, applyAriaDisabled, theme }) => {\n      if (disabled) return '#5C6574';\n      if (applyAriaDisabled) return theme.colors.neutral[500];\n      return theme.colors.brand[700];\n    }};\n  }\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n  width: string;\n  height: string;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width, 10) / 13}rem;\n    height: ${parseInt(height, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width, 10) / 16}rem;\n      height: ${parseInt(height, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n\nexport const StyledAgnosticPillRegion = styled.div`\n  display: flex;\n  padding: 2px;\n`;\n\nexport const StyledTextWrapper = styled.span<{ pillSize: 'm' | 's' }>`\n  ${commonSpanStyles}\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n  color,\n  size = 1,\n  zIndex = 0,\n  borderRadius = '12px',\n}: {\n  color: string;\n  size?: number;\n  zIndex?: number;\n  borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: -${size}px;\n    left: -${size}px;\n    right: -${size}px;\n    bottom: -${size}px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex || ''};\n  }\n`;\n\n/**\n * b2 typography mirrored as raw CSS \u2014 kept ONLY for the InputPill, whose input is a consumer\n * render-prop (`inputRender`) and cannot be a DSTypography component. Every other pill text node\n * renders via `styled(DSTypography)` variant=\"b2\". Keep in sync with ds-typography b2 (font-size\n * 13px, line-height 16px at both the mobile 16px and desktop 13px roots). End-state: consume an\n * exported ds-typography b2 css mixin instead of mirroring.\n */\nconst b2FontMirror = css`\n  font-size: 0.8125rem;\n  line-height: 1rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n    line-height: 1.2307692308rem;\n  }\n`;\nconst commonPillWrapperCss = css<{\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${({ theme }) => theme.colors.brand[250]};\n\n  outline: none;\n\n  padding: 0px 12px 0 12px;\n\n  border-radius: 12px;\n\n  height: fit-content;\n  place-items: start normal;\n\n  /** PUI typography: the pill label owns b2 via styled(DSTypography); font-size/line-height no\n   *  longer live here. Only the InputPill wrapper re-adds b2 (see b2FontMirror) for its\n   *  consumer-rendered input. color + font-weight stay here for inheritance into the label. */\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n  color: ${({ theme }) => theme.colors.brand['800']};\n  word-break: break-word;\n`;\n\nconst commonSpanStyles = css<{ pillSize: 'm' | 's' }>`\n  display: grid;\n  padding: ${(props) => (props?.pillSize === 'm' ? '4px 0' : '1px 0')};\n  align-self: center;\n`;\n\ninterface InputPillWrapperProps {\n  value: string;\n  inputWidth: number;\n  inputHasFocus: boolean;\n  hasError: boolean;\n  pillSize: 'm' | 's';\n  disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  applyAriaDisabled?: boolean;\n}>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIcon: boolean;\n  hasIconRight: boolean;\n  applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: ${(props) => (props.hasIconRight ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n  ${commonPillWrapperCss}\n  /** The only place the b2 mirror is still needed: the input is a consumer render-prop, not a\n   *  DSTypography component. All other pill text nodes own b2 via styled(DSTypography). */\n  ${b2FontMirror}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ theme, hasError }) => {\n    if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n    return borderOutside({ color: theme.colors.brand[500] });\n  }}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n  }\n\n  /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot \"root\"). The pill owns the\n   *  border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */\n  & .DSInputtext-root {\n    border: none !important;\n    /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only\n     *  the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */\n    outline: none !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    min-height: 0 !important;\n    padding: 0 !important;\n    width: 100%;\n    /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),\n     *  keeping the typed value vertically centered when the clear button grows the row. */\n    height: 100%;\n  }\n\n  /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy\n   *  visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.\n   *  DSInputText adds its own padding, themed font-family and an italic placeholder \u2014 neutralize those\n   *  so the typed value and placeholder render identically to the previous DSInput. */\n  & input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n    /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert\n     *  DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput\n     *  rendered with, so the typed value and placeholder look identical. */\n    line-height: inherit;\n    font-family: revert;\n    color: revert;\n\n    ::placeholder {\n      color: revert;\n      font-style: revert;\n      font-weight: revert;\n    }\n  }\n`;\n\n// Only wraps the default input (no consumer `inputRender`) \u2014 that's the one case where the target is\n// a known, stable component and `styled(Component, {name, slot})` can apply, exposing `dsPillInput`.\nexport const StyledDSInputText = styled(DSInputText, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.PILL_INPUT,\n})``;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  hasIconRight: boolean;\n  hasIconLeft: boolean;\n  disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n  pillSize: 'm' | 's';\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  hasIcon: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n  name: DSPillV2Name,\n  slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n  padding-right: 0px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n  width: ${({ width }) => width};\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: 8px;\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonSpanStyles}\n  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */\n  font-weight: inherit;\n  outline: none;\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV3, {\n  name: DSPillV2Name,\n  slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n  preserveLegacyDataTestId: true,\n})<{\n  width: string | number;\n  height: string | number;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width as string, 10) / 13}rem;\n      height: ${parseInt(height as string, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width as string, 10) / 16}rem;\n      height: ${parseInt(height as string, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? 'transparent' : theme.colors.brand[200]};\n  }\n\n  & svg {\n    fill: ${({ disabled, applyAriaDisabled, theme }) => {\n      if (disabled) return '#5C6574';\n      if (applyAriaDisabled) return theme.colors.neutral[500];\n      return theme.colors.brand[700];\n    }};\n  }\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n  width: string;\n  height: string;\n}>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  ${({ width, height, theme }) => {\n    if (String(width).includes('px') && String(height).includes('px'))\n      return `\n      width: ${parseInt(width, 10) / 13}rem;\n    height: ${parseInt(height, 10) / 13}rem;\n\n    @media (max-width: ${theme.breakpoints?.small}) {\n      width: ${parseInt(width, 10) / 16}rem;\n      height: ${parseInt(height, 10) / 16}rem;\n    }`;\n\n    return `\n    width: ${width};\n    height: ${height};\n    `;\n  }}\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n  }\n\n  cursor: pointer;\n`;\n\nexport const StyledAgnosticPillRegion = styled.div`\n  display: flex;\n  padding: 2px;\n`;\n\nexport const StyledTextWrapper = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })<{\n  pillSize: 'm' | 's';\n}>`\n  ${commonSpanStyles}\n  /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */\n  font-weight: inherit;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,65 +3,67 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
 import { mergeRefs } from "@elliemae/ds-system";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2, { useMemo, useRef } from "react";
 import { uid } from "uid";
 import { DSPillButton } from "../../parts/DSPillButton/DSPillButton.js";
 import { TextComponent } from "../TextComponent.js";
 import { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from "../styled.js";
 import { PILL_V2_DATA_TESTID } from "../../constants/index.js";
-const DropdownPill = React2.memo(
-  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
-    const chevronRef = useRef(null);
-    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
-    return /* @__PURE__ */ jsxs(
-      StyledDropdownPillWrapper,
-      {
-        pillSize: size,
-        id: pillUid,
-        className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
-        cols: ["auto", "minmax(24px, auto)"],
-        gutter: "2px",
-        alignItems: "center",
-        justifyItems: "center",
-        children: [
-          /* @__PURE__ */ jsx(TextComponent, { pillSize: size, labelTruncated, label }),
-          /* @__PURE__ */ jsx(
-            DSDropdownMenuV2,
-            {
-              placementOrderPreference: [
-                "bottom-start",
-                "bottom",
-                "bottom-end",
-                "right-end",
-                "top-start",
-                "top",
-                "top-end"
-              ],
-              ...dropdownProps,
-              onClickOutside: (e) => {
-                if ("code" in e && e.code === "Escape") chevronRef.current?.focus();
-                if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
-              },
-              wrapperStyles: { w: "100%", h: "100%" },
-              children: /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: /* @__PURE__ */ jsx(
-                DSPillButton,
-                {
-                  className: "ds-pill-focus-point",
-                  "data-testid": PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON,
-                  innerRef: mergeRefs(chevronRef, innerRef),
-                  "aria-label": ariaLabel || label,
-                  type: "right",
-                  onClick: onDropdownClick,
-                  children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "800"], width: 20, height: 20 })
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const DropdownPill = React2.memo((props) => {
+  const { label, size, labelTruncated, disableTruncationTooltip, dropdownProps, innerRef, ariaLabel, onDropdownClick } = props;
+  const ownerProps = useOwnerProps(props);
+  const chevronRef = useRef(null);
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  return /* @__PURE__ */ jsxs(
+    StyledDropdownPillWrapper,
+    {
+      pillSize: size,
+      id: pillUid,
+      className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
+      cols: ["auto", "minmax(24px, auto)"],
+      gutter: "2px",
+      alignItems: "center",
+      justifyItems: "center",
+      children: [
+        /* @__PURE__ */ jsx(
+          TextComponent,
+          {
+            pillSize: size,
+            getOwnerProps: ownerProps.getOwnerProps,
+            labelTruncated,
+            disableTruncationTooltip,
+            label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DSDropdownMenuV2,
+          {
+            placementOrderPreference: ["bottom-start", "bottom", "bottom-end", "right-end", "top-start", "top", "top-end"],
+            ...dropdownProps,
+            onClickOutside: (e) => {
+              if ("code" in e && e.code === "Escape") chevronRef.current?.focus();
+              if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
+            },
+            wrapperStyles: { w: "100%", h: "100%" },
+            children: /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: /* @__PURE__ */ jsx(
+              DSPillButton,
+              {
+                className: "ds-pill-focus-point",
+                "data-testid": PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON,
+                innerRef: mergeRefs(chevronRef, innerRef),
+                "aria-label": ariaLabel || label,
+                type: "right",
+                onClick: onDropdownClick,
+                children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "800"], width: 20, height: 20 })
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+});
 export {
   DropdownPill
 };

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 { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.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    return (\n      <StyledDropdownPillWrapper\n        pillSize={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        cols={['auto', 'minmax(24px, auto)']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent pillSize={size} labelTruncated={labelTruncated} label={label} />\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          <StyledAgnosticPillRegion>\n            <DSPillButton\n              className=\"ds-pill-focus-point\"\n              data-testid={PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON}\n              innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.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          </StyledAgnosticPillRegion>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBjB,SASE,KATF;AAnBN,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAE1B,OAAOA,UAAS,SAAS,cAAc;AACvC,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,iCAAiC;AACpE,SAAS,2BAA2B;AAE7B,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,CAAC,IAAI,CAAC,CAAC;AAEpD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,QACnC,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,8BAAC,iBAAc,UAAU,MAAM,gBAAgC,OAAc;AAAA,UAC7E;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,SAAU,YAAW,SAAS,MAAM;AAClE,oBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,cAClE;AAAA,cACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,cAEtC,8BAAC,4BACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,eAAa,oBAAoB;AAAA,kBACjC,UAAU,UAAU,YAAY,QAAwD;AAAA,kBACxF,cAAY,aAAa;AAAA,kBACzB,MAAK;AAAA,kBACL,SAAS;AAAA,kBAET,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC5E,GACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo, useRef } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledAgnosticPillRegion, StyledDropdownPillWrapper } from '../styled.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const DropdownPill = React.memo<DSPillT.InternalProps>((props) => {\n  const { label, size, labelTruncated, disableTruncationTooltip, dropdownProps, innerRef, ariaLabel, onDropdownClick } =\n    props;\n  const ownerProps = useOwnerProps(props);\n  const chevronRef = useRef<HTMLButtonElement | null>(null);\n\n  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n  return (\n    <StyledDropdownPillWrapper\n      pillSize={size}\n      id={pillUid}\n      className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n      cols={['auto', 'minmax(24px, auto)']}\n      gutter=\"2px\"\n      alignItems=\"center\"\n      justifyItems=\"center\"\n    >\n      <TextComponent\n        pillSize={size}\n        getOwnerProps={ownerProps.getOwnerProps}\n        labelTruncated={labelTruncated}\n        disableTruncationTooltip={disableTruncationTooltip}\n        label={label}\n      />\n      <DSDropdownMenuV2\n        placementOrderPreference={['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']}\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        <StyledAgnosticPillRegion>\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid={PILL_V2_DATA_TESTID.PILL_DROPDOWN_CHEVRON}\n            innerRef={mergeRefs(chevronRef, innerRef as TypescriptHelpersT.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        </StyledAgnosticPillRegion>\n      </DSDropdownMenuV2>\n    </StyledDropdownPillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SASE,KATF;AAtBJ,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,OAAOA,UAAS,SAAS,cAAc;AACvC,SAAS,WAAW;AAEpB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,iCAAiC;AACpE,SAAS,2BAA2B;AAE7B,MAAM,eAAeA,OAAM,KAA4B,CAAC,UAAU;AACvE,QAAM,EAAE,OAAO,MAAM,gBAAgB,0BAA0B,eAAe,UAAU,WAAW,gBAAgB,IACjH;AACF,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,aAAa,OAAiC,IAAI;AAExD,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,MAAM,CAAC,QAAQ,oBAAoB;AAAA,MACnC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAe,WAAW;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,0BAA0B,CAAC,gBAAgB,UAAU,cAAc,aAAa,aAAa,OAAO,SAAS;AAAA,YAC5G,GAAG;AAAA,YACJ,gBAAgB,CAAC,MAAM;AACrB,kBAAI,UAAU,KAAK,EAAE,SAAS,SAAU,YAAW,SAAS,MAAM;AAClE,kBAAI,cAAc,eAAgB,eAAc,eAAe,CAAC;AAAA,YAClE;AAAA,YACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,YAEtC,8BAAC,4BACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAa,oBAAoB;AAAA,gBACjC,UAAU,UAAU,YAAY,QAAwD;AAAA,gBACxF,cAAY,aAAa;AAAA,gBACzB,MAAK;AAAA,gBACL,SAAS;AAAA,gBAET,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YAC5E,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useMemo, useRef, useState } from "react";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
 import { CloseXsmall } from "@elliemae/ds-icons";
-import { StyledAgnosticPillRegion, StyledInputPillWrapper } from "../styled.js";
+import { StyledAgnosticPillRegion, StyledDSInputText, StyledInputPillWrapper } from "../styled.js";
 import { DSPillButton } from "../../parts/DSPillButton/DSPillButton.js";
 import { PILL_V2_DATA_TESTID } from "../../constants/index.js";
-const InputPill = React2.memo(
-  ({
+const InputPill = React2.memo((props) => {
+  const {
     label,
     size,
     inputPlaceholder,
@@ -18,66 +19,95 @@ const InputPill = React2.memo(
     innerRef,
     hasError,
     inputId
-  }) => {
-    const ref = useRef(null);
-    const InputComponent = useMemo(() => inputRender, [inputRender]);
-    const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);
-    const onCloseIconClick = useCallback(
-      (e) => {
-        if ("code" in e && ["Enter", "Space"].includes(e.code) || !("code" in e)) {
-          e.preventDefault();
-          onInputClear?.(e);
-          ref.current?.focus();
-        }
-      },
-      [onInputClear]
-    );
-    const [inputHasFocus, setInputHasFocus] = useState(false);
-    return /* @__PURE__ */ jsxs(
-      StyledInputPillWrapper,
-      {
-        pillSize: size,
-        className: "ds-pill-wrapper",
-        cols: label === "" ? ["auto"] : ["auto", "24px"],
-        inputWidth,
-        value: label ?? "",
-        inputHasFocus,
-        hasError,
-        children: [
-          /* @__PURE__ */ jsx(
-            InputComponent,
-            {
-              id: pillUid,
-              className: "ds-pill-focus-point",
-              "data-testid": PILL_V2_DATA_TESTID.PILL_INPUT,
-              innerRef: (_ref) => {
-                ref.current = _ref;
-              },
-              value: label,
-              onChange: onInputChange,
-              placeholder: inputPlaceholder,
-              onFocus: () => setInputHasFocus(true),
-              onBlur: () => setInputHasFocus(false),
-              disableTooltip: false
-            }
-          ),
-          label !== "" && /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: /* @__PURE__ */ jsx(
-            DSPillButton,
-            {
-              id: pillUid,
-              "data-testid": PILL_V2_DATA_TESTID.PILL_CLEAR_ICON,
-              innerRef,
-              onClick: onCloseIconClick,
-              "aria-label": "Clear input",
-              type: "right",
-              children: /* @__PURE__ */ jsx(CloseXsmall, { size: "s", color: ["brand-primary", "700"] })
-            }
-          ) })
-        ]
+  } = props;
+  const ref = useRef(null);
+  const ownerProps = useOwnerProps(props);
+  const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);
+  const onCloseIconClick = useCallback(
+    (e) => {
+      if ("code" in e && ["Enter", "Space"].includes(e.code) || !("code" in e)) {
+        e.preventDefault();
+        onInputClear?.(e);
+        ref.current?.focus();
       }
-    );
-  }
-);
+    },
+    [onInputClear]
+  );
+  const [inputHasFocus, setInputHasFocus] = useState(false);
+  const handleValueChange = useCallback(
+    (newValue, e) => {
+      onInputChange?.(e, newValue);
+    },
+    [onInputChange]
+  );
+  const InputComponent = inputRender;
+  return /* @__PURE__ */ jsxs(
+    StyledInputPillWrapper,
+    {
+      pillSize: size,
+      className: "ds-pill-wrapper",
+      cols: ["auto", "auto"],
+      inputWidth,
+      value: label ?? "",
+      inputHasFocus,
+      hasError,
+      ...ownerProps,
+      children: [
+        InputComponent ? /* @__PURE__ */ jsx(
+          InputComponent,
+          {
+            id: pillUid,
+            "data-testid": PILL_V2_DATA_TESTID.PILL_INPUT,
+            hasError,
+            dsInputtextInput: { className: "ds-pill-focus-point", "aria-describedby": null },
+            innerRef: (_ref) => {
+              ref.current = _ref;
+            },
+            value: label,
+            onValueChange: handleValueChange,
+            placeholder: inputPlaceholder,
+            onFocus: () => setInputHasFocus(true),
+            onBlur: () => setInputHasFocus(false),
+            autoComplete: "off",
+            maxLength: 255
+          }
+        ) : /* @__PURE__ */ jsx(
+          StyledDSInputText,
+          {
+            id: pillUid,
+            "data-testid": PILL_V2_DATA_TESTID.PILL_INPUT,
+            hasError,
+            dsInputtextInput: { "aria-describedby": null },
+            innerRef: (_ref) => {
+              ref.current = _ref;
+              _ref?.classList.add("ds-pill-focus-point");
+            },
+            value: label,
+            onValueChange: handleValueChange,
+            placeholder: inputPlaceholder,
+            onFocus: () => setInputHasFocus(true),
+            onBlur: () => setInputHasFocus(false),
+            autoComplete: "off",
+            maxLength: 255,
+            ...ownerProps
+          }
+        ),
+        /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { style: label === "" ? { visibility: "hidden" } : void 0, children: /* @__PURE__ */ jsx(
+          DSPillButton,
+          {
+            id: `${pillUid}-clear`,
+            "data-testid": PILL_V2_DATA_TESTID.PILL_CLEAR_ICON,
+            innerRef,
+            onClick: onCloseIconClick,
+            "aria-label": "Clear input",
+            type: "right",
+            children: /* @__PURE__ */ jsx(CloseXsmall, { size: "s", color: ["brand-primary", "700"] })
+          }
+        ) })
+      ]
+    }
+  );
+});
 export {
   InputPill
 };