colibri-ui 0.8.98 → 0.8.99

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)

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { TestIdProps } from "../helpers/testId";
 export type StatusTag = "span" | "div";
 export declare enum STATUS_TYPE {
     SUCCESS = "success",
@@ -6,7 +7,7 @@ export declare enum STATUS_TYPE {
     INFO = "info",
     WARNING = "warning"
 }
-export type StatusProps = {
+export type StatusProps = TestIdProps & {
     className?: string;
     indicator?: ReactNode;
     showIndicator?: boolean;

package/esm/TextArea/index.js

@@ -44,7 +44,6 @@ const TextArea = _a => {
     hasError: hasError
   }, /*#__PURE__*/React.createElement(TextareaAutosize, Object.assign({
     ref: inputRef,
-    "data-testid": "textarea",
     disabled: disabled,
     minRows: minRows,
     maxRows: maxRows,

package/esm/TimeSelect/index.js

@@ -23,7 +23,8 @@ const TimeSelect = ({
   zIndex,
   hasError,
   hint,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const baseOptions = useMemo(() => generateSuggest(interval).map(item => ({
     value: item.time,
@@ -39,6 +40,7 @@ const TimeSelect = ({
   }), [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React.createElement(Select, {
     "aria-label": ariaLabel,
+    "data-testid": testId,
     className: className,
     customInputRoot: customInputRoot,
     fontSize: fontSize,

package/esm/Tooltip/index.js

@@ -10,7 +10,8 @@ const Tooltip = ({
   withTail = false,
   placement = "bottom",
   strategy = "absolute",
-  className
+  className,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const arrowRef = useRef(null);
@@ -58,6 +59,7 @@ const Tooltip = ({
     ref: refs.setFloating
   }, getFloatingProps(), {
     className: clsx(styles.tooltip, className),
+    "data-testid": testId,
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex
     })

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

@@ -1,6 +1,7 @@
 import type { Placement, Strategy } from "@floating-ui/react";
 import type { ReactNode } from "react";
-export type TooltipProps = {
+import type { PopupTestIdProps } from "../helpers/testId";
+export type TooltipProps = PopupTestIdProps & {
     content: ReactNode;
     zIndex?: number;
     placement?: Placement;

package/esm/base/FormField/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, }: FormFieldProps) => React.JSX.Element;
+export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, "data-testid": testId, }: FormFieldProps) => React.JSX.Element;

package/esm/base/FormField/index.js

@@ -13,10 +13,12 @@ const FormField = ({
   labelId,
   required,
   className,
-  ref
+  ref,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
   className: clsx(styles.container, className),
-  ref: ref
+  ref: ref,
+  "data-testid": testId
 }, label && (/*#__PURE__*/React.createElement(Typography, {
   className: clsx(styles.label, {
     [styles.label_required]: Boolean(required)

package/esm/base/FormField/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { PropsWithChildren } from "react";
-export type FormFieldProps = PropsWithChildren<{
+import type { TestIdProps } from "../../helpers/testId";
+export type FormFieldProps = PropsWithChildren<TestIdProps & {
     className?: string;
     hasError?: boolean;
     hint?: ReactNode;

package/esm/helpers/testId.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A test id a consumer gives a component; the component puts it on its own
+ * root element. Fields put it on the native control. Components set no test
+ * id of their own. A component without a root of its own takes
+ * `PopupTestIdProps` instead.
+ */
+export type TestIdProps = {
+    "data-testid"?: string;
+};
+/**
+ * A test id of a popup (`Dropdown`, `Tooltip`): it names the floating panel,
+ * which is in the DOM only while open. The trigger is the consumer's own
+ * element and keeps its own `data-testid`; the component never writes one on
+ * it.
+ */
+export type PopupTestIdProps = {
+    "data-testid"?: string;
+};

package/esm/index.d.ts

@@ -97,3 +97,4 @@ export type { TypographyFontWeight, TypographyProps, TypographyResponsiveSize, T
 export { useMediaSizes } from "./hooks/useMediaSizes";
 export { useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";
+export type { PopupTestIdProps, TestIdProps } from "./helpers/testId";

package/helpers/testId.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A test id a consumer gives a component; the component puts it on its own
+ * root element. Fields put it on the native control. Components set no test
+ * id of their own. A component without a root of its own takes
+ * `PopupTestIdProps` instead.
+ */
+export type TestIdProps = {
+    "data-testid"?: string;
+};
+/**
+ * A test id of a popup (`Dropdown`, `Tooltip`): it names the floating panel,
+ * which is in the DOM only while open. The trigger is the consumer's own
+ * element and keeps its own `data-testid`; the component never writes one on
+ * it.
+ */
+export type PopupTestIdProps = {
+    "data-testid"?: string;
+};

package/index.d.ts

@@ -97,3 +97,4 @@ export type { TypographyFontWeight, TypographyProps, TypographyResponsiveSize, T
 export { useMediaSizes } from "./hooks/useMediaSizes";
 export { useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";
+export type { PopupTestIdProps, TestIdProps } from "./helpers/testId";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.98",
+  "version": "0.8.99",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",