@inceptionbg/iui 2.0.23 → 2.0.25

package/src/components/Inputs/RadioGroup.tsx

@@ -1,48 +1,48 @@
-import clsx from 'clsx';
-import type { FC } from 'react';
-import { Radio } from './Radio';
-
-interface IRadioGroupProps {
-  name: string;
-  items: {
-    value: string;
-    label: string;
-    desc?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-  }[];
-  selected: string | number | boolean | undefined | null;
-  setSelected: (selected: any) => void;
-  required?: boolean;
-  align?: 'column' | 'row';
-  className?: string;
-}
-
-export const RadioGroup: FC<IRadioGroupProps> = ({
-  name,
-  items,
-  selected,
-  setSelected,
-  required,
-  align = 'column',
-  className,
-}) => (
-  <div className={clsx('radio-group', align, className)}>
-    {items.map(
-      e =>
-        !e.hidden && (
-          <Radio
-            key={e.value}
-            label={e.label}
-            desc={e.desc}
-            value={e.value}
-            disabled={e.disabled}
-            required={required}
-            groupName={name}
-            selected={selected}
-            setSelected={setSelected}
-          />
-        )
-    )}
-  </div>
-);
+import type { FC } from 'react';
+import clsx from 'clsx';
+import { Radio } from './Radio';
+
+interface IRadioGroupProps {
+  name: string;
+  items: {
+    value: string;
+    label: string;
+    desc?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+  }[];
+  selected: string | number | boolean | undefined | null;
+  setSelected: (selected: any) => void;
+  required?: boolean;
+  align?: 'column' | 'row';
+  className?: string;
+}
+
+export const RadioGroup: FC<IRadioGroupProps> = ({
+  name,
+  items,
+  selected,
+  setSelected,
+  required,
+  align = 'column',
+  className,
+}) => (
+  <div className={clsx('radio-group', align, className)}>
+    {items.map(
+      e =>
+        !e.hidden && (
+          <Radio
+            key={e.value}
+            label={e.label}
+            desc={e.desc}
+            value={e.value}
+            disabled={e.disabled}
+            required={required}
+            groupName={name}
+            selected={selected}
+            setSelected={setSelected}
+          />
+        )
+    )}
+  </div>
+);

package/src/components/Inputs/RadioLarge.tsx

@@ -1,39 +1,39 @@
-import { Dispatch, FC, ReactElement, ReactNode, SetStateAction } from 'react';
-import { Radio } from './Radio';
-import clsx from 'clsx';
-
-interface Props {
-  title?: string | ReactElement;
-  desc?: string | ReactElement;
-  value: string;
-  selected: string;
-  setSelected: Dispatch<SetStateAction<any>>;
-  disabled?: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const RadioLarge: FC<Props> = ({
-  title,
-  desc,
-  value,
-  selected,
-  setSelected,
-  disabled,
-  className,
-  children,
-}) => (
-  <Radio
-    value={value}
-    selected={selected}
-    setSelected={setSelected}
-    disabled={disabled}
-    className={clsx('radio-large', className)}
-  >
-    <div className="full-width">
-      <p className="bold mb-3">{title}</p>
-      <p>{desc}</p>
-      <div>{children}</div>
-    </div>
-  </Radio>
-);
+import type { Dispatch, FC, ReactElement, ReactNode, SetStateAction } from 'react';
+import clsx from 'clsx';
+import { Radio } from './Radio';
+
+interface Props {
+  title?: string | ReactElement;
+  desc?: string | ReactElement;
+  value: string;
+  selected: string;
+  setSelected: Dispatch<SetStateAction<any>>;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const RadioLarge: FC<Props> = ({
+  title,
+  desc,
+  value,
+  selected,
+  setSelected,
+  disabled,
+  className,
+  children,
+}) => (
+  <Radio
+    value={value}
+    selected={selected}
+    setSelected={setSelected}
+    disabled={disabled}
+    className={clsx('radio-large', className)}
+  >
+    <div className="full-width">
+      <p className="bold mb-3">{title}</p>
+      <p>{desc}</p>
+      <div>{children}</div>
+    </div>
+  </Radio>
+);

package/src/components/Inputs/SearchInput.tsx

@@ -1,45 +1,46 @@
-import { FC, Ref, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { TextInput } from './TextInput';
-import { faMagnifyingGlass } from '../../assets/icons';
-
-interface IProps {
-  label?: string;
-  onSearch: (searchText: string) => void;
-  className?: string;
-  ref?: Ref<HTMLInputElement>;
-}
-export const SearchInput: FC<IProps> = ({ label, onSearch, className, ref }) => {
-  const [text, setText] = useState('');
-  const { t } = useTranslation();
-
-  return (
-    <TextInput
-      ref={ref}
-      className={className}
-      inputProps={{
-        'aria-label': 'search',
-        onKeyDown: (e: any) => {
-          if (e.key === 'Enter') {
-            e.stopPropagation();
-            e.preventDefault();
-            onSearch(e.target.value);
-          } else if (e.key === 'Escape') {
-            !!text && e.stopPropagation();
-            setText('');
-            onSearch('');
-          }
-        },
-      }}
-      label={label}
-      placeholder={t('Search')}
-      value={text}
-      setValue={setText}
-      onClear={() => onSearch('')}
-      endButton={{
-        icon: faMagnifyingGlass,
-        onClick: () => onSearch(text),
-      }}
-    />
-  );
-};
+import type { FC, Ref } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faMagnifyingGlass } from '../../assets/icons';
+import { TextInput } from './TextInput';
+
+interface IProps {
+  label?: string;
+  onSearch: (searchText: string) => void;
+  className?: string;
+  ref?: Ref<HTMLInputElement>;
+}
+export const SearchInput: FC<IProps> = ({ label, onSearch, className, ref }) => {
+  const [text, setText] = useState('');
+  const { t } = useTranslation();
+
+  return (
+    <TextInput
+      ref={ref}
+      className={className}
+      inputProps={{
+        'aria-label': 'search',
+        onKeyDown: (e: any) => {
+          if (e.key === 'Enter') {
+            e.stopPropagation();
+            e.preventDefault();
+            onSearch(e.target.value);
+          } else if (e.key === 'Escape') {
+            !!text && e.stopPropagation();
+            setText('');
+            onSearch('');
+          }
+        },
+      }}
+      label={label}
+      placeholder={t('Search')}
+      value={text}
+      setValue={setText}
+      onClear={() => onSearch('')}
+      endButton={{
+        icon: faMagnifyingGlass,
+        onClick: () => onSearch(text),
+      }}
+    />
+  );
+};

package/src/components/Inputs/Selects/Select.tsx

@@ -1,17 +1,17 @@
-import { FC } from 'react';
-import { SelectWrapper } from './components/SelectWrapper';
-import type {
-  AsyncSelectProps,
-  BasicSelectProps,
-  CreatableSelectProps,
-} from '../../../types/ISelect';
-
-export const Select: FC<Omit<BasicSelectProps, 'variant'>> = props => (
-  <SelectWrapper {...props} variant="basic" />
-);
-export const SelectAsyncPaginate: FC<Omit<AsyncSelectProps, 'variant'>> = props => (
-  <SelectWrapper {...props} variant="async" />
-);
-export const SelectCreatable: FC<Omit<CreatableSelectProps, 'variant'>> = props => (
-  <SelectWrapper {...props} variant="async-creatable" />
-);
+import type { FC } from 'react';
+import type {
+  AsyncSelectProps,
+  BasicSelectProps,
+  CreatableSelectProps,
+} from '../../../types/ISelect';
+import { SelectWrapper } from './components/SelectWrapper';
+
+export const Select: FC<Omit<BasicSelectProps, 'variant'>> = props => (
+  <SelectWrapper {...props} variant="basic" />
+);
+export const SelectAsyncPaginate: FC<Omit<AsyncSelectProps, 'variant'>> = props => (
+  <SelectWrapper {...props} variant="async" />
+);
+export const SelectCreatable: FC<Omit<CreatableSelectProps, 'variant'>> = props => (
+  <SelectWrapper {...props} variant="async-creatable" />
+);

package/src/components/Inputs/Selects/components/CustomSelectComponents.tsx

@@ -1,19 +1,19 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { GroupBase, components } from 'react-select';
-import { type SelectComponents as ISelectComponents } from 'react-select/dist/declarations/src/components';
-import { faChevronDown, faCircleXmark } from '../../../../assets/icons';
-
-export const CustomSelectComponents: Partial<
-  ISelectComponents<unknown, boolean, GroupBase<unknown>>
-> = {
-  DropdownIndicator: props => (
-    <components.DropdownIndicator {...props}>
-      <FontAwesomeIcon icon={faChevronDown} className="icon" />
-    </components.DropdownIndicator>
-  ),
-  ClearIndicator: props => (
-    <components.ClearIndicator {...props}>
-      <FontAwesomeIcon icon={faCircleXmark} className="icon" />
-    </components.ClearIndicator>
-  ),
-};
+import type { GroupBase, SelectComponentsConfig } from 'react-select';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { components } from 'react-select';
+import { faChevronDown, faCircleXmark } from '../../../../assets/icons';
+
+export const CustomSelectComponents: Partial<
+  SelectComponentsConfig<unknown, boolean, GroupBase<unknown>>
+> = {
+  DropdownIndicator: props => (
+    <components.DropdownIndicator {...props}>
+      <FontAwesomeIcon icon={faChevronDown} className="icon" />
+    </components.DropdownIndicator>
+  ),
+  ClearIndicator: props => (
+    <components.ClearIndicator {...props}>
+      <FontAwesomeIcon icon={faCircleXmark} className="icon" />
+    </components.ClearIndicator>
+  ),
+};

package/src/components/Inputs/Selects/components/SelectWrapper.tsx

@@ -1,118 +1,118 @@
-import { forwardRef, useRef } from 'react';
-import ReactSelect from 'react-select';
-import { AsyncPaginate } from 'react-select-async-paginate';
-import AsyncCreatableSelect from 'react-select/async-creatable';
-import { InputWrapper } from '../../InputWrapper';
-import { CustomSelectComponents } from './CustomSelectComponents';
-import { createSelectStyles } from '../utils/selectStyles';
-import { useTranslation } from 'react-i18next';
-import type {
-  AsyncSelectProps,
-  BasicSelectProps,
-  CreatableSelectProps,
-} from '../../../../types/ISelect';
-import clsx from 'clsx';
-
-export type ISelectProps = BasicSelectProps | AsyncSelectProps | CreatableSelectProps;
-
-export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef) => {
-  const ref = useRef(null);
-  const { t } = useTranslation();
-
-  const {
-    variant,
-    label,
-    required,
-    disabled,
-    helperText,
-    error,
-    errorText,
-    className,
-    minWidth,
-    menuWidth,
-    value,
-    isMulti,
-    onChange,
-    placeholder = `${t('Choose')}...`,
-    isClearable = true,
-    isOpen,
-    onMenuOpen,
-    onMenuClose,
-    openDirection = 'auto',
-    formatOptionLabel,
-    autoFocus,
-    closeMenuOnSelect,
-    noOptionsMessage,
-    size,
-  } = props;
-
-  const commonProps = {
-    value: value ?? (isMulti ? [] : null),
-    components: CustomSelectComponents,
-    onChange,
-    placeholder,
-    styles: createSelectStyles({ menuWidth, fontSize: size === 's' ? 12 : 16, size }),
-    isDisabled: disabled,
-    isOptionDisabled: (option: any) => option.disabled,
-    isClearable,
-    isMulti,
-    menuIsOpen: isOpen,
-    menuPlacement: openDirection,
-    menuPortalTarget: document.querySelector('body'),
-    ref: forwardedRef ?? ref,
-    autoFocus,
-    noOptionsMessage: () => noOptionsMessage || 'Nema opcija',
-    onMenuOpen,
-    onMenuClose,
-    closeMenuOnSelect: closeMenuOnSelect ?? !isMulti,
-    formatOptionLabel,
-  };
-
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      disabled={disabled}
-      helperText={helperText}
-      error={error}
-      errorText={errorText}
-      className={clsx('select-wrapper', size, className)}
-      minWidth={minWidth}
-      heightAuto
-    >
-      {variant === 'async' ? (
-        <AsyncPaginate
-          {...commonProps}
-          loadOptions={props.loadOptions}
-          defaultOptions={props.defaultData ?? false}
-          cacheUniqs={props.refresh}
-        />
-      ) : variant === 'async-creatable' ? (
-        <AsyncCreatableSelect
-          {...commonProps}
-          loadOptions={props.loadOptions}
-          defaultOptions={props.defaultData ?? false}
-          onCreateOption={props.onCreate}
-          formatCreateLabel={(inputValue: string) => (
-            <p>{`${t('FreeText')} "${inputValue}"`}</p>
-          )}
-        />
-      ) : (
-        <ReactSelect {...commonProps} options={props.options} />
-      )}
-      {required && !disabled && (
-        <input
-          className="fake-input"
-          required
-          tabIndex={-1}
-          autoComplete="off"
-          value={(isMulti ? commonProps.value[0]?.value : commonProps.value?.value) ?? ''}
-          onChange={() => {}}
-          // onFocus={() =>
-          //   ((forwardedRef as MutableRefObject<any>) ?? ref).current?.focus()
-          // }
-        />
-      )}
-    </InputWrapper>
-  );
-});
+import type {
+  AsyncSelectProps,
+  BasicSelectProps,
+  CreatableSelectProps,
+} from '../../../../types/ISelect';
+import { forwardRef, useRef } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import ReactSelect from 'react-select';
+import { AsyncPaginate } from 'react-select-async-paginate';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import { InputWrapper } from '../../InputWrapper';
+import { createSelectStyles } from '../utils/selectStyles';
+import { CustomSelectComponents } from './CustomSelectComponents';
+
+export type ISelectProps = BasicSelectProps | AsyncSelectProps | CreatableSelectProps;
+
+export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { t } = useTranslation();
+
+  const {
+    variant,
+    label,
+    required,
+    disabled,
+    helperText,
+    error,
+    errorText,
+    className,
+    minWidth,
+    menuWidth,
+    value,
+    isMulti,
+    onChange,
+    placeholder = `${t('Choose')}...`,
+    isClearable = true,
+    isOpen,
+    onMenuOpen,
+    onMenuClose,
+    openDirection = 'auto',
+    formatOptionLabel,
+    autoFocus,
+    closeMenuOnSelect,
+    noOptionsMessage,
+    size,
+  } = props;
+
+  const commonProps = {
+    value: value ?? (isMulti ? [] : null),
+    components: CustomSelectComponents,
+    onChange,
+    placeholder,
+    styles: createSelectStyles({ menuWidth, fontSize: size === 's' ? 12 : 16, size }),
+    isDisabled: disabled,
+    isOptionDisabled: (option: any) => option.disabled,
+    isClearable,
+    isMulti,
+    menuIsOpen: isOpen,
+    menuPlacement: openDirection,
+    menuPortalTarget: document.querySelector('body'),
+    ref: forwardedRef ?? ref,
+    autoFocus,
+    noOptionsMessage: () => noOptionsMessage || 'Nema opcija',
+    onMenuOpen,
+    onMenuClose,
+    closeMenuOnSelect: closeMenuOnSelect ?? !isMulti,
+    formatOptionLabel,
+  };
+
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      helperText={helperText}
+      error={error}
+      errorText={errorText}
+      className={clsx('select-wrapper', size, className)}
+      minWidth={minWidth}
+      heightAuto
+    >
+      {variant === 'async' ? (
+        <AsyncPaginate
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? false}
+          cacheUniqs={props.refresh}
+        />
+      ) : variant === 'async-creatable' ? (
+        <AsyncCreatableSelect
+          {...commonProps}
+          loadOptions={props.loadOptions}
+          defaultOptions={props.defaultData ?? false}
+          onCreateOption={props.onCreate}
+          formatCreateLabel={(inputValue: string) => (
+            <p>{`${t('FreeText')} "${inputValue}"`}</p>
+          )}
+        />
+      ) : (
+        <ReactSelect {...commonProps} options={props.options} />
+      )}
+      {required && !disabled && (
+        <input
+          className="fake-input"
+          required
+          tabIndex={-1}
+          autoComplete="off"
+          value={(isMulti ? commonProps.value[0]?.value : commonProps.value?.value) ?? ''}
+          onChange={() => {}}
+          // onFocus={() =>
+          //   ((forwardedRef as MutableRefObject<any>) ?? ref).current?.focus()
+          // }
+        />
+      )}
+    </InputWrapper>
+  );
+});