colibri-ui 0.8.97 → 0.8.99

package/esm/NavigationMenu/components/MoreMenu/index.js

@@ -0,0 +1,147 @@
+import React, { useState, useRef } from 'react';
+import clsx from 'clsx';
+import { Dropdown } from '../../../Dropdown/index.js';
+import 'tslib';
+import { Chevron } from '../../../Icons/Chevron.js';
+import { useIsomorphicLayoutEffect, getItemKey } from '../../helpers.js';
+import { getLinkClassName, NavigationLink } from '../NavigationLink/index.js';
+import styles from './MoreMenu.module.css';
+
+const getLinkPosition = event => {
+  const links = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]'));
+  return {
+    links,
+    index: links.indexOf(event.target)
+  };
+};
+const MoreOptions = ({
+  items,
+  onItemClick,
+  renderLink,
+  rootRef,
+  onItemFocus,
+  onTabOut
+}) => {
+  // The dropdown is portaled to the end of the document: move focus into it,
+  // to the current section or to the first link.
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    const root = rootRef.current;
+    (_b = (_a = root === null || root === void 0 ? void 0 : root.querySelector('[aria-current="page"]')) !== null && _a !== void 0 ? _a : root === null || root === void 0 ? void 0 : root.querySelector('[role="menuitem"]')) === null || _b === void 0 ? void 0 : _b.focus();
+  }, [rootRef]);
+  // Focus events bubble from the links, whatever `renderLink` renders.
+  const handleFocus = event => {
+    const {
+      index
+    } = getLinkPosition(event);
+    if (index !== -1) onItemFocus(items[index]);
+  };
+  // Arrow keys move focus through the links, Home/End go to the first and the
+  // last one. Tab leaves through the trigger, so focus continues from it.
+  const handleKeyDown = event => {
+    var _a;
+    if (event.key === "Tab") {
+      onTabOut();
+      return;
+    }
+    const {
+      links,
+      index
+    } = getLinkPosition(event);
+    const last = links.length - 1;
+    const targets = {
+      ArrowDown: index === last ? 0 : index + 1,
+      ArrowUp: index === 0 ? last : index - 1,
+      Home: 0,
+      End: last
+    };
+    if (index === -1 || !(event.key in targets)) return;
+    event.preventDefault();
+    (_a = links[targets[event.key]]) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- events come from the focused links
+    React.createElement("div", {
+      ref: rootRef,
+      className: styles.options,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus
+    }, items.map((item, index) => (/*#__PURE__*/React.createElement(NavigationLink, {
+      key: getItemKey(item, index),
+      item: item,
+      view: "option",
+      role: "menuitem",
+      onClick: onItemClick,
+      renderLink: renderLink
+    }))))
+  );
+};
+/** "More" trigger with a dropdown of the items that do not fit. */
+const MoreMenu = ({
+  items,
+  label,
+  hidden,
+  onItemClick,
+  renderLink,
+  onFocusLost
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const overlayRef = useRef(null);
+  const focusedItemRef = useRef(null);
+  // A resize hides "More" and removes the dropdown with the focused link.
+  // Layout effect: focus moves before the browser paints the new row.
+  useIsomorphicLayoutEffect(() => {
+    if (!hidden) return;
+    const item = focusedItemRef.current;
+    const isFocusLost = !document.activeElement || document.activeElement === document.body;
+    focusedItemRef.current = null;
+    setOpen(false);
+    if (item && isFocusLost) onFocusLost(item);
+  }, [hidden]);
+  // Selection, Escape and Tab remove the focused link together with the
+  // dropdown: return focus to the trigger.
+  const close = () => {
+    var _a, _b;
+    const trigger = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (((_b = overlayRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) && trigger instanceof HTMLElement) {
+      trigger.focus();
+    }
+    focusedItemRef.current = null;
+    setOpen(false);
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    ref: rootRef,
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ["click"],
+    placement: "bottom-end",
+    visible: isOpen,
+    disabled: hidden,
+    onVisibleChange: visible => visible ? setOpen(true) : close(),
+    overlay: /*#__PURE__*/React.createElement(MoreOptions, {
+      items: items,
+      onItemClick: onItemClick,
+      renderLink: renderLink,
+      rootRef: overlayRef,
+      onItemFocus: item => {
+        focusedItemRef.current = item;
+      },
+      onTabOut: close
+    })
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: getLinkClassName(),
+    tabIndex: hidden ? -1 : undefined
+  }, label, /*#__PURE__*/React.createElement(Chevron, {
+    width: 16,
+    height: 16,
+    "aria-hidden": "true",
+    className: clsx(styles.chevron, {
+      [styles.chevron_open]: isOpen
+    })
+  }))));
+};
+
+export { MoreMenu };

package/esm/NavigationMenu/components/NavigationLink/NavigationLink.module.css

@@ -0,0 +1,59 @@
+.item {
+  align-items: center;
+  background: transparent;
+  block-size: var(--navigation-item-height);
+  border: none;
+  border-radius: var(--radius-full);
+  box-sizing: border-box;
+  color: var(--component-navigation-item-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--navigation-item-font-size);
+  gap: var(--space-2);
+  line-height: var(--navigation-item-line-height);
+  padding: 0 var(--navigation-item-padding);
+  text-decoration: none;
+  transition: background-color 0.15s ease;
+  white-space: nowrap;
+}
+.item:hover {
+  background: var(--component-navigation-item-bg-hover);
+}
+.item:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-navigation-item-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+.item_selected, .item_selected:hover {
+  background: var(--component-navigation-item-bg-selected);
+  color: var(--component-navigation-item-text-selected);
+}
+
+.option {
+  align-items: center;
+  border-radius: var(--radius-xs);
+  color: var(--component-menu-text);
+  display: flex;
+  font-size: var(--font-size-text-sm);
+  gap: var(--space-2);
+  line-height: var(--line-height-text-sm);
+  outline: none;
+  padding: var(--space-2) var(--space-3);
+  text-decoration: none;
+}
+.option:hover, .option:focus-visible {
+  background: var(--component-menu-item-bg-hover);
+}
+.option_selected, .option_selected:hover, .option_selected:focus-visible {
+  background: var(--component-navigation-item-bg-selected);
+  color: var(--component-navigation-item-text-selected);
+}
+.option_selected:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-navigation-item-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}

package/esm/NavigationMenu/components/NavigationLink/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { NavigationMenuItem, NavigationMenuRenderLink } from "../../index.props";
+interface NavigationLinkProps {
+    item: NavigationMenuItem;
+    /** `item` is a pill in the row, `option` is a line inside "More". */
+    view?: "item" | "option";
+    role?: "menuitem";
+    onClick?: (item: NavigationMenuItem) => void;
+    renderLink?: NavigationMenuRenderLink;
+}
+export declare const getLinkClassName: (view?: NavigationLinkProps["view"], active?: boolean) => string;
+export declare const LinkContent: ({ item }: {
+    item: NavigationMenuItem;
+}) => React.JSX.Element;
+export declare const NavigationLink: ({ item, view, role, onClick, renderLink, }: NavigationLinkProps) => React.JSX.Element;
+export {};

package/esm/NavigationMenu/components/NavigationLink/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './NavigationLink.module.css';
+
+const getLinkClassName = (view = "item", active) => clsx(styles[view], {
+  [styles[`${view}_selected`]]: active
+});
+const LinkContent = ({
+  item
+}) => (/*#__PURE__*/React.createElement(React.Fragment, null, item.icon && (/*#__PURE__*/React.createElement("span", {
+  className: styles.icon,
+  "aria-hidden": "true"
+}, item.icon)), /*#__PURE__*/React.createElement("span", null, item.label)));
+const NavigationLink = ({
+  item,
+  view,
+  role,
+  onClick,
+  renderLink
+}) => {
+  const props = {
+    item,
+    className: getLinkClassName(view, item.active),
+    children: /*#__PURE__*/React.createElement(LinkContent, {
+      item: item
+    }),
+    onClick: onClick ? () => onClick(item) : undefined,
+    role,
+    "aria-current": item.active ? "page" : undefined
+  };
+  if (renderLink) return /*#__PURE__*/React.createElement(React.Fragment, null, renderLink(props));
+  return /*#__PURE__*/React.createElement("a", {
+    href: item.href,
+    className: props.className,
+    onClick: props.onClick,
+    role: role,
+    "aria-current": props["aria-current"]
+  }, props.children);
+};
+
+export { LinkContent, NavigationLink, getLinkClassName };

package/esm/NavigationMenu/helpers.d.ts

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from "react";
+import type { Ref } from "react";
+import type { NavigationMenuItem } from "./index.props";
+export declare const getItemKey: (item: NavigationMenuItem, index: number) => string;
+/** Items are often recreated on every render: compare them by content. */
+export declare const isSameItem: (a: NavigationMenuItem, b: NavigationMenuItem) => boolean;
+/** `useLayoutEffect` without the server rendering warning. */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const assignRef: <T>(ref: Ref<T> | undefined, value: T | null) => void;

package/esm/NavigationMenu/helpers.js

@@ -0,0 +1,15 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+const getItemKey = (item, index) => {
+  var _a, _b;
+  return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item.href) !== null && _b !== void 0 ? _b : `${item.label}-${index}`;
+};
+/** Items are often recreated on every render: compare them by content. */
+const isSameItem = (a, b) => getItemKey(a, 0) === getItemKey(b, 0);
+/** `useLayoutEffect` without the server rendering warning. */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const assignRef = (ref, value) => {
+  if (typeof ref === "function") ref(value);else if (ref) ref.current = value;
+};
+
+export { assignRef, getItemKey, isSameItem, useIsomorphicLayoutEffect };

package/esm/NavigationMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationMenu } from "./NavigationMenu";
+export type { NavigationMenuItem, NavigationMenuLayout, NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuRenderLink, NavigationMenuSize, } from "./index.props";

package/esm/NavigationMenu/index.js

@@ -0,0 +1 @@
+export { NavigationMenu } from './NavigationMenu.js';

package/esm/NavigationMenu/index.props.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+/** `overflow` keeps items in a row and moves the rest to "More", `scroll` is a horizontal strip. */
+export type NavigationMenuLayout = "overflow" | "scroll";
+export type NavigationMenuSize = "s" | "m";
+export interface NavigationMenuItem {
+    /** Unique key. Defaults to `href`, then to `label`. */
+    id?: string;
+    label: string;
+    href?: string;
+    /** Current section: highlighted, gets `aria-current="page"` and never moves to "More". */
+    active?: boolean;
+    /** Icon before the label. */
+    icon?: ReactNode;
+}
+export interface NavigationMenuLinkProps {
+    item: NavigationMenuItem;
+    className: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+    tabIndex?: number;
+    /** Set for links inside the "More" dropdown. */
+    role?: "menuitem";
+    "aria-current"?: "page";
+}
+/** Renders an item link, for example a router `Link`. Pass every prop except `item` to the element. */
+export type NavigationMenuRenderLink = (props: NavigationMenuLinkProps) => ReactNode;
+export interface NavigationMenuProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    items: NavigationMenuItem[];
+    /** Always visible after `items`. */
+    pinnedItems?: NavigationMenuItem[];
+    /** Always inside "More", after the items that do not fit. In the `scroll` layout they end the strip. */
+    moreItems?: NavigationMenuItem[];
+    layout?: NavigationMenuLayout;
+    size?: NavigationMenuSize;
+    moreLabel?: ReactNode;
+    /** Called on a click on any item, including the ones inside "More". */
+    onItemClick?: (item: NavigationMenuItem) => void;
+    /** Custom link. Defaults to `<a href>`. */
+    renderLink?: NavigationMenuRenderLink;
+}

package/esm/NavigationMenu/splitItems.d.ts

@@ -0,0 +1,30 @@
+export interface SplitInput {
+    itemWidths: number[];
+    /** Pinned items are always visible and go after the main items. */
+    pinnedWidths: number[];
+    moreWidth: number;
+    containerWidth: number;
+    /** CSS gap between items. */
+    gap: number;
+    /** Index of the active item or -1. */
+    activeIndex: number;
+    /** "More" is needed anyway, for example for `moreItems`. */
+    forceMore: boolean;
+}
+export interface SplitResult {
+    /** Indexes of the items left in the row, in the original order. */
+    visible: number[];
+    /** Indexes of the items moved to "More", in the original order. */
+    hidden: number[];
+}
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+export declare const splitItems: ({ itemWidths, pinnedWidths, moreWidth, containerWidth, gap, activeIndex, forceMore, }: SplitInput) => SplitResult;
+export declare const isSameSplit: (a: SplitResult, b: SplitResult) => boolean;

package/esm/NavigationMenu/splitItems.js

@@ -0,0 +1,51 @@
+const sum = list => list.reduce((acc, n) => acc + n, 0);
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+const splitItems = ({
+  itemWidths,
+  pinnedWidths,
+  moreWidth,
+  containerWidth,
+  gap,
+  activeIndex,
+  forceMore
+}) => {
+  const all = itemWidths.map((_, index) => index);
+  const cost = width => width + gap;
+  const pinnedCost = sum(pinnedWidths.map(cost));
+  if (!forceMore && sum(itemWidths.map(cost)) + pinnedCost <= containerWidth + gap) {
+    return {
+      visible: all,
+      hidden: []
+    };
+  }
+  const hasActive = activeIndex >= 0 && activeIndex < itemWidths.length;
+  let budget = containerWidth + gap - pinnedCost - cost(moreWidth);
+  if (hasActive) budget -= cost(itemWidths[activeIndex]);
+  const visible = [];
+  for (let index = 0; index < itemWidths.length; index++) {
+    if (index === activeIndex) continue;
+    if (cost(itemWidths[index]) > budget) break;
+    budget -= cost(itemWidths[index]);
+    visible.push(index);
+  }
+  if (hasActive) {
+    visible.push(activeIndex);
+    visible.sort((a, b) => a - b);
+  }
+  return {
+    visible,
+    hidden: all.filter(index => !visible.includes(index))
+  };
+};
+const isSameList = (a, b) => a.length === b.length && a.every((index, position) => index === b[position]);
+const isSameSplit = (a, b) => isSameList(a.visible, b.visible) && isSameList(a.hidden, b.hidden);
+
+export { isSameSplit, splitItems };

package/esm/NavigationMenu/useOverflowSplit.d.ts

@@ -0,0 +1,25 @@
+import type { SplitResult } from "./splitItems";
+interface Options {
+    itemCount: number;
+    pinnedCount: number;
+    activeIndex: number;
+    forceMore: boolean;
+    /** Changes with the item labels to recalculate. */
+    contentKey: string;
+}
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+export declare const useOverflowSplit: ({ itemCount, pinnedCount, activeIndex, forceMore, contentKey, }: Options) => {
+    split: SplitResult | null;
+    containerRef: import("react").RefObject<HTMLElement | null>;
+    listRef: import("react").RefObject<HTMLUListElement | null>;
+    measurerRef: import("react").RefObject<HTMLDivElement | null>;
+    moreRef: import("react").RefObject<HTMLLIElement | null>;
+};
+export {};

package/esm/NavigationMenu/useOverflowSplit.js

@@ -0,0 +1,61 @@
+import { useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from './helpers.js';
+import { splitItems, isSameSplit } from './splitItems.js';
+
+const getWidth = element => element ? element.getBoundingClientRect().width : 0;
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+const useOverflowSplit = ({
+  itemCount,
+  pinnedCount,
+  activeIndex,
+  forceMore,
+  contentKey
+}) => {
+  const containerRef = useRef(null);
+  const listRef = useRef(null);
+  const measurerRef = useRef(null);
+  const moreRef = useRef(null);
+  const [split, setSplit] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    const measurer = measurerRef.current;
+    if (!container || !measurer) return undefined;
+    const recalculate = () => {
+      const widths = Array.from(measurer.children, getWidth);
+      const gap = listRef.current ? parseFloat(getComputedStyle(listRef.current).columnGap) || 0 : 0;
+      const next = splitItems({
+        itemWidths: widths.slice(0, itemCount),
+        pinnedWidths: widths.slice(itemCount, itemCount + pinnedCount),
+        moreWidth: getWidth(moreRef.current),
+        containerWidth: getWidth(container),
+        gap,
+        activeIndex,
+        forceMore
+      });
+      setSplit(prev => prev && isSameSplit(prev, next) ? prev : next);
+    };
+    recalculate();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(container);
+    observer.observe(measurer);
+    if (moreRef.current) observer.observe(moreRef.current);
+    return () => observer.disconnect();
+  }, [itemCount, pinnedCount, activeIndex, forceMore, contentKey]);
+  return {
+    split,
+    containerRef,
+    listRef,
+    measurerRef,
+    moreRef
+  };
+};
+
+export { useOverflowSplit };

package/esm/RadioGroup/Radio.js

@@ -14,7 +14,7 @@ const Radio = ({
   onMouseEnter,
   className,
   disabled = false,
-  testId
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement(InputRadio, {
   id: id,
   value: value,
@@ -28,7 +28,7 @@ const Radio = ({
   name: name,
   className: className,
   disabled: disabled,
-  testid: testId
+  "data-testid": testId
 }));
 
 export { Radio };

package/esm/RadioGroup/index.js

@@ -32,7 +32,7 @@ const RadioGroup = /*#__PURE__*/memo(({
   return /*#__PURE__*/React.createElement(Radio, {
     key: optionVal,
     id: id,
-    testId: id,
+    "data-testid": id,
     value: optionVal,
     text: text,
     note: note,

package/esm/RadioGroup/index.props.d.ts

@@ -34,5 +34,5 @@ export type RadioProps = {
     onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
     className: string;
     disabled?: boolean;
-    testId?: string;
+    "data-testid"?: string;
 };

package/esm/Select/index.d.ts

@@ -1,3 +1,3 @@
 import type { JSX } from "react";
 import type { SelectProps } from "./index.props";
-export declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, "aria-label": ariaLabel, }: SelectProps<T>) => JSX.Element;
+export declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, "aria-label": ariaLabel, "data-testid": testId, }: SelectProps<T>) => JSX.Element;

package/esm/Select/index.js

@@ -24,7 +24,8 @@ const Select = ({
   customInputRoot,
   className,
   onChange,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const id = useId();
@@ -48,6 +49,7 @@ const Select = ({
     }) => selected)) === null || _a === void 0 ? void 0 : _a.label;
   }, [preparedOptions]);
   return /*#__PURE__*/React.createElement(FormField, {
+    "data-testid": testId,
     className: clsx(styles["form-field"], {
       [styles["full-width"]]: Boolean(fullWidth)
     }, className),
@@ -96,8 +98,7 @@ const Select = ({
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React.createElement("div", {
     id: valueId,
-    className: styles["base-input"],
-    "data-testid": "base-input"
+    className: styles["base-input"]
   }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React.createElement("span", {
     className: styles.placeholder
   }, placeholder))), /*#__PURE__*/React.createElement("input", {

package/esm/Separator/index.js

@@ -3,9 +3,11 @@ import clsx from 'clsx';
 import styles from './Separator.module.css';
 
 const Separator = ({
-  className
-}) => (/*#__PURE__*/React.createElement("div", {
-  className: clsx(styles.root, className)
-}));
+  className,
+  "data-testid": testId
+}) => /*#__PURE__*/React.createElement("div", {
+  className: clsx(styles.root, className),
+  "data-testid": testId
+});
 
 export { Separator };

package/esm/Separator/index.props.d.ts

@@ -1,3 +1,4 @@
-export type SeparatorProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type SeparatorProps = TestIdProps & {
     className?: string;
 };

package/esm/Skeleton/index.js

@@ -7,9 +7,11 @@ const SkeletonRect = ({
   className,
   width,
   height,
-  radius = "sm"
+  radius = "sm",
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
   className: clsx(styles.rect, className),
+  "data-testid": testId,
   style: {
     width: toRemLength(width),
     height: toRemLength(height),
@@ -19,9 +21,11 @@ const SkeletonRect = ({
 const SkeletonText = ({
   className,
   width,
-  size
+  size,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
   className: clsx(styles.text, className),
+  "data-testid": testId,
   style: {
     width: toRemLength(width),
     height: toRemLength(size)

package/esm/Skeleton/index.props.d.ts

@@ -1,9 +1,10 @@
-export type TextProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type TextProps = TestIdProps & {
     className?: string;
     width?: number | string;
     size?: number | string;
 };
-export type RectProps = {
+export type RectProps = TestIdProps & {
     className?: string;
     width?: number | string;
     height?: number | string;

package/esm/Status/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PropsWithChildren } from "react";
 import type { StatusProps } from "./index.props";
-export declare const Status: ({ className, indicator, showIndicator, tag: Component, children, type, }: PropsWithChildren<StatusProps>) => React.JSX.Element;
+export declare const Status: ({ className, indicator, showIndicator, tag: Component, children, type, "data-testid": testId, }: PropsWithChildren<StatusProps>) => React.JSX.Element;

package/esm/Status/index.js

@@ -8,8 +8,10 @@ const Status = ({
   showIndicator = true,
   tag: Component = "span",
   children,
-  type
+  type,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement(Component, {
+  "data-testid": testId,
   className: clsx(styles.root, {
     [styles[`root_${type}`]]: Boolean(type)
   }, className)