@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Inputs/TextAreaInput.tsx

@@ -1,68 +1,68 @@
-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>
-  );
-};
+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,100 +1,100 @@
-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>
-  );
-};
+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>
+  );
+};

package/src/components/Inputs/TimeInput/TimeInput.tsx

@@ -1,81 +1,81 @@
-import type { FC } from 'react';
-import clsx from 'clsx';
-import { InputWrapper } from '../InputWrapper';
-
-export interface ITimeInputProps {
-  time: string;
-  setTime: (newTime: string) => void;
-  label?: string;
-  disabled?: boolean;
-  required?: boolean;
-  isClearable?: boolean;
-  className?: string;
-}
-
-export const TimeInput: FC<ITimeInputProps> = ({
-  time = '00:00',
-  setTime,
-  label,
-  disabled,
-  required,
-  isClearable = true,
-  className,
-}) => {
-  const [hours, minutes] = time.split(':').map(t => t.padStart(2, '0'));
-
-  const handleChange = (e: string, type: 'hh' | 'mm') => {
-    let value = isNaN(+e) || e === '-1' ? '00' : e.replace(/\D/g, '');
-    if (value.length > 2) {
-      value = value.substring(1);
-    }
-
-    if (type === 'hh') {
-      const newHours = Math.min(23, parseInt(value) || 0)
-        .toString()
-        .padStart(2, '0');
-      setTime(`${newHours}:${minutes}`);
-    } else {
-      const newMinutes = Math.min(59, parseInt(value) || 0)
-        .toString()
-        .padStart(2, '0');
-      setTime(`${hours}:${newMinutes}`);
-    }
-  };
-
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      disabled={disabled}
-      onClearInput={isClearable && time && !disabled ? () => setTime('00:00') : undefined}
-      className={clsx(className, 'time-input-wrapper')}
-    >
-      <div className="time-input">
-        <input
-          type="number"
-          value={hours}
-          onChange={e => handleChange(e.target.value, 'hh')}
-          onClick={e => {
-            const input = e.target as HTMLInputElement;
-            input.select();
-          }}
-          disabled={disabled}
-          required={required}
-          style={{ textAlign: 'right' }}
-        />
-        <span className="fs-m">:</span>
-        <input
-          type="number"
-          value={minutes}
-          onChange={e => handleChange(e.target.value, 'mm')}
-          onClick={e => {
-            const input = e.target as HTMLInputElement;
-            input.select();
-          }}
-          disabled={disabled}
-          required={required}
-        />
-      </div>
-    </InputWrapper>
-  );
-};
+import type { FC } from 'react';
+import clsx from 'clsx';
+import { InputWrapper } from '../InputWrapper';
+
+export interface ITimeInputProps {
+  time: string;
+  setTime: (newTime: string) => void;
+  label?: string;
+  disabled?: boolean;
+  required?: boolean;
+  isClearable?: boolean;
+  className?: string;
+}
+
+export const TimeInput: FC<ITimeInputProps> = ({
+  time = '00:00',
+  setTime,
+  label,
+  disabled,
+  required,
+  isClearable = true,
+  className,
+}) => {
+  const [hours, minutes] = time.split(':').map(t => t.padStart(2, '0'));
+
+  const handleChange = (e: string, type: 'hh' | 'mm') => {
+    let value = isNaN(+e) || e === '-1' ? '00' : e.replace(/\D/g, '');
+    if (value.length > 2) {
+      value = value.substring(1);
+    }
+
+    if (type === 'hh') {
+      const newHours = Math.min(23, parseInt(value) || 0)
+        .toString()
+        .padStart(2, '0');
+      setTime(`${newHours}:${minutes}`);
+    } else {
+      const newMinutes = Math.min(59, parseInt(value) || 0)
+        .toString()
+        .padStart(2, '0');
+      setTime(`${hours}:${newMinutes}`);
+    }
+  };
+
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      onClearInput={isClearable && time && !disabled ? () => setTime('00:00') : undefined}
+      className={clsx(className, 'time-input-wrapper')}
+    >
+      <div className="time-input">
+        <input
+          type="number"
+          value={hours}
+          onChange={e => handleChange(e.target.value, 'hh')}
+          onClick={e => {
+            const input = e.target as HTMLInputElement;
+            input.select();
+          }}
+          disabled={disabled}
+          required={required}
+          style={{ textAlign: 'right' }}
+        />
+        <span className="fs-m">:</span>
+        <input
+          type="number"
+          value={minutes}
+          onChange={e => handleChange(e.target.value, 'mm')}
+          onClick={e => {
+            const input = e.target as HTMLInputElement;
+            input.select();
+          }}
+          disabled={disabled}
+          required={required}
+        />
+      </div>
+    </InputWrapper>
+  );
+};

package/src/components/List/List.tsx

@@ -1,21 +1,21 @@
-import type { FC } from 'react';
-import type { IListItem } from './ListItem';
-import { ListItem } from './ListItem';
-
-interface Props {
-  items?: IListItem[];
-  noItemsMessage?: string;
-}
-
-export const List: FC<Props> = ({ items, noItemsMessage }) => {
-  if (!items || items.length === 0)
-    return noItemsMessage ? <p className="fs-16 new-line">{noItemsMessage}</p> : null;
-
-  return (
-    <div className="iui-list">
-      {items.map(item => (
-        <ListItem key={item.id ?? item.label} {...item} />
-      ))}
-    </div>
-  );
-};
+import type { FC } from 'react';
+import type { IListItem } from './ListItem';
+import { ListItem } from './ListItem';
+
+interface Props {
+  items?: IListItem[];
+  noItemsMessage?: string;
+}
+
+export const List: FC<Props> = ({ items, noItemsMessage }) => {
+  if (!items || items.length === 0)
+    return noItemsMessage ? <p className="fs-16 new-line">{noItemsMessage}</p> : null;
+
+  return (
+    <div className="iui-list">
+      {items.map(item => (
+        <ListItem key={item.id ?? item.label} {...item} />
+      ))}
+    </div>
+  );
+};

package/src/components/List/ListItem.tsx

@@ -1,70 +1,70 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { FC } from 'react';
-import type { IButtonColor } from '../Button/Button';
-import { useMemo } from 'react';
-import clsx from 'clsx';
-import { IconButton } from '../Button/IconButton';
-
-export interface IListItemAction {
-  icon: IconDefinition;
-  onClick: () => void;
-  disabled?: boolean;
-  color?: IButtonColor;
-  hidden?: boolean;
-}
-
-export interface IListItem {
-  id?: string;
-  label: string;
-  desc?: string;
-  actions?: IListItemAction[];
-  onClick?: () => void;
-  active?: boolean;
-  disabled?: boolean;
-}
-
-export const ListItem: FC<IListItem> = ({
-  label,
-  desc,
-  actions,
-  onClick,
-  active,
-  disabled,
-}) => {
-  const filteredActions = useMemo(
-    () => actions?.filter(action => !action.hidden),
-    [actions]
-  );
-
-  return (
-    <div
-      className={clsx('iui-list-item', { active, disabled, clickable: !!onClick })}
-      onClick={e => {
-        e.stopPropagation();
-        onClick?.();
-      }}
-    >
-      <div>
-        <p className="bold">{label}</p>
-        {desc && <div className="iui-list-item-desc">{desc}</div>}
-      </div>
-      {filteredActions && filteredActions.length > 0 && (
-        <div className="iui-list-item-actions">
-          {filteredActions.map((action, index) => (
-            <IconButton
-              key={index}
-              icon={action.icon}
-              onClick={e => {
-                e.stopPropagation();
-                action.onClick();
-              }}
-              size="s"
-              color={action.color}
-              disabled={action.disabled}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { FC } from 'react';
+import type { IButtonColor } from '../Button/Button';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { IconButton } from '../Button/IconButton';
+
+export interface IListItemAction {
+  icon: IconDefinition;
+  onClick: () => void;
+  disabled?: boolean;
+  color?: IButtonColor;
+  hidden?: boolean;
+}
+
+export interface IListItem {
+  id?: string;
+  label: string;
+  desc?: string;
+  actions?: IListItemAction[];
+  onClick?: () => void;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export const ListItem: FC<IListItem> = ({
+  label,
+  desc,
+  actions,
+  onClick,
+  active,
+  disabled,
+}) => {
+  const filteredActions = useMemo(
+    () => actions?.filter(action => !action.hidden),
+    [actions]
+  );
+
+  return (
+    <div
+      className={clsx('iui-list-item', { active, disabled, clickable: !!onClick })}
+      onClick={e => {
+        e.stopPropagation();
+        onClick?.();
+      }}
+    >
+      <div>
+        <p className="bold">{label}</p>
+        {desc && <div className="iui-list-item-desc">{desc}</div>}
+      </div>
+      {filteredActions && filteredActions.length > 0 && (
+        <div className="iui-list-item-actions">
+          {filteredActions.map((action, index) => (
+            <IconButton
+              key={index}
+              icon={action.icon}
+              onClick={e => {
+                e.stopPropagation();
+                action.onClick();
+              }}
+              size="s"
+              color={action.color}
+              disabled={action.disabled}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};