@true-engineering/true-react-common-ui-kit 3.8.0 → 3.8.1

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,106 +1,106 @@
-import { useRef, useState } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useOnClickOutside, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import {
-  MultiSelectList,
-  IMultiSelectListValues,
-  IMultiSelectLocale,
-  IMultiSelectLocaleKey,
-} from '../MultiSelectList';
-import { MultiSelectInput } from './components';
-import { IHorizontalCornerConnection } from './types';
-import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSelect.styles';
-
-export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
-  value?: IMultiSelectListValues<Value>;
-  /** @default 'full' */
-  corners?: IHorizontalCornerConnection;
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default '' */
-  placeholder?: string;
-  localeKey?: IMultiSelectLocaleKey;
-  locale?: IMultiSelectLocale;
-  onChange: (value?: IMultiSelectListValues<Value>) => void;
-  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
-}
-
-export function MultiSelect<Value = string>({
-  value,
-  corners = 'full',
-  isInvalid = false,
-  isRequired = false,
-  isDisabled = false,
-  placeholder = '',
-  localeKey,
-  locale,
-  testId,
-  data,
-  onChange,
-  fetchOptions,
-  tweakStyles,
-}: IMultiSelectProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakMultiSelectListStyles = useTweakStyles({
-    innerStyles: multiSelectListStyles,
-    tweakStyles,
-    className: 'tweakMultiSelectList',
-    currentComponentName: 'MultiSelect',
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const ref = useRef(null);
-
-  const handleOnClose = () => {
-    setIsOpen(false);
-  };
-
-  useOnClickOutside(ref, handleOnClose, classes.root);
-
-  return (
-    <div
-      className={clsx(
-        classes.root,
-        classes[corners],
-        isOpen && classes.open,
-        isInvalid && !isDisabled && classes.invalid,
-        isRequired && classes.required,
-        isDisabled && classes.disabled,
-      )}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {/* Input */}
-      <MultiSelectInput
-        value={value}
-        isOpen={isOpen}
-        isDisabled={isDisabled}
-        placeholder={placeholder}
-        onToggle={(state) => setIsOpen(state)}
-      />
-      {/* Dropdown */}
-      {isOpen && (
-        <div className={classes.listContainer} ref={ref}>
-          <MultiSelectList
-            tweakStyles={tweakMultiSelectListStyles}
-            value={value}
-            localeKey={localeKey}
-            locale={locale}
-            fetchOptions={fetchOptions}
-            onChange={onChange}
-            onClose={handleOnClose}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutside, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import {
+  MultiSelectList,
+  IMultiSelectListValues,
+  IMultiSelectLocale,
+  IMultiSelectLocaleKey,
+} from '../MultiSelectList';
+import { MultiSelectInput } from './components';
+import { IHorizontalCornerConnection } from './types';
+import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSelect.styles';
+
+export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
+  value?: IMultiSelectListValues<Value>;
+  /** @default 'full' */
+  corners?: IHorizontalCornerConnection;
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default '' */
+  placeholder?: string;
+  localeKey?: IMultiSelectLocaleKey;
+  locale?: IMultiSelectLocale;
+  onChange: (value?: IMultiSelectListValues<Value>) => void;
+  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+}
+
+export function MultiSelect<Value = string>({
+  value,
+  corners = 'full',
+  isInvalid = false,
+  isRequired = false,
+  isDisabled = false,
+  placeholder = '',
+  localeKey,
+  locale,
+  testId,
+  data,
+  onChange,
+  fetchOptions,
+  tweakStyles,
+}: IMultiSelectProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakMultiSelectListStyles = useTweakStyles({
+    innerStyles: multiSelectListStyles,
+    tweakStyles,
+    className: 'tweakMultiSelectList',
+    currentComponentName: 'MultiSelect',
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const ref = useRef(null);
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  useOnClickOutside(ref, handleOnClose, classes.root);
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        classes[corners],
+        isOpen && classes.open,
+        isInvalid && !isDisabled && classes.invalid,
+        isRequired && classes.required,
+        isDisabled && classes.disabled,
+      )}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {/* Input */}
+      <MultiSelectInput
+        value={value}
+        isOpen={isOpen}
+        isDisabled={isDisabled}
+        placeholder={placeholder}
+        onToggle={(state) => setIsOpen(state)}
+      />
+      {/* Dropdown */}
+      {isOpen && (
+        <div className={classes.listContainer} ref={ref}>
+          <MultiSelectList
+            tweakStyles={tweakMultiSelectListStyles}
+            value={value}
+            localeKey={localeKey}
+            locale={locale}
+            fetchOptions={fetchOptions}
+            onChange={onChange}
+            onClose={handleOnClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -1,53 +1,53 @@
-import { ReactElement } from 'react';
-import clsx from 'clsx';
-import { ICommonProps } from '../../../../types';
-import { Icon } from '../../../Icon';
-import { IMultiSelectListValues } from '../../../MultiSelectList';
-import { useStyles, IMultiSelectInputStyles } from './MultiSelectInput.styles';
-
-export interface IMultiSelectInputProps<Value>
-  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
-  value?: IMultiSelectListValues<Value>;
-  isOpen: boolean;
-  isDisabled: boolean;
-  placeholder: string;
-  onToggle: (state: boolean) => void;
-}
-
-export function MultiSelectInput<Value>({
-  value: v,
-  isOpen,
-  isDisabled = false,
-  placeholder = '',
-  tweakStyles,
-  onToggle,
-}: IMultiSelectInputProps<Value>): ReactElement | null {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const value = v?.include;
-
-  return (
-    <div className={classes.root} onClick={() => !isDisabled && onToggle(!isOpen)}>
-      {/* Placeholder */}
-      {(value === undefined || (value && value.length === 0)) && (
-        <div className={classes.placeholder}>{placeholder}</div>
-      )}
-      {/* Selected options */}
-      {value !== undefined && value.length > 0 && (
-        <>
-          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>{placeholder}</div>
-          <div className={classes.values}>
-            <div className={classes.value}>{value.join(', ')}</div>
-            <div className={classes.amount}>{value.length}</div>
-          </div>
-        </>
-      )}
-      {/* Chevron */}
-      <div className={clsx(classes.indicator, isDisabled && classes.indicatorDisabled)}>
-        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
-          <Icon type="chevron-down" />
-        </div>
-      </div>
-    </div>
-  );
-}
+import { ReactElement } from 'react';
+import clsx from 'clsx';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { IMultiSelectListValues } from '../../../MultiSelectList';
+import { useStyles, IMultiSelectInputStyles } from './MultiSelectInput.styles';
+
+export interface IMultiSelectInputProps<Value>
+  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
+  value?: IMultiSelectListValues<Value>;
+  isOpen: boolean;
+  isDisabled: boolean;
+  placeholder: string;
+  onToggle: (state: boolean) => void;
+}
+
+export function MultiSelectInput<Value>({
+  value: v,
+  isOpen,
+  isDisabled = false,
+  placeholder = '',
+  tweakStyles,
+  onToggle,
+}: IMultiSelectInputProps<Value>): ReactElement | null {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const value = v?.include;
+
+  return (
+    <div className={classes.root} onClick={() => !isDisabled && onToggle(!isOpen)}>
+      {/* Placeholder */}
+      {(value === undefined || (value && value.length === 0)) && (
+        <div className={classes.placeholder}>{placeholder}</div>
+      )}
+      {/* Selected options */}
+      {value !== undefined && value.length > 0 && (
+        <>
+          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>{placeholder}</div>
+          <div className={classes.values}>
+            <div className={classes.value}>{value.join(', ')}</div>
+            <div className={classes.amount}>{value.length}</div>
+          </div>
+        </>
+      )}
+      {/* Chevron */}
+      <div className={clsx(classes.indicator, isDisabled && classes.indicatorDisabled)}>
+        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
+          <Icon type="chevron-down" />
+        </div>
+      </div>
+    </div>
+  );
+}