@onewelcome/react-lib-components 8.9.1 → 8.11.0

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.module.scss

@@ -0,0 +1,217 @@
+/*
+ * 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.
+ */
+
+.menu-button {
+  background-color: transparent;
+  border: 0;
+  font-family: var(--font-family);
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+    }
+  }
+}
+
+.menu-link {
+  text-decoration: none;
+}
+
+.menu-button-wrapper {
+  > .menu-button + ul > .menu-button-wrapper,
+  > .menu-button + ul > a {
+    opacity: 0;
+    transform: translateY(-60px);
+  }
+
+  $maxElementsOnOneSubLevel: 20;
+  &.expanded {
+    > .menu-button + ul > .menu-button-wrapper,
+    > .menu-button + ul > li {
+      opacity: 0;
+      animation-name: item-fade-in;
+      animation-duration: 250ms;
+      animation-fill-mode: forwards;
+
+      @for $i from 1 to $maxElementsOnOneSubLevel {
+        &:nth-child(#{$i}) {
+          animation-delay: (100ms * ($i - 1));
+        }
+      }
+    }
+  }
+}
+
+.menu-list {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  max-height: 100000px; /* because transition does not work on 'height:auto', we use 'max-height' with very large value to just run transition */
+
+  list-style: none;
+  text-align: left;
+
+  transition: max-height 0.15s ease-in-out;
+
+  .menu-item-text-wrapper {
+    padding-left: 2rem;
+  }
+
+  a,
+  button {
+    &:focus-visible {
+      outline-offset: -0.0625rem;
+    }
+  }
+}
+
+.menu-item {
+  box-sizing: border-box;
+  display: flex;
+  padding: 1.125rem 1rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  color: var(--color-blue-grey900);
+
+  line-height: 1.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+
+  transition: all 0.15s ease-in-out;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline-offset: -0.0625rem;
+  }
+
+  .menu-item-text-wrapper {
+    display: flex;
+  }
+
+  .menu-item-expand-icon {
+    padding: 0.375rem;
+    margin: -0.375rem;
+  }
+
+  & &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    margin-right: 0.5rem;
+    font-size: 1.125rem;
+  }
+
+  &-text {
+    display: flex;
+    align-items: center;
+  }
+
+  &-expand-icon {
+    font-size: 0.75rem;
+    color: var(--color-blue-grey900);
+    transition: all 0.15s ease-in-out;
+  }
+
+  &.expanded .menu-item-expand-icon {
+    transform: rotate(180deg);
+  }
+
+  a {
+    color: inherit;
+  }
+
+  &:hover {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &:focus,
+  &:active {
+    color: inherit;
+    background-color: var(--color-blue-grey100);
+  }
+
+  &.disabled {
+    color: var(--color-blue-grey400);
+    background-color: var(--color-blue-grey25);
+    pointer-events: none;
+  }
+}
+
+.menu-list-item {
+  position: relative;
+
+  .menu-item {
+    padding: 0.75rem 1rem;
+  }
+
+  a.menu-item-active {
+    background-color: var(--color-primary50);
+
+    &:hover {
+      background-color: var(--color-blue-grey50);
+    }
+
+    &:focus,
+    &:active {
+      background-color: var(--color-blue-grey100);
+    }
+
+    &:before {
+      content: "";
+      height: 100%;
+      position: absolute;
+      left: 0;
+      z-index: 2;
+      border-top-right-radius: 0.125rem;
+      border-bottom-right-radius: 0.125rem;
+      border-left: 0.25rem solid var(--color-primary500);
+    }
+
+    .menu-item-text {
+      font-weight: 700;
+    }
+  }
+
+  button.menu-item-active {
+    .menu-item-text {
+      font-weight: 700;
+    }
+  }
+}
+
+@keyframes item-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-60px);
+  }
+
+  80% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 React, { ForwardRefRenderFunction } from "react";
+import { ButtonLeftNavItem } from "./ButtonLeftNavItem";
+import { LinkLeftNavItem } from "./LinkLeftNavItem";
+import { LeftNavItemProps } from "./LeftNavItem.interface";
+
+const LeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, LeftNavItemProps> = (
+  props,
+  ref
+) => {
+  const shouldBeButton = !!(props.item.items?.length ?? 0 >= 1);
+  return shouldBeButton ? (
+    <ButtonLeftNavItem {...props} ref={ref} NestedComponent={LeftNavItem} />
+  ) : (
+    <LinkLeftNavItem {...props} ref={ref} />
+  );
+};
+
+export const LeftNavItem = React.forwardRef(LeftNavItemComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/LinkLeftNavItem.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 React, { ForwardRefRenderFunction, HTMLProps, MouseEvent, Ref } from "react";
+import classes from "./LeftNavItem.module.scss";
+import { Link as RouterLink } from "react-router-dom";
+import { MenuItem } from "../LeftNav.interfaces";
+import { Link } from "../../../../Link/Link";
+import { useKeyboardNavigation } from "./useKeyboardNavigation";
+import { UseRefItemsReturnType } from "../useRefItems";
+
+export interface Props extends HTMLProps<HTMLElement> {
+  item: MenuItem;
+  onItemClick: (path?: string, button?: boolean) => void;
+  refItems: UseRefItemsReturnType;
+  closeParentList?: () => void;
+}
+
+const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { item, onItemClick, refItems, closeParentList },
+  ref
+) => {
+  const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
+
+  const onLinkClickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (item.disabled) {
+      event.preventDefault();
+    } else {
+      onItemClick(item.path);
+    }
+  };
+
+  const getStylingClasses = () => {
+    const menuItemLinkClasses = [classes["menu-item"], classes["menu-link"]];
+    item.active && menuItemLinkClasses.push(classes["menu-item-active"]);
+    item.disabled && menuItemLinkClasses.push(classes["disabled"]);
+    const menuLinkWrapperClasses = [classes["menu-list-item"]];
+    return {
+      menuItemLinkClasses,
+      menuLinkWrapperClasses
+    };
+  };
+
+  const { menuItemLinkClasses, menuLinkWrapperClasses } = getStylingClasses();
+  const tabIndexActive = item.active ? 0 : -1;
+  const tabIndex = item.disabled ? -1 : tabIndexActive;
+
+  return (
+    <li className={menuLinkWrapperClasses.join(" ")} data-testid={`${item.key}`}>
+      {item.path?.match(/^https?:\/\//) ? (
+        <Link
+          ref={ref as Ref<HTMLAnchorElement>}
+          onKeyDown={onKeyPressNavigation}
+          onClick={onLinkClickHandler}
+          data-testid={item.key}
+          aria-current={item.active ? "page" : false}
+          aria-disabled={item.disabled}
+          className={menuItemLinkClasses.join(" ")}
+          to={item.path ?? ""}
+          type="external"
+          disabled={item.disabled}
+          tabIndex={tabIndex}
+        >
+          <div className={classes["menu-item-text-wrapper"]}>
+            {item.iconComponent &&
+              React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
+            <span className={classes["menu-item-text"]}>{item.title}</span>
+          </div>
+        </Link>
+      ) : (
+        <RouterLink
+          ref={ref as Ref<HTMLAnchorElement>}
+          onKeyDown={onKeyPressNavigation}
+          onClick={onLinkClickHandler}
+          aria-current={item.active ? "page" : false}
+          aria-disabled={item.disabled}
+          className={menuItemLinkClasses.join(" ")}
+          to={item.path ?? ""}
+          tabIndex={tabIndex}
+        >
+          <div className={classes["menu-item-text-wrapper"]}>
+            {item.iconComponent &&
+              React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
+            <span className={classes["menu-item-text"]}>{item.title}</span>
+          </div>
+        </RouterLink>
+      )}
+    </li>
+  );
+};
+
+export const LinkLeftNavItem = React.forwardRef(LinkLeftNavItemComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/useKeyboardNavigation.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 { KeyboardEvent } from "react";
+import { MenuItem } from "../LeftNav.interfaces";
+import { UseRefItemsReturnType } from "../useRefItems";
+
+interface Props {
+  item: MenuItem;
+  refItems: UseRefItemsReturnType;
+  closeParentList?: () => void;
+}
+
+export const useKeyboardNavigation = ({ refItems, item, closeParentList }: Props) => {
+  const onKeyPressNavigation = (e: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    if (e.code === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      closeParentList?.();
+      refItems.getParentElement(item.key)?.focus();
+    }
+    if (e.code === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getPrevElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getNextElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "Home") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getFirstElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "End") {
+      e.preventDefault();
+      e.stopPropagation();
+      refItems.getLastElementOnSameLevel(item.key)?.focus();
+    }
+    if (e.code === "Space" || e.code === "Enter") {
+      e.stopPropagation();
+      e.preventDefault();
+      refItems.getNextElement(item.key, true)?.focus();
+      e.currentTarget.click();
+    }
+  };
+
+  return { onKeyPressNavigation };
+};

package/src/components/admin/layout/LeftNav/useRefItems.ts

@@ -0,0 +1,280 @@
+/*
+ * 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 { useEffect, useRef } from "react";
+import { MenuItem } from "./LeftNav.interfaces";
+
+interface Props {
+  items: MenuItem[];
+}
+
+interface LinkedMapValue {
+  item: MenuItem;
+  level: number;
+  prev?: MenuItem;
+  next?: MenuItem;
+}
+
+export type UseRefItemsReturnType = ReturnType<typeof useRefItems>;
+
+export const useRefItems = ({ items }: Props) => {
+  const navRefs = useRef<Record<string, HTMLElement>>({});
+  const itemsMap = useRef<Record<string, LinkedMapValue>>({});
+
+  useEffect(() => {
+    createLinkedMap(items);
+  }, [items]);
+
+  /**
+   * Creates linked list of provided menu items.
+   * Disabled items are filtered out.
+   */
+  const createLinkedMap = (menuItems: MenuItem[]) => {
+    const map: Record<string, LinkedMapValue> = {};
+    createRecursiveLinkedMap(map, 0, menuItems);
+    itemsMap.current = map;
+  };
+
+  const createRecursiveLinkedMap = (
+    itemsMap: Record<string, LinkedMapValue>,
+    level: number,
+    items?: MenuItem[],
+    prevItem?: MenuItem,
+    nextItem?: MenuItem
+  ): { lastItem?: MenuItem } => {
+    let currentPreviousItem: MenuItem | undefined = prevItem,
+      currentNextItem: MenuItem | undefined = nextItem;
+    const nonDisabledItems = items?.filter(item => !item.disabled);
+    nonDisabledItems?.forEach((currentItem, index) => {
+      const isLast = index === nonDisabledItems.length - 1;
+      if (!isLast) {
+        currentNextItem = nonDisabledItems[index + 1];
+      } else {
+        currentNextItem = nextItem;
+      }
+
+      const hasChildren = currentItem.items?.filter(item => !item.disabled) !== undefined;
+      if (hasChildren) {
+        itemsMap[currentItem.key] = {
+          item: currentItem,
+          level,
+          prev: currentPreviousItem,
+          next: currentItem?.items?.filter(item => !item.disabled)[0]
+        };
+        currentPreviousItem = currentItem;
+        const { lastItem } = createRecursiveLinkedMap(
+          itemsMap,
+          level + 1,
+          currentItem?.items,
+          currentPreviousItem,
+          currentNextItem
+        );
+        currentPreviousItem = lastItem;
+      } else {
+        itemsMap[currentItem.key] = {
+          item: currentItem,
+          level,
+          prev: currentPreviousItem,
+          next: currentNextItem
+        };
+        currentPreviousItem = currentItem;
+      }
+    });
+    return { lastItem: currentPreviousItem };
+  };
+
+  const addElementReference = (el: HTMLElement | null, key: string) => {
+    if (el) {
+      navRefs.current[key] = el;
+    } else {
+      delete navRefs.current[key];
+    }
+  };
+
+  /**
+   * Get next element that is rendered. It could be nested element
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the last element on that level
+   */
+  const getNextElement = (currentKey: string, whenHavingChildren: boolean = false) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    if (whenHavingChildren && !currentItem.item.items) {
+      return;
+    }
+    const nextKey = currentItem.next?.key;
+    return nextKey ? navRefs.current?.[nextKey] : undefined;
+  };
+
+  /**
+   * Get next element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the last element on that level
+   */
+  const getNextElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const nextItem = _traverseNextElements({
+      currentItem,
+      desiredLevel: currentLevel,
+      currentLevel
+    });
+    return nextItem?.item.key ? navRefs.current?.[nextItem?.item.key] : undefined;
+  };
+
+  /**
+   * Get previous element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the first element on that level
+   */
+  const getPrevElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const prevItem = _traversePrevElements({
+      currentItem,
+      desiredLevel: currentLevel
+    });
+    return prevItem?.item.key ? navRefs.current?.[prevItem?.item.key] : undefined;
+  };
+
+  /**
+   * Get first element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the first element on that level
+   */
+  const getFirstElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const prevItem = _traversePrevElements({
+      currentItem,
+      desiredLevel: currentLevel
+    });
+    const prevItemKey = prevItem?.item.key;
+    if (prevItemKey) {
+      const hasNextPrevElement = !!_traversePrevElements({
+        currentItem: itemsMap.current?.[prevItemKey],
+        desiredLevel: currentLevel
+      });
+      if (hasNextPrevElement) {
+        return getFirstElementOnSameLevel(prevItemKey);
+      }
+      return navRefs.current?.[prevItemKey];
+    }
+  };
+
+  /**
+   * Get last element on the same level as currentKey param
+   * @param currentKey key of item
+   * @returns element or undefined if element does not exists or current element is the last element on that level
+   */
+  const getLastElementOnSameLevel = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const nextItem = _traverseNextElements({
+      currentItem,
+      desiredLevel: currentLevel,
+      currentLevel
+    });
+    const nextItemKey = nextItem?.item.key;
+    if (nextItemKey) {
+      const hasNextNextElement = !!_traverseNextElements({
+        currentItem: itemsMap.current?.[nextItemKey],
+        desiredLevel: currentLevel,
+        currentLevel
+      });
+      if (hasNextNextElement) {
+        return getLastElementOnSameLevel(nextItemKey);
+      }
+      return navRefs.current?.[nextItemKey];
+    }
+  };
+
+  const getParentElement = (currentKey: string) => {
+    const currentItem = itemsMap.current?.[currentKey];
+    const currentLevel = currentItem.level;
+    const parentLevel = currentLevel - 1;
+    const parentItem = _traversePrevElements({
+      currentItem,
+      desiredLevel: parentLevel,
+      checkForMenuEscape: false
+    });
+    return parentItem?.item.key ? navRefs.current?.[parentItem?.item.key] : undefined;
+  };
+
+  const _traverseNextElements = ({
+    currentItem,
+    desiredLevel,
+    currentLevel
+  }: {
+    currentItem: LinkedMapValue;
+    desiredLevel: number;
+    currentLevel: number;
+  }) => {
+    const nextKey = currentItem.next?.key;
+    if (!nextKey) {
+      return;
+    }
+    const escapedSubMenu = desiredLevel > currentLevel;
+    if (escapedSubMenu) {
+      return;
+    }
+
+    const next = itemsMap.current?.[nextKey];
+    if (next && next.level === desiredLevel) {
+      return next;
+    } else {
+      return _traverseNextElements({ currentItem: next, desiredLevel, currentLevel: next.level });
+    }
+  };
+
+  const _traversePrevElements = ({
+    currentItem,
+    desiredLevel,
+    checkForMenuEscape = true
+  }: {
+    currentItem: LinkedMapValue;
+    desiredLevel: number;
+    checkForMenuEscape?: boolean;
+  }) => {
+    const prevKey = currentItem.prev?.key;
+    if (!prevKey) {
+      return;
+    }
+    const prev = itemsMap.current?.[prevKey];
+    const prevLevel = prev.level;
+
+    const escapedSubMenu = desiredLevel > prevLevel;
+    if (checkForMenuEscape && escapedSubMenu) {
+      return;
+    }
+
+    if (prev && prev.level === desiredLevel) {
+      return prev;
+    } else {
+      return _traversePrevElements({ currentItem: prev, desiredLevel });
+    }
+  };
+
+  return {
+    addElementReference,
+    getNextElement,
+    getNextElementOnSameLevel,
+    getPrevElementOnSameLevel,
+    getFirstElementOnSameLevel,
+    getLastElementOnSameLevel,
+    getParentElement,
+    getItemMap: () => itemsMap.current
+  };
+};