@seeqdev/qomponents 0.0.169 → 0.0.171

package/dist/example/src/index.css

@@ -1,103 +1,103 @@
-@import '@seeqdev/qomponents/dist/styles.css';
-@import '@fortawesome/fontawesome-free/css/all.css';
-@import 'tailwindcss';
-
-.tw-light {
-  background-color: white;
-  color: #1a1a1a;
-}
-
-.tw-dark {
-  background-color: rgb(36, 36, 34);
-  color: rgb(194, 188, 176);
-}
-
-.formPanel {
-  align-items: center;
-  width: 500px;
-  display: flex;
-}
-
-.header {
-  font-size: larger;
-  font-weight: bold;
-}
-
-.backdrop {
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.scroll-container {
-  margin: auto;
-  max-height: 100%;
-  overflow: auto;
-}
-
-.flex-container {
-  margin-top: 30px;
-  margin-bottom: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 500px;
-}
-
-.formRow {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 15px;
-}
-
-.formColumn {
-  display: flex;
-  flex-direction: column;
-}
-
-.buttonRow {
-  display: flex;
-  justify-content: center;
-}
-
-.labelWidth {
-  width: 150px;
-}
-
-.formElementWidth {
-  width: 350px;
-}
-
-.mr-10 {
-  margin-right: 10px;
-}
-
-.ml-10 {
-  margin-left: 10px;
-}
-
-.mb-10 {
-  margin-bottom: 10px;
-}
-
-/* styles for complexSelect*/
-.selectOptionWrapperDiv {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 34px;
-}
-
-.selectOptionDiv {
-  display: flex;
-  flex-direction: column;
-}
-
-.selectOptionSubText {
-  font-size: smaller;
-  padding: 0;
-  margin-top: -6px;
-}
-
-/* end styles for complexSelect*/
+@import '@seeqdev/qomponents/dist/styles.css';
+@import '@fortawesome/fontawesome-free/css/all.css';
+@import 'tailwindcss';
+
+.tw-light {
+  background-color: white;
+  color: #1a1a1a;
+}
+
+.tw-dark {
+  background-color: rgb(36, 36, 34);
+  color: rgb(194, 188, 176);
+}
+
+.formPanel {
+  align-items: center;
+  width: 500px;
+  display: flex;
+}
+
+.header {
+  font-size: larger;
+  font-weight: bold;
+}
+
+.backdrop {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.scroll-container {
+  margin: auto;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.flex-container {
+  margin-top: 30px;
+  margin-bottom: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 500px;
+}
+
+.formRow {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
+}
+
+.formColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttonRow {
+  display: flex;
+  justify-content: center;
+}
+
+.labelWidth {
+  width: 150px;
+}
+
+.formElementWidth {
+  width: 350px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+/* styles for complexSelect*/
+.selectOptionWrapperDiv {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 34px;
+}
+
+.selectOptionDiv {
+  display: flex;
+  flex-direction: column;
+}
+
+.selectOptionSubText {
+  font-size: smaller;
+  padding: 0;
+  margin-top: -6px;
+}
+
+/* end styles for complexSelect*/

package/dist/example/src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import Example from './Example';
-import './index.css';
-
-ReactDOM.createRoot(document.body as HTMLElement).render(
-  <React.StrictMode>
-    <Example />
-  </React.StrictMode>,
-);
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Example from './Example';
+import './index.css';
+
+ReactDOM.createRoot(document.body as HTMLElement).render(
+  <React.StrictMode>
+    <Example />
+  </React.StrictMode>,
+);

package/dist/example/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/dist/example/tsconfig.json

@@ -1,33 +1,33 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "src"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/dist/example/tsconfig.node.json

@@ -1,12 +1,12 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts"
-  ]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/dist/example/vite.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  css: {
-    postcss: {
-      plugins: [],
-    },
-  },
-});
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  css: {
+    postcss: {
+      plugins: [],
+    },
+  },
+});

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import Button from './Button';
+import ToolbarButton from './ToolbarButton';
+import TextField from './TextField';
+import Checkbox from './Checkbox';
+import TextArea from './TextArea';
+import { QTip, Tooltip } from './Tooltip';
+import Icon from './Icon';
+import Select from './Select';
+import { SelectCompoents } from './Select';
+import Modal from './Modal';
+import Tabs from './Tabs';
+import Accordion from './Accordion';
+import ButtonWithPopover from './ButtonWithPopover';
+import ButtonWithDropdown from './ButtonWithDropdown';
+import Alert from './Alert';
+import SeeqActionDropdown from './SeeqActionDropdown';
+import InputGroup from './InputGroup';
+import Collapse from './Collapse';
+import Slider from './Slider';
+import ProgressBar from './ProgressBar';
+import ButtonGroup from './ButtonGroup';
+import Carousel from './Carousel';
+export { Tabs };
+export { Button };
+export { ToolbarButton };
+export { TextField };
+export { TextArea };
+export { Tooltip };
+export { Checkbox };
+export { Icon };
+export { Select };
+export { SelectCompoents };
+export { QTip };
+export { Modal };
+export { Accordion };
+export { ButtonWithPopover };
+export { ButtonWithDropdown };
+export { Alert };
+export { SeeqActionDropdown };
+export { InputGroup };
+export { Collapse };
+export { Slider };
+export { ProgressBar };
+export { ButtonGroup };
+export { Carousel };
+export * from './types';

package/dist/index.esm.js

@@ -91,7 +91,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
     const style = type === 'color' && color ? { color } : {};
     const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
-    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
+    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
   ${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 (jsx$1("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
@@ -4973,13 +4973,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
     const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
     const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
-    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
   before:tw-border-l-transparent before:tw-border-r-black`;
-    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
    before:tw-border-l-black before:tw-border-r-transparent`;
-    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
   before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
-    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
   before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
     const placements = {
         top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
@@ -4987,7 +4987,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
         right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
         bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
     };
-    return (jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsx$1("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+    return (jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsx$1("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
         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]}`, children: text })] }));
 };
 
@@ -14444,8 +14444,8 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 const Dialog = Root$4;
 const DialogPortal = Portal$1;
 const DialogClose = Close;
-const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0 " }), jsxs(Content$2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
-       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
+const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\r\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\r\n    data-[state=open]:fade-in-0 " }), jsxs(Content$2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
+       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
        tw-rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
 DialogContent.displayName = Content$2.displayName;
 const DialogHeader = (props) => (jsx$1("div", { className: "tw-w-full tw-justify-between", children: jsx$1("div", { ...props }) }));
@@ -14505,7 +14505,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                 'tw-max-w-4xl': size === '4xl',
                 'tw-max-w-5xl': size === '5xl',
                 'tw-max-w-6xl': size === '6xl',
-            }, dialogClassName), children: [jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4", children: [jsx$1("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsx$1(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: jsx$1("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsx$1(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsx$1(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsx$1("div", { className: "tw-flex tw-justify-start", children: customButton && (jsx$1(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxs("div", { className: "tw-flex tw-justify-end", children: [jsx$1("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsx$1(DialogClose, { asChild: true, children: jsx$1(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsx$1(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })] })) }))] }) })) : (jsx$1(Fragment, {}));
+            }, dialogClassName), children: [jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\r\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4", children: [jsx$1("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsx$1(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: jsx$1("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsx$1(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsx$1(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsx$1("div", { className: "tw-flex tw-justify-start", children: customButton && (jsx$1(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxs("div", { className: "tw-flex tw-justify-end", children: [jsx$1("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsx$1(DialogClose, { asChild: true, children: jsx$1(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsx$1(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })] })) }))] }) })) : (jsx$1(Fragment, {}));
 };
 
 function createCollection(name) {
@@ -15434,8 +15434,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     };
     React.useEffect(() => clearHoverTimeout, []);
     const renderContent = () => {
-        return (jsx$1(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full", children: jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
-         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
+        return (jsx$1(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full", children: jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
         ${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }) })), children] }) }));
     };
     const renderPopover = (popoverOpenState) => {
@@ -16579,7 +16579,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
  * @param tooltipProps - props to pass to the tooltip
  */
 const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
-    const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none 
+    const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none 
   tw-outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';