@datarobot/design-system 28.7.1 → 28.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/cjs/collapsible-sidebar/collapsible-sidebar.d.ts +2 -1
  2. package/cjs/collapsible-sidebar/collapsible-sidebar.js +8 -7
  3. package/esm/collapsible-sidebar/collapsible-sidebar.d.ts +2 -1
  4. package/esm/collapsible-sidebar/collapsible-sidebar.js +8 -6
  5. package/js/bundle/bundle.js +28 -16
  6. package/js/bundle/bundle.min.js +1 -1
  7. package/js/bundle/index.d.ts +2 -1
  8. package/package.json +1 -1
package/cjs/collapsible-sidebar/collapsible-sidebar.d.ts CHANGED
@@ -52,4 +52,5 @@ export type CollapsibleSidebarProps = {
52
52
  * @midnight-gray-supported
53
53
  * @alpine-light-supported
54
54
  * */
55
- export default function CollapsibleSidebar({ children, sidebarClassName, isMinimized, onToggleMinimized, sidebarMinimizedClassName, testId, toggleButtonTestId, toggleButtonClassName, toggleButtonPlacement, disableToggleMinimization, activeMinimize, sidebarName, isResizeEnabled, width, onWidthChange, maxWidth, minWidth, openTooltipText, closeTooltipText, resizeTooltipText, }: CollapsibleSidebarProps): import("react/jsx-runtime").JSX.Element;
55
+ declare const CollapsibleSidebar: React.ForwardRefExoticComponent<CollapsibleSidebarProps & React.RefAttributes<HTMLDivElement>>;
56
+ export default CollapsibleSidebar;
package/cjs/collapsible-sidebar/collapsible-sidebar.js CHANGED
@@ -3,14 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TOGGLE_BUTTON_PLACEMENTS = void 0;
7
- exports.default = CollapsibleSidebar;
6
+ exports.default = exports.TOGGLE_BUTTON_PLACEMENTS = void 0;
8
7
  var _react = _interopRequireWildcard(require("react"));
9
8
  var _classnames = _interopRequireDefault(require("classnames"));
10
9
  var _faChevronLeft = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
11
10
  var _faChevronRight = require("@fortawesome/free-solid-svg-icons/faChevronRight");
12
11
  var _useResize = require("./useResize");
13
12
  var _useTranslation = require("../hooks/use-translation");
13
+ var _useForwardRef = require("../hooks/use-forward-ref");
14
14
  var _fontAwesomeIcon = require("../font-awesome-icon");
15
15
  var _button = require("../button");
16
16
  var _tooltip = require("../tooltip");
@@ -36,7 +36,7 @@ const CHEVRON_CLASSNAME_TABLE = {
36
36
  * @midnight-gray-supported
37
37
  * @alpine-light-supported
38
38
  * */
39
- function CollapsibleSidebar({
39
+ const CollapsibleSidebar = /*#__PURE__*/(0, _react.forwardRef)(function CollapsibleSidebar({
40
40
  children,
41
41
  sidebarClassName,
42
42
  isMinimized = false,
@@ -57,8 +57,8 @@ function CollapsibleSidebar({
57
57
  openTooltipText,
58
58
  closeTooltipText,
59
59
  resizeTooltipText
60
- }) {
61
- const panelRef = (0, _react.useRef)(null);
60
+ }, ref) {
61
+ const [setPanelRef, panelRef] = (0, _useForwardRef.useForwardRef)(ref);
62
62
  const {
63
63
  t
64
64
  } = (0, _useTranslation.useTranslation)();
@@ -112,7 +112,7 @@ function CollapsibleSidebar({
112
112
  maxWidth: isMinimized ? undefined : maxWidth
113
113
  },
114
114
  onClick: activeMinimize && isMinimized ? onToggleButtonClick : undefined,
115
- ref: panelRef,
115
+ ref: setPanelRef,
116
116
  children: [children, !disableToggleMinimization && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
117
117
  className: (0, _classnames.default)('collapsible-sidebar-buttons-wrapper', isResizing && 'resizing'),
118
118
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
@@ -139,4 +139,5 @@ function CollapsibleSidebar({
139
139
  })]
140
140
  })
141
141
  );
142
- }
142
+ });
143
+ var _default = exports.default = CollapsibleSidebar;
package/esm/collapsible-sidebar/collapsible-sidebar.d.ts CHANGED
@@ -52,4 +52,5 @@ export type CollapsibleSidebarProps = {
52
52
  * @midnight-gray-supported
53
53
  * @alpine-light-supported
54
54
  * */
55
- export default function CollapsibleSidebar({ children, sidebarClassName, isMinimized, onToggleMinimized, sidebarMinimizedClassName, testId, toggleButtonTestId, toggleButtonClassName, toggleButtonPlacement, disableToggleMinimization, activeMinimize, sidebarName, isResizeEnabled, width, onWidthChange, maxWidth, minWidth, openTooltipText, closeTooltipText, resizeTooltipText, }: CollapsibleSidebarProps): import("react/jsx-runtime").JSX.Element;
55
+ declare const CollapsibleSidebar: React.ForwardRefExoticComponent<CollapsibleSidebarProps & React.RefAttributes<HTMLDivElement>>;
56
+ export default CollapsibleSidebar;
package/esm/collapsible-sidebar/collapsible-sidebar.js CHANGED
@@ -1,9 +1,10 @@
1
- import React, { useRef, useMemo } from 'react';
1
+ import React, { useMemo, forwardRef } from 'react';
2
2
  import classNames from 'classnames';
3
3
  import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
4
4
  import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
5
5
  import { useResize } from './useResize';
6
6
  import { useTranslation } from '../hooks/use-translation';
7
+ import { useForwardRef } from '../hooks/use-forward-ref';
7
8
  import { FontAwesomeIcon } from '../font-awesome-icon';
8
9
  import { Button, ACCENT_TYPES } from '../button';
9
10
  import { Tooltip, TOOLTIP_DELAY_TYPES, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
@@ -27,7 +28,7 @@ const CHEVRON_CLASSNAME_TABLE = {
27
28
  * @midnight-gray-supported
28
29
  * @alpine-light-supported
29
30
  * */
30
- export default function CollapsibleSidebar({
31
+ const CollapsibleSidebar = /*#__PURE__*/forwardRef(function CollapsibleSidebar({
31
32
  children,
32
33
  sidebarClassName,
33
34
  isMinimized = false,
@@ -48,8 +49,8 @@ export default function CollapsibleSidebar({
48
49
  openTooltipText,
49
50
  closeTooltipText,
50
51
  resizeTooltipText
51
- }) {
52
- const panelRef = useRef(null);
52
+ }, ref) {
53
+ const [setPanelRef, panelRef] = useForwardRef(ref);
53
54
  const {
54
55
  t
55
56
  } = useTranslation();
@@ -103,7 +104,7 @@ export default function CollapsibleSidebar({
103
104
  maxWidth: isMinimized ? undefined : maxWidth
104
105
  },
105
106
  onClick: activeMinimize && isMinimized ? onToggleButtonClick : undefined,
106
- ref: panelRef,
107
+ ref: setPanelRef,
107
108
  children: [children, !disableToggleMinimization && /*#__PURE__*/_jsxs("div", {
108
109
  className: classNames('collapsible-sidebar-buttons-wrapper', isResizing && 'resizing'),
109
110
  children: [/*#__PURE__*/_jsx(Button, {
@@ -130,4 +131,5 @@ export default function CollapsibleSidebar({
130
131
  })]
131
132
  })
132
133
  );
133
- }
134
+ });
135
+ export default CollapsibleSidebar;
package/js/bundle/bundle.js CHANGED
@@ -46386,7 +46386,7 @@ var COLLAPSIBLE_PANEL_ACCENT_TYPES = /*#__PURE__*/function (COLLAPSIBLE_PANEL_AC
46386
46386
  "use strict";
46387
46387
  /* harmony export */ __webpack_require__.d(__webpack_exports__, {
46388
46388
  /* harmony export */ TOGGLE_BUTTON_PLACEMENTS: () => (/* binding */ TOGGLE_BUTTON_PLACEMENTS),
46389
- /* harmony export */ "default": () => (/* binding */ CollapsibleSidebar)
46389
+ /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
46390
46390
  /* harmony export */ });
46391
46391
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
46392
46392
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -46398,12 +46398,19 @@ var COLLAPSIBLE_PANEL_ACCENT_TYPES = /*#__PURE__*/function (COLLAPSIBLE_PANEL_AC
46398
46398
  /* harmony import */ var _fortawesome_free_solid_svg_icons_faChevronRight__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_free_solid_svg_icons_faChevronRight__WEBPACK_IMPORTED_MODULE_3__);
46399
46399
  /* harmony import */ var _useResize__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./useResize */ "./src/components/collapsible-sidebar/useResize.ts");
46400
46400
  /* harmony import */ var _hooks_use_translation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/use-translation */ "./src/components/hooks/use-translation/index.ts");
46401
- /* harmony import */ var _font_awesome_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../font-awesome-icon */ "./src/components/font-awesome-icon/index.ts");
46402
- /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../button */ "./src/components/button/index.ts");
46403
- /* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../tooltip */ "./src/components/tooltip/index.ts");
46404
- /* harmony import */ var _collapsible_sidebar_less__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./collapsible-sidebar.less */ "./src/components/collapsible-sidebar/collapsible-sidebar.less");
46405
- /* harmony import */ var _collapsible_sidebar_less__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_collapsible_sidebar_less__WEBPACK_IMPORTED_MODULE_9__);
46401
+ /* harmony import */ var _hooks_use_forward_ref__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/use-forward-ref */ "./src/components/hooks/use-forward-ref/index.ts");
46402
+ /* harmony import */ var _font_awesome_icon__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../font-awesome-icon */ "./src/components/font-awesome-icon/index.ts");
46403
+ /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../button */ "./src/components/button/index.ts");
46404
+ /* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../tooltip */ "./src/components/tooltip/index.ts");
46405
+ /* harmony import */ var _collapsible_sidebar_less__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./collapsible-sidebar.less */ "./src/components/collapsible-sidebar/collapsible-sidebar.less");
46406
+ /* harmony import */ var _collapsible_sidebar_less__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_collapsible_sidebar_less__WEBPACK_IMPORTED_MODULE_10__);
46406
46407
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
46408
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
46409
+ 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."); }
46410
+ 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; } }
46411
+ 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; }
46412
+ 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; } }
46413
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
46407
46414
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
46408
46415
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
46409
46416
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -46417,6 +46424,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
46417
46424
 
46418
46425
 
46419
46426
 
46427
+
46420
46428
  var TOGGLE_BUTTON_PLACEMENTS = {
46421
46429
  left: 'left',
46422
46430
  right: 'right'
@@ -46433,7 +46441,7 @@ var CHEVRON_CLASSNAME_TABLE = _defineProperty(_defineProperty({}, TOGGLE_BUTTON_
46433
46441
  * @midnight-gray-supported
46434
46442
  * @alpine-light-supported
46435
46443
  * */
46436
- function CollapsibleSidebar(_ref) {
46444
+ var CollapsibleSidebar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function CollapsibleSidebar(_ref, ref) {
46437
46445
  var children = _ref.children,
46438
46446
  sidebarClassName = _ref.sidebarClassName,
46439
46447
  _ref$isMinimized = _ref.isMinimized,
@@ -46459,7 +46467,10 @@ function CollapsibleSidebar(_ref) {
46459
46467
  openTooltipText = _ref.openTooltipText,
46460
46468
  closeTooltipText = _ref.closeTooltipText,
46461
46469
  resizeTooltipText = _ref.resizeTooltipText;
46462
- var panelRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
46470
+ var _useForwardRef = (0,_hooks_use_forward_ref__WEBPACK_IMPORTED_MODULE_6__.useForwardRef)(ref),
46471
+ _useForwardRef2 = _slicedToArray(_useForwardRef, 2),
46472
+ setPanelRef = _useForwardRef2[0],
46473
+ panelRef = _useForwardRef2[1];
46463
46474
  var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_5__.useTranslation)(),
46464
46475
  t = _useTranslation.t;
46465
46476
  var openTooltipTextValue = openTooltipText !== null && openTooltipText !== void 0 ? openTooltipText : t('click to open');
@@ -46508,30 +46519,31 @@ function CollapsibleSidebar(_ref) {
46508
46519
  maxWidth: isMinimized ? undefined : maxWidth
46509
46520
  },
46510
46521
  onClick: activeMinimize && isMinimized ? onToggleButtonClick : undefined,
46511
- ref: panelRef
46522
+ ref: setPanelRef
46512
46523
  }, children, !disableToggleMinimization && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
46513
46524
  className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('collapsible-sidebar-buttons-wrapper', isResizing && 'resizing')
46514
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_7__.Button, {
46515
- accentType: _button__WEBPACK_IMPORTED_MODULE_7__.ACCENT_TYPES.COMMAND,
46525
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_8__.Button, {
46526
+ accentType: _button__WEBPACK_IMPORTED_MODULE_8__.ACCENT_TYPES.COMMAND,
46516
46527
  className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('toggle-sidebar', toggleButtonClassName, toggleButtonPlacement),
46517
46528
  onClick: onToggleButtonClick,
46518
46529
  testId: toggleButtonTestId,
46519
46530
  "aria-label": sidebarName !== null && sidebarName !== void 0 ? sidebarName : t('Sidebar'),
46520
46531
  "aria-expanded": !isMinimized
46521
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_6__.FontAwesomeIcon, {
46532
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_7__.FontAwesomeIcon, {
46522
46533
  icon: chevronIcon,
46523
46534
  className: toggleButtonPlacement
46524
- })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_8__.Tooltip, {
46535
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_9__.Tooltip, {
46525
46536
  content: tooltipText,
46526
- placement: toggleButtonPlacement === TOGGLE_BUTTON_PLACEMENTS.right ? _tooltip__WEBPACK_IMPORTED_MODULE_8__.TOOLTIP_PLACEMENT_TYPES.RIGHT : _tooltip__WEBPACK_IMPORTED_MODULE_8__.TOOLTIP_PLACEMENT_TYPES.LEFT,
46527
- delayType: _tooltip__WEBPACK_IMPORTED_MODULE_8__.TOOLTIP_DELAY_TYPES.SLOW
46537
+ placement: toggleButtonPlacement === TOGGLE_BUTTON_PLACEMENTS.right ? _tooltip__WEBPACK_IMPORTED_MODULE_9__.TOOLTIP_PLACEMENT_TYPES.RIGHT : _tooltip__WEBPACK_IMPORTED_MODULE_9__.TOOLTIP_PLACEMENT_TYPES.LEFT,
46538
+ delayType: _tooltip__WEBPACK_IMPORTED_MODULE_9__.TOOLTIP_DELAY_TYPES.SLOW
46528
46539
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
46529
46540
  onClick: onToggleBorderLineClick,
46530
46541
  className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('toggle-sidebar-border-panel', isResizeEnabled && !isMinimized && 'is-resizable', toggleButtonPlacement),
46531
46542
  onMouseDown: onMouseDownHandler
46532
46543
  }))))
46533
46544
  );
46534
- }
46545
+ });
46546
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CollapsibleSidebar);
46535
46547
 
46536
46548
  /***/ }),
46537
46549