@elliemae/ds-pills-v2 3.51.0-next.1 → 3.51.0-next.11
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/DSPillDefinitions.js +2 -2
- package/dist/cjs/DSPillDefinitions.js.map +1 -1
- package/dist/cjs/components/types/MenuButtonPill.js +2 -2
- package/dist/cjs/components/types/MenuButtonPill.js.map +1 -1
- package/dist/cjs/components/types/ReadOnlyPill.js +8 -6
- package/dist/cjs/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +6 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js +1 -0
- package/dist/cjs/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/esm/DSPillDefinitions.js +2 -2
- package/dist/esm/DSPillDefinitions.js.map +1 -1
- package/dist/esm/components/types/MenuButtonPill.js +2 -2
- package/dist/esm/components/types/MenuButtonPill.js.map +1 -1
- package/dist/esm/components/types/ReadOnlyPill.js +8 -6
- package/dist/esm/components/types/ReadOnlyPill.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +6 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js +1 -0
- package/dist/esm/typescript-testing/typescript-pills-v2-valid.js.map +2 -2
- package/dist/types/DSPillDefinitions.d.ts +2 -2
- package/dist/types/react-desc-prop-types.d.ts +3 -0
- package/package.json +16 -68
|
@@ -35,6 +35,6 @@ __export(DSPillDefinitions_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(DSPillDefinitions_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
const DSPillName = "DSPill";
|
|
38
|
-
const DSPillButtonName = "
|
|
39
|
-
const DSPillGroupName = "
|
|
38
|
+
const DSPillButtonName = "DSPillbutton";
|
|
39
|
+
const DSPillGroupName = "DSPillgroup";
|
|
40
40
|
//# sourceMappingURL=DSPillDefinitions.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSPillDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = '
|
|
4
|
+
"sourcesContent": ["export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = 'DSPillbutton';\n\nexport const DSPillGroupName = 'DSPillgroup';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,7 +55,7 @@ const MenuButtonPill = import_react.default.memo(
|
|
|
55
55
|
const { width = import_react_desc_prop_types.DSPillButtonDefaultProps.width, height = import_react_desc_prop_types.DSPillButtonDefaultProps.height } = menuButtonProps;
|
|
56
56
|
const memoizedRows = (0, import_react.useMemo)(() => rowsForDsButtonV3(size), [size]);
|
|
57
57
|
const memoizedCols = (0, import_react.useMemo)(() => colsForDsButtonV3(size), [size]);
|
|
58
|
-
const
|
|
58
|
+
const dsMenubuttonRootProps = (0, import_react.useMemo)(
|
|
59
59
|
() => ({
|
|
60
60
|
width: `${width}`,
|
|
61
61
|
height: `${height}`
|
|
@@ -82,7 +82,7 @@ const MenuButtonPill = import_react.default.memo(
|
|
|
82
82
|
{
|
|
83
83
|
innerRef,
|
|
84
84
|
"aria-label": finalAriaLabel,
|
|
85
|
-
|
|
85
|
+
dsMenubuttonRoot: dsMenubuttonRootProps,
|
|
86
86
|
...menuButtonProps,
|
|
87
87
|
"data-testid": "ds-pill-menu-button-chevron",
|
|
88
88
|
buttonType: "raw",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/MenuButtonPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n* 1 - StyledPillButton is based on DSButtonV2\n* StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n* DSButtonV2 and DSButtonV3 have different stylings.\n* 2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n [...]\n`\n* The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n* the \"magic\" values are actually 24px RT for \"m\" and 18px RT for \"s\"\n***************************************************************************************************************\n* Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n* and I'm basing the styles on the same assumptions for width/height magic values.\n************************************************************************************************************* */\nconst rowsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n if (!menuButtonProps) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps was not provided');\n }\n if (Object.keys(menuButtonProps).length === 0) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps is empty');\n }\n const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n* 1 - StyledPillButton is based on DSButtonV2\n* StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n* DSButtonV2 and DSButtonV3 have different stylings.\n* 2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n [...]\n`\n* The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n* the \"magic\" values are actually 24px RT for \"m\" and 18px RT for \"s\"\n***************************************************************************************************************\n* Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n* and I'm basing the styles on the same assumptions for width/height magic values.\n************************************************************************************************************* */\nconst rowsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n if (!menuButtonProps) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps was not provided');\n }\n if (Object.keys(menuButtonProps).length === 0) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps is empty');\n }\n const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const dsMenubuttonRootProps = useMemo(\n () => ({\n width: `${width}`,\n height: `${height}`,\n }),\n [height, width],\n );\n\n const finalAriaLabel = ariaLabel || label;\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={memoizedCols}\n rows={memoizedRows}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent labelTruncated={labelTruncated} label={label} />\n <StyledPillMenuButton\n innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n aria-label={finalAriaLabel}\n dsMenubuttonRoot={dsMenubuttonRootProps}\n {...menuButtonProps}\n // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n // are based on the button having the following props:\n data-testid=\"ds-pill-menu-button-chevron\"\n buttonType=\"raw\"\n className=\"ds-pill-button-right ds-pill-focus-point\"\n type=\"button\"\n width={`${width}`}\n height={`${height}`}\n // end of props for correcr circle/square/pill group visual behavior\n >\n <ChevronSmallDown color={['brand-primary', '800']} />\n </StyledPillMenuButton>\n </StyledDropdownPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AA/DN,sBAAiC;AAEjC,mBAA+B;AAC/B,iBAAoB;AAEpB,mCAAyC;AACzC,2BAA8B;AAC9B,oBAAgE;AAqBhE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MAAM,EAAE,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC5G,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,sBAAsB,GAAG,QAAQ,CAAC,QAAQ,wBAAwB,EAAE,IACtF,EAAE,OAAO,CAAC,QAAQ,wBAAwB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAExF,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,MAAM;AACzE,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAI,CAAC,iBAAiB;AAEpB,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,kCAAkC;AAAA,IACpD;AACA,QAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,0BAA0B;AAAA,IAC5C;AACA,UAAM,EAAE,QAAQ,sDAAyB,OAAO,SAAS,sDAAyB,OAAO,IAAI;AAE7F,UAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,mBAAe,sBAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,4BAAwB;AAAA,MAC5B,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,QACf,QAAQ,GAAG,MAAM;AAAA,MACnB;AAAA,MACA,CAAC,QAAQ,KAAK;AAAA,IAChB;AAEA,UAAM,iBAAiB,aAAa;AAEpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,sDAAC,sCAAc,gBAAgC,OAAc;AAAA,UAC7D;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAY;AAAA,cACZ,kBAAkB;AAAA,cACjB,GAAG;AAAA,cAGJ,eAAY;AAAA,cACZ,YAAW;AAAA,cACX,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cAGjB,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -37,9 +37,11 @@ var import_react = __toESM(require("react"));
|
|
|
37
37
|
var import_TextComponent = require("../TextComponent.js");
|
|
38
38
|
var import_styled = require("../styled.js");
|
|
39
39
|
const ReadOnlyPill = import_react.default.memo(
|
|
40
|
-
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
|
|
40
|
+
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {
|
|
41
41
|
const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
|
|
42
42
|
const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
|
|
43
|
+
const hasIconLeftNew = IconLeft !== null || IconRight !== null && label === "";
|
|
44
|
+
const hasIconRightNew = IconRight !== null || IconLeft !== null && label === "";
|
|
43
45
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
44
46
|
import_styled.StyledReadonlyPillWrapper,
|
|
45
47
|
{
|
|
@@ -48,16 +50,16 @@ const ReadOnlyPill = import_react.default.memo(
|
|
|
48
50
|
className: "ds-pill-wrapper ds-pill-wrapper-readonly",
|
|
49
51
|
"data-testid": "ds-pill-wrapper",
|
|
50
52
|
"data-label": ariaLabel || label,
|
|
51
|
-
cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter(
|
|
53
|
+
cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
|
|
52
54
|
(notFalse) => notFalse
|
|
53
55
|
),
|
|
54
56
|
gutter: "xxxs",
|
|
55
|
-
hasIconRight,
|
|
56
|
-
hasIconLeft,
|
|
57
|
+
hasIconRight: hasIconRight || hasIconRightNew,
|
|
58
|
+
hasIconLeft: hasIconLeft || hasIconLeftNew,
|
|
57
59
|
children: [
|
|
58
|
-
iconLeft,
|
|
60
|
+
IconLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLeft, { label }) : iconLeft,
|
|
59
61
|
label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextComponent.TextComponent, { labelTruncated, label }) : null,
|
|
60
|
-
iconRight
|
|
62
|
+
IconRight ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRight, { label }) : iconRight
|
|
61
63
|
]
|
|
62
64
|
}
|
|
63
65
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/ReadOnlyPill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n return (\n <StyledReadonlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n data-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n cols={\n [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n gutter=\"xxxs\"\n hasIconRight={hasIconRight}\n hasIconLeft={hasIconLeft}\n >\n {iconLeft}\n {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n {iconRight}\n </StyledReadonlyPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {\n const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n return (\n <StyledReadonlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n data-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n cols={\n [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n gutter=\"xxxs\"\n hasIconRight={hasIconRight || hasIconRightNew}\n hasIconLeft={hasIconLeft || hasIconLeftNew}\n >\n {IconLeft ? <IconLeft label={label} /> : iconLeft}\n {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n {IconRight ? <IconRight label={label} /> : iconRight}\n </StyledReadonlyPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,mBAAkB;AAElB,2BAA8B;AAC9B,oBAA0C;AAEnC,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,MAAM;AACxF,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,UAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,UACpG,CAAC,aAAa;AAAA,QAChB;AAAA,QAEF,QAAO;AAAA,QACP,cAAc,gBAAgB;AAAA,QAC9B,aAAa,eAAe;AAAA,QAE3B;AAAA,qBAAW,4CAAC,YAAS,OAAc,IAAK;AAAA,UACxC,QAAQ,4CAAC,sCAAc,gBAAgC,OAAc,IAAK;AAAA,UAC1E,YAAY,4CAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -56,6 +56,7 @@ const DSPillV2DefaultProps = {
|
|
|
56
56
|
tooltipValue: "",
|
|
57
57
|
iconLeft: null,
|
|
58
58
|
IconLeft: null,
|
|
59
|
+
IconRight: null,
|
|
59
60
|
iconRight: null,
|
|
60
61
|
onRemove: () => null,
|
|
61
62
|
inputPlaceholder: "",
|
|
@@ -99,7 +100,11 @@ const DSPillV2PropTypes = {
|
|
|
99
100
|
message: "Use IconLeft instead for accessibility reasons"
|
|
100
101
|
}),
|
|
101
102
|
IconLeft: import_ds_props_helpers.PropTypes.node.description("A component to show int the left of a label pill").defaultValue(null),
|
|
102
|
-
|
|
103
|
+
IconRight: import_ds_props_helpers.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
|
|
104
|
+
iconRight: import_ds_props_helpers.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null).deprecated({
|
|
105
|
+
version: "4.x",
|
|
106
|
+
message: "Use IconRight instead for accessibility reasons"
|
|
107
|
+
}),
|
|
103
108
|
onRemove: import_ds_props_helpers.PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
|
|
104
109
|
inputPlaceholder: import_ds_props_helpers.PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
|
|
105
110
|
onInputChange: import_ds_props_helpers.PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
|
|
@@ -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 { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface DSPillButtonDefaultPropsT {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type?: 'left' | 'right' | 'only';\n width?: string;\n height?: string;\n applyAriaDisabled?: boolean;\n }\n export interface InternalButtonProps\n extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n applyAriaDisabled: boolean;\n }\n\n export interface DefaultGroupPropsT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n export interface GroupProps extends GlobalAttributesT {\n width?: string;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n export interface InternalGroupProps extends GlobalAttributesT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n ...globalAttributesPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,qBAAwB;AACxB,4BAA0D;AAE1D,8BAAuE;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface DSPillButtonDefaultPropsT {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type?: 'left' | 'right' | 'only';\n width?: string;\n height?: string;\n applyAriaDisabled?: boolean;\n }\n export interface InternalButtonProps\n extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n applyAriaDisabled: boolean;\n }\n\n export interface DefaultGroupPropsT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n export interface GroupProps extends GlobalAttributesT {\n width?: string;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n export interface InternalGroupProps extends GlobalAttributesT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n ...globalAttributesPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-pills-v2-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n type: 'value',\n label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n type: 'value',\n label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n IconRight: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
const DSPillName = "DSPill";
|
|
3
|
-
const DSPillButtonName = "
|
|
4
|
-
const DSPillGroupName = "
|
|
3
|
+
const DSPillButtonName = "DSPillbutton";
|
|
4
|
+
const DSPillGroupName = "DSPillgroup";
|
|
5
5
|
export {
|
|
6
6
|
DSPillButtonName,
|
|
7
7
|
DSPillGroupName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSPillDefinitions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = 'DSPillbutton';\n\nexport const DSPillGroupName = 'DSPillgroup';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,aAAa;AAEnB,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,7 +22,7 @@ const MenuButtonPill = React2.memo(
|
|
|
22
22
|
const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;
|
|
23
23
|
const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);
|
|
24
24
|
const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);
|
|
25
|
-
const
|
|
25
|
+
const dsMenubuttonRootProps = useMemo(
|
|
26
26
|
() => ({
|
|
27
27
|
width: `${width}`,
|
|
28
28
|
height: `${height}`
|
|
@@ -49,7 +49,7 @@ const MenuButtonPill = React2.memo(
|
|
|
49
49
|
{
|
|
50
50
|
innerRef,
|
|
51
51
|
"aria-label": finalAriaLabel,
|
|
52
|
-
|
|
52
|
+
dsMenubuttonRoot: dsMenubuttonRootProps,
|
|
53
53
|
...menuButtonProps,
|
|
54
54
|
"data-testid": "ds-pill-menu-button-chevron",
|
|
55
55
|
buttonType: "raw",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/MenuButtonPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n* 1 - StyledPillButton is based on DSButtonV2\n* StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n* DSButtonV2 and DSButtonV3 have different stylings.\n* 2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n [...]\n`\n* The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n* the \"magic\" values are actually 24px RT for \"m\" and 18px RT for \"s\"\n***************************************************************************************************************\n* Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n* and I'm basing the styles on the same assumptions for width/height magic values.\n************************************************************************************************************* */\nconst rowsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n if (!menuButtonProps) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps was not provided');\n }\n if (Object.keys(menuButtonProps).length === 0) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps is empty');\n }\n const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { DSPillButtonDefaultProps } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledDropdownPillWrapper, StyledPillMenuButton } from '../styled.js';\n\n/* ************************************************************************************************************\n* Regarding magic numbers, default width and height and why this is different from \"StyledPillButton\" implementation\n* 1 - StyledPillButton is based on DSButtonV2\n* StyledPillMenuButton is based on DSMenuButton (which is DSButtonV3)\n* DSButtonV2 and DSButtonV3 have different stylings.\n* 2 - as per \"commonPillWrapperCss\" in \"styled.js\" (relevant code at comment writing time is below)\nconst commonPillWrapperCss = css<{ pillSize: 'm' | 's'; disabled?: boolean; applyAriaDisabled?: boolean }>`\n height: ${(props) => (props?.pillSize === 'm' ? '1.846rem' : '1.3846rem')};\n @media (max-width: ${(props) => props.theme.breakpoints?.small}) {\n height: ${(props) => (props?.pillSize === 'm' ? '1.5rem' : '1.125rem')};\n }\n [...]\n`\n* The Wrapper is setting an height to the whole pill based on the prop \"pillSize\" (which corresponds to \"size\" in the component)\n* the \"magic\" values are actually 24px RT for \"m\" and 18px RT for \"s\"\n***************************************************************************************************************\n* Given the above, this iteration of StyledDropdownPillWrapper needs to have different styles/cols/rows to accomodate DSButtonV3\n* and I'm basing the styles on the same assumptions for width/height magic values.\n************************************************************************************************************* */\nconst rowsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm' ? { small: ['1.5rem'], medium: ['1.846rem'] } : { small: ['1.125rem'], medium: ['1.3846rem'] };\nconst colsForDsButtonV3 = (size: 'm' | 's') =>\n size === 'm'\n ? { small: ['auto', 'minmax(1.5rem, auto)'], medium: ['auto', 'minmax(1.846rem, auto)'] }\n : { small: ['auto', 'minmax(1.125rem, auto)'], medium: ['auto', 'minmax(1.3846rem, auto)'] };\n\nexport const MenuButtonPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, innerRef, ariaLabel, menuButtonProps }) => {\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n if (!menuButtonProps) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps was not provided');\n }\n if (Object.keys(menuButtonProps).length === 0) {\n // eslint-disable-next-line no-console\n console.log('menuButtonProps', menuButtonProps);\n throw new Error('menuButtonProps is empty');\n }\n const { width = DSPillButtonDefaultProps.width, height = DSPillButtonDefaultProps.height } = menuButtonProps;\n\n const memoizedRows = useMemo(() => rowsForDsButtonV3(size), [size]);\n const memoizedCols = useMemo(() => colsForDsButtonV3(size), [size]);\n const dsMenubuttonRootProps = useMemo(\n () => ({\n width: `${width}`,\n height: `${height}`,\n }),\n [height, width],\n );\n\n const finalAriaLabel = ariaLabel || label;\n\n return (\n <StyledDropdownPillWrapper\n pillSize={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={memoizedCols}\n rows={memoizedRows}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent labelTruncated={labelTruncated} label={label} />\n <StyledPillMenuButton\n innerRef={innerRef as DSMenuButtonT.Props['innerRef']}\n aria-label={finalAriaLabel}\n dsMenubuttonRoot={dsMenubuttonRootProps}\n {...menuButtonProps}\n // the styles that makes the circle visual behave correctly in \"circle\"/\"square\"/\"pill group\"\n // are based on the button having the following props:\n data-testid=\"ds-pill-menu-button-chevron\"\n buttonType=\"raw\"\n className=\"ds-pill-button-right ds-pill-focus-point\"\n type=\"button\"\n width={`${width}`}\n height={`${height}`}\n // end of props for correcr circle/square/pill group visual behavior\n >\n <ChevronSmallDown color={['brand-primary', '800']} />\n </StyledPillMenuButton>\n </StyledDropdownPillWrapper>\n );\n },\n);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACgEjB,SAWE,KAXF;AA/DN,SAAS,wBAAwB;AAEjC,OAAOA,UAAS,eAAe;AAC/B,SAAS,WAAW;AAEpB,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B,4BAA4B;AAqBhE,MAAM,oBAAoB,CAAC,SACzB,SAAS,MAAM,EAAE,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC5G,MAAM,oBAAoB,CAAC,SACzB,SAAS,MACL,EAAE,OAAO,CAAC,QAAQ,sBAAsB,GAAG,QAAQ,CAAC,QAAQ,wBAAwB,EAAE,IACtF,EAAE,OAAO,CAAC,QAAQ,wBAAwB,GAAG,QAAQ,CAAC,QAAQ,yBAAyB,EAAE;AAExF,MAAM,iBAAiBA,OAAM;AAAA,EAClC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB,MAAM;AACzE,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC;AACpD,QAAI,CAAC,iBAAiB;AAEpB,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,kCAAkC;AAAA,IACpD;AACA,QAAI,OAAO,KAAK,eAAe,EAAE,WAAW,GAAG;AAE7C,cAAQ,IAAI,mBAAmB,eAAe;AAC9C,YAAM,IAAI,MAAM,0BAA0B;AAAA,IAC5C;AACA,UAAM,EAAE,QAAQ,yBAAyB,OAAO,SAAS,yBAAyB,OAAO,IAAI;AAE7F,UAAM,eAAe,QAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,eAAe,QAAQ,MAAM,kBAAkB,IAAI,GAAG,CAAC,IAAI,CAAC;AAClE,UAAM,wBAAwB;AAAA,MAC5B,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,QACf,QAAQ,GAAG,MAAM;AAAA,MACnB;AAAA,MACA,CAAC,QAAQ,KAAK;AAAA,IAChB;AAEA,UAAM,iBAAiB,aAAa;AAEpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAO;AAAA,QACP,YAAW;AAAA,QACX,cAAa;AAAA,QAEb;AAAA,8BAAC,iBAAc,gBAAgC,OAAc;AAAA,UAC7D;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,cAAY;AAAA,cACZ,kBAAkB;AAAA,cACjB,GAAG;AAAA,cAGJ,eAAY;AAAA,cACZ,YAAW;AAAA,cACX,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cAGjB,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -4,9 +4,11 @@ import React2 from "react";
|
|
|
4
4
|
import { TextComponent } from "../TextComponent.js";
|
|
5
5
|
import { StyledReadonlyPillWrapper } from "../styled.js";
|
|
6
6
|
const ReadOnlyPill = React2.memo(
|
|
7
|
-
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
|
|
7
|
+
({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {
|
|
8
8
|
const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
|
|
9
9
|
const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
|
|
10
|
+
const hasIconLeftNew = IconLeft !== null || IconRight !== null && label === "";
|
|
11
|
+
const hasIconRightNew = IconRight !== null || IconLeft !== null && label === "";
|
|
10
12
|
return /* @__PURE__ */ jsxs(
|
|
11
13
|
StyledReadonlyPillWrapper,
|
|
12
14
|
{
|
|
@@ -15,16 +17,16 @@ const ReadOnlyPill = React2.memo(
|
|
|
15
17
|
className: "ds-pill-wrapper ds-pill-wrapper-readonly",
|
|
16
18
|
"data-testid": "ds-pill-wrapper",
|
|
17
19
|
"data-label": ariaLabel || label,
|
|
18
|
-
cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter(
|
|
20
|
+
cols: [(iconLeft || IconLeft) && "min-content", label && "auto", (iconRight || IconRight) && "min-content"].filter(
|
|
19
21
|
(notFalse) => notFalse
|
|
20
22
|
),
|
|
21
23
|
gutter: "xxxs",
|
|
22
|
-
hasIconRight,
|
|
23
|
-
hasIconLeft,
|
|
24
|
+
hasIconRight: hasIconRight || hasIconRightNew,
|
|
25
|
+
hasIconLeft: hasIconLeft || hasIconLeftNew,
|
|
24
26
|
children: [
|
|
25
|
-
iconLeft,
|
|
27
|
+
IconLeft ? /* @__PURE__ */ jsx(IconLeft, { label }) : iconLeft,
|
|
26
28
|
label ? /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label }) : null,
|
|
27
|
-
iconRight
|
|
29
|
+
IconRight ? /* @__PURE__ */ jsx(IconRight, { label }) : iconRight
|
|
28
30
|
]
|
|
29
31
|
}
|
|
30
32
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ReadOnlyPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n return (\n <StyledReadonlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n data-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n cols={\n [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n gutter=\"xxxs\"\n hasIconRight={hasIconRight}\n hasIconLeft={hasIconLeft}\n >\n {iconLeft}\n {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n {iconRight}\n </StyledReadonlyPillWrapper>\n );\n },\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledReadonlyPillWrapper } from '../styled.js';\n\nexport const ReadOnlyPill = React.memo<DSPillT.InternalProps>(\n ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel, IconLeft, IconRight }) => {\n const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n const hasIconLeftNew = IconLeft !== null || (IconRight !== null && label === '');\n const hasIconRightNew = IconRight !== null || (IconLeft !== null && label === '');\n\n return (\n <StyledReadonlyPillWrapper\n pillSize={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n data-testid=\"ds-pill-wrapper\"\n data-label={ariaLabel || label}\n cols={\n [(iconLeft || IconLeft) && 'min-content', label && 'auto', (iconRight || IconRight) && 'min-content'].filter(\n (notFalse) => notFalse,\n ) as string[]\n }\n gutter=\"xxxs\"\n hasIconRight={hasIconRight || hasIconRightNew}\n hasIconLeft={hasIconLeft || hasIconLeftNew}\n >\n {IconLeft ? <IconLeft label={label} /> : iconLeft}\n {label ? <TextComponent labelTruncated={labelTruncated} label={label} /> : null}\n {IconRight ? <IconRight label={label} /> : iconRight}\n </StyledReadonlyPillWrapper>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACejB,SAec,KAfd;AAdN,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAEnC,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,WAAW,UAAU,UAAU,MAAM;AACxF,UAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,UAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,UAAM,iBAAiB,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC7E,UAAM,kBAAkB,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,aAAa;AAAA,QACzB,MACE,EAAE,YAAY,aAAa,eAAe,SAAS,SAAS,aAAa,cAAc,aAAa,EAAE;AAAA,UACpG,CAAC,aAAa;AAAA,QAChB;AAAA,QAEF,QAAO;AAAA,QACP,cAAc,gBAAgB;AAAA,QAC9B,aAAa,eAAe;AAAA,QAE3B;AAAA,qBAAW,oBAAC,YAAS,OAAc,IAAK;AAAA,UACxC,QAAQ,oBAAC,iBAAc,gBAAgC,OAAc,IAAK;AAAA,UAC1E,YAAY,oBAAC,aAAU,OAAc,IAAK;AAAA;AAAA;AAAA,IAC7C;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ const DSPillV2DefaultProps = {
|
|
|
15
15
|
tooltipValue: "",
|
|
16
16
|
iconLeft: null,
|
|
17
17
|
IconLeft: null,
|
|
18
|
+
IconRight: null,
|
|
18
19
|
iconRight: null,
|
|
19
20
|
onRemove: () => null,
|
|
20
21
|
inputPlaceholder: "",
|
|
@@ -58,7 +59,11 @@ const DSPillV2PropTypes = {
|
|
|
58
59
|
message: "Use IconLeft instead for accessibility reasons"
|
|
59
60
|
}),
|
|
60
61
|
IconLeft: PropTypes.node.description("A component to show int the left of a label pill").defaultValue(null),
|
|
61
|
-
|
|
62
|
+
IconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
|
|
63
|
+
iconRight: PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null).deprecated({
|
|
64
|
+
version: "4.x",
|
|
65
|
+
message: "Use IconRight instead for accessibility reasons"
|
|
66
|
+
}),
|
|
62
67
|
onRemove: PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
|
|
63
68
|
inputPlaceholder: PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
|
|
64
69
|
onInputChange: PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
|
|
@@ -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 { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface DSPillButtonDefaultPropsT {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type?: 'left' | 'right' | 'only';\n width?: string;\n height?: string;\n applyAriaDisabled?: boolean;\n }\n export interface InternalButtonProps\n extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n applyAriaDisabled: boolean;\n }\n\n export interface DefaultGroupPropsT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n export interface GroupProps extends GlobalAttributesT {\n width?: string;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n export interface InternalGroupProps extends GlobalAttributesT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n ...globalAttributesPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,eAAe;AACxB,SAAS,6BAAiD;AAE1D,SAAS,WAAW,2BAA2B,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSInput } from '@elliemae/ds-form';\nimport { DSMenuButtonPropTypes, type DSMenuButtonT } from '@elliemae/ds-menu-button';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nexport namespace DSPillT {\n export interface DefaultProps {\n innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n disabled: boolean;\n applyAriaDisabled: boolean;\n applyTooltipOverflowWrap: boolean;\n hasError: boolean;\n ariaLabel: string;\n size: 'm' | 's';\n labelTruncated: boolean;\n tooltipValue: string;\n iconLeft: JSX.Element | null;\n IconLeft: React.ComponentType<{ label: string }> | null;\n IconRight: React.ComponentType<{ label: string }> | null;\n iconRight: JSX.Element | null;\n onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputPlaceholder: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, newValue: string) => void;\n onInputClear: (e: React.KeyboardEvent | React.MouseEvent) => void;\n inputWidth: number;\n inputRender: React.ComponentType<any>;\n dropdownProps: DSDropdownMenuT.Props;\n onDropdownClick: (e: React.KeyboardEvent | React.MouseEvent) => void;\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface OptionalProps {\n inputId?: string;\n menuButtonProps?: Omit<DSMenuButtonT.Props, 'children'>;\n }\n export interface RequiredProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly' | 'menubutton';\n }\n\n export interface Props\n extends RequiredProps,\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends RequiredProps,\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface DSPillButtonDefaultPropsT {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n }\n export interface ButtonProps extends Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type?: 'left' | 'right' | 'only';\n width?: string;\n height?: string;\n applyAriaDisabled?: boolean;\n }\n export interface InternalButtonProps\n extends Omit<DSButtonT.InternalProps, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot'> {\n type: 'left' | 'right' | 'only';\n width: string;\n height: string;\n applyAriaDisabled: boolean;\n }\n\n export interface DefaultGroupPropsT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n }\n export interface GroupProps extends GlobalAttributesT {\n width?: string;\n innerRef?: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n export interface InternalGroupProps extends GlobalAttributesT {\n width: string;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n children: React.ReactNode;\n }\n}\n\nexport const DSPillV2DefaultProps: DSPillT.DefaultProps = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n applyTooltipOverflowWrap: false, // turn on for > 25.1\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n IconLeft: null,\n IconRight: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n // TODO: remove DSInput in favor of V2\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n inputRender: DSInput,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps: DSPillT.DSPillButtonDefaultPropsT = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps: DSPillT.DefaultGroupPropsT = {\n width: 'fit-content',\n innerRef: () => null,\n};\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly', 'menubutton']);\n\n// children is embedded by the pill itself, forced to be a chevron pointing down by design\nconst { children, ...menuButtonPropsPropTypes } = DSMenuButtonPropTypes;\n\nexport const DSPillV2PropTypes: DSPropTypesSchema<DSPillT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node\n .description('A component to show int the left of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconLeft instead for accessibility reasons',\n }),\n IconLeft: PropTypes.node.description('A component to show int the left of a label pill').defaultValue(null),\n IconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node\n .description('A component to show in the right of a readonly pill')\n .defaultValue(null)\n .deprecated({\n version: '4.x',\n message: 'Use IconRight instead for accessibility reasons',\n }),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),\n disabled: PropTypes.bool\n .description('Whether the pill should be disabled. Only for value and removable pill')\n .defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n hasError: PropTypes.bool\n .description('Whether the pill should be in an error state. Only for input pill')\n .defaultValue(false),\n inputRender: PropTypes.func.description('Custom render function for the input pill').defaultValue(`DSInput`),\n menuButtonProps: PropTypes.shape(menuButtonPropsPropTypes)\n .description('Props for the menu button pill')\n .isRequiredIf((props: DSPillT.Props) => props.type === 'menubutton'),\n dropdownProps: PropTypes.object\n .description(\n 'Properties that will be used for the dropdown-menu. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue({})\n .deprecated({ version: '25.3' }),\n onDropdownClick: PropTypes.func\n .description(\n 'Callback when dropdown button is clicked or pressed. For accessibility reasons this is deprecated in favour of menuButtonProps',\n )\n .defaultValue(() => null)\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillT.ButtonProps> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('root element data-testid'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n\nexport const DSPillGroupPropTypes: DSPropTypesSchema<DSPillT.GroupProps> = {\n ...globalAttributesPropTypes,\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n children: PropTypes.node.description('Pills to render in the group').isRequired,\n};\n\nexport const DSPillV2PropTypesSchema = DSPillV2PropTypes as unknown as ValidationMap<DSPillT.Props>;\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillT.ButtonProps>;\n\nexport const DSPillGroupPropTypesSchema = DSPillGroupPropTypes as unknown as ValidationMap<DSPillT.GroupProps>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-pills-v2-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n type: 'value',\n label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPillV2 } from '../index.js';\nimport type { DSPillT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPillT.Props;\ntype ComponentPropsInternals = DSPillT.InternalProps;\ntype ComponentPropsDefaultProps = DSPillT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPillT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPillT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n type: 'value',\n label: 'label',\n};\nconst testOptionalProps: Required<ComponentPropsOptionalProps> = {\n inputId: 'dsId',\n menuButtonProps: {\n options: [],\n selectedItems: [],\n onItemSelected: () => {},\n onActivateItem: () => {},\n },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n ariaLabel: '',\n size: 'm',\n tooltipValue: '',\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n inputWidth: 72,\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n IconLeft: () => null,\n IconRight: () => null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n applyTooltipOverflowWrap: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n type: 'value',\n label: 'label',\n inputId: 'dsId',\n innerRef: () => null,\n disabled: false,\n applyAriaDisabled: false,\n hasError: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: () => <input type=\"text\"></input>,\n dropdownProps: {\n options: [],\n isSkeleton: false,\n isOpened: false,\n },\n onDropdownClick: () => null,\n tabIndex: 0,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPillV2 {...testExplicitDefinition} />\n <DSPillV2 {...testInferedTypeCompatibility} />\n <DSPillV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPillV2\n type=\"value\"\n label=\"label\"\n inputId=\"dsId\"\n innerRef={() => null}\n disabled={false}\n applyAriaDisabled={false}\n hasError={false}\n ariaLabel=\"\"\n size=\"m\"\n labelTruncated\n tooltipValue=\"\"\n iconLeft={null}\n iconRight={null}\n onRemove={() => null}\n inputPlaceholder=\"\"\n onInputChange={() => null}\n onInputClear={() => null}\n inputWidth={72}\n // inputRender={() => <input type=\"text\"></input>}\n dropdownProps={{\n options: [],\n isSkeleton: false,\n isOpened: false,\n }}\n onDropdownClick={() => null}\n tabIndex={0}\n >\n Button Label\n </DSPillV2>\n </>\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export declare const DSPillName = "DSPill";
|
|
2
|
-
export declare const DSPillButtonName = "
|
|
3
|
-
export declare const DSPillGroupName = "
|
|
2
|
+
export declare const DSPillButtonName = "DSPillbutton";
|
|
3
|
+
export declare const DSPillGroupName = "DSPillgroup";
|
|
@@ -20,6 +20,9 @@ export declare namespace DSPillT {
|
|
|
20
20
|
IconLeft: React.ComponentType<{
|
|
21
21
|
label: string;
|
|
22
22
|
}> | null;
|
|
23
|
+
IconRight: React.ComponentType<{
|
|
24
|
+
label: string;
|
|
25
|
+
}> | null;
|
|
23
26
|
iconRight: JSX.Element | null;
|
|
24
27
|
onRemove: (e: React.KeyboardEvent | React.MouseEvent) => void;
|
|
25
28
|
inputPlaceholder: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pills-v2",
|
|
3
|
-
"version": "3.51.0-next.
|
|
3
|
+
"version": "3.51.0-next.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills V2",
|
|
6
6
|
"files": [
|
|
@@ -14,58 +14,6 @@
|
|
|
14
14
|
"types": "./dist/types/index.d.ts",
|
|
15
15
|
"import": "./dist/esm/index.js",
|
|
16
16
|
"require": "./dist/cjs/index.js"
|
|
17
|
-
},
|
|
18
|
-
"./props": {
|
|
19
|
-
"import": "./dist/esm/props.js",
|
|
20
|
-
"require": "./dist/cjs/props.js"
|
|
21
|
-
},
|
|
22
|
-
"./components/types/ValuePill": {
|
|
23
|
-
"import": "./dist/esm/components/types/ValuePill.js",
|
|
24
|
-
"require": "./dist/cjs/components/types/ValuePill.js"
|
|
25
|
-
},
|
|
26
|
-
"./components/types/RemovablePill": {
|
|
27
|
-
"import": "./dist/esm/components/types/RemovablePill.js",
|
|
28
|
-
"require": "./dist/cjs/components/types/RemovablePill.js"
|
|
29
|
-
},
|
|
30
|
-
"./components/types/ReadOnlyPill": {
|
|
31
|
-
"import": "./dist/esm/components/types/ReadOnlyPill.js",
|
|
32
|
-
"require": "./dist/cjs/components/types/ReadOnlyPill.js"
|
|
33
|
-
},
|
|
34
|
-
"./components/types/LabelPill": {
|
|
35
|
-
"import": "./dist/esm/components/types/LabelPill.js",
|
|
36
|
-
"require": "./dist/cjs/components/types/LabelPill.js"
|
|
37
|
-
},
|
|
38
|
-
"./components/types/InputPill": {
|
|
39
|
-
"import": "./dist/esm/components/types/InputPill.js",
|
|
40
|
-
"require": "./dist/cjs/components/types/InputPill.js"
|
|
41
|
-
},
|
|
42
|
-
"./components/types": {
|
|
43
|
-
"import": "./dist/esm/components/types/index.js",
|
|
44
|
-
"require": "./dist/cjs/components/types/index.js"
|
|
45
|
-
},
|
|
46
|
-
"./components/types/DropdownPill": {
|
|
47
|
-
"import": "./dist/esm/components/types/DropdownPill.js",
|
|
48
|
-
"require": "./dist/cjs/components/types/DropdownPill.js"
|
|
49
|
-
},
|
|
50
|
-
"./components/styled": {
|
|
51
|
-
"import": "./dist/esm/components/styled.js",
|
|
52
|
-
"require": "./dist/cjs/components/styled.js"
|
|
53
|
-
},
|
|
54
|
-
"./components/PillGroup": {
|
|
55
|
-
"import": "./dist/esm/components/PillGroup.js",
|
|
56
|
-
"require": "./dist/cjs/components/PillGroup.js"
|
|
57
|
-
},
|
|
58
|
-
"./components/PillButton": {
|
|
59
|
-
"import": "./dist/esm/components/PillButton.js",
|
|
60
|
-
"require": "./dist/cjs/components/PillButton.js"
|
|
61
|
-
},
|
|
62
|
-
"./components/Pill": {
|
|
63
|
-
"import": "./dist/esm/components/Pill.js",
|
|
64
|
-
"require": "./dist/cjs/components/Pill.js"
|
|
65
|
-
},
|
|
66
|
-
"./components": {
|
|
67
|
-
"import": "./dist/esm/components/index.js",
|
|
68
|
-
"require": "./dist/cjs/components/index.js"
|
|
69
17
|
}
|
|
70
18
|
},
|
|
71
19
|
"sideEffects": [
|
|
@@ -77,8 +25,8 @@
|
|
|
77
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
78
26
|
},
|
|
79
27
|
"engines": {
|
|
80
|
-
"pnpm": ">=
|
|
81
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
82
30
|
},
|
|
83
31
|
"author": "ICE MT",
|
|
84
32
|
"jestSonar": {
|
|
@@ -89,23 +37,23 @@
|
|
|
89
37
|
},
|
|
90
38
|
"dependencies": {
|
|
91
39
|
"uid": "~2.0.1",
|
|
92
|
-
"@elliemae/ds-button-v2": "3.51.0-next.
|
|
93
|
-
"@elliemae/ds-dropdownmenu-v2": "3.51.0-next.
|
|
94
|
-
"@elliemae/ds-form": "3.51.0-next.
|
|
95
|
-
"@elliemae/ds-grid": "3.51.0-next.
|
|
96
|
-
"@elliemae/ds-
|
|
97
|
-
"@elliemae/ds-
|
|
98
|
-
"@elliemae/ds-props-helpers": "3.51.0-next.
|
|
99
|
-
"@elliemae/ds-system": "3.51.0-next.
|
|
100
|
-
"@elliemae/ds-tooltip-
|
|
101
|
-
"@elliemae/ds-
|
|
102
|
-
"@elliemae/ds-typescript-helpers": "3.51.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.51.0-next.11",
|
|
41
|
+
"@elliemae/ds-dropdownmenu-v2": "3.51.0-next.11",
|
|
42
|
+
"@elliemae/ds-form": "3.51.0-next.11",
|
|
43
|
+
"@elliemae/ds-grid": "3.51.0-next.11",
|
|
44
|
+
"@elliemae/ds-menu-button": "3.51.0-next.11",
|
|
45
|
+
"@elliemae/ds-icons": "3.51.0-next.11",
|
|
46
|
+
"@elliemae/ds-props-helpers": "3.51.0-next.11",
|
|
47
|
+
"@elliemae/ds-system": "3.51.0-next.11",
|
|
48
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-next.11",
|
|
49
|
+
"@elliemae/ds-tooltip-v3": "3.51.0-next.11",
|
|
50
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-next.11"
|
|
103
51
|
},
|
|
104
52
|
"devDependencies": {
|
|
105
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
53
|
+
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
106
54
|
"jest": "~29.7.0",
|
|
107
55
|
"styled-components": "~5.3.9",
|
|
108
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-next.
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-next.11"
|
|
109
57
|
},
|
|
110
58
|
"peerDependencies": {
|
|
111
59
|
"lodash": "^4.17.21",
|