@elliemae/ds-pills-v2 3.70.0-next.62 → 3.70.0-next.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/components/styled.js +35 -6
  2. package/dist/cjs/components/styled.js.map +2 -2
  3. package/dist/cjs/components/types/InputPill.js +12 -5
  4. package/dist/cjs/components/types/InputPill.js.map +2 -2
  5. package/dist/cjs/react-desc-prop-types.js +3 -5
  6. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  7. package/dist/esm/components/styled.js +35 -6
  8. package/dist/esm/components/styled.js.map +2 -2
  9. package/dist/esm/components/types/InputPill.js +12 -5
  10. package/dist/esm/components/types/InputPill.js.map +2 -2
  11. package/dist/esm/react-desc-prop-types.js +3 -5
  12. package/dist/esm/react-desc-prop-types.js.map +2 -2
  13. package/package.json +16 -16
package/dist/cjs/components/styled.js CHANGED
@@ -158,20 +158,49 @@ const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
158
158
  ${(props) => props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : ""}
159
159
  }
160
160
 
161
- & .em-ds-input {
161
+ /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot "root"). The pill owns the
162
+ * border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */
163
+ & .DSInputtext-root {
164
+ border: none !important;
165
+ /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only
166
+ * the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */
167
+ outline: none !important;
168
+ border-radius: 0 !important;
169
+ background: transparent !important;
170
+ min-height: 0 !important;
171
+ padding: 0 !important;
172
+ width: 100%;
173
+ /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),
174
+ * keeping the typed value vertically centered when the clear button grows the row. */
175
+ height: 100%;
176
+ }
177
+
178
+ /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy
179
+ * visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.
180
+ * DSInputText adds its own padding, themed font-family and an italic placeholder — neutralize those
181
+ * so the typed value and placeholder render identically to the previous DSInput. */
182
+ & input {
162
183
  outline: none !important;
163
184
  border: none !important;
164
185
  box-shadow: none !important;
165
186
  border-radius: 0 !important;
166
187
  height: 100%;
167
188
  background: transparent;
168
- width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
189
+ width: ${(props) => `${props.inputWidth}px`};
169
190
  padding: 0;
170
191
  margin: 0 0 0 8px;
171
- }
172
-
173
- & .em-ds-input__tooltip-ref {
174
- height: 100%;
192
+ /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert
193
+ * DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput
194
+ * rendered with, so the typed value and placeholder look identical. */
195
+ line-height: inherit;
196
+ font-family: revert;
197
+ color: revert;
198
+
199
+ ::placeholder {
200
+ color: revert;
201
+ font-style: revert;
202
+ font-weight: revert;
203
+ }
175
204
  }
176
205
  `;
177
206
  const StyledDropdownPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
package/dist/cjs/components/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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 { 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 & .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(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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* 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 { 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\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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["import_constants"]
7
7
  }
package/dist/cjs/components/types/InputPill.js CHANGED
@@ -66,12 +66,18 @@ const InputPill = import_react.default.memo(
66
66
  [onInputClear]
67
67
  );
68
68
  const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
69
+ const handleValueChange = (0, import_react.useCallback)(
70
+ (newValue, e) => {
71
+ onInputChange?.(e, newValue);
72
+ },
73
+ [onInputChange]
74
+ );
69
75
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
70
76
  import_styled.StyledInputPillWrapper,
71
77
  {
72
78
  pillSize: size,
73
79
  className: "ds-pill-wrapper",
74
- cols: label === "" ? ["auto"] : ["auto", "24px"],
80
+ cols: ["auto", "auto"],
75
81
  inputWidth,
76
82
  value: label ?? "",
77
83
  inputHasFocus,
@@ -81,20 +87,21 @@ const InputPill = import_react.default.memo(
81
87
  InputComponent,
82
88
  {
83
89
  id: pillUid,
84
- className: "ds-pill-focus-point",
85
90
  "data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
91
+ dsInputtextInput: { className: "ds-pill-focus-point", "aria-describedby": void 0 },
86
92
  innerRef: (_ref) => {
87
93
  ref.current = _ref;
88
94
  },
89
95
  value: label,
90
- onChange: onInputChange,
96
+ onValueChange: handleValueChange,
91
97
  placeholder: inputPlaceholder,
92
98
  onFocus: () => setInputHasFocus(true),
93
99
  onBlur: () => setInputHasFocus(false),
94
- disableTooltip: false
100
+ autoComplete: "off",
101
+ maxLength: 255
95
102
  }
96
103
  ),
97
- label !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { style: label === "" ? { visibility: "hidden" } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
98
105
  import_DSPillButton.DSPillButton,
99
106
  {
100
107
  id: pillUid,
package/dist/cjs/components/types/InputPill.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label ?? ''}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <StyledAgnosticPillRegion>\n <DSPillButton\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA1CN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAiE;AACjE,0BAA6B;AAE7B,uBAAoC;AAE7B,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAa,qCAAoB;AAAA,cACjC,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT,4CAAC,0CACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,qCAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n // DSInputText exposes value changes via onValueChange(newValue, e). Re-map to the pill's public\n // onInputChange(e, newValue) contract so the (event, value) signature consumers rely on is preserved.\n const handleValueChange = useCallback(\n (newValue: string, e: React.ChangeEvent<HTMLInputElement>) => {\n onInputChange?.(e, newValue);\n },\n [onInputChange],\n );\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n cols={['auto', 'auto']}\n inputWidth={inputWidth}\n value={label ?? ''}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n // The keyboard-nav focus point must live on the focusable input itself (DSPillGroup queries\n // `.ds-pill-focus-point`); route the class onto DSInputText's input slot, not its wrapper.\n // Also clear DSInputText's auto aria-describedby: it points at form feedback/error message\n // elements that don't exist inside a pill (matching the legacy DSInput, which set none).\n dsInputtextInput={{ className: 'ds-pill-focus-point', 'aria-describedby': undefined }}\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onValueChange={handleValueChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n autoComplete=\"off\"\n maxLength={255}\n />\n <StyledAgnosticPillRegion style={label === '' ? { visibility: 'hidden' } : undefined}>\n <DSPillButton\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n </StyledInputPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDjB;AAnDN,mBAA8D;AAE9D,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAiE;AACjE,0BAA6B;AAE7B,uBAAoC;AAE7B,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAgC,IAAI;AAEhD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAIxD,UAAM,wBAAoB;AAAA,MACxB,CAAC,UAAkB,MAA2C;AAC5D,wBAAgB,GAAG,QAAQ;AAAA,MAC7B;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,qCAAoB;AAAA,cAKjC,kBAAkB,EAAE,WAAW,uBAAuB,oBAAoB,OAAU;AAAA,cACpF,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,eAAe;AAAA,cACf,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,cAAa;AAAA,cACb,WAAW;AAAA;AAAA,UACb;AAAA,UACA,4CAAC,0CAAyB,OAAO,UAAU,KAAK,EAAE,YAAY,SAAS,IAAI,QACzE;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,qCAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -34,7 +34,7 @@ __export(react_desc_prop_types_exports, {
34
34
  });
35
35
  module.exports = __toCommonJS(react_desc_prop_types_exports);
36
36
  var React = __toESM(require("react"));
37
- var import_ds_legacy_form = require("@elliemae/ds-legacy-form");
37
+ var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
38
38
  var import_ds_menu_button = require("@elliemae/ds-menu-button");
39
39
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
40
40
  var import_constants = require("./constants/index.js");
@@ -60,9 +60,7 @@ const DSPillV2DefaultProps = {
60
60
  onInputChange: () => null,
61
61
  onInputClear: () => null,
62
62
  inputWidth: 72,
63
- // TODO: remove DSInput in favor of V2
64
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
65
- inputRender: import_ds_legacy_form.DSInput,
63
+ inputRender: import_ds_form_input_text.DSInputText,
66
64
  dropdownProps: {
67
65
  options: [],
68
66
  isSkeleton: false,
@@ -129,7 +127,7 @@ const DSPillV2PropTypes = {
129
127
  "when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap"
130
128
  ).defaultValue(false),
131
129
  hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
132
- inputRender: import_ds_props_helpers.PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`),
130
+ inputRender: import_ds_props_helpers.PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInputText`),
133
131
  menuButtonProps: import_ds_props_helpers.PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
134
132
  trailingComma: import_ds_props_helpers.PropTypes.bool.description(
135
133
  "Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-legacy-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_V2_SLOTS } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n };\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_V2_SLOTS\n > {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends\n RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends\n RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null),\n IconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null),\n iconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_V2_SLOTS } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n };\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_V2_SLOTS\n > {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends\n RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends\n RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInputText,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null),\n IconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null),\n iconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInputText`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/components/styled.js CHANGED
@@ -112,20 +112,49 @@ const StyledInputPillWrapper = styled(Grid, {
112
112
  ${(props) => props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : ""}
113
113
  }
114
114
 
115
- & .em-ds-input {
115
+ /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot "root"). The pill owns the
116
+ * border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */
117
+ & .DSInputtext-root {
118
+ border: none !important;
119
+ /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only
120
+ * the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */
121
+ outline: none !important;
122
+ border-radius: 0 !important;
123
+ background: transparent !important;
124
+ min-height: 0 !important;
125
+ padding: 0 !important;
126
+ width: 100%;
127
+ /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),
128
+ * keeping the typed value vertically centered when the clear button grows the row. */
129
+ height: 100%;
130
+ }
131
+
132
+ /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy
133
+ * visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.
134
+ * DSInputText adds its own padding, themed font-family and an italic placeholder — neutralize those
135
+ * so the typed value and placeholder render identically to the previous DSInput. */
136
+ & input {
116
137
  outline: none !important;
117
138
  border: none !important;
118
139
  box-shadow: none !important;
119
140
  border-radius: 0 !important;
120
141
  height: 100%;
121
142
  background: transparent;
122
- width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
143
+ width: ${(props) => `${props.inputWidth}px`};
123
144
  padding: 0;
124
145
  margin: 0 0 0 8px;
125
- }
126
-
127
- & .em-ds-input__tooltip-ref {
128
- height: 100%;
146
+ /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert
147
+ * DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput
148
+ * rendered with, so the typed value and placeholder look identical. */
149
+ line-height: inherit;
150
+ font-family: revert;
151
+ color: revert;
152
+
153
+ ::placeholder {
154
+ color: revert;
155
+ font-style: revert;
156
+ font-weight: revert;
157
+ }
129
158
  }
130
159
  `;
131
160
  const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })`
package/dist/esm/components/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
4
- "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 { 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 & .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(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"],
5
- "mappings": "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",
4
+ "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 { 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\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,KAAK,cAAc;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAM1B,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,MAKM;AAAA;AAAA;AAAA;AAAA,YAIM,IAAI;AAAA,aACH,IAAI;AAAA,cACH,IAAI;AAAA,eACH,IAAI;AAAA,cACL,IAAI,YAAY,KAAK;AAAA,8BACL,YAAY;AAAA,+BACX,YAAY;AAAA,iCACV,YAAY;AAAA,kCACX,YAAY;AAAA;AAAA,eAE/B,UAAU,EAAE;AAAA;AAAA;AAW3B,MAAM,eAAe;AAAA;AAAA;AAAA,uBAGE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAK7D,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUP,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc3C,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,MAAO;AAAA,WAC5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAInD,MAAM,mBAAmB;AAAA;AAAA,aAEZ,CAAC,UAAW,OAAO,aAAa,MAAM,UAAU,OAAQ;AAAA;AAAA;AAiB9D,MAAM,yBAAyB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,QAAQ,CAAC;AAAA,IAMlG,oBAAoB;AAAA;AAAA,iBAEP,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,kBAC1C,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA;AAGjE,MAAM,6BAA6B,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,QAAQ,CAAC;AAAA,IAKtG,oBAAoB;AAAA;AAAA,iBAEP,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,kBACzC,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA;AAUjE,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA;AAAA,iBAEP,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,kBACzC,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA,mBACrD,CAAC,UAAW,MAAM,eAAe,mBAAmB,MAAO;AAAA;AAGvE,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA;AAAA;AAAA,IAGpB,YAAY;AAAA;AAAA,gBAEA,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,IAGxD,CAAC,EAAE,OAAO,SAAS,MAAM;AACzB,MAAI,SAAU,QAAO,cAAc,EAAE,OAAO,MAAM,OAAO,OAAO,GAAG,EAAE,CAAC;AACtE,SAAO,cAAc,EAAE,OAAO,MAAM,OAAO,MAAM,GAAG,EAAE,CAAC;AACzD,CAAC;AAAA;AAAA;AAAA,MAGG,CAAC,UAAW,MAAM,gBAAgB,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC,IAAI,EAAG;AAAA;AAAA;AAAA;AAAA,MAIxG,CAAC,UAAW,MAAM,gBAAgB,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,EAAE,CAAC,IAAI,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aA+BxF,CAAC,UAAU,GAAG,MAAM,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxC,MAAM,4BAA4B,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,QAAQ,CAAC;AAAA,IAGrG,oBAAoB;AAAA,iBACP,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA;AAYrD,MAAM,4BAA4B,OAAO,MAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA,iBACP,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,mBACzC,CAAC,UAAW,MAAM,eAAe,iBAAiB,MAAO;AAAA,kBAC1D,CAAC,UAAW,MAAM,cAAc,iBAAiB,MAAO;AAAA;AAUnE,MAAM,6BAA6B,OAAO,MAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,oBAAoB;AAAA,iBACP,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,kBACzC,CAAC,UAAW,MAAM,UAAU,mBAAmB,MAAO;AAAA;AAAA;AAQjE,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,iBAAiB,WAAW,CAAC;AAAA,WAC1F,CAAC,EAAE,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyExB,MAAM,wBAAwB,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,IAGvG,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKd,CAAC,UAAU,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,EAAE,CAAC,CAAC;AAAA;AAAA;AAIrF,MAAM,mBAAmB,OAAO,YAAY;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAAA,EACxB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM;AAC9B,MAAI,OAAO,KAAK,EAAE,SAAS,IAAI,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAC9D,WAAO;AAAA,eACE,SAAS,OAAiB,EAAE,IAAI,EAAE;AAAA,gBACjC,SAAS,QAAkB,EAAE,IAAI,EAAE;AAAA;AAAA,yBAE1B,MAAM,aAAa,KAAK;AAAA,eAClC,SAAS,OAAiB,EAAE,IAAI,EAAE;AAAA,gBACjC,SAAS,QAAkB,EAAE,IAAI,EAAE;AAAA;AAG/C,SAAO;AAAA,aACE,KAAK;AAAA,cACJ,MAAM;AAAA;AAElB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKG,CAAC,UAAU,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA,YAGzG,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,gBAAgB,SAAU;AAAA;AAAA;AAAA,wBAGpF,CAAC,EAAE,UAAU,mBAAmB,MAAM,MACxD,YAAY,oBAAoB,gBAAgB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,YAIjE,CAAC,EAAE,UAAU,mBAAmB,MAAM,MAAM;AAClD,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO,MAAM,OAAO,QAAQ,GAAG;AACtD,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA;AAIE,MAAM,uBAAuB,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUjH,CAAC,EAAE,OAAO,QAAQ,MAAM,MAAM;AAC9B,MAAI,OAAO,KAAK,EAAE,SAAS,IAAI,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAC9D,WAAO;AAAA,eACE,SAAS,OAAO,EAAE,IAAI,EAAE;AAAA,cACzB,SAAS,QAAQ,EAAE,IAAI,EAAE;AAAA;AAAA,yBAEd,MAAM,aAAa,KAAK;AAAA,eAClC,SAAS,OAAO,EAAE,IAAI,EAAE;AAAA,gBACvB,SAAS,QAAQ,EAAE,IAAI,EAAE;AAAA;AAGrC,SAAO;AAAA,aACE,KAAK;AAAA,cACJ,MAAM;AAAA;AAElB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKG,CAAC,UAAU,cAAc,EAAE,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,UAAU,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9G,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAKxC,MAAM,oBAAoB,OAAO,cAAc,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,IAGnG,gBAAgB;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/components/types/InputPill.js CHANGED
@@ -33,12 +33,18 @@ const InputPill = React2.memo(
33
33
  [onInputClear]
34
34
  );
35
35
  const [inputHasFocus, setInputHasFocus] = useState(false);
36
+ const handleValueChange = useCallback(
37
+ (newValue, e) => {
38
+ onInputChange?.(e, newValue);
39
+ },
40
+ [onInputChange]
41
+ );
36
42
  return /* @__PURE__ */ jsxs(
37
43
  StyledInputPillWrapper,
38
44
  {
39
45
  pillSize: size,
40
46
  className: "ds-pill-wrapper",
41
- cols: label === "" ? ["auto"] : ["auto", "24px"],
47
+ cols: ["auto", "auto"],
42
48
  inputWidth,
43
49
  value: label ?? "",
44
50
  inputHasFocus,
@@ -48,20 +54,21 @@ const InputPill = React2.memo(
48
54
  InputComponent,
49
55
  {
50
56
  id: pillUid,
51
- className: "ds-pill-focus-point",
52
57
  "data-testid": PILL_V2_DATA_TESTID.PILL_INPUT,
58
+ dsInputtextInput: { className: "ds-pill-focus-point", "aria-describedby": void 0 },
53
59
  innerRef: (_ref) => {
54
60
  ref.current = _ref;
55
61
  },
56
62
  value: label,
57
- onChange: onInputChange,
63
+ onValueChange: handleValueChange,
58
64
  placeholder: inputPlaceholder,
59
65
  onFocus: () => setInputHasFocus(true),
60
66
  onBlur: () => setInputHasFocus(false),
61
- disableTooltip: false
67
+ autoComplete: "off",
68
+ maxLength: 255
62
69
  }
63
70
  ),
64
- label !== "" && /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { children: /* @__PURE__ */ jsx(
71
+ /* @__PURE__ */ jsx(StyledAgnosticPillRegion, { style: label === "" ? { visibility: "hidden" } : void 0, children: /* @__PURE__ */ jsx(
65
72
  DSPillButton,
66
73
  {
67
74
  id: pillUid,
package/dist/esm/components/types/InputPill.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/InputPill.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label ?? ''}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <StyledAgnosticPillRegion>\n <DSPillButton\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC2CjB,SASE,KATF;AA1CN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAE9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B,8BAA8B;AACjE,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAE7B,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,OAAgC,IAAI;AAEhD,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,QAC/C;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,eAAa,oBAAoB;AAAA,cACjC,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,gBAAgB;AAAA;AAAA,UAClB;AAAA,UACC,UAAU,MACT,oBAAC,4BACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,oBAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,8BAAC,eAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledInputPillWrapper } from '../styled.js';\nimport { DSPillButton } from '../../parts/DSPillButton/DSPillButton.js';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { PILL_V2_DATA_TESTID } from '../../constants/index.js';\n\nexport const InputPill = React.memo<DSPillT.InternalProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLInputElement | null>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, [inputId]);\n\n const onCloseIconClick = useCallback(\n (e: React.KeyboardEvent | React.MouseEvent) => {\n if (('code' in e && ['Enter', 'Space'].includes(e.code)) || !('code' in e)) {\n e.preventDefault();\n onInputClear?.(e);\n ref.current?.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n // DSInputText exposes value changes via onValueChange(newValue, e). Re-map to the pill's public\n // onInputChange(e, newValue) contract so the (event, value) signature consumers rely on is preserved.\n const handleValueChange = useCallback(\n (newValue: string, e: React.ChangeEvent<HTMLInputElement>) => {\n onInputChange?.(e, newValue);\n },\n [onInputChange],\n );\n\n return (\n <StyledInputPillWrapper\n pillSize={size}\n className=\"ds-pill-wrapper\"\n cols={['auto', 'auto']}\n inputWidth={inputWidth}\n value={label ?? ''}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n // The keyboard-nav focus point must live on the focusable input itself (DSPillGroup queries\n // `.ds-pill-focus-point`); route the class onto DSInputText's input slot, not its wrapper.\n // Also clear DSInputText's auto aria-describedby: it points at form feedback/error message\n // elements that don't exist inside a pill (matching the legacy DSInput, which set none).\n dsInputtextInput={{ className: 'ds-pill-focus-point', 'aria-describedby': undefined }}\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n }}\n value={label}\n onValueChange={handleValueChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n autoComplete=\"off\"\n maxLength={255}\n />\n <StyledAgnosticPillRegion style={label === '' ? { visibility: 'hidden' } : undefined}>\n <DSPillButton\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_CLEAR_ICON}\n innerRef={innerRef as TypescriptHelpersT.AnyRef<HTMLButtonElement>}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n </StyledAgnosticPillRegion>\n </StyledInputPillWrapper>\n );\n },\n);\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoDjB,SASE,KATF;AAnDN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAE9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B,8BAA8B;AACjE,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAE7B,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,OAAgC,IAAI;AAEhD,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA8C;AAC7C,YAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAIxD,UAAM,oBAAoB;AAAA,MACxB,CAAC,UAAkB,MAA2C;AAC5D,wBAAgB,GAAG,QAAQ;AAAA,MAC7B;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM,CAAC,QAAQ,MAAM;AAAA,QACrB;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,oBAAoB;AAAA,cAKjC,kBAAkB,EAAE,WAAW,uBAAuB,oBAAoB,OAAU;AAAA,cACpF,UAAU,CAAC,SAAkC;AAC3C,oBAAI,UAAU;AAAA,cAChB;AAAA,cACA,OAAO;AAAA,cACP,eAAe;AAAA,cACf,aAAa;AAAA,cACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,cACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,cACpC,cAAa;AAAA,cACb,WAAW;AAAA;AAAA,UACb;AAAA,UACA,oBAAC,4BAAyB,OAAO,UAAU,KAAK,EAAE,YAAY,SAAS,IAAI,QACzE;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa,oBAAoB;AAAA,cACjC;AAAA,cACA,SAAS;AAAA,cAET,cAAW;AAAA,cACX,MAAK;AAAA,cAEL,8BAAC,eAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACzD,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { DSInput } from "@elliemae/ds-legacy-form";
2
+ import { DSInputText } from "@elliemae/ds-form-input-text";
3
3
  import { DSMenuButtonPropTypes } from "@elliemae/ds-menu-button";
4
4
  import {
5
5
  PropTypes,
@@ -30,9 +30,7 @@ const DSPillV2DefaultProps = {
30
30
  onInputChange: () => null,
31
31
  onInputClear: () => null,
32
32
  inputWidth: 72,
33
- // TODO: remove DSInput in favor of V2
34
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
35
- inputRender: DSInput,
33
+ inputRender: DSInputText,
36
34
  dropdownProps: {
37
35
  options: [],
38
36
  isSkeleton: false,
@@ -99,7 +97,7 @@ const DSPillV2PropTypes = {
99
97
  "when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap"
100
98
  ).defaultValue(false),
101
99
  hasError: PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
102
- inputRender: PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInput`),
100
+ inputRender: PropTypes.func.description("Custom render function for the input pill").defaultValue(`DSInputText`),
103
101
  menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
104
102
  trailingComma: PropTypes.bool.description(
105
103
  "Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-legacy-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_V2_SLOTS } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n };\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_V2_SLOTS\n > {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends\n RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends\n RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null),\n IconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null),\n iconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_V2_SLOTS } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n };\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_V2_SLOTS\n > {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends\n RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends\n RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInputText,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null),\n IconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null),\n iconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInputText`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-pills-v2",
3
- "version": "3.70.0-next.62",
3
+ "version": "3.70.0-next.63",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Pills V2",
6
6
  "files": [
@@ -22,7 +22,7 @@
22
22
  ],
23
23
  "repository": {
24
24
  "type": "git",
25
- "url": "https://git.elliemae.io/platform-ui/dimsum.git"
25
+ "url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
26
26
  },
27
27
  "engines": {
28
28
  "pnpm": ">=9",
@@ -36,26 +36,26 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-legacy-form": "1.0.16",
40
39
  "uid": "^2.0.2",
41
- "@elliemae/ds-button-v2": "3.70.0-next.62",
42
- "@elliemae/ds-dropdownmenu-v2": "3.70.0-next.62",
43
- "@elliemae/ds-icons": "3.70.0-next.62",
44
- "@elliemae/ds-grid": "3.70.0-next.62",
45
- "@elliemae/ds-menu-button": "3.70.0-next.62",
46
- "@elliemae/ds-floating-context": "3.70.0-next.62",
47
- "@elliemae/ds-props-helpers": "3.70.0-next.62",
48
- "@elliemae/ds-system": "3.70.0-next.62",
49
- "@elliemae/ds-tooltip-v3": "3.70.0-next.62",
50
- "@elliemae/ds-typography": "3.70.0-next.62",
51
- "@elliemae/ds-typescript-helpers": "3.70.0-next.62"
40
+ "@elliemae/ds-button-v2": "3.70.0-next.63",
41
+ "@elliemae/ds-form-input-text": "3.70.0-next.63",
42
+ "@elliemae/ds-icons": "3.70.0-next.63",
43
+ "@elliemae/ds-grid": "3.70.0-next.63",
44
+ "@elliemae/ds-floating-context": "3.70.0-next.63",
45
+ "@elliemae/ds-dropdownmenu-v2": "3.70.0-next.63",
46
+ "@elliemae/ds-menu-button": "3.70.0-next.63",
47
+ "@elliemae/ds-system": "3.70.0-next.63",
48
+ "@elliemae/ds-props-helpers": "3.70.0-next.63",
49
+ "@elliemae/ds-tooltip-v3": "3.70.0-next.63",
50
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.63",
51
+ "@elliemae/ds-typography": "3.70.0-next.63"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@playwright/experimental-ct-react": "1.61.1",
55
55
  "jest": "^30.0.0",
56
56
  "styled-components": "~5.3.11",
57
- "@elliemae/ds-test-utils": "3.70.0-next.62",
58
- "@elliemae/ds-monorepo-devops": "3.70.0-next.62"
57
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.63",
58
+ "@elliemae/ds-test-utils": "3.70.0-next.63"
59
59
  },
60
60
  "peerDependencies": {
61
61
  "lodash-es": "^4.18.1",