@onewelcome/react-lib-components 4.1.0 → 4.2.0

package/src/components/ContextMenu/ContextMenuService.ts

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { Placement, Offset, vertical, horizontal } from "../../hooks/usePosition";
+import { remToPx } from "../../util/helper";
+
+interface UseArrowNavigation {
+  selectedContextMenuItem: number;
+  setSelectedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;
+  focusedContextMenuItem: number;
+  setFocusedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;
+  showContextMenu: boolean;
+  setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;
+  childrenCount: number;
+  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const useArrowNavigation = ({
+  selectedContextMenuItem,
+  setSelectedContextMenuItem,
+  focusedContextMenuItem,
+  setFocusedContextMenuItem,
+  showContextMenu,
+  setShowContextMenu,
+  childrenCount,
+  setShouldClick
+}: UseArrowNavigation) => {
+  const onArrowNavigation = (event: React.KeyboardEvent) => {
+    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {
+      setFocusedContextMenuItem(selectedContextMenuItem);
+    }
+
+    const codesToPreventDefault = [
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowLeft",
+      "ArrowRight",
+      "Enter",
+      "Space",
+      "Escape",
+      "End",
+      "Home"
+    ];
+
+    if (codesToPreventDefault.includes(event.code)) {
+      event.preventDefault();
+    }
+
+    switch (event.code) {
+      case "ArrowDown":
+        if (!showContextMenu) {
+          setShowContextMenu(true);
+          return;
+        }
+        setFocusedContextMenuItem(prevState => {
+          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+        });
+        return;
+      case "ArrowUp":
+        setFocusedContextMenuItem(prevState => {
+          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+        });
+        return;
+      case "Enter":
+      case "Space":
+        if (!showContextMenu) {
+          setShowContextMenu(true);
+          return;
+        }
+
+        setShouldClick(true);
+        setSelectedContextMenuItem(focusedContextMenuItem);
+        setShowContextMenu(false);
+        return;
+      case "Tab":
+      case "Escape":
+        setShowContextMenu(false);
+        return;
+      case "End":
+        setFocusedContextMenuItem(childrenCount - 1);
+        return;
+      case "Home":
+        setFocusedContextMenuItem(0);
+        return;
+    }
+  };
+
+  return { onArrowNavigation };
+};
+
+const defaultOffsetSpacing = remToPx(0.25);
+
+export const useDefaultOffset = () => {
+  const calculateDefaultOffset = (placement: Placement, transformOrigin: Placement): Offset => {
+    const offset = { left: 0, right: 0, top: 0, bottom: 0 };
+    if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {
+      offset.top = defaultOffsetSpacing;
+    } else if (
+      placement.vertical === vertical.TOP &&
+      transformOrigin.vertical === vertical.BOTTOM
+    ) {
+      offset.top = -defaultOffsetSpacing;
+    }
+
+    if (placement.horizontal === horizontal.RIGHT) {
+      offset.left = defaultOffsetSpacing;
+    }
+    return offset;
+  };
+
+  return { calculateDefaultOffset };
+};

package/src/components/Form/Checkbox/Checkbox.module.scss

@@ -13,35 +13,36 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../../mixins.module.scss";
 
 .checkbox-wrapper {
   position: relative;
 
   + .checkbox-wrapper {
-    margin-top: 1.25rem;
+    margin-top: 0.75rem;
   }
 }
 
 .checkbox-container {
   display: flex;
-  align-items: center;
 
   label {
     display: inline-block;
     margin-left: 0.5rem;
     user-select: none;
-    font-size: var(--font-size);
+    font-size: var(--font-size-form-label);
     font-family: var(--font-family);
+    margin-top: 0.1rem;
   }
 }
 
 .checkbox-list {
   padding: 0;
-  margin: 1.25rem 0 0 1.75rem;
+  margin: 1rem 0 0 1.75rem;
   list-style: none;
 
   li + li {
-    margin-top: 1.25rem;
+    margin-top: 0.75rem;
   }
 }
 
@@ -53,31 +54,82 @@
   margin: 0;
   width: 1.25rem;
   height: 1.25rem;
+  z-index: 2;
 
-  &:checked + * {
+  &:checked:not(.disabled) + * {
     color: var(--color-primary);
   }
 
   &:focus-visible {
     + * {
       border-radius: 2px;
-      outline: 1px solid var(--color-focus);
-      outline-offset: 1px;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
     }
   }
 
+  &:active:not(.disabled) + span {
+    background-color: var(--disabled);
+  }
+
   &.error:focus-visible {
     + * {
       outline-color: var(--color-error);
     }
   }
+
+  & + span[data-icon="true"]:before {
+    display: block;
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover + .square:not(.disabled) {
+    background-color: var(--checkbox-unchecked-hover-color);
+  }
+
+  &:active + .square:not(.disabled) {
+    background-color: var(--checkbox-unchecked-pressed-color);
+  }
+
+  &:hover + .checkmark:not(.disabled),
+  &:active + .indeterminate:not(.disabled) {
+    color: var(--checkbox-checked-hover-color);
+  }
+
+  &:active + .checkmark:not(.disabled),
+  &:active + .indeterminate:not(.disabled) {
+    color: var(--checkbox-checked-pressed-color);
+  }
 }
 
 .input {
   font-size: 1.25rem;
-  pointer-events: none;
+  z-index: 1;
 }
 
 .disabled {
-  color: var(--disabled);
+  cursor: not-allowed;
+
+  & + span {
+    color: var(--disabled);
+    pointer-events: none;
+  }
+
+  & + label {
+    color: var(--greyed-out);
+  }
+
+  & + .checkmark,
+  & + .indeterminate {
+    color: var(--disabled);
+    background-color: var(--greyed-out);
+    border-radius: 2px;
+    outline: 1px var(--disabled) solid;
+    outline-offset: -1px;
+  }
+}
+
+.indeterminate {
+  color: var(--color-primary);
 }

package/src/components/Form/Checkbox/Checkbox.test.tsx

@@ -149,7 +149,7 @@ describe("Checkbox should have proper attributes", () => {
 
     expect(checkbox).toHaveAttribute(
       "aria-describedby",
-      container.querySelector(".error-message span:last-of-type")!.id
+      container.querySelector(".error-message")!.id
     );
 
     expect(checkbox).toHaveAttribute("aria-invalid", "true");

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -33,7 +33,7 @@ import { FormSelector } from "../form.interfaces";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
-export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   label?: string | React.ReactElement;
   indeterminate?: boolean;
   helperProps?: FormHelperTextProps;
@@ -122,13 +122,17 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 
   const renderToggle = () => React.Children.toArray(children).filter(isToggle);
 
-  const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
+  const iconClasses = [classes["input"]];
+  const nativeInputClasses = [classes["native-input"]];
+  const wrapperClasses = [classes["checkbox-wrapper"]];
+  error && nativeInputClasses.push(classes["error"]);
+  disabled && nativeInputClasses.push(classes["disabled"]) && iconClasses.push(classes["disabled"]);
+  className && wrapperClasses.push(className);
 
-  /** Default return value is the default checkbox */
   return (
     <FormSelectorWrapper
       {...formSelectorWrapperProps}
-      className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
+      className={wrapperClasses.join(" ")}
       containerProps={{ className: classes["checkbox-container"] }}
       helperText={helperText}
       helperProps={helperProps}
@@ -146,7 +150,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         {...rest}
         ref={ref}
         disabled={disabled}
-        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        className={nativeInputClasses.join(" ")}
         checked={checked}
         onChange={onChangeHandler}
         aria-invalid={error as boolean}
@@ -158,11 +162,21 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       />
       {renderToggle()}
 
-      {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
+      {indeterminate && (
+        <Icon
+          className={`${iconClasses.join(" ")} ${classes["indeterminate"]}`}
+          icon={Icons.MinusSquare}
+        />
+      )}
       {checked && !indeterminate && (
-        <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
+        <Icon
+          className={`${iconClasses.join(" ")} ${classes["checkmark"]}`}
+          icon={Icons.CheckmarkSquare}
+        />
+      )}
+      {!checked && !indeterminate && (
+        <Icon className={`${iconClasses.join(" ")} ${classes["square"]}`} icon={Icons.Square} />
       )}
-      {!checked && !indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.Square} />}
       <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
     </FormSelectorWrapper>
   );

package/src/components/Form/Fieldset/Fieldset.module.scss

@@ -39,10 +39,6 @@
         content: " *";
       }
     }
-
-    &.error {
-      color: var(--error);
-    }
   }
 }
 @media only screen and (min-width: 30em) {

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.module.scss

@@ -14,8 +14,11 @@
  *    limitations under the License.
  */
 
-.error {
-  color: var(--error);
+.error input + span {
+  outline: var(--error) solid 1px;
+  outline-offset: -1px;
+  border-radius: 2px;
+  overflow: hidden;
 }
 
 .helper-text {
@@ -24,14 +27,7 @@
 }
 
 .error-message {
-  margin-top: 1.25rem;
-  display: flex;
-  align-items: flex-end;
-}
-
-.error-icon {
-  margin-right: 0.5rem;
-  font-size: 1.25rem;
+  color: var(--error);
 }
 
 .disabled {

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -20,7 +20,6 @@ import React, {
   createRef,
   ReactNode
 } from "react";
-import { Icon, Icons } from "../../Icon/Icon";
 import { KeyValuePair } from "../../../interfaces";
 import { FormSelector } from "../form.interfaces";
 import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
@@ -65,7 +64,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
       }`}
     >
       <div {...containerProps}>{children}</div>
-      {(helperText || helperProps?.children) && (!error || parentErrorId || !errorMessage) && (
+      {(helperText || helperProps?.children) && (
         <FormHelperText
           {...helperProps}
           ref={helperRef}
@@ -74,15 +73,15 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
             error ? classes["error"] : ""
           }`}
         >
-          {helperProps?.children || helperText}
+          {error ? (
+            <span className={classes["error-message"]} id={errorId}>
+              {errorMessage}
+            </span>
+          ) : (
+            helperProps?.children || helperText
+          )}
         </FormHelperText>
       )}
-      {errorMessage && !parentErrorId && error && (
-        <span className={classes["error-message"]}>
-          <Icon className={classes["error-icon"]} icon={Icons.Error} />
-          <span id={errorId}>{errorMessage}</span>
-        </span>
-      )}
       {nestedChildren}
     </div>
   );

package/src/components/Form/Radio/Radio.module.scss

@@ -18,7 +18,7 @@
   position: relative;
 
   + .radio-wrapper {
-    margin-top: 1.25rem;
+    margin-top: 0.75rem;
   }
 }
 
@@ -34,7 +34,6 @@
 .error-message {
   margin-top: 1.25rem;
   display: flex;
-  align-items: bottom;
 }
 
 .error-icon {
@@ -44,14 +43,14 @@
 
 .radio-container {
   display: flex;
-  align-items: center;
 
   label {
     display: inline-block;
     margin-left: 0.5rem;
     user-select: none;
-    font-size: var(--font-size);
+    font-size: var(--font-size-form-label);
     font-family: var(--font-family);
+    margin-top: 0.15rem;
 
     .disabled & {
       cursor: not-allowed;
@@ -59,16 +58,6 @@
   }
 }
 
-.radio-list {
-  padding: 0;
-  margin: 1.25rem 0 0 1.75rem;
-  list-style: none;
-
-  li + li {
-    margin-top: 1.75rem;
-  }
-}
-
 .native-input {
   position: absolute;
   top: 0;
@@ -77,37 +66,74 @@
   margin: 0;
   width: 1.75rem;
   height: 1.75rem;
+  z-index: 2;
+
+  & + span[data-icon="true"]:before {
+    display: block;
+    width: 20px;
+    height: 20px;
+  }
 
   &:checked + * {
     color: var(--color-primary);
   }
 
-  &:disabled {
+  &:checked + *.disabled {
+    color: var(--disabled);
     cursor: not-allowed;
+    pointer-events: none;
   }
 
   &:focus-visible {
     + * {
-      border-radius: 2px;
-      outline: 1px solid var(--color-focus);
-      outline-offset: 1px;
+      border-radius: 100%;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
     }
   }
 
-  &.error:focus-visible {
-    + * {
-      outline-color: var(--color-error);
-    }
+  &.error + * {
+    border-radius: 100%;
+  }
+
+  &.error:hover + .radio::before {
+    outline-color: var(--radio-hover-background-color);
+  }
+
+  &.error:active + .radio::before {
+    outline-color: var(--radio-pressed-background-color);
+  }
+
+  &:hover + .input.circle:not(.disabled) {
+    background-color: var(--radio-hover-background-color);
+  }
+
+  &:active + .input.circle:not(.disabled) {
+    background-color: var(--radio-pressed-background-color);
+  }
+
+  &:hover + .input.radio:not(.disabled) {
+    background-color: var(--radio-hover-background-color);
+    color: var(--radio-hover-color);
+  }
+
+  &:active + .input.radio:not(.disabled) {
+    color: var(--radio-pressed-color);
+    background-color: var(--radio-pressed-background-color);
   }
 }
 
 .input {
   font-size: 1.25rem;
-  pointer-events: none;
   width: 1.25rem;
   height: 1.25rem;
+  z-index: 1;
+  border-radius: 100%;
+
+  &:active {
+    border-radius: 100%;
+  }
 
-  /** The & behind disabled means parent selector (so in reality this means .disabled .input) */
   .disabled & {
     color: var(--disabled);
   }
@@ -115,4 +141,5 @@
 
 .disabled {
   color: var(--disabled);
+  pointer-events: none;
 }

package/src/components/Form/Radio/Radio.tsx

@@ -25,7 +25,7 @@ import {
   Props as FormSelectorWrapperProps
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 
-export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   children: string;
   value: string;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -77,7 +77,14 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange?.(clonedEvent);
   };
 
-  /** Default return value is the default radio */
+  const nativeInputClasses = [classes["native-input"]];
+  const checkedRadioClasses = [classes["input"], classes["radio"]];
+  const uncheckedRadioClasses = [classes["input"], classes["circle"]];
+  error && nativeInputClasses.push(classes["error"]);
+  disabled &&
+    checkedRadioClasses.push(classes["disabled"]) &&
+    uncheckedRadioClasses.push(classes["disabled"]);
+
   return (
     <FormSelectorWrapper
       {...formSelectorWrapperProps}
@@ -97,10 +104,9 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         ref={ref}
         disabled={disabled}
         tabIndex={0}
-        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        className={nativeInputClasses.join(" ")}
         onChange={onChangeHandler}
         checked={checked}
-        aria-invalid={error ? true : false}
         aria-checked={checked}
         aria-describedby={describedBy}
         name={name}
@@ -109,18 +115,8 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         type="radio"
       />
 
-      {checked && (
-        <Icon
-          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-          icon={Icons.Radio}
-        />
-      )}
-      {!checked && (
-        <Icon
-          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-          icon={Icons.Circle}
-        />
-      )}
+      {checked && <Icon className={checkedRadioClasses.join(" ")} icon={Icons.Radio} />}
+      {!checked && <Icon className={uncheckedRadioClasses.join(" ")} icon={Icons.Circle} />}
 
       <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
         {children}

package/src/components/Form/Select/Select.module.scss

@@ -96,7 +96,7 @@ $listItemHeight: 2.125rem;
     box-shadow: 0px 3px 14px 0px #0105321f;
     box-shadow: 0px 8px 10px 0px #01053224;
     position: absolute;
-    z-index: 11;
+    z-index: variables.$select-z-index;
     top: 44px;
     left: 0;
     width: 100%;

package/src/components/Form/Select/Select.tsx

@@ -44,7 +44,7 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
   describedBy?: string;
   placeholder?: string;
   searchPlaceholder?: string;
-  searchInputProps?: PartialInputProps;
+  searchInputProps?: PartialInputProps & { reset?: boolean };
   selectButtonProps?: ComponentPropsWithRef<"button">;
   className?: string;
   value: string;
@@ -90,7 +90,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
       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 [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
-  const [childrenCount] = useState(React.Children.count(children));
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -112,7 +111,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     setIsSearching,
     setFocusedSelectItem,
     onOptionChangeHandler,
-    childrenCount,
+    childrenCount: React.Children.count(children),
     setShouldClick,
     searchInputRef,
     renderSearchCondition
@@ -239,6 +238,16 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     expanded
   );
 
+  const resetSearchState = () => {
+    setFilter("");
+    setIsSearching(false);
+    setFocusedSelectItem(-1);
+  };
+
+  useEffect(() => {
+    searchInputProps?.reset && resetSearchState();
+  }, [searchInputProps?.reset]);
+
   const additionalClasses = [];
   expanded && additionalClasses.push(classes.expanded);
   error && additionalClasses.push(classes.error);

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

@@ -15,6 +15,7 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "../../../variables.scss";
 
 $borderRadius: 2.5rem;
 
@@ -24,7 +25,6 @@ $borderRadius: 2.5rem;
   position: relative;
 
   label {
-    margin-top: 0.0625rem;
     white-space: nowrap;
   }
 
@@ -187,7 +187,7 @@ $borderRadius: 2.5rem;
 }
 
 .checkbox {
-  z-index: 10;
+  z-index: variables.$toggle-z-index;
   position: static;
   & > div:first-child {
     display: flex;