@seeqdev/qomponents 0.0.101 → 0.0.103

package/dist/Tooltip/TooltipPerformance.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPerformance.stories.js","sourceRoot":"","sources":["../../src/Tooltip/TooltipPerformance.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,QAAQ,GAAG,GAAG,CAAC;IACrB,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,CACP,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK;gBACnC,oBAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,EAAE;oBAC/B,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACP,CACN,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,OAAM,OAAO,CAAC,CAAC,CAAC,CAAM,CAAC,CAAC;KACtD;IACD,OAAO,CACL;QACE,mCAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAS,CACjC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,gDAAgD,IAAE,kBAAkB,EAAE,CAAO,CAC3F,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/index.js

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export { QTip } from './Qtip';
+//# sourceMappingURL=index.js.map

package/dist/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/Tooltip/qTip.utilities.js

@@ -0,0 +1,11 @@
+import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
+export const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => tooltip
+    ? {
+        'data-qtip-text': tooltip,
+        'data-qtip-placement': tooltipPlacement,
+        'data-qtip-is-html': isHtmlTooltip,
+        'data-qtip-testid': tooltipTestId,
+        'data-qtip-delay': tooltipDelay,
+    }
+    : undefined;
+//# sourceMappingURL=qTip.utilities.js.map

package/dist/Tooltip/qTip.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qTip.utilities.js","sourceRoot":"","sources":["../../src/Tooltip/qTip.utilities.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAyB,MAAM,iBAAiB,CAAC;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,GAAG,sBAAsB,GACf,EAAkC,EAAE,CAC1D,OAAO;IACL,CAAC,CAAC;QACE,gBAAgB,EAAE,OAAO;QACzB,qBAAqB,EAAE,gBAAgB;QACvC,mBAAmB,EAAE,aAAa;QAClC,kBAAkB,EAAE,aAAa;QACjC,iBAAiB,EAAE,YAAY;KAChC;IACH,CAAC,CAAC,SAAS,CAAC"}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import Tabs from './Tabs';
 import Accordion from './Accordion';
 import ButtonWithPopover from './ButtonWithPopover';
 import ButtonWithDropdown from './ButtonWithDropdown';
+import Alert from './Alert';
 import SeeqActionDropdown from './SeeqActionDropdown';
 export { Tabs };
 export { Button };
@@ -28,4 +29,5 @@ export { Modal };
 export { Accordion };
 export { ButtonWithPopover };
 export { ButtonWithDropdown };
+export { Alert };
 export { SeeqActionDropdown };

package/dist/index.esm.js

@@ -4665,8 +4665,8 @@ const setValidInputDimension = (width, height) => {
     return inputStyle;
 };
 
-const errorClasses$2 = 'tw-border-sq-danger-color';
-const borderColorClasses$2 = [
+const errorClasses$3 = 'tw-border-sq-danger-color';
+const borderColorClasses$3 = [
     'tw-border-sq-disabled-gray',
     'dark:tw-border-sq-dark-disabled-gray',
     'dark:focus:tw-border-sq-color-dark-dark',
@@ -4674,12 +4674,12 @@ const borderColorClasses$2 = [
     'focus:tw-border-sq-color-dark',
     'active:tw-border-sq-color-dark',
 ].join(' ');
-const baseClasses$3 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+const baseClasses$4 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
     ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
     '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
-const darkTheme$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
-const lightTheme$1 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
+const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme$2 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
 const sizeClasses = {
     sm: 'tw-text-sm',
     lg: 'tw-text-xl',
@@ -4723,11 +4723,7 @@ const TextField = React__default.forwardRef((props, ref) => {
     else if (inputGroup === 'right') {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
-    let hasError = showError;
-    if ((min && Number(value) < min) || (max && Number(value) > max)) {
-        hasError = true;
-    }
-    const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${hasError ? errorClasses$2 : borderColorClasses$2} `;
+    const appliedClasses = `${baseClasses$4} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${borderRadius} ${showError ? errorClasses$3 : borderColorClasses$3} `;
     const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
@@ -4745,13 +4741,13 @@ const TextField = React__default.forwardRef((props, ref) => {
 
 const alignment = 'tw-flex';
 const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
-const baseClasses$2 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
+const baseClasses$3 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
     '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
     ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
     ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
     ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
-const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$2}`;
-const radioClasses = `tw-form-radio ${baseClasses$2}`;
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$3}`;
+const radioClasses = `tw-form-radio ${baseClasses$3}`;
 /**
  * Checkbox and Radio Box Component.
  */
@@ -4766,14 +4762,14 @@ const Checkbox = (props) => {
                 : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
 };
 
-const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+const baseClasses$2 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
     ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
-const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
+const darkTheme$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
     'dark:tw-placeholder-sq-dark-text-lighter  disabled:dark:tw-text-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400  disabled:tw-text-sq-darkish-gray';
-const errorClasses$1 = 'tw-border-sq-danger-color';
-const borderColorClasses$1 = [
+const lightTheme$1 = 'tw-text-sq-text-color tw-placeholder-gray-400  disabled:tw-text-sq-darkish-gray';
+const errorClasses$2 = 'tw-border-sq-danger-color';
+const borderColorClasses$2 = [
     'tw-border-sq-disabled-gray',
     'dark:tw-border-sq-dark-disabled-gray',
     'dark:focus:tw-border-sq-color-dark-dark',
@@ -4785,7 +4781,7 @@ const borderColorClasses$1 = [
  * TextArea.
  */
 const TextArea = ({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }) => {
-    const appliedClasses = `${baseClasses$1} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses$1 : borderColorClasses$1}`;
+    const appliedClasses = `${baseClasses$2} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${showError ? errorClasses$2 : borderColorClasses$2}`;
     return (React__default.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
 };
 
@@ -13662,10 +13658,10 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var CreatableSelect$1 = CreatableSelect;
 
-const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
+const baseClasses$1 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
 const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
+const errorClasses$1 = 'tw-border-sq-danger-color';
+const borderColorClasses$1 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
 const borderStyles$3 = [
     'tw-border-solid',
     'tw-border',
@@ -13803,8 +13799,8 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                 else if (inputGroup === 'right') {
                     border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
                 }
-                const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
-                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
+                const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses$1 : borderColorClasses$1} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                return `${appliedClasses} ${baseClasses$1} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
             container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
@@ -16174,6 +16170,35 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     }))))));
 };
 
+const baseClasses = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-max-w-sm' +
+    ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text';
+const lightTheme = 'tw-text-sq-text-color tw-bg-sq-color-alert';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = 'tw-border-sq-color-dark';
+/**
+ * Alert.
+ */
+const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId, id, extraClassNames, }) => {
+    const appliedTheme = {
+        theme: `${lightTheme} ${darkTheme}`,
+        danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
+        warning: 'tw-bg-sq-warning-color tw-text-sq-text-color',
+    };
+    const appliedBorderTheme = {
+        theme: borderColorClasses,
+        danger: errorClasses,
+        warning: 'tw-border-none',
+    };
+    const appliedClasses = `${baseClasses} ${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));
+};
+
 const SeeqActionDropdownItem = (item) => {
     return (React__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
         React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
@@ -16238,5 +16263,5 @@ const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNa
                 })))));
 };
 
-export { Accordion, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+export { Accordion, Alert, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
 //# sourceMappingURL=index.esm.js.map