@elliemae/ds-pills-v2 3.70.0-next.63 → 3.70.0-next.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/styled.js +6 -0
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/components/types/InputPill.js +91 -68
- package/dist/cjs/components/types/InputPill.js.map +2 -2
- package/dist/cjs/constants/index.js +2 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/DSPillButton/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSPillGroup/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +3 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js +4 -2
- package/dist/cjs/typescript-testing/slot-props.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +0 -1
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/esm/components/styled.js +6 -0
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/components/types/InputPill.js +92 -69
- package/dist/esm/components/types/InputPill.js.map +2 -2
- package/dist/esm/constants/index.js +2 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/DSPillButton/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSPillGroup/react-desc-prop-types.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +3 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +4 -2
- package/dist/esm/typescript-testing/slot-props.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +0 -1
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/types/components/styled.d.ts +1 -0
- package/dist/types/constants/index.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/package.json +15 -15
|
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var styled_exports = {};
|
|
30
30
|
__export(styled_exports, {
|
|
31
31
|
StyledAgnosticPillRegion: () => StyledAgnosticPillRegion,
|
|
32
|
+
StyledDSInputText: () => StyledDSInputText,
|
|
32
33
|
StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
|
|
33
34
|
StyledInputPillWrapper: () => StyledInputPillWrapper,
|
|
34
35
|
StyledLabelOnlyPillWrapper: () => StyledLabelOnlyPillWrapper,
|
|
@@ -46,6 +47,7 @@ __export(styled_exports, {
|
|
|
46
47
|
module.exports = __toCommonJS(styled_exports);
|
|
47
48
|
var React = __toESM(require("react"));
|
|
48
49
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
50
|
+
var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
|
|
49
51
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
50
52
|
var import_ds_menu_button = require("@elliemae/ds-menu-button");
|
|
51
53
|
var import_ds_system = require("@elliemae/ds-system");
|
|
@@ -203,6 +205,10 @@ const StyledInputPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
|
|
|
203
205
|
}
|
|
204
206
|
}
|
|
205
207
|
`;
|
|
208
|
+
const StyledDSInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
|
|
209
|
+
name: import_constants.DSPillV2Name,
|
|
210
|
+
slot: import_constants.PILL_V2_SLOTS.PILL_INPUT
|
|
211
|
+
})``;
|
|
206
212
|
const StyledDropdownPillWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPillV2Name, slot: import_constants.PILL_V2_SLOTS.WRAPPER })`
|
|
207
213
|
${commonPillWrapperCss}
|
|
208
214
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
@@ -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 /** 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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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuButton } from '@elliemae/ds-menu-button';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { PILL_V2_SLOTS, DSPillV2Name } from '../constants/index.js';\nimport { PILL_BUTTON_SLOTS } from '../parts/DSPillButton/constants/index.js';\nimport { PILL_GROUP_SLOTS } from '../parts/DSPillGroup/constants/index.js';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nexport const borderOutside = ({\n color,\n size = 1,\n zIndex = 0,\n borderRadius = '12px',\n}: {\n color: string;\n size?: number;\n zIndex?: number;\n borderRadius?: string;\n}) => css<{ disabled?: boolean; applyAriaDisabled?: boolean; readOnly?: boolean }>`\n :after {\n content: ' ';\n position: absolute;\n top: -${size}px;\n left: -${size}px;\n right: -${size}px;\n bottom: -${size}px;\n border: ${size}px solid ${color};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex || ''};\n }\n`;\n\n/**\n * b2 typography mirrored as raw CSS \u2014 kept ONLY for the InputPill, whose input is a consumer\n * render-prop (`inputRender`) and cannot be a DSTypography component. Every other pill text node\n * renders via `styled(DSTypography)` variant=\"b2\". Keep in sync with ds-typography b2 (font-size\n * 13px, line-height 16px at both the mobile 16px and desktop 13px roots). End-state: consume an\n * exported ds-typography b2 css mixin instead of mirroring.\n */\nconst b2FontMirror = css`\n font-size: 0.8125rem;\n line-height: 1rem;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1rem;\n line-height: 1.2307692308rem;\n }\n`;\nconst commonPillWrapperCss = css<{\n pillSize: 'm' | 's';\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: boolean;\n}>`\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme }) => theme.colors.brand[250]};\n\n outline: none;\n\n padding: 0px 12px 0 12px;\n\n border-radius: 12px;\n\n height: fit-content;\n place-items: start normal;\n\n /** PUI typography: the pill label owns b2 via styled(DSTypography); font-size/line-height no\n * longer live here. Only the InputPill wrapper re-adds b2 (see b2FontMirror) for its\n * consumer-rendered input. color + font-weight stay here for inheritance into the label. */\n user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : 'auto')};\n color: ${({ theme }) => theme.colors.brand['800']};\n word-break: break-word;\n`;\n\nconst commonSpanStyles = css<{ pillSize: 'm' | 's' }>`\n display: grid;\n padding: ${(props) => (props?.pillSize === 'm' ? '4px 0' : '1px 0')};\n align-self: center;\n`;\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n pillSize: 'm' | 's';\n disabled?: boolean;\n}\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: boolean;\n}>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledLabelOnlyPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n hasIcon: boolean;\n applyAriaDisabled?: boolean;\n}>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\ntype StyledValuePillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIcon: boolean;\n hasIconRight: boolean;\n applyAriaDisabled: boolean;\n};\n\nexport const StyledValuePillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledValuePillWrapperPropsT>`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n padding-right: ${(props) => (props.hasIconRight ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n /** The only place the b2 mirror is still needed: the input is a consumer render-prop, not a\n * DSTypography component. All other pill text nodes own b2 via styled(DSTypography). */\n ${b2FontMirror}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside({ color: theme.colors.danger[900] });\n return borderOutside({ color: theme.colors.brand[500] });\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[700], size: 2 }) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside({ color: props.theme.colors.brand[500] }) : '')}\n }\n\n /** DSInputText renders its own bordered wrapper (StyledInputWrapper, slot \"root\"). The pill owns the\n * border/background/focus-ring, so strip the wrapper's chrome and let it size to the input. */\n & .DSInputtext-root {\n border: none !important;\n /* DSInputText draws its own focus ring as an inset outline on this wrapper; suppress it so only\n * the pill's :focus-within border (below) shows, exactly as the legacy DSInput did. */\n outline: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n min-height: 0 !important;\n padding: 0 !important;\n width: 100%;\n /* Fill the pill row so the input stretches to the full height (as the legacy wrapper did),\n * keeping the typed value vertically centered when the clear button grows the row. */\n height: 100%;\n }\n\n /** The input is a consumer render-prop (DSInputText's native input by default). Match the legacy\n * visual exactly: transparent, borderless, pill-controlled width, no padding, 8px left margin.\n * DSInputText adds its own padding, themed font-family and an italic placeholder \u2014 neutralize those\n * so the typed value and placeholder render identically to the previous DSInput. */\n & input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth}px`};\n padding: 0;\n margin: 0 0 0 8px;\n /* Inherit the wrapper's b2 line-height so the empty field keeps its previous height; revert\n * DSInputText's themed font-family/color/placeholder back to the UA defaults the legacy DSInput\n * rendered with, so the typed value and placeholder look identical. */\n line-height: inherit;\n font-family: revert;\n color: revert;\n\n ::placeholder {\n color: revert;\n font-style: revert;\n font-weight: revert;\n }\n }\n`;\n\n// Only wraps the default input (no consumer `inputRender`) \u2014 that's the one case where the target is\n// a known, stable component and `styled(Component, {name, slot})` can apply, exposing `dsPillInput`.\nexport const StyledDSInputText = styled(DSInputText, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.PILL_INPUT,\n})``;\n\nexport const StyledDropdownPillWrapper = styled(Grid, { name: DSPillV2Name, slot: PILL_V2_SLOTS.WRAPPER })<{\n pillSize: 'm' | 's';\n}>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\ntype StyledMenuButtonPillWrapperPropsT = {\n pillSize: 'm' | 's';\n hasIconRight: boolean;\n hasIconLeft: boolean;\n disabled?: boolean;\n};\n\nexport const StyledReadonlyPillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledMenuButtonPillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\ntype StyledRemovablePillWrapperPropsT = {\n pillSize: 'm' | 's';\n disabled: boolean;\n applyAriaDisabled: boolean;\n hasIcon: boolean;\n};\n\nexport const StyledRemovablePillWrapper = styled(Grid, {\n name: DSPillV2Name,\n slot: PILL_V2_SLOTS.WRAPPER,\n})<StyledRemovablePillWrapperPropsT>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n padding-right: 0px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid, { name: DSPillV2Name, slot: PILL_GROUP_SLOTS.PILL_GROUP })`\n width: ${({ width }) => width};\n display: flex;\n flex-wrap: wrap;\n row-gap: 8px;\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })<{\n pillSize: 'm' | 's';\n}>`\n ${commonSpanStyles}\n /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */\n font-weight: inherit;\n outline: none;\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 3 })}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV3, {\n name: DSPillV2Name,\n slot: PILL_BUTTON_SLOTS.PILL_BUTTON,\n preserveLegacyDataTestId: true,\n})<{\n width: string | number;\n height: string | number;\n}>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width as string, 10) / 13}rem;\n height: ${parseInt(height as string, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width as string, 10) / 16}rem;\n height: ${parseInt(height as string, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'default')};\n\n :hover {\n background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? 'transparent' : theme.colors.brand[200]};\n }\n\n & svg {\n fill: ${({ disabled, applyAriaDisabled, theme }) => {\n if (disabled) return '#5C6574';\n if (applyAriaDisabled) return theme.colors.neutral[500];\n return theme.colors.brand[700];\n }};\n }\n`;\n\nexport const StyledPillMenuButton = styled(DSMenuButton, { name: DSPillV2Name, slot: PILL_V2_SLOTS.PILL_MENU_BUTTON })<{\n width: string;\n height: string;\n}>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n ${({ width, height, theme }) => {\n if (String(width).includes('px') && String(height).includes('px'))\n return `\n width: ${parseInt(width, 10) / 13}rem;\n height: ${parseInt(height, 10) / 13}rem;\n\n @media (max-width: ${theme.breakpoints?.small}) {\n width: ${parseInt(width, 10) / 16}rem;\n height: ${parseInt(height, 10) / 16}rem;\n }`;\n\n return `\n width: ${width};\n height: ${height};\n `;\n }}\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside({ color: props.theme.colors.brand[700], size: 2, zIndex: 1, borderRadius: 'inherit' })}\n }\n\n cursor: pointer;\n`;\n\nexport const StyledAgnosticPillRegion = styled.div`\n display: flex;\n padding: 2px;\n`;\n\nexport const StyledTextWrapper = styled(DSTypography, { name: DSPillV2Name, slot: PILL_V2_SLOTS.LABEL })<{\n pillSize: 'm' | 's';\n}>`\n ${commonSpanStyles}\n /** b2 hardcodes font-weight 400; inherit so the per-pill-type weight (semibold/regular) wins. */\n font-weight: inherit;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -34,13 +34,14 @@ module.exports = __toCommonJS(InputPill_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
38
|
var import_uid = require("uid");
|
|
38
39
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
40
|
var import_styled = require("../styled.js");
|
|
40
41
|
var import_DSPillButton = require("../../parts/DSPillButton/DSPillButton.js");
|
|
41
42
|
var import_constants = require("../../constants/index.js");
|
|
42
|
-
const InputPill = import_react.default.memo(
|
|
43
|
-
|
|
43
|
+
const InputPill = import_react.default.memo((props) => {
|
|
44
|
+
const {
|
|
44
45
|
label,
|
|
45
46
|
size,
|
|
46
47
|
inputPlaceholder,
|
|
@@ -51,71 +52,93 @@ const InputPill = import_react.default.memo(
|
|
|
51
52
|
innerRef,
|
|
52
53
|
hasError,
|
|
53
54
|
inputId
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
[onInputClear]
|
|
67
|
-
);
|
|
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
|
-
);
|
|
75
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
76
|
-
import_styled.StyledInputPillWrapper,
|
|
77
|
-
{
|
|
78
|
-
pillSize: size,
|
|
79
|
-
className: "ds-pill-wrapper",
|
|
80
|
-
cols: ["auto", "auto"],
|
|
81
|
-
inputWidth,
|
|
82
|
-
value: label ?? "",
|
|
83
|
-
inputHasFocus,
|
|
84
|
-
hasError,
|
|
85
|
-
children: [
|
|
86
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
|
-
InputComponent,
|
|
88
|
-
{
|
|
89
|
-
id: pillUid,
|
|
90
|
-
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
|
|
91
|
-
dsInputtextInput: { className: "ds-pill-focus-point", "aria-describedby": void 0 },
|
|
92
|
-
innerRef: (_ref) => {
|
|
93
|
-
ref.current = _ref;
|
|
94
|
-
},
|
|
95
|
-
value: label,
|
|
96
|
-
onValueChange: handleValueChange,
|
|
97
|
-
placeholder: inputPlaceholder,
|
|
98
|
-
onFocus: () => setInputHasFocus(true),
|
|
99
|
-
onBlur: () => setInputHasFocus(false),
|
|
100
|
-
autoComplete: "off",
|
|
101
|
-
maxLength: 255
|
|
102
|
-
}
|
|
103
|
-
),
|
|
104
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { style: label === "" ? { visibility: "hidden" } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
105
|
-
import_DSPillButton.DSPillButton,
|
|
106
|
-
{
|
|
107
|
-
id: pillUid,
|
|
108
|
-
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_CLEAR_ICON,
|
|
109
|
-
innerRef,
|
|
110
|
-
onClick: onCloseIconClick,
|
|
111
|
-
"aria-label": "Clear input",
|
|
112
|
-
type: "right",
|
|
113
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { size: "s", color: ["brand-primary", "700"] })
|
|
114
|
-
}
|
|
115
|
-
) })
|
|
116
|
-
]
|
|
55
|
+
} = props;
|
|
56
|
+
const ref = (0, import_react.useRef)(null);
|
|
57
|
+
const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
58
|
+
const pillUid = (0, import_react.useMemo)(() => inputId ?? `ds-pill-${(0, import_uid.uid)()}`, [inputId]);
|
|
59
|
+
const onCloseIconClick = (0, import_react.useCallback)(
|
|
60
|
+
(e) => {
|
|
61
|
+
if ("code" in e && ["Enter", "Space"].includes(e.code) || !("code" in e)) {
|
|
62
|
+
e.preventDefault();
|
|
63
|
+
onInputClear?.(e);
|
|
64
|
+
ref.current?.focus();
|
|
117
65
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
);
|
|
66
|
+
},
|
|
67
|
+
[onInputClear]
|
|
68
|
+
);
|
|
69
|
+
const [inputHasFocus, setInputHasFocus] = (0, import_react.useState)(false);
|
|
70
|
+
const handleValueChange = (0, import_react.useCallback)(
|
|
71
|
+
(newValue, e) => {
|
|
72
|
+
onInputChange?.(e, newValue);
|
|
73
|
+
},
|
|
74
|
+
[onInputChange]
|
|
75
|
+
);
|
|
76
|
+
const InputComponent = inputRender;
|
|
77
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
78
|
+
import_styled.StyledInputPillWrapper,
|
|
79
|
+
{
|
|
80
|
+
pillSize: size,
|
|
81
|
+
className: "ds-pill-wrapper",
|
|
82
|
+
cols: ["auto", "auto"],
|
|
83
|
+
inputWidth,
|
|
84
|
+
value: label ?? "",
|
|
85
|
+
inputHasFocus,
|
|
86
|
+
hasError,
|
|
87
|
+
...ownerProps,
|
|
88
|
+
children: [
|
|
89
|
+
InputComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
InputComponent,
|
|
91
|
+
{
|
|
92
|
+
id: pillUid,
|
|
93
|
+
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
|
|
94
|
+
hasError,
|
|
95
|
+
dsInputtextInput: { className: "ds-pill-focus-point", "aria-describedby": null },
|
|
96
|
+
innerRef: (_ref) => {
|
|
97
|
+
ref.current = _ref;
|
|
98
|
+
},
|
|
99
|
+
value: label,
|
|
100
|
+
onValueChange: handleValueChange,
|
|
101
|
+
placeholder: inputPlaceholder,
|
|
102
|
+
onFocus: () => setInputHasFocus(true),
|
|
103
|
+
onBlur: () => setInputHasFocus(false),
|
|
104
|
+
autoComplete: "off",
|
|
105
|
+
maxLength: 255
|
|
106
|
+
}
|
|
107
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
|
+
import_styled.StyledDSInputText,
|
|
109
|
+
{
|
|
110
|
+
id: pillUid,
|
|
111
|
+
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_INPUT,
|
|
112
|
+
hasError,
|
|
113
|
+
dsInputtextInput: { "aria-describedby": null },
|
|
114
|
+
innerRef: (_ref) => {
|
|
115
|
+
ref.current = _ref;
|
|
116
|
+
_ref?.classList.add("ds-pill-focus-point");
|
|
117
|
+
},
|
|
118
|
+
value: label,
|
|
119
|
+
onValueChange: handleValueChange,
|
|
120
|
+
placeholder: inputPlaceholder,
|
|
121
|
+
onFocus: () => setInputHasFocus(true),
|
|
122
|
+
onBlur: () => setInputHasFocus(false),
|
|
123
|
+
autoComplete: "off",
|
|
124
|
+
maxLength: 255,
|
|
125
|
+
...ownerProps
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAgnosticPillRegion, { style: label === "" ? { visibility: "hidden" } : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
import_DSPillButton.DSPillButton,
|
|
130
|
+
{
|
|
131
|
+
id: `${pillUid}-clear`,
|
|
132
|
+
"data-testid": import_constants.PILL_V2_DATA_TESTID.PILL_CLEAR_ICON,
|
|
133
|
+
innerRef,
|
|
134
|
+
onClick: onCloseIconClick,
|
|
135
|
+
"aria-label": "Clear input",
|
|
136
|
+
type: "right",
|
|
137
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { size: "s", color: ["brand-primary", "700"] })
|
|
138
|
+
}
|
|
139
|
+
) })
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
});
|
|
121
144
|
//# sourceMappingURL=InputPill.js.map
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { StyledAgnosticPillRegion, StyledDSInputText, 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>((props) => {\n const {\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const ownerProps = useOwnerProps(props);\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 const InputComponent = inputRender;\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 {...ownerProps}\n >\n {InputComponent ? (\n <InputComponent\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n hasError={hasError}\n // inputRender has always assumed a DSInputText-shaped component (this is what the pill's own\n // default input is, and the only real-world usage of inputRender wraps DSInputText itself,\n // forwarding dsInputtextInput straight through). Keeping this contract unchanged avoids a\n // silent behavior break for any existing consumer. Do NOT also wire a plain onChange here: a\n // DSInputText-shaped component that forwards all received props (the common pattern) would\n // then call onInputChange twice per keystroke \u2014 once via onChange, once via onValueChange below.\n // Unlike the default branch below, this keeps className on the slot instead of forcing it via\n // classList.add: InputComponent is consumer-supplied, not something we render ourselves, so the\n // permanent forced-ref pattern is intentionally scoped to our own slot only (see that branch).\n dsInputtextInput={{ className: 'ds-pill-focus-point', 'aria-describedby': null }}\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 ) : (\n <StyledDSInputText\n id={pillUid}\n data-testid={PILL_V2_DATA_TESTID.PILL_INPUT}\n hasError={hasError}\n // 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 // null, not undefined \u2014 an explicit \"no value\" survives regardless of how ds-system's\n // slot-prop merge evolves (see PUI-17949 below); undefined risks a future, smarter merge\n // reading it as \"unset, inherit DSInputText's default\" instead of \"explicitly cleared\".\n dsInputtextInput={{ 'aria-describedby': null }}\n innerRef={(_ref: HTMLInputElement | null) => {\n ref.current = _ref;\n // Permanent, not a workaround. Two independent reasons this class can never be supplied\n // through a slot prop, so classList.add is the canonical mechanism, not a stand-in for one:\n // 1) DSInputText's own styled construction forwards global attributes to the input but\n // routes `className` to its wrapper instead (a separate, pre-existing DSInputText quirk)\n // \u2014 `dsInputtextInput={{ className: ... }}` could never reach the real <input>, regardless\n // of PUI-17949's shallow-merge state.\n // 2) DSPillGroupV2's keyboard navigation (usePillGroup.ts) queries `.ds-pill-focus-point`\n // directly against the DOM and never goes through React's data flow (no ref-registration\n // prop) \u2014 since its consumer of this class operates outside React's render cycle by\n // design, the mechanism that supplies it is intentionally imperative/vanilla-DOM too,\n // rather than a value that has to survive a declarative slot-prop merge.\n // PUI-17949 (ds-system's callbackMerger doing a plain per-slot spread instead of a per-key\n // merge) is still real and still worth fixing for other nested-slot-override consumers \u2014\n // fixing it would not remove the need for this line. classList.add is idempotent, so\n // re-running it on every render is safe.\n _ref?.classList.add('ds-pill-focus-point');\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 {...ownerProps}\n />\n )}\n <StyledAgnosticPillRegion style={label === '' ? { visibility: 'hidden' } : undefined}>\n <DSPillButton\n id={`${pillUid}-clear`}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDnB;AArDJ,mBAA8D;AAC9D,8BAA8B;AAE9B,iBAAoB;AACpB,sBAA4B;AAC5B,oBAAoF;AACpF,0BAA6B;AAE7B,uBAAoC;AAE7B,MAAM,YAAY,aAAAA,QAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,iBAAa,uCAAc,KAAK;AAEtC,QAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAEtE,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAA8C;AAC7C,UAAK,UAAU,KAAK,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAM,EAAE,UAAU,IAAI;AAC1E,UAAE,eAAe;AACjB,uBAAe,CAAC;AAChB,YAAI,SAAS,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAIxD,QAAM,wBAAoB;AAAA,IACxB,CAAC,UAAkB,MAA2C;AAC5D,sBAAgB,GAAG,QAAQ;AAAA,IAC7B;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,iBAAiB;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAa,qCAAoB;AAAA,YACjC;AAAA,YAUA,kBAAkB,EAAE,WAAW,uBAAuB,oBAAoB,KAAK;AAAA,YAC/E,UAAU,CAAC,SAAkC;AAC3C,kBAAI,UAAU;AAAA,YAChB;AAAA,YACA,OAAO;AAAA,YACP,eAAe;AAAA,YACf,aAAa;AAAA,YACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,YACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,YACpC,cAAa;AAAA,YACb,WAAW;AAAA;AAAA,QACb,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAa,qCAAoB;AAAA,YACjC;AAAA,YAMA,kBAAkB,EAAE,oBAAoB,KAAK;AAAA,YAC7C,UAAU,CAAC,SAAkC;AAC3C,kBAAI,UAAU;AAgBd,oBAAM,UAAU,IAAI,qBAAqB;AAAA,YAC3C;AAAA,YACA,OAAO;AAAA,YACP,eAAe;AAAA,YACf,aAAa;AAAA,YACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,YACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,YACpC,cAAa;AAAA,YACb,WAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEF,4CAAC,0CAAyB,OAAO,UAAU,KAAK,EAAE,YAAY,SAAS,IAAI,QACzE;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,OAAO;AAAA,YACd,eAAa,qCAAoB;AAAA,YACjC;AAAA,YACA,SAAS;AAAA,YAET,cAAW;AAAA,YACX,MAAK;AAAA,YAEL,sDAAC,+BAAY,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QACzD,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,8 @@ const PILL_V2_SLOTS = {
|
|
|
43
43
|
LABEL: "label",
|
|
44
44
|
PILL_GROUP: "pill-group",
|
|
45
45
|
PILL_BUTTON: "pill-button",
|
|
46
|
-
PILL_MENU_BUTTON: "menu-button-chevron"
|
|
46
|
+
PILL_MENU_BUTTON: "menu-button-chevron",
|
|
47
|
+
PILL_INPUT: "input"
|
|
47
48
|
};
|
|
48
49
|
const legacyHardcodedDataTestIds = {
|
|
49
50
|
// this is for the close icon button in the removable pill
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSPillV2Name = 'DSPill';\nexport const DSPillName = DSPillV2Name;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_SLOTS = {\n WRAPPER: 'wrapper',\n LABEL: 'label',\n PILL_GROUP: 'pill-group',\n PILL_BUTTON: 'pill-button',\n PILL_MENU_BUTTON: 'menu-button-chevron',\n} as const;\n\nconst legacyHardcodedDataTestIds = {\n // this is for the close icon button in the removable pill\n PILL_REMOVABLE_ICON: 'ds-pill-close-icon',\n // this is for the chevron button in the dropdown pill\n PILL_DROPDOWN_CHEVRON: 'ds-pill-dropdown-chevron',\n // this is for the clear icon button in the input pill\n PILL_CLEAR_ICON: 'ds-pill-clear-icon',\n // this is for the input element in the input pill\n PILL_INPUT: 'ds-pill-input',\n};\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSPillV2Name, PILL_V2_SLOTS),\n PILL_BUTTON: 'ds-button',\n ...legacyHardcodedDataTestIds,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSPillV2Name = 'DSPill';\nexport const DSPillName = DSPillV2Name;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_SLOTS = {\n WRAPPER: 'wrapper',\n LABEL: 'label',\n PILL_GROUP: 'pill-group',\n PILL_BUTTON: 'pill-button',\n PILL_MENU_BUTTON: 'menu-button-chevron',\n PILL_INPUT: 'input',\n} as const;\n\nconst legacyHardcodedDataTestIds = {\n // this is for the close icon button in the removable pill\n PILL_REMOVABLE_ICON: 'ds-pill-close-icon',\n // this is for the chevron button in the dropdown pill\n PILL_DROPDOWN_CHEVRON: 'ds-pill-dropdown-chevron',\n // this is for the clear icon button in the input pill\n PILL_CLEAR_ICON: 'ds-pill-clear-icon',\n // this is for the input element in the input pill\n PILL_INPUT: 'ds-pill-input',\n};\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSPillV2Name, PILL_V2_SLOTS),\n PILL_BUTTON: 'ds-button',\n ...legacyHardcodedDataTestIds,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AACrB,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AACd;AAEA,MAAM,6BAA6B;AAAA;AAAA,EAEjC,qBAAqB;AAAA;AAAA,EAErB,uBAAuB;AAAA;AAAA,EAEvB,iBAAiB;AAAA;AAAA,EAEjB,YAAY;AACd;AAGO,MAAM,sBAAsB;AAAA,EACjC,OAAG,0CAAwB,cAAc,aAAa;AAAA,EACtD,aAAa;AAAA,EACb,GAAG;AACL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSPillButton/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSButtonV3T, DSButtonName, DSButtonSlots } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, 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_BUTTON_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillButtonT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_BUTTON_SLOTS\n > {\n applyAriaDisabled?: boolean;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLButtonElement>;\n }\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n /**\n * Extends DSButtonV3T.Props, omitting the following because they are handled internally:\n *\n * - type: Set based on the button's position (left, right, or only).\n * - buttonType: Forced to \"raw\" to strip default styles for custom pill styling.\n * - shape: Determined by the button's position in the group; users should never ask to alter this, we don't support shape in this scenario\n * - width/height: Converted to RTS values internally before being passed to DSButtonV3.\n */\n Omit<\n DSButtonV3T.Props,\n | 'type'\n | 'width'\n | 'height'\n | 'buttonType'\n | keyof TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots>\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n DSButtonV3T.Props,\n | 'type'\n | 'width'\n | 'height'\n | 'buttonType'\n | keyof TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSButtonName, typeof DSButtonSlots>\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSPillButtonT.DefaultProps = {\n type: 'right',\n /**\n * 20px = medium pill fit-content target (24) minus the agnostic region's 2px top+bottom\n * padding (\u00D72). Was 21px, which forced the old 25px pill height and dominated the b2 label\n * box (24). Small pills pass 14px explicitly (see RemovablePill). No spec value exists for the\n * button size that yields the pill target \u2014 derived from pill height \u2212 region padding.\n */\n width: '20px',\n height: '20px',\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillButtonT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_BUTTON_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillButtonT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAAgD;AAyDzC,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAON,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,OAAG,kDAAyB,+BAAc,kCAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,QAAQ,QAAQ,OAAO,CAAC,EAC5C,YAAY,wFAAwF,EACpG,aAAa,OAAO;AAAA,EACvB,OAAO,kCAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,MAAM;AAAA,EAC9E,QAAQ,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,kCAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSPillGroup/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import 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_GROUP_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillGroupT {\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface DefaultProps {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_GROUP_SLOTS\n > {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof RequiredProps | keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSPillGroupT.DefaultProps = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillGroupT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_GROUP_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillGroupT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAA+C;AAiCxC,MAAM,eAA0C;AAAA,EACrD,OAAO;AAAA,EACP,UAAU,MAAM;AAClB;AAEO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,+BAAc,iCAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,aAAa;AAAA,EACpF,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAC7D,YAAY,qCAAqC,EACjD,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,8BAA8B,EAAE;AACvE;AAEO,MAAM,6BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,6 @@ __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_form_input_text = require("@elliemae/ds-form-input-text");
|
|
38
37
|
var import_ds_menu_button = require("@elliemae/ds-menu-button");
|
|
39
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
39
|
var import_constants = require("./constants/index.js");
|
|
@@ -60,7 +59,6 @@ const DSPillV2DefaultProps = {
|
|
|
60
59
|
onInputChange: () => null,
|
|
61
60
|
onInputClear: () => null,
|
|
62
61
|
inputWidth: 72,
|
|
63
|
-
inputRender: import_ds_form_input_text.DSInputText,
|
|
64
62
|
dropdownProps: {
|
|
65
63
|
options: [],
|
|
66
64
|
isSkeleton: false,
|
|
@@ -127,7 +125,9 @@ const DSPillV2PropTypes = {
|
|
|
127
125
|
"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"
|
|
128
126
|
).defaultValue(false),
|
|
129
127
|
hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the pill should be in an error state. Only for input pill").defaultValue(false),
|
|
130
|
-
inputRender: import_ds_props_helpers.PropTypes.func.description(
|
|
128
|
+
inputRender: import_ds_props_helpers.PropTypes.func.description(
|
|
129
|
+
"Custom render function for the input pill. When omitted, the pill renders its own slot-enabled default input, exposing the dsPillInput slot for consumer overrides."
|
|
130
|
+
),
|
|
131
131
|
menuButtonProps: import_ds_props_helpers.PropTypes.shape(menuButtonPropsPropTypes).description("Props for the menu button pill").isRequiredIf((props) => props.type === "menubutton"),
|
|
132
132
|
trailingComma: import_ds_props_helpers.PropTypes.bool.description(
|
|
133
133
|
"Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../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 { 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_V2_SLOTS } from './constants/index.js';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n disableTruncationTooltip: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export type SlotFunctionArguments = {\n dsPillWrapper: () => object;\n dsPillLabel: () => object;\n dsPillPillGroup: () => object;\n dsPillPillButton: () => object;\n dsPillMenuButtonChevron: () => object;\n dsPillInput: () => object;\n };\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSPillV2Name,\n typeof PILL_V2_SLOTS\n > {\n inputId?: string;\n // Optional, not default-filled: when absent, InputPill renders its own slot-enabled DSInputText.\n // When present, InputPill still injects the core input wiring (id, value, onChange/onValueChange,\n // aria-invalid, placeholder, focus/blur handlers, innerRef, className, data-testid) so the provided\n // component works correctly whether it's a plain <input>-shaped or DSInputText-shaped component \u2014\n // it just doesn't force DSInputText-specific internal slot overrides (e.g. dsInputtextInput) onto it.\n inputRender?: React.ComponentType<any>;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n trailingComma?: boolean;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'labelOnly' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends\n RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends\n RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps | 'shape'\n >,\n XstyledProps {}\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n readOnly: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: false,\n disableTruncationTooltip: false,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst pillTypes = PropTypes.oneOf([\n 'label',\n 'labelOnly',\n 'value',\n 'input',\n 'dropdown',\n 'removable',\n 'readonly',\n 'menubutton',\n]);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_V2_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(false),\n disableTruncationTooltip: PropTypes.bool\n .description(\n 'When labelTruncated is true, suppresses the automatic overflow tooltip. Use in contexts where the tooltip is inaccessible (e.g. inside ComboboxMulti).',\n )\n .defaultValue(false),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node\n .description(\n 'Component rendered in the left agnostic region. Rendered by the value, readonly, label, labelOnly and removable types only.',\n )\n .defaultValue(null),\n IconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null),\n iconRight: PropTypes.node\n .description(\n 'Component rendered in the right agnostic region. Rendered by the value and readonly types only; label, labelOnly and removable render a left region only, and their right side is dictated by the type.',\n )\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the Pill is in readonly state or not.').defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description(\n 'Custom render function for the input pill. When omitted, the pill renders its own slot-enabled default input, exposing the dsPillInput slot for consumer overrides.',\n ),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n trailingComma: PropTypes.bool.description(\n 'Whether the disabled/aria-disabled/readonly pill should include a trailing comma or not',\n ),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,4BAA0D;AAE1D,8BAKO;AAEP,uBAA4C;AA+ErC,MAAM,uBAA6C;AAAA,EACxD,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,0BAA0B;AAAA;AAAA,EAC1B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,UAAU;AACZ;AAEA,MAAM,YAAY,kCAAU,MAAM;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAGD,MAAM,EAAE,UAAU,GAAG,yBAAyB,IAAI;AAE3C,MAAM,oBAAsD;AAAA,EACjE,OAAG,kDAAyB,+BAAc,8BAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,2BAA2B,EAAE;AAAA,EACjE,MAAM,UAAU,YAAY,0CAA0C,EAAE;AAAA,EACxE,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAC7D,YAAY,kGAAkG,EAC9G,aAAa,MAAM,IAAI;AAAA,EAC1B,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,oBAAoB,EAAE,aAAa,GAAG;AAAA,EACpF,WAAW,kCAAU,OAClB,YAAY,gEAAgE,EAC5E,aAAa,EAAE;AAAA,EAClB,gBAAgB,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACpG,0BAA0B,kCAAU,KACjC;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,cAAc,kCAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,EAAE;AAAA,EAC3G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,IAAI,EACjB,WAAW;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,CAAC;AAAA,EACH,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,IAAI;AAAA,EACpB,WAAW,kCAAU,KAClB;AAAA,IACC;AAAA,EACF,EACC,aAAa,IAAI;AAAA,EACpB,WAAW,kCAAU,KAClB;AAAA,IACC;AAAA,EACF,EACC,aAAa,IAAI,EACjB,WAAW;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,EACX,CAAC;AAAA,EACH,UAAU,kCAAU,KACjB,YAAY,6DAA6D,EACzE,aAAa,MAAM,IAAI;AAAA,EAC1B,kBAAkB,kCAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,EAAE;AAAA,EAChG,eAAe,kCAAU,KACtB,YAAY,+DAA+D,EAC3E,aAAa,MAAM,IAAI;AAAA,EAC1B,cAAc,kCAAU,KACrB,YAAY,uDAAuD,EACnE,aAAa,MAAM,IAAI;AAAA,EAC1B,YAAY,kCAAU,OAAO,YAAY,qDAAqD,EAAE,aAAa,GAAG;AAAA,EAChH,SAAS,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,MAAS;AAAA,EACrF,UAAU,kCAAU,KACjB,YAAY,wEAAwE,EACpF,aAAa,KAAK;AAAA,EACrB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KAAK,YAAY,+CAA+C,EAAE,aAAa,KAAK;AAAA,EACxG,0BAA0B,kCAAU,KACjC;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB,YAAY,mEAAmE,EAC/E,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KAAK;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,iBAAiB,kCAAU,MAAM,wBAAwB,EACtD,YAAY,gCAAgC,EAC5C,aAAa,CAAC,UAAyB,MAAM,SAAS,YAAY;AAAA,EACrE,eAAe,kCAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,eAAe,kCAAU,OACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC,EACf,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,iBAAiB,kCAAU,KACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI,EACvB,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,0BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,14 +27,16 @@ const SlotPropsAsObj = {
|
|
|
27
27
|
dsPillLabel: { "aria-label": "just a typescript test" },
|
|
28
28
|
dsPillPillGroup: { "aria-label": "just a typescript test" },
|
|
29
29
|
dsPillPillButton: { "aria-label": "just a typescript test" },
|
|
30
|
-
dsPillMenuButtonChevron: { "aria-label": "just a typescript test" }
|
|
30
|
+
dsPillMenuButtonChevron: { "aria-label": "just a typescript test" },
|
|
31
|
+
dsPillInput: { "aria-label": "just a typescript test" }
|
|
31
32
|
};
|
|
32
33
|
const SlotPropsAsFunctions = {
|
|
33
34
|
dsPillWrapper: () => ({ "aria-label": "just a typescript test" }),
|
|
34
35
|
dsPillLabel: () => ({ "aria-label": "just a typescript test" }),
|
|
35
36
|
dsPillPillGroup: () => ({ "aria-label": "just a typescript test" }),
|
|
36
37
|
dsPillPillButton: () => ({ "aria-label": "just a typescript test" }),
|
|
37
|
-
dsPillMenuButtonChevron: () => ({ "aria-label": "just a typescript test" })
|
|
38
|
+
dsPillMenuButtonChevron: () => ({ "aria-label": "just a typescript test" }),
|
|
39
|
+
dsPillInput: () => ({ "aria-label": "just a typescript test" })
|
|
38
40
|
};
|
|
39
41
|
const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
|
|
40
42
|
//# sourceMappingURL=slot-props.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPillV2Name, PILL_V2_SLOTS } from '../constants/index.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPillT.Props> = {\n dsPillWrapper: { 'aria-label': 'just a typescript test' },\n dsPillLabel: { 'aria-label': 'just a typescript test' },\n dsPillPillGroup: { 'aria-label': 'just a typescript test' },\n dsPillPillButton: { 'aria-label': 'just a typescript test' },\n dsPillMenuButtonChevron: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSPillT.SlotFunctionArguments = {\n dsPillWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillLabel: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillPillGroup: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillPillButton: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillMenuButtonChevron: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS>\n> = SlotPropsAsFunctions;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAAyC;AAAA,EAC7C,eAAe,EAAE,cAAc,yBAAyB;AAAA,EACxD,aAAa,EAAE,cAAc,yBAAyB;AAAA,EACtD,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,yBAAyB,EAAE,cAAc,yBAAyB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPillV2Name, PILL_V2_SLOTS } from '../constants/index.js';\nimport type { DSPillT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPillT.Props> = {\n dsPillWrapper: { 'aria-label': 'just a typescript test' },\n dsPillLabel: { 'aria-label': 'just a typescript test' },\n dsPillPillGroup: { 'aria-label': 'just a typescript test' },\n dsPillPillButton: { 'aria-label': 'just a typescript test' },\n dsPillMenuButtonChevron: { 'aria-label': 'just a typescript test' },\n dsPillInput: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSPillT.SlotFunctionArguments = {\n dsPillWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillLabel: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillPillGroup: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillPillButton: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillMenuButtonChevron: () => ({ 'aria-label': 'just a typescript test' }),\n dsPillInput: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSPillV2Name, typeof PILL_V2_SLOTS>\n> = SlotPropsAsFunctions;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAAyC;AAAA,EAC7C,eAAe,EAAE,cAAc,yBAAyB;AAAA,EACxD,aAAa,EAAE,cAAc,yBAAyB;AAAA,EACtD,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,aAAa,EAAE,cAAc,yBAAyB;AACxD;AAEA,MAAM,uBAAsD;AAAA,EAC1D,eAAe,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC/D,aAAa,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7D,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,aAAa,OAAO,EAAE,cAAc,yBAAyB;AAC/D;AAGA,MAAM,6CAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|