colibri-ui 0.8.97 → 0.8.99

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/Theme/index.d.ts

@@ -692,7 +692,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;
@@ -1536,7 +1540,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;

package/esm/Theme/themes/buenos_aires.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/esm/Theme/themes/buenos_aires.js

@@ -615,7 +615,11 @@ var THEME_BA = {
   "component-pagination-bg-current": Color.BRAND_BA_FOREST,
   "component-pagination-bg-hover": Color.NEUTRAL_BA_100,
   "component-pagination-focus-ring": Color.BRAND_BA_LIME,
+  "component-navigation-item-text": Color.BRAND_BA_FOREST,
+  "component-navigation-item-text-selected": Color.BRAND_BA_LIME,
+  "component-navigation-item-bg-hover": Color.NEUTRAL_BA_100,
   "component-navigation-item-bg-selected": Color.BRAND_BA_FOREST,
+  "component-navigation-item-focus-ring": Color.BRAND_BA_LIME,
   "component-chip-bg-selected": Color.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": Color.BRAND_BA_LIME,
   "palette-black": Color.BRAND_BA_FOREST,

package/esm/Theme/themes/jaipur.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/esm/Theme/themes/jaipur.js

@@ -615,7 +615,11 @@ var theme_jaipur = {
   "component-pagination-bg-current": Color.BRAND_JP_EGGPLANT,
   "component-pagination-bg-hover": Color.NEUTRAL_JP_100,
   "component-pagination-focus-ring": Color.BRAND_JP_PINK,
+  "component-navigation-item-text": Color.BRAND_JP_EGGPLANT,
+  "component-navigation-item-text-selected": Color.BRAND_JP_PINK,
+  "component-navigation-item-bg-hover": Color.NEUTRAL_JP_100,
   "component-navigation-item-bg-selected": Color.BRAND_JP_EGGPLANT,
+  "component-navigation-item-focus-ring": Color.BRAND_JP_PINK,
   "component-chip-bg-selected": Color.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": Color.BRAND_JP_PINK,
   "palette-black": Color.BRAND_JP_EGGPLANT,

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

@@ -52,6 +52,8 @@ export { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, } from "./Modal
 export type { ModalProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, } from "./Modal/index.props";
 export { MultiSelect } from "./MultiSelect";
 export type { MultiSelectProps } from "./MultiSelect/index.props";
+export { NavigationMenu } from "./NavigationMenu";
+export type { NavigationMenuItem, NavigationMenuLayout, NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuRenderLink, NavigationMenuSize, } from "./NavigationMenu";
 export { NumberInput } from "./NumberInput";
 export type { NumberInputGroupStyle, NumberInputProps, NumberInputSize, NumberInputValues, } from "./NumberInput";
 export { Pagination, getPaginationItems } from "./Pagination";
@@ -95,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/esm/index.js

@@ -26,6 +26,7 @@ export { Menu } from './Menu/index.js';
 export { MenuItem } from './Menu/components/MenuItem/index.js';
 export { Modal } from './Modal/index.js';
 export { MultiSelect } from './MultiSelect/index.js';
+export { NavigationMenu } from './NavigationMenu/NavigationMenu.js';
 export { NumberInput } from './NumberInput/NumberInput.js';
 export { Pagination } from './Pagination/Pagination.js';
 export { getPaginationItems } from './Pagination/helpers.js';

package/esm/theme_ba_variables.css

@@ -613,7 +613,11 @@
 --component-pagination-bg-current: #163300;
 --component-pagination-bg-hover: #EDF0EA;
 --component-pagination-focus-ring: #9FE870;
+--component-navigation-item-text: #163300;
+--component-navigation-item-text-selected: #9FE870;
+--component-navigation-item-bg-hover: #EDF0EA;
 --component-navigation-item-bg-selected: #163300;
+--component-navigation-item-focus-ring: #9FE870;
 --component-chip-bg-selected: #163300;
 --component-chip-bg-selected-strong: #9FE870;
 --palette-black: #163300;

package/esm/theme_jaipur_variables.css

@@ -613,7 +613,11 @@
 --component-pagination-bg-current: #2C2242;
 --component-pagination-bg-hover: #F2F1EE;
 --component-pagination-focus-ring: #FFA8CD;
+--component-navigation-item-text: #2C2242;
+--component-navigation-item-text-selected: #FFA8CD;
+--component-navigation-item-bg-hover: #F2F1EE;
 --component-navigation-item-bg-selected: #2C2242;
+--component-navigation-item-focus-ring: #FFA8CD;
 --component-chip-bg-selected: #2C2242;
 --component-chip-bg-selected-strong: #FFA8CD;
 --palette-black: #2C2242;

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

@@ -52,6 +52,8 @@ export { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter, } from "./Modal
 export type { ModalProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, } from "./Modal/index.props";
 export { MultiSelect } from "./MultiSelect";
 export type { MultiSelectProps } from "./MultiSelect/index.props";
+export { NavigationMenu } from "./NavigationMenu";
+export type { NavigationMenuItem, NavigationMenuLayout, NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuRenderLink, NavigationMenuSize, } from "./NavigationMenu";
 export { NumberInput } from "./NumberInput";
 export type { NumberInputGroupStyle, NumberInputProps, NumberInputSize, NumberInputValues, } from "./NumberInput";
 export { Pagination, getPaginationItems } from "./Pagination";
@@ -95,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/index.js

@@ -27,6 +27,7 @@ var index$e = require('./Menu/index.js');
 var index$f = require('./Menu/components/MenuItem/index.js');
 var index$g = require('./Modal/index.js');
 var index$l = require('./MultiSelect/index.js');
+require('./NavigationMenu/index.js');
 require('./NumberInput/index.js');
 require('./Pagination/index.js');
 var index$m = require('./Portal/index.js');
@@ -81,6 +82,7 @@ var index$i = require('./Modal/components/Footer/index.js');
 var index$j = require('./Modal/components/Header/index.js');
 var index$k = require('./Modal/components/Title/index.js');
 var More = require('./Icons/More.js');
+var NavigationMenu = require('./NavigationMenu/NavigationMenu.js');
 var NumberInput = require('./NumberInput/NumberInput.js');
 var Pagination = require('./Pagination/Pagination.js');
 var Pipette = require('./Icons/Pipette.js');
@@ -174,6 +176,7 @@ exports.ModalFooter = index$i.Footer;
 exports.ModalHeader = index$j.Header;
 exports.ModalTitle = index$k.Title;
 exports.More = More.More;
+exports.NavigationMenu = NavigationMenu.NavigationMenu;
 exports.NumberInput = NumberInput.NumberInput;
 exports.Pagination = Pagination.Pagination;
 exports.Pipette = Pipette.Pipette;

package/package.json

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

package/theme_ba_variables.css

@@ -613,7 +613,11 @@
 --component-pagination-bg-current: #163300;
 --component-pagination-bg-hover: #EDF0EA;
 --component-pagination-focus-ring: #9FE870;
+--component-navigation-item-text: #163300;
+--component-navigation-item-text-selected: #9FE870;
+--component-navigation-item-bg-hover: #EDF0EA;
 --component-navigation-item-bg-selected: #163300;
+--component-navigation-item-focus-ring: #9FE870;
 --component-chip-bg-selected: #163300;
 --component-chip-bg-selected-strong: #9FE870;
 --palette-black: #163300;

package/theme_jaipur_variables.css

@@ -613,7 +613,11 @@
 --component-pagination-bg-current: #2C2242;
 --component-pagination-bg-hover: #F2F1EE;
 --component-pagination-focus-ring: #FFA8CD;
+--component-navigation-item-text: #2C2242;
+--component-navigation-item-text-selected: #FFA8CD;
+--component-navigation-item-bg-hover: #F2F1EE;
 --component-navigation-item-bg-selected: #2C2242;
+--component-navigation-item-focus-ring: #FFA8CD;
 --component-chip-bg-selected: #2C2242;
 --component-chip-bg-selected-strong: #FFA8CD;
 --palette-black: #2C2242;