@seeqdev/qomponents 0.0.113 → 0.0.115

package/dist/example/src/index.css

@@ -1,102 +1,102 @@
-@import '@seeqdev/qomponents/dist/styles.css';
-@import '@fortawesome/fontawesome-free/css/all.css';
-
-.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';
+
+.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,12 +1,12 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  css: {
-    postcss: {
-      plugins: [],
-    },
-  },
-});
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    postcss: {
+      plugins: [],
+    },
+  },
+});

package/dist/index.esm.js

@@ -89,7 +89,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     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' : ''} 
+    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__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
@@ -4757,13 +4757,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}`,
@@ -4773,7 +4773,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     };
     return (React__default.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
         children,
-        React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        React__default.createElement("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]}` }, text)));
 };
 
@@ -13761,9 +13761,9 @@ const Dialog = $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9;
 const DialogPortal = $5d3850c4d0b4e6c7$export$602eac185826482c;
 const DialogClose = $5d3850c4d0b4e6c7$export$f39c2d165cd861fe;
 const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (React__default.createElement(DialogPortal, null,
-    React__default.createElement("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 " }),
-    React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { 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
+    React__default.createElement("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 " }),
+    React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { 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))));
 DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
 const DialogHeader = (props) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
@@ -13835,7 +13835,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                 'tw-max-w-5xl': size === '5xl',
                 'tw-max-w-6xl': size === '6xl',
             }, dialogClassName) },
-            React__default.createElement(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" },
+            React__default.createElement(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" },
                 React__default.createElement("div", { className: "tw-flex tw-w-full" }, renderTitle()),
                 !hideCloseIcon && (React__default.createElement(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-cursor-pointer tw-ml-4", "data-testid": "closeButton" },
                     React__default.createElement("span", { className: "tw-cursor-pointer" }, "\u00D7")))),
@@ -14756,8 +14756,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     React.useEffect(() => () => timeout && clearTimeout(timeout), []);
     const renderContent = () => {
         return (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { 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" },
-            React.createElement("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
+            React.createElement("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 || ''}` },
                 hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
                     React.createElement("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" }))),
@@ -15829,7 +15829,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     }))))));
 };
 
-const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full' +
+const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full tw-relative' +
     ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
 const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
 const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
@@ -15838,24 +15838,26 @@ const borderColorClasses$1 = 'tw-border-sq-color-dark';
 /**
  * Alert.
  */
-const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId, id, extraClassNames, }) => {
+const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
     const appliedTheme = {
         theme: `${lightTheme$1} ${darkTheme$1}`,
         danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
         warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
+        gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-dark-disabled-gray dark:tw-text-sq-dark-text',
     };
     const appliedBorderTheme = {
         theme: borderColorClasses$1,
         danger: errorClasses$1,
         warning: 'tw-border-none',
+        gray: 'tw-border-sq-darkish-gray',
     };
     const appliedClasses = `${baseClasses$1} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
     if (!show) {
         return React__default.createElement("div", null);
     }
     return (React__default.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
-        dismissible && (React__default.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer ${variant.match(/danger|warning/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose })),
-        children));
+        children,
+        dismissible && (React__default.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
 };
 
 const SeeqActionDropdownItem = (item) => {