@seeqdev/qomponents 0.0.94 → 0.0.96

package/dist/TextArea/TextArea.types.d.ts

@@ -10,16 +10,21 @@ export interface TextAreaProps {
     onChange?: React.ChangeEventHandler<FormControlElement>;
     /** function that will be called on key up within the TextArea */
     onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
+    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<FormControlElement>;
     /** placeholder text displayed when TextArea is empty */
     placeholder?: string;
     /** set readonly to true if TextArea can not be edited */
     readonly?: boolean;
+    /** set disabled to true if TextArea is disabled */
+    disabled?: boolean;
     /** specifies the visible number of lines in the TextArea */
     rows?: number;
     /** specifies the visible width of the TextArea */
     cols?: number;
     /** set this to true to focus the TextArea when page loads */
-    autofocus?: boolean;
+    autoFocus?: boolean;
     /** id that will be used in the data-testid attribute on the TextArea */
     testId?: string;
     /** value of the TextArea */

package/dist/TextField/TextField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TextFieldProps } from './TextField.types';
+import { InputLengthStyleProps, TextFieldProps } from './TextField.types';
 import '../styles.css';
 /**
  * Textfield.
  */
-export declare const TextField: React.FunctionComponent<TextFieldProps>;
+export declare const TextField: React.FunctionComponent<TextFieldProps & InputLengthStyleProps>;

package/dist/TextField/TextField.types.d.ts

@@ -1,6 +1,7 @@
 import { FormControlElement, InputGroupPlacement } from '../types';
 export interface TextFieldProps {
     readonly?: boolean;
+    disabled?: boolean;
     onChange?: React.ChangeEventHandler<FormControlElement>;
     onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
     onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
@@ -12,7 +13,7 @@ export interface TextFieldProps {
     value?: string | string[] | number;
     placeholder?: string;
     extraClassNames?: string;
-    type?: 'text' | 'password' | 'number';
+    type?: 'text' | 'password' | 'number' | 'email';
     testId?: string;
     ref?: any;
     inputGroup?: InputGroupPlacement;
@@ -29,3 +30,7 @@ export interface DimensionStyle {
     width?: string;
     height?: string;
 }
+export interface InputLengthStyleProps {
+    maxLength?: number;
+    minLength?: number;
+}

package/dist/index.esm.js

@@ -4675,11 +4675,11 @@ const borderColorClasses$2 = [
     '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' +
-    ' disabled:tw-pointer-events-none' +
+    ' 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';
-const lightTheme$1 = 'tw-text-sq-text-color';
+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 sizeClasses = {
     sm: 'tw-text-sm',
     lg: 'tw-text-xl',
@@ -4688,7 +4688,7 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React__default.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', inputWidth = undefined, inputHeight = undefined, } = 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, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, } = props;
     const internalRef = useRef(null);
     const [cursor, setCursor] = useState(null);
     const setAllRefs = (receivedRef) => {
@@ -4698,7 +4698,7 @@ const TextField = React__default.forwardRef((props, ref) => {
     };
     useEffect(() => {
         const input = internalRef.current;
-        if (input && type !== 'number')
+        if (input && type !== 'number' && type !== 'email')
             input.setSelectionRange(cursor, cursor);
     }, [ref, cursor, value]);
     const handleChange = (e) => {
@@ -4724,13 +4724,18 @@ const TextField = React__default.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} `;
-    const styleProp = setValidInputDimension(inputWidth, inputHeight)
+    const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
         }
         : {};
+    const inputLenghtProp = {};
+    if (maxLength)
+        inputLenghtProp.maxLength = maxLength;
+    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: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, ...styleProp }),
+        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, ...inputLenghtProp, ...inputProp }),
         errorText && showError && React__default.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
 });
 
@@ -4758,9 +4763,11 @@ const Checkbox = (props) => {
 };
 
 const baseClasses$1 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +
+    ' 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 ' + 'dark:tw-placeholder-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400';
+const darkTheme = '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 = [
     'tw-border-sq-disabled-gray',
@@ -4773,9 +4780,9 @@ const borderColorClasses$1 = [
 /**
  * TextArea.
  */
-const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, cols = undefined, value, placeholder, extraClassNames, testId, autofocus = false, showError, }) => {
+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}`;
-    return (React__default.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
+    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 }));
 };
 
 /**