@elliemae/ds-chip 3.9.1-rc.8 → 3.9.1

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.
Files changed (9) hide show
  1. package/dist/cjs/DSChip.js +23 -36
  2. package/dist/cjs/DSChip.js.map +2 -2
  3. package/dist/cjs/styles.js +25 -5
  4. package/dist/cjs/styles.js.map +2 -2
  5. package/dist/esm/DSChip.js +25 -45
  6. package/dist/esm/DSChip.js.map +2 -2
  7. package/dist/esm/styles.js +25 -5
  8. package/dist/esm/styles.js.map +2 -2
  9. package/package.json +5 -5
package/dist/cjs/DSChip.js CHANGED
@@ -30,53 +30,40 @@ __export(DSChip_exports, {
30
30
  module.exports = __toCommonJS(DSChip_exports);
31
31
  var React = __toESM(require("react"));
32
32
  var import_jsx_runtime = require("react/jsx-runtime");
33
- var import_react = require("react");
34
33
  var import_ds_utilities = require("@elliemae/ds-utilities");
35
- var import_ds_tooltip = require("@elliemae/ds-tooltip");
36
34
  var import_useConfig = require("./config/useConfig");
37
35
  var import_styles = require("./styles");
38
36
  var import_constants = require("./constants");
39
37
  var import_react_desc_prop_types = require("./react-desc-prop-types");
40
- const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChildrenWrapper, {
41
- children: props.children
42
- });
43
38
  const DSChip = (props) => {
44
39
  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = (0, import_useConfig.useConfig)(props);
45
- const { shape: shapeGlobal, type, disabled, ...restGlobals } = globalAttrs;
46
- const { setElement, isShowingEllipsis } = (0, import_ds_utilities.useIsShowingEllipsis)();
47
- const ConditionalTooltip = (0, import_react.useMemo)(() => isShowingEllipsis ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [isShowingEllipsis]);
48
- const stopPropagation = (e) => {
49
- e.stopPropagation();
50
- };
40
+ const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;
51
41
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapper, {
52
42
  buttonShape: shape,
53
43
  buttonSize: size,
54
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConditionalTooltip, {
55
- text: label,
56
- onMouseDown: stopPropagation,
57
- onTouchStart: stopPropagation,
58
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledChip, {
59
- "aria-disabled": disabled,
60
- disabled,
61
- ref: innerRef,
62
- selected,
63
- role: "button",
64
- ...restGlobals,
65
- ...xStyledAttrs,
66
- children: [
67
- shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, {
68
- disabled,
69
- size,
70
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
71
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, {
73
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSpanWithEllipsis, {
74
- ref: setElement,
75
- children: label
76
- })
44
+ className,
45
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledChip, {
46
+ buttonShape: shape,
47
+ "aria-disabled": disabled,
48
+ disabled,
49
+ ref: innerRef,
50
+ selected,
51
+ role: "button",
52
+ ...restGlobals,
53
+ ...xStyledAttrs,
54
+ children: [
55
+ shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, {
56
+ disabled,
57
+ size,
58
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
59
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
60
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, {
61
+ size,
62
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSpanWithEllipsis, {
63
+ children: label
77
64
  })
78
- ]
79
- })
65
+ })
66
+ ]
80
67
  })
81
68
  });
82
69
  };
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, { useMemo } from 'react';\nimport { describe, useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { useConfig } from './config/useConfig';\nimport {\n StyledChip,\n StyledChipLabel,\n StyledChildrenWrapper,\n StyledWrapper,\n StyledRoundShape,\n StyledSpanWithEllipsis,\n} from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport { DSChipT, DSChipPropTypes } from './react-desc-prop-types';\n\nconst EmptyComp: typeof DSTooltipV3 = (props) => <StyledChildrenWrapper>{props.children}</StyledChildrenWrapper>;\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, type, disabled, ...restGlobals } = globalAttrs;\n\n const { setElement, isShowingEllipsis } = useIsShowingEllipsis();\n\n const ConditionalTooltip = useMemo(() => (isShowingEllipsis ? DSTooltipV3 : EmptyComp), [isShowingEllipsis]);\n\n const stopPropagation = (e: React.MouseEvent | React.TouchEvent) => {\n e.stopPropagation();\n };\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size}>\n <ConditionalTooltip text={label} onMouseDown={stopPropagation} onTouchStart={stopPropagation}>\n <StyledChip\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n role=\"button\"\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;AAAA,mBAA+B;AAC/B,0BAA+C;AAC/C,wBAA4B;AAC5B,uBAA0B;AAC1B,oBAOO;AACP,uBAA4B;AAC5B,mCAAyC;AAEzC,MAAM,YAAgC,CAAC,UAAU,4CAAC;AAAA,EAAuB,gBAAM;AAAA,CAAS;AAExF,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,QAAI,4BAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,aAAa,YAAY,IAAI;AAE/D,QAAM,EAAE,YAAY,kBAAkB,QAAI,0CAAqB;AAE/D,QAAM,yBAAqB,sBAAQ,MAAO,oBAAoB,gCAAc,WAAY,CAAC,iBAAiB,CAAC;AAE3G,QAAM,kBAAkB,CAAC,MAA2C;AAClE,MAAE,gBAAgB;AAAA,EACpB;AAEA,SACE,4CAAC;AAAA,IAAc,aAAa;AAAA,IAAO,YAAY;AAAA,IAC7C,sDAAC;AAAA,MAAmB,MAAM;AAAA,MAAO,aAAa;AAAA,MAAiB,cAAc;AAAA,MAC3E,uDAAC;AAAA,QACC,iBAAe;AAAA,QACf;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,oBAAU,6BAAY,QACrB,4CAAC;AAAA,YAAiB;AAAA,YAAoB;AAAA,YACpC,sDAAC,QAAK;AAAA,WACR,IAEA,4CAAC,QAAK;AAAA,UAER,4CAAC;AAAA,YACC,sDAAC;AAAA,cAAuB,KAAK;AAAA,cAAa;AAAA,aAAM;AAAA,WAClD;AAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,uBAAmB,8BAAS,MAAM;AACxC,iBAAiB,YAAY;",
4
+ "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\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, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size} className={className}>\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n role=\"button\"\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 size={size}>\n <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\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;AACA,0BAAyB;AACzB,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAC5B,mCAAyC;AAEzC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,QAAI,4BAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,4CAAC;AAAA,IAAc,aAAa;AAAA,IAAO,YAAY;AAAA,IAAM;AAAA,IACnD,uDAAC;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,kBAAU,6BAAY,QACrB,4CAAC;AAAA,UAAiB;AAAA,UAAoB;AAAA,UACpC,sDAAC,QAAK;AAAA,SACR,IAEA,4CAAC,QAAK;AAAA,QAER,4CAAC;AAAA,UAAgB;AAAA,UACf,sDAAC;AAAA,YAAwB;AAAA,WAAM;AAAA,SACjC;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,uBAAmB,8BAAS,MAAM;AACxC,iBAAiB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styles.js CHANGED
@@ -62,9 +62,10 @@ const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_expor
62
62
  font-size: ${({ theme }) => theme.fontSizes.label[200]};
63
63
  font-weight: ${({ theme }) => theme.fontWeights.semibold};
64
64
  word-wrap: break-word;
65
- margin: 0 6px;
65
+ text-align: center;
66
+ padding: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "2px" : "4px"} 6px 6px 6px;
66
67
  z-index: 0;
67
- line-height: 1.45;
68
+ line-height: 1.27;
68
69
  width: inherit;
69
70
  display: flex;
70
71
  align-items: center;
@@ -86,9 +87,11 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
86
87
  display: flex;
87
88
  flex-direction: column;
88
89
  align-items: center;
89
- justify-content: space-evenly;
90
+ padding: 0;
91
+ padding-top: ${(props) => props.buttonShape === import_constants.CHIP_SHAPES.ROUND ? "0" : "10px"};
90
92
  border: none;
91
- height: 100%;
93
+ min-height: 100%;
94
+ height: fit-content;
92
95
  width: 100%;
93
96
  background-color: #fff;
94
97
  color: ${({ theme }) => theme.colors.brand[600]};
@@ -99,12 +102,14 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
99
102
  &:before {
100
103
  content: '';
101
104
  position: absolute;
105
+ z-index: 20;
102
106
  top: 0;
103
107
  left: 0;
104
108
  width: 100%;
105
109
  height: 100%;
106
110
  border-radius: 4px;
107
111
  border: 2px solid transparent;
112
+ pointer-events: none;
108
113
  }
109
114
 
110
115
  & .ds-icon-root .ds-icon-svg {
@@ -118,6 +123,21 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
118
123
  width: 24px;
119
124
  }
120
125
 
126
+ &:hover,
127
+ &:focus {
128
+ z-index: 10;
129
+
130
+ ${StyledChipLabel} {
131
+ text-align: left;
132
+ }
133
+
134
+ ${StyledSpanWithEllipsis} {
135
+ overflow-wrap: break-word;
136
+ white-space: pre-wrap;
137
+ overflow: visible;
138
+ }
139
+ }
140
+
121
141
  &:hover {
122
142
  & > div:first-child {
123
143
  background-color: ${({ theme }) => theme.colors.brand[800]};
@@ -184,7 +204,7 @@ const StyledRoundShape = (0, import_ds_system.styled)("div", {
184
204
  display: flex;
185
205
  align-items: center;
186
206
  justify-content: center;
187
- margin: 3px 0px;
207
+ margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
188
208
 
189
209
  & .ds-icon-root .ds-icon-svg {
190
210
  fill: #fff;
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 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\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: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\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 })<\n Pick<StyledChipPropsT, 'selected'>\n>`\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 StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
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 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\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 })<{ 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')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\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 })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\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 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\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 &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n }\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-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\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 StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 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
@@ -1,59 +1,39 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { useMemo } from "react";
4
- import { describe, useIsShowingEllipsis } from "@elliemae/ds-utilities";
5
- import { DSTooltipV3 } from "@elliemae/ds-tooltip";
3
+ import { describe } from "@elliemae/ds-utilities";
6
4
  import { useConfig } from "./config/useConfig";
7
- import {
8
- StyledChip,
9
- StyledChipLabel,
10
- StyledChildrenWrapper,
11
- StyledWrapper,
12
- StyledRoundShape,
13
- StyledSpanWithEllipsis
14
- } from "./styles";
5
+ import { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from "./styles";
15
6
  import { CHIP_SHAPES } from "./constants";
16
7
  import { DSChipPropTypes } from "./react-desc-prop-types";
17
- const EmptyComp = (props) => /* @__PURE__ */ jsx(StyledChildrenWrapper, {
18
- children: props.children
19
- });
20
8
  const DSChip = (props) => {
21
9
  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);
22
- const { shape: shapeGlobal, type, disabled, ...restGlobals } = globalAttrs;
23
- const { setElement, isShowingEllipsis } = useIsShowingEllipsis();
24
- const ConditionalTooltip = useMemo(() => isShowingEllipsis ? DSTooltipV3 : EmptyComp, [isShowingEllipsis]);
25
- const stopPropagation = (e) => {
26
- e.stopPropagation();
27
- };
10
+ const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;
28
11
  return /* @__PURE__ */ jsx(StyledWrapper, {
29
12
  buttonShape: shape,
30
13
  buttonSize: size,
31
- children: /* @__PURE__ */ jsx(ConditionalTooltip, {
32
- text: label,
33
- onMouseDown: stopPropagation,
34
- onTouchStart: stopPropagation,
35
- children: /* @__PURE__ */ jsxs(StyledChip, {
36
- "aria-disabled": disabled,
37
- disabled,
38
- ref: innerRef,
39
- selected,
40
- role: "button",
41
- ...restGlobals,
42
- ...xStyledAttrs,
43
- children: [
44
- shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, {
45
- disabled,
46
- size,
47
- children: /* @__PURE__ */ jsx(Icon, {})
48
- }) : /* @__PURE__ */ jsx(Icon, {}),
49
- /* @__PURE__ */ jsx(StyledChipLabel, {
50
- children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, {
51
- ref: setElement,
52
- children: label
53
- })
14
+ className,
15
+ children: /* @__PURE__ */ jsxs(StyledChip, {
16
+ buttonShape: shape,
17
+ "aria-disabled": disabled,
18
+ disabled,
19
+ ref: innerRef,
20
+ selected,
21
+ role: "button",
22
+ ...restGlobals,
23
+ ...xStyledAttrs,
24
+ children: [
25
+ shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, {
26
+ disabled,
27
+ size,
28
+ children: /* @__PURE__ */ jsx(Icon, {})
29
+ }) : /* @__PURE__ */ jsx(Icon, {}),
30
+ /* @__PURE__ */ jsx(StyledChipLabel, {
31
+ size,
32
+ children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, {
33
+ children: label
54
34
  })
55
- ]
56
- })
35
+ })
36
+ ]
57
37
  })
58
38
  });
59
39
  };
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, { useMemo } from 'react';\nimport { describe, useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { useConfig } from './config/useConfig';\nimport {\n StyledChip,\n StyledChipLabel,\n StyledChildrenWrapper,\n StyledWrapper,\n StyledRoundShape,\n StyledSpanWithEllipsis,\n} from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport { DSChipT, DSChipPropTypes } from './react-desc-prop-types';\n\nconst EmptyComp: typeof DSTooltipV3 = (props) => <StyledChildrenWrapper>{props.children}</StyledChildrenWrapper>;\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, type, disabled, ...restGlobals } = globalAttrs;\n\n const { setElement, isShowingEllipsis } = useIsShowingEllipsis();\n\n const ConditionalTooltip = useMemo(() => (isShowingEllipsis ? DSTooltipV3 : EmptyComp), [isShowingEllipsis]);\n\n const stopPropagation = (e: React.MouseEvent | React.TouchEvent) => {\n e.stopPropagation();\n };\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size}>\n <ConditionalTooltip text={label} onMouseDown={stopPropagation} onTouchStart={stopPropagation}>\n <StyledChip\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n role=\"button\"\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,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,UAAU,4BAA4B;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAkB,uBAAuB;AAEzC,MAAM,YAAgC,CAAC,UAAU,oBAAC;AAAA,EAAuB,gBAAM;AAAA,CAAS;AAExF,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,aAAa,YAAY,IAAI;AAE/D,QAAM,EAAE,YAAY,kBAAkB,IAAI,qBAAqB;AAE/D,QAAM,qBAAqB,QAAQ,MAAO,oBAAoB,cAAc,WAAY,CAAC,iBAAiB,CAAC;AAE3G,QAAM,kBAAkB,CAAC,MAA2C;AAClE,MAAE,gBAAgB;AAAA,EACpB;AAEA,SACE,oBAAC;AAAA,IAAc,aAAa;AAAA,IAAO,YAAY;AAAA,IAC7C,8BAAC;AAAA,MAAmB,MAAM;AAAA,MAAO,aAAa;AAAA,MAAiB,cAAc;AAAA,MAC3E,+BAAC;AAAA,QACC,iBAAe;AAAA,QACf;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,oBAAU,YAAY,QACrB,oBAAC;AAAA,YAAiB;AAAA,YAAoB;AAAA,YACpC,8BAAC,QAAK;AAAA,WACR,IAEA,oBAAC,QAAK;AAAA,UAER,oBAAC;AAAA,YACC,8BAAC;AAAA,cAAuB,KAAK;AAAA,cAAa;AAAA,aAAM;AAAA,WAClD;AAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\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, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size} className={className}>\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled}\n disabled={disabled}\n ref={innerRef}\n selected={selected}\n role=\"button\"\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 size={size}>\n <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\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,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAC5B,SAAkB,uBAAuB;AAEzC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,oBAAC;AAAA,IAAc,aAAa;AAAA,IAAO,YAAY;AAAA,IAAM;AAAA,IACnD,+BAAC;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,kBAAU,YAAY,QACrB,oBAAC;AAAA,UAAiB;AAAA,UAAoB;AAAA,UACpC,8BAAC,QAAK;AAAA,SACR,IAEA,oBAAC,QAAK;AAAA,QAER,oBAAC;AAAA,UAAgB;AAAA,UACf,8BAAC;AAAA,YAAwB;AAAA,WAAM;AAAA,SACjC;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/styles.js CHANGED
@@ -28,9 +28,10 @@ const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABE
28
28
  font-size: ${({ theme }) => theme.fontSizes.label[200]};
29
29
  font-weight: ${({ theme }) => theme.fontWeights.semibold};
30
30
  word-wrap: break-word;
31
- margin: 0 6px;
31
+ text-align: center;
32
+ padding: ${({ size }) => size === CHIP_SIZES.L ? "2px" : "4px"} 6px 6px 6px;
32
33
  z-index: 0;
33
- line-height: 1.45;
34
+ line-height: 1.27;
34
35
  width: inherit;
35
36
  display: flex;
36
37
  align-items: center;
@@ -52,9 +53,11 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
52
53
  display: flex;
53
54
  flex-direction: column;
54
55
  align-items: center;
55
- justify-content: space-evenly;
56
+ padding: 0;
57
+ padding-top: ${(props) => props.buttonShape === CHIP_SHAPES.ROUND ? "0" : "10px"};
56
58
  border: none;
57
- height: 100%;
59
+ min-height: 100%;
60
+ height: fit-content;
58
61
  width: 100%;
59
62
  background-color: #fff;
60
63
  color: ${({ theme }) => theme.colors.brand[600]};
@@ -65,12 +68,14 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
65
68
  &:before {
66
69
  content: '';
67
70
  position: absolute;
71
+ z-index: 20;
68
72
  top: 0;
69
73
  left: 0;
70
74
  width: 100%;
71
75
  height: 100%;
72
76
  border-radius: 4px;
73
77
  border: 2px solid transparent;
78
+ pointer-events: none;
74
79
  }
75
80
 
76
81
  & .ds-icon-root .ds-icon-svg {
@@ -84,6 +89,21 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
84
89
  width: 24px;
85
90
  }
86
91
 
92
+ &:hover,
93
+ &:focus {
94
+ z-index: 10;
95
+
96
+ ${StyledChipLabel} {
97
+ text-align: left;
98
+ }
99
+
100
+ ${StyledSpanWithEllipsis} {
101
+ overflow-wrap: break-word;
102
+ white-space: pre-wrap;
103
+ overflow: visible;
104
+ }
105
+ }
106
+
87
107
  &:hover {
88
108
  & > div:first-child {
89
109
  background-color: ${({ theme }) => theme.colors.brand[800]};
@@ -150,7 +170,7 @@ const StyledRoundShape = styled("div", {
150
170
  display: flex;
151
171
  align-items: center;
152
172
  justify-content: center;
153
- margin: 3px 0px;
173
+ margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
154
174
 
155
175
  & .ds-icon-root .ds-icon-svg {
156
176
  fill: #fff;
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 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\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: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\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 })<\n Pick<StyledChipPropsT, 'selected'>\n>`\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 StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 100%;\n`;\n"],
5
- "mappings": "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",
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 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\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 })<{ 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')} 6px 6px 6px;\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.span`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\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 })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\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 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\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 &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n }\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-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\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 StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n width: 100%;\n height: 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.9.1-rc.8",
3
+ "version": "3.9.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chip",
6
6
  "files": [
@@ -63,12 +63,12 @@
63
63
  "indent": 4
64
64
  },
65
65
  "dependencies": {
66
- "@elliemae/ds-system": "3.9.1-rc.8",
67
- "@elliemae/ds-tooltip": "3.9.1-rc.8",
68
- "@elliemae/ds-utilities": "3.9.1-rc.8"
66
+ "@elliemae/ds-system": "3.9.1",
67
+ "@elliemae/ds-tooltip": "3.9.1",
68
+ "@elliemae/ds-utilities": "3.9.1"
69
69
  },
70
70
  "devDependencies": {
71
- "@elliemae/ds-icons": "3.9.1-rc.8",
71
+ "@elliemae/ds-icons": "3.9.1",
72
72
  "@testing-library/jest-dom": "~5.16.4",
73
73
  "@testing-library/react": "~12.1.3",
74
74
  "styled-components": "~5.3.5"