@onewelcome/react-lib-components 5.2.0 → 6.1.0

package/dist/esm/src/components/Form/Select/Select.test.d.ts

@@ -1 +1,63 @@
-export {};
+import React from "react";
+import { Props } from "./Select";
+export declare const defaultParams: Props;
+export declare const createSelect: (params?: ((defaultParams: Props) => Props) | undefined) => {
+    select: HTMLElement;
+    button: HTMLElement;
+    list: Element | null;
+    dropdownWrapper: Element | null;
+    container: HTMLElement;
+    baseElement: HTMLElement;
+    debug: (baseElement?: Element | DocumentFragment | (Element | DocumentFragment)[] | undefined, maxLength?: number | undefined, options?: import("pretty-format").PrettyFormatOptions | undefined) => void;
+    rerender: (ui: React.ReactElement<any, string | React.JSXElementConstructor<any>>) => void;
+    unmount: () => void;
+    asFragment: () => DocumentFragment;
+    getByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement;
+    getAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement[];
+    queryByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement | null;
+    queryAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement[];
+    findByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+};

package/dist/esm/src/components/Form/Select/SelectKeyboardNavigation.test.d.ts

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

package/dist/esm/src/components/Form/Select/SelectService.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { Position, UseArrowNavigationParams, UseSelectPositionListParams } from "./Select.interfaces";
-export declare const useArrowNavigation: ({ expanded, setExpanded, isSearching, setIsSearching, setFocusedSelectItem, onOptionChangeHandler, childrenCount, setShouldClick, searchInputRef, renderSearchCondition }: UseArrowNavigationParams) => {
+/** @scope . */
+export declare const useArrowNavigation: ({ expanded, setExpanded, isSearching, setIsSearching, setFocusedSelectItem, onOptionChangeHandler, childrenCount, setShouldClick, searchInputRef, addBtnRef, renderThreshold }: UseArrowNavigationParams) => {
     onArrowNavigation: (event: React.KeyboardEvent) => void;
 };
-export declare const useSelectPositionList: ({ expanded, optionListReference, containerReference }: UseSelectPositionListParams) => {
+export declare const useSelectPositionList: ({ expanded, optionListReference, addBtnRef, containerReference }: UseSelectPositionListParams) => {
     optionsListMaxHeight: string;
     opacity: number;
     setOpacity: React.Dispatch<React.SetStateAction<number>>;

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

@@ -69,7 +69,10 @@ export declare enum Icons {
     Warning = "warning",
     FileOutline = "file-outline",
     FileUpload = "file-upload-outline",
-    FileDownload = "file-download-outline"
+    FileDownload = "file-download-outline",
+    UploadOutline = "upload-outline",
+    ReplyOutline = "reply-outline",
+    SaveOutline = "save-outline"
 }
 type Tag = "span" | "div" | "i";
 export interface Props extends ComponentPropsWithRef<"div"> {

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

@@ -3,7 +3,7 @@ import { IconProps, Icon } from "../../index";
 export type AnchorType = "external" | "internal" | "download";
 export interface Props extends ComponentPropsWithRef<"a"> {
     prefixIcon?: ReactElement<IconProps, typeof Icon>;
-    color?: "primary" | "secondary" | "tertiary";
+    color?: "primary" | "success" | "danger" | "warning";
     display?: "link" | "button";
     buttonVariant?: "outline" | "text" | "fill";
     type?: AnchorType;

package/dist/esm/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { SnackbarOptionsProps } from "../interfaces";
+import { DeprecatedEnqueueSnackbarType } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 interface SnackbarContextProps {
-    enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueSuccessSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueWarningSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+    enqueueSnackbar: DeprecatedEnqueueSnackbarType;
+    enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
+    enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
+    enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
     setSnackbarHeight: (id: string, height: number) => void;
     snackbars: Item[];
 }

package/dist/esm/src/components/Notifications/Snackbar/interfaces.d.ts

@@ -10,3 +10,9 @@ export interface SnackbarOptionsProps {
     duration?: number;
     onClose?: () => void;
 }
+export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
+    title?: string;
+    content?: string;
+}
+export type DeprecatedEnqueueSnackbarType = (propsOrTitle: EnqueueSnackbarProps | string | undefined, content?: string, options?: SnackbarOptionsProps) => void;
+export declare function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps;

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.d.ts

@@ -1,6 +1,6 @@
 export declare const useSnackbar: () => {
-    enqueueWarningSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
-    enqueueErrorSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
-    enqueueSuccessSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
-    enqueueSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueWarningSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
+    enqueueErrorSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
+    enqueueSuccessSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
+    enqueueSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
 };

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.test.d.ts

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

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

@@ -5,5 +5,4 @@ export interface Props extends ComponentPropsWithRef<"div"> {
     direction: "horizontal" | "vertical";
     textPosition?: "bottom" | "right";
 }
-export declare const gapBetweenStepsInRem = 0.5;
 export declare const Stepper: ({ steps, direction, textPosition, className, ...rest }: Props) => React.JSX.Element;

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -6,8 +6,9 @@ import React, { HTMLAttributes, ReactElement } from "react";
 interface CSSProperties {
     colorFocus?: string;
     colorPrimary?: string;
-    colorSecondary?: string;
-    colorTertiary?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorDanger?: string;
     colorPrimary100?: string;
     colorPrimary300?: string;
     colorPrimary500?: string;
@@ -58,18 +59,18 @@ interface CSSProperties {
     buttonPrimaryHoverColor?: string;
     buttonPrimaryFocusedColor?: string;
     buttonOutlineHoverTextColor?: string;
-    buttonSecondaryDefaultColor?: string;
-    buttonSecondaryHoverColor?: string;
-    buttonSecondaryFocusedColor?: string;
-    buttonSecondaryPressedColor?: string;
-    buttonWarningDefaultColor?: string;
-    buttonWarningHoverColor?: string;
-    buttonWarningFocusedColor?: string;
-    buttonWarningPressedColor?: string;
+    buttonSuccessDefaultColor?: string;
+    buttonSuccessHoverColor?: string;
+    buttonSuccessFocusedColor?: string;
+    buttonSuccessPressedColor?: string;
     buttonDangerDefaultColor?: string;
     buttonDangerHoverColor?: string;
     buttonDangerFocusedColor?: string;
     buttonDangerPressedColor?: string;
+    buttonWarningDefaultColor?: string;
+    buttonWarningHoverColor?: string;
+    buttonWarningFocusedColor?: string;
+    buttonWarningPressedColor?: string;
     buttonDefaultColor?: string;
     buttonDefaultHoverColor?: string;
     buttonDefaultFocusedColor?: string;

package/dist/esm/src/hooks/usePosition.d.ts

@@ -38,7 +38,7 @@ export interface Position {
     bottom: PositionType;
     left: PositionType;
 }
-type PositionType = number | "initial";
+export type PositionType = number | "initial";
 export declare const usePosition: (providedConfigObject?: ConfigObject) => {
     top: PositionType;
     bottom: PositionType;

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

@@ -1 +1 @@
-{"version":3,"file":"usePosition.esm.js","sources":["../../../../../../src/hooks/usePosition.ts"],"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, { useState } from \"react\";\nimport { useDebouncedCallback } from \"./useDebouncedCallback\";\n\nexport interface ConfigObject {\n  relativeElement: RefElement;\n  elementToBePositioned: RefElement;\n  transformOrigin?: Placement;\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n}\n\nexport enum horizontal {\n  LEFT = \"left\",\n  CENTER = \"center\",\n  CENTER_H = \"centerh\",\n  RIGHT = \"right\"\n}\n\nexport enum vertical {\n  TOP = \"top\",\n  CENTER = \"center\",\n  CENTER_V = \"centerv\",\n  BOTTOM = \"bottom\"\n}\n\nexport type HorizontalPlacement = `${horizontal}`;\nexport type VerticalPlacement = `${vertical}`;\n\ntype Axis = \"vertical\" | \"horizontal\";\ntype RefElement = React.RefObject<HTMLOrSVGElement> | undefined;\n\ninterface DomRectObject {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  center: number;\n  centerh: number;\n  centerv: number;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n}\n\nexport interface Placement {\n  horizontal: HorizontalPlacement;\n  vertical: VerticalPlacement;\n}\n\nexport interface Offset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface Position {\n  top: PositionType;\n  right: PositionType;\n  bottom: PositionType;\n  left: PositionType;\n}\n\ninterface Dimensions {\n  height: number;\n  width: number;\n}\n\ntype PositionType = number | \"initial\";\n\nconst defaultConfigObject: ConfigObject = {\n  relativeElement: undefined,\n  elementToBePositioned: undefined,\n  transformOrigin: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  placement: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  offset: {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0\n  },\n  debounceAmount: 20\n};\n\n/* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain*/\nexport const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {\n  const configObject = { ...defaultConfigObject, ...providedConfigObject };\n  const [initialCalculationDone, setInitialCalculationDone] = useState(false);\n\n  if (configObject.transformOrigin === undefined) {\n    configObject.transformOrigin = defaultConfigObject.transformOrigin;\n  }\n\n  if (configObject.placement === undefined) {\n    configObject.placement = defaultConfigObject.placement;\n  }\n\n  if (configObject.offset === undefined) {\n    configObject.offset = defaultConfigObject.offset;\n  }\n\n  const [position, setPosition] = useState<Position>({\n    left: 0,\n    top: 0,\n    right: \"initial\",\n    bottom: \"initial\"\n  });\n\n  const _fixPossibleViewportOverflow = (\n    value: number,\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    elDimensions: Dimensions\n  ) => {\n    let returnValue = value;\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"top\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"center\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"bottom\" && returnValue < 0)\n    ) {\n      returnValue = 0;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" &&\n        returnValue > window.innerWidth - elDimensions.width) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"horizontal\" &&\n        returnValue > window.innerWidth - elDimensions.width)\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"top\" &&\n        returnValue > window.innerHeight - elDimensions.height) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"vertical\" &&\n        returnValue > window.innerHeight - elDimensions.height)\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"right\" &&\n      returnValue > window.innerWidth - elDimensions.width\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"bottom\" &&\n      returnValue > window.innerHeight - elDimensions.height\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    return returnValue;\n  };\n\n  const _applyOffsetToPlacementValue = (\n    value: number,\n    requestedReturnValue: Axis,\n    transformOrigin: Placement\n  ) => {\n    let returnValue = value;\n    if (\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.left !== 0) ||\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.right !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"left\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.left!;\n        returnValue -= configObject.offset?.right!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"right\") {\n        returnValue -= configObject.offset?.left!;\n        returnValue += configObject.offset?.right!;\n      }\n    }\n\n    if (\n      (requestedReturnValue === \"vertical\" && configObject.offset?.top !== 0) ||\n      (requestedReturnValue === \"vertical\" && configObject.offset?.bottom !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"top\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.top!;\n        returnValue -= configObject.offset?.bottom!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"bottom\") {\n        returnValue -= configObject.offset?.top!;\n        returnValue += configObject.offset?.bottom!;\n      }\n    }\n\n    return returnValue;\n  };\n\n  const _calculateInitialPlacementValue = (\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    placementOriginDefinition: HorizontalPlacement | VerticalPlacement,\n    elDimensions: Dimensions\n  ) => {\n    let value = 0;\n\n    if (\n      transformOrigin[requestedReturnValue] === \"left\" ||\n      transformOrigin[requestedReturnValue] === \"top\"\n    ) {\n      value = relEl[placementOriginDefinition];\n    } else if (transformOrigin[requestedReturnValue] === \"center\") {\n      value =\n        relEl[placementOriginDefinition] -\n        elDimensions[requestedReturnValue === \"horizontal\" ? \"width\" : \"height\"] / 2;\n    } else if (\n      transformOrigin[requestedReturnValue] === \"right\" ||\n      transformOrigin[requestedReturnValue] === \"bottom\"\n    ) {\n      value =\n        window[requestedReturnValue === \"horizontal\" ? \"innerWidth\" : \"innerHeight\"] -\n        relEl[placementOriginDefinition];\n    }\n\n    return value;\n  };\n\n  /**\n   *\n   * @param requestedReturnValue whether the requested return value is for the horizontal or vertical axis\n   * @returns either the horizontally centered placement definition (centerh) or the vertically centered one (centerv)\n   */\n  const _determineCenteredPlacementOrigin = (requestedReturnValue: Axis) => {\n    if (requestedReturnValue === \"horizontal\") {\n      return \"centerh\";\n    } else if (requestedReturnValue === \"vertical\") {\n      return \"centerv\";\n    }\n    throw new Error(\n      `the requested return value isn't \"vertical\" or \"horizontal\" ${requestedReturnValue} was given.`\n    );\n  };\n\n  const _calculatePlacementValue = (\n    transformOrigin: Placement,\n    placement: HorizontalPlacement | VerticalPlacement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    elDimensions: Dimensions\n  ): number => {\n    const placementOriginDefinition =\n      placement === \"center\" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;\n\n    const value = _calculateInitialPlacementValue(\n      transformOrigin,\n      requestedReturnValue,\n      relEl,\n      placementOriginDefinition,\n      elDimensions\n    );\n\n    const valueWithOffset = _applyOffsetToPlacementValue(\n      value,\n      requestedReturnValue,\n      transformOrigin\n    );\n\n    const valueCorrectionForViewportOverflow = _fixPossibleViewportOverflow(\n      valueWithOffset,\n      transformOrigin,\n      requestedReturnValue,\n      elDimensions\n    );\n\n    return valueCorrectionForViewportOverflow;\n  };\n\n  const _calculatePlacement = (relEl: DomRectObject, elDimensions: Dimensions, axis: Axis) => {\n    const placementValue = _calculatePlacementValue(\n      configObject.transformOrigin!,\n      configObject.placement![axis]!,\n      axis,\n      relEl,\n      elDimensions\n    );\n\n    let direction = \"left\";\n    let oppositeDirection = \"right\";\n\n    if (axis === \"horizontal\" && configObject.transformOrigin?.horizontal === \"right\") {\n      direction = \"right\";\n      oppositeDirection = \"left\";\n    } else if (axis === \"horizontal\") {\n      direction = \"left\";\n      oppositeDirection = \"right\";\n    }\n\n    if (axis === \"vertical\" && configObject.transformOrigin?.vertical === \"bottom\") {\n      direction = \"bottom\";\n      oppositeDirection = \"top\";\n    } else if (axis === \"vertical\") {\n      direction = \"top\";\n      oppositeDirection = \"bottom\";\n    }\n\n    setPosition(prevState => ({\n      ...prevState,\n      [direction]: placementValue,\n      [oppositeDirection]: \"initial\"\n    }));\n  };\n\n  const calculatePosition = useDebouncedCallback(() => {\n    if (!configObject.relativeElement?.current || !configObject.elementToBePositioned?.current)\n      return;\n    const relativeElRect = (configObject.relativeElement!\n      .current as HTMLElement)!.getBoundingClientRect();\n    const elementToBePositionedDimensions: Dimensions = {\n      height: (configObject.elementToBePositioned!.current as HTMLElement).offsetHeight,\n      width: (configObject.elementToBePositioned!.current as HTMLElement).offsetWidth\n    };\n\n    /** We want to add a center (horizontal and vertical) property to the DOMRect object. Since it's a special object we can't modify so we clone it and add it. */\n    const clonedRelEl = {\n      top: relativeElRect.top,\n      right: relativeElRect.right,\n      bottom: relativeElRect.bottom,\n      center: 0,\n      centerv: relativeElRect.top + relativeElRect.height / 2,\n      centerh: relativeElRect.left + relativeElRect.width / 2,\n      left: relativeElRect.left,\n      width: relativeElRect.width,\n      height: relativeElRect.height,\n      x: relativeElRect.x,\n      y: relativeElRect.y\n    };\n\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"horizontal\");\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"vertical\");\n\n    if (!initialCalculationDone) {\n      setInitialCalculationDone(true);\n    }\n  }, configObject.debounceAmount ?? 20);\n\n  return {\n    top: position.top,\n    bottom: position.bottom,\n    left: position.left,\n    right: position.right,\n    calculatePosition,\n    initialCalculationDone\n  };\n};\n"],"names":["horizontal","vertical","defaultConfigObject","relativeElement","undefined","elementToBePositioned","transformOrigin","placement","offset","top","right","bottom","left","debounceAmount","usePosition","providedConfigObject","configObject","initialCalculationDone","setInitialCalculationDone","useState","position","setPosition","_fixPossibleViewportOverflow","value","requestedReturnValue","elDimensions","returnValue","window","innerWidth","width","innerHeight","height","_applyOffsetToPlacementValue","_a","_b","_c","_d","_e","_f","_g","_h","_j","_k","_l","_m","_calculateInitialPlacementValue","relEl","placementOriginDefinition","_determineCenteredPlacementOrigin","Error","_calculatePlacementValue","valueWithOffset","valueCorrectionForViewportOverflow","_calculatePlacement","axis","placementValue","direction","oppositeDirection","prevState","calculatePosition","useDebouncedCallback","current","relativeElRect","getBoundingClientRect","elementToBePositionedDimensions","offsetHeight","offsetWidth","clonedRelEl","center","centerv","centerh","x","y"],"mappings":"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"}
+{"version":3,"file":"usePosition.esm.js","sources":["../../../../../../src/hooks/usePosition.ts"],"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, { useState } from \"react\";\nimport { useDebouncedCallback } from \"./useDebouncedCallback\";\n\nexport interface ConfigObject {\n  relativeElement: RefElement;\n  elementToBePositioned: RefElement;\n  transformOrigin?: Placement;\n  placement?: Placement;\n  offset?: Offset;\n  debounceAmount?: number;\n}\n\nexport enum horizontal {\n  LEFT = \"left\",\n  CENTER = \"center\",\n  CENTER_H = \"centerh\",\n  RIGHT = \"right\"\n}\n\nexport enum vertical {\n  TOP = \"top\",\n  CENTER = \"center\",\n  CENTER_V = \"centerv\",\n  BOTTOM = \"bottom\"\n}\n\nexport type HorizontalPlacement = `${horizontal}`;\nexport type VerticalPlacement = `${vertical}`;\n\ntype Axis = \"vertical\" | \"horizontal\";\ntype RefElement = React.RefObject<HTMLOrSVGElement> | undefined;\n\ninterface DomRectObject {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  center: number;\n  centerh: number;\n  centerv: number;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n}\n\nexport interface Placement {\n  horizontal: HorizontalPlacement;\n  vertical: VerticalPlacement;\n}\n\nexport interface Offset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface Position {\n  top: PositionType;\n  right: PositionType;\n  bottom: PositionType;\n  left: PositionType;\n}\n\ninterface Dimensions {\n  height: number;\n  width: number;\n}\n\nexport type PositionType = number | \"initial\";\n\nconst defaultConfigObject: ConfigObject = {\n  relativeElement: undefined,\n  elementToBePositioned: undefined,\n  transformOrigin: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  placement: {\n    horizontal: \"left\",\n    vertical: \"top\"\n  },\n  offset: {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0\n  },\n  debounceAmount: 20\n};\n\n/* eslint-disable @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain*/\nexport const usePosition = (providedConfigObject: ConfigObject = defaultConfigObject) => {\n  const configObject = { ...defaultConfigObject, ...providedConfigObject };\n  const [initialCalculationDone, setInitialCalculationDone] = useState(false);\n\n  if (configObject.transformOrigin === undefined) {\n    configObject.transformOrigin = defaultConfigObject.transformOrigin;\n  }\n\n  if (configObject.placement === undefined) {\n    configObject.placement = defaultConfigObject.placement;\n  }\n\n  if (configObject.offset === undefined) {\n    configObject.offset = defaultConfigObject.offset;\n  }\n\n  const [position, setPosition] = useState<Position>({\n    left: 0,\n    top: 0,\n    right: \"initial\",\n    bottom: \"initial\"\n  });\n\n  const _fixPossibleViewportOverflow = (\n    value: number,\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    elDimensions: Dimensions\n  ) => {\n    let returnValue = value;\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"top\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"center\" && returnValue < 0) ||\n      (transformOrigin[requestedReturnValue] === \"bottom\" && returnValue < 0)\n    ) {\n      returnValue = 0;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"left\" &&\n        returnValue > window.innerWidth - elDimensions.width) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"horizontal\" &&\n        returnValue > window.innerWidth - elDimensions.width)\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      (transformOrigin[requestedReturnValue] === \"top\" &&\n        returnValue > window.innerHeight - elDimensions.height) ||\n      (transformOrigin[requestedReturnValue] === \"center\" &&\n        requestedReturnValue === \"vertical\" &&\n        returnValue > window.innerHeight - elDimensions.height)\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"right\" &&\n      returnValue > window.innerWidth - elDimensions.width\n    ) {\n      returnValue = window.innerWidth - elDimensions.width;\n    }\n\n    if (\n      transformOrigin[requestedReturnValue] === \"bottom\" &&\n      returnValue > window.innerHeight - elDimensions.height\n    ) {\n      returnValue = window.innerHeight - elDimensions.height;\n    }\n\n    return returnValue;\n  };\n\n  const _applyOffsetToPlacementValue = (\n    value: number,\n    requestedReturnValue: Axis,\n    transformOrigin: Placement\n  ) => {\n    let returnValue = value;\n    if (\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.left !== 0) ||\n      (requestedReturnValue === \"horizontal\" && configObject.offset?.right !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"left\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.left!;\n        returnValue -= configObject.offset?.right!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"right\") {\n        returnValue -= configObject.offset?.left!;\n        returnValue += configObject.offset?.right!;\n      }\n    }\n\n    if (\n      (requestedReturnValue === \"vertical\" && configObject.offset?.top !== 0) ||\n      (requestedReturnValue === \"vertical\" && configObject.offset?.bottom !== 0)\n    ) {\n      if (\n        transformOrigin[requestedReturnValue] === \"top\" ||\n        transformOrigin[requestedReturnValue] === \"center\"\n      ) {\n        returnValue += configObject.offset?.top!;\n        returnValue -= configObject.offset?.bottom!;\n      }\n\n      if (transformOrigin[requestedReturnValue] === \"bottom\") {\n        returnValue -= configObject.offset?.top!;\n        returnValue += configObject.offset?.bottom!;\n      }\n    }\n\n    return returnValue;\n  };\n\n  const _calculateInitialPlacementValue = (\n    transformOrigin: Placement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    placementOriginDefinition: HorizontalPlacement | VerticalPlacement,\n    elDimensions: Dimensions\n  ) => {\n    let value = 0;\n\n    if (\n      transformOrigin[requestedReturnValue] === \"left\" ||\n      transformOrigin[requestedReturnValue] === \"top\"\n    ) {\n      value = relEl[placementOriginDefinition];\n    } else if (transformOrigin[requestedReturnValue] === \"center\") {\n      value =\n        relEl[placementOriginDefinition] -\n        elDimensions[requestedReturnValue === \"horizontal\" ? \"width\" : \"height\"] / 2;\n    } else if (\n      transformOrigin[requestedReturnValue] === \"right\" ||\n      transformOrigin[requestedReturnValue] === \"bottom\"\n    ) {\n      value =\n        window[requestedReturnValue === \"horizontal\" ? \"innerWidth\" : \"innerHeight\"] -\n        relEl[placementOriginDefinition];\n    }\n\n    return value;\n  };\n\n  /**\n   *\n   * @param requestedReturnValue whether the requested return value is for the horizontal or vertical axis\n   * @returns either the horizontally centered placement definition (centerh) or the vertically centered one (centerv)\n   */\n  const _determineCenteredPlacementOrigin = (requestedReturnValue: Axis) => {\n    if (requestedReturnValue === \"horizontal\") {\n      return \"centerh\";\n    } else if (requestedReturnValue === \"vertical\") {\n      return \"centerv\";\n    }\n    throw new Error(\n      `the requested return value isn't \"vertical\" or \"horizontal\" ${requestedReturnValue} was given.`\n    );\n  };\n\n  const _calculatePlacementValue = (\n    transformOrigin: Placement,\n    placement: HorizontalPlacement | VerticalPlacement,\n    requestedReturnValue: Axis,\n    relEl: DomRectObject,\n    elDimensions: Dimensions\n  ): number => {\n    const placementOriginDefinition =\n      placement === \"center\" ? _determineCenteredPlacementOrigin(requestedReturnValue) : placement;\n\n    const value = _calculateInitialPlacementValue(\n      transformOrigin,\n      requestedReturnValue,\n      relEl,\n      placementOriginDefinition,\n      elDimensions\n    );\n\n    const valueWithOffset = _applyOffsetToPlacementValue(\n      value,\n      requestedReturnValue,\n      transformOrigin\n    );\n\n    const valueCorrectionForViewportOverflow = _fixPossibleViewportOverflow(\n      valueWithOffset,\n      transformOrigin,\n      requestedReturnValue,\n      elDimensions\n    );\n\n    return valueCorrectionForViewportOverflow;\n  };\n\n  const _calculatePlacement = (relEl: DomRectObject, elDimensions: Dimensions, axis: Axis) => {\n    const placementValue = _calculatePlacementValue(\n      configObject.transformOrigin!,\n      configObject.placement![axis]!,\n      axis,\n      relEl,\n      elDimensions\n    );\n\n    let direction = \"left\";\n    let oppositeDirection = \"right\";\n\n    if (axis === \"horizontal\" && configObject.transformOrigin?.horizontal === \"right\") {\n      direction = \"right\";\n      oppositeDirection = \"left\";\n    } else if (axis === \"horizontal\") {\n      direction = \"left\";\n      oppositeDirection = \"right\";\n    }\n\n    if (axis === \"vertical\" && configObject.transformOrigin?.vertical === \"bottom\") {\n      direction = \"bottom\";\n      oppositeDirection = \"top\";\n    } else if (axis === \"vertical\") {\n      direction = \"top\";\n      oppositeDirection = \"bottom\";\n    }\n\n    setPosition(prevState => ({\n      ...prevState,\n      [direction]: placementValue,\n      [oppositeDirection]: \"initial\"\n    }));\n  };\n\n  const calculatePosition = useDebouncedCallback(() => {\n    if (!configObject.relativeElement?.current || !configObject.elementToBePositioned?.current)\n      return;\n    const relativeElRect = (configObject.relativeElement!\n      .current as HTMLElement)!.getBoundingClientRect();\n    const elementToBePositionedDimensions: Dimensions = {\n      height: (configObject.elementToBePositioned!.current as HTMLElement).offsetHeight,\n      width: (configObject.elementToBePositioned!.current as HTMLElement).offsetWidth\n    };\n\n    /** We want to add a center (horizontal and vertical) property to the DOMRect object. Since it's a special object we can't modify so we clone it and add it. */\n    const clonedRelEl = {\n      top: relativeElRect.top,\n      right: relativeElRect.right,\n      bottom: relativeElRect.bottom,\n      center: 0,\n      centerv: relativeElRect.top + relativeElRect.height / 2,\n      centerh: relativeElRect.left + relativeElRect.width / 2,\n      left: relativeElRect.left,\n      width: relativeElRect.width,\n      height: relativeElRect.height,\n      x: relativeElRect.x,\n      y: relativeElRect.y\n    };\n\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"horizontal\");\n    _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, \"vertical\");\n\n    if (!initialCalculationDone) {\n      setInitialCalculationDone(true);\n    }\n  }, configObject.debounceAmount ?? 20);\n\n  return {\n    top: position.top,\n    bottom: position.bottom,\n    left: position.left,\n    right: position.right,\n    calculatePosition,\n    initialCalculationDone\n  };\n};\n"],"names":["horizontal","vertical","defaultConfigObject","relativeElement","undefined","elementToBePositioned","transformOrigin","placement","offset","top","right","bottom","left","debounceAmount","usePosition","providedConfigObject","configObject","initialCalculationDone","setInitialCalculationDone","useState","position","setPosition","_fixPossibleViewportOverflow","value","requestedReturnValue","elDimensions","returnValue","window","innerWidth","width","innerHeight","height","_applyOffsetToPlacementValue","_a","_b","_c","_d","_e","_f","_g","_h","_j","_k","_l","_m","_calculateInitialPlacementValue","relEl","placementOriginDefinition","_determineCenteredPlacementOrigin","Error","_calculatePlacementValue","valueWithOffset","valueCorrectionForViewportOverflow","_calculatePlacement","axis","placementValue","direction","oppositeDirection","prevState","calculatePosition","useDebouncedCallback","current","relativeElRect","getBoundingClientRect","elementToBePositionedDimensions","offsetHeight","offsetWidth","clonedRelEl","center","centerv","centerh","x","y"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "5.2.0",
+  "version": "6.1.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -9,7 +9,9 @@
   "typings": "dist/cjs/src/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "!*/**/*.test.tsx",
+    "!*/**/*.test.ts"
   ],
   "sideEffects": [
     "*.css",
@@ -50,8 +52,8 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@mdx-js/react": "^3.0.0",
@@ -59,74 +61,75 @@
     "@onewelcome/storybook-addon-basestyling": "^1.0.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/components": "^7.5.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/components": "^7.6.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/manager-api": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.3",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
+    "@storybook/theming": "^7.6.10",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
     "@types/mdx": "^2.0.10",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "babel-loader": "^9.1.3",
-    "chromatic": "^7.5.4",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
+    "chromatic": "^10.6.0",
+    "css-loader": "^6.9.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-export-scope": "^2.0.3",
+    "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^8.0.3",
+    "husky": "^9.0.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.0.2",
-    "mini-css-extract-plugin": "^2.7.6",
+    "lint-staged": "^15.2.0",
+    "mini-css-extract-plugin": "^2.7.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.33",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router-dom": "^6.19.0",
+    "react-router-dom": "^6.21.3",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
-    "size-limit": "^10.0.1",
-    "storybook": "^7.5.3",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.0.0",
+    "size-limit": "^11.0.2",
+    "storybook": "^7.6.10",
     "storybook-addon-pseudo-states": "^2.1.2",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
+    "style-loader": "^3.3.4",
+    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   }
 }

package/src/{hooks/useWrapper.test.ts → .scope.ts}

@@ -14,15 +14,4 @@
  *    limitations under the License.
  */
 
-import { renderHook } from "@testing-library/react";
-import { useWrapper } from "./useWrapper";
-
-describe("it should give the correct results based on no value, no placeholder and default text input", () => {
-  it("should execute correctly", () => {
-    const { result } = renderHook(() => useWrapper());
-
-    expect(result.current.helperId).toHaveLength(20);
-    expect(result.current.errorId).toHaveLength(20);
-    expect(result.current.labelId).toHaveLength(20);
-  });
-});
+export default "*";

package/src/components/Button/BaseButton.tsx

@@ -22,7 +22,7 @@ export interface Props extends ComponentPropsWithRef<"button"> {
   type?: "submit" | "button" | "reset";
   disabled?: boolean;
   loading?: boolean;
-  color?: "primary" | "secondary" | "warning" | "danger" | "default";
+  color?: "primary" | "danger" | "default" | "success" | "warning";
 }
 
 const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (

package/src/components/Button/Button.module.scss

@@ -49,17 +49,9 @@
 
     width: 1.5rem;
     margin-right: 0.25rem;
-  }
-}
-
-@media only screen and (min-width: 30em) {
-  .has-icon {
-    &.start-icon {
-      padding-left: 1rem;
-    }
 
-    &.end-icon {
-      padding-right: 1rem;
+    span {
+      font-size: 1rem;
     }
   }
 }

package/src/components/ContextMenu/ContextMenu.tsx

@@ -35,7 +35,8 @@ import { useBodyClick } from "../../hooks/useBodyClick";
 import { Props as ContextMenuItemProps } from "./ContextMenuItem";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../hooks/useGetDomRoot";
-import { useArrowNavigation, useDefaultOffset } from "./ContextMenuService";
+import { useArrowNavigation, useDefaultOffset, useFocusAnchorElement } from "./ContextMenuService";
+import { generateID } from "../../util/helper";
 
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
@@ -45,7 +46,7 @@ export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
   transformOrigin?: Placement;
   offset?: Offset;
   debounceAmount?: number;
-  id: string;
+  id?: string;
   show?: boolean;
   domRoot?: HTMLElement;
   onShow?: () => void;
@@ -60,7 +61,7 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     trigger,
     children,
     decorativeElement,
-    id,
+    id = `ID-${generateID()}`,
     show = false,
     onShow,
     onClose,
@@ -79,7 +80,6 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const anchorEl = useRef<HTMLButtonElement>(null);
   const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const [showContextMenu, setShowContextMenu] = useState(show);
-  const [hasBeenClosed, setHasBeenClosed] = useState(false);
   const [selectedContextMenuItem, setSelectedContextMenuItem] = useState(-1);
   const [focusedContextMenuItem, setFocusedContextMenuItem] = useState(-1);
   const [shouldClick, setShouldClick] =
@@ -90,10 +90,6 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
-  if (!id) {
-    throw new Error("You need to provide an ID to the context menu");
-  }
-
   const syncSelectedContextMenuItem = setSelectedContextMenuItem;
 
   useEffect(() => {
@@ -128,21 +124,15 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     showContextMenu
   );
 
-  useEffect(() => {
-    if (showContextMenu === true) {
-      onShow?.();
-    } else {
-      onClose?.();
-      !hasBeenClosed && setHasBeenClosed(true);
-      setFocusedContextMenuItem(-1);
-      // If the user clicks on the trigger button, we want to focus it again after the context menu has been closed,
-      // but only if the option doesn't open another window (such as a modal),
-      // otherwise pressing enter wouldn't fire the primary action of the modal.
-      if (document.activeElement?.closest(`.${wrappingDivRef.current?.className}`)) {
-        hasBeenClosed && anchorEl.current && anchorEl.current.focus();
-      }
-    }
-  }, [showContextMenu]);
+  useFocusAnchorElement(
+    anchorEl,
+    id,
+    showContextMenu,
+    setShowContextMenu,
+    setFocusedContextMenuItem,
+    onShow,
+    onClose
+  );
 
   const renderTrigger = () =>
     React.cloneElement(trigger, {