@seeqdev/qomponents 0.0.29 → 0.0.30

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 (88) hide show
  1. package/dist/index.esm.js +4 -3
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +4 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +46 -14
  6. package/package.json +1 -1
  7. package/dist/Button/Button.js +0 -86
  8. package/dist/Button/Button.js.map +0 -1
  9. package/dist/Button/Button.stories.js +0 -77
  10. package/dist/Button/Button.stories.js.map +0 -1
  11. package/dist/Button/Button.test.js +0 -49
  12. package/dist/Button/Button.test.js.map +0 -1
  13. package/dist/Button/Button.types.js +0 -4
  14. package/dist/Button/Button.types.js.map +0 -1
  15. package/dist/Button/index.js +0 -2
  16. package/dist/Button/index.js.map +0 -1
  17. package/dist/Checkbox/Checkbox.js +0 -23
  18. package/dist/Checkbox/Checkbox.js.map +0 -1
  19. package/dist/Checkbox/Checkbox.stories.js +0 -29
  20. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  21. package/dist/Checkbox/Checkbox.test.js +0 -94
  22. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  23. package/dist/Checkbox/Checkbox.types.js +0 -2
  24. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  25. package/dist/Checkbox/index.js +0 -2
  26. package/dist/Checkbox/index.js.map +0 -1
  27. package/dist/Icon/Icon.js +0 -62
  28. package/dist/Icon/Icon.js.map +0 -1
  29. package/dist/Icon/Icon.stories.js +0 -40
  30. package/dist/Icon/Icon.stories.js.map +0 -1
  31. package/dist/Icon/Icon.test.js +0 -55
  32. package/dist/Icon/Icon.test.js.map +0 -1
  33. package/dist/Icon/Icon.types.js +0 -16
  34. package/dist/Icon/Icon.types.js.map +0 -1
  35. package/dist/Icon/index.js +0 -2
  36. package/dist/Icon/index.js.map +0 -1
  37. package/dist/Select/Select.js +0 -168
  38. package/dist/Select/Select.js.map +0 -1
  39. package/dist/Select/Select.stories.js +0 -72
  40. package/dist/Select/Select.stories.js.map +0 -1
  41. package/dist/Select/Select.test.js +0 -161
  42. package/dist/Select/Select.test.js.map +0 -1
  43. package/dist/Select/Select.types.js +0 -2
  44. package/dist/Select/Select.types.js.map +0 -1
  45. package/dist/Select/index.js +0 -2
  46. package/dist/Select/index.js.map +0 -1
  47. package/dist/TextArea/TextArea.js +0 -23
  48. package/dist/TextArea/TextArea.js.map +0 -1
  49. package/dist/TextArea/TextArea.stories.js +0 -39
  50. package/dist/TextArea/TextArea.stories.js.map +0 -1
  51. package/dist/TextArea/TextArea.test.js +0 -68
  52. package/dist/TextArea/TextArea.test.js.map +0 -1
  53. package/dist/TextArea/TextArea.types.js +0 -2
  54. package/dist/TextArea/TextArea.types.js.map +0 -1
  55. package/dist/TextArea/index.js +0 -2
  56. package/dist/TextArea/index.js.map +0 -1
  57. package/dist/TextField/TextField.js +0 -64
  58. package/dist/TextField/TextField.js.map +0 -1
  59. package/dist/TextField/TextField.stories.js +0 -41
  60. package/dist/TextField/TextField.stories.js.map +0 -1
  61. package/dist/TextField/TextField.test.js +0 -35
  62. package/dist/TextField/TextField.test.js.map +0 -1
  63. package/dist/TextField/TextField.types.js +0 -2
  64. package/dist/TextField/TextField.types.js.map +0 -1
  65. package/dist/TextField/index.js +0 -2
  66. package/dist/TextField/index.js.map +0 -1
  67. package/dist/Tooltip/QTip.stories.js +0 -40
  68. package/dist/Tooltip/QTip.stories.js.map +0 -1
  69. package/dist/Tooltip/QTip.types.js +0 -2
  70. package/dist/Tooltip/QTip.types.js.map +0 -1
  71. package/dist/Tooltip/QTipPerformance.stories.js +0 -30
  72. package/dist/Tooltip/QTipPerformance.stories.js.map +0 -1
  73. package/dist/Tooltip/Qtip.js +0 -146
  74. package/dist/Tooltip/Qtip.js.map +0 -1
  75. package/dist/Tooltip/Tooltip.js +0 -36
  76. package/dist/Tooltip/Tooltip.js.map +0 -1
  77. package/dist/Tooltip/Tooltip.stories.js +0 -32
  78. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  79. package/dist/Tooltip/Tooltip.types.js +0 -3
  80. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  81. package/dist/Tooltip/TooltipPerformance.stories.js +0 -30
  82. package/dist/Tooltip/TooltipPerformance.stories.js.map +0 -1
  83. package/dist/Tooltip/index.js +0 -3
  84. package/dist/Tooltip/index.js.map +0 -1
  85. package/dist/types.js +0 -2
  86. package/dist/types.js.map +0 -1
  87. package/dist/utils/browserId.js +0 -29
  88. package/dist/utils/browserId.js.map +0 -1
@@ -1,39 +0,0 @@
1
- import React from 'react';
2
- import { TextArea } from './TextArea';
3
- export default {
4
- title: 'TextArea',
5
- };
6
- export const AllTextAreas = () => {
7
- const renderAllVariations = () => (React.createElement(React.Fragment, null,
8
- React.createElement("div", { className: "tw-p-4 light" },
9
- React.createElement("div", { className: "tw-p-4" },
10
- React.createElement(TextArea, { value: "Short text provided." })),
11
- React.createElement("div", { className: "tw-p-4" },
12
- React.createElement(TextArea, { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio morbi quis commodo odio aenean. Lectus sit amet est placerat in egestas erat. Dui nunc mattis enim ut tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nibh mauris cursus mattis molestie a. Aenean vel elit scelerisque mauris pellentesque. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Tortor dignissim convallis aenean et tortor at risus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Tellus id interdum velit laoreet id donec ultrices. Ac turpis egestas maecenas pharetra. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Consequat interdum varius sit amet mattis. Lacus laoreet non curabitur gravida arcu ac tortor. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Odio ut enim blandit volutpat maecenas volutpat." })),
13
- React.createElement("div", { className: "tw-p-4" },
14
- React.createElement(TextArea, { placeholder: "placeholder text" })),
15
- React.createElement("div", { className: "tw-p-4" },
16
- React.createElement(TextArea, { placeholder: "with error", showError: true })),
17
- React.createElement("div", { className: "tw-p-4" },
18
- React.createElement(TextArea, { value: "read-only", readonly: true }))),
19
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
20
- React.createElement("div", { className: "tw-p-4" },
21
- React.createElement(TextArea, { value: "value provided" })),
22
- React.createElement("div", { className: "tw-p-4" },
23
- React.createElement(TextArea, { placeholder: "placeholder text" })),
24
- React.createElement("div", { className: "tw-p-4" },
25
- React.createElement(TextArea, { placeholder: "with error", showError: true })),
26
- React.createElement("div", { className: "tw-p-4" },
27
- React.createElement(TextArea, { value: "read-only", readonly: true })))));
28
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
29
- React.createElement("div", { className: "color_topic" },
30
- React.createElement("b", null, "Topic Colors"),
31
- renderAllVariations()),
32
- React.createElement("div", { className: "color_analysis" },
33
- React.createElement("b", null, "Analysis Colors"),
34
- renderAllVariations()),
35
- React.createElement("div", { className: "color_datalab" },
36
- React.createElement("b", null, "Datalab Colors"),
37
- renderAllVariations())));
38
- };
39
- //# sourceMappingURL=TextArea.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,sBAAsB,GAAG,CACrC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,q7BAAq7B,GAAG,CACp8B;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACvC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CAClD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC1C,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAC/B;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACvC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CAClD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC1C,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,68 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
5
- import { TextArea } from './TextArea';
6
- describe('TextArea', () => {
7
- class Context {
8
- testId = 'textAreaTestId';
9
- props = {
10
- onChange: jest.fn(),
11
- onKeyUp: jest.fn(),
12
- testId: this.testId,
13
- };
14
- }
15
- let tc;
16
- beforeEach(() => {
17
- tc = new Context();
18
- });
19
- const renderTextArea = (props) => render(React.createElement(TextArea, { ...props }));
20
- it('renders the provided value', () => {
21
- const value = 'hello, this is text for a text area.';
22
- renderTextArea({ ...tc.props, value });
23
- expect(screen.getByDisplayValue(value)).toBeInTheDocument();
24
- });
25
- it('renders the provided placeholder', () => {
26
- const placeholder = 'Prompt to enter';
27
- renderTextArea({ ...tc.props, placeholder });
28
- expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
29
- });
30
- it('calls onChange handler', async () => {
31
- renderTextArea({ ...tc.props });
32
- await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
33
- expect(tc.props.onChange).toHaveBeenCalled();
34
- });
35
- it('calls the onKeyUp handler', async () => {
36
- renderTextArea({ ...tc.props });
37
- await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
38
- expect(tc.props.onKeyUp).toHaveBeenCalled();
39
- });
40
- it('respects readOnly', async () => {
41
- renderTextArea({ ...tc.props, readonly: true });
42
- expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
43
- });
44
- it('provides rows', async () => {
45
- renderTextArea({ ...tc.props, rows: 7 });
46
- expect(screen.getByTestId(tc.testId)).toHaveProperty('rows', 7);
47
- });
48
- it('provides cols', async () => {
49
- renderTextArea({ ...tc.props, cols: 8 });
50
- expect(screen.getByTestId(tc.testId)).toHaveProperty('cols', 8);
51
- });
52
- it('provides name', async () => {
53
- const name = 'myTextArea';
54
- renderTextArea({ ...tc.props, name });
55
- expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
56
- });
57
- it('provides id', async () => {
58
- const id = 'myTextId';
59
- renderTextArea({ ...tc.props, id });
60
- expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
61
- });
62
- it('provides extraClassNames', async () => {
63
- const extraClassNames = 'extra css';
64
- renderTextArea({ ...tc.props, extraClassNames });
65
- expect(screen.getByTestId(tc.testId)).toHaveClass(extraClassNames);
66
- });
67
- });
68
- //# sourceMappingURL=TextArea.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea.test.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.test.tsx"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=TextArea.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea.types.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.types.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export { TextArea as default } from './TextArea';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
@@ -1,64 +0,0 @@
1
- import React, { useEffect, useRef, useState } from 'react';
2
- import '../styles.css';
3
- const errorClasses = 'tw-border-sq-danger-color';
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(' ');
12
- const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
13
- ' disabled:tw-pointer-events-none' +
14
- ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
15
- ' dark:tw-placeholder-sq-dark-text-lighter specTextField';
16
- const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
17
- const lightTheme = 'tw-text-sq-text-color';
18
- const sizeClasses = {
19
- sm: 'tw-text-sm',
20
- lg: 'tw-text-xl',
21
- };
22
- /**
23
- * Textfield.
24
- */
25
- export const TextField = React.forwardRef((props, ref) => {
26
- const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, } = props;
27
- const internalRef = useRef(null);
28
- const [cursor, setCursor] = useState(null);
29
- const setAllRefs = (receivedRef) => {
30
- if (ref)
31
- ref.current = receivedRef;
32
- internalRef.current = receivedRef;
33
- };
34
- useEffect(() => {
35
- const input = internalRef.current;
36
- if (input && type !== 'number')
37
- input.setSelectionRange(cursor, cursor);
38
- }, [ref, cursor, value]);
39
- const handleChange = (e) => {
40
- setCursor(e.target.selectionStart);
41
- onChange && onChange(e);
42
- };
43
- useEffect(() => {
44
- /**
45
- * we need to change the value only if it's different since the internal state of "input" will change it anyway
46
- * this will only be the case when the value has been changed externally via store (undo / redo)
47
- */
48
- if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
49
- // we need to use this method because using the value props directly will switch the input to a "controlled"
50
- // component
51
- internalRef.current.value = `${value}`;
52
- }
53
- }, [value]);
54
- let borderRadius = 'tw-rounded-sm';
55
- if (inputGroup === 'left') {
56
- borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
57
- }
58
- else if (inputGroup === 'right') {
59
- borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
60
- }
61
- const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
62
- return (React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step }));
63
- });
64
- //# sourceMappingURL=TextField.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,eAAe,CAAC;AAEvB,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,MAAM,WAAW,GACf,+DAA+D;IAC/D,kCAAkC;IAClC,0FAA0F;IAC1F,0DAA0D,CAAC;AAE7D,MAAM,SAAS,GAAG,yDAAyD,CAAC;AAC5E,MAAM,UAAU,GAAG,uBAAuB,CAAC;AAE3C,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,YAAY;CACjB,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAA4C,KAAK,CAAC,UAAU,CAChF,CAAC,KAAK,EAAE,GAAQ,EAAE,EAAE;IAClB,MAAM,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,EAAE,EACF,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,MAAM,EACN,IAAI,GAAG,MAAM,EACb,UAAU,EACV,IAAI,EACJ,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,CAAC,WAAgB,EAAE,EAAE;QACtC,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,WAAW,CAAC;QACnC,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC;IACpC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,WAAW,CAAC,OAAuC,CAAC;QAClE,IAAI,KAAK,IAAI,IAAI,KAAK,QAAQ;YAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,YAAY,GAAG,CAAC,CAAM,EAAE,EAAE;QAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb;;;WAGG;QACH,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,WAAW,CAAC,OAAO,EAAE,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE;YACxG,4GAA4G;YAC5G,YAAY;YACZ,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;SACxC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,YAAY,GAAG,eAAe,CAAC;IACnC,IAAI,UAAU,KAAK,MAAM,EAAE;QACzB,YAAY,GAAG,iDAAiD,GAAG,qBAAqB,CAAC;KAC1F;SAAM,IAAI,UAAU,KAAK,OAAO,EAAE;QACjC,YAAY,GAAG,oEAAoE,CAAC;KACrF;IAED,MAAM,cAAc,GAAG,GAAG,WAAW,IACnC,WAAW,CAAC,IAAI,CAClB,IAAI,eAAe,IAAI,UAAU,IAAI,SAAS,IAAI,YAAY,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC;IAEnH,OAAO,CACL,+BACE,GAAG,EAAE,UAAU,iBACF,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import { TextField } from './TextField';
3
- export default {
4
- title: 'TextField',
5
- };
6
- export const AllTextFields = () => {
7
- const renderAllVariations = () => (React.createElement(React.Fragment, null,
8
- React.createElement("div", { className: "tw-p-4 light" },
9
- React.createElement("div", { className: "tw-p-4" },
10
- React.createElement(TextField, { value: "value provided" })),
11
- React.createElement("div", { className: "tw-p-4" },
12
- React.createElement(TextField, { placeholder: "placeholder text" })),
13
- React.createElement("div", { className: "tw-p-4" },
14
- React.createElement(TextField, { placeholder: "with error", showError: true })),
15
- React.createElement("div", { className: "tw-p-4" },
16
- React.createElement(TextField, { value: "read-only", readonly: true })),
17
- React.createElement("div", { className: "tw-p-4" },
18
- React.createElement(TextField, { value: "large", size: "lg" }))),
19
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
20
- React.createElement("div", { className: "tw-p-4" },
21
- React.createElement(TextField, { value: "value provided" })),
22
- React.createElement("div", { className: "tw-p-4" },
23
- React.createElement(TextField, { placeholder: "placeholder text" })),
24
- React.createElement("div", { className: "tw-p-4" },
25
- React.createElement(TextField, { placeholder: "with error", showError: true })),
26
- React.createElement("div", { className: "tw-p-4" },
27
- React.createElement(TextField, { value: "read-only", readonly: true })),
28
- React.createElement("div", { className: "tw-p-4" },
29
- React.createElement(TextField, { value: "large", size: "lg" })))));
30
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
31
- React.createElement("div", { className: "color_topic" },
32
- React.createElement("b", null, "Topic Colors"),
33
- renderAllVariations()),
34
- React.createElement("div", { className: "color_analysis" },
35
- React.createElement("b", null, "Analysis Colors"),
36
- renderAllVariations()),
37
- React.createElement("div", { className: "color_datalab" },
38
- React.createElement("b", null, "Datalab Colors"),
39
- renderAllVariations())));
40
- };
41
- //# sourceMappingURL=TextField.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CACnD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,GAAG,CAChC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,kBAAkB,GAAG,CACxC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,CACnD;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,GAAI,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
5
- import { TextField } from './TextField';
6
- describe('TextField', () => {
7
- class Context {
8
- testId = 'textFieldTestId';
9
- props = {
10
- onChange: jest.fn(),
11
- testId: this.testId,
12
- };
13
- }
14
- let tc;
15
- beforeEach(() => {
16
- tc = new Context();
17
- });
18
- const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
19
- it('renders the provided value', () => {
20
- const value = 'hello';
21
- renderTextField({ ...tc.props, value });
22
- expect(screen.getByDisplayValue(value)).toBeInTheDocument();
23
- });
24
- it('renders the provided placeholder', () => {
25
- const placeholder = 'Prompt to enter';
26
- renderTextField({ ...tc.props, placeholder });
27
- expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
28
- });
29
- it('calls onChange handler', async () => {
30
- renderTextField({ ...tc.props });
31
- await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
32
- expect(tc.props.onChange).toHaveBeenCalled();
33
- });
34
- });
35
- //# sourceMappingURL=TextField.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.test.js","sourceRoot":"","sources":["../../src/TextField/TextField.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,OAAO;QACX,MAAM,GAAG,iBAAiB,CAAC;QAC3B,KAAK,GAAmB;YACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC;IAEpF,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,KAAK,GAAG,OAAO,CAAC;QACtB,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;QAC1C,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,eAAe,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QACjC,MAAM,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC;QAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=TextField.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.types.js","sourceRoot":"","sources":["../../src/TextField/TextField.types.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export { TextField as default } from './TextField';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,aAAa,CAAC"}
@@ -1,40 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=QTip.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"QTip.types.js","sourceRoot":"","sources":["../../src/Tooltip/QTip.types.ts"],"names":[],"mappings":""}
@@ -1,30 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,146 +0,0 @@
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 = (tooltipText, position = 'top', isHtml, dataTestId, delay) => {
106
- if (tooltipText && tooltipTarget.current) {
107
- setHtml(isHtml);
108
- setTooltipText(tooltipText);
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
@@ -1 +0,0 @@
1
- {"version":3,"file":"Qtip.js","sourceRoot":"","sources":["../../src/Tooltip/Qtip.tsx"],"names":[],"mappings":"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"}
@@ -1,36 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
4
- /**
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.
12
- */
13
- export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
14
- const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
15
- const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
16
- const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
17
- const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
18
- before:tw-border-l-transparent before:tw-border-r-black`;
19
- const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
20
- before:tw-border-l-black before:tw-border-r-transparent`;
21
- const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
22
- before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
23
- const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
24
- before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
25
- const placements = {
26
- top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
27
- left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
28
- right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
29
- bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
30
- };
31
- return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
32
- children,
33
- React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
34
- tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
35
- };
36
- //# sourceMappingURL=Tooltip.js.map
@@ -1 +0,0 @@
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,gEAAgE,CAAC;IAC1F,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"}