@elliemae/ds-chip 3.0.0-next.75 → 3.0.0-next.78
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 +14 -10
- package/dist/cjs/DSChip.js.map +2 -2
- package/dist/cjs/config/useConfig.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +21 -4
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSChip.js +17 -13
- package/dist/esm/DSChip.js.map +2 -2
- package/dist/esm/config/useConfig.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +3 -6
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +21 -4
- package/dist/esm/styles.js.map +2 -2
- package/package.json +2 -2
package/dist/cjs/DSChip.js
CHANGED
|
@@ -53,28 +53,32 @@ module.exports = __toCommonJS(DSChip_exports);
|
|
|
53
53
|
var React = __toESM(require("react"));
|
|
54
54
|
var import_react = __toESM(require("react"));
|
|
55
55
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
56
|
-
var
|
|
56
|
+
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
57
57
|
var import_useConfig = require("./config/useConfig");
|
|
58
58
|
var import_styles = require("./styles");
|
|
59
59
|
var import_constants = require("./constants");
|
|
60
60
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
61
61
|
const DSChip = (props) => {
|
|
62
|
-
const { size, selected, innerRef, icon: Icon, globalAttrs, xStyledAttrs } = (0, import_useConfig.useConfig)(props);
|
|
63
|
-
const _a = globalAttrs, { shape, label, type, disabled } = _a, restGlobals = __objRest(_a, ["shape", "label", "type", "disabled"]);
|
|
64
|
-
|
|
62
|
+
const { size, shape, selected, innerRef, icon: Icon, globalAttrs, xStyledAttrs } = (0, import_useConfig.useConfig)(props);
|
|
63
|
+
const _a = globalAttrs, { shape: shapeGlobal, label, type, disabled } = _a, restGlobals = __objRest(_a, ["shape", "label", "type", "disabled"]);
|
|
64
|
+
const { setElement, isShowingEllipsis } = (0, import_ds_utilities.useIsShowingEllipsis)();
|
|
65
|
+
const ConditionalTooltip = (0, import_react.useMemo)(() => isShowingEllipsis ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children), [isShowingEllipsis]);
|
|
66
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledWrapper, {
|
|
67
|
+
buttonShape: shape,
|
|
68
|
+
buttonSize: size
|
|
69
|
+
}, /* @__PURE__ */ import_react.default.createElement(ConditionalTooltip, {
|
|
70
|
+
text: label
|
|
71
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledChip, __spreadValues(__spreadValues({
|
|
65
72
|
"aria-disabled": disabled,
|
|
66
73
|
disabled,
|
|
67
|
-
buttonShape: shape,
|
|
68
|
-
size,
|
|
69
74
|
ref: innerRef,
|
|
70
75
|
selected
|
|
71
76
|
}, restGlobals), xStyledAttrs), shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledRoundShape, {
|
|
72
77
|
disabled,
|
|
73
78
|
size
|
|
74
|
-
}, /* @__PURE__ */ import_react.default.createElement(Icon, null)) : /* @__PURE__ */ import_react.default.createElement(Icon, null), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledChipLabel, null, /* @__PURE__ */ import_react.default.createElement(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
})));
|
|
79
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, null)) : /* @__PURE__ */ import_react.default.createElement(Icon, null), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledChipLabel, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledSpanWithEllipsis, {
|
|
80
|
+
ref: setElement
|
|
81
|
+
}, label)))));
|
|
78
82
|
};
|
|
79
83
|
DSChip.propTypes = import_react_desc_prop_types.DSChipPropTypes;
|
|
80
84
|
DSChip.displayName = "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 from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { useConfig } from './config/useConfig';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport { DSChipT, DSChipPropTypes } from './react-desc-prop-types';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const { size, shape, selected, innerRef, icon: Icon, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, label, type, disabled, ...restGlobals } = globalAttrs;\n\n const { setElement, isShowingEllipsis } = useIsShowingEllipsis();\n\n const ConditionalTooltip = useMemo(\n () => (isShowingEllipsis ? DSTooltipV3 : ({ children }) => <>{children}</>),\n [isShowingEllipsis],\n );\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size}>\n <ConditionalTooltip text={label}>\n <StyledChip\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n {...restGlobals}\n {...xStyledAttrs}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size}>\n <Icon />\n </StyledRoundShape>\n ) : (\n <Icon />\n )}\n <StyledChipLabel>\n <StyledSpanWithEllipsis ref={setElement}>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </ConditionalTooltip>\n </StyledWrapper>\n );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,0BAA+C;AAC/C,wBAA4B;AAC5B,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAC5B,mCAAyC;AAEzC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,aAAa,iBAAiB,gCAAU,KAAK;AAElG,QAAsE,kBAA9D,SAAO,aAAa,OAAO,MAAM,aAA6B,IAAhB,wBAAgB,IAAhB,CAA9C,SAAoB,SAAO,QAAM;AAEzC,QAAM,EAAE,YAAY,sBAAsB,8CAAqB;AAE/D,QAAM,qBAAqB,0BACzB,MAAO,oBAAoB,gCAAc,CAAC,EAAE,eAAe,wFAAG,QAAS,GACvE,CAAC,iBAAiB,CACpB;AACA,SACE,mDAAC;AAAA,IAAc,aAAa;AAAA,IAAO,YAAY;AAAA,KAC7C,mDAAC;AAAA,IAAmB,MAAM;AAAA,KACxB,mDAAC;AAAA,IACC,iBAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,KACI,cACA,eAEH,UAAU,6BAAY,QACrB,mDAAC;AAAA,IAAiB;AAAA,IAAoB;AAAA,KACpC,mDAAC,UAAK,CACR,IAEA,mDAAC,UAAK,GAER,mDAAC,qCACC,mDAAC;AAAA,IAAuB,KAAK;AAAA,KAAa,KAAM,CAClD,CACF,CACF,CACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSChipT, defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,mCAAuD;AAEhD,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AAEzE,
|
|
4
|
+
"sourcesContent": ["import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSChipT, defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAKO;AACP,mCAAuD;AAEhD,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AAEzE,0DAA+B,kBAAkB,4CAAe;AAChE,QAAM,cAAc,gDAAuB,gBAAgB;AAC3D,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,SAAO,iCAAK,mBAAL,EAAuB,aAAa,aAAa;AAC1D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,7 +49,8 @@ const defaultProps = {
|
|
|
49
49
|
shape: import_constants.CHIP_SHAPES.DEFAULT
|
|
50
50
|
};
|
|
51
51
|
const DSChipPropTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
|
|
52
|
-
icon: import_ds_utilities.PropTypes.func.isRequired.description("Chip Icon").defaultValue()
|
|
52
|
+
icon: import_ds_utilities.PropTypes.func.isRequired.description("Chip Icon").defaultValue(() => {
|
|
53
|
+
}),
|
|
53
54
|
label: import_ds_utilities.PropTypes.string.isRequired.description("Chip Label").defaultValue(""),
|
|
54
55
|
selected: import_ds_utilities.PropTypes.bool.description("Whether chip is selected").defaultValue(""),
|
|
55
56
|
shape: import_ds_utilities.PropTypes.oneOf(import_constants.ChipShapesValuesArray).description(import_constants.ChipShapesValuesString).defaultValue(import_constants.CHIP_SHAPES.DEFAULT),
|
|
@@ -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 React, { WeakValidationMap } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, XstyledProps } from '@elliemae/ds-utilities';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n} from './constants';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n }\n interface OptionalProps {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n interface RequiredProps {\n label: string;\n icon: () => JSX.Element;\n }\n export interface Props extends OptionalProps, Partial<DefaultProps>, RequiredProps, XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\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 innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAqF;AACrF,uBAOO;AAGA,MAAM,eAAqC;AAAA,EAChD,MAAM,4BAAW;AAAA,EACjB,OAAO,6BAAY;AACrB;AAmBO,MAAM,kBAAkB,gDAC1B,gDACA,uCAF0B;AAAA,EAG7B,MAAM,8BAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,8BAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,8BAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,8BAAU,MAAM,sCAAqB,EAAE,YAAY,uCAAsB,EAAE,aAAa,6BAAY,OAAO;AAAA,EAClH,MAAM,8BAAU,MAAM,qCAAoB,EAAE,YAAY,sCAAqB,EAAE,aAAa,4BAAW,CAAC;AAAA,EACxG,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -22,7 +22,9 @@ var styles_exports = {};
|
|
|
22
22
|
__export(styles_exports, {
|
|
23
23
|
StyledChip: () => StyledChip,
|
|
24
24
|
StyledChipLabel: () => StyledChipLabel,
|
|
25
|
-
StyledRoundShape: () => StyledRoundShape
|
|
25
|
+
StyledRoundShape: () => StyledRoundShape,
|
|
26
|
+
StyledSpanWithEllipsis: () => StyledSpanWithEllipsis,
|
|
27
|
+
StyledWrapper: () => StyledWrapper
|
|
26
28
|
});
|
|
27
29
|
module.exports = __toCommonJS(styles_exports);
|
|
28
30
|
var React = __toESM(require("react"));
|
|
@@ -56,12 +58,18 @@ const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_expor
|
|
|
56
58
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
57
59
|
word-wrap: break-word;
|
|
58
60
|
margin: 0 6px;
|
|
61
|
+
z-index: 0;
|
|
59
62
|
line-height: 1.45;
|
|
60
63
|
width: 100%;
|
|
61
64
|
display: flex;
|
|
62
65
|
align-items: center;
|
|
63
66
|
justify-content: center;
|
|
64
67
|
`;
|
|
68
|
+
const StyledWrapper = (0, import_ds_system.styled)("div")`
|
|
69
|
+
display: flex;
|
|
70
|
+
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
71
|
+
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
72
|
+
`;
|
|
65
73
|
const StyledChip = (0, import_ds_system.styled)("button", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.BUTTON })`
|
|
66
74
|
position: relative;
|
|
67
75
|
display: flex;
|
|
@@ -69,8 +77,8 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
|
|
|
69
77
|
align-items: center;
|
|
70
78
|
justify-content: space-evenly;
|
|
71
79
|
border: none;
|
|
72
|
-
height:
|
|
73
|
-
width:
|
|
80
|
+
height: 100%;
|
|
81
|
+
width: 100%;
|
|
74
82
|
background-color: #fff;
|
|
75
83
|
color: ${({ theme }) => theme.colors.brand[600]};
|
|
76
84
|
border-radius: 4px;
|
|
@@ -154,7 +162,10 @@ const disabledRoundShape = import_ds_system.css`
|
|
|
154
162
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
155
163
|
}
|
|
156
164
|
`;
|
|
157
|
-
const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
165
|
+
const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
166
|
+
name: import_exported_related.DSChipName,
|
|
167
|
+
slot: import_exported_related.DSChipSlots.ROUND_SHAPE
|
|
168
|
+
})`
|
|
158
169
|
background-color: ${({ theme }) => theme.colors.brand[600]};
|
|
159
170
|
width: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
|
|
160
171
|
height: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
|
|
@@ -172,4 +183,10 @@ const StyledRoundShape = (0, import_ds_system.styled)("div", { name: import_expo
|
|
|
172
183
|
|
|
173
184
|
${({ disabled }) => disabled && disabledRoundShape}
|
|
174
185
|
`;
|
|
186
|
+
const StyledSpanWithEllipsis = import_ds_system.styled.span`
|
|
187
|
+
white-space: nowrap;
|
|
188
|
+
overflow: hidden;
|
|
189
|
+
text-overflow: ellipsis;
|
|
190
|
+
max-width: 100%;
|
|
191
|
+
`;
|
|
175
192
|
//# 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 } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,uBAAkG;AAElG,8BAAwC;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\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 styledChipSelectedCss = css`\n & > div:first-child {\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 .ds-icon-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[800]};\n }\n }\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n margin: 0 6px;\n z-index: 0;\n line-height: 1.45;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledWrapper = styled('div')`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<StyledChipPropsT>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-evenly;\n border: none;\n height: 100%;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n }\n\n & .ds-icon-root .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .ds-icon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover {\n & > div:first-child {\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 .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n & > div:first-child {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .ds-icon-root .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.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 margin: 3px 0px;\n\n & .ds-icon-root .ds-icon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\n }\n\n ${({ disabled }) => disabled && disabledRoundShape}\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSChip.js
CHANGED
|
@@ -27,30 +27,34 @@ var __objRest = (source, exclude) => {
|
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
29
|
import * as React from "react";
|
|
30
|
-
import React2 from "react";
|
|
31
|
-
import { describe } from "@elliemae/ds-utilities";
|
|
32
|
-
import {
|
|
30
|
+
import React2, { useMemo } from "react";
|
|
31
|
+
import { describe, useIsShowingEllipsis } from "@elliemae/ds-utilities";
|
|
32
|
+
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
33
33
|
import { useConfig } from "./config/useConfig";
|
|
34
|
-
import { StyledChip, StyledChipLabel, StyledRoundShape } from "./styles";
|
|
34
|
+
import { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from "./styles";
|
|
35
35
|
import { CHIP_SHAPES } from "./constants";
|
|
36
36
|
import { DSChipPropTypes } from "./react-desc-prop-types";
|
|
37
37
|
const DSChip = (props) => {
|
|
38
|
-
const { size, selected, innerRef, icon: Icon, globalAttrs, xStyledAttrs } = useConfig(props);
|
|
39
|
-
const _a = globalAttrs, { shape, label, type, disabled } = _a, restGlobals = __objRest(_a, ["shape", "label", "type", "disabled"]);
|
|
40
|
-
|
|
38
|
+
const { size, shape, selected, innerRef, icon: Icon, globalAttrs, xStyledAttrs } = useConfig(props);
|
|
39
|
+
const _a = globalAttrs, { shape: shapeGlobal, label, type, disabled } = _a, restGlobals = __objRest(_a, ["shape", "label", "type", "disabled"]);
|
|
40
|
+
const { setElement, isShowingEllipsis } = useIsShowingEllipsis();
|
|
41
|
+
const ConditionalTooltip = useMemo(() => isShowingEllipsis ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children), [isShowingEllipsis]);
|
|
42
|
+
return /* @__PURE__ */ React2.createElement(StyledWrapper, {
|
|
43
|
+
buttonShape: shape,
|
|
44
|
+
buttonSize: size
|
|
45
|
+
}, /* @__PURE__ */ React2.createElement(ConditionalTooltip, {
|
|
46
|
+
text: label
|
|
47
|
+
}, /* @__PURE__ */ React2.createElement(StyledChip, __spreadValues(__spreadValues({
|
|
41
48
|
"aria-disabled": disabled,
|
|
42
49
|
disabled,
|
|
43
|
-
buttonShape: shape,
|
|
44
|
-
size,
|
|
45
50
|
ref: innerRef,
|
|
46
51
|
selected
|
|
47
52
|
}, restGlobals), xStyledAttrs), shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ React2.createElement(StyledRoundShape, {
|
|
48
53
|
disabled,
|
|
49
54
|
size
|
|
50
|
-
}, /* @__PURE__ */ React2.createElement(Icon, null)) : /* @__PURE__ */ React2.createElement(Icon, null), /* @__PURE__ */ React2.createElement(StyledChipLabel, null, /* @__PURE__ */ React2.createElement(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
})));
|
|
55
|
+
}, /* @__PURE__ */ React2.createElement(Icon, null)) : /* @__PURE__ */ React2.createElement(Icon, null), /* @__PURE__ */ React2.createElement(StyledChipLabel, null, /* @__PURE__ */ React2.createElement(StyledSpanWithEllipsis, {
|
|
56
|
+
ref: setElement
|
|
57
|
+
}, label)))));
|
|
54
58
|
};
|
|
55
59
|
DSChip.propTypes = DSChipPropTypes;
|
|
56
60
|
DSChip.displayName = "DSChip";
|
package/dist/esm/DSChip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSChip.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,UAAU,UAAU,MAAM,MAAM,aAAa,iBAAiB,UAAU,KAAK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { useConfig } from './config/useConfig';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport { DSChipT, DSChipPropTypes } from './react-desc-prop-types';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const { size, shape, selected, innerRef, icon: Icon, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, label, type, disabled, ...restGlobals } = globalAttrs;\n\n const { setElement, isShowingEllipsis } = useIsShowingEllipsis();\n\n const ConditionalTooltip = useMemo(\n () => (isShowingEllipsis ? DSTooltipV3 : ({ children }) => <>{children}</>),\n [isShowingEllipsis],\n );\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size}>\n <ConditionalTooltip text={label}>\n <StyledChip\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n {...restGlobals}\n {...xStyledAttrs}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size}>\n <Icon />\n </StyledRoundShape>\n ) : (\n <Icon />\n )}\n <StyledChipLabel>\n <StyledSpanWithEllipsis ref={setElement}>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </ConditionalTooltip>\n </StyledWrapper>\n );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,aAAa,iBAAiB,UAAU,KAAK;AAElG,QAAsE,kBAA9D,SAAO,aAAa,OAAO,MAAM,aAA6B,IAAhB,wBAAgB,IAAhB,CAA9C,SAAoB,SAAO,QAAM;AAEzC,QAAM,EAAE,YAAY,sBAAsB,qBAAqB;AAE/D,QAAM,qBAAqB,QACzB,MAAO,oBAAoB,cAAc,CAAC,EAAE,eAAe,4DAAG,QAAS,GACvE,CAAC,iBAAiB,CACpB;AACA,SACE,qCAAC;AAAA,IAAc,aAAa;AAAA,IAAO,YAAY;AAAA,KAC7C,qCAAC;AAAA,IAAmB,MAAM;AAAA,KACxB,qCAAC;AAAA,IACC,iBAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,KACI,cACA,eAEH,UAAU,YAAY,QACrB,qCAAC;AAAA,IAAiB;AAAA,IAAoB;AAAA,KACpC,qCAAC,UAAK,CACR,IAEA,qCAAC,UAAK,GAER,qCAAC,uBACC,qCAAC;AAAA,IAAuB,KAAK;AAAA,KAAa,KAAM,CAClD,CACF,CACF,CACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
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/config/useConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSChipT, defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEO,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AAEzE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSChipT, defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes);\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEO,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AAEzE,iCAA+B,kBAAkB,eAAe;AAChE,QAAM,cAAc,uBAAuB,gBAAgB;AAC3D,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SAAO,iCAAK,mBAAL,EAAuB,aAAa,aAAa;AAC1D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,11 +18,7 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
import * as React from "react";
|
|
21
|
-
import {
|
|
22
|
-
PropTypes,
|
|
23
|
-
globalAttributesPropTypes,
|
|
24
|
-
xstyledPropTypes
|
|
25
|
-
} from "@elliemae/ds-utilities";
|
|
21
|
+
import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
|
|
26
22
|
import {
|
|
27
23
|
CHIP_SIZES,
|
|
28
24
|
CHIP_SHAPES,
|
|
@@ -36,7 +32,8 @@ const defaultProps = {
|
|
|
36
32
|
shape: CHIP_SHAPES.DEFAULT
|
|
37
33
|
};
|
|
38
34
|
const DSChipPropTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
|
|
39
|
-
icon: PropTypes.func.isRequired.description("Chip Icon").defaultValue()
|
|
35
|
+
icon: PropTypes.func.isRequired.description("Chip Icon").defaultValue(() => {
|
|
36
|
+
}),
|
|
40
37
|
label: PropTypes.string.isRequired.description("Chip Label").defaultValue(""),
|
|
41
38
|
selected: PropTypes.bool.description("Whether chip is selected").defaultValue(""),
|
|
42
39
|
shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes, XstyledProps } from '@elliemae/ds-utilities';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n} from './constants';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n }\n interface OptionalProps {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n interface RequiredProps {\n label: string;\n icon: () => JSX.Element;\n }\n export interface Props extends OptionalProps, Partial<DefaultProps>, RequiredProps, XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\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 innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,MAAM,eAAqC;AAAA,EAChD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AACrB;AAmBO,MAAM,kBAAkB,gDAC1B,4BACA,mBAF0B;AAAA,EAG7B,MAAM,UAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,UAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,UAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,UAAU,MAAM,qBAAqB,EAAE,YAAY,sBAAsB,EAAE,aAAa,YAAY,OAAO;AAAA,EAClH,MAAM,UAAU,MAAM,oBAAoB,EAAE,YAAY,qBAAqB,EAAE,aAAa,WAAW,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -29,12 +29,18 @@ const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABE
|
|
|
29
29
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
30
30
|
word-wrap: break-word;
|
|
31
31
|
margin: 0 6px;
|
|
32
|
+
z-index: 0;
|
|
32
33
|
line-height: 1.45;
|
|
33
34
|
width: 100%;
|
|
34
35
|
display: flex;
|
|
35
36
|
align-items: center;
|
|
36
37
|
justify-content: center;
|
|
37
38
|
`;
|
|
39
|
+
const StyledWrapper = styled("div")`
|
|
40
|
+
display: flex;
|
|
41
|
+
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
42
|
+
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
43
|
+
`;
|
|
38
44
|
const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
|
|
39
45
|
position: relative;
|
|
40
46
|
display: flex;
|
|
@@ -42,8 +48,8 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
42
48
|
align-items: center;
|
|
43
49
|
justify-content: space-evenly;
|
|
44
50
|
border: none;
|
|
45
|
-
height:
|
|
46
|
-
width:
|
|
51
|
+
height: 100%;
|
|
52
|
+
width: 100%;
|
|
47
53
|
background-color: #fff;
|
|
48
54
|
color: ${({ theme }) => theme.colors.brand[600]};
|
|
49
55
|
border-radius: 4px;
|
|
@@ -127,7 +133,10 @@ const disabledRoundShape = css`
|
|
|
127
133
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
128
134
|
}
|
|
129
135
|
`;
|
|
130
|
-
const StyledRoundShape = styled("div", {
|
|
136
|
+
const StyledRoundShape = styled("div", {
|
|
137
|
+
name: DSChipName,
|
|
138
|
+
slot: DSChipSlots.ROUND_SHAPE
|
|
139
|
+
})`
|
|
131
140
|
background-color: ${({ theme }) => theme.colors.brand[600]};
|
|
132
141
|
width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
|
|
133
142
|
height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
|
|
@@ -145,9 +154,17 @@ const StyledRoundShape = styled("div", { name: DSChipName, slot: DSChipSlots.ROU
|
|
|
145
154
|
|
|
146
155
|
${({ disabled }) => disabled && disabledRoundShape}
|
|
147
156
|
`;
|
|
157
|
+
const StyledSpanWithEllipsis = styled.span`
|
|
158
|
+
white-space: nowrap;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
text-overflow: ellipsis;
|
|
161
|
+
max-width: 100%;
|
|
162
|
+
`;
|
|
148
163
|
export {
|
|
149
164
|
StyledChip,
|
|
150
165
|
StyledChipLabel,
|
|
151
|
-
StyledRoundShape
|
|
166
|
+
StyledRoundShape,
|
|
167
|
+
StyledSpanWithEllipsis,
|
|
168
|
+
StyledWrapper
|
|
152
169
|
};
|
|
153
170
|
//# sourceMappingURL=styles.js.map
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AAEA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\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 styledChipSelectedCss = css`\n & > div:first-child {\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 .ds-icon-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[800]};\n }\n }\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n margin: 0 6px;\n z-index: 0;\n line-height: 1.45;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledWrapper = styled('div')`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<StyledChipPropsT>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-evenly;\n border: none;\n height: 100%;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n }\n\n & .ds-icon-root .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 24px;\n width: 24px;\n }\n\n & .ds-icon-root {\n height: 24px;\n width: 24px;\n }\n\n &:hover {\n & > div:first-child {\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 .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n & > div:first-child {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .ds-icon-root .ds-icon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.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 margin: 3px 0px;\n\n & .ds-icon-root .ds-icon-svg {\n fill: #fff;\n height: 24px;\n width: 24px;\n }\n\n ${({ disabled }) => disabled && disabledRoundShape}\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chip",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.78",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chip",
|
|
6
6
|
"files": [
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
},
|
|
72
72
|
"dependencies": {
|
|
73
73
|
"@elliemae/ds-system": "workspace:*",
|
|
74
|
-
"@elliemae/ds-
|
|
74
|
+
"@elliemae/ds-tooltip": "workspace:*",
|
|
75
75
|
"@elliemae/ds-utilities": "workspace:*"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|