@seeqdev/qomponents 0.0.110 → 0.0.111

package/dist/InputGroup/InputGroup.types.d.ts

@@ -1,20 +1,35 @@
 import { ButtonProps } from '../Button/Button.types';
-import { TextFieldProps } from '../TextField/TextField.types';
+import { InputLengthStyleProps, TextFieldProps } from '../TextField/TextField.types';
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface representing the properties for an appended button.
+ */
 interface AppendedButtonProps {
+    /** Specifies that the variant is a button */
     variant: 'button';
+    /** The properties for the button */
     buttonProps: ButtonProps;
 }
+/**
+ * Props for an element variant in the InputGroup appended component.
+ */
 interface ElementProps {
+    /** Specifies that this is an element variant */
     variant: 'element';
+    /** The React node to be rendered as the element */
     element: React.ReactNode;
 }
 type AppendedProps = AppendedButtonProps | ElementProps;
+/**
+ * Interface representing the base properties for an input group component.
+ * Extends the properties of a TextField component.
+ */
 interface BaseInputGroupProps extends TextFieldProps {
-    /** Append elements */
+    /** Append elements - Array of elements to be appended to the input group */
     append: AppendedProps[];
-    onClick?: React.MouseEventHandler;
+    /** The field to be rendered in the input group */
+    field?: React.ReactNode;
 }
 /** Combined InputGroupProps */
-export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps;
+export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps & InputLengthStyleProps;
 export {};

package/dist/index.esm.js

@@ -4623,8 +4623,8 @@ const setValidInputDimension = (width, height) => {
     return inputStyle;
 };
 
-const errorClasses$3 = 'tw-border-sq-danger-color';
-const borderColorClasses$3 = [
+const errorClasses$4 = 'tw-border-sq-danger-color';
+const borderColorClasses$4 = [
     'tw-border-sq-disabled-gray',
     'dark:tw-border-sq-dark-disabled-gray',
     'dark:focus:tw-border-sq-color-dark-dark',
@@ -4636,8 +4636,8 @@ const baseClasses$5 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-
     ' 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$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 darkTheme$3 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme$3 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
 const sizeClasses = {
     sm: 'tw-text-sm',
     lg: 'tw-text-xl',
@@ -4682,7 +4682,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';
     }
-    const appliedClasses = `${baseClasses$5} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${borderRadius} ${showError ? errorClasses$3 : borderColorClasses$3} `;
+    const appliedClasses = `${baseClasses$5} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
     const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
@@ -4724,11 +4724,11 @@ const Checkbox = (props) => {
 const baseClasses$3 = '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$1 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
+const darkTheme$2 = '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$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 = [
+const lightTheme$2 = 'tw-text-sq-text-color tw-placeholder-gray-400  disabled:tw-text-sq-darkish-gray';
+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',
@@ -4740,7 +4740,7 @@ const borderColorClasses$2 = [
  * 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$3} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${showError ? errorClasses$2 : borderColorClasses$2}`;
+    const appliedClasses = `${baseClasses$3} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${showError ? errorClasses$3 : borderColorClasses$3}`;
     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 }));
 };
 
@@ -11573,7 +11573,7 @@ var colors = {
   neutral80: 'hsl(0, 0%, 20%)',
   neutral90: 'hsl(0, 0%, 10%)'
 };
-var borderRadius = 4;
+var borderRadius$1 = 4;
 // Used to calculate consistent margin/padding on elements
 var baseUnit = 4;
 // The minimum height of the control
@@ -11586,7 +11586,7 @@ var spacing = {
   menuGutter: menuGutter
 };
 var defaultTheme = {
-  borderRadius: borderRadius,
+  borderRadius: borderRadius$1,
   colors: colors,
   spacing: spacing
 };
@@ -13319,8 +13319,8 @@ var CreatableSelect$1 = CreatableSelect;
 
 const baseClasses$2 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
 const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].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 errorClasses$2 = 'tw-border-sq-danger-color';
+const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
 const borderStyles$3 = [
     'tw-border-solid',
     'tw-border',
@@ -13458,7 +13458,7 @@ 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$1 : borderColorClasses$1} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
                 return `${appliedClasses} ${baseClasses$2} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
@@ -15831,22 +15831,22 @@ 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' +
     ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
-const darkTheme = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
-const lightTheme = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = 'tw-border-sq-color-dark';
+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';
+const errorClasses$1 = 'tw-border-sq-danger-color';
+const borderColorClasses$1 = 'tw-border-sq-color-dark';
 /**
  * Alert.
  */
 const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId, id, extraClassNames, }) => {
     const appliedTheme = {
-        theme: `${lightTheme} ${darkTheme}`,
+        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',
     };
     const appliedBorderTheme = {
-        theme: borderColorClasses,
-        danger: errorClasses,
+        theme: borderColorClasses$1,
+        danger: errorClasses$1,
         warning: 'tw-border-none',
     };
     const appliedClasses = `${baseClasses$1} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
@@ -15923,24 +15923,29 @@ const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNa
 };
 
 const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap tw-items-stretch';
+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(' ');
+let 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.
  */
-const InputGroup = ({ readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, onClick, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, ...tooltipProps }) => {
+const InputGroup = ({ readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
     const appliedClasses = `${baseClasses} ${extraClassNames}`;
-    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 textfield = (React__default.createElement(TextField, { readonly: onClick ? true : readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, extraClassNames: `tw-flex tw-flex-1 tw-rounded-r-none focus:tw-z-30 ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames}`, ...tooltipData }));
+    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
     return (React__default.createElement("div", { id: id, "data-testid": testId, className: appliedClasses },
-        onClick ? (React__default.createElement("div", { onClick: onClick, className: "tw-flex tw-flex-1 tw-cursor-pointer" }, textfield)) : (textfield),
-        append.filter(Boolean).map((item, index) => item.variant === 'button' ? (React__default.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", onClick: item.buttonProps.onClick, variant: item.buttonProps.variant, icon: item.buttonProps.icon, iconColor: item.buttonProps.iconColor, testId: item.buttonProps.testId, disabled: item.buttonProps.disabled, label: item.buttonProps.label, iconStyle: item.buttonProps.iconStyle })) : (React__default.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-h-inputs tw-justify-center tw-rounded-none tw-ml-[-1px] focus:tw-z-40 focus:tw-border last:tw-border last:tw-rounded-r-sm` }, item.element)))));
+        field ? (React__default.createElement("div", { className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React__default.createElement(TextField, { readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, extraClassNames: `tw-flex tw-flex-1 tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
+        append.filter(Boolean).map((item, index) => item.variant === 'button' ? (React__default.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", onClick: item.buttonProps.onClick, variant: item.buttonProps.variant, icon: item.buttonProps.icon, iconColor: item.buttonProps.iconColor, testId: item.buttonProps.testId, disabled: item.buttonProps.disabled, label: item.buttonProps.label, iconStyle: item.buttonProps.iconStyle })) : (React__default.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)))));
 };
 
 // packages/react/context/src/createContext.tsx