@elliemae/ds-pills-v2 3.51.0-next.8 → 3.51.0-next.9
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/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/types/DSPillDefinitions.d.ts +2 -2
- package/package.json +15 -15
|
@@ -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
|
}
|
|
@@ -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
|
}
|
|
@@ -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";
|
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.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills V2",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.51.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-truncated-tooltip-text": "3.51.0-next.
|
|
49
|
-
"@elliemae/ds-tooltip-v3": "3.51.0-next.
|
|
50
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.51.0-next.9",
|
|
41
|
+
"@elliemae/ds-form": "3.51.0-next.9",
|
|
42
|
+
"@elliemae/ds-dropdownmenu-v2": "3.51.0-next.9",
|
|
43
|
+
"@elliemae/ds-grid": "3.51.0-next.9",
|
|
44
|
+
"@elliemae/ds-menu-button": "3.51.0-next.9",
|
|
45
|
+
"@elliemae/ds-icons": "3.51.0-next.9",
|
|
46
|
+
"@elliemae/ds-props-helpers": "3.51.0-next.9",
|
|
47
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-next.9",
|
|
48
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-next.9",
|
|
49
|
+
"@elliemae/ds-tooltip-v3": "3.51.0-next.9",
|
|
50
|
+
"@elliemae/ds-system": "3.51.0-next.9"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
54
54
|
"jest": "~29.7.0",
|
|
55
55
|
"styled-components": "~5.3.9",
|
|
56
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-next.
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-next.9"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"lodash": "^4.17.21",
|