@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Inputs/Selects/utils/selectStyles.ts

@@ -1,101 +1,101 @@
-import { StylesConfig } from 'react-select';
-
-export const createSelectStyles = ({
-  fontSize = 16,
-  menuWidth,
-  size,
-}: {
-  fontSize?: number;
-  size?: 's' | 'm';
-  menuWidth?: 'fit-content' | 'max-content' | number;
-}) =>
-  ({
-    control: provided => ({
-      ...provided,
-      border: 'none',
-      borderWidth: 0,
-      boxShadow: 'none',
-      width: '100%',
-      minHeight: size === 's' ? 12 : 36,
-    }),
-    container: provided => ({
-      ...provided,
-      width: '100%',
-    }),
-    valueContainer: provided => ({
-      ...provided,
-      fontSize,
-      padding: size === 's' ? '0 4px 0 8px' : '6px 0 6px 12px',
-      gap: 4,
-      width: '100%',
-    }),
-    singleValue: provided => ({
-      ...provided,
-      margin: 0,
-    }),
-    multiValue: provided => ({
-      ...provided,
-      backgroundColor: 'unset',
-      border: '1px solid var(--neutral-300)',
-      borderRadius: 8,
-      margin: 0,
-      overflow: 'hidden',
-    }),
-    multiValueLabel: (provided, state) => ({
-      ...provided,
-      padding: state.isDisabled ? '4px 8px' : provided.padding,
-    }),
-    multiValueRemove: (provided, state) => ({
-      ...provided,
-      display: state.isDisabled ? 'none' : provided.display,
-      boxSizing: 'content-box',
-      color: 'var(--text-disabled)',
-    }),
-    menu: provided => ({
-      ...provided,
-      width: menuWidth || '100%',
-      minWidth: '100%',
-      borderRadius: 8,
-      boxShadow: `0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-      0px 3px 14px 2px rgba(0, 0, 0, 0.12);`,
-    }),
-    menuPortal: provided => ({ ...provided, zIndex: 1001 }),
-    input: provided => ({
-      ...provided,
-      padding: 0,
-      margin: 0,
-    }),
-    option: (provided, state) => ({
-      ...provided,
-      fontSize,
-      padding: size === 's' ? 4 : provided.padding,
-      backgroundColor: state.isSelected
-        ? 'var(--primary) !important'
-        : state.isFocused
-          ? '#eee !important'
-          : 'inherit',
-    }),
-    noOptionsMessage: provided => ({
-      ...provided,
-      fontSize,
-      fontStyle: 'italic',
-      textAlign: 'left',
-      cursor: 'default',
-    }),
-    placeholder: provided => ({
-      ...provided,
-      whiteSpace: 'nowrap',
-      fontStyle: 'italic',
-      color: '#00000050',
-      fontWeight: 400,
-      userSelect: 'none',
-      margin: 0,
-    }),
-    indicatorSeparator: () => ({ display: 'none' }),
-    dropdownIndicator: (provided, state) => ({
-      ...provided,
-      padding: size === 's' ? '4px' : provided.padding,
-      transition: 'all .2s ease',
-      transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null,
-    }),
-  }) as StylesConfig;
+import type { StylesConfig } from 'react-select';
+
+export const createSelectStyles = ({
+  fontSize = 16,
+  menuWidth,
+  size,
+}: {
+  fontSize?: number;
+  size?: 's' | 'm';
+  menuWidth?: 'fit-content' | 'max-content' | number;
+}) =>
+  ({
+    control: provided => ({
+      ...provided,
+      border: 'none',
+      borderWidth: 0,
+      boxShadow: 'none',
+      width: '100%',
+      minHeight: size === 's' ? 12 : 36,
+    }),
+    container: provided => ({
+      ...provided,
+      width: '100%',
+    }),
+    valueContainer: provided => ({
+      ...provided,
+      fontSize,
+      padding: size === 's' ? '0 4px 0 8px' : '6px 0 6px 12px',
+      gap: 4,
+      width: '100%',
+    }),
+    singleValue: provided => ({
+      ...provided,
+      margin: 0,
+    }),
+    multiValue: provided => ({
+      ...provided,
+      backgroundColor: 'unset',
+      border: '1px solid var(--neutral-300)',
+      borderRadius: 8,
+      margin: 0,
+      overflow: 'hidden',
+    }),
+    multiValueLabel: (provided, state) => ({
+      ...provided,
+      padding: state.isDisabled ? '4px 8px' : provided.padding,
+    }),
+    multiValueRemove: (provided, state) => ({
+      ...provided,
+      display: state.isDisabled ? 'none' : provided.display,
+      boxSizing: 'content-box',
+      color: 'var(--text-disabled)',
+    }),
+    menu: provided => ({
+      ...provided,
+      width: menuWidth || '100%',
+      minWidth: '100%',
+      borderRadius: 8,
+      boxShadow: `0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);`,
+    }),
+    menuPortal: provided => ({ ...provided, zIndex: 1001 }),
+    input: provided => ({
+      ...provided,
+      padding: 0,
+      margin: 0,
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      fontSize,
+      padding: size === 's' ? 4 : provided.padding,
+      backgroundColor: state.isSelected
+        ? 'var(--primary) !important'
+        : state.isFocused
+          ? '#eee !important'
+          : 'inherit',
+    }),
+    noOptionsMessage: provided => ({
+      ...provided,
+      fontSize,
+      fontStyle: 'italic',
+      textAlign: 'left',
+      cursor: 'default',
+    }),
+    placeholder: provided => ({
+      ...provided,
+      whiteSpace: 'nowrap',
+      fontStyle: 'italic',
+      color: '#00000050',
+      fontWeight: 400,
+      userSelect: 'none',
+      margin: 0,
+    }),
+    indicatorSeparator: () => ({ display: 'none' }),
+    dropdownIndicator: (provided, state) => ({
+      ...provided,
+      padding: size === 's' ? '4px' : provided.padding,
+      transition: 'all .2s ease',
+      transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null,
+    }),
+  }) as StylesConfig;

package/src/components/Inputs/TextAreaInput.tsx

@@ -1,67 +1,68 @@
-import { FC, InputHTMLAttributes, Ref, useState } from 'react';
-import { InputWrapper } from './InputWrapper';
-import clsx from 'clsx';
-
-export interface ITextAreaInputProps {
-  label: string;
-  value?: string;
-  setValue: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  rows?: number;
-  resize?: boolean;
-  placeholder?: string;
-  helperText?: string;
-  errorText?: string;
-  className?: string;
-  inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
-  error?: boolean;
-  ref?: Ref<HTMLTextAreaElement>;
-}
-
-export const TextAreaInput: FC<ITextAreaInputProps> = ({
-  label,
-  value,
-  setValue,
-  required,
-  disabled,
-  autoFocus,
-  rows = 4,
-  resize,
-  placeholder,
-  helperText,
-  errorText,
-  className,
-  inputProps,
-  error,
-  ref,
-}) => {
-  const [isAutoFill, setIsAutoFill] = useState(false);
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      helperText={helperText}
-      errorText={errorText}
-      className={className}
-      error={error}
-      heightAuto
-    >
-      <textarea
-        ref={ref}
-        autoFocus={autoFocus}
-        onFocus={() => isAutoFill && setIsAutoFill(false)}
-        className={clsx({ resize })}
-        placeholder={required && placeholder ? `${placeholder} *` : placeholder}
-        value={value || ''}
-        onChange={e => setValue(e.target.value)}
-        rows={rows}
-        required={required}
-        disabled={disabled}
-        onAnimationStart={() => setIsAutoFill(true)}
-        {...inputProps}
-      />
-    </InputWrapper>
-  );
-};
+import type { FC, InputHTMLAttributes, Ref } from 'react';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { InputWrapper } from './InputWrapper';
+
+export interface ITextAreaInputProps {
+  label: string;
+  value?: string;
+  setValue: (value: string) => void;
+  required?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  rows?: number;
+  resize?: boolean;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  className?: string;
+  inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
+  error?: boolean;
+  ref?: Ref<HTMLTextAreaElement>;
+}
+
+export const TextAreaInput: FC<ITextAreaInputProps> = ({
+  label,
+  value,
+  setValue,
+  required,
+  disabled,
+  autoFocus,
+  rows = 4,
+  resize,
+  placeholder,
+  helperText,
+  errorText,
+  className,
+  inputProps,
+  error,
+  ref,
+}) => {
+  const [isAutoFill, setIsAutoFill] = useState(false);
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      helperText={helperText}
+      errorText={errorText}
+      className={className}
+      error={error}
+      heightAuto
+    >
+      <textarea
+        ref={ref}
+        autoFocus={autoFocus}
+        onFocus={() => isAutoFill && setIsAutoFill(false)}
+        className={clsx({ resize })}
+        placeholder={required && placeholder ? `${placeholder} *` : placeholder}
+        value={value || ''}
+        onChange={e => setValue(e.target.value)}
+        rows={rows}
+        required={required}
+        disabled={disabled}
+        onAnimationStart={() => setIsAutoFill(true)}
+        {...inputProps}
+      />
+    </InputWrapper>
+  );
+};

package/src/components/Inputs/TextInput.tsx

@@ -1,99 +1,100 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { FC, FocusEventHandler, InputHTMLAttributes, Ref, useState } from 'react';
-import { InputWrapper } from './InputWrapper';
-
-export interface ITextInputProps {
-  id?: string;
-  label?: string;
-  value?: string;
-  setValue?: (value: string) => void;
-  required?: boolean;
-  disabled?: boolean;
-  endText?: string;
-  endButton?: {
-    icon: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-  };
-  isClearable?: boolean;
-  onClear?: () => void;
-  autoFocus?: boolean;
-  placeholder?: string;
-  pattern?: string;
-  helperText?: string;
-  errorText?: string;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  error?: boolean;
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-  className?: string;
-  ref?: Ref<HTMLInputElement>;
-}
-
-export const TextInput: FC<ITextInputProps> = ({
-  id,
-  label,
-  value,
-  setValue,
-  required,
-  disabled,
-  endText,
-  endButton,
-  isClearable = true,
-  onClear,
-  autoFocus,
-  placeholder,
-  pattern,
-  helperText,
-  errorText,
-  onBlur,
-  onFocus,
-  error,
-  inputProps,
-  className,
-  ref,
-}) => {
-  const [isAutoFill, setIsAutoFill] = useState(false);
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      disabled={disabled}
-      endText={endText}
-      endButton={endButton}
-      onClearInput={
-        isClearable && value
-          ? () => {
-              setValue?.('');
-              onClear?.();
-            }
-          : undefined
-      }
-      helperText={helperText}
-      errorText={errorText}
-      // error={error || !!(pattern && value && !new RegExp(pattern).test(value))}
-      error={error}
-      className={className}
-    >
-      <input
-        id={id}
-        ref={ref}
-        autoFocus={autoFocus}
-        onFocus={e => {
-          isAutoFill && setIsAutoFill(false);
-          onFocus?.(e);
-        }}
-        onBlur={onBlur}
-        placeholder={placeholder}
-        value={value || ''}
-        onChange={setValue ? e => setValue(e.target.value) : undefined}
-        required={required}
-        disabled={disabled}
-        onAnimationStart={() => setIsAutoFill(true)}
-        pattern={pattern}
-        spellCheck={inputProps?.spellCheck ?? false}
-        {...inputProps}
-      />
-    </InputWrapper>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { FC, FocusEventHandler, InputHTMLAttributes, Ref } from 'react';
+import { useState } from 'react';
+import { InputWrapper } from './InputWrapper';
+
+export interface ITextInputProps {
+  id?: string;
+  label?: string;
+  value?: string;
+  setValue?: (value: string) => void;
+  required?: boolean;
+  disabled?: boolean;
+  endText?: string;
+  endButton?: {
+    icon: IconDefinition;
+    onClick: () => void;
+    disabled?: boolean;
+  };
+  isClearable?: boolean;
+  onClear?: () => void;
+  autoFocus?: boolean;
+  placeholder?: string;
+  pattern?: string;
+  helperText?: string;
+  errorText?: string;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  error?: boolean;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  className?: string;
+  ref?: Ref<HTMLInputElement>;
+}
+
+export const TextInput: FC<ITextInputProps> = ({
+  id,
+  label,
+  value,
+  setValue,
+  required,
+  disabled,
+  endText,
+  endButton,
+  isClearable = true,
+  onClear,
+  autoFocus,
+  placeholder,
+  pattern,
+  helperText,
+  errorText,
+  onBlur,
+  onFocus,
+  error,
+  inputProps,
+  className,
+  ref,
+}) => {
+  const [isAutoFill, setIsAutoFill] = useState(false);
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      endText={endText}
+      endButton={endButton}
+      onClearInput={
+        isClearable && value
+          ? () => {
+              setValue?.('');
+              onClear?.();
+            }
+          : undefined
+      }
+      helperText={helperText}
+      errorText={errorText}
+      // error={error || !!(pattern && value && !new RegExp(pattern).test(value))}
+      error={error}
+      className={className}
+    >
+      <input
+        id={id}
+        ref={ref}
+        autoFocus={autoFocus}
+        onFocus={e => {
+          isAutoFill && setIsAutoFill(false);
+          onFocus?.(e);
+        }}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        value={value || ''}
+        onChange={setValue ? e => setValue(e.target.value) : undefined}
+        required={required}
+        disabled={disabled}
+        onAnimationStart={() => setIsAutoFill(true)}
+        pattern={pattern}
+        spellCheck={inputProps?.spellCheck ?? false}
+        {...inputProps}
+      />
+    </InputWrapper>
+  );
+};