@takaro/lib-components 0.0.1

package/src/components/inputs/selects/SelectField/Generic/FilterInput.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, useState } from 'react';
+import { GenericTextField } from '../../../TextField';
+import { AiOutlineSearch as SearchIcon } from 'react-icons/ai';
+import { styled } from '../../../../../styled';
+
+const Container = styled.div`
+  input {
+    background-color: ${({ theme }) => theme.colors.background};
+  }
+  h3 {
+    margin-bottom: ${({ theme }) => theme.spacing['1']};
+  }
+  padding-bottom: ${({ theme }) => theme.spacing['0_75']};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+`;
+
+interface FilterInputProps {
+  selectName: string;
+  onFilterChange: (value: string) => void;
+}
+
+export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(({ selectName, onFilterChange }, ref) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const onChangeHandler = (value: string) => {
+    setInputValue(value);
+    onFilterChange(value);
+  };
+
+  return (
+    <Container>
+      <GenericTextField
+        ref={ref}
+        id={`select-${selectName}`}
+        name={`select-${selectName}`}
+        hasDescription={false}
+        icon={<SearchIcon />}
+        placeholder="Filter Options"
+        value={inputValue}
+        onChange={(e) => onChangeHandler(e.target.value)}
+        size="tiny"
+        hasError={false}
+      />
+    </Container>
+  );
+});

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

@@ -0,0 +1,302 @@
+import {
+  FC,
+  Children,
+  cloneElement,
+  isValidElement,
+  useRef,
+  useState,
+  PropsWithChildren,
+  useEffect,
+  useMemo,
+  ReactElement,
+  MouseEvent,
+} from 'react';
+import { GroupContainer, GroupLabel } from '../style';
+import { SelectContainer, StyledFloatingOverlay, StyledArrowIcon, SelectButton } from '../../sharedStyle';
+import { FilterInput } from './FilterInput';
+import { AiOutlineClose as ClearIcon } from 'react-icons/ai';
+
+import {
+  useFloating,
+  offset,
+  flip,
+  useListNavigation,
+  useInteractions,
+  useRole,
+  useClick,
+  useDismiss,
+  FloatingFocusManager,
+  autoUpdate,
+  size,
+  FloatingPortal,
+} from '@floating-ui/react';
+
+import { defaultInputPropsFactory, defaultInputProps, GenericInputPropsFunctionHandlers } from '../../../InputProps';
+import { Option, OptionGroup, SubComponentTypes } from '../../SubComponents';
+import { setAriaDescribedBy } from '../../../layout';
+import { SelectItem, SelectContext, getLabelFromChildren } from '../../';
+import { IconButton } from '../../../../../components/';
+
+interface SharedSelectFieldProps {
+  render: (selectedItems: SelectItem[]) => React.ReactNode;
+  enableFilter?: boolean;
+  /// Rendering in portal will render the selectDropdown independent from its parent container.
+  /// this is useful when select is rendered in other floating elements with limited space.
+  inPortal?: boolean;
+
+  /// When true, The select icon will be replaced by a cross icon to clear the selected value.
+  canClear?: boolean;
+}
+
+interface MultiSelectFieldProps extends SharedSelectFieldProps {
+  multiple: true;
+}
+
+interface SingleSelectFieldProps extends SharedSelectFieldProps {
+  multiple?: false;
+}
+
+interface SingleSelectFieldHandlers extends GenericInputPropsFunctionHandlers<string, HTMLDivElement> {
+  onChange: (val: string) => void;
+}
+
+interface MultiSelectFieldHandlers extends GenericInputPropsFunctionHandlers<string[], HTMLDivElement> {
+  onChange: (val: string[]) => void;
+}
+
+export type SelectFieldProps = SingleSelectFieldProps | MultiSelectFieldProps;
+export type GenericSelectFieldProps = PropsWithChildren<
+  (SingleSelectFieldProps & SingleSelectFieldHandlers) | (MultiSelectFieldProps & MultiSelectFieldHandlers)
+>;
+const defaultsApplier = defaultInputPropsFactory<GenericSelectFieldProps>(defaultInputProps);
+
+// TODO: implement required, test error display, add grouped example, implement setShowError
+// TODO: implement **required** (but this should only be done after the label reimplementation.
+export const GenericSelectField: FC<GenericSelectFieldProps> & SubComponentTypes = (props) => {
+  const {
+    render,
+    children,
+    readOnly,
+    value,
+    onBlur,
+    onFocus,
+    onChange,
+    id,
+    hasError,
+    hasDescription,
+    name,
+    inPortal = false,
+    disabled,
+    enableFilter = false,
+    multiple = false,
+    canClear = false,
+  } = defaultsApplier(props);
+
+  const listItemsRef = useRef<Array<HTMLLIElement | null>>([]);
+
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selectedItems, setSelectedItems] = useState<SelectItem[]>([]);
+
+  const [filterText, setFilterText] = useState<string>('');
+  const filterInputRef = useRef<HTMLInputElement>(null);
+
+  const [pointer, setPointer] = useState(false);
+
+  if (!open && pointer) {
+    setPointer(false);
+  }
+
+  const { x, y, refs, strategy, context } = useFloating({
+    open,
+    onOpenChange: disabled || readOnly ? () => {} : setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      size({
+        apply({ availableHeight, elements, availableWidth }) {
+          const refWidth = elements.reference.getBoundingClientRect().width;
+
+          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: availableWidth < refWidth ? `${availableWidth}px` : `${refWidth}px`,
+            maxHeight: `${Math.max(150, availableHeight)}px`,
+          });
+        },
+      }),
+      flip({
+        fallbackStrategy: 'bestFit',
+        fallbackPlacements: ['top', 'bottom'],
+      }),
+    ],
+  });
+
+  const handleClear = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedItems([]);
+
+    if (onChange) onChange(multiple ? ([] as string[]) : (undefined as any));
+  };
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    useClick(context),
+    useRole(context, { role: 'listbox' }),
+    useDismiss(context),
+    useListNavigation(context, {
+      listRef: listItemsRef,
+      activeIndex: activeIndex,
+      // TODO
+      // selectedIndex: multiple ? null : (selectedIndex as number),
+      onNavigate: setActiveIndex,
+      scrollItemIntoView: multiple ? false : true,
+    }),
+  ]);
+
+  /* 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(() => {
+    // Function to create an item with a value and label
+    const createItem = (v: string) => ({ value: v, label: getLabelFromChildren(children, v) as unknown as string });
+
+    if (Array.isArray(value)) {
+      const items = value.map(createItem);
+      setSelectedItems(items);
+    } else if (typeof value === 'string' && value !== '') {
+      setSelectedItems([createItem(value)]);
+    }
+  }, [value]);
+
+  const options = useMemo(() => {
+    let optionIndex = -1;
+
+    return Children.map(children, (group) => {
+      if (!isValidElement(group)) return null;
+
+      const filteredOptions = Children.toArray(group.props.children)
+        .filter(isValidElement) // Ensures that only valid elements are processed
+        .filter((option: ReactElement) => {
+          if (enableFilter && !('label' in option.props)) {
+            throw new Error('When enableFilter is true, all options must have a label prop');
+          }
+
+          // Perform the filtering based on your condition
+          const valueMatches = filterText === '' || option.props.label.toLowerCase().includes(filterText.toLowerCase());
+          return valueMatches;
+        })
+        .map((option: ReactElement) => {
+          // Increment optionIndex only for options that match
+          optionIndex++;
+
+          // Make sure your Option component can accept and use the index prop
+          return cloneElement(option, {
+            index: optionIndex,
+            onChange: onChange,
+            isGrouped: 'label' in group.props && 'icon' in group.props,
+          });
+        });
+
+      if (filteredOptions.length === 0) return null;
+
+      return (
+        <GroupContainer key={group.props.label} role="group" aria-labelledby={`select-${group.props.label}`}>
+          {group.props.label && (
+            <GroupLabel role="presentation" id={`select-${group.props.label}`} aria-hidden="true">
+              {group.props.icon && group.props.icon}
+              <span key={`select-span-${group.props.label}`}>{group.props.label}</span>
+            </GroupLabel>
+          )}
+          {filteredOptions}
+        </GroupContainer>
+      );
+    });
+  }, [children, onChange, filterText]);
+
+  useEffect(() => {
+    // clear filter when dropdown is closed
+    if (!open) {
+      setFilterText('');
+    }
+    // focus on the filter input when the dropdown is opened
+    else {
+      filterInputRef.current?.focus();
+    }
+  }, [open]);
+
+  const renderSelect = () => {
+    return (
+      <FloatingFocusManager
+        context={context}
+        // TODO
+        //initialFocus={selectedItems && selectedItems.length > 0 ? selectedItems[0].label : filterInputRef}
+      >
+        <SelectContainer
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflow: 'auto',
+          }}
+          onPointerMove={() => setPointer(true)}
+          {...getFloatingProps()}
+        >
+          {enableFilter && <FilterInput ref={filterInputRef} selectName={name} onFilterChange={setFilterText} />}
+          {options}
+        </SelectContainer>
+      </FloatingFocusManager>
+    );
+  };
+
+  return (
+    <SelectContext.Provider
+      value={{
+        selectedItems,
+        setSelectedItems,
+        activeIndex,
+        setActiveIndex,
+        listRef: listItemsRef,
+        setOpen,
+        getItemProps,
+        dataRef: context.dataRef,
+        name,
+        multiple,
+      }}
+    >
+      <SelectButton
+        id={id}
+        ref={refs.setReference}
+        readOnly={readOnly}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        isOpen={open}
+        tabIndex={disabled ? -1 : 0}
+        disabled={disabled}
+        hasError={hasError}
+        aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        {...getReferenceProps()}
+      >
+        {render(selectedItems)}
+        {!readOnly && !disabled && canClear && selectedItems.length > 0 && !open ? (
+          <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={(e) => handleClear(e)} />
+        ) : (
+          <StyledArrowIcon size={16} />
+        )}
+      </SelectButton>
+      {open &&
+        (!inPortal ? (
+          <StyledFloatingOverlay lockScroll style={{ zIndex: 1000 }}>
+            {renderSelect()}
+          </StyledFloatingOverlay>
+        ) : (
+          <FloatingPortal>{renderSelect()}</FloatingPortal>
+        ))}
+    </SelectContext.Provider>
+  );
+};
+
+GenericSelectField.Option = Option;
+GenericSelectField.OptionGroup = OptionGroup;

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

@@ -0,0 +1,253 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { useMemo, useState } from 'react';
+import { Button, SelectField, SelectFieldProps } from '../../../../components';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
+import { styled } from '../../../../styled';
+import { films } from '../data';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+interface ExtraStoryProps {
+  optionGroupLabel: string;
+}
+
+export default {
+  title: 'Inputs/SelectField',
+  args: {
+    label: 'Film',
+    description: 'This is the description',
+    hint: 'This is the hint',
+    optionGroupLabel: 'Films',
+    canClear: false,
+    readOnly: false,
+    disabled: false,
+  },
+} as Meta<SelectFieldProps & ExtraStoryProps>;
+
+const OptionIcon = styled.img`
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 50%;
+  background: #1d1e20;
+  color: transparent;
+`;
+
+export const onChange: StoryFn<SelectFieldProps & ExtraStoryProps> = (args) => {
+  const { control } = useForm();
+  const selectValue = useWatch({ control, name: 'film' });
+
+  return (
+    <>
+      <SelectField
+        description={args.description}
+        label={args.label}
+        control={control}
+        canClear={args.canClear}
+        name="film"
+        hint={args.hint}
+        readOnly={args.readOnly}
+        disabled={args.disabled}
+        render={(selectedItems) => {
+          if (selectedItems.length === 0) {
+            return <div>Select...</div>;
+          }
+          // selected items is an array { label: string, value: string }. In this case it will always only contain 1 value since we are not using multiSelect.
+          const selectedFilm = films.find((film) => film.name === selectedItems[0]?.value);
+
+          return (
+            <div>
+              {selectedFilm && <OptionIcon alt="Poster" src={selectedFilm?.icon} />}
+              {selectedFilm?.name}
+            </div>
+          );
+        }}
+      >
+        <SelectField.OptionGroup label={args.optionGroupLabel}>
+          {films.map(({ name }) => (
+            <SelectField.Option key={name} value={name} label={name}>
+              <div>
+                <span>{name}</span>
+              </div>
+            </SelectField.Option>
+          ))}
+        </SelectField.OptionGroup>
+      </SelectField>
+      <pre>result: {selectValue && selectValue.length > 0 && selectValue[0].value}</pre>
+    </>
+  );
+};
+
+export const OnSubmit: StoryFn<SelectFieldProps> = (args) => {
+  type FormFields = { film: string };
+  const [result, setResult] = useState<string>('none');
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        film: z.enum(['not-sure-how-this-works', ...films.map((film) => film.name)]),
+      }),
+    []
+  );
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+
+  const submit: SubmitHandler<FormFields> = ({ film }) => {
+    setResult(film);
+  };
+
+  return (
+    <>
+      NOTE: You can ignore the width changing when opening the select. This is due to the select being rendered in a
+      storybook iframe which has incorrect gutter size.
+      <form onSubmit={handleSubmit(submit)}>
+        <SelectField
+          control={control}
+          name="film"
+          canClear={args.canClear}
+          label={args.label}
+          description={args.description}
+          render={(selectedItems) => {
+            if (selectedItems.length === 0) {
+              return <div>Select...</div>;
+            }
+            // selected items is an array { label: string, value: string }. In this case it will always only contain 1 value since we are not using multiSelect.
+            const selectedFilm = films.find((film) => film.name === selectedItems[0]?.value);
+
+            return (
+              <div>
+                {selectedFilm && <OptionIcon alt="Poster" src={selectedFilm?.icon} />}
+                {selectedFilm?.name}
+              </div>
+            );
+          }}
+        >
+          <SelectField.OptionGroup label="films">
+            {films.map(({ name }) => (
+              <SelectField.Option key={name} value={name} label={name}>
+                <div>
+                  <span>{name}</span>
+                </div>
+              </SelectField.Option>
+            ))}
+          </SelectField.OptionGroup>
+        </SelectField>
+        <Button type="submit" text="Submit" />
+      </form>
+      <pre>result: {result}</pre>
+    </>
+  );
+};
+
+export const MultiSelect: StoryFn<SelectFieldProps> = (args) => {
+  type FormFields = { film: string[] };
+  const [result, setResult] = useState<string>('none');
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        film: z.string().array(),
+      }),
+    []
+  );
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+
+  const submit: SubmitHandler<FormFields> = ({ film }) => {
+    setResult(film.join(', '));
+  };
+
+  return (
+    <>
+      NOTE: You can ignore the width changing when opening the select. This is due to the select being rendered in a
+      storybook iframe which has incorrect gutter size.
+      <form onSubmit={handleSubmit(submit)}>
+        <SelectField
+          control={control}
+          name="film"
+          label={args.label}
+          multiple
+          canClear={args.canClear}
+          description={args.description}
+          render={(selectedItems) => {
+            const selectedFilms = films.filter((film) => selectedItems.some((item) => item.value === film.name));
+
+            return (
+              <div>
+                {selectedFilms.length === 0
+                  ? 'Select...'
+                  : selectedFilms.length <= 3
+                  ? selectedFilms.map((film) => film.name).join(', ')
+                  : `${selectedFilms
+                      .slice(0, 3)
+                      .map((film) => film.name)
+                      .join(', ')} and ${selectedFilms.length - 3} more`}
+              </div>
+            );
+          }}
+        >
+          <SelectField.OptionGroup label="films">
+            {films.map(({ name }) => (
+              <SelectField.Option key={name} value={name} label={name}>
+                <div>
+                  <span>{name}</span>
+                </div>
+              </SelectField.Option>
+            ))}
+          </SelectField.OptionGroup>
+        </SelectField>
+        <Button type="submit" text="Submit" />
+      </form>
+      <pre>result: {result}</pre>
+    </>
+  );
+};
+
+export const Filter: StoryFn<SelectFieldProps & ExtraStoryProps> = (args) => {
+  const { control } = useForm();
+  const selectValue = useWatch({ control, name: 'film' });
+
+  return (
+    <>
+      <SelectField
+        description={args.description}
+        label={args.label}
+        control={control}
+        name="film"
+        hint={args.hint}
+        canClear={args.canClear}
+        enableFilter
+        render={(selectedItems) => {
+          if (selectedItems.length === 0) {
+            return <div>Select...</div>;
+          }
+          // selected items is an array { label: string, value: string }. In this case it will always only contain 1 value since we are not using multiSelect.
+          const selectedFilm = films.find((film) => film.name === selectedItems[0]?.value);
+
+          return (
+            <div>
+              {selectedFilm && <OptionIcon alt="Poster" src={selectedFilm?.icon} />}
+              {selectedFilm?.name}
+            </div>
+          );
+        }}
+      >
+        <SelectField.OptionGroup label={args.optionGroupLabel}>
+          {films.map(({ name }) => (
+            <SelectField.Option key={name} value={name} label={name}>
+              <div>
+                <span>{name}</span>
+              </div>
+            </SelectField.Option>
+          ))}
+        </SelectField.OptionGroup>
+      </SelectField>
+      <pre>result: {selectValue}</pre>
+    </>
+  );
+};

package/src/components/inputs/selects/SelectField/index.ts

@@ -0,0 +1,5 @@
+export { GenericSelectField } from './Generic';
+export type { GenericSelectFieldProps, SelectFieldProps } from './Generic';
+
+export { ControlledSelectField as ControlledSelect } from './Controlled';
+export type { ControlledSelectFieldProps as ControlledSelectProps } from './Controlled';

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

@@ -0,0 +1,29 @@
+import { styled } from '../../../../styled';
+
+export const GroupContainer = styled.ul`
+  padding-bottom: ${({ theme }) => theme.spacing['0_75']};
+  &:last-child {
+    padding-bottom: 0;
+  }
+`;
+
+export const GroupLabel = styled.li`
+  opacity: 0.5;
+  padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing['1_5']}`};
+  align-items: center;
+  justify-content: flex-start;
+  display: flex;
+  padding-left: ${({ theme }) => theme.spacing['0_25']};
+
+  img,
+  svg {
+    width: ${({ theme }) => theme.spacing[2]}!important;
+    height: ${({ theme }) => theme.spacing[2]}!important;
+    margin: 0 !important;
+    margin-bottom: 0 !important;
+    margin-right: ${({ theme }) => theme.spacing['1']}!important;
+    fill: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+export const LoadingContainer = styled.div``;