@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/overlays/menu/Menu.tsx

@@ -0,0 +1,213 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ComponentProps,
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import styled from "styled-components";
+import { DefaultMenuTrigger } from "./MenuTrigger";
+import classNames from "classnames";
+import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router-dom";
+import Dialog from "../dialog/Dialog";
+
+const MenuContent = styled(RadixMenu.Content)`
+  border: var(--scm-border);
+  background-color: var(--scm-secondary-background);
+  position: relative;
+`;
+
+const MenuItem = styled(RadixMenu.Item).attrs({
+  className:
+    "is-flex is-align-items-center px-3 py-2 has-text-inherit is-clickable is-size-6 has-hover-color-blue is-borderless has-background-transparent has-rounded-border",
+})`
+  line-height: inherit;
+  :focus {
+    outline: #af3ee7 3px solid;
+    outline-offset: 0px;
+  }
+  &[data-disabled] {
+    color: unset !important;
+    opacity: 40%;
+    cursor: unset !important;
+  }
+`;
+
+type MenuLinkProps = Omit<ReactRouterLinkProps, "onSelect"> & Pick<RadixMenu.MenuItemProps, "disabled">;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const MenuLink = React.forwardRef<HTMLAnchorElement, MenuLinkProps>(({ children, disabled, ...props }, ref) => (
+  <MenuItem asChild disabled={disabled}>
+    <ReactRouterLink ref={ref} {...props}>
+      {children}
+    </ReactRouterLink>
+  </MenuItem>
+));
+
+type MenuExternalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onSelect"> &
+  Pick<RadixMenu.MenuItemProps, "disabled">;
+
+/**
+ * External links open in a new browser tab with rel flags "noopener" and "noreferrer" set by default.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+export const MenuExternalLink = React.forwardRef<HTMLAnchorElement, MenuExternalLinkProps>(
+  ({ children, disabled, ...props }, ref) => (
+    <MenuItem asChild disabled={disabled}>
+      <a ref={ref} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    </MenuItem>
+  )
+);
+
+type MenuButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onSelect"> &
+  Pick<RadixMenu.MenuItemProps, "onSelect">;
+
+/**
+ * Use {@link MenuButtonProps#onSelect} to handle menu item selection.
+ * The menu will close by default. This behavior can be overwritten by calling {@link Event.preventDefault} on the event.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
+  ({ children, onSelect, disabled, ...props }, ref) => (
+    <MenuItem asChild disabled={disabled} onSelect={onSelect}>
+      <button ref={ref} {...props}>
+        {children}
+      </button>
+    </MenuItem>
+  )
+);
+
+type MenuContextType = {
+  handleDialogItemOpenChange: (open: boolean) => void;
+};
+const MenuContext = createContext<MenuContextType>(null as unknown as MenuContextType);
+
+type MenuDialogProps = Omit<MenuButtonProps, "onSelect"> &
+  Omit<ComponentProps<typeof Dialog>, "trigger"> & {
+    dialogContent?: ReactNode;
+  };
+
+/**
+ * @beta
+ * @since 2.46.0
+ * @see {@link Dialog}
+ */
+export const MenuDialog = React.forwardRef<HTMLButtonElement, MenuDialogProps>(
+  ({ children, dialogContent, title, description, footer }, ref) => {
+    const { handleDialogItemOpenChange } = useContext(MenuContext);
+    const [open, setOpen] = useState(false);
+    const handleSelect = useCallback((event: Event) => event.preventDefault(), []);
+    const changeOpen = useCallback(
+      (newValue: boolean) => {
+        setOpen(newValue);
+        handleDialogItemOpenChange(newValue);
+      },
+      [handleDialogItemOpenChange]
+    );
+
+    return (
+      <Dialog
+        trigger={
+          <MenuButton ref={ref} onSelect={handleSelect}>
+            {children}
+          </MenuButton>
+        }
+        title={title}
+        description={description}
+        footer={footer}
+        onOpenChange={changeOpen}
+        open={open}
+      >
+        {dialogContent}
+      </Dialog>
+    );
+  }
+);
+
+type Props = {
+  className?: string;
+  trigger?: React.ReactElement;
+} & Pick<RadixMenu.DropdownMenuContentProps, "side">;
+
+/**
+ * A menu consists of a trigger button (vertical ellipsis icon button by default)
+ * and a dropdown container containing individual menu items.
+ *
+ * @beta
+ * @since 2.44.0
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+const Menu: FC<Props> = ({ children, side, className, trigger = <DefaultMenuTrigger /> }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [hasOpenDialog, setHasOpenDialog] = useState(false);
+  const handleDialogItemOpenChange = useCallback((open: boolean) => {
+    setHasOpenDialog(open);
+    if (!open) {
+      setDropdownOpen(false);
+    }
+  }, []);
+  const menuContextValue = useMemo<MenuContextType>(
+    () => ({
+      handleDialogItemOpenChange,
+    }),
+    [handleDialogItemOpenChange]
+  );
+
+  return (
+    <RadixMenu.Root open={dropdownOpen} onOpenChange={setDropdownOpen} modal={false}>
+      {trigger}
+      <RadixMenu.Portal>
+        <MenuContent
+          className={classNames(className, "is-flex is-flex-direction-column has-rounded-border has-box-shadow")}
+          side={side}
+          sideOffset={4}
+          collisionPadding={4}
+          hidden={hasOpenDialog}
+        >
+          <MenuContext.Provider value={menuContextValue}>{children}</MenuContext.Provider>
+        </MenuContent>
+      </RadixMenu.Portal>
+    </RadixMenu.Root>
+  );
+};
+
+export default Menu;

package/src/base/overlays/menu/MenuTrigger.tsx

@@ -0,0 +1,63 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import { Button, Icon } from "../../buttons";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+
+type Props = ComponentProps<typeof Button>;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const MenuTrigger = React.forwardRef<HTMLButtonElement, Props>(({ children, ...props }, ref) => (
+  <RadixMenu.Trigger asChild>
+    <Button ref={ref} {...props}>
+      {children}
+    </Button>
+  </RadixMenu.Trigger>
+));
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const DefaultMenuTrigger = React.forwardRef<HTMLButtonElement, Props>(({ className, ...props }, ref) => {
+  const [t] = useTranslation("commons");
+  return (
+    <MenuTrigger
+      aria-label={t("menu.defaultTriggerLabel")}
+      className={classNames(className, "is-borderless has-background-transparent has-hover-color-blue px-2")}
+      ref={ref}
+      {...props}
+    >
+      <Icon>ellipsis-v</Icon>
+    </MenuTrigger>
+  );
+});
+
+export default MenuTrigger;

package/src/base/overlays/popover/Popover.stories.tsx

@@ -0,0 +1,69 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import Popover from "./Popover";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+
+export default {
+  title: "Popover",
+  component: Popover,
+} as ComponentMeta<typeof Popover>;
+
+const Template: ComponentStory<typeof Popover> = (args) => <Popover {...args} />;
+
+export const WithShortBody = Template.bind({});
+WithShortBody.args = {
+  trigger: <button>a button</button>,
+  title: <h1>A title longer than the body</h1>,
+  children: <div>very short body</div>,
+};
+
+export const CiStatus = Template.bind({});
+CiStatus.args = {
+  trigger: (
+    <button className={"is-borderless has-background-transparent"}>
+      <i className={"fas fa-1x has-text-secondary fa-circle-notch"}></i>
+    </button>
+  ),
+  title: <h1>Analyses: 0 error found</h1>,
+  children: (
+    <>
+      <hr className={"my-2"} />
+      <a className={"has-hover-background-blue is-flex is-flex-direction-row px-2 py-2 is-align-items-center"}>
+        <i className={"fas fa-1x has-text-secondary fa-circle-notch mr-2"}></i>
+        <span className="has-text-default">
+          <strong>jenkins:</strong> scm-manager » scm-manager » develop
+        </span>
+      </a>
+      <hr className={"my-2"} />
+      <a className={"has-hover-background-blue is-flex is-flex-direction-row px-2 py-2 is-align-items-center"}>
+        <i className={"fas fa-1x has-text-secondary fa-circle-notch mr-2"}></i>
+        <span className={"has-text-default"}>
+          <strong>Sonar:</strong> Sonar
+        </span>
+      </a>
+    </>
+  ),
+};

package/src/base/overlays/popover/Popover.tsx

@@ -0,0 +1,95 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ReactElement, ReactNode } from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import styled from "styled-components";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+const StyledContent = styled(RadixPopover.Content)`
+  z-index: 1020;
+`;
+
+const StyledArrow = styled(RadixPopover.Arrow)`
+  fill: var(--scm-popover-border-color);
+  z-index: 1020;
+`;
+
+const TitleContainer = styled("div")`
+  flex: 1;
+`;
+
+type Props = {
+  /**
+   * Element to trigger the popover
+   */
+  trigger: ReactElement;
+
+  /**
+   * Element for the content of the popover
+   */
+  children: ReactElement;
+
+  /**
+   * Element for the title row of the popover
+   */
+  title: ReactNode;
+
+  /**
+   * Classnames for the content of the popover
+   */
+  className?: string;
+};
+
+/**
+ * @beta
+ * @since 2.46.0
+ */
+const Popover = React.forwardRef<HTMLDivElement, Props>(({ title, className, trigger, children }, ref) => {
+  const [t] = useTranslation("commons");
+
+  return (
+    <RadixPopover.Root>
+      <RadixPopover.Trigger asChild>{trigger}</RadixPopover.Trigger>
+      <RadixPopover.Portal>
+        <StyledContent
+          ref={ref}
+          className={classNames("has-rounded-border", "p-2", "popover-content", "box", "popover", className)}
+        >
+          <div className="is-flex is-align-items-center">
+            <TitleContainer className="mr-4">{title}</TitleContainer>
+            <RadixPopover.Close asChild>
+              <button className="delete popover-close" aria-label={t("popover.closeButton.ariaLabel")} />
+            </RadixPopover.Close>
+          </div>
+          {children}
+          <StyledArrow className="popover-arrow" />
+        </StyledContent>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  );
+});
+
+export default Popover;

package/src/base/overlays/tooltip/Tooltip.examples.js

@@ -0,0 +1,41 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export const LongText =
+  "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
+
+export const ShortList = `  * a
+  * b
+  * c
+`;
+
+export const List = `  Characters:
+
+    - Arthur Dent
+    - Ford Prefect
+    - Zaphod Beeblebrox
+    - Marvin the Paranoid Android
+    - Trillian
+    - Slartibartfast
+`;

package/src/base/overlays/tooltip/Tooltip.stories.mdx

@@ -0,0 +1,52 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import Tooltip from "./Tooltip"
+import { List, LongText, ShortList } from "./Tooltip.examples";
+
+<Meta title="Tooltip"/>
+
+Here will be some documentation for the Tooltip component.
+
+<Story name="Default">
+  <Tooltip message="I am a tooltip!">
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="With Styling">
+  <Tooltip message="I am a tooltip!" className="has-text-warning">
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="Long Text">
+  <Tooltip
+    message={LongText}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="List">
+  <Tooltip message={List}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="Short List">
+  <Tooltip message={ShortList}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="With Link">
+  <Tooltip message={<p>
+    For more information look up the documentation on the <a href="https://scm-manager.org">SCM-Manager</a> Website.
+  </p>}>
+    <button>Hover me</button>
+  </Tooltip>
+</Story>
+
+<Story name="Adjust Position">
+  <Tooltip message="I should show where there is space" side="left">
+    <button>Hover me</button>
+  </Tooltip>
+</Story>

package/src/base/overlays/tooltip/Tooltip.tsx

@@ -0,0 +1,96 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ReactElement, ReactNode } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import classNames from "classnames";
+import styled from "styled-components";
+
+const StyledContent = styled(RadixTooltip.Content)`
+  overflow: hidden;
+  hyphens: auto;
+  text-overflow: clip;
+  white-space: pre-wrap;
+  max-width: 15rem;
+  word-break: keep-all;
+  z-index: 1020;
+`;
+
+const StyledArrow = styled(RadixTooltip.Arrow)`
+  z-index: 1020;
+`;
+
+type Props = {
+  /**
+   * The message to be displayed in the overlay.
+   */
+  message: ReactNode;
+
+  /**
+   * It is required to provide a {@link ReactElement} as the single child because listeners and metadata is going to be
+   * attached to it automatically.
+   */
+  children: ReactElement;
+
+  /**
+   * Class to be applied to the content container.
+   */
+  className?: string;
+} & Pick<RadixTooltip.TooltipContentProps, "side">;
+
+/**
+ * Displays the given {@link Props#message} whenever the provided {@link Props#children} is hovered or focused.
+ *
+ * @since 2.41.0
+ * @beta
+ */
+const Tooltip = React.forwardRef<HTMLDivElement, Props>(({ children, className, message, side }, ref) => (
+  <RadixTooltip.Provider>
+    <RadixTooltip.Root>
+      <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+      <RadixTooltip.Portal>
+        <StyledContent
+          className={classNames(
+            "is-size-7",
+            "is-family-primary",
+            "has-rounded-border",
+            "has-text-white",
+            "has-background-grey-dark",
+            "has-text-weight-semibold",
+            "p-2",
+            className
+          )}
+          side={side}
+          sideOffset={4}
+          collisionPadding={4}
+          ref={ref}
+        >
+          {message}
+          <StyledArrow className="tooltip-arrow-fill-color" />
+        </StyledContent>
+      </RadixTooltip.Portal>
+    </RadixTooltip.Root>
+  </RadixTooltip.Provider>
+));
+export default Tooltip;

package/src/base/shortcuts/index.ts

@@ -0,0 +1,28 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { default as useShortcut } from "./useShortcut";
+export { default as useShortcutDocs, ShortcutDocsContextProvider } from "./useShortcutDocs";
+export { default as usePauseShortcuts } from "./usePauseShortcuts";
+export { useKeyboardIteratorTarget, KeyboardIterator, KeyboardSubIterator } from "./iterator/keyboardIterator";