@seeqdev/qomponents 0.0.30 → 0.0.32

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 (89) hide show
  1. package/dist/Button/Button.js +86 -0
  2. package/dist/Button/Button.js.map +1 -0
  3. package/dist/Button/Button.stories.js +77 -0
  4. package/dist/Button/Button.stories.js.map +1 -0
  5. package/dist/Button/Button.test.js +49 -0
  6. package/dist/Button/Button.test.js.map +1 -0
  7. package/dist/Button/Button.types.js +4 -0
  8. package/dist/Button/Button.types.js.map +1 -0
  9. package/dist/Button/index.js +2 -0
  10. package/dist/Button/index.js.map +1 -0
  11. package/dist/Checkbox/Checkbox.js +24 -0
  12. package/dist/Checkbox/Checkbox.js.map +1 -0
  13. package/dist/Checkbox/Checkbox.stories.js +32 -0
  14. package/dist/Checkbox/Checkbox.stories.js.map +1 -0
  15. package/dist/Checkbox/Checkbox.test.js +94 -0
  16. package/dist/Checkbox/Checkbox.test.js.map +1 -0
  17. package/dist/Checkbox/Checkbox.types.js +2 -0
  18. package/dist/Checkbox/Checkbox.types.js.map +1 -0
  19. package/dist/Checkbox/index.js +2 -0
  20. package/dist/Checkbox/index.js.map +1 -0
  21. package/dist/Icon/Icon.js +62 -0
  22. package/dist/Icon/Icon.js.map +1 -0
  23. package/dist/Icon/Icon.stories.js +40 -0
  24. package/dist/Icon/Icon.stories.js.map +1 -0
  25. package/dist/Icon/Icon.test.js +55 -0
  26. package/dist/Icon/Icon.test.js.map +1 -0
  27. package/dist/Icon/Icon.types.js +16 -0
  28. package/dist/Icon/Icon.types.js.map +1 -0
  29. package/dist/Icon/index.js +2 -0
  30. package/dist/Icon/index.js.map +1 -0
  31. package/dist/Select/Select.js +168 -0
  32. package/dist/Select/Select.js.map +1 -0
  33. package/dist/Select/Select.stories.js +72 -0
  34. package/dist/Select/Select.stories.js.map +1 -0
  35. package/dist/Select/Select.test.js +161 -0
  36. package/dist/Select/Select.test.js.map +1 -0
  37. package/dist/Select/Select.types.js +2 -0
  38. package/dist/Select/Select.types.js.map +1 -0
  39. package/dist/Select/index.js +2 -0
  40. package/dist/Select/index.js.map +1 -0
  41. package/dist/TextArea/TextArea.js +23 -0
  42. package/dist/TextArea/TextArea.js.map +1 -0
  43. package/dist/TextArea/TextArea.stories.js +39 -0
  44. package/dist/TextArea/TextArea.stories.js.map +1 -0
  45. package/dist/TextArea/TextArea.test.js +68 -0
  46. package/dist/TextArea/TextArea.test.js.map +1 -0
  47. package/dist/TextArea/TextArea.types.js +2 -0
  48. package/dist/TextArea/TextArea.types.js.map +1 -0
  49. package/dist/TextArea/index.js +2 -0
  50. package/dist/TextArea/index.js.map +1 -0
  51. package/dist/TextField/TextField.js +64 -0
  52. package/dist/TextField/TextField.js.map +1 -0
  53. package/dist/TextField/TextField.stories.js +41 -0
  54. package/dist/TextField/TextField.stories.js.map +1 -0
  55. package/dist/TextField/TextField.test.js +35 -0
  56. package/dist/TextField/TextField.test.js.map +1 -0
  57. package/dist/TextField/TextField.types.js +2 -0
  58. package/dist/TextField/TextField.types.js.map +1 -0
  59. package/dist/TextField/index.js +2 -0
  60. package/dist/TextField/index.js.map +1 -0
  61. package/dist/Tooltip/QTip.stories.js +40 -0
  62. package/dist/Tooltip/QTip.stories.js.map +1 -0
  63. package/dist/Tooltip/QTip.types.js +2 -0
  64. package/dist/Tooltip/QTip.types.js.map +1 -0
  65. package/dist/Tooltip/QTipPerformance.stories.js +30 -0
  66. package/dist/Tooltip/QTipPerformance.stories.js.map +1 -0
  67. package/dist/Tooltip/Qtip.d.ts +2 -1
  68. package/dist/Tooltip/Qtip.js +146 -0
  69. package/dist/Tooltip/Qtip.js.map +1 -0
  70. package/dist/Tooltip/Tooltip.js +36 -0
  71. package/dist/Tooltip/Tooltip.js.map +1 -0
  72. package/dist/Tooltip/Tooltip.stories.js +32 -0
  73. package/dist/Tooltip/Tooltip.stories.js.map +1 -0
  74. package/dist/Tooltip/Tooltip.types.js +3 -0
  75. package/dist/Tooltip/Tooltip.types.js.map +1 -0
  76. package/dist/Tooltip/TooltipPerformance.stories.js +30 -0
  77. package/dist/Tooltip/TooltipPerformance.stories.js.map +1 -0
  78. package/dist/Tooltip/index.js +3 -0
  79. package/dist/Tooltip/index.js.map +1 -0
  80. package/dist/index.esm.js +8 -7
  81. package/dist/index.esm.js.map +1 -1
  82. package/dist/index.js +8 -7
  83. package/dist/index.js.map +1 -1
  84. package/dist/styles.css +5 -0
  85. package/dist/types.js +2 -0
  86. package/dist/types.js.map +1 -0
  87. package/dist/utils/browserId.js +29 -0
  88. package/dist/utils/browserId.js.map +1 -0
  89. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -50,6 +50,8 @@ const browserName = browserId && browserId.split(' ', 2)[0];
50
50
  browserId && parseInt(browserId.split(' ', 2)[1], 10);
51
51
  const browserIsFirefox = browserId && browserName === 'Firefox';
52
52
 
53
+ const DEFAULT_TOOL_TIP_DELAY = 1000;
54
+
53
55
  const colorClassesThemeLight = {
54
56
  'theme': 'tw-text-sq-color-dark',
55
57
  'white': 'tw-text-white',
@@ -85,7 +87,7 @@ const colorClassesThemeDark = {
85
87
  * - access to Seeq custom icons by providing the desired icon
86
88
  * - leverage "type" to style your icon
87
89
  */
88
- const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = 0, }) => {
90
+ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => {
89
91
  if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
90
92
  const errorMessage = color === undefined || color === ''
91
93
  ? 'Icon with type="color" must have prop color specified.'
@@ -175,7 +177,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
175
177
  'data-qtip-placement': tooltipOptions?.position,
176
178
  'data-qtip-is-html': isHtmlTooltip,
177
179
  'data-qtip-testid': tooltipTestId,
178
- 'data-qtip-delay': tooltipOptions?.delay ?? 0,
180
+ 'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
179
181
  };
180
182
  }
181
183
  return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
@@ -258,7 +260,7 @@ const baseClasses$2 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ri
258
260
  ' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
259
261
  ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
260
262
  ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
261
- ' dark:disabled:tw-border-sq-fairly-dark-gray';
263
+ ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
262
264
  const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$2}`;
263
265
  const radioClasses = `tw-form-radio ${baseClasses$2}`;
264
266
  /**
@@ -295,8 +297,6 @@ const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, col
295
297
  return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
296
298
  };
297
299
 
298
- const DEFAULT_TOOL_TIP_DELAY = 1000;
299
-
300
300
  /**
301
301
  * @deprecated
302
302
  * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
@@ -3122,7 +3122,8 @@ const HTMLTip = ({ text }) => {
3122
3122
  * 'data-qtip-placement': one of TooltipPosition (top, bottom, right, or left)
3123
3123
  * 'data-qtip-is-html': set this to true if you provided a text that contains HTML,
3124
3124
  * 'data-qtip-delay': this can be used to delay the showing of the tooltip. this should be a number representing
3125
- * the # of milliseconds you want to delay the tooltip for.
3125
+ * the # of milliseconds you want to delay the tooltip for. If no delay is provided the DEFAULT_TOOL_TIP_DELAY is
3126
+ * applied!
3126
3127
  * 'data-qtip-testid': use this attribute to provide a value for a data-testid of your tooltip; this is useful
3127
3128
  * for tests
3128
3129
  *
@@ -3177,7 +3178,7 @@ const QTip = () => {
3177
3178
  tooltipTarget.current = e.target?.parentElement;
3178
3179
  }
3179
3180
  if (text) {
3180
- const delay = parseInt(dataset?.qtipDelay ?? '0');
3181
+ const delay = parseInt(dataset?.qtipDelay ?? DEFAULT_TOOL_TIP_DELAY + '');
3181
3182
  ttTimeout.current = setTimeout(() => makeTooltip(text, dataset?.qtipPlacement, dataset?.qtipIsHtml === 'true', dataset?.qtipTestid, delay), delay);
3182
3183
  }
3183
3184
  };