@takaro/lib-components 0.0.0-next.0da151e

package/src/components/inputs/selects/SelectQueryField/Generic/index.tsx

@@ -0,0 +1,401 @@
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  Children,
+  PropsWithChildren,
+  isValidElement,
+  cloneElement,
+  useMemo,
+  MouseEvent,
+} from 'react';
+import {
+  autoUpdate,
+  FloatingFocusManager,
+  FloatingPortal,
+  size,
+  useDismiss,
+  flip,
+  useFloating,
+  useInteractions,
+  useRole,
+  offset,
+  useClick,
+} from '@floating-ui/react';
+import { AiOutlineSearch as SearchIcon, AiOutlineClose as ClearIcon } from 'react-icons/ai';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputPropsFunctionHandlers } from '../../../InputProps';
+import { useDebounce } from '../../../../../hooks';
+import { setAriaDescribedBy } from '../../../layout';
+import { FeedBackContainer } from '../style';
+import { SelectItem, SelectContext, getLabelFromChildren } from '../../';
+import { PaginationProps } from '../../../';
+
+/* The SearchField depends on a few things of <Select/> */
+import { GroupLabel } from '../../SelectField/style';
+import { SelectContainer, SelectButton, StyledArrowIcon } from '../../sharedStyle';
+import { IconButton, InfiniteScroll, Spinner } from '../../../../../components';
+import { GenericTextField } from '../../../TextField/Generic';
+import { Option, OptionGroup, SubComponentTypes } from '../../SubComponents';
+
+interface SharedSelectQueryFieldProps extends PaginationProps {
+  // Enables loading data feedback for user
+  isLoadingData?: boolean;
+  /// The placeholder text to show when the input is empty
+  placeholder?: string;
+  /// Debounce time in milliseconds (when clientside data it should be 0)
+  debounce?: number;
+  /// Triggered whenever the input value changes.
+  /// This is used to trigger the API call to get the new options
+  handleInputValueChange?: (value: string) => void;
+
+  /// When true, The select icon will be replaced by a cross icon to clear the selected value.
+  canClear?: boolean;
+
+  /// The selected items shown in the select field
+  render?: (selectedItems: SelectItem[]) => React.ReactNode;
+
+  /// Callback to be called when the select field is opened or closed
+  onOpenChange?: (open: boolean) => void;
+
+  /// The total options that will be visible when fully loaded
+  optionCount?: number;
+}
+
+interface SingleSelectQueryFieldProps extends SharedSelectQueryFieldProps {
+  multiple?: false;
+}
+interface MultiSelectQueryFieldProps extends SharedSelectQueryFieldProps {
+  multiple: true;
+}
+
+interface SingleSelectQueryFieldHandlers extends GenericInputPropsFunctionHandlers<string, HTMLDivElement> {
+  onChange: (val: string) => void;
+}
+
+interface MultiSelectQueryFieldHandlers extends GenericInputPropsFunctionHandlers<string[], HTMLDivElement> {
+  onChange: (val: string[]) => void;
+}
+
+export type SelectQueryFieldProps = SingleSelectQueryFieldProps | MultiSelectQueryFieldProps;
+export type GenericSelectQueryFieldProps = PropsWithChildren<
+  | (SingleSelectQueryFieldProps & SingleSelectQueryFieldHandlers)
+  | (MultiSelectQueryFieldProps & MultiSelectQueryFieldHandlers)
+>;
+const defaultsApplier = defaultInputPropsFactory<GenericSelectQueryFieldProps>(defaultInputProps);
+
+export interface InputValue {
+  value: string;
+  label: string;
+  /// When the user selects an option from the list, there is no need to do another API call
+  shouldUpdate: boolean;
+}
+
+export const _GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelectQueryFieldProps>(
+  function GenericSelectQueryField(props, ref) {
+    const {
+      onBlur = () => {},
+      onFocus = () => {},
+      onChange,
+      name,
+      disabled,
+      /// Value are the selected items (most cases these are a list of IDs only)
+      value,
+      id,
+      placeholder = 'Search field',
+      hasDescription,
+      hasError,
+      children,
+      readOnly,
+      isFetchingNextPage,
+      isFetching,
+      fetchNextPage,
+      hasNextPage,
+      render,
+      multiple = false,
+      canClear = false,
+      debounce = 250,
+      isLoadingData = false,
+      handleInputValueChange,
+      onOpenChange,
+      optionCount,
+    } = defaultsApplier(props);
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [inputValue, setInputValue] = useState<InputValue>({ value: '', shouldUpdate: false, label: '' });
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const [currentSelectedItems, setCurrentSelectedItems] = useState<SelectItem[]>([]);
+    const [persistedItems, setPersistedItems] = useState<SelectItem[]>([]);
+
+    const debouncedValue = useDebounce(inputValue.value, debounce);
+    const listItemsRef = useRef<Array<HTMLLIElement | null>>([]);
+
+    useEffect(() => {
+      if (handleInputValueChange) {
+        if ((inputValue.shouldUpdate && debouncedValue) || (inputValue && debouncedValue === ''))
+          handleInputValueChange(debouncedValue);
+      }
+    }, [debouncedValue]);
+
+    useEffect(() => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      }
+    }, [open]);
+
+    const { refs, strategy, x, y, context } = useFloating<HTMLInputElement>({
+      whileElementsMounted: autoUpdate,
+      open,
+      onOpenChange: readOnly || disabled ? () => {} : setOpen,
+      middleware: [
+        offset(5),
+        size({
+          apply({ availableHeight, elements, availableWidth }) {
+            const refWidth = elements.reference.getBoundingClientRect().width;
+            const floatingContentWidth = elements.floating.scrollWidth;
+
+            const width =
+              availableWidth > refWidth
+                ? `${Math.min(availableWidth, 500)}px`
+                : `${Math.max(refWidth, floatingContentWidth)}px`;
+
+            Object.assign(elements.floating.style, {
+              // Note: we cannot use the rects.reference.width here because if the referenced item is very small compared to the other options, there will be horizontal overflow.
+              // fit-content isn't the perfect solution either, because if there is no space available it might render outside the viewport.
+              width,
+              maxHeight: `${Math.max(150, availableHeight)}px`,
+            });
+          },
+        }),
+        flip({
+          fallbackStrategy: 'bestFit',
+          fallbackPlacements: ['top', 'bottom'],
+        }),
+      ],
+    });
+
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+      useClick(context),
+      useRole(context, { role: 'listbox' }),
+      useDismiss(context),
+    ]);
+
+    function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+      const value = event.target.value;
+      setInputValue({ value, shouldUpdate: true, label: value });
+      if (value) {
+        setActiveIndex(0);
+      }
+    }
+
+    const handleClear = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setCurrentSelectedItems([]);
+      setPersistedItems([]);
+
+      // the undefined is an expection
+      if (onChange) onChange(multiple ? ([] as string[]) : (undefined as any));
+    };
+
+    /* This handles the case where the value is changed externally (e.g. from a parent component) */
+    /* onChange propagates the value to the parent component, but since the value prop is not a required prop, the parent might not reflect the change
+     * which ends up not running this useEffect. Meaning we still need to update the selectedIndex when clicked on an option.
+     */
+    useEffect(() => {
+      /// Value only contains the ids of the selected items, not their labels, The labels are fetched from the items found in the list of options.
+      /// One caveat is that the list of options might change due to the search query, so the labels might not be found.
+      const createItem = (v: string) => ({ value: v, label: getLabelFromChildren(children, v) as unknown as string });
+
+      if (Array.isArray(value)) {
+        // first we divide the value array into two arrays, one that are already in preserved (so we don't need to fetch the label again)
+        // and the other one that are not in the preserved array (so we need to fetch the label)
+        const [preserved, toFetch] = value.reduce(
+          (acc, v) => {
+            if (persistedItems.find((item) => item.value === v)) {
+              acc[0].push(v);
+            } else {
+              acc[1].push(v);
+            }
+            return acc;
+          },
+          [[], []] as [string[], string[]],
+        );
+
+        const fetched = toFetch.map(createItem);
+        const items = [...persistedItems.filter((item) => preserved.includes(item.value)), ...fetched];
+        setPersistedItems(items);
+        setCurrentSelectedItems(items);
+      } else if (typeof value === 'string' && value !== '') {
+        // check if value is already part of the persisted items
+        const item = persistedItems.find((item) => item.value === value);
+        // if yes, then we don't need to fetch the label again
+        if (item) {
+          setCurrentSelectedItems([item]);
+        } else {
+          setCurrentSelectedItems([createItem(value)]);
+        }
+        setCurrentSelectedItems([createItem(value)]);
+      }
+    }, [value, children]);
+
+    const renderSelect = () => {
+      const hasOptions =
+        options &&
+        options.some((optionGroup) =>
+          Children.toArray(optionGroup?.props?.children).some(
+            (option) => isValidElement(option) && option.props?.children,
+          ),
+        );
+
+      // initialFocus=-1 is used to prevent the first item from being focused when the list opens
+      return (
+        <FloatingFocusManager context={context} visuallyHiddenDismiss initialFocus={-1}>
+          <SelectContainer
+            {...getFloatingProps({
+              ref: refs.setFloating,
+              style: {
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                overflow: 'auto',
+              },
+            })}
+          >
+            {' '}
+            {handleInputValueChange && (
+              <GenericTextField
+                id={`${name}-input`}
+                name={`${name}-input`}
+                hasDescription={false}
+                icon={<SearchIcon />}
+                suffix={isLoadingData ? 'Loading' : optionCount !== undefined ? `Result: ${optionCount}` : undefined}
+                hasError={hasError}
+                value={inputValue.value}
+                onChange={onInputChange}
+                placeholder={placeholder}
+                ref={ref}
+              />
+            )}
+            {/* it will always contain 1 because of the group label */}
+            {isLoadingData && (
+              <FeedBackContainer>
+                <Spinner size="small" />
+                <span style={{ marginLeft: '10px' }}>loading results</span>
+              </FeedBackContainer>
+            )}
+            {/* show options if they exist*/}
+            {hasOptions && options}
+            {/* Add an infinite scroll component add the bottom when there is data, and we are not already loading */}
+            {hasOptions && !isLoadingData && (
+              <InfiniteScroll
+                isFetching={isFetching}
+                hasNextPage={hasNextPage}
+                fetchNextPage={fetchNextPage}
+                isFetchingNextPage={isFetchingNextPage}
+              />
+            )}
+            {/* Basically first interaction */}
+            {!hasOptions && inputValue.value === '' && handleInputValueChange && (
+              <FeedBackContainer>Start typing to search</FeedBackContainer>
+            )}
+            {/* When there is no result */}
+            {!hasOptions && !isLoadingData && <FeedBackContainer>No results found</FeedBackContainer>}
+          </SelectContainer>
+        </FloatingFocusManager>
+      );
+    };
+
+    const options = useMemo(() => {
+      return [
+        /* this is needed, but we need to get rid of the items that are already present in the options that were actually loaded
+        persistedItems.length > 0 && (
+          <ul key={`selected-items-${name}`} role="group" aria-labelledby={'select-items-list'}>
+            <GroupLabel role="presentation" id={'select-group-label'} aria-hidden="false">
+              Selected items
+            </GroupLabel>
+            {persistedItems.map((item) => (
+              <Option key={`${name}-${item.value}`} value={item.value} label={item.label} onChange={onChange as any}>
+                {item.label}
+              </Option>
+            ))}
+          </ul>
+        ),
+        */
+
+        ...(Children.map(
+          // children here is an <OptionGroup/>
+          children,
+          (child) =>
+            isValidElement(child) && (
+              <ul key={child.props.label} role="group" aria-labelledby={`select-${child.props.label}`}>
+                {child.props.label && (
+                  <GroupLabel role="presentation" id={`select-${child.props.label}`} aria-hidden="true">
+                    {child.props.label}
+                  </GroupLabel>
+                )}
+                {Children.map(child.props.children, (option) => {
+                  return cloneElement(option, {
+                    onChange: onChange,
+                  });
+                })}
+              </ul>
+            ),
+        )?.filter(Boolean) ?? []),
+      ];
+    }, [children, persistedItems]);
+
+    return (
+      <SelectContext.Provider
+        value={{
+          listRef: listItemsRef,
+          setOpen,
+          getItemProps,
+          setActiveIndex,
+          activeIndex,
+          dataRef: context.dataRef,
+          multiple,
+          selectedItems: currentSelectedItems,
+          setSelectedItems: setCurrentSelectedItems,
+          name,
+        }}
+      >
+        <SelectButton
+          id={id}
+          ref={refs.setReference}
+          disabled={disabled}
+          readOnly={readOnly}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          isOpen={open}
+          tabIndex={disabled ? -1 : 0}
+          hasError={hasError}
+          aria-describedby={setAriaDescribedBy(name, hasDescription)}
+          {...getReferenceProps()}
+        >
+          {render ? (
+            render(currentSelectedItems)
+          ) : (
+            <div>
+              {currentSelectedItems.length === 0 ? 'Select' : currentSelectedItems.map((item) => item.label).join(', ')}
+            </div>
+          )}
+
+          {!readOnly && canClear && currentSelectedItems.length > 0 && !open ? (
+            <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={(e) => handleClear(e)} />
+          ) : (
+            <StyledArrowIcon size={16} />
+          )}
+        </SelectButton>
+        {open && <FloatingPortal>{renderSelect()}</FloatingPortal>}
+      </SelectContext.Provider>
+    );
+  },
+);
+
+// TODO: type it correctly instead
+type GenericSelectQueryFieldType = typeof _GenericSelectQueryField & SubComponentTypes;
+export const GenericSelectQueryField = _GenericSelectQueryField as GenericSelectQueryFieldType;
+
+GenericSelectQueryField.Option = Option;
+GenericSelectQueryField.OptionGroup = OptionGroup;

package/src/components/inputs/selects/SelectQueryField/SelectQueryField.stories.tsx

@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Button, SelectQueryField, SelectQueryFieldProps } from '../../../../components';
+import { films } from '../data';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { GenericSelectQueryField } from './Generic';
+
+interface Film {
+  name: string;
+  decade: string;
+  icon: string;
+}
+
+export default {
+  title: 'Inputs/SelectQueryField',
+  args: {
+    placeholder: 'Search for a film',
+    label: 'Film',
+    debounce: 250,
+    readOnly: false,
+    canClear: false,
+  },
+} as Meta<SelectQueryFieldProps>;
+
+export const ServerSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
+  interface FormValues {
+    film: string;
+  }
+
+  const { control, handleSubmit } = useForm<FormValues>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string>('');
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const mockAPICall = (debouncedValue: string) => {
+    // Start loading
+    setLoading(true);
+
+    setTimeout(() => {
+      const filteredOptions = films.filter((film) =>
+        film.name.toLowerCase().trim().includes(debouncedValue.toLowerCase()),
+      );
+      setOptions(filteredOptions);
+      setLoading(false);
+    }, 1000);
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = ({ film }) => {
+    setResult(film);
+  };
+
+  return (
+    <>
+      it is important to note that it is required for the user to select an option from the list. If the user types
+      something, but does not select an item from the list, the input will be reset.
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <SelectQueryField
+          debounce={args.debounce}
+          control={control}
+          loading={loading}
+          canClear={args.canClear}
+          placeholder={args.placeholder}
+          label={args.placeholder}
+          /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+          handleInputValueChange={mockAPICall}
+          isLoadingData={loading}
+          required={false}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
+          name="film"
+        >
+          {/* In this case the label is the same as the value but ofcourse that can differ*/}
+          <SelectQueryField.OptionGroup>
+            {options?.map(({ name, icon }) => (
+              <SelectQueryField.Option key={name} value={name} label={name}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                  <span>{name}</span>
+                </div>
+              </SelectQueryField.Option>
+            ))}
+          </SelectQueryField.OptionGroup>
+        </SelectQueryField>
+        <Button type="submit">Submit form</Button>
+      </form>
+      This is the submitted value:
+      <div>{result}</div>
+    </>
+  );
+};
+
+export const ClientSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
+  interface FormValues {
+    film: string;
+  }
+
+  const { control, handleSubmit } = useForm<FormValues>();
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string>('');
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const handleInputChange = (value: string) => {
+    // Start loading
+    const filteredOptions = films.filter((film) => film.name.toLowerCase().trim().includes(value.toLowerCase()));
+    setOptions(filteredOptions);
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = ({ film }) => {
+    setResult(film);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <SelectQueryField
+          control={control}
+          placeholder="Search for a film"
+          label="Film"
+          canClear={args.canClear}
+          /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+          handleInputValueChange={handleInputChange}
+          required={false}
+          debounce={0}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
+          name="film"
+        >
+          {/* In this case the label is the same as the value but ofcourse that can differ*/}
+          <SelectQueryField.OptionGroup>
+            {options?.map(({ name, icon, decade }) => (
+              <SelectQueryField.Option key={name} value={decade} label={name}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                  <span>{name}</span>
+                </div>
+              </SelectQueryField.Option>
+            ))}
+          </SelectQueryField.OptionGroup>
+        </SelectQueryField>
+        <Button type="submit">Submit form</Button>
+      </form>
+      The result returns the decade of the film:
+      <div>{result}</div>
+    </>
+  );
+};
+
+export const ClientSideMultiSelectSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
+  interface FormValues {
+    films: string[];
+  }
+
+  const validationSchema = z.object({
+    films: z.array(z.string()).nonempty(),
+  });
+
+  const { control, handleSubmit } = useForm<FormValues>({
+    resolver: zodResolver(validationSchema),
+  });
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string[]>([]);
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const handleInputChange = (value: string) => {
+    // Start loading
+    const filteredOptions = films.filter((film) => film.name.toLowerCase().trim().includes(value.toLowerCase()));
+    setOptions(filteredOptions);
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = ({ films }) => {
+    if (films && films.length === 0) return;
+    setResult(films);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <SelectQueryField
+          control={control}
+          placeholder="Search for a film"
+          label="Film"
+          /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+          handleInputValueChange={handleInputChange}
+          required={false}
+          canClear={args.canClear}
+          debounce={0}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
+          multiple
+          name="films"
+        >
+          {/* In this case the label is the same as the value but ofcourse that can differ*/}
+          <SelectQueryField.OptionGroup>
+            {options?.map(({ name, icon }) => (
+              <SelectQueryField.Option key={name} value={name} label={name}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                  <span>{name}</span>
+                </div>
+              </SelectQueryField.Option>
+            ))}
+          </SelectQueryField.OptionGroup>
+        </SelectQueryField>
+        <Button type="submit">Submit form</Button>
+      </form>
+      Selected films:
+      <div>{result && result.join(',')}</div>
+    </>
+  );
+};
+
+export const Generic: StoryFn<SelectQueryFieldProps> = () => {
+  const [options, setOptions] = useState<Film[]>();
+  const [result, setResult] = useState<string[]>([]);
+
+  // Function to handle the simulated API call
+  // This function will be called each time the input changes
+  const handleInputChange = (value: string) => {
+    // Start loading
+    const filteredOptions = films.filter((film) => film.name.toLowerCase().trim().includes(value.toLowerCase()));
+    setOptions(filteredOptions);
+  };
+
+  const onChange = (values: string[]) => {
+    setResult(values);
+  };
+
+  return (
+    <>
+      <GenericSelectQueryField
+        id="films"
+        onChange={onChange}
+        placeholder="Search for a film"
+        /* The onChange returns the not debounced value, probably never needed, but is inherited by all inputFields */
+        handleInputValueChange={handleInputChange}
+        required={false}
+        debounce={0}
+        multiple
+        hasError={false}
+        hasDescription={false}
+        value={result}
+        name="film"
+        hasNextPage={false}
+        optionCount={10}
+        isFetching={false}
+        isFetchingNextPage={false}
+        fetchNextPage={() => {}}
+      >
+        {/* In this case the label is the same as the value but ofcourse that can differ*/}
+        <SelectQueryField.OptionGroup>
+          {options?.map(({ name, icon }) => (
+            <SelectQueryField.Option key={name} value={name} label={name}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <img src={icon} width="20px" height="20px" style={{ borderRadius: '50%', marginRight: '10px' }} />
+                <span>{name}</span>
+              </div>
+            </SelectQueryField.Option>
+          ))}
+        </SelectQueryField.OptionGroup>
+      </GenericSelectQueryField>
+      Selected films:
+      <div>{result.map((film) => film).join(',')}</div>
+    </>
+  );
+};

package/src/components/inputs/selects/SelectQueryField/index.tsx

@@ -0,0 +1,5 @@
+export { GenericSelectQueryField } from '../SelectQueryField/Generic';
+export type { SelectQueryFieldProps, GenericSelectQueryFieldProps } from '../SelectQueryField/Generic';
+
+export { ControlledSelectQueryField } from './Controlled';
+export type { ControlledSelectQueryFieldProps } from './Controlled';

package/src/components/inputs/selects/SelectQueryField/style.ts

@@ -0,0 +1,13 @@
+import { styled } from '../../../../styled';
+
+export const FeedBackContainer = styled.div`
+  display: flex;
+  flex-direciton: row;
+  align-items: center;
+  justify-content: center;
+
+  // loading
+  span {
+    margin-left: ${({ theme }) => theme.spacing['1']};
+  }
+`;