@qoretechnologies/reqore 0.30.6 → 0.30.8

package/src/components/MultiSelect/index.tsx

@@ -1,5 +1,5 @@
 import { omit, size } from 'lodash';
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ReqoreDropdown, ReqoreInput } from '../..';
 import { TSizes } from '../../constants/sizes';
 import { IPopoverControls } from '../../hooks/usePopover';
@@ -74,217 +74,209 @@ export const ReqoreMultiSelectItem = memo(
   }
 );
 
-export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectProps>(
-  (
-    {
-      value = [],
-      onValueChange,
-      onItemClick,
-      canRemoveItems,
-      canCreateItems,
-      items = [],
-      selectedItemEffect,
-      selectedItemSize,
-      selectorProps,
-      openOnMount,
-      enterKeySelects,
-      onItemClickIcon,
-      ...rest
-    }: IReqoreMultiSelectProps,
-    ref
-  ) => {
-    const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
-    const [query, setQuery] = useState<string>('');
-    const popoverData = useRef<IPopoverControls>(undefined);
-    const [focused, setFocused] = useState<boolean>(false);
+export const ReqoreMultiSelect = ({
+  value = [],
+  onValueChange,
+  onItemClick,
+  canRemoveItems,
+  canCreateItems,
+  items = [],
+  selectedItemEffect,
+  selectedItemSize,
+  selectorProps,
+  openOnMount,
+  enterKeySelects,
+  onItemClickIcon,
+  ...rest
+}: IReqoreMultiSelectProps) => {
+  const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
+  const [query, setQuery] = useState<string>('');
+  const popoverData = useRef<IPopoverControls>(undefined);
+  const [focused, setFocused] = useState<boolean>(false);
 
-    useEffect(() => {
-      if (query && !popoverData.current?.isOpen()) {
-        popoverData.current?.open();
-      }
-    }, [query]);
+  useEffect(() => {
+    if (query && !popoverData.current?.isOpen()) {
+      popoverData.current?.open();
+    }
+  }, [query]);
 
-    useEffect(() => {
-      if (enterKeySelects) {
-        document.addEventListener('keydown', handleKeyDown);
-      }
+  useEffect(() => {
+    if (enterKeySelects) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
 
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    });
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
 
-    const addRemoveItem = useCallback(
-      (item: TReqoreMultiSelectItem): void => {
-        if (value.includes(item.value)) {
-          onValueChange(value.filter((v) => v !== item.value));
-        } else {
-          onValueChange([...value, item.value]);
-        }
-      },
-      [value]
-    );
+  const addRemoveItem = useCallback(
+    (item: TReqoreMultiSelectItem): void => {
+      if (value.includes(item.value)) {
+        onValueChange(value.filter((v) => v !== item.value));
+      } else {
+        onValueChange([...value, item.value]);
+      }
+    },
+    [value]
+  );
 
-    const handleItemSelect = useCallback(
-      (item: Partial<TReqoreMultiSelectItem>) => {
-        addRemoveItem(item);
+  const handleItemSelect = useCallback(
+    (item: Partial<TReqoreMultiSelectItem>) => {
+      addRemoveItem(item);
 
-        if (item.isNew) {
-          setCreatedItems([
-            ...createdItems,
-            {
-              value: item.value,
-            },
-          ]);
-        }
+      if (item.isNew) {
+        setCreatedItems([
+          ...createdItems,
+          {
+            value: item.value,
+          },
+        ]);
+      }
 
-        setQuery('');
-      },
-      [createdItems, value]
-    );
+      setQuery('');
+    },
+    [createdItems, value]
+  );
 
-    /*
+  /*
     This code creates a list of all items that are available
     for selection in the dropdown. It will include the items
     that are passed in as props, as well as any items that the
     user has created.
     */
-    const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
-      const customItems: TReqoreMultiSelectItem[] = size(createdItems)
-        ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
-        : [];
+  const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
+    const customItems: TReqoreMultiSelectItem[] = size(createdItems)
+      ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
+      : [];
 
-      let filteredItems: TReqoreMultiSelectItem[] = [...items, ...customItems].filter((item) =>
-        query
-          ? item.divider
-            ? false
-            : (item.label || item.value)?.toString().toLowerCase().indexOf(query.toLowerCase()) !==
-              -1
-          : true
-      );
+    let filteredItems: TReqoreMultiSelectItem[] = [...items, ...customItems].filter((item) =>
+      query
+        ? item.divider
+          ? false
+          : (item.label || item.value)?.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
+        : true
+    );
 
-      // Mark selected items as selected
-      filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
-        ...omit(item, ['actions', 'asBadge', 'rightIcon']),
-        selected: value.includes(item.value),
-      }));
+    // Mark selected items as selected
+    filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
+      ...omit(item, ['actions', 'asBadge', 'rightIcon']),
+      selected: value.includes(item.value),
+    }));
 
-      if (query && !size(filteredItems)) {
-        filteredItems = [
-          { label: 'No existing items found', readOnly: true, minimal: true, icon: 'ForbidLine' },
-        ];
-      }
+    if (query && !size(filteredItems)) {
+      filteredItems = [
+        { label: 'No existing items found', readOnly: true, minimal: true, icon: 'ForbidLine' },
+      ];
+    }
 
-      // If there is a query and there are filtered items
-      // and there is no item that exactly matches the query, add it to the list
-      if (
-        query &&
-        !filteredItems.some((item: TReqoreMultiSelectItem) => item.value === query) &&
-        canCreateItems
-      ) {
-        filteredItems = [
-          {
-            label: `Create new "${query}"`,
-            value: query,
-            isNew: true,
-            icon: 'AddCircleLine',
-            minimal: true,
-            flat: false,
-            effect: {
-              gradient: {
-                colors: {
-                  0: 'success',
-                  100: 'success:darken:1',
-                },
+    // If there is a query and there are filtered items
+    // and there is no item that exactly matches the query, add it to the list
+    if (
+      query &&
+      !filteredItems.some((item: TReqoreMultiSelectItem) => item.value === query) &&
+      canCreateItems
+    ) {
+      filteredItems = [
+        {
+          label: `Create new "${query}"`,
+          value: query,
+          isNew: true,
+          icon: 'AddCircleLine',
+          minimal: true,
+          flat: false,
+          effect: {
+            gradient: {
+              colors: {
+                0: 'success',
+                100: 'success:darken:1',
               },
             },
           },
-          { divider: true, label: 'Items matching your query' },
-          ...filteredItems,
-        ];
-      }
+        },
+        { divider: true, label: 'Items matching your query' },
+        ...filteredItems,
+      ];
+    }
 
-      return filteredItems;
-    }, [items, createdItems, query, value]);
+    return filteredItems;
+  }, [items, createdItems, query, value]);
 
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === 'Enter' && focused) {
-          const item = [...items, ...createdItems].find((item) => item.value === query);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && focused) {
+        const item = [...items, ...createdItems].find((item) => item.value === query);
 
-          if (item) {
-            handleItemSelect(item);
-          } else if (canCreateItems && query) {
-            handleItemSelect({
-              value: query,
-              isNew: true,
-            });
-          }
+        if (item) {
+          handleItemSelect(item);
+        } else if (canCreateItems && query) {
+          handleItemSelect({
+            value: query,
+            isNew: true,
+          });
         }
-      },
-      [items, createdItems, query, canCreateItems, focused]
-    );
+      }
+    },
+    [items, createdItems, query, canCreateItems, focused]
+  );
 
-    const getItemByValue = useCallback(
-      (value: string): TReqoreMultiSelectItem => {
-        return [...items, ...createdItems].find((item) => item.value === value);
-      },
-      [items, createdItems, value]
-    );
+  const getItemByValue = useCallback(
+    (value: string): TReqoreMultiSelectItem => {
+      return [...items, ...createdItems].find((item) => item.value === value);
+    },
+    [items, createdItems, value]
+  );
 
-    return (
-      <ReqoreControlGroup vertical fluid {...rest} ref={ref}>
-        <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
-          {size(value) ? (
-            value.map((v) => (
-              <ReqoreMultiSelectItem
-                key={v}
-                item={getItemByValue(v)}
-                onItemClickIcon={onItemClickIcon}
-                onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
-                onClick={
-                  onItemClick
-                    ? () => {
-                        onItemClick(getItemByValue(v));
-                      }
-                    : undefined
-                }
-                selectedItemEffect={selectedItemEffect}
-                selectedItemSize={selectedItemSize}
-              />
-            ))
-          ) : (
-            <ReqoreTag color='transparent' icon='ForbidLine' label='No items selected' />
-          )}
-        </ReqoreTagGroup>
-        <ReqoreControlGroup minimal={rest.minimal} flat={rest.flat} size={rest.size}>
-          <ReqoreDropdown<IReqoreInputProps>
-            {...selectorProps}
-            multiSelect
-            handler='focus'
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            passPopoverData={(data) => (popoverData.current = data)}
-            component={ReqoreInput}
-            onClearClick={() => setQuery('')}
-            value={query}
-            isDefaultOpen={openOnMount}
-            onItemSelect={handleItemSelect}
-            placeholder={
-              canCreateItems ? 'Type to search or create an item...' : 'Type to search...'
-            }
-            onChange={(e: any) => setQuery(e.target.value)}
-            items={
-              size(allItems)
-                ? allItems
-                : canCreateItems
-                ? [{ label: 'No items exist', readOnly: true, minimal: true, icon: 'ForbidLine' }]
-                : []
-            }
-            useTargetWidth
-          />
-        </ReqoreControlGroup>
+  return (
+    <ReqoreControlGroup vertical fluid {...rest}>
+      <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
+        {size(value) ? (
+          value.map((v) => (
+            <ReqoreMultiSelectItem
+              key={v}
+              item={getItemByValue(v)}
+              onItemClickIcon={onItemClickIcon}
+              onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
+              onClick={
+                onItemClick
+                  ? () => {
+                      onItemClick(getItemByValue(v));
+                    }
+                  : undefined
+              }
+              selectedItemEffect={selectedItemEffect}
+              selectedItemSize={selectedItemSize}
+            />
+          ))
+        ) : (
+          <ReqoreTag color='transparent' icon='ForbidLine' label='No items selected' />
+        )}
+      </ReqoreTagGroup>
+      <ReqoreControlGroup minimal={rest.minimal} flat={rest.flat} size={rest.size}>
+        <ReqoreDropdown<IReqoreInputProps>
+          {...selectorProps}
+          multiSelect
+          handler='focus'
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          passPopoverData={(data) => (popoverData.current = data)}
+          component={ReqoreInput}
+          onClearClick={() => setQuery('')}
+          value={query}
+          isDefaultOpen={openOnMount}
+          onItemSelect={handleItemSelect}
+          placeholder={canCreateItems ? 'Type to search or create an item...' : 'Type to search...'}
+          onChange={(e: any) => setQuery(e.target.value)}
+          items={
+            size(allItems)
+              ? allItems
+              : canCreateItems
+              ? [{ label: 'No items exist', readOnly: true, minimal: true, icon: 'ForbidLine' }]
+              : []
+          }
+          useTargetWidth
+        />
       </ReqoreControlGroup>
-    );
-  }
-);
+    </ReqoreControlGroup>
+  );
+};