@onewelcome/react-lib-components 0.1.1-alpha → 0.1.4-alpha

package/src/Form/Select/Select.tsx

@@ -1,10 +1,11 @@
 import classes from './Select.module.scss';
 
 import React, {
-  HTMLProps,
+  ComponentPropsWithRef,
+  Fragment,
   ReactElement,
+  RefObject,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -12,10 +13,10 @@ import { Input } from '../Input/Input';
 import { Icon, Icons } from '../../Icon/Icon';
 import { FormElement } from '../form.interfaces';
 import { useBodyClick } from '../../hooks/useBodyClick';
-import { Position } from '../../hooks/usePosition';
-import { useScroll } from '../../hooks/useScroll';
+import readyclasses from '../../readyclasses.module.scss';
+import { filterProps } from '../../util/helper';
 
-export interface Props extends FormElement<HTMLSelectElement> {
+export interface Props extends ComponentPropsWithRef<'select'>, FormElement {
   children: ReactElement[];
   name?: string;
   labeledBy?: string;
@@ -23,195 +24,260 @@ export interface Props extends FormElement<HTMLSelectElement> {
   placeholder?: string;
   searchPlaceholder?: string;
   className?: string;
-  value?: string;
+  value: string;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
   onClear?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-export const Select = ({
-  children,
-  name,
-  disabled = false,
-  labeledBy,
-  placeholder,
-  describedBy,
-  searchPlaceholder = 'Search item',
-  className,
-  error = false,
-  value = '',
-  onChange,
-  onClear,
-  ...rest
-}: Props) => {
-  const [expanded, setExpanded] = useState(false);
-  const [filter, setFilter] = useState('');
-  const [display, setDisplay] = useState('');
-  const [listPosition, setListPosition] = useState<Partial<Position>>({});
-  const containerReference = useRef<HTMLDivElement>(null);
-  const optionListReference = useRef<HTMLDivElement>(null);
-
-  useBodyClick(
-    (event: MouseEvent) => !(event.target as Element).closest('.custom-select') && expanded,
-    () => {
-      setExpanded(!expanded);
-    },
-    expanded
-  );
-
-  const rePositionList = () => {
-    if (!expanded || !optionListReference.current || !containerReference.current) {
-      return;
-    }
-    const windowHeight = window.innerHeight;
-    const containerTopWithListHeight =
-      containerReference.current.getBoundingClientRect().bottom -
-      containerReference.current.getBoundingClientRect().height +
-      optionListReference.current.getBoundingClientRect().height;
-
-    if (containerTopWithListHeight > windowHeight) {
-      setListPosition({ top: 'initial', bottom: 0 });
-    } else {
-      setListPosition({ top: 0, bottom: 'initial' });
-    }
-  };
-
-  useScroll(rePositionList, [expanded]);
-
-  useLayoutEffect(() => {
-    rePositionList();
-  }, [expanded]);
-
-  const onOptionChangeHandler = (child: ReactElement) => (event: React.ChangeEvent) => {
+type Position = {
+  top: 0 | 'initial';
+  bottom: 0 | 'initial';
+};
+
+export const Select = React.forwardRef<HTMLSelectElement, Props>(
+  (
+    {
+      children,
+      name,
+      disabled = false,
+      labeledBy,
+      placeholder,
+      describedBy,
+      searchPlaceholder = 'Search item',
+      className,
+      error = false,
+      value,
+      onChange,
+      onClear,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [expanded, setExpanded] = useState(false);
+    const [opacity, setOpacity] = useState(0); // We set opacity because other wise if we calculate the max height you see the list full height for a split second and then it shortens.
+    const [filter, setFilter] = useState('');
+    const [display, setDisplay] = useState('');
+    const [listPosition, setListPosition] = useState<Partial<Position>>({});
+    const [optionsListMaxHeight, setOptionsListMaxHeight] = useState('none');
+    const containerReference = useRef<HTMLDivElement>(null);
+    const optionListReference = useRef<HTMLDivElement>(null);
+
+    const nativeSelect = useRef<HTMLSelectElement>(null);
+
+    const syncDisplayValue = (val: string) => {
+      React.Children.forEach(children, (child) => {
+        if (child.props.value === val) {
+          setDisplay(child.props.children);
+        }
+      });
+    };
+
+    const rePositionList = () => {
+      if (!expanded || !optionListReference.current || !containerReference.current) {
+        return;
+      }
+
+      // Check whether there is more space above or below the select
+      // Check space between the bottom of select and top of viewport
+      const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
+
+      // Check space between the top of the select and bottom of viewport
+      const spaceOnBottomOfSelect =
+        window.innerHeight - containerReference.current.getBoundingClientRect().top;
+
+      // Set position as if there's more space on the bottom
+      let position: Position = { top: 0, bottom: 'initial' };
+
+      // Set the position of the select
+      if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
+        position = { top: 'initial', bottom: 0 };
+      }
+
+      setListPosition(position);
+
+      // Calculate the potential max height of the options list
+      calculateOptionListMaxHeight(position);
+    };
+
+    const calculateOptionListMaxHeight = (position: Position) => {
+      // Calculate max height if there's more space below the select
+      const listHeight = optionListReference.current!.getBoundingClientRect().height;
+      const transformOrigin = position.top !== 'initial' ? 'top' : 'bottom';
+
+      const availableSpace =
+        transformOrigin === 'top'
+          ? window.innerHeight -
+            containerReference.current!.getBoundingClientRect()[transformOrigin] -
+            16
+          : containerReference.current!.getBoundingClientRect()[transformOrigin] - 16;
+
+      if (availableSpace < listHeight) {
+        setOptionsListMaxHeight(`${availableSpace}px`);
+        setOpacity(100);
+        return;
+      }
+
+      setOptionsListMaxHeight('none');
+      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!;
+        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);
+    };
+
     /**
-     * We expose this to the outside inside of the onChange function as a parameter along with an optional second
-     * parameter of the option that was clicked.
+     * @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.
+     * 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 renderSearch = () => (
+      <Input
+        autoFocus
+        onChange={filterResults}
+        className={classes['select-search']}
+        wrapperProps={{ className: classes['select-search-wrapper'] }}
+        type="text"
+        name="search-option"
+        placeholder={searchPlaceholder}
+      />
+    );
+
+    const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFilter(event.currentTarget.value);
+    };
 
-    setDisplay(child.props.children);
+    const statusIcon = () => {
+      if (error) {
+        return <Icon className={classes['warning']} icon={Icons.Warning} />;
+      }
 
-    let newValue;
-    let multiple = false; // Potential support for future multiple select. This should be a prop obviously.
+      if (value?.length !== 0 && onClear) {
+        return (
+          <Icon
+            tag="div"
+            data-clear
+            icon={Icons.TimesThin}
+            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onClear(e);
+            }}
+          />
+        );
+      }
+      return null;
+    };
 
-    if (multiple) {
-      /** We will implement the mulitple select in the next iteration */
-    } else {
-      newValue = child.props.value;
-    }
+    const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange && onChange(event);
+    };
 
-    if (onChange) {
-      // Redefine target to allow name and value to be read.
-      // This allows seamless integration with the most popular form libraries.
-      // Clone the event to not override `target` of the original event.
-      // Don't know how to fix this any.. compiler whines that it can't construct it otherwise.
-      const nativeEvent: any = event.nativeEvent || event;
-      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+    useEffect(() => {
+      syncDisplayValue(value);
+    }, [value]);
 
-      Object.defineProperty(clonedEvent as React.ChangeEvent<HTMLSelectElement>, 'target', {
-        writable: true,
-        value: { value: newValue },
-      });
+    useEffect(() => {
+      rePositionList();
+    }, [expanded]);
 
-      onChange(clonedEvent as React.ChangeEvent<HTMLSelectElement>, child);
-    }
-
-    setDisplay((event.currentTarget as HTMLElement).innerText);
-    setExpanded(false);
-  };
-
-  /**
-   * @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.
-   * 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(child),
-        selected: child.props.value === value,
-        filter: filter,
-      })
+    useBodyClick(
+      (event: MouseEvent) => !(event.target as Element).closest('.custom-select') && expanded,
+      () => {
+        setExpanded(!expanded);
+        setListPosition({ top: 0, bottom: 'initial' });
+        setOpacity(0);
+      },
+      expanded
     );
 
-  const renderSearch = () => (
-    <Input
-      autoFocus
-      onChange={filterResults}
-      className={classes['select-search']}
-      wrapperProps={{ className: classes['select-search-wrapper'] }}
-      type="text"
-      name="search-option"
-      placeholder={searchPlaceholder}
-    />
-  );
-
-  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFilter(event.currentTarget.value);
-  };
-
-  const statusIcon = () => {
-    if (error) {
-      return <Icon className={classes['warning']} icon={Icons.Warning} />;
-    }
-    if (value.length !== 0 && onClear) {
-      return <Icon tag="div" icon={Icons.TimesThin} onClick={onClear} />;
-    }
-    return null;
-  };
-
-  /** Set initial display value */
-  useEffect(() => {
-    for (let child of children) {
-      if (child.props.value === value) {
-        setDisplay(child.props.children);
-      }
-    }
-  }, []);
-
-  const additionalClasses = [];
-  expanded && additionalClasses.push(classes.expanded);
-  error && additionalClasses.push(classes.error);
-  disabled && additionalClasses.push(classes.disabled);
-
-  return (
-    <div
-      {...(rest as HTMLProps<HTMLDivElement>)}
-      ref={containerReference}
-      className={`custom-select ${classes.select} ${additionalClasses.join(' ')} ${
-        className ?? ''
-      }`}
-    >
-      <button
-        onClick={() => setExpanded(!expanded)}
-        type="button"
-        name={name}
-        disabled={disabled}
-        aria-disabled={disabled}
-        aria-invalid={error}
-        aria-expanded={expanded}
-        aria-haspopup="listbox"
-        aria-labelledby={labeledBy}
-        aria-describedby={describedBy}
-      >
-        <div data-display className={classes['selected']}>
-          {value.length === 0 && placeholder && (
-            <span className={classes['placeholder']}>{placeholder}</span>
-          )}
-          {value.length > 0 && <span>{display}</span>}
-        </div>
-        <div className={classes['status']}>
-          {statusIcon()}
-          <Icon className={classes['triangle-down']} icon={Icons.TriangleDown} />
+    const additionalClasses = [];
+    expanded && additionalClasses.push(classes.expanded);
+    error && additionalClasses.push(classes.error);
+    disabled && additionalClasses.push(classes.disabled);
+    className && additionalClasses.push(className);
+
+    /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
+    return (
+      <Fragment>
+        <select
+          {...filterProps(rest, /^data-/, false)}
+          tabIndex={-1}
+          aria-hidden="true"
+          ref={ref || nativeSelect}
+          name={name}
+          onChange={nativeOnChangeHandler}
+          className={readyclasses['sr-only']}
+        >
+          <option value=""></option>
+          {React.Children.map(children, (child) => (
+            <option value={child.props.value}></option>
+          ))}
+        </select>
+        <div
+          {...filterProps(rest, /^data-/)}
+          ref={containerReference}
+          className={`custom-select ${classes.select} ${additionalClasses.join(' ')} ${
+            className ?? ''
+          }`}
+        >
+          <button
+            onClick={() => setExpanded(!expanded)}
+            type="button"
+            name={name}
+            disabled={disabled}
+            aria-disabled={disabled}
+            aria-invalid={error}
+            aria-expanded={expanded}
+            aria-haspopup="listbox"
+            aria-labelledby={labeledBy}
+            aria-describedby={describedBy}
+          >
+            <div data-display className={classes['selected']}>
+              {!value && placeholder && (
+                <span className={classes['placeholder']}>{placeholder}</span>
+              )}
+              {value?.length > 0 && <span>{display}</span>}
+            </div>
+            <div className={classes['status']}>
+              {statusIcon()}
+              <Icon className={classes['triangle-down']} icon={Icons.TriangleDown} />
+            </div>
+          </button>
+          <div
+            ref={optionListReference}
+            className={`list-wrapper ${classes['list-wrapper']}`}
+            style={{
+              display: expanded ? 'block' : 'none',
+              opacity: opacity,
+              maxHeight: optionsListMaxHeight,
+              ...listPosition,
+            }}
+          >
+            {Array.isArray(children) && children.length > 10 && renderSearch()}
+            <ul role="listbox" tabIndex={-1}>
+              {renderOptions()}
+            </ul>
+          </div>
         </div>
-      </button>
-      <div
-        ref={optionListReference}
-        className={`list-wrapper ${classes['list-wrapper']}`}
-        style={{ display: expanded ? 'block' : 'none', ...listPosition }}
-      >
-        {Array.isArray(children) && children.length > 10 && renderSearch()}
-        <ul role="listbox" tabIndex={-1}>
-          {renderOptions()}
-        </ul>
-      </div>
-    </div>
-  );
-};
+      </Fragment>
+    );
+  }
+);

package/src/Form/Textarea/Textarea.module.scss

@@ -6,6 +6,7 @@
 
 .textarea {
   padding: 0.75rem 3.75rem 0.75rem 1.25rem;
+  box-sizing: border-box;
   border-color: var(--input-border-color);
   border-style: var(--input-border-style);
   border-width: var(--input-border-width);
@@ -13,8 +14,8 @@
   transition: all 0.2s ease-in-out;
   font-family: var(--font-family);
   font-size: var(--font-size);
+  color: var(--greyed-out);
   width: 100%;
-  box-sizing: border-box;
   vertical-align: top;
   resize: vertical;
 

package/src/Form/Textarea/Textarea.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Textarea, Props } from './Textarea';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -20,6 +20,32 @@ describe('Textarea should render', () => {
   });
 });
 
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Textarea data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
 describe('Textarea properties', () => {
   it('is disabled', () => {
     const { textarea } = createTextarea({ disabled: true });
@@ -71,6 +97,6 @@ describe('Error status', () => {
     const { textarea } = createTextarea({ error: true });
 
     expect(textarea).toHaveClass('error');
-    expect(textarea.nextElementSibling).toHaveClass('icon-warning');
+    expect(textarea.nextElementSibling).toHaveClass('icon-error-circle');
   });
 });

package/src/Form/Textarea/Textarea.tsx

@@ -1,33 +1,48 @@
-import React from 'react';
-import { Icon, Icons } from '../../Icon/Icon';
-import { FormElement } from '../form.interfaces';
+import React, { ComponentPropsWithRef } from 'react';
+import { Icon, Props as IconProps, Icons } from '../../Icon/Icon';
 import classes from './Textarea.module.scss';
+import { FormElement } from '../form.interfaces';
+
+interface IconPropsPartial extends Omit<Partial<IconProps>, 'ref'> {}
 
-export interface Props extends FormElement<HTMLTextAreaElement> {
-  wrapperClassName?: string;
-  errorClassName?: string;
+export interface Props extends ComponentPropsWithRef<'textarea'>, FormElement {
+  wrapperProps?: ComponentPropsWithRef<'div'>;
+  errorProps?: IconPropsPartial;
 }
 
-export const Textarea = ({
-  error = false,
-  disabled = false,
-  className,
-  rows = 4,
-  wrapperClassName,
-  errorClassName,
-  ...rest
-}: Props) => {
-  return (
-    <div className={`${classes['textarea-wrapper']} ${wrapperClassName ? wrapperClassName : ''}`}>
-      <textarea
-        {...rest}
-        rows={rows}
-        className={`${error ? classes['error'] : ''} ${classes['textarea']} ${className ?? ''}`}
-        disabled={disabled}
-      />
-      {error && (
-        <Icon className={`${classes['warning']} ${errorClassName ?? ''}`} icon={Icons.Warning} />
-      )}
-    </div>
-  );
-};
+export const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(
+  (
+    {
+      error = false,
+      disabled = false,
+      className,
+      rows = 4,
+      wrapperProps,
+      errorProps,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    return (
+      <div
+        {...wrapperProps}
+        className={`${classes['textarea-wrapper']} ${wrapperProps?.className ?? ''}`}
+      >
+        <textarea
+          {...rest}
+          ref={ref}
+          rows={rows}
+          className={`${error ? classes['error'] : ''} ${classes['textarea']} ${className ?? ''}`}
+          disabled={disabled}
+        />
+        {error && (
+          <Icon
+            {...errorProps}
+            className={`${classes['warning']} ${errorProps?.className ?? ''}`}
+            icon={Icons.Error}
+          />
+        )}
+      </div>
+    );
+  }
+);

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

@@ -16,6 +16,11 @@ $borderRadius: 2.5rem;
   display: block;
   pointer-events: none;
 
+  &.disabled {
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+
   &:before {
     content: '';
     width: 1rem;
@@ -38,6 +43,10 @@ $borderRadius: 2.5rem;
   }
 }
 
+.toggle-helper {
+  margin-left: 2.5rem;
+}
+
 .checkbox {
   z-index: 10;
   position: static;