@inceptionbg/iui 2.0.22 → 2.0.24

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,20 @@
-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 } from 'react-select';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 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>
+  ),
+};

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>
+  );
+});

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;