@onewelcome/react-lib-components 7.1.0 → 8.1.0

package/dist/esm/Notifications/BaseModal/BaseModal.esm.js

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { useGetDomRoot } from '../../src/hooks/useGetDomRoot.esm.js';
 import classes from './BaseModal.module.scss.esm.js';
 import { labelId, descriptionId } from './BaseModalContext.esm.js';
-import { useRepeatFocus } from './useRepeatFocus.esm.js';
+import { useRepeatFocus } from '../../src/hooks/useRepeatFocus.esm.js';
 
 /*
  * Copyright 2022 OneWelcome B.V.

package/dist/esm/Notifications/BaseModal/BaseModal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseModal.esm.js","sources":["../../../../../../src/components/Notifications/BaseModal/BaseModal.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  useEffect,\n  useRef,\n  ReactElement,\n  RefObject,\n  createRef\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport classes from \"./BaseModal.module.scss\";\nimport { labelId, descriptionId } from \"./BaseModalContext\";\nimport { useRepeatFocus } from \"./useRepeatFocus\";\n\nconst SCROLL_PROPERTY_NAME = \"overflow\";\nconst SCROLL_PROPERTY_VALUE = \"hidden\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  id: string;\n  children: React.ReactNode;\n  open: boolean;\n  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;\n  className?: string;\n  containerProps?: ComponentPropsWithRef<\"div\">;\n  backdropProps?: ComponentPropsWithRef<\"div\">;\n  labelledby?: string;\n  describedby?: string;\n  disableEscapeKeyDown?: boolean;\n  disableBackdrop?: boolean;\n  forceContainerOpen?: boolean;\n  zIndex?: number;\n  domRoot?: HTMLElement;\n}\n\nexport const useSetBodyScroll = (open: boolean) => {\n  const hideBodyScroll = () => {\n    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;\n  };\n\n  const showBodyScroll = () => {\n    const allModalsClosed =\n      document.querySelectorAll(\"[role=dialog][data-hidden=false]\").length === 0;\n    if (allModalsClosed) {\n      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);\n    }\n  };\n\n  useEffect(() => {\n    if (open) {\n      hideBodyScroll();\n    } else {\n      showBodyScroll();\n    }\n  }, [open]);\n};\n\nconst BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    id,\n    children,\n    open,\n    onClose,\n    className = \"\",\n    containerProps,\n    backdropProps,\n    labelledby,\n    describedby,\n    disableEscapeKeyDown = false,\n    disableBackdrop = false,\n    forceContainerOpen = false,\n    zIndex,\n    domRoot,\n    ...rest\n  }: Props,\n  ref\n) => {\n  useSetBodyScroll(open);\n  const wrappingDivRef = useRef<HTMLDivElement>(null);\n  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disableEscapeKeyDown && event.key === \"Escape\") {\n      event.stopPropagation();\n      onClose?.();\n    }\n  };\n\n  useRepeatFocus(modalRef);\n\n  useEffect(() => {\n    if (open) {\n      modalRef.current?.focus();\n    }\n  }, [open]);\n\n  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();\n\n  const renderChildren = () =>\n    React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        return React.cloneElement(child as ReactElement, {\n          onClose: child.props.onClose ?? onClose\n        });\n      }\n      return child;\n    });\n\n  return (\n    <div ref={wrappingDivRef}>\n      {createPortal(\n        <div\n          {...rest}\n          ref={modalRef}\n          id={id}\n          className={`${classes[\"modal\"]} ${open ? classes[\"visible\"] : \"\"} ${className}`}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={labelledby ?? labelId(id)}\n          aria-describedby={describedby ?? descriptionId(id)}\n          aria-hidden={!open}\n          tabIndex={-1}\n          data-hidden={!open}\n          onKeyDown={handleEscKeyPress}\n          style={{ zIndex }}\n        >\n          <div\n            {...backdropProps}\n            aria-hidden={true}\n            className={`${classes[\"backdrop\"]} ${backdropProps?.className ?? \"\"}`}\n            onClick={handleBackdropClick}\n          ></div>\n          {forceContainerOpen ? (\n            <div\n              {...containerProps}\n              aria-hidden={!open}\n              data-element=\"dialog\"\n              hidden={!open}\n              style={{ zIndex: zIndex && zIndex + 1 }}\n              className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n            >\n              {renderChildren()}\n            </div>\n          ) : (\n            open && (\n              <div\n                {...containerProps}\n                data-element=\"dialog\"\n                style={{ zIndex: zIndex && zIndex + 1 }}\n                className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n              >\n                {renderChildren()}\n              </div>\n            )\n          )}\n        </div>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const BaseModal = React.forwardRef(BaseModalComponent);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseModal.esm.js","sources":["../../../../../../src/components/Notifications/BaseModal/BaseModal.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  useEffect,\n  useRef,\n  ReactElement,\n  RefObject,\n  createRef\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../../hooks/useGetDomRoot\";\nimport classes from \"./BaseModal.module.scss\";\nimport { labelId, descriptionId } from \"./BaseModalContext\";\nimport { useRepeatFocus } from \"../../../hooks/useRepeatFocus\";\n\nconst SCROLL_PROPERTY_NAME = \"overflow\";\nconst SCROLL_PROPERTY_VALUE = \"hidden\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  id: string;\n  children: React.ReactNode;\n  open: boolean;\n  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;\n  className?: string;\n  containerProps?: ComponentPropsWithRef<\"div\">;\n  backdropProps?: ComponentPropsWithRef<\"div\">;\n  labelledby?: string;\n  describedby?: string;\n  disableEscapeKeyDown?: boolean;\n  disableBackdrop?: boolean;\n  forceContainerOpen?: boolean;\n  zIndex?: number;\n  domRoot?: HTMLElement;\n}\n\nexport const useSetBodyScroll = (open: boolean) => {\n  const hideBodyScroll = () => {\n    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;\n  };\n\n  const showBodyScroll = () => {\n    const allModalsClosed =\n      document.querySelectorAll(\"[role=dialog][data-hidden=false]\").length === 0;\n    if (allModalsClosed) {\n      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);\n    }\n  };\n\n  useEffect(() => {\n    if (open) {\n      hideBodyScroll();\n    } else {\n      showBodyScroll();\n    }\n  }, [open]);\n};\n\nconst BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    id,\n    children,\n    open,\n    onClose,\n    className = \"\",\n    containerProps,\n    backdropProps,\n    labelledby,\n    describedby,\n    disableEscapeKeyDown = false,\n    disableBackdrop = false,\n    forceContainerOpen = false,\n    zIndex,\n    domRoot,\n    ...rest\n  }: Props,\n  ref\n) => {\n  useSetBodyScroll(open);\n  const wrappingDivRef = useRef<HTMLDivElement>(null);\n  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disableEscapeKeyDown && event.key === \"Escape\") {\n      event.stopPropagation();\n      onClose?.();\n    }\n  };\n\n  useRepeatFocus(modalRef);\n\n  useEffect(() => {\n    if (open) {\n      modalRef.current?.focus();\n    }\n  }, [open]);\n\n  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();\n\n  const renderChildren = () =>\n    React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        return React.cloneElement(child as ReactElement, {\n          onClose: child.props.onClose ?? onClose\n        });\n      }\n      return child;\n    });\n\n  return (\n    <div ref={wrappingDivRef}>\n      {createPortal(\n        <div\n          {...rest}\n          ref={modalRef}\n          id={id}\n          className={`${classes[\"modal\"]} ${open ? classes[\"visible\"] : \"\"} ${className}`}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={labelledby ?? labelId(id)}\n          aria-describedby={describedby ?? descriptionId(id)}\n          aria-hidden={!open}\n          tabIndex={-1}\n          data-hidden={!open}\n          onKeyDown={handleEscKeyPress}\n          style={{ zIndex }}\n        >\n          <div\n            {...backdropProps}\n            aria-hidden={true}\n            className={`${classes[\"backdrop\"]} ${backdropProps?.className ?? \"\"}`}\n            onClick={handleBackdropClick}\n          ></div>\n          {forceContainerOpen ? (\n            <div\n              {...containerProps}\n              aria-hidden={!open}\n              data-element=\"dialog\"\n              hidden={!open}\n              style={{ zIndex: zIndex && zIndex + 1 }}\n              className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n            >\n              {renderChildren()}\n            </div>\n          ) : (\n            open && (\n              <div\n                {...containerProps}\n                data-element=\"dialog\"\n                style={{ zIndex: zIndex && zIndex + 1 }}\n                className={`${classes[\"container\"]} ${containerProps?.className ?? \"\"}`}\n              >\n                {renderChildren()}\n              </div>\n            )\n          )}\n        </div>,\n        root\n      )}\n    </div>\n  );\n};\n\nexport const BaseModal = React.forwardRef(BaseModalComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/src/components/DataGrid/DataGrid.d.ts

@@ -1,9 +1,10 @@
 import { ComponentPropsWithRef, ReactElement, Ref } from "react";
-import { Props as ButtonProps } from "../Button/Button";
+import { Button, Props as ButtonProps } from "../Button/Button";
 import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing } from "../../hooks/useSpacing";
 import { DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
+import { DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
     children: ({ item, index }: {
         item: T;
@@ -13,6 +14,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     initialSort?: Sort;
     onSort?: OnSortFunction;
     headers: HeaderCell[];
+    /**
+     * @deprecated use the `toolbarButtons` prop instead
+     */
     actions?: {
         enableAddBtn?: boolean;
         enableColumnsBtn?: boolean;
@@ -26,10 +30,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     paginationProps?: PaginationProps;
     disableContextMenuColumn?: boolean;
     enableExpandableRow?: boolean;
-    filters?: {
-        enable: boolean;
-        filtersProps: DataGridToolbarProps;
-    };
+    filters?: DataGridToolbarProps;
+    search?: DataGridSearchbarProps;
+    toolbarButtons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
     isLoading?: boolean;
     enableMultiSorting?: boolean;
     spacing?: Spacing;

package/dist/esm/src/components/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -9,6 +9,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
     headers: HeaderCell[];
     isLoading?: boolean;
     disableContextMenuColumn?: boolean;
+    searchValue?: string;
     emptyLabel?: string;
     spacing?: React.CSSProperties;
 }

package/dist/esm/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.d.ts

@@ -3,6 +3,7 @@ export interface Props extends ComponentPropsWithRef<"td"> {
     children?: ReactElement | string | number;
     isLoading?: boolean;
     spacing?: React.CSSProperties;
+    searchValue?: string;
     cellIndex?: number;
     columnLength?: number;
     disableContextMenuColumn?: boolean;

package/dist/esm/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.d.ts

@@ -4,6 +4,7 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
     headers?: HeaderCell[];
     isLoading?: boolean;
     spacing?: React.CSSProperties;
+    searchValue?: string;
     disableContextMenuColumn?: boolean;
     expandableRowProps?: {
         enableExpandableRow: boolean;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilter.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
-import { DataGridColumnMetadata, Filter, FilterEditorMode, FiltersAction, PopoverTranslations, TagTranslations } from "./DataGridFilters.interfaces";
+import { DataGridColumnMetadata, Filter, FilterEditorMode, PopoverTranslations, TagTranslations } from "./DataGridFilters.interfaces";
 export type Props = {
     mode: FilterEditorMode;
     domRoot?: HTMLElement;
     filter?: Filter;
     columnsMetadata: DataGridColumnMetadata[];
-    dispatch: React.Dispatch<FiltersAction>;
     onFilterAdd?: (filter: Filter) => void;
     onFilterEdit?: (filter: Filter) => void;
     onFilterDelete?: (id: string) => void;
     tagTranslations?: TagTranslations;
     popoverTranslations?: PopoverTranslations;
+    customEditTagContent?: React.ReactElement;
 };
-export declare const DataGridFilter: ({ mode, filter, domRoot, columnsMetadata, dispatch, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations }: Props) => React.JSX.Element;
+export declare const DataGridFilter: ({ mode, filter, domRoot, columnsMetadata, onFilterAdd, onFilterEdit, onFilterDelete, tagTranslations, popoverTranslations, customEditTagContent }: Props) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { DataGridColumnMetadata, PopoverTranslations } from "./DataGridFilters.interfaces";
 export type Props = {
-    anchorRef?: React.RefObject<HTMLOrSVGElement>;
+    popoverRef: React.RefObject<HTMLDivElement>;
+    anchorRef?: React.RefObject<HTMLDivElement>;
     isOpen: boolean;
     column: string;
     columnsMetadata: DataGridColumnMetadata[];
@@ -19,4 +20,4 @@ export type Props = {
     setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
     translations?: PopoverTranslations;
 };
-export declare const DataGridFilterPopover: ({ anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }: Props) => React.JSX.Element;
+export declare const DataGridFilterPopover: ({ popoverRef, anchorRef, isOpen, column, columnsMetadata, values, pickedValues, operator, operators, onFilterSubmit, resetFields, setFilterOpen, setColumn, setOperator, setOperators, setValues, setPickedValues, translations }: Props) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilterTag.d.ts

@@ -1,7 +1,8 @@
 import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 import { Filter, FilterEditorMode, TagTranslations } from "./DataGridFilters.interfaces";
 export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
-    triggerRef: React.Ref<HTMLDivElement>;
+    customEditTagContent?: React.ReactElement;
+    triggerRef: React.Ref<HTMLButtonElement>;
     filter?: Filter;
     mode: FilterEditorMode;
     onFilterRemove: () => void;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridSearchbar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { InputWrapperProps } from "../../..";
+export interface DataGridSearchbarProps {
+    onSearch: (value: string) => void;
+    initialSearchValue?: string;
+    debounceTime?: number;
+    placeholder?: string;
+    inputWrapperProps?: InputWrapperProps;
+}
+export declare const DataGridSearchbar: ({ onSearch, initialSearchValue, debounceTime, inputWrapperProps, placeholder }: DataGridSearchbarProps) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridToolbar.d.ts

@@ -1,7 +1,8 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import React from "react";
 import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
-export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
+export interface DataGridToolbarProps {
     columnsMetadata: DataGridColumnMetadata[];
+    customEditTagContent?: React.ReactElement;
     filterValues?: Filter[];
     translations?: FiltersTranslations;
     onFilterAdd?: (filter: Filter) => void;
@@ -9,5 +10,4 @@ export interface DataGridToolbarProps extends ComponentPropsWithRef<"div"> {
     onFilterDelete?: (id: string) => void;
     onFiltersClear?: () => void;
 }
-export declare const DataGridToolbarComponent: ForwardRefRenderFunction<HTMLDivElement, DataGridToolbarProps>;
-export declare const DataGridToolbar: React.ForwardRefExoticComponent<Omit<DataGridToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, customEditTagContent }: DataGridToolbarProps) => React.JSX.Element;

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridToolbarWrapper.d.ts

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction, ReactElement } from "react";
+import { Button } from "../../Button/Button";
+import { ButtonProps } from "../../..";
+interface Props extends ComponentPropsWithRef<"div"> {
+    filters?: React.JSX.Element;
+    buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
+}
+export declare const DataGridToolbarWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const DataGridToolbarWrapper: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/src/components/DataGrid/DataGridFilters/useFiltersReducer.d.ts

@@ -0,0 +1,8 @@
+import { Filter, FiltersState } from "./DataGridFilters.interfaces";
+export declare const useFiltersReducer: (filterValues: Filter[] | undefined) => {
+    state: FiltersState;
+    addFilter: (filter: Filter) => void;
+    deleteFilter: (id: string) => void;
+    editFilter: (filter: Filter) => void;
+    clearFilters: () => void;
+};

package/dist/esm/src/components/DataGrid/DataGridFilters/useFiltersReducer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/components/DataGrid/testUtils.d.ts

@@ -9,5 +9,6 @@ export declare const useMockFilteringLogic: <T>(data: T[], filterValues: Filter[
     onFilterDelete: (id: string) => void;
     onFiltersClear: () => void;
     gridData: T[];
+    setGridData: import("react").Dispatch<import("react").SetStateAction<T[]>>;
     filters: Filter[];
 };

package/dist/esm/src/components/Icon/Icon.d.ts

@@ -80,7 +80,8 @@ export declare enum Icons {
     FileAltIcon = "file-alt",
     AddCircle = "add-circle",
     ZoomIn = "zoom-in",
-    ZoomOut = "zoom-out"
+    ZoomOut = "zoom-out",
+    ArrowUp = "arrow-up"
 }
 type Tag = "span" | "div" | "i";
 export interface Props extends ComponentPropsWithRef<"div"> {

package/dist/esm/{Notifications/BaseModal → src/hooks}/useRepeatFocus.esm.js

@@ -22,7 +22,18 @@ import { useEffect } from 'react';
  */
 const useRepeatFocus = (ref) => {
     const getFocusableElement = (element, position) => {
-        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        const baseSelectors = [
+            "button",
+            "[href]",
+            "input",
+            "select",
+            "textarea",
+            "[tabindex]",
+            "[contenteditable]"
+        ];
+        const focusableSelectors = baseSelectors
+            .map(selector => `${selector}:not([tabindex="-1"])`)
+            .join(", ");
         const focusableElements = element.querySelectorAll(focusableSelectors);
         if (position === "first") {
             return focusableElements[0] || null;

package/dist/esm/src/hooks/useRepeatFocus.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepeatFocus.esm.js","sources":["../../../../../../src/hooks/useRepeatFocus.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { RefObject, useEffect } from \"react\";\n\n/**\n * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,\n * the focus will be repeated and the user will not lose their entire focusable element to an element in the background\n * that is being blocked by the modal.\n */\n\nexport const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {\n  const getFocusableElement = (\n    element: HTMLElement,\n    position: \"first\" | \"last\"\n  ): HTMLElement | null => {\n    const baseSelectors = [\n      \"button\",\n      \"[href]\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"[tabindex]\",\n      \"[contenteditable]\"\n    ];\n    const focusableSelectors = baseSelectors\n      .map(selector => `${selector}:not([tabindex=\"-1\"])`)\n      .join(\", \");\n    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);\n\n    if (position === \"first\") {\n      return focusableElements[0] || null;\n    } else if (position === \"last\") {\n      return focusableElements[focusableElements.length - 1] || null;\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    if (!ref.current || !open) return;\n\n    const lastFocusableElement = getFocusableElement(ref.current, \"last\");\n    const firstFocusableElement = getFocusableElement(ref.current, \"first\");\n\n    if (!lastFocusableElement || !firstFocusableElement) return;\n\n    const handleTabKeyPress = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusableElement) {\n          event.preventDefault();\n          lastFocusableElement?.focus();\n        }\n      } else if (document.activeElement === lastFocusableElement) {\n        event.preventDefault();\n        firstFocusableElement?.focus();\n      }\n    };\n\n    lastFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n    firstFocusableElement.addEventListener(\"keydown\", handleTabKeyPress);\n\n    return () => {\n      lastFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n      firstFocusableElement.removeEventListener(\"keydown\", handleTabKeyPress);\n    };\n  }, [ref, open]);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIH;;;;AAIG;AAEU,MAAA,cAAc,GAAG,CAAC,GAA8B,KAAI;AAC/D,IAAA,MAAM,mBAAmB,GAAG,CAC1B,OAAoB,EACpB,QAA0B,KACJ;AACtB,QAAA,MAAM,aAAa,GAAG;YACpB,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,UAAU;YACV,YAAY;YACZ,mBAAmB;SACpB,CAAC;QACF,MAAM,kBAAkB,GAAG,aAAa;aACrC,GAAG,CAAC,QAAQ,IAAI,CAAG,EAAA,QAAQ,uBAAuB,CAAC;aACnD,IAAI,CAAC,IAAI,CAAC,CAAC;QACd,MAAM,iBAAiB,GAAG,OAAO,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC;AAEpF,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,iBAAiB,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;SACrC;AAAM,aAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YAC9B,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;SAChE;AAED,QAAA,OAAO,IAAI,CAAC;AACd,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI;YAAE,OAAO;QAElC,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACtE,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAExE,QAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,qBAAqB;YAAE,OAAO;AAE5D,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAoB,KAAI;AACjD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;gBAAE,OAAO;AAEhC,YAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,qBAAqB,EAAE;oBACpD,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,oBAAA,oBAAoB,aAApB,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApB,oBAAoB,CAAE,KAAK,EAAE,CAAC;iBAC/B;aACF;AAAM,iBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,oBAAoB,EAAE;gBAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,gBAAA,qBAAqB,aAArB,qBAAqB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAArB,qBAAqB,CAAE,KAAK,EAAE,CAAC;aAChC;AACH,SAAC,CAAC;AAEF,QAAA,oBAAoB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACpE,QAAA,qBAAqB,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAErE,QAAA,OAAO,MAAK;AACV,YAAA,oBAAoB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACvE,YAAA,qBAAqB,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC1E,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AAClB;;;;"}

package/dist/esm/src/index.d.ts

@@ -126,6 +126,7 @@ export { DataGridDrawerItem } from "./components/DataGrid/DataGridBody/DataGridD
 export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem";
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
+export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
 /** Admin */

package/dist/esm/src/index.esm.js

@@ -64,6 +64,7 @@ export { DataGrid } from '../DataGrid/DataGrid.esm.js';
 export { DataGridRow } from '../DataGrid/DataGridBody/DataGridRow/DataGridRow.esm.js';
 export { DataGridDrawerItem } from '../DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.esm.js';
 export { DataGridCell } from '../DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js';
+export { useFiltersReducer } from '../DataGrid/DataGridFilters/useFiltersReducer.esm.js';
 export { Banner } from '../Notifications/Banner/Banner.esm.js';
 export { MicrofrontendContainer } from '../admin/layout/MicrofrontendContainer/MicrofrontendContainer.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/esm/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "7.1.0",
+  "version": "8.1.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",

package/src/components/DataGrid/DataGrid.tsx

@@ -14,8 +14,15 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from "react";
-import { Props as ButtonProps } from "../Button/Button";
+import React, {
+  ComponentPropsWithRef,
+  Fragment,
+  ReactElement,
+  Ref,
+  useEffect,
+  useState
+} from "react";
+import { Button, Props as ButtonProps } from "../Button/Button";
 import classes from "./DataGrid.module.scss";
 import { DataGridHeader } from "./DataGridHeader/DataGridHeader";
 import { DataGridActions } from "./DataGridActions/DataGridActions";
@@ -24,6 +31,8 @@ import { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
 import { Pagination, Props as PaginationProps } from "../Pagination/Pagination";
 import { Spacing, useSpacing } from "../../hooks/useSpacing";
 import { DataGridToolbar, DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
+import { DataGridToolbarWrapper } from "./DataGridFilters/DataGridToolbarWrapper";
+import { DataGridSearchbar, DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
 
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
@@ -31,6 +40,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   initialSort?: Sort;
   onSort?: OnSortFunction;
   headers: HeaderCell[];
+  /**
+   * @deprecated use the `toolbarButtons` prop instead
+   */
   actions?: {
     enableAddBtn?: boolean;
     enableColumnsBtn?: boolean;
@@ -44,10 +56,11 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   paginationProps?: PaginationProps;
   disableContextMenuColumn?: boolean;
   enableExpandableRow?: boolean;
-  filters?: {
-    enable: boolean;
-    filtersProps: DataGridToolbarProps;
-  };
+  filters?: DataGridToolbarProps;
+  search?: DataGridSearchbarProps;
+  toolbarButtons?:
+    | ReactElement<ButtonProps, typeof Button>
+    | ReactElement<ButtonProps, typeof Button>[];
   isLoading?: boolean;
   enableMultiSorting?: boolean;
   spacing?: Spacing;
@@ -65,6 +78,8 @@ const DataGridInner = <T extends {}>(
     disableContextMenuColumn,
     enableExpandableRow,
     filters,
+    search,
+    toolbarButtons,
     isLoading,
     enableMultiSorting,
     emptyLabel,
@@ -132,8 +147,16 @@ const DataGridInner = <T extends {}>(
         paddingBottom: styleWithSpacing?.paddingBottom
       }}
     >
-      {filters?.enable ? (
-        <DataGridToolbar {...filters.filtersProps} />
+      {filters || search || toolbarButtons ? (
+        <DataGridToolbarWrapper
+          filters={
+            <Fragment>
+              {search && <DataGridSearchbar {...search} />}
+              {filters && <DataGridToolbar {...filters} />}
+            </Fragment>
+          }
+          buttons={toolbarButtons}
+        />
       ) : (
         <DataGridActions
           {...actions}
@@ -164,6 +187,7 @@ const DataGridInner = <T extends {}>(
             disableContextMenuColumn={disableContextMenuColumn}
             emptyLabel={emptyLabel}
             spacing={styleWithSpacing}
+            searchValue={search?.initialSearchValue}
           >
             {children}
           </DataGridBody>

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

@@ -27,6 +27,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children
   headers: HeaderCell[];
   isLoading?: boolean;
   disableContextMenuColumn?: boolean;
+  searchValue?: string;
   emptyLabel?: string;
   spacing?: React.CSSProperties;
 }
@@ -42,6 +43,7 @@ const DataGridBodyInner = <T extends {}>(
     disableContextMenuColumn,
     emptyLabel,
     spacing,
+    searchValue,
     ...rest
   }: Props<T>,
   ref: Ref<HTMLTableSectionElement>
@@ -77,6 +79,7 @@ const DataGridBodyInner = <T extends {}>(
 
     return data?.map((item, index) => {
       return React.cloneElement(children({ item, index }), {
+        searchValue: searchValue,
         headers,
         spacing,
         disableContextMenuColumn

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

@@ -21,10 +21,19 @@
   justify-content: center;
   align-items: center;
   gap: 0.375rem;
+  min-height: 1.5rem;
   padding: 0.25rem 0.75rem 0.25rem 0.5rem;
   border-radius: 3.125rem;
   background-color: var(--color-blue-grey100);
 
+  &:hover {
+    background-color: var(--color-blue-grey200);
+  }
+
+  &:active {
+    background-color: var(--color-primary100);
+  }
+
   .filter-button {
     display: flex;
     justify-content: flex-start;
@@ -39,18 +48,13 @@
       margin-right: -0.25rem;
     }
 
-    &:hover {
-      border-radius: 0.125rem;
-      background-color: var(--color-black10);
-    }
-
-    &:active {
-      background-color: var(--color-blue-grey400);
-    }
-
     @include mixins.focusVisibleOutline($outlineOffset: 0);
   }
 
+  .remove-button {
+    border-radius: 1.25rem;
+  }
+
   .caption {
     font-size: var(--font-size-data-grid);
     line-height: var(--data-grid-line-height);
@@ -84,8 +88,7 @@
     display: flex;
     gap: 1rem;
 
-    & > *:last-child,
-    *:first-child {
+    & > *:first-child {
       flex-grow: 1.8;
       flex-shrink: 0;
       margin-top: 0;
@@ -96,6 +99,13 @@
       flex-shrink: 0;
       margin-top: 0;
     }
+
+    & > *:last-child {
+      flex-basis: 15rem;
+      flex-grow: 1.8;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
   }
 
   .actions {