@coveord/plasma-mantine 55.0.4 → 55.1.0

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 (16) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/.turbo/turbo-test.log +32 -32
  3. package/dist/.tsbuildinfo +1 -1
  4. package/dist/cjs/components/ellipsis-text/EllipsisText.d.ts +1 -1
  5. package/dist/cjs/components/ellipsis-text/EllipsisText.d.ts.map +1 -1
  6. package/dist/cjs/components/ellipsis-text/EllipsisText.js +19 -6
  7. package/dist/cjs/components/ellipsis-text/EllipsisText.js.map +1 -1
  8. package/dist/cjs/components/ellipsis-text/EllipsisText.module.css +2 -2
  9. package/dist/esm/components/ellipsis-text/EllipsisText.d.ts +1 -1
  10. package/dist/esm/components/ellipsis-text/EllipsisText.d.ts.map +1 -1
  11. package/dist/esm/components/ellipsis-text/EllipsisText.js +16 -4
  12. package/dist/esm/components/ellipsis-text/EllipsisText.js.map +1 -1
  13. package/dist/esm/components/ellipsis-text/EllipsisText.module.css +2 -2
  14. package/package.json +1 -1
  15. package/src/components/ellipsis-text/EllipsisText.module.css +2 -2
  16. package/src/components/ellipsis-text/EllipsisText.tsx +18 -9
package/dist/cjs/components/ellipsis-text/EllipsisText.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type BoxProps, type Factory, type StylesApiProps, type TextProps, type TooltipProps } from '@mantine/core';
2
2
  import { ReactNode } from 'react';
3
3
  export type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';
4
- export interface EllipsisTextProps extends BoxProps, Pick<TextProps, 'variant'>, Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
4
+ export interface EllipsisTextProps extends BoxProps, Pick<TextProps, 'variant' | 'lineClamp'>, Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
5
5
  children: ReactNode;
6
6
  tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;
7
7
  }
package/dist/cjs/components/ellipsis-text/EllipsisText.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,QAAQ,EACb,KAAK,OAAO,EAEZ,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEd,KAAK,YAAY,EAGpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGlD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,iBACb,SAAQ,QAAQ,EACZ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1B,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC;CAC/E;AAED,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,uBAAuB,CAAC;CACxC,CAAC,CAAC;AAMH,eAAO,MAAM,YAAY,kGAJxB,MAAO,YAAY;;;;;;sBAMP,OAAO,gCAEZ,OAAK;;;WAdF,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;EAgDtC,CAAC"}
1
+ {"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,QAAQ,EACb,KAAK,OAAO,EAEZ,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEd,KAAK,YAAY,EAGpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAmB,MAAM,OAAO,CAAC;AAIlD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,iBACb,SAAQ,QAAQ,EACZ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,CAAC,EACxC,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC;CAC/E;AAED,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,uBAAuB,CAAC;CACxC,CAAC,CAAC;AAMH,eAAO,MAAM,YAAY,kGAPhB,MAAQ,YAAW;;;;;;sBAQ6D,OAAO,gCACpF,OAAO;;;WAZR,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;EAwDtC,CAAC"}
package/dist/cjs/components/ellipsis-text/EllipsisText.js CHANGED
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "EllipsisText", {
8
8
  return EllipsisText;
9
9
  }
10
10
  });
11
+ var _define_property = require("@swc/helpers/_/_define_property");
11
12
  var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
13
  var _object_spread = require("@swc/helpers/_/_object_spread");
13
14
  var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
@@ -16,12 +17,13 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
16
17
  var _jsxruntime = require("react/jsx-runtime");
17
18
  var _core = require("@mantine/core");
18
19
  var _react = require("react");
20
+ var _clsx = /*#__PURE__*/ _interop_require_default._(require("clsx"));
19
21
  var _EllipsisTextmodulecss = /*#__PURE__*/ _interop_require_default._(require("./EllipsisText.module.css"));
20
22
  var defaultProps = {
21
23
  tooltipProps: {}
22
24
  };
23
25
  var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
24
- var _useProps = (0, _core.useProps)('EllipsisText', defaultProps, props), className = _useProps.className, children = _useProps.children, style = _useProps.style, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, variant = _useProps.variant, tooltipProps = _useProps.tooltipProps, others = _object_without_properties._(_useProps, [
26
+ var _useProps = (0, _core.useProps)('EllipsisText', defaultProps, props), className = _useProps.className, children = _useProps.children, style = _useProps.style, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, variant = _useProps.variant, lineClamp = _useProps.lineClamp, tooltipProps = _useProps.tooltipProps, others = _object_without_properties._(_useProps, [
25
27
  "className",
26
28
  "children",
27
29
  "style",
@@ -29,6 +31,7 @@ var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
29
31
  "styles",
30
32
  "unstyled",
31
33
  "variant",
34
+ "lineClamp",
32
35
  "tooltipProps"
33
36
  ]);
34
37
  var getStyles = (0, _core.useStyles)({
@@ -43,6 +46,12 @@ var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
43
46
  });
44
47
  var _useState = _sliced_to_array._((0, _react.useState)(false), 2), showTooltip = _useState[0], setShowTooltip = _useState[1];
45
48
  var textRef = (0, _react.useRef)();
49
+ var _getStyles = getStyles('root'), rootClass = _getStyles.className, rootStyles = _object_without_properties._(_getStyles, [
50
+ "className"
51
+ ]);
52
+ var _getStyles1 = getStyles('text'), textClass = _getStyles1.className, textStyles = _object_without_properties._(_getStyles1, [
53
+ "className"
54
+ ]);
46
55
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({
47
56
  ref: ref,
48
57
  onMouseEnter: function() {
@@ -54,23 +63,27 @@ var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
54
63
  return setShowTooltip(false);
55
64
  },
56
65
  display: "flex",
57
- w: "100%"
58
- }, getStyles('root'), others), {
66
+ w: "100%",
67
+ className: (0, _clsx.default)(rootClass, _define_property._({}, _EllipsisTextmodulecss.default.noWrap, !lineClamp))
68
+ }, rootStyles, others), {
59
69
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, _object_spread_props._(_object_spread._({
60
70
  label: children,
61
71
  opened: showTooltip
62
72
  }, tooltipProps, getStyles('tooltip')), {
63
73
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, _object_spread_props._(_object_spread._({
64
74
  variant: variant,
65
- ref: textRef
66
- }, getStyles('text')), {
75
+ ref: textRef,
76
+ className: (0, _clsx.default)(textClass, _define_property._({}, _EllipsisTextmodulecss.default.ellipsis, !lineClamp))
77
+ }, !!lineClamp && {
78
+ lineClamp: lineClamp
79
+ }, textStyles), {
67
80
  children: children
68
81
  }))
69
82
  }))
70
83
  }));
71
84
  });
72
85
  var isOverflowing = function(h) {
73
- return h.scrollWidth > h.clientWidth;
86
+ return h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;
74
87
  };
75
88
 
76
89
  //# sourceMappingURL=EllipsisText.js.map
package/dist/cjs/components/ellipsis-text/EllipsisText.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others} = useProps(\n 'EllipsisText',\n defaultProps,\n props,\n );\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n display=\"flex\"\n w=\"100%\"\n {...getStyles('root')}\n {...others}\n >\n <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>\n <Text variant={variant} ref={textRef} {...getStyles('text')}>\n {children}\n </Text>\n </Tooltip>\n </Box>\n );\n});\n\nconst isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth;\n"],"names":["EllipsisText","defaultProps","tooltipProps","polymorphicFactory","props","ref","useProps","className","children","style","classNames","styles","unstyled","variant","others","getStyles","useStyles","name","classes","useState","showTooltip","setShowTooltip","textRef","useRef","Box","onMouseEnter","current","isOverflowing","onMouseLeave","display","w","Tooltip","label","opened","Text","h","scrollWidth","clientWidth"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;;;oBAzBN;qBACmC;8EACtB;AAmBpB,IAAMC,eAA2C;IAC7CC,cAAc,CAAC;AACnB;AAEO,IAAMF,eAAeG,IAAAA,wBAAkB,EAAsB,SAACC,OAAOC;IACxE,IAAqGC,YAAAA,IAAAA,cAAQ,EACzG,gBACAL,cACAG,QAHGG,YAA8FD,UAA9FC,WAAWC,WAAmFF,UAAnFE,UAAUC,QAAyEH,UAAzEG,OAAOC,aAAkEJ,UAAlEI,YAAYC,SAAsDL,UAAtDK,QAAQC,WAA8CN,UAA9CM,UAAUC,UAAoCP,UAApCO,SAASX,eAA2BI,UAA3BJ,cAAiBY,sCAAUR;QAA9FC;QAAWC;QAAUC;QAAOC;QAAYC;QAAQC;QAAUC;QAASX;;IAK1E,IAAMa,YAAYC,IAAAA,eAAS,EAAsB;QAC7CC,MAAM;QACNC,SAAAA,8BAAO;QACPd,OAAAA;QACAG,WAAAA;QACAE,OAAAA;QACAC,YAAAA;QACAC,QAAAA;QACAC,UAAAA;IACJ;IAEA,IAAsCO,+BAAAA,IAAAA,eAAQ,EAAC,YAAxCC,cAA+BD,cAAlBE,iBAAkBF;IACtC,IAAMG,UAAUC,IAAAA,aAAM;IAEtB,qBACI,qBAACC,SAAG;QACAnB,KAAKA;QACLoB,cAAc;YACV,IAAIH,QAAQI,OAAO,IAAIC,cAAcL,QAAQI,OAAO,GAAG;gBACnDL,eAAe;YACnB;QACJ;QACAO,cAAc;mBAAMP,eAAe;;QACnCQ,SAAQ;QACRC,GAAE;OACEf,UAAU,SACVD;kBAEJ,cAAA,qBAACiB,aAAO;YAACC,OAAOxB;YAAUyB,QAAQb;WAAiBlB,cAAkBa,UAAU;sBAC3E,cAAA,qBAACmB,UAAI;gBAACrB,SAASA;gBAASR,KAAKiB;eAAaP,UAAU;0BAC/CP;;;;AAKrB;AAEA,IAAMmB,gBAAgB,SAACQ;WAAsBA,EAAEC,WAAW,GAAGD,EAAEE,WAAW"}
1
+ {"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant' | 'lineClamp'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =\n useProps('EllipsisText', defaultProps, props);\n\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n const {className: rootClass, ...rootStyles} = getStyles('root');\n const {className: textClass, ...textStyles} = getStyles('text');\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n display=\"flex\"\n w=\"100%\"\n className={clsx(rootClass, {[classes.noWrap]: !lineClamp})}\n {...rootStyles}\n {...others}\n >\n <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>\n <Text\n variant={variant}\n ref={textRef}\n className={clsx(textClass, {[classes.ellipsis]: !lineClamp})}\n {...(!!lineClamp && {lineClamp: lineClamp})}\n {...textStyles}\n >\n {children}\n </Text>\n </Tooltip>\n </Box>\n );\n});\n\nconst isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;\n"],"names":["EllipsisText","defaultProps","tooltipProps","polymorphicFactory","props","ref","useProps","className","children","style","classNames","styles","unstyled","variant","lineClamp","others","getStyles","useStyles","name","classes","useState","showTooltip","setShowTooltip","textRef","useRef","rootClass","rootStyles","textClass","textStyles","Box","onMouseEnter","current","isOverflowing","onMouseLeave","display","w","clsx","noWrap","Tooltip","label","opened","Text","ellipsis","h","scrollWidth","clientWidth","scrollHeight","clientHeight"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;;;oBA1BN;qBACmC;6DACzB;8EACG;AAmBpB,IAAMC,eAA2C;IAC7CC,cAAc,CAAC;AACnB;AAEO,IAAMF,eAAeG,IAAAA,wBAAkB,EAAsB,SAACC,OAAOC;IACxE,IACIC,YAAAA,IAAAA,cAAQ,EAAC,gBAAgBL,cAAcG,QADpCG,YACHD,UADGC,WAAWC,WACdF,UADcE,UAAUC,QACxBH,UADwBG,OAAOC,aAC/BJ,UAD+BI,YAAYC,SAC3CL,UAD2CK,QAAQC,WACnDN,UADmDM,UAAUC,UAC7DP,UAD6DO,SAASC,YACtER,UADsEQ,WAAWZ,eACjFI,UADiFJ,cAAiBa,sCAClGT;QADGC;QAAWC;QAAUC;QAAOC;QAAYC;QAAQC;QAAUC;QAASC;QAAWZ;;IAGrF,IAAMc,YAAYC,IAAAA,eAAS,EAAsB;QAC7CC,MAAM;QACNC,SAAAA,8BAAO;QACPf,OAAAA;QACAG,WAAAA;QACAE,OAAAA;QACAC,YAAAA;QACAC,QAAAA;QACAC,UAAAA;IACJ;IAEA,IAAsCQ,+BAAAA,IAAAA,eAAQ,EAAC,YAAxCC,cAA+BD,cAAlBE,iBAAkBF;IACtC,IAAMG,UAAUC,IAAAA,aAAM;IAEtB,IAA8CR,aAAAA,UAAU,SAAjDT,AAAWkB,YAA4BT,WAAvCT,WAAyBmB,0CAAcV;QAAvCT;;IACP,IAA8CS,cAAAA,UAAU,SAAjDT,AAAWoB,YAA4BX,YAAvCT,WAAyBqB,0CAAcZ;QAAvCT;;IAEP,qBACI,qBAACsB,SAAG;QACAxB,KAAKA;QACLyB,cAAc;YACV,IAAIP,QAAQQ,OAAO,IAAIC,cAAcT,QAAQQ,OAAO,GAAG;gBACnDT,eAAe;YACnB;QACJ;QACAW,cAAc;mBAAMX,eAAe;;QACnCY,SAAQ;QACRC,GAAE;QACF5B,WAAW6B,IAAAA,aAAI,EAACX,WAAY,uBAACN,8BAAO,CAACkB,MAAM,EAAG,CAACvB;OAC3CY,YACAX;kBAEJ,cAAA,qBAACuB,aAAO;YAACC,OAAO/B;YAAUgC,QAAQnB;WAAiBnB,cAAkBc,UAAU;sBAC3E,cAAA,qBAACyB,UAAI;gBACD5B,SAASA;gBACTR,KAAKkB;gBACLhB,WAAW6B,IAAAA,aAAI,EAACT,WAAY,uBAACR,8BAAO,CAACuB,QAAQ,EAAG,CAAC5B;eAC5C,CAAC,CAACA,aAAa;gBAACA,WAAWA;YAAS,GACrCc;0BAEHpB;;;;AAKrB;AAEA,IAAMwB,gBAAgB,SAACW;WAAsBA,EAAEC,WAAW,GAAGD,EAAEE,WAAW,IAAIF,EAAEG,YAAY,GAAGH,EAAEI,YAAY"}
package/dist/cjs/components/ellipsis-text/EllipsisText.module.css CHANGED
@@ -1,8 +1,8 @@
1
- .root {
1
+ .noWrap {
2
2
  white-space: nowrap;
3
3
  }
4
4
 
5
- .text {
5
+ .ellipsis {
6
6
  flex-basis: 100%;
7
7
  overflow: hidden;
8
8
  text-overflow: ellipsis;
package/dist/esm/components/ellipsis-text/EllipsisText.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type BoxProps, type Factory, type StylesApiProps, type TextProps, type TooltipProps } from '@mantine/core';
2
2
  import { ReactNode } from 'react';
3
3
  export type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';
4
- export interface EllipsisTextProps extends BoxProps, Pick<TextProps, 'variant'>, Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
4
+ export interface EllipsisTextProps extends BoxProps, Pick<TextProps, 'variant' | 'lineClamp'>, Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
5
5
  children: ReactNode;
6
6
  tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;
7
7
  }
package/dist/esm/components/ellipsis-text/EllipsisText.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,QAAQ,EACb,KAAK,OAAO,EAEZ,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEd,KAAK,YAAY,EAGpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGlD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,iBACb,SAAQ,QAAQ,EACZ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1B,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC;CAC/E;AAED,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,uBAAuB,CAAC;CACxC,CAAC,CAAC;AAMH,eAAO,MAAM,YAAY,kGAJxB,MAAO,YAAY;;;;;;sBAMP,OAAO,gCAEZ,OAAK;;;WAdF,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;EAgDtC,CAAC"}
1
+ {"version":3,"file":"EllipsisText.d.ts","sourceRoot":"","sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,QAAQ,EACb,KAAK,OAAO,EAEZ,KAAK,cAAc,EAEnB,KAAK,SAAS,EAEd,KAAK,YAAY,EAGpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAmB,MAAM,OAAO,CAAC;AAIlD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,iBACb,SAAQ,QAAQ,EACZ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,CAAC,EACxC,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC;CAC/E;AAED,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,uBAAuB,CAAC;CACxC,CAAC,CAAC;AAMH,eAAO,MAAM,YAAY,kGAPhB,MAAQ,YAAW;;;;;;sBAQ6D,OAAO,gCACpF,OAAO;;;WAZR,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;;WAH7B,iBAAiB;gBACZ,cAAc;sBACR,KAAK;iBACV,uBAAuB;EAwDtC,CAAC"}
package/dist/esm/components/ellipsis-text/EllipsisText.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Box, polymorphicFactory, Text, Tooltip, useProps, useStyles } from '@mantine/core';
3
3
  import { useRef, useState } from 'react';
4
+ import clsx from 'clsx';
4
5
  import classes from './EllipsisText.module.css';
5
6
  const defaultProps = {
6
7
  tooltipProps: {}
7
8
  };
8
9
  export const EllipsisText = polymorphicFactory((props, ref)=>{
9
- const { className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others } = useProps('EllipsisText', defaultProps, props);
10
+ const { className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others } = useProps('EllipsisText', defaultProps, props);
10
11
  const getStyles = useStyles({
11
12
  name: 'EllipsisText',
12
13
  classes,
@@ -19,6 +20,8 @@ export const EllipsisText = polymorphicFactory((props, ref)=>{
19
20
  });
20
21
  const [showTooltip, setShowTooltip] = useState(false);
21
22
  const textRef = useRef();
23
+ const { className: rootClass, ...rootStyles } = getStyles('root');
24
+ const { className: textClass, ...textStyles } = getStyles('text');
22
25
  return /*#__PURE__*/ _jsx(Box, {
23
26
  ref: ref,
24
27
  onMouseEnter: ()=>{
@@ -29,7 +32,10 @@ export const EllipsisText = polymorphicFactory((props, ref)=>{
29
32
  onMouseLeave: ()=>setShowTooltip(false),
30
33
  display: "flex",
31
34
  w: "100%",
32
- ...getStyles('root'),
35
+ className: clsx(rootClass, {
36
+ [classes.noWrap]: !lineClamp
37
+ }),
38
+ ...rootStyles,
33
39
  ...others,
34
40
  children: /*#__PURE__*/ _jsx(Tooltip, {
35
41
  label: children,
@@ -39,12 +45,18 @@ export const EllipsisText = polymorphicFactory((props, ref)=>{
39
45
  children: /*#__PURE__*/ _jsx(Text, {
40
46
  variant: variant,
41
47
  ref: textRef,
42
- ...getStyles('text'),
48
+ className: clsx(textClass, {
49
+ [classes.ellipsis]: !lineClamp
50
+ }),
51
+ ...!!lineClamp && {
52
+ lineClamp: lineClamp
53
+ },
54
+ ...textStyles,
43
55
  children: children
44
56
  })
45
57
  })
46
58
  });
47
59
  });
48
- const isOverflowing = (h)=>h.scrollWidth > h.clientWidth;
60
+ const isOverflowing = (h)=>h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;
49
61
 
50
62
  //# sourceMappingURL=EllipsisText.js.map
package/dist/esm/components/ellipsis-text/EllipsisText.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others} = useProps(\n 'EllipsisText',\n defaultProps,\n props,\n );\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n display=\"flex\"\n w=\"100%\"\n {...getStyles('root')}\n {...others}\n >\n <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>\n <Text variant={variant} ref={textRef} {...getStyles('text')}>\n {children}\n </Text>\n </Tooltip>\n </Box>\n );\n});\n\nconst isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth;\n"],"names":["Box","polymorphicFactory","Text","Tooltip","useProps","useStyles","useRef","useState","classes","defaultProps","tooltipProps","EllipsisText","props","ref","className","children","style","classNames","styles","unstyled","variant","others","getStyles","name","showTooltip","setShowTooltip","textRef","onMouseEnter","current","isOverflowing","onMouseLeave","display","w","label","opened","h","scrollWidth","clientWidth"],"mappings":";AAAA,SACIA,GAAG,EAGHC,kBAAkB,EAElBC,IAAI,EAEJC,OAAO,EAEPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAmBC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAClD,OAAOC,aAAa,4BAA4B;AAmBhD,MAAMC,eAA2C;IAC7CC,cAAc,CAAC;AACnB;AAEA,OAAO,MAAMC,eAAeV,mBAAwC,CAACW,OAAOC;IACxE,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEV,YAAY,EAAE,GAAGW,QAAO,GAAGjB,SACjG,gBACAK,cACAG;IAEJ,MAAMU,YAAYjB,UAA+B;QAC7CkB,MAAM;QACNf;QACAI;QACAE;QACAE;QACAC;QACAC;QACAC;IACJ;IAEA,MAAM,CAACK,aAAaC,eAAe,GAAGlB,SAAS;IAC/C,MAAMmB,UAAUpB;IAEhB,qBACI,KAACN;QACGa,KAAKA;QACLc,cAAc;YACV,IAAID,QAAQE,OAAO,IAAIC,cAAcH,QAAQE,OAAO,GAAG;gBACnDH,eAAe;YACnB;QACJ;QACAK,cAAc,IAAML,eAAe;QACnCM,SAAQ;QACRC,GAAE;QACD,GAAGV,UAAU,OAAO;QACpB,GAAGD,MAAM;kBAEV,cAAA,KAAClB;YAAQ8B,OAAOlB;YAAUmB,QAAQV;YAAc,GAAGd,YAAY;YAAG,GAAGY,UAAU,UAAU;sBACrF,cAAA,KAACpB;gBAAKkB,SAASA;gBAASP,KAAKa;gBAAU,GAAGJ,UAAU,OAAO;0BACtDP;;;;AAKrB,GAAG;AAEH,MAAMc,gBAAgB,CAACM,IAAsBA,EAAEC,WAAW,GAAGD,EAAEE,WAAW"}
1
+ {"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant' | 'lineClamp'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =\n useProps('EllipsisText', defaultProps, props);\n\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n const {className: rootClass, ...rootStyles} = getStyles('root');\n const {className: textClass, ...textStyles} = getStyles('text');\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n display=\"flex\"\n w=\"100%\"\n className={clsx(rootClass, {[classes.noWrap]: !lineClamp})}\n {...rootStyles}\n {...others}\n >\n <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>\n <Text\n variant={variant}\n ref={textRef}\n className={clsx(textClass, {[classes.ellipsis]: !lineClamp})}\n {...(!!lineClamp && {lineClamp: lineClamp})}\n {...textStyles}\n >\n {children}\n </Text>\n </Tooltip>\n </Box>\n );\n});\n\nconst isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;\n"],"names":["Box","polymorphicFactory","Text","Tooltip","useProps","useStyles","useRef","useState","clsx","classes","defaultProps","tooltipProps","EllipsisText","props","ref","className","children","style","classNames","styles","unstyled","variant","lineClamp","others","getStyles","name","showTooltip","setShowTooltip","textRef","rootClass","rootStyles","textClass","textStyles","onMouseEnter","current","isOverflowing","onMouseLeave","display","w","noWrap","label","opened","ellipsis","h","scrollWidth","clientWidth","scrollHeight","clientHeight"],"mappings":";AAAA,SACIA,GAAG,EAGHC,kBAAkB,EAElBC,IAAI,EAEJC,OAAO,EAEPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAmBC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAClD,OAAOC,UAAU,OAAO;AACxB,OAAOC,aAAa,4BAA4B;AAmBhD,MAAMC,eAA2C;IAC7CC,cAAc,CAAC;AACnB;AAEA,OAAO,MAAMC,eAAeX,mBAAwC,CAACY,OAAOC;IACxE,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEX,YAAY,EAAE,GAAGY,QAAO,GACzGnB,SAAS,gBAAgBM,cAAcG;IAE3C,MAAMW,YAAYnB,UAA+B;QAC7CoB,MAAM;QACNhB;QACAI;QACAE;QACAE;QACAC;QACAC;QACAC;IACJ;IAEA,MAAM,CAACM,aAAaC,eAAe,GAAGpB,SAAS;IAC/C,MAAMqB,UAAUtB;IAEhB,MAAM,EAACS,WAAWc,SAAS,EAAE,GAAGC,YAAW,GAAGN,UAAU;IACxD,MAAM,EAACT,WAAWgB,SAAS,EAAE,GAAGC,YAAW,GAAGR,UAAU;IAExD,qBACI,KAACxB;QACGc,KAAKA;QACLmB,cAAc;YACV,IAAIL,QAAQM,OAAO,IAAIC,cAAcP,QAAQM,OAAO,GAAG;gBACnDP,eAAe;YACnB;QACJ;QACAS,cAAc,IAAMT,eAAe;QACnCU,SAAQ;QACRC,GAAE;QACFvB,WAAWP,KAAKqB,WAAW;YAAC,CAACpB,QAAQ8B,MAAM,CAAC,EAAE,CAACjB;QAAS;QACvD,GAAGQ,UAAU;QACb,GAAGP,MAAM;kBAEV,cAAA,KAACpB;YAAQqC,OAAOxB;YAAUyB,QAAQf;YAAc,GAAGf,YAAY;YAAG,GAAGa,UAAU,UAAU;sBACrF,cAAA,KAACtB;gBACGmB,SAASA;gBACTP,KAAKc;gBACLb,WAAWP,KAAKuB,WAAW;oBAAC,CAACtB,QAAQiC,QAAQ,CAAC,EAAE,CAACpB;gBAAS;gBACzD,GAAI,CAAC,CAACA,aAAa;oBAACA,WAAWA;gBAAS,CAAC;gBACzC,GAAGU,UAAU;0BAEbhB;;;;AAKrB,GAAG;AAEH,MAAMmB,gBAAgB,CAACQ,IAAsBA,EAAEC,WAAW,GAAGD,EAAEE,WAAW,IAAIF,EAAEG,YAAY,GAAGH,EAAEI,YAAY"}
package/dist/esm/components/ellipsis-text/EllipsisText.module.css CHANGED
@@ -1,8 +1,8 @@
1
- .root {
1
+ .noWrap {
2
2
  white-space: nowrap;
3
3
  }
4
4
 
5
- .text {
5
+ .ellipsis {
6
6
  flex-basis: 100%;
7
7
  overflow: hidden;
8
8
  text-overflow: ellipsis;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coveord/plasma-mantine",
3
- "version": "55.0.4",
3
+ "version": "55.1.0",
4
4
  "description": "A Plasma flavoured Mantine theme",
5
5
  "keywords": [
6
6
  "plasma",
package/src/components/ellipsis-text/EllipsisText.module.css CHANGED
@@ -1,8 +1,8 @@
1
- .root {
1
+ .noWrap {
2
2
  white-space: nowrap;
3
3
  }
4
4
 
5
- .text {
5
+ .ellipsis {
6
6
  flex-basis: 100%;
7
7
  overflow: hidden;
8
8
  text-overflow: ellipsis;
package/src/components/ellipsis-text/EllipsisText.tsx CHANGED
@@ -12,13 +12,14 @@ import {
12
12
  useStyles,
13
13
  } from '@mantine/core';
14
14
  import {ReactNode, useRef, useState} from 'react';
15
+ import clsx from 'clsx';
15
16
  import classes from './EllipsisText.module.css';
16
17
 
17
18
  export type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';
18
19
 
19
20
  export interface EllipsisTextProps
20
21
  extends BoxProps,
21
- Pick<TextProps, 'variant'>,
22
+ Pick<TextProps, 'variant' | 'lineClamp'>,
22
23
  Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
23
24
  children: ReactNode;
24
25
  tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;
@@ -36,11 +37,9 @@ const defaultProps: Partial<EllipsisTextProps> = {
36
37
  };
37
38
 
38
39
  export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {
39
- const {className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others} = useProps(
40
- 'EllipsisText',
41
- defaultProps,
42
- props,
43
- );
40
+ const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =
41
+ useProps('EllipsisText', defaultProps, props);
42
+
44
43
  const getStyles = useStyles<EllipsisTextFactory>({
45
44
  name: 'EllipsisText',
46
45
  classes,
@@ -55,6 +54,9 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
55
54
  const [showTooltip, setShowTooltip] = useState(false);
56
55
  const textRef = useRef<HTMLDivElement>();
57
56
 
57
+ const {className: rootClass, ...rootStyles} = getStyles('root');
58
+ const {className: textClass, ...textStyles} = getStyles('text');
59
+
58
60
  return (
59
61
  <Box
60
62
  ref={ref}
@@ -66,11 +68,18 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
66
68
  onMouseLeave={() => setShowTooltip(false)}
67
69
  display="flex"
68
70
  w="100%"
69
- {...getStyles('root')}
71
+ className={clsx(rootClass, {[classes.noWrap]: !lineClamp})}
72
+ {...rootStyles}
70
73
  {...others}
71
74
  >
72
75
  <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>
73
- <Text variant={variant} ref={textRef} {...getStyles('text')}>
76
+ <Text
77
+ variant={variant}
78
+ ref={textRef}
79
+ className={clsx(textClass, {[classes.ellipsis]: !lineClamp})}
80
+ {...(!!lineClamp && {lineClamp: lineClamp})}
81
+ {...textStyles}
82
+ >
74
83
  {children}
75
84
  </Text>
76
85
  </Tooltip>
@@ -78,4 +87,4 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
78
87
  );
79
88
  });
80
89
 
81
- const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth;
90
+ const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;