@onewelcome/react-lib-components 6.1.0 → 6.2.0

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/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/Tag/RemoveButton.module.scss

@@ -0,0 +1,41 @@
+/*!
+ * 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 "../../mixins.module.scss";
+
+.remove {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-right: -0.375rem;
+
+  &:hover {
+    border-radius: 0.125rem;
+    background-color: var(--color-black10);
+  }
+
+  &:active {
+    background-color: var(--color-blue-grey400);
+  }
+
+  @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;
   }

package/src/components/Tag/Tag.tsx

@@ -18,6 +18,7 @@ import React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from "rea
 import { Icon, Icons } from "../Icon/Icon";
 import classes from "./Tag.module.scss";
 import { Typography } from "../Typography/Typography";
+import { RemoveButton, Props as RemoveButtonProps } from "./RemoveButton";
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   variant?: "enabled" | "disabled";
@@ -25,10 +26,21 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   backgroundColor?: string;
   color?: string;
   children?: string;
+  shape?: "rounded" | "sharp";
+  removeButton?: RemoveButtonProps;
 }
 
 const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, variant, icon, backgroundColor, color, ...rest }: Props,
+  {
+    children,
+    variant,
+    icon,
+    backgroundColor,
+    color,
+    shape = "rounded",
+    removeButton = {},
+    ...rest
+  }: Props,
   ref
 ) => {
   const determineIcon = () => {
@@ -43,25 +55,23 @@ const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
-  const determineClassName = () => {
-    if (variant === "enabled") {
-      return classes["tag-enabled"];
-    } else if (variant === "disabled") {
-      return classes["tag-disabled"];
-    }
-  };
+  const tagClasses = [classes["tag"]];
+  variant === "enabled" && tagClasses.push(classes["tag-enabled"]);
+  variant === "disabled" && tagClasses.push(classes["tag-disabled"]);
+  shape === "sharp" && tagClasses.push(classes["sharp"]);
 
   return (
     <div
-      ref={ref}
-      className={`${determineClassName()} ${classes["tag"]} ${rest.className ?? ""}`}
-      style={{ backgroundColor, color }}
       {...rest}
+      ref={ref as any}
+      className={`${tagClasses.join(" ")} ${rest.className ?? ""}`}
+      style={{ backgroundColor, color }}
     >
       {determineIcon()}
       <Typography spacing={{ marginBottom: 0 }} variant="body" className={classes["label"]}>
         {children}
       </Typography>
+      <RemoveButton {...removeButton} label={children} />
     </div>
   );
 };

package/src/font/icomoon.svg

@@ -79,5 +79,6 @@
 <glyph unicode="&#xe945;" glyph-name="upload" d="M933.648 598.588h-240.942v361.412h-361.412v-361.412h-240.942l421.648-421.648 421.648 421.648zM451.764 478.116v361.412h120.47v-361.412h70.475l-130.711-130.711-130.711 130.711h70.475zM90.352 56.47h843.294v-120.47h-843.294v120.47z" />
 <glyph unicode="&#xe946;" glyph-name="reply" d="M98.011 739.109l366.202-157.014-366.689 48.762 0.488 108.251zM463.726 313.905l-366.202-157.014v108.251l366.202 48.762zM0.488 886.857l-0.488-341.334 731.429-97.523-731.429-97.523 0.488-341.334 1023.512 438.857-1023.512 438.857z" />
 <glyph unicode="&#xe947;" glyph-name="save" d="M796.445 959.998h-682.667c-63.147 0-113.777-51.2-113.777-113.777v-796.444c0-62.577 50.631-113.777 113.777-113.777h796.444c62.577 0 113.777 51.2 113.777 113.777v682.667l-227.556 227.556zM910.224 49.775h-796.444v796.444h635.449l160.996-160.996v-635.449zM512.001 447.998c-94.436 0-170.667-76.231-170.667-170.667s76.231-170.667 170.667-170.667c94.436 0 170.667 76.231 170.667 170.667s-76.231 170.667-170.667 170.667zM170.668 789.331h512v-227.556h-512v227.556z" />
+<glyph unicode="&#xe948;" glyph-name="warning-filled" d="M0 5.818h1024l-511.999 884.364-511.999-884.364zM558.545 145.454h-93.091v93.091h93.091v-93.091zM558.545 331.636h-93.091v186.182h93.091v-186.182z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>