polpo 0.1.0 → 0.1.2

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

@@ -1,15 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 
-import { InfinityScroll } from '../../infinity-scroll';
-import { Modal } from '../../modals';
-import { Typography } from '../../typography';
+import { Menu } from '../../modals';
 
-import { SelectOption } from './select-option';
-import { OptionsHeaderStyle, OptionsStyle } from './select.style';
+import { OptionsHeaderStyle, OptionsMenuStyle } from './select.style';
 import { OptionsProps, SelectItem } from './select.types';
 
-import { useEventListener, useMediaQuery } from '@polpo/hooks';
+import { useClassNames, useEventListener, useMediaQuery, useResizeObserver } from '@polpo/hooks';
 
 export const Options = <T extends SelectItem>({
   onSearchQuery,
@@ -21,17 +18,19 @@ export const Options = <T extends SelectItem>({
   selectOption,
   unselectOption,
   isOpen,
-  style,
   options,
   loadMore = () => null,
   isLoading = false,
   hasNextPage = false,
-  modalRef,
+  containerRef,
   Component,
-  variant,
+  onClose,
+  emptyMessage = 'No options to select',
+  maxHeight = 400,
 }: OptionsProps<T>) => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(`(min-width: ${theme.constants.breakpoints.mobileL})`);
+  const modalContainerRef = useRef<HTMLElement>(null);
+  const isMobile = useMediaQuery(`(max-width: ${theme.constants.breakpoints.mobileL})`);
   const [internalSearchQuery, setInternalSearchQuery] = useState('');
   const searchInputRef = useRef<HTMLInputElement>(null);
 
@@ -70,71 +69,124 @@ export const Options = <T extends SelectItem>({
       if (searchInputRef.current) {
         searchInputRef.current.focus();
       } else {
-        modalRef.current?.focus();
+        modalContainerRef.current?.focus();
       }
     }
-  }, [isOpen, modalRef]);
+  }, [isOpen, modalContainerRef]);
+
+  const optionIsSelected = useCallback(
+    (option: T) => !!value && value !== '' && compareValueOrValuesAreEqual(option, value),
+    [compareValueOrValuesAreEqual, value],
+  );
+
+  const handleKeyDown = useCallback(
+    (option: T) => (e: React.KeyboardEvent) => {
+      if (['Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+
+        const selected = optionIsSelected(option);
+
+        if (selected && multiselect) {
+          unselectOption(option);
+        } else {
+          selectOption(option);
+        }
+      }
+    },
+    [multiselect, selectOption, optionIsSelected, unselectOption],
+  );
 
   const renderInternalOption = useCallback(
-    (option: T, key: number) => (
-      <SelectOption
-        key={key}
-        id={`${key}`}
-        selected={!!value && value !== '' && compareValueOrValuesAreEqual(option, value)}
-        data={option}
-        multiselect={multiselect}
-        unselectOption={unselectOption}
-        selectOption={selectOption}
-        Component={Component}
-        variant={variant}
-      />
-    ),
-    [value, compareValueOrValuesAreEqual, multiselect, unselectOption, selectOption, Component, variant],
+    (option: T, key: number) => {
+      const selected = optionIsSelected(option);
+
+      return (
+        <Menu.Option
+          key={key}
+          id={`${key}`}
+          label={<Component data={option} isSelected={selected} multiselect={multiselect} />}
+          onClick={(selected: boolean) => {
+            if (multiselect) {
+              if (selected) selectOption(option);
+              else unselectOption(option);
+            } else {
+              selectOption(option);
+            }
+          }}
+          onKeyDown={handleKeyDown(option)}
+          asCheckbox={multiselect}
+          selected={selected}
+        />
+      );
+    },
+    [optionIsSelected, Component, multiselect, handleKeyDown, selectOption, unselectOption],
   );
 
+  const [height, setHeight] = useState<string>('400px');
+
+  const getHeight = useCallback(() => {
+    const containerBottom = containerRef.current?.getBoundingClientRect().bottom ?? 0;
+
+    const height = Math.min(window.innerHeight - containerBottom - 20, maxHeight);
+
+    setHeight(`${Math.round(height)}px`);
+  }, [containerRef, maxHeight]);
+
+  useResizeObserver(containerRef, getHeight);
+  useEventListener('resize', getHeight);
+
+  const menuClassName = useClassNames({
+    'search-input': Boolean(onSearchQuery),
+  });
+
   return (
-    <Modal
-      isOpen={isOpen}
+    <OptionsMenuStyle
       id='form-select'
-      backdrop={isMobile ? 'transparent' : 'blur'}
-      opacity={isMobile ? 0 : 0.8}
-      zIndex={150}
+      isOpen={isOpen}
+      onClose={onClose}
+      backdrop={isMobile ? 'blur' : 'opaque'}
+      opacity={isMobile ? 0.8 : 0.4}
+      position={isMobile ? 'center' : 'bottom'}
+      offset={5}
+      transitionDuration={200}
+      containerRef={isMobile ? undefined : containerRef}
+      className={menuClassName}
+      style={
+        isMobile
+          ? {
+              maxHeight: window.innerHeight - 100,
+              width: window.innerWidth - 100,
+            }
+          : {
+              maxHeight: height,
+              minHeight: '200px',
+              width: containerRef.current?.offsetWidth ?? 'auto',
+            }
+      }
+      rootStyle={isMobile ? {} : {}}
     >
-      <OptionsStyle ref={modalRef} style={{ ...style, zIndex: 150 }} tabIndex={-1}>
-        {onSearchQuery && (
-          <OptionsHeaderStyle>
-            <input
-              name='query'
-              className='input-search'
-              value={searchQueryValue ?? internalSearchQuery}
-              onChange={handleSearchQuery}
-              placeholder={searchQueryPlaceholder}
-              onClick={e => e.stopPropagation()}
-              ref={searchInputRef}
-              autoFocus
-            />
-          </OptionsHeaderStyle>
-        )}
-        <section className='options-list-container' tabIndex={-1}>
-          <ul className='options-list' role='listbox'>
-            {options.length === 0 ? (
-              <li className='option option-empty' tabIndex={-1}>
-                <Typography noPadding variant='label'>
-                  No options to select
-                </Typography>
-              </li>
-            ) : (
-              <InfinityScroll
-                isLoading={isLoading}
-                hasNextPage={hasNextPage}
-                loadMore={loadMore}
-                data={options}
-                renderItem={renderInternalOption}
-              />
-            )}
-          </ul>
-        </section>
-      </OptionsStyle>
-    </Modal>
+      {onSearchQuery && (
+        <OptionsHeaderStyle>
+          <input
+            name='query'
+            className='input-search'
+            value={searchQueryValue ?? internalSearchQuery}
+            onChange={handleSearchQuery}
+            placeholder={searchQueryPlaceholder}
+            onClick={e => e.stopPropagation()}
+            ref={searchInputRef}
+            autoFocus
+          />
+        </OptionsHeaderStyle>
+      )}
+      <Menu.OptionsGroup
+        isLoading={isLoading}
+        hasNextPage={hasNextPage}
+        loadMore={loadMore}
+        data={options}
+        renderItem={renderInternalOption}
+        emptyMessage={emptyMessage}
+      />
+    </OptionsMenuStyle>
   );
 };

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

@@ -7,7 +7,7 @@ import { Select } from './select';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof Select> = {
+const meta: Meta<typeof Select<string>> = {
   title: 'Form/Select',
   component: Select,
   argTypes: {
@@ -25,65 +25,126 @@ const meta: Meta<typeof Select> = {
     maxOptions: { control: { type: 'number' } },
     showClearOption: { control: 'boolean' },
     multiselect: { control: false },
-    optionVariant: {
-      control: 'select',
-      options: [undefined, 'checkbox', 'icon', 'default'],
-      if: { arg: 'multiselect' },
-    },
   },
   args: {
     label: 'Select',
     searchQueryPlaceholder: 'Search',
     ...FieldSharedArgs,
-    optionVariant: undefined,
+    placeholder: 'Select an option',
+    options: [
+      'Leda Pinna',
+      'Antonio Sansone',
+      'Orlando Simeone',
+      'Giorgio Villa',
+      'Virgilio Paoli',
+      'Nicola Loi',
+      'Giordano Manzo',
+      'Emilio Galletti',
+      'Moira Galimberti',
+      'Fedele Spina',
+      'Débora Buzzi',
+      'Ferrari Sacco',
+      'Rosalba Lodi',
+      'Bianca Paris',
+      'Salvatrice di Paola',
+      'Antonietta Mancuso',
+      'Corradina Battistini',
+      'Elisabeth Annunziata',
+      'Federica Vinciguerra',
+      'Ennio Spinelli',
+      'Susanna Franzoni',
+      'Ottavio di Bella',
+      'Melania Genovese',
+      'Marzio Tomasi',
+      'Anselmo Bettoni',
+      'Robert Boni',
+      'Leonardo Guido',
+      'Ermelinda Biagini',
+      'Aurélio Falcone',
+      'Hubert Paolini',
+      'Imelda Sessa',
+      'Santino Viviani',
+      'Peter Franchini',
+      'Guglielmo Lorenzon',
+      'Martha Casiraghi',
+      'Stefano Cuomo',
+      'Valéria di Giovanni',
+      'Cecília Ambrosio',
+      'Vincenzina Bernardini',
+      'Renato Marchi',
+      'Raffaello Guida',
+      'Gregório Battisti',
+      'Alberto Bruni',
+      'Giovannino Lepore',
+      'Ludovica Randazzo',
+      'Iris Merli',
+      'Alida Fois',
+      'Innocenzo Palazzo',
+      'Giacinto Vergani',
+      'Alessio Drago',
+    ],
+    renderOption: v => v,
   },
   decorators: [ContainerDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof Select<string>>;
+
+export const SingleValue: Story = {
+  args: {},
   render: args => {
     const [value, setValue] = useState<string | null>(null);
 
+    return <Select<string> {...args} multiselect={false} value={value} setValue={value => setValue(value)} />;
+  },
+};
+
+export const MultipleValues: Story = {
+  render: args => {
+    const [value, setValue] = useState<Array<string>>([]);
+
+    return <Select<string> {...args} multiselect={true} value={value} setValue={value => setValue(value)} />;
+  },
+};
+
+export const SearchQuery: Story = {
+  render: ({ options, ...args }) => {
+    const [value, setValue] = useState<Array<string>>([]);
+    const [searchQueryValue, setSearchQueryValue] = useState<string>('');
+
     return (
-      <Select
+      <Select<string>
         {...args}
-        options={[
-          'A',
-          'B',
-          'C',
-          'D',
-          'E',
-          'F',
-          'H',
-          'I',
-          'J',
-          'K',
-          'L',
-          'M',
-          'N',
-          'O',
-          'P',
-          'Q',
-          'R',
-          'S',
-          'T',
-          'U',
-          'V',
-          'W',
-          'X',
-          'Y',
-          'Z',
-        ]}
+        options={options.filter(option => option.toLowerCase().includes(searchQueryValue.toLowerCase()))}
+        multiselect={true}
         value={value}
-        renderOption={v => v}
-        optionVariant={undefined}
-        multiselect={false}
         setValue={value => setValue(value)}
+        searchQueryPlaceholder='Search option'
+        searchQueryValue={searchQueryValue}
+        onSearchQuery={setSearchQueryValue}
       />
     );
   },
 };
 
-export default meta;
-type Story = StoryObj<typeof Select>;
+export const SearchQueryWithClearOption: Story = {
+  render: ({ options, ...args }) => {
+    const [value, setValue] = useState<Array<string>>([]);
+    const [searchQueryValue, setSearchQueryValue] = useState<string>('');
 
-export const Default: Story = {
-  args: {},
+    return (
+      <Select<string>
+        {...args}
+        options={options.filter(option => option.toLowerCase().includes(searchQueryValue.toLowerCase()))}
+        multiselect={true}
+        value={value}
+        showClearOption={true}
+        setValue={value => setValue(value)}
+        searchQueryPlaceholder='Search option'
+        searchQueryValue={searchQueryValue}
+        onSearchQuery={setSearchQueryValue}
+      />
+    );
+  },
 };

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

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { Menu } from '@polpo/ui';
+
 export const SelectStyle = styled.section`
   cursor: pointer;
 
@@ -57,106 +59,22 @@ export const SelectStyle = styled.section`
   }
 `;
 
-export const OptionsStyle = styled.section`
-  position: fixed;
-  border-radius: 4px;
-  border: 1px solid ${props => props.theme.colors.primary.main};
-  box-shadow: 0 3px 7px 0 rgba(145, 145, 145, 0.13);
-  overflow: auto;
-  background: ${props => props.theme.colors.background.main};
-  color: ${props => props.theme.colors.text.main};
-  display: grid;
-  gap: 5px;
-  align-content: start;
-  outline: 0;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 80vw;
-  max-height: 80dvh;
-  min-width: fit-content;
-
-  .options-list-container {
-    height: 100%;
-    overflow: auto;
-    outline: 0;
-  }
+export const OptionsMenuStyle = styled(Menu)`
+  overflow-y: auto;
 
-  .options-list {
-    list-style: none;
+  &.search-input {
     display: grid;
-    margin: 0;
-    padding: 0;
-    outline: 0;
-  }
-
-  .options-selected {
-    border-bottom: 1px solid #9e9e9e;
-    padding-bottom: 5px;
-  }
-
-  .option-empty {
-    color: #919191;
-  }
-`;
-
-export const OptionStyle = styled.li`
-  padding: 0.5em 1em;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1em;
-  align-items: center;
-  cursor: pointer;
-  outline: 0;
-
-  &.multiselect-icon {
-    grid-template-columns: 1fr auto;
-  }
-
-  &.multiselect-checkbox {
-    grid-template-columns: auto 1fr;
-  }
-
-  .option-content {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  &:hover {
-    background: ${props => props.theme.colors.text.main}11;
-  }
-
-  &:focus {
-    background: ${props => props.theme.colors.text.main}22;
-  }
-
-  &.selected-option,
-  &[aria-selected='true'] {
-    background: ${props => props.theme.colors.primary.main}33;
-
-    &:hover {
-      background: ${props => props.theme.colors.primary.main}22;
-    }
-
-    &:focus {
-      background: ${props => props.theme.colors.primary.main}11;
-    }
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
   }
 `;
 
 export const OptionsHeaderStyle = styled.section`
-  display: grid;
-  gap: 5px;
-  padding-bottom: 5px;
+  margin: 5px;
 
   .input-search {
-    padding: 8px 6px;
-    border: 1px solid #b4b4b4;
+    padding: 0.8em 1em;
+    border: 1px solid ${props => props.theme.colors.border.main};
     font-size: 0.8em;
     width: 100%;
     border-radius: 4px;

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

@@ -1,5 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
-import { useTheme } from 'styled-components';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { Icon } from '../../icon';
 import { Typography } from '../../typography';
@@ -15,23 +14,12 @@ import {
   MultiValue,
   OptionComponentProps,
   SelectItem,
-  SelectOptionVariant,
   SelectValue,
   SingleSelectProps,
   SingleValue,
   UnControlledSelectProps,
 } from './select.types';
 
-import { useMediaQuery, useModalInContainer } from '@polpo/hooks';
-
-/*
- *type SelectContextState<T extends SelectItem = unknown> = {
- *value: T;
- *};
- *
- *const SelectContext = createContext<SelectContextState | null>(null);
- */
-
 export const Select = <T extends SelectItem>({
   // Select props
   options,
@@ -45,7 +33,6 @@ export const Select = <T extends SelectItem>({
   hasNextPage,
   multiselect,
   maxOptions,
-  optionVariant = SelectOptionVariant.DEFAULT,
   // Shared props
   name,
   value,
@@ -74,19 +61,18 @@ export const Select = <T extends SelectItem>({
   ...fieldProps
 }: UnControlledSelectProps<T>) => {
   const id = useMemo(() => crypto.randomUUID(), []);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(`(min-width: ${theme.constants.breakpoints.mobileL})`);
-  const { modalRef, isVisible, setIsVisible, modalStyle, containerRef } = useModalInContainer({
-    position: 'bottom',
-    distancePercentage: 50,
-    offset: 5,
-  });
+  const containerRef = useRef<HTMLElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
 
   const openSelect = useCallback(
     (open: boolean) => {
-      setIsVisible(open && !disabled);
+      if (open && !disabled) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
     },
-    [disabled, setIsVisible],
+    [disabled],
   );
 
   const compareValuesIsEqual = useCallback(
@@ -167,10 +153,10 @@ export const Select = <T extends SelectItem>({
         setValue(filteredValues.length === 0 ? [] : filteredValues);
       } else {
         setValue(null);
-        setIsVisible(false);
+        setIsOpen(false);
       }
     },
-    [compareValuesIsEqual, multiselect, setIsVisible, setValue, value],
+    [compareValuesIsEqual, multiselect, setValue, value],
   );
 
   const selectOption = useCallback(
@@ -183,10 +169,10 @@ export const Select = <T extends SelectItem>({
         setValue([...(value as Array<T>), selectedOption] as MultiValue<T>);
       } else {
         setValue(selectedOption as SingleValue<T>);
-        setIsVisible(false);
+        setIsOpen(false);
       }
     },
-    [maxOptions, multiselect, setIsVisible, setValue, value],
+    [maxOptions, multiselect, setValue, value],
   );
 
   const clearOption = useCallback(
@@ -214,7 +200,7 @@ export const Select = <T extends SelectItem>({
     <Field
       id={id}
       error={error}
-      isFocus={isVisible}
+      isFocus={isOpen}
       onClickLeftIcon={() => openSelect(true)}
       onClickRightIcon={() => openSelect(true)}
       ref={containerRef}
@@ -229,7 +215,7 @@ export const Select = <T extends SelectItem>({
             type='button'
             className={`input-button ${(Array.isArray(value) ? value.length > 0 : value) ? '' : 'placeholder'}`}
             aria-haspopup='listbox'
-            aria-expanded={isVisible}
+            aria-expanded={isOpen}
             onFocus={e => {
               openSelect(true);
               onFocus && onFocus(e);
@@ -246,11 +232,12 @@ export const Select = <T extends SelectItem>({
               <Icon name='cross' />
             </section>
           )}
-          <Icon name={isVisible ? 'caret-up' : 'caret-down'} />
+          <Icon name={isOpen ? 'caret-up' : 'caret-down'} />
         </section>
         <Options
-          modalRef={modalRef}
-          isOpen={isVisible}
+          containerRef={containerRef}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
           value={value}
           compareValueOrValuesAreEqual={compareValueOrValuesAreEqual}
           Component={OptionComponent}
@@ -260,20 +247,10 @@ export const Select = <T extends SelectItem>({
           loadMore={loadMore}
           searchQueryValue={searchQueryValue}
           onSearchQuery={onSearchQuery}
-          style={
-            (isMobile && {
-              width: containerRef.current?.offsetWidth,
-              transform: 'none',
-              maxHeight: '250px',
-              ...modalStyle,
-            }) ||
-            {}
-          }
           searchQueryPlaceholder={searchQueryPlaceholder}
           options={options}
           selectOption={selectOption}
           unselectOption={unSelectOption}
-          variant={optionVariant}
         />
       </SelectStyle>
     </Field>