@datarobot/design-system 30.1.2 → 30.2.0

package/cjs/collapsible-panel/collapsible-panel.js

@@ -98,6 +98,7 @@ const CollapsiblePanel = ({
     }),
     children: [headerPlacement === COLLAPSIBLE_PANEL_PLACEMENT.TOP && headerContainer, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
       ...transitionProps,
+      nodeRef: wrapperRef,
       in: expanded,
       onEntering: onEntering,
       onEntered: onEntered,

package/cjs/loading-backdrop/loading-backdrop.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LoadingBackdrop = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactTransitionGroup = require("react-transition-group");
 var _message = require("../message");
 var _useTranslation = require("../hooks/use-translation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /** Shows loader when content is not ready
  * [CAPITALIZATION] Use sentence case
  * @midnight-gray-supported
@@ -26,13 +27,16 @@ const LoadingBackdrop = ({
   const {
     t
   } = (0, _useTranslation.useTranslation)();
+  const nodeRef = (0, _react.useRef)(null);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
     classNames: "loading-backdrop",
+    nodeRef: nodeRef,
     in: isLoading,
     onExited: onTransitionEnd,
     timeout: 500,
     appear: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: nodeRef,
       className: (0, _classnames.default)('loading-backdrop center-status ', customClassName),
       "test-id": testId,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_message.Message, {

package/cjs/selectable-tiles/index.d.ts

@@ -1,2 +1,4 @@
 export type { SelectableTilesProps, SelectableTileOptions, } from './selectable-tiles';
+export type { SelectableTilesSize } from './types';
+export { SELECTABLE_TILES_SIZES } from './types';
 export { default as SelectableTiles } from './selectable-tiles';

package/cjs/selectable-tiles/index.js

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "SELECTABLE_TILES_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _types.SELECTABLE_TILES_SIZES;
+  }
+});
 Object.defineProperty(exports, "SelectableTiles", {
   enumerable: true,
   get: function () {
     return _selectableTiles.default;
   }
 });
+var _types = require("./types");
 var _selectableTiles = _interopRequireDefault(require("./selectable-tiles"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/selectable-tiles/selectable-tiles-item.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TooltipPlacementsType } from '../tooltip';
+import type { SelectableTilesSize } from './types';
 type SelectableTilesItemProps = {
     id: string;
     label?: string;
@@ -12,9 +13,10 @@ type SelectableTilesItemProps = {
     isDisabled?: boolean;
     itemClassName?: string;
     itemAriaLabel?: string;
+    size: SelectableTilesSize;
     customContent?: ReactElement;
     tooltipText?: string;
     tooltipPlacement?: TooltipPlacementsType;
 };
-export declare function SelectableTilesItem({ id, label, imgSrc, icon, itemTestId, selectedKey, onItemSelect, isDisabled, itemClassName, itemAriaLabel, customContent, tooltipText, tooltipPlacement, }: SelectableTilesItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectableTilesItem({ id, label, imgSrc, icon, itemTestId, size, selectedKey, onItemSelect, isDisabled, itemClassName, itemAriaLabel, customContent, tooltipText, tooltipPlacement, }: SelectableTilesItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/cjs/selectable-tiles/selectable-tiles-item.js

@@ -16,6 +16,7 @@ function SelectableTilesItem({
   imgSrc,
   icon,
   itemTestId,
+  size,
   selectedKey,
   onItemSelect,
   isDisabled,
@@ -51,7 +52,7 @@ function SelectableTilesItem({
     content: tooltipText,
     placement: tooltipPlacement,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('selectable-tiles-item', itemClassName, {
+      className: (0, _classnames.default)('selectable-tiles-item', itemClassName, size, {
         'selectable-tiles-item-selected': isItemSelected,
         'selectable-tiles-item-disabled': isDisabled,
         'label-with-image': !!imgSrc

package/cjs/selectable-tiles/selectable-tiles.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TooltipPlacementsType } from '../tooltip';
+import { SelectableTilesSize } from './types';
 import './selectable-tiles.less';
 export type SelectableTileOptions = {
     id: string;
@@ -42,11 +43,13 @@ export type SelectableTilesProps = {
     isDisabled?: boolean;
     /** Allows for aria label to be associated with the component */
     labelledBy?: string;
+    /** size of the tiles */
+    size?: SelectableTilesSize;
 };
 /** SelectableTiles let user choose on of the options represented in the form of tiles
  * [CAPITALIZATION] Sentence case (capitalize proper nouns i.e., Holdout).
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-declare function SelectableTiles({ options, selectedKey, onItemSelect, containerClassName, itemClassName, optionId, isDisabled, labelledBy, }: SelectableTilesProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectableTiles({ options, selectedKey, onItemSelect, containerClassName, itemClassName, optionId, isDisabled, labelledBy, size, }: SelectableTilesProps): import("react/jsx-runtime").JSX.Element;
 export default SelectableTiles;

package/cjs/selectable-tiles/selectable-tiles.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _selectableTilesItem = require("./selectable-tiles-item");
+var _types = require("./types");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** SelectableTiles let user choose on of the options represented in the form of tiles
@@ -22,7 +23,8 @@ function SelectableTiles({
   itemClassName,
   optionId = 'id',
   isDisabled,
-  labelledBy
+  labelledBy,
+  size = _types.SELECTABLE_TILES_SIZES.MD
 }) {
   const onSelect = key => {
     if (key === selectedKey) {
@@ -63,7 +65,8 @@ function SelectableTiles({
         customContent: customContent,
         tooltipText: tooltipText,
         tooltipPlacement: tooltipPlacement,
-        itemAriaLabel: itemAriaLabel
+        itemAriaLabel: itemAriaLabel,
+        size: size
       }, tileId);
     })
   });

package/cjs/selectable-tiles/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '../types';
+export declare const SELECTABLE_TILES_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type SelectableTilesSize = ValueOf<typeof SELECTABLE_TILES_SIZES>;

package/cjs/selectable-tiles/types.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SELECTABLE_TILES_SIZES = void 0;
+const SELECTABLE_TILES_SIZES = exports.SELECTABLE_TILES_SIZES = {
+  SM: 'sm',
+  MD: 'md'
+};

package/cjs/sidebar-cards/sidebar-card.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SidebarCardProps } from './types';
 import './sidebar-card.less';
 /** A SidebarCards: Card
@@ -6,4 +7,5 @@ import './sidebar-card.less';
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-export default function SidebarCard({ testId, id, isDisabled, isSelected, isReadOnly, hasCheckbox, isChecked, leftItem, checkboxTooltip, isCheckboxDisabled, title, titleTooltip, headerContentLeft, headerContentRight, content, onCheckboxSelect, className, shouldSelectTileOnEnter, ...other }: SidebarCardProps): import("react/jsx-runtime").JSX.Element;
+declare const SidebarCard: React.ForwardRefExoticComponent<SidebarCardProps & React.RefAttributes<HTMLDivElement>>;
+export default SidebarCard;

package/cjs/sidebar-cards/sidebar-card.js

@@ -3,21 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SidebarCard;
-var _react = _interopRequireDefault(require("react"));
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _sidebarCardHeader = _interopRequireDefault(require("./sidebar-card-header"));
 var _sidebarCardContent = _interopRequireDefault(require("./sidebar-card-content"));
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /** A SidebarCards: Card
  *  with optional customized header and footer
  * @uxr-only-supported
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-function SidebarCard({
+const SidebarCard = /*#__PURE__*/_react.default.forwardRef(function SidebarCard({
   testId = 'sidebar-card',
   id,
   isDisabled = false,
@@ -37,10 +38,10 @@ function SidebarCard({
   className = '',
   shouldSelectTileOnEnter,
   ...other
-}) {
+}, forwardedRef) {
   const {
     listItemAttrs,
-    ref
+    ref: listItemRef
   } = (0, _hooks.useListItemNavigation)({
     id,
     isSelected,
@@ -55,6 +56,11 @@ function SidebarCard({
       }
     }
   });
+  const [setForwardedRef] = (0, _hooks.useForwardRef)(forwardedRef);
+  const mergedRef = (0, _react.useCallback)(el => {
+    listItemRef(el);
+    setForwardedRef(el);
+  }, [listItemRef, setForwardedRef]);
   return (
     /*#__PURE__*/
     // useListItemNavigation returns onKeyDown, role and tabIndex
@@ -67,7 +73,7 @@ function SidebarCard({
       }),
       ...other,
       ...listItemAttrs,
-      ref: ref,
+      ref: mergedRef,
       children: [leftItem, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "sidebar-card-content-section",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarCardHeader.default, {
@@ -90,4 +96,5 @@ function SidebarCard({
       })]
     })
   );
-}
+});
+var _default = exports.default = SidebarCard;

package/cjs/sidebar-cards/sidebar-cards.js

@@ -47,6 +47,7 @@ function SidebarCards({
         const isSelected = Boolean(item.isSelected);
         const isCheckboxDisabled = Boolean(item.isCheckboxDisabled ?? isDisabled);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarCard.default, {
+          ref: item.ref,
           id: item.id,
           leftItem: item.leftItem,
           testId: itemTestId,

package/cjs/sidebar-cards/types.d.ts

@@ -65,6 +65,8 @@ export type SidebarCardItemProps = {
     className?: string;
     /** Defines if left item should be added */
     leftItem?: React.ReactNode | null;
+    /** Optional ref to attach to the card's root element */
+    ref?: React.Ref<HTMLDivElement>;
 };
 export type SidebarCardProps = {
     /** Test id */

package/esm/collapsible-panel/collapsible-panel.js

@@ -90,6 +90,7 @@ const CollapsiblePanel = ({
     }),
     children: [headerPlacement === COLLAPSIBLE_PANEL_PLACEMENT.TOP && headerContainer, /*#__PURE__*/_jsx(CSSTransition, {
       ...transitionProps,
+      nodeRef: wrapperRef,
       in: expanded,
       onEntering: onEntering,
       onEntered: onEntered,

package/esm/loading-backdrop/loading-backdrop.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { Message, MESSAGE_TYPES } from '../message';
@@ -19,13 +19,16 @@ export const LoadingBackdrop = ({
   const {
     t
   } = useTranslation();
+  const nodeRef = useRef(null);
   return /*#__PURE__*/_jsx(CSSTransition, {
     classNames: "loading-backdrop",
+    nodeRef: nodeRef,
     in: isLoading,
     onExited: onTransitionEnd,
     timeout: 500,
     appear: true,
     children: /*#__PURE__*/_jsx("div", {
+      ref: nodeRef,
       className: classNames('loading-backdrop center-status ', customClassName),
       "test-id": testId,
       children: /*#__PURE__*/_jsx(Message, {

package/esm/selectable-tiles/index.d.ts

@@ -1,2 +1,4 @@
 export type { SelectableTilesProps, SelectableTileOptions, } from './selectable-tiles';
+export type { SelectableTilesSize } from './types';
+export { SELECTABLE_TILES_SIZES } from './types';
 export { default as SelectableTiles } from './selectable-tiles';

package/esm/selectable-tiles/index.js

@@ -1 +1,2 @@
+export { SELECTABLE_TILES_SIZES } from './types';
 export { default as SelectableTiles } from './selectable-tiles';

package/esm/selectable-tiles/selectable-tiles-item.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TooltipPlacementsType } from '../tooltip';
+import type { SelectableTilesSize } from './types';
 type SelectableTilesItemProps = {
     id: string;
     label?: string;
@@ -12,9 +13,10 @@ type SelectableTilesItemProps = {
     isDisabled?: boolean;
     itemClassName?: string;
     itemAriaLabel?: string;
+    size: SelectableTilesSize;
     customContent?: ReactElement;
     tooltipText?: string;
     tooltipPlacement?: TooltipPlacementsType;
 };
-export declare function SelectableTilesItem({ id, label, imgSrc, icon, itemTestId, selectedKey, onItemSelect, isDisabled, itemClassName, itemAriaLabel, customContent, tooltipText, tooltipPlacement, }: SelectableTilesItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectableTilesItem({ id, label, imgSrc, icon, itemTestId, size, selectedKey, onItemSelect, isDisabled, itemClassName, itemAriaLabel, customContent, tooltipText, tooltipPlacement, }: SelectableTilesItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/selectable-tiles/selectable-tiles-item.js

@@ -9,6 +9,7 @@ export function SelectableTilesItem({
   imgSrc,
   icon,
   itemTestId,
+  size,
   selectedKey,
   onItemSelect,
   isDisabled,
@@ -44,7 +45,7 @@ export function SelectableTilesItem({
     content: tooltipText,
     placement: tooltipPlacement,
     children: /*#__PURE__*/_jsx("div", {
-      className: classnames('selectable-tiles-item', itemClassName, {
+      className: classnames('selectable-tiles-item', itemClassName, size, {
         'selectable-tiles-item-selected': isItemSelected,
         'selectable-tiles-item-disabled': isDisabled,
         'label-with-image': !!imgSrc

package/esm/selectable-tiles/selectable-tiles.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TooltipPlacementsType } from '../tooltip';
+import { SelectableTilesSize } from './types';
 import './selectable-tiles.less';
 export type SelectableTileOptions = {
     id: string;
@@ -42,11 +43,13 @@ export type SelectableTilesProps = {
     isDisabled?: boolean;
     /** Allows for aria label to be associated with the component */
     labelledBy?: string;
+    /** size of the tiles */
+    size?: SelectableTilesSize;
 };
 /** SelectableTiles let user choose on of the options represented in the form of tiles
  * [CAPITALIZATION] Sentence case (capitalize proper nouns i.e., Holdout).
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-declare function SelectableTiles({ options, selectedKey, onItemSelect, containerClassName, itemClassName, optionId, isDisabled, labelledBy, }: SelectableTilesProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectableTiles({ options, selectedKey, onItemSelect, containerClassName, itemClassName, optionId, isDisabled, labelledBy, size, }: SelectableTilesProps): import("react/jsx-runtime").JSX.Element;
 export default SelectableTiles;

package/esm/selectable-tiles/selectable-tiles.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { SelectableTilesItem } from './selectable-tiles-item';
+import { SELECTABLE_TILES_SIZES } from './types';
 import { jsx as _jsx } from "react/jsx-runtime";
 /** SelectableTiles let user choose on of the options represented in the form of tiles
  * [CAPITALIZATION] Sentence case (capitalize proper nouns i.e., Holdout).
@@ -15,7 +16,8 @@ function SelectableTiles({
   itemClassName,
   optionId = 'id',
   isDisabled,
-  labelledBy
+  labelledBy,
+  size = SELECTABLE_TILES_SIZES.MD
 }) {
   const onSelect = key => {
     if (key === selectedKey) {
@@ -56,7 +58,8 @@ function SelectableTiles({
         customContent: customContent,
         tooltipText: tooltipText,
         tooltipPlacement: tooltipPlacement,
-        itemAriaLabel: itemAriaLabel
+        itemAriaLabel: itemAriaLabel,
+        size: size
       }, tileId);
     })
   });

package/esm/selectable-tiles/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '../types';
+export declare const SELECTABLE_TILES_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type SelectableTilesSize = ValueOf<typeof SELECTABLE_TILES_SIZES>;

package/esm/selectable-tiles/types.js

@@ -0,0 +1,4 @@
+export const SELECTABLE_TILES_SIZES = {
+  SM: 'sm',
+  MD: 'md'
+};

package/esm/sidebar-cards/sidebar-card.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SidebarCardProps } from './types';
 import './sidebar-card.less';
 /** A SidebarCards: Card
@@ -6,4 +7,5 @@ import './sidebar-card.less';
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-export default function SidebarCard({ testId, id, isDisabled, isSelected, isReadOnly, hasCheckbox, isChecked, leftItem, checkboxTooltip, isCheckboxDisabled, title, titleTooltip, headerContentLeft, headerContentRight, content, onCheckboxSelect, className, shouldSelectTileOnEnter, ...other }: SidebarCardProps): import("react/jsx-runtime").JSX.Element;
+declare const SidebarCard: React.ForwardRefExoticComponent<SidebarCardProps & React.RefAttributes<HTMLDivElement>>;
+export default SidebarCard;

package/esm/sidebar-cards/sidebar-card.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import SidebarCardHeader from './sidebar-card-header';
 import SidebarCardContent from './sidebar-card-content';
-import { useListItemNavigation } from '../hooks';
+import { useListItemNavigation, useForwardRef } from '../hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** A SidebarCards: Card
  *  with optional customized header and footer
@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-export default function SidebarCard({
+const SidebarCard = /*#__PURE__*/React.forwardRef(function SidebarCard({
   testId = 'sidebar-card',
   id,
   isDisabled = false,
@@ -30,10 +30,10 @@ export default function SidebarCard({
   className = '',
   shouldSelectTileOnEnter,
   ...other
-}) {
+}, forwardedRef) {
   const {
     listItemAttrs,
-    ref
+    ref: listItemRef
   } = useListItemNavigation({
     id,
     isSelected,
@@ -48,6 +48,11 @@ export default function SidebarCard({
       }
     }
   });
+  const [setForwardedRef] = useForwardRef(forwardedRef);
+  const mergedRef = useCallback(el => {
+    listItemRef(el);
+    setForwardedRef(el);
+  }, [listItemRef, setForwardedRef]);
   return (
     /*#__PURE__*/
     // useListItemNavigation returns onKeyDown, role and tabIndex
@@ -60,7 +65,7 @@ export default function SidebarCard({
       }),
       ...other,
       ...listItemAttrs,
-      ref: ref,
+      ref: mergedRef,
       children: [leftItem, /*#__PURE__*/_jsxs("div", {
         className: "sidebar-card-content-section",
         children: [/*#__PURE__*/_jsx(SidebarCardHeader, {
@@ -83,4 +88,5 @@ export default function SidebarCard({
       })]
     })
   );
-}
+});
+export default SidebarCard;

package/esm/sidebar-cards/sidebar-cards.js

@@ -39,6 +39,7 @@ export default function SidebarCards({
         const isSelected = Boolean(item.isSelected);
         const isCheckboxDisabled = Boolean(item.isCheckboxDisabled ?? isDisabled);
         return /*#__PURE__*/_jsx(SidebarCard, {
+          ref: item.ref,
           id: item.id,
           leftItem: item.leftItem,
           testId: itemTestId,

package/esm/sidebar-cards/types.d.ts

@@ -65,6 +65,8 @@ export type SidebarCardItemProps = {
     className?: string;
     /** Defines if left item should be added */
     leftItem?: React.ReactNode | null;
+    /** Optional ref to attach to the card's root element */
+    ref?: React.Ref<HTMLDivElement>;
 };
 export type SidebarCardProps = {
     /** Test id */