@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.
- package/dist/Button/Button.js +86 -0
- package/dist/Button/Button.js.map +1 -0
- package/dist/Button/Button.stories.js +77 -0
- package/dist/Button/Button.stories.js.map +1 -0
- package/dist/Button/Button.test.js +49 -0
- package/dist/Button/Button.test.js.map +1 -0
- package/dist/Button/Button.types.js +4 -0
- package/dist/Button/Button.types.js.map +1 -0
- package/dist/Button/index.js +2 -0
- package/dist/Button/index.js.map +1 -0
- package/dist/Checkbox/Checkbox.js +24 -0
- package/dist/Checkbox/Checkbox.js.map +1 -0
- package/dist/Checkbox/Checkbox.stories.js +32 -0
- package/dist/Checkbox/Checkbox.stories.js.map +1 -0
- package/dist/Checkbox/Checkbox.test.js +94 -0
- package/dist/Checkbox/Checkbox.test.js.map +1 -0
- package/dist/Checkbox/Checkbox.types.js +2 -0
- package/dist/Checkbox/Checkbox.types.js.map +1 -0
- package/dist/Checkbox/index.js +2 -0
- package/dist/Checkbox/index.js.map +1 -0
- package/dist/Icon/Icon.js +62 -0
- package/dist/Icon/Icon.js.map +1 -0
- package/dist/Icon/Icon.stories.js +40 -0
- package/dist/Icon/Icon.stories.js.map +1 -0
- package/dist/Icon/Icon.test.js +55 -0
- package/dist/Icon/Icon.test.js.map +1 -0
- package/dist/Icon/Icon.types.js +16 -0
- package/dist/Icon/Icon.types.js.map +1 -0
- package/dist/Icon/index.js +2 -0
- package/dist/Icon/index.js.map +1 -0
- package/dist/Select/Select.js +168 -0
- package/dist/Select/Select.js.map +1 -0
- package/dist/Select/Select.stories.js +72 -0
- package/dist/Select/Select.stories.js.map +1 -0
- package/dist/Select/Select.test.js +161 -0
- package/dist/Select/Select.test.js.map +1 -0
- package/dist/Select/Select.types.js +2 -0
- package/dist/Select/Select.types.js.map +1 -0
- package/dist/Select/index.js +2 -0
- package/dist/Select/index.js.map +1 -0
- package/dist/TextArea/TextArea.js +23 -0
- package/dist/TextArea/TextArea.js.map +1 -0
- package/dist/TextArea/TextArea.stories.js +39 -0
- package/dist/TextArea/TextArea.stories.js.map +1 -0
- package/dist/TextArea/TextArea.test.js +68 -0
- package/dist/TextArea/TextArea.test.js.map +1 -0
- package/dist/TextArea/TextArea.types.js +2 -0
- package/dist/TextArea/TextArea.types.js.map +1 -0
- package/dist/TextArea/index.js +2 -0
- package/dist/TextArea/index.js.map +1 -0
- package/dist/TextField/TextField.js +64 -0
- package/dist/TextField/TextField.js.map +1 -0
- package/dist/TextField/TextField.stories.js +41 -0
- package/dist/TextField/TextField.stories.js.map +1 -0
- package/dist/TextField/TextField.test.js +35 -0
- package/dist/TextField/TextField.test.js.map +1 -0
- package/dist/TextField/TextField.types.js +2 -0
- package/dist/TextField/TextField.types.js.map +1 -0
- package/dist/TextField/index.js +2 -0
- package/dist/TextField/index.js.map +1 -0
- package/dist/Tooltip/QTip.stories.js +40 -0
- package/dist/Tooltip/QTip.stories.js.map +1 -0
- package/dist/Tooltip/QTip.types.js +2 -0
- package/dist/Tooltip/QTip.types.js.map +1 -0
- package/dist/Tooltip/QTipPerformance.stories.js +30 -0
- package/dist/Tooltip/QTipPerformance.stories.js.map +1 -0
- package/dist/Tooltip/Qtip.d.ts +2 -1
- package/dist/Tooltip/Qtip.js +146 -0
- package/dist/Tooltip/Qtip.js.map +1 -0
- package/dist/Tooltip/Tooltip.js +36 -0
- package/dist/Tooltip/Tooltip.js.map +1 -0
- package/dist/Tooltip/Tooltip.stories.js +32 -0
- package/dist/Tooltip/Tooltip.stories.js.map +1 -0
- package/dist/Tooltip/Tooltip.types.js +3 -0
- package/dist/Tooltip/Tooltip.types.js.map +1 -0
- package/dist/Tooltip/TooltipPerformance.stories.js +30 -0
- package/dist/Tooltip/TooltipPerformance.stories.js.map +1 -0
- package/dist/Tooltip/index.js +3 -0
- package/dist/Tooltip/index.js.map +1 -0
- package/dist/index.esm.js +8 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -7
- package/dist/index.js.map +1 -1
- package/dist/styles.css +5 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/dist/utils/browserId.js +29 -0
- package/dist/utils/browserId.js.map +1 -0
- 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 =
|
|
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 ??
|
|
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 ?? '
|
|
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
|
};
|