@onewelcome/react-lib-components 1.2.0 → 1.4.0

package/src/DataGrid/DataGridActions/DataGridActions.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, Fragment, useRef, useState } from "react";
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  Fragment,
+  useRef,
+  useState
+} from "react";
 import { Button, Props as ButtonProps } from "../../Button/Button";
 import { IconButton } from "../../Button/IconButton";
 import { Icon, Icons } from "../../Icon/Icon";
@@ -29,97 +35,99 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   addBtnProps?: ButtonProps;
   columnsBtnProps?: ButtonProps;
   searchBtnProps?: ButtonProps;
+  searchIconBtnProps?: ButtonProps;
   headers: HeaderCell[];
   onColumnToggled: (colName: ColumnName) => void;
 }
 
-export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      className,
-      enableAddBtn,
-      enableColumnsBtn,
-      enableSearchBtn,
-      addBtnProps = {},
-      columnsBtnProps = {},
-      searchBtnProps = {},
-      headers,
-      onColumnToggled,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
-    const [showColsPopover, setShowColsPopover] = useState(false);
-    const showColumnBtn = useRef<HTMLButtonElement>(null);
+const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    className,
+    enableAddBtn,
+    enableColumnsBtn,
+    enableSearchBtn,
+    addBtnProps = {},
+    columnsBtnProps = {},
+    searchBtnProps = {},
+    searchIconBtnProps = {},
+    headers,
+    onColumnToggled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
+  const [showColsPopover, setShowColsPopover] = useState(false);
+  const showColumnBtn = useRef<HTMLButtonElement>(null);
 
-    return isHidden ? null : (
-      <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
-        <div className={classes["left-actions"]}>
-          {enableAddBtn && (
+  return isHidden ? null : (
+    <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
+      <div className={classes["left-actions"]}>
+        {enableAddBtn && (
+          <Button
+            color="primary"
+            startIcon={<Icon icon={Icons.Plus} />}
+            title="Add item"
+            type="button"
+            variant="outline"
+            children="Add item"
+            {...addBtnProps}
+          />
+        )}
+      </div>
+      <div className={classes["right-actions"]}>
+        {enableColumnsBtn && (
+          <Fragment>
             <Button
-              color="primary"
-              startIcon={<Icon icon={Icons.Plus} />}
-              title="Add item"
-              type="button"
-              variant="outline"
-              children="Add item"
-              {...addBtnProps}
+              startIcon={<Icon icon={Icons.Change} />}
+              title="Show/hide columns"
+              variant="text"
+              children="Columns"
+              {...columnsBtnProps}
+              className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
+              ref={showColumnBtn}
+              onClick={() => setShowColsPopover(true)}
+            />
+            <IconButton
+              title="Show/hide columns"
+              {...columnsBtnProps}
+              onClick={() => setShowColsPopover(true)}
+              className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
+            >
+              <Icon icon={Icons.Change} />
+            </IconButton>
+            <DataGridColumnsToggle
+              aria-hidden={!showColsPopover}
+              open={showColsPopover}
+              headers={headers}
+              onClose={() => setShowColsPopover(false)}
+              onToggleClicked={onColumnToggled}
+              anchorEl={showColumnBtn}
             />
-          )}
-        </div>
-        <div className={classes["right-actions"]}>
-          {enableColumnsBtn && (
-            <Fragment>
-              <Button
-                startIcon={<Icon icon={Icons.Change} />}
-                title="Show/hide columns"
-                variant="text"
-                children="Columns"
-                {...columnsBtnProps}
-                className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
-                ref={showColumnBtn}
-                onClick={() => setShowColsPopover(true)}
-              />
-              <IconButton
-                title="Show/hide columns"
-                {...columnsBtnProps}
-                onClick={() => setShowColsPopover(true)}
-                className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
-              >
-                <Icon icon={Icons.Change} />
-              </IconButton>
-              <DataGridColumnsToggle
-                aria-hidden={!showColsPopover}
-                open={showColsPopover}
-                headers={headers}
-                onClose={() => setShowColsPopover(false)}
-                onToggleClicked={onColumnToggled}
-                anchorEl={showColumnBtn}
-              />
-            </Fragment>
-          )}
-          {enableSearchBtn && (
-            <Fragment>
-              <Button
-                startIcon={<Icon icon={Icons.TableSearch} />}
-                title="Search"
-                variant="text"
-                children="Search"
-                {...searchBtnProps}
-                className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
-              />
-              <IconButton
-                title="Search"
-                {...searchBtnProps}
-                className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
-              >
-                <Icon icon={Icons.TableSearch} />
-              </IconButton>
-            </Fragment>
-          )}
-        </div>
+          </Fragment>
+        )}
+        {enableSearchBtn && (
+          <Fragment>
+            <Button
+              startIcon={<Icon icon={Icons.TableSearch} />}
+              title="Search"
+              variant="text"
+              children="Search"
+              {...searchBtnProps}
+              className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
+            />
+            <IconButton
+              title="Search"
+              {...searchIconBtnProps}
+              className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
+            >
+              <Icon icon={Icons.TableSearch} />
+            </IconButton>
+          </Fragment>
+        )}
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
+
+export const DataGridActions = React.forwardRef(DataGridActionsComponent);

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { Fragment, useState } from "react";
+import React, { ForwardRefRenderFunction, Fragment, useState } from "react";
 import { IconButton } from "../../Button/IconButton";
 import { Toggle } from "../../Form/Toggle/Toggle";
 import { Icon, Icons } from "../../Icon/Icon";
@@ -35,70 +35,70 @@ export interface Props extends PopoverProps {
   domRoot?: HTMLElement;
 }
 
-export const DataGridColumnsToggle = React.forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      open,
-      headers,
-      titleLabel = "Show columns",
-      closeButtonTitle = "Close show columns dialog",
-      onClose,
-      onToggleClicked,
-      className,
-      domRoot = document.body,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const [id] = useState(generateID());
-    const labelledId = id + "_header";
+const DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    open,
+    headers,
+    titleLabel = "Show columns",
+    closeButtonTitle = "Close show columns dialog",
+    onClose,
+    onToggleClicked,
+    className,
+    domRoot = document.body,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [id] = useState(generateID());
+  const labelledId = id + "_header";
 
-    const toggles = headers.map(item => (
-      <Toggle
-        key={item.name}
-        name={item.name}
-        checked={!item.hidden}
-        onChange={() => onToggleClicked(item.name)}
-      >
-        {item.headline}
-      </Toggle>
-    ));
+  const toggles = headers.map(item => (
+    <Toggle
+      key={item.name}
+      name={item.name}
+      checked={!item.hidden}
+      onChange={() => onToggleClicked(item.name)}
+    >
+      {item.headline}
+    </Toggle>
+  ));
 
-    const handleBackdropClick = () => onClose();
+  const handleBackdropClick = () => onClose();
 
-    return (
-      <Popover
-        {...rest}
-        ref={ref}
-        className={`${classes["popover"]} ${className}`}
-        show={open}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={labelledId}
-      >
-        {open &&
-          createPortal(
-            <div className={classes["backdrop"]} onClick={handleBackdropClick}></div>,
-            domRoot
-          )}
-        {open && (
-          <Fragment>
-            <div className={classes["header"]}>
-              <Typography id={labelledId} className={classes["title"]} tag="span" variant="h4">
-                {titleLabel}
-              </Typography>
-              <IconButton
-                onClick={onClose}
-                className={`${classes["close-btn"]}`}
-                title={closeButtonTitle}
-              >
-                <Icon icon={Icons.Times} />
-              </IconButton>
-            </div>
-            <div className={classes["content"]}>{toggles}</div>
-          </Fragment>
+  return (
+    <Popover
+      {...rest}
+      ref={ref}
+      className={`${classes["popover"]} ${className}`}
+      show={open}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={labelledId}
+    >
+      {open &&
+        createPortal(
+          <div className={classes["backdrop"]} onClick={handleBackdropClick}></div>,
+          domRoot
         )}
-      </Popover>
-    );
-  }
-);
+      {open && (
+        <Fragment>
+          <div className={classes["header"]}>
+            <Typography id={labelledId} className={classes["title"]} tag="span" variant="h4">
+              {titleLabel}
+            </Typography>
+            <IconButton
+              onClick={onClose}
+              className={`${classes["close-btn"]}`}
+              title={closeButtonTitle}
+            >
+              <Icon icon={Icons.Times} />
+            </IconButton>
+          </div>
+          <div className={classes["content"]}>{toggles}</div>
+        </Fragment>
+      )}
+    </Popover>
+  );
+};
+
+export const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);

package/src/DataGrid/DataGridBody/DataGridCell.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactChild } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactChild } from "react";
 import { Typography } from "../../Typography/Typography";
 import classes from "./DataGridCell.module.scss";
 
@@ -27,48 +27,46 @@ export interface Props extends ComponentPropsWithRef<"td"> {
   disableContextMenuColumn?: boolean;
 }
 
-export const DataGridCell = React.forwardRef<HTMLTableCellElement, Props>(
-  (
-    {
-      children,
-      className,
-      isLoading,
-      spacing,
-      cellIndex,
-      columnLength,
-      disableContextMenuColumn,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    let cellStyle: React.CSSProperties = {};
+const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
+  {
+    children,
+    className,
+    isLoading,
+    spacing,
+    cellIndex,
+    columnLength,
+    disableContextMenuColumn,
+    ...rest
+  }: Props,
+  ref
+) => {
+  let cellStyle: React.CSSProperties = {};
 
-    if (cellIndex === 0) {
-      cellStyle.paddingLeft = spacing?.paddingLeft;
-    }
-    if (
-      (cellIndex === columnLength && !disableContextMenuColumn) ||
-      (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
-    ) {
-      cellStyle.paddingRight = spacing?.paddingRight;
-    }
-
-    return (
-      <td
-        {...rest}
-        ref={ref}
-        style={{ ...rest.style, ...cellStyle }}
-        className={`${classes["cell"]} ${className ?? ""}`}
-      >
-        {isLoading && (
-          <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>
-        )}
-        {!isLoading && (
-          <Typography variant="body" tag="span">
-            {children}
-          </Typography>
-        )}
-      </td>
-    );
+  if (cellIndex === 0) {
+    cellStyle.paddingLeft = spacing?.paddingLeft;
+  }
+  if (
+    (cellIndex === columnLength && !disableContextMenuColumn) ||
+    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
+  ) {
+    cellStyle.paddingRight = spacing?.paddingRight;
   }
-);
+
+  return (
+    <td
+      {...rest}
+      ref={ref}
+      style={{ ...rest.style, ...cellStyle }}
+      className={`${classes["cell"]} ${className ?? ""}`}
+    >
+      {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
+      {!isLoading && (
+        <Typography variant="body" tag="span">
+          {children}
+        </Typography>
+      )}
+    </td>
+  );
+};
+
+export const DataGridCell = React.forwardRef(DataGridCellComponent);

package/src/DataGrid/DataGridBody/DataGridRow.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { HeaderCell } from "../datagrid.interfaces";
 import classes from "./DataGridRow.module.scss";
 
@@ -25,34 +25,34 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
   disableContextMenuColumn?: boolean;
 }
 
-export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
-  (
-    { children, className, headers, isLoading, spacing, disableContextMenuColumn, ...rest }: Props,
-    ref
-  ) => {
-    const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
-      if (child) {
-        const cellWithSpacing = React.cloneElement(child, {
-          spacing: spacing,
-          cellIndex: index,
-          columnLength: headers?.length,
-          disableContextMenuColumn
-        });
+const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (
+  { children, className, headers, isLoading, spacing, disableContextMenuColumn, ...rest }: Props,
+  ref
+) => {
+  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+    if (child) {
+      const cellWithSpacing = React.cloneElement(child, {
+        spacing: spacing,
+        cellIndex: index,
+        columnLength: headers?.length,
+        disableContextMenuColumn
+      });
 
-        const visible = headers && headers.length > index ? !headers[index].hidden : true;
-        return visible && cellWithSpacing;
-      }
-      return null;
-    });
+      const visible = headers && headers.length > index ? !headers[index].hidden : true;
+      return visible && cellWithSpacing;
+    }
+    return null;
+  });
 
-    const classNames = [classes["row"]];
-    className && classNames.push(className);
-    isLoading && classNames.push(classes["loading"]);
+  const classNames = [classes["row"]];
+  className && classNames.push(className);
+  isLoading && classNames.push(classes["loading"]);
 
-    return (
-      <tr {...rest} ref={ref} className={classNames.join(" ")}>
-        {visibleCells}
-      </tr>
-    );
-  }
-);
+  return (
+    <tr {...rest} ref={ref} className={classNames.join(" ")}>
+      {visibleCells}
+    </tr>
+  );
+};
+
+export const DataGridRow = React.forwardRef(DataGridRowComponent);