@onewelcome/react-lib-components 7.1.0 → 8.0.0

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.tsx

@@ -14,7 +14,12 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  ReactElement,
+  Fragment
+} from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DataGridCell.module.scss";
 
@@ -22,6 +27,7 @@ export interface Props extends ComponentPropsWithRef<"td"> {
   children?: ReactElement | string | number;
   isLoading?: boolean;
   spacing?: React.CSSProperties;
+  searchValue?: string;
   cellIndex?: number;
   columnLength?: number;
   disableContextMenuColumn?: boolean;
@@ -33,6 +39,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
     className,
     isLoading,
     spacing,
+    searchValue,
     cellIndex,
     columnLength,
     disableContextMenuColumn,
@@ -52,6 +59,31 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
     cellStyle.paddingRight = spacing?.paddingRight;
   }
 
+  //NOTE: we might want to migrate to Highlight API once it's supported by Firefox
+  const renderContent = () => {
+    if (typeof children === "string" && searchValue) {
+      if (!children.toLowerCase().includes(searchValue.toLowerCase())) {
+        return children;
+      }
+
+      const matchingSequence = new RegExp(searchValue, "i").exec(children);
+
+      const parts = children.split(matchingSequence?.[0] ?? "");
+      return parts.map((part, i) => {
+        if (i === parts.length - 1) return <Fragment key={`${part}-${i}`}>{part}</Fragment>;
+
+        return (
+          <Fragment key={`${part}-${i}`}>
+            {part}
+            <mark data-testid={`${matchingSequence}-mark`}>{matchingSequence}</mark>
+          </Fragment>
+        );
+      });
+    }
+
+    return children;
+  };
+
   return (
     <td
       {...rest}
@@ -62,7 +94,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
       {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
       {!isLoading && (
         <Typography className={classes["text"]} variant="body" tag="span">
-          {children}
+          {renderContent()}
         </Typography>
       )}
     </td>

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.tsx

@@ -27,6 +27,7 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
   headers?: HeaderCell[];
   isLoading?: boolean;
   spacing?: React.CSSProperties;
+  searchValue?: string;
   disableContextMenuColumn?: boolean;
   expandableRowProps?: {
     enableExpandableRow: boolean;
@@ -42,6 +43,7 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     children,
     className,
     headers,
+    searchValue,
     isLoading,
     spacing,
     expandableRowProps,
@@ -61,6 +63,7 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
   const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
     if (child) {
       const cellWithSpacing = React.cloneElement(child, {
+        searchValue,
         spacing: spacing,
         cellIndex: index,
         columnLength: headers?.length,

package/src/components/DataGrid/DataGridFilters/DataGridSearchbar.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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, { useState, useEffect } from "react";
+import { InputWrapper } from "../../Form/Wrapper/InputWrapper/InputWrapper";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./DataGridToolbar.module.scss";
+import { InputWrapperProps, useDebouncedCallback } from "../../..";
+
+export interface DataGridSearchbarProps {
+  onSearch: (value: string) => void;
+  initialSearchValue?: string;
+  debounceTime?: number;
+  placeholder?: string;
+  inputWrapperProps?: InputWrapperProps;
+}
+
+export const DataGridSearchbar = ({
+  onSearch,
+  initialSearchValue,
+  debounceTime,
+  inputWrapperProps,
+  placeholder
+}: DataGridSearchbarProps) => {
+  const [search, setSearch] = useState(initialSearchValue ?? "");
+  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);
+  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onSearchCallback(event.target.value);
+    setSearch(event.target.value);
+  };
+
+  useEffect(() => {
+    initialSearchValue && setSearch(initialSearchValue);
+  }, [initialSearchValue]);
+
+  return (
+    <InputWrapper
+      {...inputWrapperProps}
+      className={`${classes["searchbar"]} ${inputWrapperProps?.className ?? ""}`}
+      label={inputWrapperProps?.label ?? ""}
+      onChange={onChange}
+      type="search"
+      name={inputWrapperProps?.name ?? "searchbar"}
+      value={search}
+      inputProps={{
+        ...inputWrapperProps?.inputProps,
+        type: "search",
+        prefix: <Icon icon={Icons.Search} />,
+        placeholder: placeholder ?? "Search items"
+      }}
+    ></InputWrapper>
+  );
+};

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss

@@ -16,7 +16,7 @@
 
 @use "../../../mixins.module.scss";
 
-.toolbar {
+.wrapper {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -25,6 +25,11 @@
   width: 100%;
   padding-bottom: 1rem;
 
+  .searchbar {
+    min-width: 7rem;
+    flex-basis: 15rem;
+  }
+
   .actions-wrapper {
     display: flex;
     align-items: center;

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction, useReducer } from "react";
+import React, { Fragment, useReducer } from "react";
 import { DataGridFilter } from "./DataGridFilter";
 import classes from "./DataGridToolbar.module.scss";
 import {
@@ -26,7 +26,7 @@ import {
 } from "./DataGridFilters.interfaces";
 import { Typography } from "../../Typography/Typography";
 
-export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
+export interface DataGridToolbarProps {
   columnsMetadata: DataGridColumnMetadata[];
   filterValues?: Filter[];
   translations?: FiltersTranslations;
@@ -62,26 +62,19 @@ const filtersReducer = (state: FiltersState, action: FiltersAction): FiltersStat
   }
 };
 
-export const DataGridToolbarComponent: ForwardRefRenderFunction<
-  HTMLDivElement,
-  DataGridToolbarProps
-> = (
-  {
-    columnsMetadata,
-    filterValues,
-    translations,
-    onFilterAdd,
-    onFilterEdit,
-    onFilterDelete,
-    onFiltersClear,
-    ...rest
-  },
-  ref
-) => {
+export const DataGridToolbar = ({
+  columnsMetadata,
+  filterValues,
+  translations,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  onFiltersClear
+}: DataGridToolbarProps) => {
   const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
-    <div {...rest} ref={ref} className={classes["toolbar"]}>
+    <Fragment>
       {state.filters.map(filter => (
         <DataGridFilter
           mode="EDIT"
@@ -119,8 +112,6 @@ export const DataGridToolbarComponent: ForwardRefRenderFunction<
           </button>
         )}
       </div>
-    </div>
+    </Fragment>
   );
 };
-
-export const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);

package/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import classes from "./DataGridToolbar.module.scss";
+
+type Props = ComponentPropsWithRef<"div">;
+
+export const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, ...rest },
+  ref
+) => {
+  return (
+    <div ref={ref} className={classes["wrapper"]} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export const DataGridToolbarWrapper = React.forwardRef(DataGridToolbarWrapperComponent);

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

@@ -24,7 +24,6 @@
 .file-dropzone {
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
-  padding: 0.25rem 1.25rem;
   position: relative;
 
   .file-upload-title {
@@ -117,7 +116,7 @@
 
 .file-selector-sub-text {
   color: var(--greyed-out);
-  padding: 0 1.25rem;
+
   &.error {
     color: var(--error);
     display: block;

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

@@ -315,9 +315,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
         id={multiSelectId.current}
         ref={containerReference}
         onKeyDown={onArrowNavigation}
-        className={`custom-select ${classes.select} ${additionalClasses.join(" ")} ${
-          className ?? ""
-        }`}
+        className={`custom-select ${classes.select} ${additionalClasses.join(" ")}`}
       >
         <div
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}

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

@@ -239,9 +239,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
         {...filterProps(rest, /^data-/)}
         ref={containerReference}
         onKeyDown={onArrowNavigation}
-        className={`custom-select ${classes.select} ${additionalClasses.join(" ")} ${
-          className ?? ""
-        }`}
+        className={`custom-select ${classes.select} ${additionalClasses.join(" ")}`}
       >
         {searchVisible && renderSearch()}
         <button