@datarobot/design-system 30.1.2 → 30.1.3

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/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 */

package/js/bundle/bundle.js

@@ -75257,7 +75257,7 @@ var SidebarCardHeader = function SidebarCardHeader(_ref) {
 
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* binding */ SidebarCard)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -75270,6 +75270,12 @@ var SidebarCardHeader = function SidebarCardHeader(_ref) {
 /* harmony import */ var _sidebar_card_less__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_sidebar_card_less__WEBPACK_IMPORTED_MODULE_5__);
 var _excluded = ["testId", "id", "isDisabled", "isSelected", "isReadOnly", "hasCheckbox", "isChecked", "leftItem", "checkboxTooltip", "isCheckboxDisabled", "title", "titleTooltip", "headerContentLeft", "headerContentRight", "content", "onCheckboxSelect", "className", "shouldSelectTileOnEnter"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
@@ -75285,7 +75291,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-function SidebarCard(_ref) {
+var SidebarCard = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function SidebarCard(_ref, forwardedRef) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'sidebar-card' : _ref$testId,
     id = _ref.id,
@@ -75329,7 +75335,14 @@ function SidebarCard(_ref) {
       }
     }),
     listItemAttrs = _useListItemNavigatio.listItemAttrs,
-    ref = _useListItemNavigatio.ref;
+    listItemRef = _useListItemNavigatio.ref;
+  var _useForwardRef = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useForwardRef)(forwardedRef),
+    _useForwardRef2 = _slicedToArray(_useForwardRef, 1),
+    setForwardedRef = _useForwardRef2[0];
+  var mergedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (el) {
+    listItemRef(el);
+    setForwardedRef(el);
+  }, [listItemRef, setForwardedRef]);
   return (
     /*#__PURE__*/
     // useListItemNavigation returns onKeyDown, role and tabIndex
@@ -75341,7 +75354,7 @@ function SidebarCard(_ref) {
         'is-selected-card': isSelected
       })
     }, other, listItemAttrs, {
-      ref: ref
+      ref: mergedRef
     }), leftItem, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "sidebar-card-content-section"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidebar_card_header__WEBPACK_IMPORTED_MODULE_2__["default"], {
@@ -75362,7 +75375,8 @@ function SidebarCard(_ref) {
       content: content
     })))
   );
-}
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SidebarCard);
 
 /***/ }),
 
@@ -75429,6 +75443,7 @@ function SidebarCards(_ref) {
     var isCheckboxDisabled = Boolean((_item$isCheckboxDisab = item.isCheckboxDisabled) !== null && _item$isCheckboxDisab !== void 0 ? _item$isCheckboxDisab : isDisabled);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidebar_card__WEBPACK_IMPORTED_MODULE_3__["default"], {
       key: item.id,
+      ref: item.ref,
       id: item.id,
       leftItem: item.leftItem,
       testId: itemTestId,