polpo 0.1.13 → 0.1.16

package/src/components/form/select/options.tsx

@@ -0,0 +1,165 @@
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import { useClassNames, useEventListener, useMediaQuery, useResizeObserver } from '../../../hooks';
+
+import { OptionsProps } from './select.types';
+
+type UseDynamicHeight = {
+  height: number;
+  minHeight: number;
+  containerRef: RefObject<HTMLElement | null>;
+  offset: number;
+  windowOffset: number;
+};
+
+const useDynamicHeight = ({
+  height,
+  minHeight: defaultMinHeight,
+  containerRef,
+  offset,
+  windowOffset,
+}: UseDynamicHeight) => {
+  const [h, setH] = useState<string | undefined>(undefined);
+
+  const getMaxHeight = useCallback(() => {
+    const containerBottom = containerRef.current?.getBoundingClientRect().bottom ?? 0;
+
+    const heightBottom = window.innerHeight - containerBottom - windowOffset - offset - 5;
+    const heightTop = window.innerHeight - windowOffset * 3;
+    const heightCalculated = heightBottom < defaultMinHeight ? heightTop : heightBottom;
+    const maxHeight = Math.min(heightCalculated, height);
+    const minHeight = Math.max(maxHeight, defaultMinHeight);
+
+    setH(`${Math.round(minHeight)}px`);
+  }, [containerRef, windowOffset, offset, defaultMinHeight, height]);
+
+  useEffect(() => {
+    getMaxHeight();
+  }, [getMaxHeight]);
+
+  useResizeObserver(containerRef, getMaxHeight);
+  useEventListener('resize', getMaxHeight);
+
+  return { h };
+};
+
+export const Options = ({
+  children,
+  searchQueryValue,
+  searchQueryPlaceholder = 'Search option',
+  searchQueryClassName = '',
+  searchQueryStyle = {},
+  onSearchQuery,
+  containerRef,
+  height = 300,
+}: OptionsProps) => {
+  const optionsGroupContainerRef = useRef<HTMLDivElement>(null);
+  const optionsGroupRef = useRef<HTMLUListElement>(null);
+  const [internalSearchQuery, setInternalSearchQuery] = useState('');
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const isMobile = useMediaQuery('(max-width: 480px)');
+
+  useEventListener('keydown', e => {
+    if (['ArrowDown', 'ArrowUp'].includes(e.code)) {
+      e.preventDefault();
+      const focusedItem = document.activeElement;
+      const isListItem = focusedItem?.tagName === 'LI';
+
+      if (isListItem) {
+        switch (e.code) {
+          case 'ArrowDown':
+            (focusedItem?.nextSibling as HTMLElement)?.focus();
+
+            break;
+          case 'ArrowUp':
+            (focusedItem?.previousElementSibling as HTMLElement)?.focus();
+
+            break;
+        }
+      }
+    }
+  });
+
+  const handleSearchQuery = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = e.target;
+
+      if (onSearchQuery) onSearchQuery(value);
+
+      setInternalSearchQuery(value);
+    },
+    [onSearchQuery],
+  );
+
+  useEffect(() => {
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, []);
+
+  const { h } = useDynamicHeight({
+    height,
+    minHeight: 150,
+    containerRef,
+    offset: 5,
+    windowOffset: 10,
+  });
+
+  const [shouldUseAuto, setShouldUseAuto] = useState(false);
+
+  const calculateHeight = useCallback(() => {
+    const optionsContainerHeight =
+      Math.round(optionsGroupContainerRef.current?.getBoundingClientRect().height ?? 0) + 2;
+    const optionsHeight = Math.round(optionsGroupRef.current?.scrollHeight ?? 0);
+
+    setShouldUseAuto(optionsContainerHeight >= optionsHeight);
+  }, []);
+
+  useEffect(calculateHeight, [calculateHeight]);
+  useResizeObserver(optionsGroupContainerRef, calculateHeight);
+  useResizeObserver(optionsGroupRef, calculateHeight);
+  useEventListener('resize', calculateHeight);
+
+  const selectOptionsHeader = useClassNames({
+    'select-options-header': true,
+    [searchQueryClassName]: Boolean(searchQueryClassName),
+  });
+
+  return (
+    <section
+      className={`select-options ${onSearchQuery ? 'with-search-query' : ''}`}
+      style={
+        isMobile
+          ? {
+              maxHeight: window.innerHeight - 100,
+              width: window.innerWidth - 100,
+            }
+          : {
+              height: shouldUseAuto ? 'auto' : h,
+              maxHeight: height,
+              width: containerRef.current?.offsetWidth ?? 'auto',
+            }
+      }
+    >
+      {onSearchQuery && (
+        <section className={selectOptionsHeader} style={searchQueryStyle}>
+          <input
+            name='query'
+            className='input-search'
+            value={searchQueryValue ?? internalSearchQuery}
+            onChange={handleSearchQuery}
+            placeholder={searchQueryPlaceholder}
+            onClick={e => e.stopPropagation()}
+            ref={searchInputRef}
+            autoFocus
+          />
+        </section>
+      )}
+      <section className='select-options-list-container' ref={optionsGroupContainerRef}>
+        <ul className='select-options-list' ref={optionsGroupRef}>
+          {children}
+        </ul>
+      </section>
+    </section>
+  );
+};

package/src/components/form/select/select.component.tsx

@@ -0,0 +1,317 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { ImCross } from 'react-icons/im';
+import { PiCaretDown } from 'react-icons/pi';
+
+import { useMediaQuery } from '../../../hooks';
+import { InfinityScroll } from '../../infinity-scroll';
+import { Menu } from '../../modals';
+import { Typography } from '../../typography';
+import { Controller } from '../controller';
+import { Field } from '../field';
+import { ControllerGeneratorProps } from '../form.types';
+
+import { Option } from './option';
+import { Options } from './options';
+import './select.styles.css';
+import {
+  ControllerGeneratorSelectProps,
+  MultiSelectProps,
+  MultiValue,
+  OptionComponentProps,
+  SelectItem,
+  SingleSelectProps,
+  SingleValue,
+  UnControlledSelectProps,
+  SelectContextValue,
+  ValueComponentProps,
+} from './select.types';
+
+const SelectContext = createContext<SelectContextValue<unknown> | null>(null);
+
+export const useSelectContext = <T extends SelectItem>(): SelectContextValue<T> => {
+  const context = useContext(SelectContext as React.Context<SelectContextValue<T> | null>);
+
+  if (!context) {
+    throw new Error('useSelectContext must be used within a Select component');
+  }
+
+  return context;
+};
+
+type OptionLabelProps = {
+  children: React.ReactNode;
+};
+
+const OptionLabel = ({ children }: OptionLabelProps) => {
+  const labelComponent = useMemo(() => {
+    if (typeof children === 'string') {
+      return (
+        <Typography noPadding variant='label' nowrap>
+          {children}
+        </Typography>
+      );
+    }
+
+    return children;
+  }, [children]);
+
+  return <Menu.GroupLabel>{labelComponent}</Menu.GroupLabel>;
+};
+
+const DefaultOption = <T extends SelectItem>({ value }: OptionComponentProps<T>) => {
+  return (
+    <Typography variant='label' nowrap>
+      {typeof value === 'string' || typeof value === 'number' ? value : JSON.stringify(value)}
+    </Typography>
+  );
+};
+
+const DefaultValue = <T extends SelectItem>({ value, multiselect }: ValueComponentProps<T>) => {
+  if (multiselect) {
+    return (
+      <Typography noPadding nowrap variant='label'>
+        {`${value.length} item${value.length === 1 ? '' : 's'} selected`}
+      </Typography>
+    );
+  }
+
+  if (value === null) {
+    return null;
+  }
+
+  return (
+    <Typography noPadding variant='label' nowrap>
+      {typeof value === 'string' || typeof value === 'number' ? value : JSON.stringify(value)}
+    </Typography>
+  );
+};
+
+export const Select = <T extends SelectItem>({
+  // Select props
+  options,
+  isEqualComparator,
+  searchQueryValue,
+  searchQueryPlaceholder,
+  onSearchQuery,
+  loadMore = () => null,
+  isLoading = false,
+  hasNextPage = false,
+  emptyMessage = 'No options to select',
+  multiselect,
+  optionComponent: OptionComponent = DefaultOption,
+  valueComponent: ValueComponent = DefaultValue,
+  maxOptions,
+  children,
+  // Shared props
+  name,
+  value,
+  setValue,
+  onBlur,
+  onFocus,
+  className = '',
+  style = {},
+  showClearOption = false,
+  height,
+  searchQueryStyle,
+  searchQueryClassName,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  autoFocus = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  readOnly = false,
+  disabled = false,
+  placeholder = '',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  autoComplete = 'off',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isDirty = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTouched = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  invalid = false,
+  error,
+  // Field props
+  ...fieldProps
+}: UnControlledSelectProps<T>) => {
+  const modalRef = useRef<HTMLElement>(null);
+  const isMobile = useMediaQuery('(max-width: 480px)');
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const containerRef = useRef<HTMLElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openSelect = useCallback(
+    (open: boolean) => {
+      setIsOpen(open && !disabled);
+    },
+    [disabled],
+  );
+
+  const clearOption = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      if (multiselect) {
+        setValue([]);
+      } else {
+        setValue(null);
+      }
+    },
+    [multiselect, setValue],
+  );
+
+  const valueNonEmpty = useMemo(() => {
+    if (multiselect) {
+      return value.length > 0;
+    } else {
+      return Boolean(value);
+    }
+  }, [multiselect, value]);
+
+  const renderedOptions = useMemo<React.ReactNode>(() => {
+    if (!children)
+      return options.map((value, key) => (
+        <Select.Option value={value} key={key}>
+          <OptionComponent value={value} />
+        </Select.Option>
+      ));
+
+    return children;
+  }, [OptionComponent, children, options]);
+
+  return (
+    <SelectContext.Provider
+      value={
+        {
+          selectedValue: value,
+          setValue,
+          multiselect: multiselect ?? false,
+          isEqualComparator,
+          maxOptions: maxOptions ?? null,
+          setIsOpen,
+        } as SelectContextValue<unknown>
+      }
+    >
+      <Field id={id} error={error} isFocus={isOpen} ref={containerRef} {...fieldProps}>
+        <section
+          id={name}
+          style={style}
+          onBlur={onBlur}
+          className={`select ${disabled ? 'disabled' : ''} ${className}`}
+        >
+          <section
+            id={id}
+            className={`select-container ${valueNonEmpty && showClearOption ? 'three-columns' : ''}`}
+            onClick={() => openSelect(true)}
+          >
+            <button
+              type='button'
+              className={`input-button ${(Array.isArray(value) ? value.length > 0 : value) ? '' : 'placeholder'}`}
+              aria-haspopup='listbox'
+              aria-expanded={isOpen}
+              onFocus={e => {
+                openSelect(true);
+
+                if (onFocus) onFocus(e);
+              }}
+            >
+              {valueNonEmpty ? (
+                <ValueComponent {...(multiselect ? { value, multiselect } : { value: value })} />
+              ) : (
+                <Typography variant='label' noPadding nowrap>
+                  {placeholder}
+                </Typography>
+              )}
+            </button>
+            {valueNonEmpty && showClearOption && (
+              <section className='icon-close' onClick={clearOption}>
+                <ImCross />
+              </section>
+            )}
+            <PiCaretDown className={`select-caret-icon ${isOpen && 'is-select-open'}`} />
+          </section>
+          <Menu
+            id='form-select'
+            isOpen={isOpen}
+            onClose={() => openSelect(false)}
+            backdrop={isMobile ? 'blur' : 'transparent'}
+            opacity={isMobile ? 0.8 : 0.4}
+            position={isMobile ? 'center' : 'bottom'}
+            offset={5}
+            modalRef={modalRef}
+            windowOffset={10}
+            transitionDuration={200}
+            containerRef={isMobile ? undefined : containerRef}
+            contentClassName='select-menu-content'
+            className='select-options-menu'
+          >
+            <Options
+              containerRef={containerRef}
+              onSearchQuery={onSearchQuery}
+              searchQueryValue={searchQueryValue}
+              searchQueryPlaceholder={searchQueryPlaceholder}
+              searchQueryClassName={searchQueryClassName}
+              searchQueryStyle={searchQueryStyle}
+              height={height}
+            >
+              <InfinityScroll
+                isLoading={isLoading}
+                hasNextPage={hasNextPage}
+                loadMore={loadMore}
+                emptyMessage={emptyMessage}
+              >
+                {renderedOptions}
+              </InfinityScroll>
+            </Options>
+          </Menu>
+        </section>
+      </Field>
+    </SelectContext.Provider>
+  );
+};
+
+const MultiSelectController = <T extends SelectItem>({
+  rules,
+  ...props
+}: ControllerGeneratorProps<MultiSelectProps<T>, MultiValue<T>>) => {
+  return (
+    <Controller<MultiSelectProps<T>, MultiValue<T>>
+      Component={Select}
+      defaultValue={[]}
+      inputProps={{
+        ...props,
+        multiselect: true,
+      }}
+      rules={rules}
+    />
+  );
+};
+
+const SingleSelectController = <T extends SelectItem>({
+  rules,
+  ...props
+}: ControllerGeneratorProps<SingleSelectProps<T>, SingleValue<T>>) => {
+  return (
+    <Controller<SingleSelectProps<T>, SingleValue<T>>
+      Component={Select}
+      defaultValue={null}
+      inputProps={{
+        ...props,
+        multiselect: false,
+      }}
+      rules={rules}
+    />
+  );
+};
+
+const SelectController = <T extends SelectItem>(props: ControllerGeneratorSelectProps<T>) => {
+  const { multiselect } = props;
+
+  if (multiselect) {
+    return <MultiSelectController<T> {...props} multiselect={true} />;
+  }
+
+  return <SingleSelectController<T> {...props} multiselect={false} />;
+};
+
+Select.Controller = SelectController;
+Select.Option = Option;
+Select.OptionLabel = OptionLabel;

package/src/components/form/select/select.styles.css

@@ -0,0 +1,115 @@
+@reference "polpo-tailwind-config/styles";
+
+.select {
+    cursor: pointer;
+
+    .icon-close {
+        display: grid;
+        place-content: center;
+        align-self: center;
+        border-radius: 100%;
+        cursor: pointer;
+        font-size: 0.6em;
+        padding: 0.5em;
+
+        &:hover {
+            background: hsl(from var(--color-foreground) h s l / 33%);
+        }
+    }
+
+    .select-container {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 0.5em;
+        align-items: center;
+        grid-auto-rows: auto;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+
+        &.three-columns {
+            grid-template-columns: 1fr auto auto;
+        }
+    }
+
+    .input-button {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: grid;
+        min-width: 0;
+        width: 100%;
+        border: 0;
+        margin: 0;
+        border-radius: 0;
+        background: transparent;
+        color: currentColor;
+        text-align: left;
+        -webkit-tap-highlight-color: transparent;
+        padding: 0;
+        grid-template-columns: 1fr auto;
+
+        &.placeholder {
+            color: #919191;
+        }
+    }
+
+    .select-caret-icon {
+        transition: transform 200ms ease;
+
+        &.is-select-open {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.select-options-menu {
+    .select-menu-content {
+        gap: 0;
+        display: block;
+        height: auto;
+        overflow: initial;
+    }
+}
+
+.select-options {
+    gap: 0;
+    display: grid;
+    grid-template-rows: 1fr;
+    height: 100%;
+    overflow: auto;
+
+    &.with-search-query {
+        grid-template-rows: auto 1fr;
+    }
+
+    .select-options-list-container {
+        height: 100%;
+        overflow: auto;
+    }
+
+    .select-options-list {
+        display: grid;
+        gap: 0.2em;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        align-content: start;
+    }
+}
+
+.select-options-header {
+    background: var(--color-background);
+    padding: 2px 5px;
+    border-bottom: 1px solid var(--color-border);
+
+    .input-search {
+        outline: none;
+        padding: 0.8em 5px;
+        @apply text-label;
+        width: 100%;
+    }
+}

package/src/components/form/select/select.types.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { InputFieldProps } from '../field';
+import { ControllerGeneratorProps, UnControlledComponentProps } from '../form.types';
+
+export type SelectItem = string | number | Record<string, unknown> | unknown;
+
+export type MultiValue<T extends SelectItem> = Array<T>;
+
+export type SingleValue<T extends SelectItem> = T | null;
+
+// SELECT CONTEXT
+
+export type SharedSelectContextValue<T extends SelectItem> = {
+  isEqualComparator?: (a: T, b: T) => boolean;
+  maxOptions: number | null;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export type MultiSelectContextValue<T extends SelectItem> = SharedSelectContextValue<T> & {
+  selectedValue: MultiValue<T>;
+  setValue: (value: MultiValue<T>) => void;
+  multiselect: true;
+};
+
+export type SingleSelectContextValue<T extends SelectItem> = SharedSelectContextValue<T> & {
+  selectedValue: SingleValue<T>;
+  setValue: (value: SingleValue<T>) => void;
+  multiselect: false;
+};
+
+export type SelectContextValue<T extends SelectItem> = SingleSelectContextValue<T> | MultiSelectContextValue<T>;
+
+// SELECT
+
+export type OptionComponentProps<T extends SelectItem> = {
+  value: T;
+};
+
+export type ValueComponentProps<T extends SelectItem> =
+  | {
+      value: MultiValue<T>;
+      multiselect: true;
+    }
+  | {
+      value: SingleValue<T>;
+      multiselect?: false;
+    };
+
+export type SharedSelectProps<T extends SelectItem> = InputFieldProps<{
+  options: Array<T>;
+  isEqualComparator?: (a: T, b: T) => boolean;
+  searchQueryValue?: string;
+  searchQueryPlaceholder?: string;
+  onSearchQuery?: (value: string) => void;
+  loadMore?: () => void;
+  isLoading?: boolean;
+  hasNextPage?: boolean;
+  emptyMessage?: string;
+  maxOptions?: number;
+  optionComponent?: React.FC<OptionComponentProps<T>>;
+  valueComponent?: React.FC<ValueComponentProps<T>>;
+  showClearOption?: boolean;
+  height?: number;
+  searchQueryClassName?: string;
+  searchQueryStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+}>;
+
+export type MultiSelectProps<T extends SelectItem> = SharedSelectProps<T> & {
+  multiselect: true;
+};
+
+export type SingleSelectProps<T extends SelectItem> = SharedSelectProps<T> & {
+  multiselect?: false;
+};
+
+export type UnControlledSelectProps<T extends SelectItem> =
+  | UnControlledComponentProps<MultiSelectProps<T>, MultiValue<T>>
+  | UnControlledComponentProps<SingleSelectProps<T>, SingleValue<T>>;
+
+export type ControllerGeneratorSelectProps<T extends SelectItem> =
+  | ControllerGeneratorProps<MultiSelectProps<T>, MultiValue<T>>
+  | ControllerGeneratorProps<SingleSelectProps<T>, SingleValue<T>>;
+
+// SELECT OPTIONS
+
+export type OptionsProps = {
+  onSearchQuery?: (value: string) => void;
+  searchQueryValue?: string;
+  searchQueryPlaceholder?: string;
+  searchQueryClassName?: string;
+  searchQueryStyle?: React.CSSProperties;
+  containerRef: React.RefObject<HTMLElement | null>;
+  height?: number;
+  children?: React.ReactNode;
+};

package/src/components/form/slider/index.ts

@@ -0,0 +1 @@
+export * from './slider.component';