@onewelcome/react-lib-components 6.0.0 → 6.1.0

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

@@ -37,25 +37,41 @@ import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 
 type PartialInputProps = Partial<InputProps>;
 
+interface SearchProps {
+  enabled?: boolean;
+  renderThreshold?: number;
+  searchPlaceholder?: string;
+  searchInputProps?: PartialInputProps & { reset?: boolean };
+}
+
 export interface Props extends ComponentPropsWithRef<"select">, FormElement {
   children: ReactElement[];
   name?: string;
   labeledBy?: string;
   describedBy?: string;
   placeholder?: string;
+  /**
+   * @deprecated
+   */
   searchPlaceholder?: string;
+  /**
+   * @deprecated
+   */
   searchInputProps?: PartialInputProps & { reset?: boolean };
   selectButtonProps?: ComponentPropsWithRef<"button">;
+  search?: SearchProps;
   className?: string;
   value: string;
   clearLabel?: string;
   noResultsLabel?: string;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
+  addNew?: {
+    label: string;
+    onAddNew: (value: string) => void;
+    btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  };
 }
 
-/** Amount of items to be rendered before a search input is rendered */
-const renderSearchCondition = 10;
-
 const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   {
     children,
@@ -74,6 +90,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     clearLabel = "Clear selection",
     noResultsLabel = "No results found",
     onChange,
+    addNew,
+    search,
     ...rest
   }: Props,
   ref
@@ -85,14 +103,32 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   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 [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 [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
 
+  const DEFAULT_RENDER_THRESHOLD = 10;
+
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const addBtnRef = useRef<HTMLButtonElement>(null);
+
+  const addNewLabel = addNew?.label ?? "Create new";
+
+  const getRenderThreshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;
+  const hasEnoughChildren = Array.isArray(children) && children.length > getRenderThreshold;
+
+  const shouldRenderSearch = () => {
+    if (search?.enabled) {
+      return hasEnoughChildren;
+    }
+
+    if (search) {
+      return search.enabled as boolean;
+    }
+
+    return children.length > DEFAULT_RENDER_THRESHOLD;
+  };
 
   const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
     if (nativeSelect.current && optionElement) {
@@ -114,11 +150,12 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     childrenCount: React.Children.count(children),
     setShouldClick,
     searchInputRef,
-    renderSearchCondition
+    addBtnRef,
+    renderThreshold: getRenderThreshold
   });
 
   const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
-    useSelectPositionList({ expanded, optionListReference, containerReference });
+    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });
 
   const syncDisplayValue = (val: string) => {
     React.Children.forEach(children, child => {
@@ -129,7 +166,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   };
 
   /**
-   * @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.
+   * @description We have to modify the children (Option component) to have an 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 = () => {
@@ -165,32 +202,32 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           selectOpened: expanded,
           childIndex: index,
           hasFocus: focusedSelectItem === index,
-          shouldClick: shouldClick
+          shouldClick: shouldClick,
+          isAddBtnFocused: addBtnRef.current === document.activeElement
         });
       });
     }
   };
 
-  const shouldRenderSearch =
-    expanded && Array.isArray(children) && children.length > renderSearchCondition;
-
   const renderSearch = () => (
     <Input
-      {...searchInputProps}
+      {...(search?.searchInputProps ?? searchInputProps)}
       ref={searchInputRef}
       onFocus={() => setIsSearching(true)}
       onBlur={() => setIsSearching(false)}
       onChange={filterResults}
       className={classes["select-search"]}
       wrapperProps={{
-        className: searchInputProps?.wrapperProps?.className
+        className:
+          search?.searchInputProps?.wrapperProps?.className ??
+          searchInputProps?.wrapperProps?.className
       }}
       style={{
         display: expanded ? "block" : "none"
       }}
       type="text"
       name="search-option"
-      placeholder={searchPlaceholder}
+      placeholder={search?.searchPlaceholder ?? searchPlaceholder}
     />
   );
 
@@ -245,8 +282,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
   };
 
   useEffect(() => {
-    searchInputProps?.reset && resetSearchState();
-  }, [searchInputProps?.reset]);
+    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();
+  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);
 
   const additionalClasses = [];
   expanded && additionalClasses.push(classes.expanded);
@@ -280,7 +317,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           className ?? ""
         }`}
       >
-        {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
+        {shouldRenderSearch() && renderSearch()}
         <button
           {...selectButtonProps}
           onClick={() => {
@@ -290,7 +327,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           type="button"
           name={name}
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
-          style={{ display: shouldRenderSearch ? "none" : "initial" }}
+          style={{ display: expanded && shouldRenderSearch() ? "none" : "initial" }}
           disabled={disabled}
           aria-disabled={disabled}
           aria-invalid={error}
@@ -317,11 +354,25 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             ...listPosition
           }}
         >
-          <ul role="listbox">{renderOptions()}</ul>
+          <ul className={addNew && classes["has-sibling"]} role="listbox">
+            {renderOptions()}
+          </ul>
+          {addNew && (
+            <button
+              data-testid={"select-action-button"}
+              className={classes["action-button"]}
+              onClick={() => addNew.onAddNew(filter)}
+              ref={addBtnRef}
+              {...addNew.btnProps}
+            >
+              {!filter && addNewLabel}
+              {filter && <span style={{ fontWeight: "700" }}>{`"${filter}"`}</span>}
+              {filter && ` (${addNewLabel.toLowerCase()})`}
+            </button>
+          )}
         </div>
       </div>
     </Fragment>
   );
 };
-
 export const Select = React.forwardRef(SelectComponent);

package/src/components/Form/Select/SelectService.ts

@@ -21,6 +21,7 @@ import {
   UseSelectPositionListParams
 } from "./Select.interfaces";
 
+/** @scope . */
 export const useArrowNavigation = ({
   expanded,
   setExpanded,
@@ -31,7 +32,8 @@ export const useArrowNavigation = ({
   childrenCount,
   setShouldClick,
   searchInputRef,
-  renderSearchCondition
+  addBtnRef,
+  renderThreshold
 }: UseArrowNavigationParams) => {
   const onArrowNavigation = (event: React.KeyboardEvent) => {
     const codesToPreventDefault = [
@@ -54,12 +56,16 @@ export const useArrowNavigation = ({
       "MetaRight"
     ];
 
-    /** If the select is expanded, we also want to control the Tab key */
+    const isAddBtnFocused = addBtnRef?.current === document.activeElement;
+
     if (expanded) {
       codesToPreventDefault.push("Tab");
     }
 
-    /** We will handle the way certain key strokes affect the Select, unless we're searching */
+    if (addBtnRef) {
+      codesToPreventDefaultWhenSearching.push("Tab");
+    }
+
     if (codesToPreventDefault.includes(event.code) && !event.metaKey && !isSearching) {
       event.preventDefault();
     }
@@ -80,7 +86,14 @@ export const useArrowNavigation = ({
           setFocusedSelectItem(childrenCount - 1);
           return;
         case "Escape":
+          setIsSearching(false);
+          setExpanded(false);
+          return;
         case "Tab":
+          if (addBtnRef?.current) {
+            addBtnRef.current.focus();
+            return;
+          }
           setIsSearching(false);
           setExpanded(false);
       }
@@ -125,10 +138,13 @@ export const useArrowNavigation = ({
 
           return;
         case "Tab":
-          if (childrenCount >= renderSearchCondition && expanded) {
+          if (childrenCount >= renderThreshold && expanded && !isAddBtnFocused) {
             setIsSearching(true);
             searchInputRef.current?.focus();
             return;
+          } else if (addBtnRef?.current && expanded && !isAddBtnFocused) {
+            addBtnRef.current.focus();
+            return;
           }
           setExpanded(false);
 
@@ -163,10 +179,11 @@ export const useArrowNavigation = ({
 export const useSelectPositionList = ({
   expanded,
   optionListReference,
+  addBtnRef,
   containerReference
 }: UseSelectPositionListParams) => {
   const [optionsListMaxHeight, setOptionsListMaxHeight] = useState("none");
-  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 [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.
   const [listPosition, setListPosition] = useState<Partial<Position>>({});
 
   useEffect(() => {
@@ -203,6 +220,7 @@ export const useSelectPositionList = ({
   const calculateOptionListMaxHeight = (position: Position) => {
     // Calculate max height if there's more space below the select
     const listHeight = optionListReference.current?.getBoundingClientRect().height;
+    const addNewButtonHeight = addBtnRef.current?.getBoundingClientRect().height ?? 0;
     const transformOrigin = position.top !== "initial" ? "top" : "bottom";
 
     if (!containerReference.current) {
@@ -214,12 +232,10 @@ export const useSelectPositionList = ({
 
     const availableSpace =
       transformOrigin === "top"
-        ? window.innerHeight -
-          containerReference.current.getBoundingClientRect()[transformOrigin] -
-          16
-        : containerReference.current.getBoundingClientRect()[transformOrigin] - 16;
+        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16
+        : containerReference.current.getBoundingClientRect().top - 16;
 
-    if (listHeight && availableSpace < listHeight) {
+    if (listHeight && availableSpace < listHeight + addNewButtonHeight) {
       setOptionsListMaxHeight(`${availableSpace}px`);
       setOpacity(100);
       return;

package/src/components/Link/Link.module.scss

@@ -39,6 +39,10 @@
     &:focus-visible {
       outline: 0.5px dashed var(--color-primary);
     }
+
+    &:visited {
+      color: var(--button-primary-pressed-color);
+    }
   }
 
   &.success {
@@ -47,6 +51,10 @@
     &:focus-visible {
       outline: 0.5px dashed var(--color-primary);
     }
+
+    &:visited {
+      color: var(--button-success-pressed-color);
+    }
   }
 
   &.danger {
@@ -55,6 +63,10 @@
     &:focus-visible {
       outline: 0.5px dashed var(--color-primary);
     }
+
+    &:visited {
+      color: var(--button-danger-pressed-color);
+    }
   }
 
   &.warning {
@@ -63,6 +75,10 @@
     &:focus-visible {
       outline: 0.5px dashed var(--color-primary);
     }
+
+    &:visited {
+      color: var(--button-warning-pressed-color);
+    }
   }
 
   &.disabled {

package/src/components/Popover/Popover.tsx

@@ -23,7 +23,7 @@ import React, {
   useRef,
   useState
 } from "react";
-import { Offset, Placement, usePosition } from "../../hooks/usePosition";
+import { Offset, Placement, PositionType, usePosition } from "../../hooks/usePosition";
 import classes from "./Popover.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -63,6 +63,18 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     debounceAmount: debounceAmount ?? undefined
   });
 
+  const normalizePosition = (value: PositionType) => {
+    if (value === "initial") {
+      return "initial";
+    }
+
+    if (isNaN(value)) {
+      return 0;
+    }
+
+    return Number(value);
+  };
+
   useEffect(() => {
     if (initialCalculationDone) {
       setShowPopover(!!show);
@@ -114,7 +126,12 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       <div
         ref={elToBePositioned}
         className={`${classes.popover} ${className ?? ""} ${showPopover ? classes.show : ""}`}
-        style={{ top: top, left: left, right: right, bottom: bottom }}
+        style={{
+          top: normalizePosition(top),
+          left: normalizePosition(left),
+          right: normalizePosition(right),
+          bottom: normalizePosition(bottom)
+        }}
       >
         {children}
       </div>

package/src/components/Stepper/Step.tsx

@@ -17,7 +17,6 @@
 import React, { CSSProperties, ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 import { Icon, Icons } from "../Icon/Icon";
 import classes from "./Step.module.scss";
-import { gapBetweenStepsInRem } from "./Stepper";
 
 export type StepStatus = "waiting" | "current" | "done" | "error";
 
@@ -33,6 +32,8 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
   onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 }
 
+const gapBetweenStepsInRem = 0.5;
+
 const getStepContent = (index: number, status: StepStatus) => {
   switch (status) {
     case "waiting":

package/src/components/Stepper/Stepper.tsx

@@ -24,8 +24,6 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   textPosition?: "bottom" | "right";
 }
 
-export const gapBetweenStepsInRem = 0.5;
-
 export const Stepper = ({
   steps,
   direction = "horizontal",

package/src/components/Tooltip/Tooltip.module.scss

@@ -174,6 +174,7 @@
   transform-origin: center center;
   pointer-events: none;
   box-shadow: 0 0.0625rem 0.3125rem 0 rgba(1, 5, 50, 0.3);
+  word-break: break-all;
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 

package/src/hooks/usePosition.ts

@@ -84,7 +84,7 @@ interface Dimensions {
   width: number;
 }
 
-type PositionType = number | "initial";
+export type PositionType = number | "initial";
 
 const defaultConfigObject: ConfigObject = {
   relativeElement: undefined,

package/src/interfaces.ts

@@ -32,6 +32,6 @@ export type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends (infer U)[]
     ? DeepPartial<U>[]
     : T[P] extends ReadonlyArray<infer U>
-    ? ReadonlyArray<DeepPartial<U>>
-    : DeepPartial<T[P]>;
+      ? ReadonlyArray<DeepPartial<U>>
+      : DeepPartial<T[P]>;
 };

package/src/mixins.module.scss

@@ -18,12 +18,12 @@
 
 @mixin button($variant: "text", $type: "default") {
   $disabledSelector: if($type == "link", ".disabled", ":disabled");
+  font-weight: 500;
 
   @if $variant == "text" {
     border-color: transparent;
     background-color: transparent;
   } @else if $variant == "fill" {
-    font-weight: 500;
     &:not(#{$disabledSelector}) {
       color: var(--button-fill-text-color);
       @include buttonStyles(
@@ -37,7 +37,6 @@
     }
   } @else if $variant == "outline" {
     background-color: var(--white);
-    font-weight: 500;
   }
 
   &.primary:not(#{$disabledSelector}) {
@@ -145,8 +144,7 @@
     z-index: 2;
   }
 
-  &:active:not(.disabled),
-  &:visited:not(.disabled) {
+  &:active:not(.disabled) {
     @if $variant == "fill" {
       background-color: $pressedColor;
       border-color: $pressedColor;

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,64 +0,0 @@
-/*
- * 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 from "react";
-import { Breadcrumbs, Props } from "./Breadcrumbs";
-import { render } from "@testing-library/react";
-import { Link } from "../Link/Link";
-
-const defaultParams: Props = {
-  ariaLabel: "Breadcrumbs",
-  children: [
-    <Link key="0" to="#1" data-testid="link">
-      Test1
-    </Link>,
-    <Link key="1" to="#2" data-testid="link">
-      Test2
-    </Link>
-  ]
-};
-
-const createBreadcrumbs = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Breadcrumbs {...parameters} data-testid="breadcrumbs"></Breadcrumbs>);
-  const breadcrumbs = queries.getByTestId("breadcrumbs");
-
-  return {
-    ...queries,
-    breadcrumbs
-  };
-};
-
-describe("Breadcrumbs should render", () => {
-  it("renders without crashing", () => {
-    const { breadcrumbs } = createBreadcrumbs();
-
-    expect(breadcrumbs).toBeDefined();
-    expect(breadcrumbs.firstChild).not.toHaveAttribute("aria-current");
-    if (breadcrumbs.firstChild) {
-      const homeIcon = (breadcrumbs.firstChild as HTMLElement).querySelector(
-        "[class*='icon-home-filled']"
-      );
-      expect(homeIcon).toBeInTheDocument();
-    }
-    expect((breadcrumbs.firstChild as HTMLElement).tagName).toEqual("A");
-    expect(breadcrumbs.lastChild).toHaveAttribute("aria-current", "page");
-    expect((breadcrumbs.lastChild as HTMLElement).tagName).toEqual("SPAN");
-  });
-});

package/src/components/Button/BaseButton.test.tsx

@@ -1,133 +0,0 @@
-/*
- * 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, { useEffect, useRef } from "react";
-import { BaseButton, Props } from "./BaseButton";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {};
-
-const createBaseButton = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <BaseButton {...parameters} data-testid="baseButton">
-      baseButton content
-    </BaseButton>
-  );
-  const baseButton = queries.getByTestId("baseButton");
-
-  return {
-    ...queries,
-    baseButton
-  };
-};
-
-describe("BaseButton should render", () => {
-  it("renders without crashing", () => {
-    const { baseButton } = createBaseButton();
-
-    expect(baseButton).toBeDefined();
-    expect(baseButton).toHaveTextContent("baseButton content");
-  });
-});
-
-describe("On click handler", () => {
-  it("executes the onclick handler", async () => {
-    const onClickHandler = jest.fn();
-    const { baseButton } = createBaseButton(defaultParams => ({
-      ...defaultParams,
-      onClick: onClickHandler
-    }));
-
-    await userEvent.click(baseButton);
-
-    expect(onClickHandler).toBeCalled();
-  });
-});
-
-describe("Properties of the button", () => {
-  it("should be disabled, function should not have been called", async () => {
-    const onClickHandler = jest.fn();
-    const { baseButton } = createBaseButton(defaultParams => ({
-      ...defaultParams,
-      disabled: true,
-      onClick: onClickHandler
-    }));
-
-    await userEvent.click(baseButton);
-    expect(onClickHandler).toHaveBeenCalledTimes(0);
-  });
-
-  it("when loading onClick function should not have been called", async () => {
-    const onClickHandler = jest.fn();
-    const { baseButton } = createBaseButton(defaultParams => ({
-      ...defaultParams,
-      loading: true,
-      onClick: onClickHandler
-    }));
-
-    await userEvent.click(baseButton);
-    expect(onClickHandler).toHaveBeenCalledTimes(0);
-  });
-
-  it('should have the class "TESTING"', () => {
-    const { baseButton } = createBaseButton(defaultParams => ({
-      ...defaultParams,
-      className: "TESTING"
-    }));
-
-    expect(baseButton).toHaveClass("TESTING");
-  });
-
-  it('should have a "name" property with the value "button"', () => {
-    const { baseButton } = createBaseButton(defaultParams => ({
-      ...defaultParams,
-      name: "button"
-    }));
-
-    expect(baseButton).toHaveAttribute("name", "button");
-  });
-});
-
-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 <BaseButton {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});