@seeqdev/qomponents 0.0.132 → 0.0.133

package/dist/Icon/Icon.js

@@ -1,55 +1,55 @@
-import React from 'react';
-import '../styles.css';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-const colorClassesThemeLight = {
-    'theme': 'tw-text-sq-color-dark',
-    'white': 'tw-text-white',
-    'dark-gray': 'tw-text-sq-fairly-dark-gray',
-    'warning': 'tw-text-sq-warning-color',
-    'darkish-gray': 'tw-text-sq-darkish-gray',
-    'gray': 'tw-text-sq-disabled-gray',
-    'color': '',
-    'info': 'tw-text-sq-link',
-    'text': 'tw-text-sq-text-color',
-    'inherit': '',
-    'danger': 'tw-text-sq-danger-color',
-    'theme-light': 'tw-text-sq-color-light',
-    'success': 'tw-text-sq-success-color',
-};
-const colorClassesThemeDark = {
-    'theme': 'dark:tw-text-sq-color-dark-dark',
-    'white': '',
-    'dark-gray': 'tw-text-sq-fairly-dark-gray',
-    'warning': '',
-    'darkish-gray': 'tw-text-sq-darkish-gray',
-    'gray': 'dark:tw-text-sq-dark-disabled-gray',
-    'color': '',
-    'info': 'dark:tw-text-sq-link-dark',
-    'text': 'dark:tw-text-sq-dark-text',
-    'inherit': '',
-    'danger': 'tw-text-sq-danger-color',
-    'theme-light': 'tw-text-sq-color-light',
-    'success': 'tw-text-sq-success-color',
-};
-/**
- * Icon:
- *  - access to Seeq custom icons by providing the desired icon
- *  - leverage "type" to style your icon
- */
-const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, number, ...tooltipProps }) => {
-    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
-        const errorMessage = color === undefined || color === ''
-            ? 'Icon with type="color" must have prop color specified.'
-            : 'Icon with prop color must have type="color".';
-        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
-    }
-    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
-    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
-    const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
-  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
-    const tooltipData = getQTipData(tooltipProps);
-    return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
-};
-export default Icon;
+import React from 'react';
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const colorClassesThemeLight = {
+    'theme': 'tw-text-sq-color-dark',
+    'white': 'tw-text-white',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': 'tw-text-sq-warning-color',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'tw-text-sq-disabled-gray',
+    'color': '',
+    'info': 'tw-text-sq-link',
+    'text': 'tw-text-sq-text-color',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+const colorClassesThemeDark = {
+    'theme': 'dark:tw-text-sq-color-dark-dark',
+    'white': '',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': '',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'dark:tw-text-sq-dark-disabled-gray',
+    'color': '',
+    'info': 'dark:tw-text-sq-link-dark',
+    'text': 'dark:tw-text-sq-dark-text',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, number, ...tooltipProps }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return React.createElement("div", { className: "tw-text-sq-danger-color" }, errorMessage);
+    }
+    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
+    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
+    const style = type === 'color' && color ? { color } : {};
+    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
+    const tooltipData = getQTipData(tooltipProps);
+    return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
+};
+export default Icon;
 //# sourceMappingURL=Icon.js.map

package/dist/Icon/Icon.stories.js

@@ -1,47 +1,47 @@
-import React from 'react';
-import Icon from './Icon';
-import { iconTypes } from './Icon.types';
-export default {
-    title: 'Icons',
-};
-export const AllIcons = () => {
-    const renderAllVariations = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("br", null),
-            React.createElement("br", null),
-            iconTypes.map((iconType) => {
-                return (React.createElement("div", { key: `${iconType}` },
-                    React.createElement("b", null,
-                        "type=",
-                        iconType),
-                    React.createElement("br", null),
-                    React.createElement("div", null,
-                        React.createElement(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
-                        React.createElement(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
-                        React.createElement(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
-                        React.createElement(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
-                        React.createElement(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
-                    React.createElement("div", null,
-                        React.createElement(Icon, { icon: "fc-signal-forecast", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined })),
-                    React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
-                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
-                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
-                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
-                    React.createElement("br", null)));
-            })));
-    };
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderAllVariations())));
-};
+import React from 'react';
+import Icon from './Icon';
+import { iconTypes } from './Icon.types';
+export default {
+    title: 'Icons',
+};
+export const AllIcons = () => {
+    const renderAllVariations = () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("br", null),
+            React.createElement("br", null),
+            iconTypes.map((iconType) => {
+                return (React.createElement("div", { key: `${iconType}` },
+                    React.createElement("b", null,
+                        "type=",
+                        iconType),
+                    React.createElement("br", null),
+                    React.createElement("div", null,
+                        React.createElement(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
+                        React.createElement(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
+                        React.createElement(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
+                        React.createElement(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }),
+                        React.createElement(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
+                    React.createElement("div", null,
+                        React.createElement(Icon, { icon: "fc-signal-forecast", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined })),
+                    React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
+                        React.createElement(Icon, { icon: "fc-announcements", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }),
+                        React.createElement(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })),
+                    React.createElement("br", null)));
+            })));
+    };
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
 //# sourceMappingURL=Icon.stories.js.map

package/dist/Icon/Icon.test.js

@@ -1,55 +1,55 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import Icon from './Icon';
-describe('Icon', () => {
-    class Context {
-        testId = 'iconTestId';
-        icon = 'testIcon';
-        props = {
-            icon: this.icon,
-            onClick: jest.fn(),
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderIcon = (props) => render(React.createElement(Icon, { ...props }));
-    it('renders icon', () => {
-        renderIcon(tc.props);
-        expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
-    });
-    it('renders large icon', () => {
-        renderIcon({ ...tc.props, large: true });
-        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
-    });
-    it('renders small icon', () => {
-        renderIcon({ ...tc.props, small: true });
-        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
-    });
-    describe('icon types', () => {
-        it('renders the theme type by default', () => {
-            renderIcon(tc.props);
-            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
-        });
-        it('renders the white icon', () => {
-            renderIcon({ ...tc.props, type: 'white' });
-            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
-        });
-        it('renders the text-type icon', () => {
-            renderIcon({ ...tc.props, type: 'text' });
-            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
-        });
-        it('renders the color-type icon', () => {
-            renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
-            expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
-        });
-        it('renders a warning if type=color and no color is provided', () => {
-            renderIcon({ ...tc.props, type: 'color' });
-            expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
-        });
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Icon from './Icon';
+describe('Icon', () => {
+    class Context {
+        testId = 'iconTestId';
+        icon = 'testIcon';
+        props = {
+            icon: this.icon,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderIcon = (props) => render(React.createElement(Icon, { ...props }));
+    it('renders icon', () => {
+        renderIcon(tc.props);
+        expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
+    });
+    it('renders large icon', () => {
+        renderIcon({ ...tc.props, large: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
+    });
+    it('renders small icon', () => {
+        renderIcon({ ...tc.props, small: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
+    });
+    describe('icon types', () => {
+        it('renders the theme type by default', () => {
+            renderIcon(tc.props);
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
+        });
+        it('renders the white icon', () => {
+            renderIcon({ ...tc.props, type: 'white' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
+        });
+        it('renders the text-type icon', () => {
+            renderIcon({ ...tc.props, type: 'text' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
+        });
+        it('renders the color-type icon', () => {
+            renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
+            expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
+        });
+        it('renders a warning if type=color and no color is provided', () => {
+            renderIcon({ ...tc.props, type: 'color' });
+            expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
+        });
+    });
+});
 //# sourceMappingURL=Icon.test.js.map

package/dist/Icon/Icon.types.js

@@ -1,16 +1,16 @@
-export const iconTypes = [
-    'theme',
-    'white',
-    'dark-gray',
-    'darkish-gray',
-    'gray',
-    'color',
-    'info',
-    'text',
-    'warning',
-    'inherit',
-    'danger',
-    'theme-light',
-    'success',
-];
+export const iconTypes = [
+    'theme',
+    'white',
+    'dark-gray',
+    'darkish-gray',
+    'gray',
+    'color',
+    'info',
+    'text',
+    'warning',
+    'inherit',
+    'danger',
+    'theme-light',
+    'success',
+];
 //# sourceMappingURL=Icon.types.js.map

package/dist/Icon/index.js

@@ -1,2 +1,2 @@
-export { default } from './Icon';
+export { default } from './Icon';
 //# sourceMappingURL=index.js.map

package/dist/InputGroup/InputGroup.js

@@ -1,32 +1,32 @@
-import React from 'react';
-import '../styles.css';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-import TextField from '../TextField';
-import Button from '../Button';
-const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = [
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-sq-dark-disabled-gray',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-    'focus:tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-].join(' ');
-const borderRadius = 'tw-rounded-sm tw-rounded-r-none';
-const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
-const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
-/**
- * InputGroup.
- */
-export const InputGroup = React.forwardRef((props, ref) => {
-    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
-    const tooltipData = getQTipData(tooltipProps);
-    const appliedClasses = `${baseClasses} ${extraClassNames}`;
-    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
-    return (React.createElement("div", { id: `input-group-${id}`, className: appliedClasses },
-        field ? (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
-        append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", ...item.buttonProps })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
-});
+import React from 'react';
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import TextField from '../TextField';
+import Button from '../Button';
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const borderRadius = 'tw-rounded-sm tw-rounded-r-none';
+const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
+/**
+ * InputGroup.
+ */
+export const InputGroup = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    return (React.createElement("div", { id: `input-group-${id}`, className: appliedClasses },
+        field ? (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
+        append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", ...item.buttonProps })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
+});
 //# sourceMappingURL=InputGroup.js.map