@fortanix/baklava 1.0.0-beta-20241114

package/src/components/overlays/Tooltip/Tooltip.module.scss

@@ -0,0 +1,162 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+/* https://css-tricks.com/books/greatest-css-tricks/scroll-shadows */
+@define-mixin scroll-shadows {
+  --bgRGB: 73, 89, 99;
+  --bg: rgb(var(--bgRGB));
+  --bgTrans: rgba(var(--bgRGB), 0);
+  --shadow: rgba(41, 50, 56, 0.5);
+  background:
+    linear-gradient(var(--bg) 30%, var(--bgTrans)) center top, // Shadow Cover TOP
+    linear-gradient(var(--bgTrans), var(--bg) 70%) center bottom, // Shadow Cover BOTTOM
+    radial-gradient(farthest-side at 50% 0, var(--shadow), rgba(0, 0, 0, 0)) center top, // Shadow TOP
+    radial-gradient(farthest-side at 50% 100%, var(--shadow), rgba(0, 0, 0, 0)) center bottom; // Shadow BOTTOM
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+@layer baklava.components {
+  .bk-tooltip {
+    @include bk.component-base(bk-tooltip);
+    
+    cursor: default;
+    
+    // overflow-y: auto;
+    
+    max-width: 30rem;
+    max-height: 8lh; /* Show about 8 lines of text before scrolling */
+    /* Alternatively: https://floating-ui.com/docs/misc#handling-large-content
+    max-width: calc(100svw - var(--bk-sizing-2));
+    max-height: calc(100svh - var(--bk-sizing-2));
+    */
+    
+    padding: bk.$spacing-4;
+    padding-bottom: bk.$spacing-7;
+    border-radius: bk.$radius-s;
+    background: bk.$theme-tooltip-background-default;
+    border: 1px solid bk.$theme-tooltip-border-default;
+
+    @include bk.text-layout;
+    text-align: left;
+    color: bk.$theme-tooltip-text-default;
+    @include bk.font(bk.$font-family-body);
+    font-size: 12px;
+
+    &.bk-tooltip--small {
+      width: 140px;
+    }
+    &.bk-tooltip--medium {
+      width: 225px;
+    }
+    &.bk-tooltip--large {
+      width: 345px;
+    }
+
+    --arrow-size: 7px;
+
+    &.bk-tooltip--arrow:before {
+      content: '';
+      border-bottom: 1px solid bk.$theme-tooltip-border-default;
+      border-right: 1px solid bk.$theme-tooltip-border-default;
+      background-color: bk.$theme-tooltip-background-default;
+      position: absolute;
+      width: calc(2 * var(--arrow-size));
+      height: calc(2 * var(--arrow-size));
+    }
+    &:is(.bk-tooltip--arrow-bottom, .bk-tooltip--arrow-top):before {
+      left: calc(50% - var(--arrow-size));
+    }
+    &.bk-tooltip--arrow-bottom:before {
+      bottom: calc(-1 * (calc(var(--arrow-size) + 1px)));
+      transform: rotate(45deg);
+    }
+    &.bk-tooltip--arrow-top:before {
+      top: calc(-1 * (calc(var(--arrow-size) + 1px)));
+      transform: rotate(-135deg);
+    }
+    &:is(.bk-tooltip--arrow-left, .bk-tooltip--arrow-right):before {
+      top: calc(50% - var(--arrow-size));
+    }
+    &.bk-tooltip--arrow-left:before {
+      left: calc(-1 * (calc(var(--arrow-size) + 1px)));
+      transform: rotate(135deg);
+    }
+    &.bk-tooltip--arrow-right:before {
+      right: calc(-1 * (calc(var(--arrow-size) + 1px)));
+      transform: rotate(-45deg);
+    }
+
+    .bk-tooltip__title {
+      font-size: bk.$font-size-l;
+      font-weight: bk.$font-weight-semibold;
+    }
+
+    .bk-tooltip__icon {
+      font-size: 18px;
+      margin-right: 10px;
+    }
+
+    .bk-tooltip__alert {
+      color: bk.$theme-tooltip-text-error;
+    }
+  }
+  
+  @position-try --bk-tooltip-position-top {
+    margin-top: var(--bk-layout-header-height); /* Compensate for layout header */
+    margin-bottom: 6px;
+    /* position-area: top; */
+    bottom: anchor(top);
+    justify-self: anchor-center;
+  }
+  @position-try --bk-tooltip-position-bottom {
+    margin-top: 6px;
+    /* position-area: bottom; */
+    justify-self: anchor-center;
+    top: anchor(bottom);
+  }
+  @position-try --bk-tooltip-position-left {
+    justify-self: anchor-center;
+    right: anchor(left);
+  }
+  @position-try --bk-tooltip-position-right {
+    justify-self: anchor-center;
+    left: anchor(right);
+  }
+  
+  .bk-tooltip[popover] {
+    inset: auto; /* Note: future versions of Chrome should have this by default */
+    position: fixed;
+    /*position-anchor: --anchor-1;*/ /* Needs to be set dynamically */
+    
+    position-try-fallbacks: --bk-tooltip-position-top, --bk-tooltip-position-bottom, --bk-tooltip-position-left, --bk-tooltip-position-right;
+    
+    filter: drop-shadow(4px 4px 4px rgba(50 50 50 / 30%));
+    
+    @media (prefers-reduced-motion: no-preference) {
+      --transition-duration: 150ms;
+      transition:
+        display var(--transition-duration) allow-discrete,
+        overlay var(--transition-duration) allow-discrete,
+        opacity var(--transition-duration) ease-out,
+        translate var(--transition-duration) ease-out;
+        /* transform */ /* Note: don't animate `transform` with floating-ui, since it relies on it for positioning */
+      opacity: 0;
+      translate: 0 0.3rem;
+    }
+    
+    &:popover-open {
+      opacity: 1;
+      translate: none;
+      
+      @starting-style {
+        opacity: 0;
+        translate: 0 0.3rem;
+      }
+    }
+  }
+}

package/src/components/overlays/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,115 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { OverflowTester } from '../../../util/storybook/OverflowTester.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+import { Tooltip } from './Tooltip.tsx';
+
+
+type TooltipArgs = React.ComponentProps<typeof Tooltip>;
+type Story = StoryObj<TooltipArgs>;
+
+export default {
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    children: 'This is a tooltip',
+  },
+  render: (args) => <Tooltip {...args}/>,
+} satisfies Meta<TooltipArgs>;
+
+
+export const TooltipStandard: Story = {
+  name: 'Tooltip',
+};
+
+export const TooltipSmall: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const TooltipMedium: Story = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export const TooltipLarge: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const TooltipWordBreak: StoryObj<typeof Tooltip> = {
+  name: 'Tooltip (word break)',
+  render: () => (
+    <Tooltip>
+      LoremipsumdolorsitametconsecteturadipiscingelitPellentesqueegetsemutnequelobortispharetranecvelquamEtiamsemnequegravidasedpharetrautvehiculaquislectusDonecacrhoncuspurus.
+    </Tooltip>
+  ),
+};
+
+export const TooltipScroll: StoryObj<typeof Tooltip> = {
+  name: 'Tooltip (scroll)',
+  render: () => (
+    <Tooltip>
+      <p>
+        Lorem ipsum dolor sit amet, <a href="/" onClick={event => { event.preventDefault(); }}>consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor.
+      </p>
+      <p>
+        Cras ac suscipit nibh. Fusce tincidunt iaculis dapibus. Vivamus sit amet neque eu velit tincidunt semper. Donec at magna aliquam mi consectetur imperdiet. Donec pretium placerat quam, in sodales purus porta vitae. Phasellus nisl justo, luctus vel mi vel, sollicitudin.
+      </p>
+      <ul>
+        <li>A list item</li>
+        <li>Another list item</li>
+      </ul>
+    </Tooltip>
+  ),
+};
+
+const TooltipNativeAnchoringControlled = () => {
+  // Note: in the future, browsers will support implicit anchors (`position-anchor: implicit`) so that the invoker
+  // will be used automatically as the anchor. For now, we need to hook them up using an anchor name.
+  // Alternatively, wrap both popover+invoker in an element with `anchor-scope` (but wrappers interfere with styling).
+  // https://www.w3.org/TR/css-anchor-position-1/#implicit
+  const id = React.useId();
+  const anchorName = `--bk-tooltip-anchor-${CSS.escape(id)}`;
+  const refTooltip = React.useRef<React.ComponentRef<typeof Tooltip>>(null);
+  
+  return (
+    <>
+      <OverflowTester/>
+      
+      {/* @ts-ignore Anchor Positioning not yet supported. */}
+      <Tooltip ref={refTooltip} id={id} popover="manual" style={{ positionAnchor: anchorName }}>
+        This is a tooltip with a lot of text that gives more information about the element.
+        It has a <a href="/" onClick={event => { event.preventDefault(); }}>link</a> you can focus.
+      </Tooltip>
+      <Button type="button" popoverTarget={id} variant="primary" label="Hover over me"
+        // @ts-ignore Anchor Positioning not yet supported.
+        style={{ anchorName }}
+        onMouseEnter={() => { refTooltip.current?.showPopover(); }}
+        onMouseLeave={() => { refTooltip.current?.hidePopover(); }}
+      />
+      
+      <OverflowTester/>
+    </>
+  );
+};
+export const TooltipNativeAnchoring: Story = {
+  name: 'Tooltip (native browser)',
+  render: () => (
+    <TooltipNativeAnchoringControlled/>
+  ),
+};

package/src/components/overlays/Tooltip/Tooltip.tsx

@@ -0,0 +1,75 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { Icon, IconProps } from '../../graphics/Icon/Icon.tsx';
+
+import cl from './Tooltip.module.scss';
+
+
+export { cl as TooltipClassNames };
+
+export type TooltipSize = 'small' | 'medium' | 'large';
+
+export type TooltipProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  /** Whether you want the component to have a fixed width. If unset, it will have dynamic size. */
+  size?: undefined | TooltipSize,
+}>;
+/**
+ * A tooltip. Used by `TooltipProvider` to display a tooltip popover.
+ */
+export const Tooltip = ({ unstyled = false, size = undefined, ...propsRest }: TooltipProps) => {
+  return (
+    <div
+      role="tooltip" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
+      {...propsRest}
+      className={cx({
+        bk: true,
+        [cl['bk-tooltip']]: !unstyled,
+        'bk-body-text': !unstyled,
+        [cl['bk-tooltip--small']]: size === 'small',
+        [cl['bk-tooltip--medium']]: size === 'medium',
+        [cl['bk-tooltip--large']]: size === 'large',
+      }, propsRest.className)}
+    />
+  );
+};
+
+export type TooltipTitleProps = React.PropsWithChildren<ComponentProps<'h1'>>;
+
+/**
+ * Tooltip title. Can be optionally used as tooltip children.
+ */
+export const TooltipTitle = ({ children }: TooltipTitleProps) => (
+  <h1 className={cl['bk-tooltip__title']}>{children}</h1>
+);
+
+export type TooltipItemProps = React.PropsWithChildren<ComponentProps<'p'> & {
+  /** Whether the item is an alert */
+  alert?: undefined | boolean;
+}>;
+
+/**
+ * Tooltip item. Can be optionally used as tooltip children.
+ */
+export const TooltipItem = ({ alert = false, children }: TooltipItemProps) => (
+  <p
+    className={cx({
+      [cl['bk-tooltip__alert']]: alert,
+    })}
+  >
+    {children}
+  </p>
+);
+
+/**
+ * Tooltip icon. Can be optionally used as tooltip children.
+ */
+export const TooltipIcon = (props: IconProps) => (
+  <Icon className={cl['bk-tooltip__icon']} {...props} />
+);

package/src/components/overlays/Tooltip/TooltipProvider.stories.tsx

@@ -0,0 +1,169 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+import { Draggable } from '../../../util/drag.ts';
+
+import { TooltipProvider } from './TooltipProvider.tsx';
+import { TooltipIcon, TooltipItem, TooltipTitle } from './Tooltip.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+import { Icon } from '../../graphics/Icon/Icon.tsx';
+import { OverflowTester } from '../../../util/storybook/OverflowTester.tsx';
+
+
+type TooltipProviderArgs = React.ComponentProps<typeof TooltipProvider>;
+type Story = StoryObj<TooltipProviderArgs>;
+
+export default {
+  component: TooltipProvider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    tooltip: 'This is a tooltip',
+    children: (props) => <Button {...props()} variant="primary" label="Hover over me"/>,
+  },
+  render: (args) => <TooltipProvider {...args}/>,
+} satisfies Meta<TooltipProviderArgs>;
+
+
+export const PlacementTop: Story = {
+  args: {
+    placement: 'top',
+  },
+};
+
+export const PlacementBottom: Story = {
+  args: {
+    placement: 'bottom',
+  },
+};
+
+export const PlacementLeft: Story = {
+  args: {
+    placement: 'left',
+  },
+};
+
+export const PlacementRight: Story = {
+  args: {
+    placement: 'right',
+  },
+};
+
+export const TooltipSmall: Story = {
+  args: {
+    size: 'small',
+    tooltip: <>
+      <TooltipTitle>Title</TooltipTitle>
+      <TooltipItem>Lorem ipsum</TooltipItem>
+      <TooltipItem>Lorem ipsum</TooltipItem>
+    </>,
+  },
+};
+
+export const TooltipMedium: Story = {
+  args: {
+    placement: 'right',
+    size: 'medium',
+    tooltip: <>
+      <TooltipTitle>Title</TooltipTitle>
+      <TooltipItem alert={true}>
+        <TooltipIcon icon="alert" />
+        Lorem ipsum
+      </TooltipItem>
+      <TooltipItem>
+        <TooltipIcon icon="copy" />
+        Lorem ipsum
+      </TooltipItem>
+    </>,
+  },
+};
+
+export const TooltipLarge: Story = {
+  args: {
+    placement: 'left',
+    size: 'large',
+    tooltip: <>A large tooltip will have a fixed size,<br />even if the content is small.</>,
+  },
+};
+
+/**
+ * When a tooltip hits the viewport during scroll, it will automatically reposition to be visible.
+ */
+export const TooltipWithScroll: Story = {
+  render: () => (
+    <>
+      <OverflowTester openDefault lines={5}/>
+      
+      <TooltipProvider tooltip="Tooltips will auto-reposition when it hits the viewport due to scroll.">
+        {props => <Button {...props()} variant="primary" label="Scroll me" autoFocus/>}
+      </TooltipProvider>
+      
+      <OverflowTester openDefault/>
+    </>
+  ),
+};
+
+/**
+ * Tooltips should activate on focus.
+ */
+export const TooltipWithFocus: Story = {
+  args: {
+    tooltip: 'Tooltips will open when the anchor element is focused',
+    children: (props) => <Button {...props()} variant="primary" label="Focus me" autoFocus/>,
+  },
+};
+
+const TooltipWithDrag = () => {
+  const boundaryRef = React.useRef<React.ComponentRef<'div'>>(null);
+  const [boundaryRendered, setBoundaryRendered] = React.useState(false);
+  
+  React.useEffect(() => {
+    if (boundaryRef.current && !boundaryRendered) { setBoundaryRendered(true); }
+  }, [boundaryRendered]);
+  
+  return (
+    <div ref={boundaryRef} style={{ minHeight: 400, display: 'grid', placeContent: 'center' }}>
+      {boundaryRef.current &&
+        <Draggable<HTMLButtonElement>>
+          {({ targetRef }) =>
+            <TooltipProvider
+              tooltip="The position of this tooltip will update to stay in view as it gets dragged towards
+                the viewport."
+              boundary={boundaryRef.current ?? undefined}
+              enablePreciseTracking
+            >
+              <Button ref={targetRef} variant="secondary" label="Drag me" autoFocus/>
+            </TooltipProvider>
+          }
+        </Draggable>
+      }
+    </div>
+  );
+};
+export const TooltipDraggable: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  name: 'Tooltip (draggable anchor)',
+  render: () => <TooltipWithDrag/>,
+};
+
+export const TooltipEmpty: Story = {
+  args: {
+    tooltip: '',
+  },
+};
+
+export const TooltipNull: Story = {
+  args: {
+    tooltip: null,
+  },
+};

package/src/components/overlays/Tooltip/TooltipProvider.tsx

@@ -0,0 +1,164 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ClassNameArgument } from '../../../util/componentUtil.ts';
+import { mergeRefs } from '../../../util/reactUtil.ts';
+import * as React from 'react';
+
+import { usePopover, usePopoverArrow } from '../../util/Popover/Popover.tsx';
+import { type TooltipProps, TooltipClassNames, Tooltip } from './Tooltip.tsx';
+
+
+export type GetReferenceProps = (userProps?: undefined | React.HTMLProps<Element>) => Record<string, unknown>;
+export type TooltipProviderProps = Omit<TooltipProps, 'children'> & {
+  /**
+   * The content to render, which should contain the anchor. This should be a render prop which takes props to
+   * apply on the anchor element. Alternatively, a single element can be provided to which the props are applied.
+   */
+  children?: ((getReferenceProps: GetReferenceProps) => React.ReactNode) | React.ReactNode,
+  
+  /**
+   * The tooltip message. If nullish, the tooltip will not be shown at all. This is useful in case the tooltip should
+   * be shown conditionally.
+   */
+  tooltip?: null | React.ReactNode,
+
+  /** Where to show the tooltip relative to the anchor. */
+  // here we are not using Placement as exposed from Popover because Tooltip only supports a subset of Popover's default placements.
+  placement?: undefined | 'top' | 'bottom' | 'left' | 'right',
+  
+  /** Enable more precise tracking of the anchor, at the cost of performance. */
+  enablePreciseTracking?: undefined | boolean,
+  
+  /** A custom boundary to use to determine overflow of the tooltip. */
+  boundary?: undefined | Element,
+  
+  /** Callback that is invoked when the tooltip gets activated. */
+  onTooltipActivated?: () => void,
+  
+  /** Callback that is invoked when the tooltip gets deactivated. */
+  onTooltipDeactivated?: () => void,
+};
+/**
+ * Provider around an anchor element to attach a tooltip popover.
+ */
+export const TooltipProvider = (props: TooltipProviderProps) => {
+  const {
+    children,
+    tooltip,
+    placement,
+    size,
+    enablePreciseTracking = false,
+    boundary,
+    onTooltipActivated,
+    onTooltipDeactivated,
+    ...tooltipProps
+  } = props;
+  
+  const arrowRef = React.useRef<HTMLElement>(null);
+  
+  const {
+    context,
+    isMounted,
+    refs,
+    floatingStyles,
+    getReferenceProps,
+    getFloatingProps,
+  } = usePopover({
+    action: 'hover',
+    placement,
+    offset: 6,
+    enablePreciseTracking,
+    boundary,
+    ...(arrowRef.current ? { arrowRef:  arrowRef as React.RefObject<HTMLElement> } : {}),
+  });
+  const arrow = usePopoverArrow({ context });
+  
+  // Call event listeners, if any
+  React.useLayoutEffect(() => {
+    if (isMounted) {
+      onTooltipActivated?.();
+    } else {
+      onTooltipDeactivated?.();
+    }
+  }, [isMounted, onTooltipActivated, onTooltipDeactivated]);
+  
+  const renderTooltip = () => {
+    if (!isMounted || !tooltip) { return null; }
+    
+    const floatingProps = getFloatingProps({
+      popover: 'manual',
+      style: floatingStyles,
+    });
+    return (
+      <Tooltip
+        {...floatingProps}
+        ref={mergeRefs<HTMLDivElement>(refs.setFloating, tooltipProps.ref)}
+        className={cx(
+          floatingProps.className as ClassNameArgument,
+          { [TooltipClassNames['bk-tooltip--arrow']]: !!arrow?.side },
+          { [TooltipClassNames['bk-tooltip--arrow-top']]: arrow?.side === 'top' },
+          { [TooltipClassNames['bk-tooltip--arrow-bottom']]: arrow?.side === 'bottom' },
+          { [TooltipClassNames['bk-tooltip--arrow-left']]: arrow?.side === 'left' },
+          { [TooltipClassNames['bk-tooltip--arrow-right']]: arrow?.side === 'right' },
+          tooltipProps.className,
+        )}
+        style={{
+          ...(floatingProps.style ?? {}),
+          ...tooltipProps.style,
+          '--arrow-x': arrow?.arrowX,
+          '--arrow-y': arrow?.arrowY,
+        } as React.CSSProperties}
+        size={size}
+      >
+        {tooltip}
+        {/*
+        Fake arrow element for position tracking, the real arrow is drawn using `border-image`.
+        Note: `floating-ui` has a `FloatingArrow` component using a positioned <svg> arrow, but this doesn't work if
+        the tooltip has `overflow: hidden/scroll/auto` or `contain: paint` enabled.
+        */}
+        <span ref={arrowRef} hidden aria-hidden/>
+      </Tooltip>
+    );
+  };
+  
+  const renderAnchor = () => {
+    const renderPropArg: GetReferenceProps = (userProps?: undefined | React.HTMLProps<Element>) => {
+      const userPropsRef: undefined | string | React.Ref<Element> = userProps?.ref ?? undefined;
+      if (typeof userPropsRef === 'string') {
+        // We can't merge refs if one of the refs is a string
+        console.error(`Failed to render Tooltip, due to use of legacy string ref`);
+        return (userProps ?? {}) as Record<string, unknown>;
+      }
+      
+      return {
+        ...getReferenceProps(userProps),
+        ref: userPropsRef ? mergeRefs(userPropsRef, refs.setReference) : refs.setReference,
+      };
+    };
+    
+    if (typeof children === 'function') {
+      return children(renderPropArg);
+    }
+    
+    // If a render prop is not used, try to attach it to the element directly.
+    // NOTE: `cloneElement` is marked as a legacy function by React. Recommended is to use a render prop instead.
+    if (!React.isValidElement(children)) {
+      return <span {...renderPropArg()}>{children}</span>;
+    }
+    if (React.Children.count(children) === 1) {
+      return React.cloneElement(children, renderPropArg(children.props as React.HTMLProps<Element>));
+    }
+    
+    console.error(`Invalid children passed to TooltipContainer, expected a render prop or single child element.`);
+    return children;
+  };
+  
+  return (
+    <>
+      {renderTooltip()}
+      {renderAnchor()}
+    </>
+  );
+};

package/src/components/util/Clipboard/Clipboard.tsx

@@ -0,0 +1,11 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export const useClipboard = () => {
+  return {
+    async writeText(text: string) {
+      return navigator.clipboard.writeText(text);
+    },
+  };
+};