@elliemae/ds-chip 3.60.0-next.4 → 3.60.0-next.41
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/DSChip.js +39 -15
- package/dist/cjs/DSChip.js.map +2 -2
- package/dist/cjs/constants/index.js +8 -2
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +78 -98
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-chip-valid.js +8 -4
- package/dist/cjs/typescript-testing/typescript-chip-valid.js.map +2 -2
- package/dist/esm/DSChip.js +39 -15
- package/dist/esm/DSChip.js.map +2 -2
- package/dist/esm/constants/index.js +8 -2
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +4 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +81 -99
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-chip-valid.js +8 -4
- package/dist/esm/typescript-testing/typescript-chip-valid.js.map +2 -2
- package/dist/types/config/useConfig.d.ts +33 -30
- package/dist/types/constants/index.d.ts +4 -0
- package/dist/types/react-desc-prop-types.d.ts +4 -1
- package/dist/types/styles.d.ts +5 -2
- package/package.json +22 -25
package/dist/cjs/DSChip.js
CHANGED
|
@@ -36,6 +36,8 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
40
|
+
var import_ds_icon = require("@elliemae/ds-icon");
|
|
39
41
|
var import_useConfig = require("./config/useConfig.js");
|
|
40
42
|
var import_styles = require("./styles.js");
|
|
41
43
|
var import_constants = require("./constants/index.js");
|
|
@@ -51,7 +53,8 @@ const DSChip = (props) => {
|
|
|
51
53
|
label,
|
|
52
54
|
globalAttrs,
|
|
53
55
|
xStyledAttrs,
|
|
54
|
-
ownerPropsConfig
|
|
56
|
+
ownerPropsConfig,
|
|
57
|
+
wrapText
|
|
55
58
|
} = (0, import_useConfig.useConfig)(props);
|
|
56
59
|
const { disabled, className, onClick, ...restGlobals } = globalAttrs;
|
|
57
60
|
const handleOnClick = (0, import_react.useCallback)(
|
|
@@ -63,24 +66,45 @@ const DSChip = (props) => {
|
|
|
63
66
|
},
|
|
64
67
|
[applyAriaDisabled, onClick]
|
|
65
68
|
);
|
|
66
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
|
-
import_styles.
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
import_styles.StyledWrapper,
|
|
68
71
|
{
|
|
72
|
+
wrapText,
|
|
69
73
|
buttonShape: shape,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
selected,
|
|
74
|
-
role: "button",
|
|
75
|
-
onClick: handleOnClick,
|
|
76
|
-
...restGlobals,
|
|
74
|
+
buttonSize: size,
|
|
75
|
+
className,
|
|
76
|
+
...xStyledAttrs,
|
|
77
77
|
...ownerPropsConfig,
|
|
78
|
-
children:
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
79
|
+
import_styles.StyledChip,
|
|
80
|
+
{
|
|
81
|
+
buttonShape: shape,
|
|
82
|
+
"aria-disabled": disabled || applyAriaDisabled,
|
|
83
|
+
disabled,
|
|
84
|
+
innerRef,
|
|
85
|
+
selected,
|
|
86
|
+
role: "button",
|
|
87
|
+
onClick: handleOnClick,
|
|
88
|
+
buttonSize: size,
|
|
89
|
+
...restGlobals,
|
|
90
|
+
...ownerPropsConfig,
|
|
91
|
+
children: [
|
|
92
|
+
shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, { disabled, size, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: import_ds_icon.DSIconSizes.M }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: import_ds_icon.DSIconSizes.M }),
|
|
93
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, { size, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
import_styles.StyledSpanWithEllipsis,
|
|
95
|
+
{
|
|
96
|
+
component: "span",
|
|
97
|
+
variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B4,
|
|
98
|
+
wrapText,
|
|
99
|
+
...ownerPropsConfig,
|
|
100
|
+
children: label
|
|
101
|
+
}
|
|
102
|
+
) })
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
)
|
|
82
106
|
}
|
|
83
|
-
)
|
|
107
|
+
);
|
|
84
108
|
};
|
|
85
109
|
DSChip.displayName = "DSChip";
|
|
86
110
|
const DSChipWithSchema = (0, import_ds_props_helpers.describe)(DSChip);
|
package/dist/cjs/DSChip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSChip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n } = useConfig(props);\n\n const { disabled, className, onClick, ...restGlobals } = globalAttrs;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants/index.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n applyAriaDisabled,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n wrapText,\n } = useConfig(props);\n\n const { disabled, className, onClick, ...restGlobals } = globalAttrs;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (applyAriaDisabled) return;\n if (onClick) {\n onClick(e);\n }\n },\n [applyAriaDisabled, onClick],\n );\n\n return (\n <StyledWrapper\n wrapText={wrapText}\n buttonShape={shape}\n buttonSize={size}\n className={className}\n {...xStyledAttrs}\n {...ownerPropsConfig}\n >\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled || applyAriaDisabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n onClick={handleOnClick}\n buttonSize={size}\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon size={DSIconSizes.M} />\n </StyledRoundShape>\n ) : (\n <Icon size={DSIconSizes.M} />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis\n component=\"span\"\n variant={TYPOGRAPHY_VARIANTS.B4}\n wrapText={wrapText}\n {...ownerPropsConfig}\n >\n {label}\n </StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypesSchema;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CjB;AA9CN,mBAAmC;AACnC,8BAAyB;AACzB,2BAAoC;AACpC,qBAA4B;AAC5B,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAsC;AAEtC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4BAAU,KAAK;AAEnB,QAAM,EAAE,UAAU,WAAW,SAAS,GAAG,YAAY,IAAI;AAEzD,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAuD;AACtD,UAAI,kBAAmB;AACvB,UAAI,SAAS;AACX,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,iBAAe,YAAY;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACX,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,sBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MAAa,GAAG,kBACpD,sDAAC,QAAK,MAAM,2BAAY,GAAG,GAC7B,IAEA,4CAAC,QAAK,MAAM,2BAAY,GAAG;AAAA,YAE7B,4CAAC,iCAAgB,MAAa,GAAG,kBAC/B;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,yCAAoB;AAAA,gBAC7B;AAAA,gBACC,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,7 +43,9 @@ __export(constants_exports, {
|
|
|
43
43
|
DSChipSlots: () => DSChipSlots,
|
|
44
44
|
basicSizes: () => basicSizes,
|
|
45
45
|
roundShapeLarge: () => roundShapeLarge,
|
|
46
|
+
roundShapeLargeMobile: () => roundShapeLargeMobile,
|
|
46
47
|
roundShapeSmall: () => roundShapeSmall,
|
|
48
|
+
roundShapeSmallMobile: () => roundShapeSmallMobile,
|
|
47
49
|
shapeSizes: () => shapeSizes
|
|
48
50
|
});
|
|
49
51
|
module.exports = __toCommonJS(constants_exports);
|
|
@@ -70,14 +72,18 @@ const CHIP_SIZES = {
|
|
|
70
72
|
};
|
|
71
73
|
const roundShapeLarge = "4.308rem";
|
|
72
74
|
const roundShapeSmall = "3.077rem";
|
|
75
|
+
const roundShapeLargeMobile = "3.563rem";
|
|
76
|
+
const roundShapeSmallMobile = "2.5rem";
|
|
73
77
|
const basicSizes = {
|
|
74
78
|
s: {
|
|
75
79
|
width: "5.538rem",
|
|
76
|
-
height: "5.154rem"
|
|
80
|
+
height: "5.154rem",
|
|
81
|
+
maxWidth: "72px"
|
|
77
82
|
},
|
|
78
83
|
l: {
|
|
79
84
|
width: "7.077rem",
|
|
80
|
-
height: "5.154rem"
|
|
85
|
+
height: "5.154rem",
|
|
86
|
+
maxWidth: "92px"
|
|
81
87
|
}
|
|
82
88
|
};
|
|
83
89
|
const shapeSizes = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChipName = 'DSChip';\n\nexport const CHIP_SLOTS = {\n ROOT: 'root',\n BUTTON: 'button',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n ELLIPSIS: 'ellipsis',\n} as const;\n\nexport const CHIP_DATA_TESTID = slotObjectToDataTestIds(DSChipName, CHIP_SLOTS);\n\nexport const DSChipSlots = CHIP_SLOTS;\nexport const DSChipDataTestIds = CHIP_DATA_TESTID;\n\nexport const CHIP_SHAPES = {\n DEFAULT: 'default' as const,\n ROUND: 'round' as const,\n};\n\nexport const CHIP_SIZES = {\n S: 's' as const,\n L: 'l' as const,\n};\n\nexport const roundShapeLarge = '4.308rem';\nexport const roundShapeSmall = '3.077rem';\n\nexport const basicSizes = {\n s: {\n width: '5.538rem',\n height: '5.154rem',\n } as const,\n l: {\n width: '7.077rem',\n height: '5.154rem',\n } as const,\n};\n\nexport const shapeSizes = {\n s: {\n width: '5.538rem',\n height: '5.923rem',\n } as const,\n l: {\n width: '7.077rem',\n height: '6.538rem',\n } as const,\n};\n\nexport const ChipSizesValuesArray = Object.values(CHIP_SIZES);\nexport const ChipShapesValuesArray = Object.values(CHIP_SHAPES);\nexport const ChipInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);\nexport const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);\nexport const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,aAAa;AAEnB,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;AAEO,MAAM,uBAAmB,0CAAwB,YAAY,UAAU;AAEvE,MAAM,cAAc;AACpB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChipName = 'DSChip';\n\nexport const CHIP_SLOTS = {\n ROOT: 'root',\n BUTTON: 'button',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n ELLIPSIS: 'ellipsis',\n} as const;\n\nexport const CHIP_DATA_TESTID = slotObjectToDataTestIds(DSChipName, CHIP_SLOTS);\n\nexport const DSChipSlots = CHIP_SLOTS;\nexport const DSChipDataTestIds = CHIP_DATA_TESTID;\n\nexport const CHIP_SHAPES = {\n DEFAULT: 'default' as const,\n ROUND: 'round' as const,\n};\n\nexport const CHIP_SIZES = {\n S: 's' as const,\n L: 'l' as const,\n};\n\n// Round Shape RT sizes: 57x57 RT for large size and 40x40 RT for small size\n\n// Calculation based on a root font-size of 13px\nexport const roundShapeLarge = '4.308rem';\nexport const roundShapeSmall = '3.077rem';\n\n// Calculation based on a root font-size of 16px\nexport const roundShapeLargeMobile = '3.563rem';\nexport const roundShapeSmallMobile = '2.5rem';\n\nexport const basicSizes = {\n s: {\n width: '5.538rem',\n height: '5.154rem',\n maxWidth: '72px',\n } as const,\n l: {\n width: '7.077rem',\n height: '5.154rem',\n maxWidth: '92px',\n } as const,\n};\n\nexport const shapeSizes = {\n s: {\n width: '5.538rem',\n height: '5.923rem',\n } as const,\n l: {\n width: '7.077rem',\n height: '6.538rem',\n } as const,\n};\n\nexport const ChipSizesValuesArray = Object.values(CHIP_SIZES);\nexport const ChipShapesValuesArray = Object.values(CHIP_SHAPES);\nexport const ChipInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);\nexport const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);\nexport const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,aAAa;AAEnB,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;AAEO,MAAM,uBAAmB,0CAAwB,YAAY,UAAU;AAEvE,MAAM,cAAc;AACpB,MAAM,oBAAoB;AAE1B,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAKO,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAGxB,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,uBAAuB,OAAO,OAAO,UAAU;AACrD,MAAM,wBAAwB,OAAO,OAAO,WAAW;AACvD,MAAM,wBAAwB,CAAC,SAAS,SAAS,QAAQ;AAEzD,MAAM,wBAAwB,KAAK,UAAU,oBAAoB;AACjE,MAAM,yBAAyB,KAAK,UAAU,qBAAqB;AACnE,MAAM,oCAAoC,KAAK,UAAU,qBAAqB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,8 @@ var import_constants = require("./constants/index.js");
|
|
|
39
39
|
const DSChipDefaultProps = {
|
|
40
40
|
size: import_constants.CHIP_SIZES.L,
|
|
41
41
|
shape: import_constants.CHIP_SHAPES.DEFAULT,
|
|
42
|
-
applyAriaDisabled: false
|
|
42
|
+
applyAriaDisabled: false,
|
|
43
|
+
wrapText: false
|
|
43
44
|
};
|
|
44
45
|
const DSChipPropTypes = {
|
|
45
46
|
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSChipName, import_constants.CHIP_SLOTS),
|
|
@@ -54,7 +55,8 @@ const DSChipPropTypes = {
|
|
|
54
55
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
55
56
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
56
57
|
).defaultValue(false),
|
|
57
|
-
innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Inner ref to button component.")
|
|
58
|
+
innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.object, import_ds_props_helpers.PropTypes.func]).description("Inner ref to button component."),
|
|
59
|
+
wrapText: import_ds_props_helpers.PropTypes.bool.description("wrap text in the label of the chip").defaultValue(false)
|
|
58
60
|
};
|
|
59
61
|
const DSChipPropTypesSchema = DSChipPropTypes;
|
|
60
62
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n DSChipName,\n CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n applyAriaDisabled: false,\n};\n\nexport declare namespace DSChipT {\n export interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n applyAriaDisabled: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof CHIP_SLOTS> {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface RequiredProps {\n label: string;\n icon: React.ComponentType<
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,uBASO;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,4BAAW;AAAA,EACjB,OAAO,6BAAY;AAAA,EACnB,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n DSChipName,\n CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n applyAriaDisabled: false,\n wrapText: false,\n};\n\nexport declare namespace DSChipT {\n export interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n applyAriaDisabled: boolean;\n wrapText: boolean;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof CHIP_SLOTS> {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n export interface RequiredProps {\n label: string;\n icon: React.ComponentType<{\n size?: string;\n }>;\n }\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSChipPropTypes: DSPropTypesSchema<DSChipT.Props> = {\n ...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\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 innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n wrapText: PropTypes.bool.description('wrap text in the label of the chip').defaultValue(false),\n};\n\nexport const DSChipPropTypesSchema = DSChipPropTypes as unknown as ValidationMap<DSChipT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,uBASO;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,4BAAW;AAAA,EACjB,OAAO,6BAAY;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AA0CO,MAAM,kBAAoD;AAAA,EAC/D,OAAG,kDAAyB,6BAAY,2BAAU;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,kCAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,kCAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,kCAAU,MAAM,sCAAqB,EAAE,YAAY,uCAAsB,EAAE,aAAa,6BAAY,OAAO;AAAA,EAClH,MAAM,kCAAU,MAAM,qCAAoB,EAAE,YAAY,sCAAqB,EAAE,aAAa,4BAAW,CAAC;AAAA,EACxG,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,UAAU,kCAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,wBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -37,14 +37,25 @@ __export(styles_exports, {
|
|
|
37
37
|
module.exports = __toCommonJS(styles_exports);
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
40
41
|
var import_constants = require("./constants/index.js");
|
|
41
42
|
const getChipSize = (shape) => shape === import_constants.CHIP_SHAPES.ROUND ? import_constants.shapeSizes : import_constants.basicSizes;
|
|
43
|
+
const wrapTextStyles = import_ds_system.css`
|
|
44
|
+
overflow-wrap: break-word;
|
|
45
|
+
white-space: pre-wrap;
|
|
46
|
+
overflow: visible;
|
|
47
|
+
`;
|
|
48
|
+
const ellipsisStyles = import_ds_system.css`
|
|
49
|
+
white-space: nowrap;
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
text-overflow: ellipsis;
|
|
52
|
+
`;
|
|
42
53
|
const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_constants.DSChipName, slot: import_constants.CHIP_SLOTS.LABEL })`
|
|
43
54
|
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
44
55
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
45
56
|
word-wrap: break-word;
|
|
46
57
|
text-align: center;
|
|
47
|
-
padding: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "2px" : "4px"}
|
|
58
|
+
padding-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "2px" : "4px"};
|
|
48
59
|
z-index: 0;
|
|
49
60
|
line-height: 1.27;
|
|
50
61
|
width: inherit;
|
|
@@ -52,23 +63,23 @@ const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_const
|
|
|
52
63
|
align-items: center;
|
|
53
64
|
justify-content: center;
|
|
54
65
|
`;
|
|
55
|
-
const StyledSpanWithEllipsis = (0, import_ds_system.styled)(
|
|
66
|
+
const StyledSpanWithEllipsis = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
56
67
|
name: import_constants.DSChipName,
|
|
57
68
|
slot: import_constants.CHIP_SLOTS.ELLIPSIS
|
|
58
69
|
})`
|
|
59
|
-
|
|
60
|
-
overflow: hidden;
|
|
61
|
-
text-overflow: ellipsis;
|
|
70
|
+
${({ wrapText }) => wrapText ? wrapTextStyles : ellipsisStyles};
|
|
62
71
|
max-width: 100%;
|
|
72
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
63
73
|
`;
|
|
64
74
|
const StyledWrapper = (0, import_ds_system.styled)("div", {
|
|
65
75
|
name: import_constants.DSChipName,
|
|
66
76
|
slot: import_constants.CHIP_SLOTS.ROOT
|
|
67
77
|
})`
|
|
68
78
|
display: flex;
|
|
69
|
-
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
70
79
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
71
80
|
${import_ds_system.xStyledCommonProps}
|
|
81
|
+
max-width: ${({ buttonSize }) => import_constants.basicSizes[buttonSize].maxWidth};
|
|
82
|
+
${({ wrapText, buttonSize, buttonShape }) => wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}
|
|
72
83
|
`;
|
|
73
84
|
const disabledRoundShape = import_ds_system.css`
|
|
74
85
|
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
@@ -88,7 +99,10 @@ const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
|
88
99
|
display: flex;
|
|
89
100
|
align-items: center;
|
|
90
101
|
justify-content: center;
|
|
91
|
-
|
|
102
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
103
|
+
width: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLargeMobile : import_constants.roundShapeSmallMobile};
|
|
104
|
+
height: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLargeMobile : import_constants.roundShapeSmallMobile};
|
|
105
|
+
}
|
|
92
106
|
`;
|
|
93
107
|
const styledChipSelectedCss = import_ds_system.css`
|
|
94
108
|
// TODO: wrap css processor to process new HOC wrapping styled components
|
|
@@ -108,7 +122,25 @@ const styledChipSelectedCss = import_ds_system.css`
|
|
|
108
122
|
|
|
109
123
|
&:focus {
|
|
110
124
|
&:before {
|
|
111
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[
|
|
125
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
`;
|
|
129
|
+
const disabledStyles = import_ds_system.css`
|
|
130
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
131
|
+
|
|
132
|
+
.DSIcon-svg {
|
|
133
|
+
fill: ${({ theme }) => theme.colors.neutral[400]};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&:hover {
|
|
137
|
+
${StyledRoundShape} {
|
|
138
|
+
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
139
|
+
}
|
|
140
|
+
background-color: ${({ theme }) => theme.colors.neutral["050"]};
|
|
141
|
+
cursor: not-allowed;
|
|
142
|
+
&:before {
|
|
143
|
+
border-color: transparent;
|
|
112
144
|
}
|
|
113
145
|
}
|
|
114
146
|
`;
|
|
@@ -118,27 +150,28 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_constan
|
|
|
118
150
|
flex-direction: column;
|
|
119
151
|
align-items: center;
|
|
120
152
|
justify-content: center;
|
|
121
|
-
padding: 0;
|
|
122
|
-
padding-top: ${(props) => props.buttonShape === import_constants.CHIP_SHAPES.ROUND ? "0" : "10px"};
|
|
123
153
|
border: none;
|
|
124
154
|
min-height: 100%;
|
|
125
155
|
height: fit-content;
|
|
126
156
|
width: 100%;
|
|
127
|
-
background-color:
|
|
157
|
+
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
128
158
|
color: ${({ theme }) => theme.colors.brand[600]};
|
|
129
159
|
border-radius: 4px;
|
|
130
160
|
cursor: pointer;
|
|
131
161
|
outline: none;
|
|
132
|
-
|
|
162
|
+
${({ buttonShape, buttonSize }) => {
|
|
163
|
+
if (buttonShape === import_constants.CHIP_SHAPES.ROUND && buttonSize === import_constants.CHIP_SIZES.L) {
|
|
164
|
+
return import_ds_system.css`
|
|
165
|
+
padding: 6px;
|
|
166
|
+
`;
|
|
167
|
+
}
|
|
168
|
+
return import_ds_system.css`
|
|
169
|
+
padding: 10px 6px;
|
|
170
|
+
`;
|
|
171
|
+
}}
|
|
133
172
|
${StyledRoundShape} {
|
|
134
173
|
& .DSIcon-root .DSIcon-svg {
|
|
135
|
-
fill:
|
|
136
|
-
height: 1.85rem;
|
|
137
|
-
width: 1.85rem;
|
|
138
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
139
|
-
height: 1.5rem;
|
|
140
|
-
width: 1.5rem;
|
|
141
|
-
}
|
|
174
|
+
fill: ${({ theme }) => theme.colors.neutral["000"]};
|
|
142
175
|
}
|
|
143
176
|
${({ disabled }) => disabled && disabledRoundShape}
|
|
144
177
|
}
|
|
@@ -156,34 +189,16 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_constan
|
|
|
156
189
|
}
|
|
157
190
|
& .DSIcon-root .DSIcon-svg {
|
|
158
191
|
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
159
|
-
|
|
160
|
-
width: 1.85rem;
|
|
161
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
162
|
-
height: 1.5rem;
|
|
163
|
-
width: 1.5rem;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
& .DSIcon-root {
|
|
167
|
-
height: 1.85rem;
|
|
168
|
-
width: 1.85rem;
|
|
169
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
170
|
-
height: 1.5rem;
|
|
171
|
-
width: 1.5rem;
|
|
172
|
-
}
|
|
192
|
+
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
173
193
|
}
|
|
174
194
|
|
|
175
195
|
&:hover,
|
|
176
196
|
&:focus {
|
|
177
197
|
z-index: 10;
|
|
178
|
-
|
|
179
|
-
${StyledChipLabel} {
|
|
180
|
-
text-align: left;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
198
|
${StyledSpanWithEllipsis} {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
199
|
+
${({ wrapText }) => !wrapText && import_ds_system.css`
|
|
200
|
+
${wrapTextStyles}
|
|
201
|
+
`}
|
|
187
202
|
}
|
|
188
203
|
}
|
|
189
204
|
|
|
@@ -200,77 +215,42 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_constan
|
|
|
200
215
|
|
|
201
216
|
&:focus {
|
|
202
217
|
&:before {
|
|
203
|
-
|
|
218
|
+
${({ buttonShape }) => buttonShape === import_constants.CHIP_SHAPES.ROUND ? import_ds_system.css`
|
|
219
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
220
|
+
` : import_ds_system.css`
|
|
221
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
222
|
+
`}
|
|
204
223
|
}
|
|
205
224
|
}
|
|
206
225
|
|
|
207
226
|
&:disabled {
|
|
208
|
-
|
|
209
|
-
cursor: not-allowed;
|
|
210
|
-
|
|
211
|
-
.DSIcon-svg {
|
|
212
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
&:focus,
|
|
216
|
-
&:hover {
|
|
217
|
-
${StyledRoundShape} {
|
|
218
|
-
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
219
|
-
}
|
|
220
|
-
background-color: #fff;
|
|
221
|
-
cursor: not-allowed;
|
|
222
|
-
&:before {
|
|
223
|
-
border-color: transparent;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
${StyledChipLabel} {
|
|
227
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
&:hover .DSIcon-svg {
|
|
232
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
233
|
-
}
|
|
227
|
+
${disabledStyles}
|
|
234
228
|
}
|
|
235
229
|
|
|
236
230
|
&[aria-disabled='true'] {
|
|
237
|
-
|
|
238
|
-
cursor: not-allowed;
|
|
239
|
-
|
|
240
|
-
.DSIcon-svg {
|
|
241
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
242
|
-
}
|
|
243
|
-
|
|
231
|
+
${disabledStyles}
|
|
244
232
|
${StyledRoundShape} {
|
|
245
233
|
${disabledRoundShape}
|
|
246
234
|
}
|
|
247
235
|
|
|
248
|
-
&:focus
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
background-color: ${({ theme }) => theme.colors.neutral[200]};
|
|
252
|
-
}
|
|
253
|
-
background-color: #fff;
|
|
254
|
-
cursor: not-allowed;
|
|
255
|
-
|
|
256
|
-
${StyledChipLabel} {
|
|
257
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
&:hover {
|
|
262
|
-
&:not(:focus) {
|
|
263
|
-
&:before {
|
|
264
|
-
border-color: transparent;
|
|
265
|
-
}
|
|
236
|
+
&:focus {
|
|
237
|
+
&:before {
|
|
238
|
+
border: 2px solid ${({ theme }) => theme.colors.neutral[400]};
|
|
266
239
|
}
|
|
267
240
|
}
|
|
268
|
-
|
|
269
|
-
&:hover .DSIcon-svg {
|
|
270
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
271
|
-
}
|
|
272
241
|
}
|
|
273
242
|
|
|
274
|
-
${({ selected }) => !selected ? "" :
|
|
243
|
+
${({ selected, buttonShape }) => !selected ? "" : import_ds_system.css`
|
|
244
|
+
${styledChipSelectedCss}
|
|
245
|
+
&:focus {
|
|
246
|
+
&:before {
|
|
247
|
+
${buttonShape === import_constants.CHIP_SHAPES.ROUND ? import_ds_system.css`
|
|
248
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
249
|
+
` : import_ds_system.css`
|
|
250
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
251
|
+
`}
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
`}
|
|
275
255
|
`;
|
|
276
256
|
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n basicSizes,\n shapeSizes,\n CHIP_SHAPES,\n CHIP_SIZES,\n roundShapeLarge,\n roundShapeSmall,\n DSChipName,\n CHIP_SLOTS,\n roundShapeLargeMobile,\n roundShapeSmallMobile,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n wrapText?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst wrapTextStyles = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n`;\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: CHIP_SLOTS.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding-top: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')};\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled(DSTypography, {\n name: DSChipName,\n slot: CHIP_SLOTS.ELLIPSIS,\n})<{ wrapText?: boolean }>`\n ${({ wrapText }) => (wrapText ? wrapTextStyles : ellipsisStyles)};\n max-width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n max-width: ${({ buttonSize }) => basicSizes[buttonSize].maxWidth};\n ${({ wrapText, buttonSize, buttonShape }) =>\n wrapText ? `height: auto;` : ` height: ${getChipSize(buttonShape)[buttonSize].height};`}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: CHIP_SLOTS.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLargeMobile : roundShapeSmallMobile)};\n }\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nconst disabledStyles = css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[400]};\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: CHIP_SLOTS.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape' | 'buttonSize' | 'wrapText'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n ${({ buttonShape, buttonSize }) => {\n if (buttonShape === CHIP_SHAPES.ROUND && buttonSize === CHIP_SIZES.L) {\n return css`\n padding: 6px;\n `;\n }\n return css`\n padding: 10px 6px;\n `;\n }}\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral['000']};\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n ${StyledSpanWithEllipsis} {\n ${({ wrapText }) =>\n !wrapText &&\n css`\n ${wrapTextStyles}\n `}\n }\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n ${({ buttonShape }) =>\n buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n\n &:disabled {\n ${disabledStyles}\n }\n\n &[aria-disabled='true'] {\n ${disabledStyles}\n ${StyledRoundShape} {\n ${disabledRoundShape}\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.neutral[400]};\n }\n }\n }\n\n ${({ selected, buttonShape }) =>\n !selected\n ? ''\n : css`\n ${styledChipSelectedCss}\n &:focus {\n &:before {\n ${buttonShape === CHIP_SHAPES.ROUND\n ? css`\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n `\n : css`\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n `}\n }\n }\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,7 +49,8 @@ const testPropsAsSyntax = {
|
|
|
49
49
|
const testCompleteDefaults = {
|
|
50
50
|
size: "l",
|
|
51
51
|
shape: "default",
|
|
52
|
-
applyAriaDisabled: false
|
|
52
|
+
applyAriaDisabled: false,
|
|
53
|
+
wrapText: false
|
|
53
54
|
};
|
|
54
55
|
const testInternalProps = {
|
|
55
56
|
...testRequiredProps,
|
|
@@ -66,21 +67,24 @@ const testExplicitDefinition = {
|
|
|
66
67
|
icon: Icon,
|
|
67
68
|
size: "l",
|
|
68
69
|
shape: "default",
|
|
69
|
-
applyAriaDisabled: false
|
|
70
|
+
applyAriaDisabled: false,
|
|
71
|
+
wrapText: false
|
|
70
72
|
};
|
|
71
73
|
const testInferedTypeCompatibility = {
|
|
72
74
|
label: "Label",
|
|
73
75
|
icon: Icon,
|
|
74
76
|
size: "l",
|
|
75
77
|
shape: "default",
|
|
76
|
-
applyAriaDisabled: false
|
|
78
|
+
applyAriaDisabled: false,
|
|
79
|
+
wrapText: false
|
|
77
80
|
};
|
|
78
81
|
const testDefinitionAsConst = {
|
|
79
82
|
label: "Label",
|
|
80
83
|
icon: Icon,
|
|
81
84
|
size: "l",
|
|
82
85
|
shape: "default",
|
|
83
|
-
applyAriaDisabled: false
|
|
86
|
+
applyAriaDisabled: false,
|
|
87
|
+
wrapText: false
|
|
84
88
|
};
|
|
85
89
|
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
86
90
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSChip, { ...testExplicitDefinition }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chip-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSChip } from '../index.js';\nimport type { DSChipT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChipT.Props;\ntype ComponentPropsInternals = DSChipT.InternalProps;\ntype ComponentPropsDefaultProps = DSChipT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChipT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChipT.RequiredProps;\n\nconst Icon = () => <div data-testid=\"icon-test\" />;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n label: 'Label',\n icon: Icon,\n};\n\nconst testOptionalPropsEmpty: ComponentPropsOptionalProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n selected: true,\n innerRef: React.createRef<HTMLButtonElement>(),\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 applyAriaDisabled: true,\n};\n\n// ComponentPropsForApp only needs required props, default and optional are not mandatory\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n size: 'l',\n shape: 'default',\n applyAriaDisabled: 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 label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\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 label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSChip {...testExplicitDefinition} />\n <DSChip {...testInferedTypeCompatibility} />\n <DSChip {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSChip label=\"Label\" icon={Icon} />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACYJ;AAXnB,mBAAkB;AAClB,eAAuB;AAUvB,MAAM,OAAO,MAAM,4CAAC,SAAI,eAAY,aAAY;AAEhD,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,yBAAsD,CAAC;AAE7D,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAU,aAAAA,QAAM,UAA6B;AAC/C;AAIA,MAAM,sBAA2D;AAAA,EAC/D,mBAAmB;AACrB;AAGA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSChip } from '../index.js';\nimport type { DSChipT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChipT.Props;\ntype ComponentPropsInternals = DSChipT.InternalProps;\ntype ComponentPropsDefaultProps = DSChipT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChipT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChipT.RequiredProps;\n\nconst Icon = () => <div data-testid=\"icon-test\" />;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n label: 'Label',\n icon: Icon,\n};\n\nconst testOptionalPropsEmpty: ComponentPropsOptionalProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n selected: true,\n innerRef: React.createRef<HTMLButtonElement>(),\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 applyAriaDisabled: true,\n};\n\n// ComponentPropsForApp only needs required props, default and optional are not mandatory\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: 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 label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\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 label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n label: 'Label',\n icon: Icon,\n size: 'l',\n shape: 'default',\n applyAriaDisabled: false,\n wrapText: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSChip {...testExplicitDefinition} />\n <DSChip {...testInferedTypeCompatibility} />\n <DSChip {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSChip label=\"Label\" icon={Icon} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACYJ;AAXnB,mBAAkB;AAClB,eAAuB;AAUvB,MAAM,OAAO,MAAM,4CAAC,SAAI,eAAY,aAAY;AAEhD,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,yBAAsD,CAAC;AAE7D,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAU,aAAAA,QAAM,UAA6B;AAC/C;AAIA,MAAM,sBAA2D;AAAA,EAC/D,mBAAmB;AACrB;AAGA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,mBAAQ,GAAG,wBAAwB;AAAA,EACpC,4CAAC,mBAAQ,GAAG,8BAA8B;AAAA,EAC1C,4CAAC,mBAAQ,GAAG,uBAAuB;AAAA,EAEnC,4CAAC,mBAAO,OAAM,SAAQ,MAAM,MAAM;AAAA,GACpC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|