@seeqdev/qomponents 0.0.85 → 0.0.87

package/dist/index.js

@@ -4671,6 +4671,20 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
                 popoverContent))) : undefined));
 };
 
+const setValidInputDimension = (width, height) => {
+    let inputStyle;
+    if (typeof width === 'number' && width > 0) {
+        inputStyle = {
+            width: `${width}px`,
+        };
+    }
+    if (typeof height === 'number' && height > 0) {
+        inputStyle = inputStyle || {};
+        inputStyle['height'] = `${height}px`;
+    }
+    return inputStyle;
+};
+
 const errorClasses$2 = 'tw-border-sq-danger-color';
 const borderColorClasses$2 = [
     'tw-border-sq-disabled-gray',
@@ -4694,7 +4708,7 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React.forwardRef((props, ref) => {
-    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, required = false, autoComplete = 'off' } = props;
+    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, } = props;
     const internalRef = React.useRef(null);
     const [cursor, setCursor] = React.useState(null);
     const setAllRefs = (receivedRef) => {
@@ -4730,8 +4744,13 @@ const TextField = React.forwardRef((props, ref) => {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
     const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
-    return (React.createElement("div", { className: "tw-w-full" },
-        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required }),
+    const styleProp = setValidInputDimension(inputWidth, inputHeight)
+        ? {
+            style: setValidInputDimension(inputWidth, inputHeight),
+        }
+        : {};
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, ...styleProp }),
         errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
 });
 
@@ -13730,7 +13749,7 @@ const multiValueStyles = [
  *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
  *
  */
-const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components }) => {
+const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue }) => {
     const getOptionOrSelectedLabel = (option, { context }) => {
         const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
         if (getOptionLabel || getSelectedValueLabel) {
@@ -13778,6 +13797,9 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
         onMenuOpen,
         onMenuClose,
         components,
+        onMenuInputFocus,
+        onInputChange,
+        inputValue,
         hideSelectedOptions: isMulti,
         filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
         classNames: {