@onewelcome/react-lib-components 0.1.6-alpha → 0.1.9-alpha

package/src/Form/Select/Select.tsx

@@ -2,20 +2,22 @@ import classes from './Select.module.scss';
 
 import React, {
   ComponentPropsWithRef,
+  createRef,
   Fragment,
   ReactElement,
-  RefObject,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import { Input } from '../Input/Input';
+import { Input, Props as InputProps } from '../Input/Input';
 import { Icon, Icons } from '../../Icon/Icon';
 import { FormElement } from '../form.interfaces';
 import { useBodyClick } from '../../hooks/useBodyClick';
 import readyclasses from '../../readyclasses.module.scss';
 import { filterProps } from '../../util/helper';
 
+type PartialInputProps = Partial<InputProps>;
+
 export interface Props extends ComponentPropsWithRef<'select'>, FormElement {
   children: ReactElement[];
   name?: string;
@@ -23,10 +25,13 @@ export interface Props extends ComponentPropsWithRef<'select'>, FormElement {
   describedBy?: string;
   placeholder?: string;
   searchPlaceholder?: string;
+  searchInputProps?: PartialInputProps;
+  selectButtonProps?: ComponentPropsWithRef<'button'>;
   className?: string;
   value: string;
+  clearLabel?: string;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
-  onClear?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onClear?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 type Position = {
@@ -34,6 +39,9 @@ type Position = {
   bottom: 0 | 'initial';
 };
 
+/** Amount of items to be rendered before a search input is rendered */
+const renderSearchCondition = 10;
+
 export const Select = React.forwardRef<HTMLSelectElement, Props>(
   (
     {
@@ -44,9 +52,12 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
       placeholder,
       describedBy,
       searchPlaceholder = 'Search item',
+      searchInputProps,
+      selectButtonProps,
       className,
       error = false,
       value,
+      clearLabel = 'Clear selection',
       onChange,
       onClear,
       ...rest
@@ -61,8 +72,115 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
     const [optionsListMaxHeight, setOptionsListMaxHeight] = useState('none');
     const containerReference = useRef<HTMLDivElement>(null);
     const optionListReference = useRef<HTMLDivElement>(null);
+    const [isSearching, setIsSearching] = useState(false);
+    const [focusedSelectItem, setFocusedSelectItem] = useState(-1);
+    const [shouldClick, setShouldClick] =
+      useState(
+        false
+      ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the "click" listener in Option component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
+    const [childrenCount] = useState(React.Children.count(children));
+
+    const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
+    const searchInputRef = useRef<HTMLInputElement>(null);
+
+    const onArrowNavigation = (event: React.KeyboardEvent) => {
+      const codesToPreventDefault = [
+        'ArrowDown',
+        'ArrowUp',
+        'ArrowLeft',
+        'ArrowRight',
+        'Space',
+        'Escape',
+        'End',
+        'Home',
+      ];
+
+      const codesToPreventDefaultWhenSearching = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+
+      /** If the select is expanded, we also want to control the Tab key */
+      if (expanded) {
+        codesToPreventDefault.push('Tab');
+      }
+
+      /** We will handle the way certain key strokes affect the Select, unless we're searching */
+      if (codesToPreventDefault.includes(event.code) && !isSearching) {
+        event.preventDefault();
+      }
+
+      if (isSearching && codesToPreventDefaultWhenSearching.includes(event.code)) {
+        event.preventDefault();
+      }
+
+      if (isSearching) {
+        switch (event.code) {
+          case 'ArrowDown':
+          case 'Enter':
+            setIsSearching(false);
+            setFocusedSelectItem(0);
+            return;
+          case 'ArrowUp':
+            setIsSearching(false);
+            setFocusedSelectItem(childrenCount - 1);
+            return;
+          case 'Escape':
+          case 'Tab':
+            setIsSearching(false);
+            setExpanded(false);
+            containerReference.current &&
+              containerReference.current.querySelector('button')!.focus();
+        }
+      } else {
+        switch (event.code) {
+          case 'ArrowDown':
+            if (!expanded) {
+              setExpanded(true);
+              return;
+            }
+            setFocusedSelectItem((prevState) => {
+              return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+            });
+            return;
+          case 'ArrowUp':
+            setFocusedSelectItem((prevState) => {
+              return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+            });
+            return;
+          case 'Space':
+            if (!expanded) {
+              setExpanded(true);
+              return;
+            }
+
+            setShouldClick(true);
+            setExpanded(false);
+            containerReference.current &&
+              containerReference.current.querySelector('button')!.focus();
+            return;
+          case 'Tab':
+            if (childrenCount >= renderSearchCondition && expanded) {
+              setIsSearching(true);
+              searchInputRef.current && searchInputRef.current.focus();
+              return;
+            }
+            setExpanded(false);
 
-    const nativeSelect = useRef<HTMLSelectElement>(null);
+            return;
+          case 'Escape':
+            if (expanded) {
+              setExpanded(false);
+              containerReference.current &&
+                containerReference.current.querySelector('button')!.focus();
+            }
+            return;
+          case 'End':
+            setFocusedSelectItem(childrenCount - 1);
+            return;
+          case 'Home':
+            setFocusedSelectItem(0);
+            return;
+        }
+      }
+    };
 
     const syncDisplayValue = (val: string) => {
       React.Children.forEach(children, (child) => {
@@ -121,39 +239,65 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
       setOpacity(100);
     };
 
-    const onOptionChangeHandler = (event: React.MouseEvent<HTMLLIElement>) => {
-      // We need to set value and the fire change event. If a custom ref has been given we pass that value, otherwise we use the ref we've created ourselves when the component was instantiated.
-      if (nativeSelect.current) {
-        nativeSelect.current.value = event.currentTarget.dataset.value!;
+    const onOptionChangeHandler = (optionRef: React.RefObject<HTMLLIElement>) => {
+      if (nativeSelect.current && optionRef.current) {
+        nativeSelect.current.value = optionRef.current.getAttribute('data-value')!;
         nativeSelect.current.dispatchEvent(new Event('change', { bubbles: true }));
-      } else if (ref) {
-        (ref as RefObject<HTMLSelectElement>).current!.value = event.currentTarget.dataset.value!;
-        (ref as RefObject<HTMLSelectElement>).current!.dispatchEvent(
-          new Event('change', { bubbles: true })
-        );
       }
+
       setExpanded(false);
+
+      containerReference.current && containerReference.current.querySelector('button')!.focus();
     };
 
     /**
-     * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected at all times and if a filter is active.
+     * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.
      * The `children` prop can be either a single object (1 child) or an array of multiple children.
      */
-    const renderOptions = () =>
-      React.Children.map(children, (child) =>
-        React.cloneElement(child, {
-          onOptionSelect: onOptionChangeHandler,
-          selected: child.props.value === value,
-          filter: filter,
-        })
-      );
+    const renderOptions = () => {
+      if (isSearching || filter !== '') {
+        const filteredChildren = React.Children.toArray(children).filter(
+          (child) =>
+            (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !==
+            null
+        );
+
+        return _internalRenderChildren(filteredChildren as ReactElement[]);
+      }
+
+      return _internalRenderChildren(children);
+
+      function _internalRenderChildren(internalChildren: ReactElement[]) {
+        return React.Children.map(internalChildren, (child, index) => {
+          return React.cloneElement(child, {
+            onFocusChange: (childIndex: number) => setFocusedSelectItem(childIndex),
+            onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {
+              onOptionChangeHandler(optionRef);
+              setShouldClick(false);
+            },
+            isSelected: child.props.value === value,
+            isSearching: isSearching,
+            selectOpened: expanded,
+            childIndex: index,
+            hasFocus: focusedSelectItem === index,
+            shouldClick: shouldClick,
+          });
+        });
+      }
+    };
 
     const renderSearch = () => (
       <Input
+        {...searchInputProps}
         autoFocus
+        ref={searchInputRef}
+        onFocus={() => setIsSearching(true)}
+        onBlur={() => setIsSearching(false)}
         onChange={filterResults}
         className={classes['select-search']}
-        wrapperProps={{ className: classes['select-search-wrapper'] }}
+        wrapperProps={{
+          className: `${classes['select-search-wrapper']} ${searchInputProps?.wrapperProps?.className}`,
+        }}
         type="text"
         name="search-option"
         placeholder={searchPlaceholder}
@@ -171,16 +315,29 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
 
       if (value?.length !== 0 && onClear) {
         return (
-          <Icon
-            tag="div"
+          <div
+            aria-hidden={false}
+            role="button"
+            tabIndex={0}
             data-clear
-            icon={Icons.TimesThin}
             onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
               e.preventDefault();
               e.stopPropagation();
               onClear(e);
             }}
-          />
+            onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+              if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault();
+                e.stopPropagation();
+                onClear(e);
+                containerReference.current &&
+                  containerReference.current.querySelector('button')!.focus();
+              }
+            }}
+          >
+            <span className={readyclasses['sr-only']}>{clearLabel}</span>
+            <Icon tag="span" icon={Icons.TimesThin} />
+          </div>
         );
       }
       return null;
@@ -221,7 +378,7 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
           {...filterProps(rest, /^data-/, false)}
           tabIndex={-1}
           aria-hidden="true"
-          ref={ref || nativeSelect}
+          ref={nativeSelect}
           name={name}
           onChange={nativeOnChangeHandler}
           className={readyclasses['sr-only']}
@@ -234,12 +391,16 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
         <div
           {...filterProps(rest, /^data-/)}
           ref={containerReference}
+          onKeyDown={onArrowNavigation}
           className={`custom-select ${classes.select} ${additionalClasses.join(' ')} ${
             className ?? ''
           }`}
         >
           <button
-            onClick={() => setExpanded(!expanded)}
+            {...selectButtonProps}
+            onClick={() => {
+              setExpanded(!expanded);
+            }}
             type="button"
             name={name}
             disabled={disabled}
@@ -249,12 +410,13 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
             aria-haspopup="listbox"
             aria-labelledby={labeledBy}
             aria-describedby={describedBy}
+            className={classes['custom-select']}
           >
             <div data-display className={classes['selected']}>
               {!value && placeholder && (
                 <span className={classes['placeholder']}>{placeholder}</span>
               )}
-              {value?.length > 0 && <span>{display}</span>}
+              {value?.length > 0 && <span data-display-inner>{display}</span>}
             </div>
             <div className={classes['status']}>
               {statusIcon()}
@@ -271,10 +433,8 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
               ...listPosition,
             }}
           >
-            {Array.isArray(children) && children.length > 10 && renderSearch()}
-            <ul role="listbox" tabIndex={-1}>
-              {renderOptions()}
-            </ul>
+            {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
+            <ul role="listbox">{renderOptions()}</ul>
           </div>
         </div>
       </Fragment>

package/src/Form/Toggle/Toggle.module.scss

@@ -8,6 +8,7 @@ $borderRadius: 2.5rem;
 
 .toggle {
   width: 2rem;
+  min-width: 2rem;
   height: 1.25rem;
   background-color: var(--default);
   border-radius: $borderRadius;

package/src/Form/Toggle/Toggle.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithRef } from 'react';
-import { Checkbox, CheckboxProps } from '../Checkbox/Checkbox';
+import { Checkbox, Props as CheckboxProps } from '../Checkbox/Checkbox';
 import classes from './Toggle.module.scss';
 
 export interface Props

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.test.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { CheckboxWrapper, Props } from './CheckboxWrapper';
-import { Checkbox, CheckboxProps } from '../../Checkbox/Checkbox';
+import { Checkbox, Props as CheckboxProps } from '../../Checkbox/Checkbox';
 import { render } from '@testing-library/react';
 
 const defaultParentParams: CheckboxProps = {

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -5,6 +5,7 @@ import { Option } from '../../Select/Option';
 import userEvent from '@testing-library/user-event';
 
 const onChangeHandler = jest.fn();
+const onClearHandler = jest.fn();
 
 const defaultParams: Props = {
   children: [
@@ -29,6 +30,7 @@ const defaultParams: Props = {
   error: false,
   value: 'option1',
   onChange: onChangeHandler,
+  onClear: onClearHandler,
 };
 
 const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -117,6 +119,32 @@ describe('SelectWrapper & Select have the right attributes', () => {
     expect(helpertext).toHaveTextContent('helpertext');
   });
 
+  it('Passes the proper helperProps class', () => {
+    const { getByTestId } = createSelectWrapper((defaultParams) => ({
+      ...defaultParams,
+      helperProps: { ...defaultParams.helperProps, className: 'example-helper-classname' },
+    }));
+
+    const helpertext = getByTestId('helpertext');
+
+    expect(helpertext.parentElement).toHaveClass('example-helper-classname');
+  });
+
+  it('Passes the proper selectProps class', () => {
+    const { getByTestId } = createSelectWrapper((defaultParams) => ({
+      ...defaultParams,
+      selectProps: {
+        ...defaultParams.selectProps,
+        'data-testid': 'select-element',
+        className: 'example-select-classname',
+      },
+    }));
+
+    const select = getByTestId('select-element');
+
+    expect(select).toHaveClass('example-select-classname');
+  });
+
   it('SelectWrapper has the right errormessage', async () => {
     const { findByText, select } = createSelectWrapper((defaultParams) => ({
       ...defaultParams,
@@ -140,4 +168,20 @@ describe('SelectWrapper & Select have the right attributes', () => {
 
     expect(onChangeHandler).toHaveBeenCalled();
   });
+
+  it('Fires the onClear event', async () => {
+    const { select, findByText } = createSelectWrapper();
+
+    userEvent.click(select as Element);
+
+    const option3 = await findByText('Option 3');
+
+    userEvent.click(option3 as Element);
+
+    const clearButton = select!.querySelector('[data-clear]')!;
+
+    userEvent.click(clearButton);
+
+    expect(onClearHandler).toHaveBeenCalled();
+  });
 });

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -15,7 +15,7 @@ export interface Props
   error?: boolean;
   selectProps?: PartialSelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-  onClear?: () => void;
+  onClear?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
@@ -56,7 +56,9 @@ export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
           error={error}
           describedBy={error ? errorId : helperId}
           onChange={onChange}
-          onClear={onClear}
+          onClear={(e) => {
+            onClear && onClear(e);
+          }}
           placeholder={placeholder}
           className={`${floatingLabelActive ? classes['floating-label-active'] : ''} ${
             selectProps?.className ?? ''

package/src/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -3,6 +3,7 @@
 }
 
 .floating-label {
+  font-family: var(--font-family);
   font-size: 1rem;
   position: absolute;
   z-index: 1;

package/src/Icon/Icon.module.scss

@@ -280,3 +280,7 @@
   content: '\e93e';
   @include fontProperties();
 }
+.icon-table-search:before {
+  content: '\e93f';
+  @include fontProperties();
+}

package/src/Icon/Icon.tsx

@@ -53,6 +53,7 @@ export enum Icons {
   Square = 'square',
   Star = 'star',
   StarAlt = 'star-alt',
+  TableSearch = 'table-search',
   Times = 'times',
   TimesCircle = 'times-circle',
   TimesCircleAlt = 'times-circle-alt',

package/src/Link/Link.module.scss

@@ -1,3 +1,5 @@
+@import '../mixins.module.scss';
+
 .link {
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -44,3 +46,21 @@
     }
   }
 }
+
+.button {
+  @include buttonBase('link');
+
+  text-decoration: none;
+
+  &.fill {
+    @include button('fill', 'link');
+  }
+
+  &.outline {
+    @include button('outline', 'link');
+  }
+
+  &.text {
+    @include button('text', 'link');
+  }
+}

package/src/Link/Link.test.tsx

@@ -99,6 +99,39 @@ describe('Link should render', () => {
 
     expect(link).toHaveClass('classname');
   });
+
+  it('should render as a filled button ', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      display: 'button',
+      buttonVariant: 'fill',
+    }));
+
+    expect(link).toHaveClass('button');
+    expect(link).toHaveClass('fill');
+  });
+
+  it('should render as a text button ', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      display: 'button',
+      buttonVariant: 'text',
+    }));
+
+    expect(link).toHaveClass('button');
+    expect(link).toHaveClass('text');
+  });
+
+  it('should render as an outline button ', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      display: 'button',
+      buttonVariant: 'outline',
+    }));
+
+    expect(link).toHaveClass('button');
+    expect(link).toHaveClass('outline');
+  });
 });
 
 describe('ref should work', () => {

package/src/Link/Link.tsx

@@ -7,11 +7,13 @@ import React, {
 import classes from './Link.module.scss';
 import { LinkProps } from './types';
 
-type AnchorType = 'external' | 'internal' | 'download';
+export type AnchorType = 'external' | 'internal' | 'download';
 
 export interface Props extends ComponentPropsWithRef<'a'> {
   children?: ReactNode;
   color?: 'primary' | 'secondary' | 'tertiary';
+  display?: 'link' | 'button';
+  buttonVariant?: 'outline' | 'text' | 'fill';
   type?: AnchorType;
   to: string;
   disabled?: boolean;
@@ -27,6 +29,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       to,
       color = 'primary',
       type = 'internal',
+      display = 'link',
+      buttonVariant = 'fill',
       component,
       ...rest
     }: Props,
@@ -44,7 +48,9 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       return '';
     };
 
-    const classNames = [classes['link'], classes[color]];
+    const classNames = [classes[color]];
+    display === 'link' && classNames.push(classes['link']);
+    display === 'button' && classNames.push(classes['button'], classes[buttonVariant]);
     disabled && classNames.push(classes['disabled']);
     className && classNames.push(className);
 

package/src/Notifications/BaseModal/BaseModal.module.scss

@@ -46,7 +46,7 @@ $marginTop: 3.125rem;
   flex-direction: column;
 }
 
-@media only screen and (min-width: 50rem) {
+@media only screen and (min-width: 50em) {
   .container {
     margin-top: $marginTop;
     width: 50rem;