@onewelcome/react-lib-components 8.0.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,5 +1,5 @@
 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";
@@ -14,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;
@@ -29,6 +32,7 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     enableExpandableRow?: boolean;
     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/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/DataGridToolbar.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { DataGridColumnMetadata, Filter, FiltersTranslations } from "./DataGridFilters.interfaces";
 export interface DataGridToolbarProps {
     columnsMetadata: DataGridColumnMetadata[];
+    customEditTagContent?: React.ReactElement;
     filterValues?: Filter[];
     translations?: FiltersTranslations;
     onFilterAdd?: (filter: Filter) => void;
@@ -9,4 +10,4 @@ export interface DataGridToolbarProps {
     onFilterDelete?: (id: string) => void;
     onFiltersClear?: () => void;
 }
-export declare const DataGridToolbar: ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear }: DataGridToolbarProps) => React.JSX.Element;
+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

@@ -1,7 +1,10 @@
-import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
-type Props = ComponentPropsWithRef<"div">;
+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<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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": "8.0.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";
@@ -33,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;
@@ -48,6 +58,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   enableExpandableRow?: boolean;
   filters?: DataGridToolbarProps;
   search?: DataGridSearchbarProps;
+  toolbarButtons?:
+    | ReactElement<ButtonProps, typeof Button>
+    | ReactElement<ButtonProps, typeof Button>[];
   isLoading?: boolean;
   enableMultiSorting?: boolean;
   spacing?: Spacing;
@@ -66,6 +79,7 @@ const DataGridInner = <T extends {}>(
     enableExpandableRow,
     filters,
     search,
+    toolbarButtons,
     isLoading,
     enableMultiSorting,
     emptyLabel,
@@ -133,11 +147,16 @@ const DataGridInner = <T extends {}>(
         paddingBottom: styleWithSpacing?.paddingBottom
       }}
     >
-      {filters || search ? (
-        <DataGridToolbarWrapper>
-          {search && <DataGridSearchbar {...search} />}
-          {filters && <DataGridToolbar {...filters} />}
-        </DataGridToolbarWrapper>
+      {filters || search || toolbarButtons ? (
+        <DataGridToolbarWrapper
+          filters={
+            <Fragment>
+              {search && <DataGridSearchbar {...search} />}
+              {filters && <DataGridToolbar {...filters} />}
+            </Fragment>
+          }
+          buttons={toolbarButtons}
+        />
       ) : (
         <DataGridActions
           {...actions}

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 {

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

@@ -14,14 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { Fragment, createRef, useState } from "react";
+import React, { Fragment, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import {
   DataGridColumnMetadata,
   Filter,
   FilterEditorMode,
-  FiltersAction,
   PopoverTranslations,
   TagTranslations
 } from "./DataGridFilters.interfaces";
@@ -35,12 +34,12 @@ export type Props = {
   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 const DataGridFilter = ({
@@ -48,14 +47,17 @@ export const DataGridFilter = ({
   filter,
   domRoot,
   columnsMetadata,
-  dispatch,
   onFilterAdd,
   onFilterEdit,
   onFilterDelete,
   tagTranslations,
-  popoverTranslations
+  popoverTranslations,
+  customEditTagContent
 }: Props) => {
-  const wrappingDivRef = createRef<HTMLDivElement>();
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
   const [filterOpen, setFilterOpen] = useState(false);
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
   const {
@@ -76,19 +78,9 @@ export const DataGridFilter = ({
   const onFilterSubmit = () => {
     if (mode === "ADD") {
       const id = generateID();
-
-      dispatch({
-        type: "add",
-        payload: { id, column, operator, value: pickedValues }
-      });
       onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });
     } else if (mode === "EDIT" && filter) {
       const { id } = filter;
-
-      dispatch({
-        type: "edit",
-        payload: { id, column, operator, value: pickedValues }
-      });
       onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });
     }
 
@@ -100,9 +92,8 @@ export const DataGridFilter = ({
     if (!filter) {
       return;
     }
-    const { id } = filter;
 
-    dispatch({ type: "remove", payload: { id } });
+    const { id } = filter;
     onFilterDelete && onFilterDelete(id);
 
     resetFields();
@@ -121,13 +112,18 @@ export const DataGridFilter = ({
         mode={mode}
         onFilterOpen={onFilterOpen}
         onFilterRemove={onFilterRemove}
-        triggerRef={wrappingDivRef}
+        triggerRef={triggerRef}
+        ref={wrappingDivRef}
         filter={filter}
+        translations={tagTranslations}
+        customEditTagContent={customEditTagContent}
       />
       {createPortal(
         <DataGridFilterPopover
+          popoverRef={popoverRef}
           anchorRef={wrappingDivRef}
           isOpen={filterOpen}
+          translations={popoverTranslations}
           column={column}
           columnsMetadata={columnsMetadata}
           values={values}

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

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { useEffect } from "react";
 import classes from "./DataGridFilter.module.scss";
 import { Button } from "../../Button/Button";
 import { Option } from "../../Form/Select/SingleSelect/Option";
@@ -27,9 +27,11 @@ import {
   DefaultOperators,
   PopoverTranslations
 } from "./DataGridFilters.interfaces";
+import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
 
 export type Props = {
-  anchorRef?: React.RefObject<HTMLOrSVGElement>;
+  popoverRef: React.RefObject<HTMLDivElement>;
+  anchorRef?: React.RefObject<HTMLDivElement>;
   isOpen: boolean;
   column: string;
   columnsMetadata: DataGridColumnMetadata[];
@@ -49,6 +51,7 @@ export type Props = {
 };
 
 export const DataGridFilterPopover = ({
+  popoverRef,
   anchorRef,
   isOpen,
   column,
@@ -76,9 +79,19 @@ export const DataGridFilterPopover = ({
     submitButtonTitle = "Apply",
     cancelButtonTitle = "Cancel"
   } = translations || {};
+  useRepeatFocus(popoverRef);
+
+  useEffect(() => {
+    if (isOpen) {
+      popoverRef.current?.focus();
+    }
+  }, [isOpen]);
+
   return (
     <Popover
+      tabIndex={-1}
       anchorEl={anchorRef}
+      ref={popoverRef}
       show={isOpen}
       placement={{ horizontal: "left", vertical: "bottom" }}
       transformOrigin={{ horizontal: "left", vertical: "top" }}

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

@@ -22,7 +22,8 @@ import classes from "./DataGridFilter.module.scss";
 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;
@@ -38,7 +39,6 @@ const EditTagContent = ({ filter }: { filter: Filter }) => {
       {column} {operator} {value.length > 0 && <b>{value[0]}</b>}
       {value.length >= 2 && (
         <>
-          {" "}
           or <b> {value.length - 1} other</b>
         </>
       )}
@@ -57,7 +57,7 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
     onFilterRemove,
     onFilterOpen,
     translations,
-
+    customEditTagContent,
     ...rest
   }: DataGridFilterTagProps,
   ref
@@ -67,8 +67,13 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
   const shouldRenderEditTag = mode === "EDIT" && filter;
 
   return (
-    <div {...rest} ref={triggerRef} className={classes["filter-wrapper"]}>
-      <button type="button" className={classes["filter-button"]} onClick={onFilterOpen}>
+    <div {...rest} ref={ref} className={classes["filter-wrapper"]}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={classes["filter-button"]}
+        onClick={onFilterOpen}
+      >
         {shouldRenderAddTag && (
           <Fragment>
             <Icon icon={Icons.AddCircle} />
@@ -79,11 +84,17 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
         )}
         {shouldRenderEditTag && (
           <Typography variant="body" className={classes["caption"]}>
-            <EditTagContent filter={filter} />
+            {customEditTagContent ? (
+              React.cloneElement(customEditTagContent, { filter })
+            ) : (
+              <EditTagContent filter={filter} />
+            )}
           </Typography>
         )}
       </button>
-      {shouldRenderEditTag && <RemoveButton onRemove={onFilterRemove} />}
+      {shouldRenderEditTag && (
+        <RemoveButton className={classes["remove-button"]} onRemove={onFilterRemove} />
+      )}
     </div>
   );
 };