@onewelcome/react-lib-components 6.0.0 → 6.2.0

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

@@ -0,0 +1,54 @@
+/*
+ * 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 classes from "./useAddNewBtn.module.scss";
+
+import React, { useRef } from "react";
+import { AddNewProps } from "./Select.interfaces";
+
+interface Props {
+  addNew?: AddNewProps;
+  filter: string;
+}
+
+export const useAddNewBtn = ({ addNew, filter }: Props) => {
+  const addBtnRef = useRef<HTMLButtonElement>(null);
+
+  const addNewLabel = addNew?.label ?? "Create new";
+
+  const renderAddNew = () =>
+    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>
+    );
+
+  const addNewBtnOptionsContainerClassName = addNew ? classes["has-sibling"] : "";
+
+  return {
+    addNewBtnOptionsContainerClassName,
+    renderAddNew,
+    addBtnRef
+  };
+};

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

@@ -0,0 +1,124 @@
+/*
+ * 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, useState } from "react";
+import { PartialInputProps, SearchProps } from "./Select.interfaces";
+import { Input } from "../Input/Input";
+
+interface Props {
+  search?: SearchProps;
+  optionsCount: number;
+  /**
+   * @deprecated
+   */
+  searchPlaceholder?: string;
+  /**
+   * @deprecated
+   */
+  searchInputProps?: PartialInputProps & { reset?: boolean };
+  searchInputClassName: string;
+  expanded: boolean;
+  setFocusedSelectItem: (idx: number) => void;
+}
+
+export const useSearch = ({
+  search,
+  optionsCount,
+  searchPlaceholder,
+  searchInputProps,
+  searchInputClassName,
+  expanded,
+  setFocusedSelectItem
+}: Props) => {
+  const [filter, setFilter] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+
+  const DEFAULT_RENDER_THRESHOLD = 10;
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;
+  const hasEnoughChildren = optionsCount > threshold;
+
+  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(event.currentTarget.value);
+  };
+
+  const shouldRenderSearch = () => {
+    if (search?.enabled) {
+      return hasEnoughChildren;
+    }
+
+    if (search) {
+      return search.enabled as boolean;
+    }
+
+    return optionsCount > DEFAULT_RENDER_THRESHOLD;
+  };
+
+  const renderSearch = () => (
+    <Input
+      {...(search?.searchInputProps ?? searchInputProps ?? {})}
+      ref={searchInputRef}
+      onFocus={() => setIsSearching(true)}
+      onBlur={() => setIsSearching(false)}
+      onChange={filterResults}
+      className={searchInputClassName}
+      wrapperProps={{
+        className:
+          search?.searchInputProps?.wrapperProps?.className ??
+          searchInputProps?.wrapperProps?.className
+      }}
+      style={{
+        display: expanded ? "block" : "none"
+      }}
+      type="text"
+      name="search-option"
+      placeholder={search?.searchPlaceholder ?? searchPlaceholder}
+    />
+  );
+
+  const resetSearchState = () => {
+    setFilter("");
+    setIsSearching(false);
+    setFocusedSelectItem(-1);
+  };
+
+  const visible = shouldRenderSearch();
+
+  useEffect(() => {
+    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();
+  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);
+
+  useEffect(() => {
+    const searchDeactivated =
+      !visible &&
+      !isSearching; /*solves issue in MultiSelect when we filtered result and selected result causes list to be shorter than threshold so still we have a filter applied but can't change it due to `visible` variable has false  */
+    if (searchDeactivated) {
+      resetSearchState();
+    }
+  }, [isSearching, visible]);
+
+  return {
+    renderSearch,
+    setIsSearching,
+    searchVisible: visible,
+    searchThreshold: threshold,
+    searchInputRef,
+    filter,
+    isSearching
+  };
+};

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

@@ -36,10 +36,6 @@ input {
     justify-content: center;
   }
 
-  .floating-label-active [data-icon]:before {
-    transform: translateY(5px);
-  }
-
   [data-prefix],
   [data-suffix] {
     font-size: var(--form-control-font-size);
@@ -63,9 +59,3 @@ input {
     color: var(--greyed-out);
   }
 }
-
-.floating-label-active [data-prefix],
-.floating-label-active [data-suffix] {
-  padding-top: 1rem;
-  transform: translateY(0);
-}

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

@@ -0,0 +1,27 @@
+/*!
+ * 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.
+ */
+
+@use "src/variables";
+
+.select-label {
+  left: calc(
+    1.25rem + 2px
+  ); // 2px is for offset of the selectwrapper border. It's relative to the parent div which doesn't have a border.
+}
+
+.select-helper-text {
+  margin-top: 0.15rem;
+}

package/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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, ComponentPropsWithRef, ReactElement } from "react";
+import classes from "./MultiSelectWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { MultiSelect } from "../../Select/MultiSelect/MultiSelect";
+import { MultiSelectProps } from "../../Select/Select.interfaces";
+
+interface PartialSelectProps extends Partial<MultiSelectProps> {}
+
+export interface Props
+  extends Omit<ComponentPropsWithRef<"div">, "onChange">,
+    Omit<WrapperProps, "onChange" | "error"> {
+  children: ReactElement[] | ReactElement | number[];
+  placeholder?: string;
+  value: string[];
+  error?: boolean;
+  selectProps?: PartialSelectProps;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
+}
+
+const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    success,
+    value,
+    placeholder,
+    selectProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId, labelId } = useWrapper();
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes["select-label"] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
+      }}
+      error={error}
+    >
+      <MultiSelect
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
+        error={error}
+        success={success}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={`${selectProps?.className ?? ""}`}
+      >
+        {children as ReactElement[]}
+      </MultiSelect>
+    </Wrapper>
+  );
+};
+
+export const MultiSelectWrapper = React.forwardRef(MultiSelectWrapperComponent);

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

@@ -25,7 +25,3 @@
 .select-helper-text {
   margin-top: 0.15rem;
 }
-
-.floating-label-active [data-display] {
-  top: calc(50% + 0.5rem);
-}

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

@@ -17,10 +17,11 @@
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
 import classes from "./SelectWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
-import { Select, Props as SelectProps } from "../../Select/Select";
+import { Select } from "../../Select/SingleSelect/Select";
 import { useWrapper } from "../../../../hooks/useWrapper";
+import { SingleSelectProps } from "../../Select/Select.interfaces";
 
-interface PartialSelectProps extends Partial<SelectProps> {}
+interface PartialSelectProps extends Partial<SingleSelectProps> {}
 
 export interface Props
   extends Omit<ComponentPropsWithRef<"div">, "onChange">,

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

@@ -31,12 +31,6 @@
     @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
 
-    &.floating-label-active {
-      font-size: 0.75rem;
-      transform: translateY(-0.8rem);
-      color: var(--default);
-    }
-
     &.error {
       color: var(--error);
     }

package/src/components/Icon/Icon.module.scss

@@ -337,3 +337,8 @@
   content: "\e9d1";
   @include fontProperties();
 }
+
+.icon-warning-filled:before {
+  content: "\e948";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -85,6 +85,7 @@ export enum Icons {
   TriangleUp = "triangle-up",
   Undo = "undo",
   Warning = "warning",
+  WarningFilled = "warning-filled",
   FileOutline = "file-outline",
   FileUpload = "file-upload-outline",
   FileDownload = "file-download-outline",

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/Pagination/Pagination.tsx

@@ -25,8 +25,8 @@ import classes from "./Pagination.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { IconButton } from "../Button/IconButton";
 import { Icons, Icon } from "../Icon/Icon";
-import { Select } from "../Form/Select/Select";
-import { Option } from "../Form/Select/Option";
+import { Select } from "../Form/Select/SingleSelect/Select";
+import { Option } from "../Form/Select/SingleSelect/Option";
 import { Label } from "../Form/Label/Label";
 
 export type PaginationTranslations = {

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/{hooks/useScroll.test.tsx → components/Tag/RemoveButton.module.scss}

@@ -1,4 +1,4 @@
-/*
+/*!
  * Copyright 2022 OneWelcome B.V.
  *
  *    Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,23 +14,28 @@
  *    limitations under the License.
  */
 
-import React from "react";
-import { fireEvent, render } from "@testing-library/react";
-import { useScroll } from "./useScroll";
+@use "../../mixins.module.scss";
 
-describe("function should be executed", () => {
-  it("should execute", () => {
-    const scrollHandler = jest.fn();
+.remove {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-right: -0.375rem;
 
-    const Component = () => {
-      useScroll(scrollHandler);
-      return <div>Test</div>;
-    };
+  &:hover {
+    border-radius: 0.125rem;
+    background-color: var(--color-black10);
+  }
 
-    render(<Component />);
+  &:active {
+    background-color: var(--color-blue-grey400);
+  }
 
-    expect(scrollHandler).not.toBeCalled();
-    fireEvent.scroll(window, { target: { scrollY: 100 } });
-    expect(scrollHandler).toBeCalledTimes(1);
-  });
-});
+  @include mixins.focusVisibleOutline($outlineOffset: 0);
+
+  .icon {
+    font-size: 0.625rem;
+  }
+}

package/src/components/Tag/RemoveButton.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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, HTMLAttributes, forwardRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+
+import readyclasses from "../../readyclasses.module.scss";
+import classes from "./RemoveButton.module.scss";
+
+export interface Props extends HTMLAttributes<HTMLButtonElement> {
+  removeLabel?: string;
+  label?: string;
+  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const RemoveButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { removeLabel = "Remove", label, onRemove, ...rest }: Props,
+  ref
+) => {
+  return (
+    onRemove && (
+      <button
+        {...rest}
+        ref={ref}
+        className={`${classes["remove"]} ${rest.className ?? ""}`}
+        title=""
+        onClick={onRemove}
+      >
+        <Icon icon={Icons.Times} className={classes["icon"]} />
+        <span className={readyclasses["sr-only"]}>
+          {removeLabel}
+          {label ? " " + label : ""}
+        </span>
+      </button>
+    )
+  );
+};
+
+export const RemoveButton = forwardRef(RemoveButtonComponent);

package/src/components/Tag/Tag.module.scss

@@ -1,8 +1,25 @@
+/*!
+ * 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.
+ */
+
 $tagFontSize: 0.75rem;
 
 .tag {
   font-size: $tagFontSize;
-  padding: 0.375rem 0.7rem;
+  padding: 0.25rem 0.75rem;
+  border: none;
   border-radius: 3.125rem;
   display: inline-flex;
   align-items: center;
@@ -16,8 +33,12 @@ $tagFontSize: 0.75rem;
     background-color: var(--color-blue-grey100);
   }
 
+  &.sharp {
+    border-radius: 0.125rem;
+  }
+
   .label {
-    line-height: $tagFontSize;
+    line-height: 2;
     font-size: inherit;
     color: inherit;
   }