@seeqdev/qomponents 0.0.106 → 0.0.107

package/dist/index.esm.js

@@ -100,7 +100,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
  *  - include tooltips and/or icons
  */
 const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
-    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
+    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
         'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
@@ -163,8 +163,10 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
             'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
         };
     }
-    const iconClass = (iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1');
-    const iconElement = icon && (React__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` }));
+    const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
+    const iconElement = icon && (React__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
+            ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}`
+            : '', testId: `${id}_spinner` }));
     return (React__default.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
@@ -4674,7 +4676,7 @@ const borderColorClasses$3 = [
     'focus:tw-border-sq-color-dark',
     'active:tw-border-sq-color-dark',
 ].join(' ');
-const baseClasses$4 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+const baseClasses$5 = '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';
@@ -4688,9 +4690,10 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React__default.forwardRef((props, ref) => {
-    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, } = props;
+    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
     const internalRef = useRef(null);
     const [cursor, setCursor] = useState(null);
+    const tooltipData = getQTipData(tooltipProps);
     const setAllRefs = (receivedRef) => {
         if (ref)
             ref.current = receivedRef;
@@ -4723,7 +4726,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$4} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${borderRadius} ${showError ? errorClasses$3 : borderColorClasses$3} `;
+    const appliedClasses = `${baseClasses$5} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${borderRadius} ${showError ? errorClasses$3 : borderColorClasses$3} `;
     const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
@@ -4735,19 +4738,19 @@ const TextField = React__default.forwardRef((props, ref) => {
     if (minLength)
         inputLenghtProp.minLength = minLength;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp }),
+        React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }),
         errorText && showError && React__default.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
 });
 
 const alignment = 'tw-flex';
 const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
-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' +
+const baseClasses$4 = '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$3}`;
-const radioClasses = `tw-form-radio ${baseClasses$3}`;
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$4}`;
+const radioClasses = `tw-form-radio ${baseClasses$4}`;
 /**
  * Checkbox and Radio Box Component.
  */
@@ -4762,7 +4765,7 @@ const Checkbox = (props) => {
                 : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
 };
 
-const baseClasses$2 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
+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 ' +
@@ -4781,7 +4784,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$2} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${showError ? errorClasses$2 : borderColorClasses$2}`;
+    const appliedClasses = `${baseClasses$3} ${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 }));
 };
 
@@ -13658,7 +13661,7 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var CreatableSelect$1 = CreatableSelect;
 
-const baseClasses$1 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
+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(' ');
@@ -13800,7 +13803,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                     border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
                 }
                 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'}`;
+                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,
             container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
@@ -16170,7 +16173,7 @@ 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-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-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';
@@ -16190,7 +16193,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
         danger: errorClasses,
         warning: 'tw-border-none',
     };
-    const appliedClasses = `${baseClasses} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
+    const appliedClasses = `${baseClasses$1} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
     if (!show) {
         return React__default.createElement("div", null);
     }
@@ -16263,5 +16266,26 @@ const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNa
                 })))));
 };
 
-export { Accordion, Alert, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap tw-items-stretch';
+/**
+ * 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 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 }));
+    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)))));
+};
+
+export { Accordion, Alert, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, InputGroup, Modal, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
 //# sourceMappingURL=index.esm.js.map