@seeqdev/qomponents 0.0.19 → 0.0.21

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 (42) hide show
  1. package/dist/Button/Button.js +12 -4
  2. package/dist/Button/Button.js.map +1 -1
  3. package/dist/Button/Button.types.d.ts +4 -0
  4. package/dist/Icon/Icon.js +41 -34
  5. package/dist/Icon/Icon.js.map +1 -1
  6. package/dist/Icon/Icon.types.d.ts +4 -6
  7. package/dist/TextArea/TextArea.js +10 -4
  8. package/dist/TextArea/TextArea.js.map +1 -1
  9. package/dist/TextField/TextField.js +10 -4
  10. package/dist/TextField/TextField.js.map +1 -1
  11. package/dist/Tooltip/QTip.stories.d.ts +5 -0
  12. package/dist/Tooltip/QTip.stories.js +40 -0
  13. package/dist/Tooltip/QTip.stories.js.map +1 -0
  14. package/dist/Tooltip/QTip.types.d.ts +13 -0
  15. package/dist/Tooltip/QTip.types.js +2 -0
  16. package/dist/Tooltip/QTip.types.js.map +1 -0
  17. package/dist/Tooltip/QTipPerformance.stories.d.ts +5 -0
  18. package/dist/Tooltip/QTipPerformance.stories.js +30 -0
  19. package/dist/Tooltip/QTipPerformance.stories.js.map +1 -0
  20. package/dist/Tooltip/Qtip.d.ts +25 -0
  21. package/dist/Tooltip/Qtip.js +146 -0
  22. package/dist/Tooltip/Qtip.js.map +1 -0
  23. package/dist/Tooltip/Tooltip.d.ts +7 -1
  24. package/dist/Tooltip/Tooltip.js +7 -1
  25. package/dist/Tooltip/Tooltip.js.map +1 -1
  26. package/dist/Tooltip/TooltipPerformance.stories.d.ts +5 -0
  27. package/dist/Tooltip/TooltipPerformance.stories.js +30 -0
  28. package/dist/Tooltip/TooltipPerformance.stories.js.map +1 -0
  29. package/dist/Tooltip/index.d.ts +2 -1
  30. package/dist/Tooltip/index.js +2 -1
  31. package/dist/Tooltip/index.js.map +1 -1
  32. package/dist/example/package.json +1 -1
  33. package/dist/example/src/Example.tsx +109 -97
  34. package/dist/example/src/index.css +55 -46
  35. package/dist/index.d.ts +2 -1
  36. package/dist/index.esm.js +3152 -228
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.js +3152 -227
  39. package/dist/index.js.map +1 -1
  40. package/dist/styles.css +46 -1
  41. package/package.json +7 -2
  42. package/dist/example/package-lock.json +0 -3369
@@ -1,14 +1,13 @@
1
1
  import React from 'react';
2
2
  import '../styles.css';
3
3
  import { browserIsFirefox } from '../utils/browserId';
4
- import Tooltip from '../Tooltip';
5
4
  import Icon from '../Icon';
6
5
  /**
7
6
  * All-in-one Button:
8
7
  * - use "variant" to achieve the desired style
9
8
  * - include tooltips and/or icons
10
9
  */
11
- const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, }) => {
10
+ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
12
11
  const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
13
12
  const baseClassesByVariant = {
14
13
  'outline': 'tw-border-solid tw-border',
@@ -58,7 +57,17 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
58
57
  lg: 'tw-text-xl',
59
58
  };
60
59
  const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
61
- const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
60
+ let tooltipData = undefined;
61
+ if (tooltip) {
62
+ tooltipData = {
63
+ 'data-qtip-text': tooltip,
64
+ 'data-qtip-placement': tooltipOptions?.position,
65
+ 'data-qtip-is-html': isHtmlTooltip,
66
+ 'data-qtip-testid': tooltipTestId,
67
+ 'data-qtip-delay': tooltipOptions?.delay ?? 0,
68
+ };
69
+ }
70
+ return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
62
71
  stopPropagation && e.stopPropagation();
63
72
  onClick && onClick();
64
73
  }, onMouseDown: (e) => {
@@ -68,7 +77,6 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
68
77
  }, className: appliedClasses },
69
78
  icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
70
79
  label));
71
- return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
72
80
  };
73
81
  export default Button;
74
82
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
@@ -34,6 +34,10 @@ export interface ButtonProps {
34
34
  stopPropagation?: boolean;
35
35
  /** a tooltip for the button */
36
36
  tooltip?: string;
37
+ /** true if the provided tooltip text should be rendered as HTML */
38
+ isHtmlTooltip?: boolean;
39
+ /** optional testId applied to the tooltip - useful for testing */
40
+ tooltipTestId?: string;
37
41
  /** options for the tooltip */
38
42
  tooltipOptions?: Omit<TooltipProps, 'text'>;
39
43
  /** if provided, determines whether to prevent the blur event from occurring onMouseDown*/
package/dist/Icon/Icon.js CHANGED
@@ -1,54 +1,61 @@
1
1
  import React from 'react';
2
2
  import '../styles.css';
3
- import Tooltip from '../Tooltip';
3
+ const colorClassesThemeLight = {
4
+ 'theme': 'tw-text-sq-color-dark',
5
+ 'white': 'tw-text-white',
6
+ 'dark-gray': 'tw-text-sq-fairly-dark-gray',
7
+ 'warning': 'tw-text-sq-warning-color',
8
+ 'darkish-gray': 'tw-text-sq-darkish-gray',
9
+ 'gray': 'tw-text-sq-disabled-gray',
10
+ 'color': '',
11
+ 'info': 'tw-text-sq-link',
12
+ 'text': 'tw-text-sq-text-color',
13
+ 'inherit': '',
14
+ 'danger': 'tw-text-sq-danger-color',
15
+ 'theme-light': 'tw-text-sq-color-light',
16
+ 'success': 'tw-text-sq-success-color',
17
+ };
18
+ const colorClassesThemeDark = {
19
+ 'theme': 'dark:tw-text-sq-color-dark-dark',
20
+ 'white': '',
21
+ 'dark-gray': 'tw-text-sq-fairly-dark-gray',
22
+ 'warning': '',
23
+ 'darkish-gray': 'tw-text-sq-darkish-gray',
24
+ 'gray': 'dark:tw-text-sq-dark-disabled-gray',
25
+ 'color': '',
26
+ 'info': 'dark:tw-text-sq-link-dark',
27
+ 'text': 'dark:tw-text-sq-dark-text',
28
+ 'inherit': '',
29
+ 'danger': 'tw-text-sq-danger-color',
30
+ 'theme-light': 'tw-text-sq-color-light',
31
+ 'success': 'tw-text-sq-success-color',
32
+ };
4
33
  /**
5
34
  * Icon:
6
35
  * - access to Seeq custom icons by providing the desired icon
7
36
  * - leverage "type" to style your icon
8
37
  */
9
- const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipDelay, tooltipPlacement, number, hasExternalTooltipHandler = false, }) => {
38
+ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = 0, }) => {
10
39
  if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
11
40
  const errorMessage = color === undefined || color === ''
12
41
  ? 'Icon with type="color" must have prop color specified.'
13
42
  : 'Icon with prop color must have type="color".';
14
43
  return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
15
44
  }
16
- const colorClassesThemeLight = {
17
- 'theme': 'tw-text-sq-color-dark',
18
- 'white': 'tw-text-white',
19
- 'dark-gray': 'tw-text-sq-fairly-dark-gray',
20
- 'warning': 'tw-text-sq-warning-color',
21
- 'darkish-gray': 'tw-text-sq-darkish-gray',
22
- 'gray': 'tw-text-sq-disabled-gray',
23
- 'color': '',
24
- 'info': 'tw-text-sq-link',
25
- 'text': 'tw-text-sq-text-color',
26
- 'inherit': '',
27
- 'danger': 'tw-text-sq-danger-color',
28
- 'theme-light': 'tw-text-sq-color-light',
29
- 'success': 'tw-text-sq-success-color',
30
- };
31
- const colorClassesThemeDark = {
32
- 'theme': 'dark:tw-text-sq-color-dark-dark',
33
- 'white': '',
34
- 'dark-gray': 'tw-text-sq-fairly-dark-gray',
35
- 'warning': '',
36
- 'darkish-gray': 'tw-text-sq-darkish-gray',
37
- 'gray': 'dark:tw-text-sq-dark-disabled-gray',
38
- 'color': '',
39
- 'info': 'dark:tw-text-sq-link-dark',
40
- 'text': 'dark:tw-text-sq-dark-text',
41
- 'inherit': '',
42
- 'danger': 'tw-text-sq-danger-color',
43
- 'theme-light': 'tw-text-sq-color-light',
44
- 'success': 'tw-text-sq-success-color',
45
- };
46
45
  const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
47
46
  const style = type === 'color' && color ? { color } : {};
48
47
  const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
49
48
  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
50
- const iconTag = (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number }));
51
- return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (React.createElement(Tooltip, { text: tooltip, delay: tooltipDelay, position: tooltipPlacement }, iconTag)) : (iconTag);
49
+ const tooltipData = tooltip
50
+ ? {
51
+ 'data-qtip-text': tooltip,
52
+ 'data-qtip-placement': tooltipPlacement,
53
+ 'data-qtip-is-html': isHtmlTooltip,
54
+ 'data-qtip-testid': tooltipTestId,
55
+ 'data-qtip-delay': tooltipDelay,
56
+ }
57
+ : undefined;
58
+ return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
52
59
  };
53
60
  export default Icon;
54
61
  //# sourceMappingURL=Icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"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"}
@@ -25,14 +25,12 @@ export interface IconProps {
25
25
  customId?: string;
26
26
  /** text to display on icon tooltip */
27
27
  tooltip?: string;
28
- /** formatted text to display on icon tooltip */
29
- formattedTooltip?: any;
30
28
  /** number of milliseconds to wait before showing a tooltip on-hover */
31
29
  tooltipDelay?: number;
32
30
  tooltipPlacement?: TooltipPosition;
31
+ /** true if the provided tooltip text should be rendered as HTML */
32
+ isHtmlTooltip?: boolean;
33
+ /** optional testId applied to the tooltip - useful for testing */
34
+ tooltipTestId?: string;
33
35
  number?: number;
34
- /** set this to true if the icon is inside a <SingletonTooltip> element. In this case the tooltip and placement
35
- * information will be passed on as data attributes and a singleton tooltip element will be reused for this icon.
36
- * This is recommended for improved performance when there are many icons with tooltips. */
37
- hasExternalTooltipHandler?: boolean;
38
36
  }
@@ -2,11 +2,17 @@ import React from 'react';
2
2
  import '../styles.css';
3
3
  const baseClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
4
4
  ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
5
- const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
6
- ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark dark:tw-placeholder-sq-dark-text-lighter';
7
- const lightTheme = 'tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark tw-placeholder-gray-400';
5
+ const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' + 'dark:tw-placeholder-sq-dark-text-lighter';
6
+ const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400';
8
7
  const errorClasses = 'tw-border-sq-danger-color';
9
- const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
8
+ const borderColorClasses = [
9
+ 'tw-border-sq-disabled-gray',
10
+ 'dark:tw-border-sq-dark-disabled-gray',
11
+ 'dark:focus:tw-border-sq-color-dark-dark',
12
+ 'dark:active:tw-border-sq-color-dark-dark',
13
+ 'focus:tw-border-sq-color-dark',
14
+ 'active:tw-border-sq-color-dark',
15
+ ].join(' ');
10
16
  /**
11
17
  * TextArea.
12
18
  */
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,GACf,iEAAiE;IACjE,6EAA6E,CAAC;AAEhF,MAAM,SAAS,GACb,yDAAyD;IACzD,4HAA4H,CAAC;AAC/H,MAAM,UAAU,GACd,4GAA4G,CAAC;AAE/G,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG,CAAC,4BAA4B,EAAE,sCAAsC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5G;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,EAC/D,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,SAAS,GACV,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,IACjF,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAC7B,EAAE,CAAC;IAEH,OAAO,CACL,iDACe,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,GACf,iEAAiE;IACjE,6EAA6E,CAAC;AAEhF,MAAM,SAAS,GACb,0DAA0D,GAAG,0CAA0C,CAAC;AAC1G,MAAM,UAAU,GAAG,+CAA+C,CAAC;AAEnE,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG;IACzB,4BAA4B;IAC5B,sCAAsC;IACtC,yCAAyC;IACzC,0CAA0C;IAC1C,+BAA+B;IAC/B,gCAAgC;CACjC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,EAC/D,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,SAAS,GACV,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,IACjF,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAC7B,EAAE,CAAC;IAEH,OAAO,CACL,iDACe,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC"}
@@ -1,14 +1,20 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
2
  import '../styles.css';
3
3
  const errorClasses = 'tw-border-sq-danger-color';
4
- const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
4
+ const borderColorClasses = [
5
+ 'tw-border-sq-disabled-gray',
6
+ 'dark:tw-border-sq-dark-disabled-gray',
7
+ 'dark:focus:tw-border-sq-color-dark-dark',
8
+ 'dark:active:tw-border-sq-color-dark-dark',
9
+ 'focus:tw-border-sq-color-dark',
10
+ 'active:tw-border-sq-color-dark',
11
+ ].join(' ');
5
12
  const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
6
13
  ' disabled:tw-pointer-events-none' +
7
14
  ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
8
15
  ' dark:tw-placeholder-sq-dark-text-lighter specTextField';
9
- const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +
10
- ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';
11
- const lightTheme = 'tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';
16
+ const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
17
+ const lightTheme = 'tw-text-sq-text-color';
12
18
  const sizeClasses = {
13
19
  sm: 'tw-text-sm',
14
20
  lg: 'tw-text-xl',
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,5 @@
1
+ declare const _default: {
2
+ title: string;
3
+ };
4
+ export default _default;
5
+ export declare const AllQTips: () => JSX.Element;
@@ -0,0 +1,40 @@
1
+ import React from 'react';
2
+ import Button from '../Button';
3
+ import { tooltipPositions } from './Tooltip.types';
4
+ import { QTip } from './Qtip';
5
+ import Icon from '../Icon';
6
+ export default {
7
+ title: 'Tooltip',
8
+ };
9
+ export const AllQTips = () => {
10
+ const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
11
+ React.createElement(Button, { tooltip: `Tooltip on the ${position}`, label: position, tooltipOptions: { position } }))));
12
+ const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
13
+ React.createElement(Icon, { tooltip: "<div><h2>Fancy Tooltip</h2> This is a special tooltip. Why? <br />Because it supports <b>HTML!</b></div>", tooltipPlacement: position, icon: "fc-sun", isHtmlTooltip: true }))));
14
+ const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
15
+ React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
16
+ "Hover for Tooltip (on the ",
17
+ position,
18
+ ")"))));
19
+ const renderTextTooltipOnTextWithDelay = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
20
+ React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, "data-qtip-delay": 1500 },
21
+ "Hover for Tooltip (on the ",
22
+ position,
23
+ ") - with delay (1500ms)"))));
24
+ const renderTextTooltipOnOverflowHiddenText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text`, className: "tw-overflow-hidden" },
25
+ React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
26
+ "Hover for Tooltip (on the ",
27
+ position,
28
+ ")",
29
+ React.createElement("br", null),
30
+ "(Overflow set to hidden)"))));
31
+ return (React.createElement(React.Fragment, null,
32
+ React.createElement(QTip, null),
33
+ React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
34
+ renderButtonsWithTooltip(),
35
+ renderIconsWithHtmlTooltip(),
36
+ renderTextTooltipOnText(),
37
+ renderTextTooltipOnTextWithDelay(),
38
+ renderTextTooltipOnOverflowHiddenText())));
39
+ };
40
+ //# sourceMappingURL=QTip.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QTip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/QTip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,SAAS;QAC5B,oBAAC,MAAM,IAAC,OAAO,EAAE,kBAAkB,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAI,CAC5F,CACP,CAAC,CAAC;IAEL,MAAM,0BAA0B,GAAG,GAAG,EAAE,CACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,IAAI,IACH,OAAO,EAAC,0GAA0G,EAClH,gBAAgB,EAAE,QAAQ,EAC1B,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,IAAI,GACnB,CACE,CACP,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,GAAG,EAAE,CACnC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,gDAAqB,mCAAmC,yBAAsB,QAAQ;;YACzD,QAAQ;gBAC9B,CACH,CACP,CAAC,CAAC;IAEL,MAAM,gCAAgC,GAAG,GAAG,EAAE,CAC5C,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,gDAAqB,mCAAmC,yBAAsB,QAAQ,qBAAmB,IAAI;;YAChF,QAAQ;sCAC9B,CACH,CACP,CAAC,CAAC;IAEL,MAAM,qCAAqC,GAAG,GAAG,EAAE,CACjD,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO,EAAE,SAAS,EAAC,oBAAoB;QAC1D,gDAAqB,mCAAmC,yBAAsB,QAAQ;;YACzD,QAAQ;;YAAE,+BAAM;uCAEtC,CACH,CACP,CAAC,CAAC;IAEL,OAAO,CACL;QACE,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,gDAAgD;YAC5D,wBAAwB,EAAE;YAC1B,0BAA0B,EAAE;YAC5B,uBAAuB,EAAE;YACzB,gCAAgC,EAAE;YAClC,qCAAqC,EAAE,CACpC,CACL,CACJ,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,13 @@
1
+ import { TooltipPosition } from './Tooltip.types';
2
+ export interface QTipDataAttributes {
3
+ /** text displayed by the tooltip */
4
+ 'data-qtip-text': string;
5
+ /** one of TooltipPosition */
6
+ 'data-qtip-placement'?: TooltipPosition;
7
+ /** set to true to render the provided text as html */
8
+ 'data-qtip-is-html'?: boolean;
9
+ /** number of milliseconds to wait before showing a tooltip on-hover */
10
+ 'data-qtip-delay'?: number;
11
+ /** useful for testing; sets the provided string as the data-testid attribute of the tooltip */
12
+ 'data-qtip-testid'?: string;
13
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=QTip.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QTip.types.js","sourceRoot":"","sources":["../../src/Tooltip/QTip.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,5 @@
1
+ declare const _default: {
2
+ title: string;
3
+ };
4
+ export default _default;
5
+ export declare const QtipPerformance: () => JSX.Element;
@@ -0,0 +1,30 @@
1
+ import React from 'react';
2
+ import { QTip } from './Qtip';
3
+ import Icon from '../Icon';
4
+ export default {
5
+ title: 'Tooltip',
6
+ };
7
+ const renderManyQTips = () => {
8
+ const colsCount = 100;
9
+ const rowCount = 100;
10
+ const rows = [];
11
+ const getCols = (rowId) => {
12
+ const cols = [];
13
+ for (let i = 0; i < colsCount; i++) {
14
+ cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
15
+ React.createElement(Icon, { icon: "fc-sun", tooltip: `hello there ${i}` })));
16
+ }
17
+ return cols;
18
+ };
19
+ for (let i = 0; i < rowCount; i++) {
20
+ rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
21
+ }
22
+ return (React.createElement("table", null,
23
+ React.createElement("tbody", null, rows.map((row) => row))));
24
+ };
25
+ export const QtipPerformance = () => {
26
+ return (React.createElement(React.Fragment, null,
27
+ React.createElement(QTip, null),
28
+ React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyQTips())));
29
+ };
30
+ //# sourceMappingURL=QTipPerformance.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QTipPerformance.stories.js","sourceRoot":"","sources":["../../src/Tooltip/QTipPerformance.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,QAAQ,GAAG,GAAG,CAAC;IACrB,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,CACP,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK;gBACnC,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe,CAAC,EAAE,GAAI,CAChD,CACN,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,OAAM,OAAO,CAAC,CAAC,CAAC,CAAM,CAAC,CAAC;KACtD;IACD,OAAO,CACL;QACE,mCAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAS,CACjC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAO,CACL;QACE,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,gDAAgD,IAAE,eAAe,EAAE,CAAO,CACxF,CACJ,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ /**
3
+ * QTip
4
+ *
5
+ * QTip is a Singleton Tooltip component that guarantees high-performance and reduces component wrappers!
6
+ *
7
+ * QTip is used by all qomponents that support the display of tooltips.
8
+ * If you want to add a Tooltip to your application you can do so by adding the following html data-attributes:
9
+ *
10
+ * 'data-qtip-text': the tooltip text to display; this can also be a string containing valid HTML
11
+ * 'data-qtip-placement': one of TooltipPosition (top, bottom, right, or left)
12
+ * 'data-qtip-is-html': set this to true if you provided a text that contains HTML,
13
+ * 'data-qtip-delay': this can be used to delay the showing of the tooltip. this should be a number representing
14
+ * the # of milliseconds you want to delay the tooltip for.
15
+ * 'data-qtip-testid': use this attribute to provide a value for a data-testid of your tooltip; this is useful
16
+ * for tests
17
+ *
18
+ * In order for QTip to be able to display Tooltips you must add the QTip component to your top-most component
19
+ * (often that's App or Application) - simply add:
20
+ *
21
+ * <QTip />
22
+ *
23
+ * and enjoy beautiful & performant tooltips!
24
+ */
25
+ export declare const QTip: React.FunctionComponent<any>;
@@ -0,0 +1,146 @@
1
+ import DOMPurify from 'dompurify';
2
+ import React, { useEffect, useRef, useState } from 'react';
3
+ import { arrow, computePosition, offset } from '@floating-ui/dom';
4
+ import { useIntervalWhen } from 'rooks';
5
+ const getArrowStyle = (position, x, arrowWidth, tooltipHeight, tooltipWidth) => {
6
+ switch (position) {
7
+ case 'bottom':
8
+ return {
9
+ left: `${x}px`,
10
+ top: `${-arrowWidth}px`,
11
+ };
12
+ case 'left':
13
+ return {
14
+ left: `${tooltipWidth - arrowWidth}px`,
15
+ top: `${tooltipHeight / 2 - arrowWidth}px`,
16
+ };
17
+ case 'right':
18
+ return {
19
+ left: `${-arrowWidth}px`,
20
+ top: `${tooltipHeight / 2 - arrowWidth}px`,
21
+ };
22
+ default: // 'top':
23
+ return {
24
+ left: `${x}px`,
25
+ top: `${tooltipHeight - 10 + arrowWidth}px`,
26
+ };
27
+ }
28
+ };
29
+ const HTMLTip = ({ text }) => {
30
+ return React.createElement('div', {
31
+ dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(text) },
32
+ });
33
+ };
34
+ /**
35
+ * QTip
36
+ *
37
+ * QTip is a Singleton Tooltip component that guarantees high-performance and reduces component wrappers!
38
+ *
39
+ * QTip is used by all qomponents that support the display of tooltips.
40
+ * If you want to add a Tooltip to your application you can do so by adding the following html data-attributes:
41
+ *
42
+ * 'data-qtip-text': the tooltip text to display; this can also be a string containing valid HTML
43
+ * 'data-qtip-placement': one of TooltipPosition (top, bottom, right, or left)
44
+ * 'data-qtip-is-html': set this to true if you provided a text that contains HTML,
45
+ * 'data-qtip-delay': this can be used to delay the showing of the tooltip. this should be a number representing
46
+ * the # of milliseconds you want to delay the tooltip for.
47
+ * 'data-qtip-testid': use this attribute to provide a value for a data-testid of your tooltip; this is useful
48
+ * for tests
49
+ *
50
+ * In order for QTip to be able to display Tooltips you must add the QTip component to your top-most component
51
+ * (often that's App or Application) - simply add:
52
+ *
53
+ * <QTip />
54
+ *
55
+ * and enjoy beautiful & performant tooltips!
56
+ */
57
+ export const QTip = () => {
58
+ const tooltipRef = useRef(null);
59
+ const tooltipTarget = useRef(null);
60
+ const tooltipArrowRef = useRef(null);
61
+ const [tooltipText, setTooltipText] = useState('');
62
+ const [tooltipTargetOriginalPosition, setTooltipTargetOriginalPosition] = useState(null);
63
+ const [show, setShow] = useState(false);
64
+ const [html, setHtml] = useState(false);
65
+ const [tooltipTestId, setTooltipTestId] = useState('');
66
+ const [overTooltip, setOverTooltip] = useState(false);
67
+ // Check every 300ms if the tooltip target position has changed and hide the tooltip if this happens.
68
+ useIntervalWhen(() => {
69
+ const currentPosition = tooltipTarget?.current?.getBoundingClientRect();
70
+ if (overTooltip) {
71
+ return;
72
+ }
73
+ if (tooltipTargetOriginalPosition?.y !== currentPosition?.y ||
74
+ tooltipTargetOriginalPosition?.x !== currentPosition?.x) {
75
+ setShow(false);
76
+ }
77
+ }, 300, show);
78
+ useEffect(() => {
79
+ document.body.addEventListener('mousemove', onMouseMove);
80
+ return () => {
81
+ document.removeEventListener('mousemove', onMouseMove);
82
+ };
83
+ }, []);
84
+ const ttTimeout = useRef();
85
+ const onMouseMove = (e) => {
86
+ clearTimeout(ttTimeout.current);
87
+ if (!(e.target instanceof HTMLElement)) {
88
+ return;
89
+ }
90
+ tooltipTarget.current = e.target;
91
+ let dataset = e.target?.dataset;
92
+ let text = dataset?.qtipText;
93
+ // Buttons support React.Nodes as children, the tooltip however is applied to the actual button component.
94
+ // we only check one level up - alternatively the tooltip can also be provided on the React.Node
95
+ if (!text || text === '') {
96
+ dataset = e.target?.parentElement?.dataset;
97
+ text = dataset?.qtipText;
98
+ tooltipTarget.current = e.target?.parentElement;
99
+ }
100
+ if (text) {
101
+ const delay = parseInt(dataset?.qtipDelay ?? '0');
102
+ ttTimeout.current = setTimeout(() => makeTooltip(text, dataset?.qtipPlacement, dataset?.qtipIsHtml === 'true', dataset?.qtipTestid, delay), delay);
103
+ }
104
+ };
105
+ const makeTooltip = (ttText, position = 'top', isHtml, dataTestId, delay) => {
106
+ if (ttText && tooltipTarget.current) {
107
+ setHtml(isHtml);
108
+ setTooltipText(ttText);
109
+ setTooltipTestId(dataTestId);
110
+ setTooltipTargetOriginalPosition(tooltipTarget.current.getBoundingClientRect());
111
+ const positionTooltip = () => {
112
+ if (tooltipRef.current && tooltipTarget.current) {
113
+ computePosition(tooltipTarget.current, tooltipRef.current, {
114
+ placement: position,
115
+ middleware: [offset(10), arrow({ element: tooltipArrowRef.current })],
116
+ }).then(({ x, y, middlewareData }) => {
117
+ Object.assign(tooltipRef.current?.style, {
118
+ left: `${x}px`,
119
+ top: `${y}px`,
120
+ });
121
+ if (middlewareData.arrow) {
122
+ const { x, y } = middlewareData.arrow;
123
+ const arrowWidth = tooltipArrowRef.current?.offsetHeight / 2;
124
+ const tooltipHeight = tooltipRef.current?.offsetHeight;
125
+ const tooltipWidth = tooltipRef.current?.offsetWidth;
126
+ const style = getArrowStyle(position, x || y, arrowWidth, tooltipHeight, tooltipWidth);
127
+ Object.assign(tooltipArrowRef.current.style, style);
128
+ }
129
+ setShow(true);
130
+ });
131
+ }
132
+ };
133
+ delay > 0
134
+ ? requestAnimationFrame(() => {
135
+ positionTooltip();
136
+ })
137
+ : positionTooltip();
138
+ }
139
+ };
140
+ return (React.createElement(React.Fragment, null,
141
+ React.createElement("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
142
+ (show ? 'tw-visible' : 'tw-invisible tw-pointer-events-none') },
143
+ html ? React.createElement(HTMLTip, { text: tooltipText }) : tooltipText,
144
+ React.createElement("div", { className: "tw-absolute tw-w-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef }))));
145
+ };
146
+ //# sourceMappingURL=Qtip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Qtip.js","sourceRoot":"","sources":["../../src/Tooltip/Qtip.tsx"],"names":[],"mappings":"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"}
@@ -2,6 +2,12 @@ import React from 'react';
2
2
  import '../styles.css';
3
3
  import { TooltipProps } from './Tooltip.types';
4
4
  /**
5
- * This component displays a Tooltip for the provided children.
5
+ * @deprecated
6
+ * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
7
+ * See @QTip for more info!
8
+ *
9
+ * This component displays a Tooltip for the provided children. It is a CSS only tooltip that will not display
10
+ * correctly if a parent element has an overflow CSS property assigned. Please use QTip to ensure your tooltips
11
+ * display correctly.
6
12
  */
7
13
  export declare const Tooltip: React.FunctionComponent<TooltipProps>;
@@ -2,7 +2,13 @@ import React from 'react';
2
2
  import '../styles.css';
3
3
  import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
4
4
  /**
5
- * This component displays a Tooltip for the provided children.
5
+ * @deprecated
6
+ * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
7
+ * See @QTip for more info!
8
+ *
9
+ * This component displays a Tooltip for the provided children. It is a CSS only tooltip that will not display
10
+ * correctly if a parent element has an overflow CSS property assigned. Please use QTip to ensure your tooltips
11
+ * display correctly.
6
12
  */
7
13
  export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
8
14
  const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAgB,MAAM,iBAAiB,CAAC;AAEvE;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAA0C,CAAC,EAC7D,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,sBAAsB,GAC/B,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,8DAA8D,CAAC;IACxF,MAAM,qBAAqB,GAAG,8CAA8C,CAAC;IAC7E,MAAM,uBAAuB,GAAG,+CAA+C,CAAC;IAChF,MAAM,UAAU,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;0DACP,CAAC;IAEzD,MAAM,SAAS,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;2DACL,CAAC;IAE1D,MAAM,WAAW,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;+FAC2B,CAAC;IAC9F,MAAM,QAAQ,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;yFACwB,CAAC;IAExF,MAAM,UAAU,GAAG;QACjB,GAAG,EAAE,kEAAkE,QAAQ,EAAE;QACjF,IAAI,EAAE,kEAAkE,SAAS,EAAE;QACnF,KAAK,EAAE,kEAAkE,UAAU,EAAE;QACrF,MAAM,EAAE,oEAAoE,WAAW,EAAE;KAC1F,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,sCAAsC;QAClD,QAAQ;QACT,6BACE,SAAS,EAAE,4FAA4F,KAAK;qHACC,UAAU,CAAC,QAAQ,CAAC,EAAE,IAClI,IAAI,CACD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAgB,MAAM,iBAAiB,CAAC;AAEvE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,OAAO,GAA0C,CAAC,EAC7D,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,sBAAsB,GAC/B,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,8DAA8D,CAAC;IACxF,MAAM,qBAAqB,GAAG,8CAA8C,CAAC;IAC7E,MAAM,uBAAuB,GAAG,+CAA+C,CAAC;IAChF,MAAM,UAAU,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;0DACP,CAAC;IAEzD,MAAM,SAAS,GAAG,GAAG,gBAAgB,IAAI,qBAAqB;2DACL,CAAC;IAE1D,MAAM,WAAW,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;+FAC2B,CAAC;IAC9F,MAAM,QAAQ,GAAG,GAAG,gBAAgB,IAAI,uBAAuB;yFACwB,CAAC;IAExF,MAAM,UAAU,GAAG;QACjB,GAAG,EAAE,kEAAkE,QAAQ,EAAE;QACjF,IAAI,EAAE,kEAAkE,SAAS,EAAE;QACnF,KAAK,EAAE,kEAAkE,UAAU,EAAE;QACrF,MAAM,EAAE,oEAAoE,WAAW,EAAE;KAC1F,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,sCAAsC;QAClD,QAAQ;QACT,6BACE,SAAS,EAAE,4FAA4F,KAAK;qHACC,UAAU,CAAC,QAAQ,CAAC,EAAE,IAClI,IAAI,CACD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}