@datarobot/design-system 28.6.2 → 28.7.0

package/cjs/icon-sidebar/icon-sidebar.d.ts

@@ -1,4 +1,5 @@
 import { DropdownMenuOption } from '../dropdown-menu';
+import { IconSidebarLinkType } from './types';
 import './icon-sidebar.less';
 export declare enum ICON_SIDEBAR_POSITION {
     LEFT = "left",
@@ -8,15 +9,16 @@ export type IconSidebarProps = {
     className?: string;
     options: DropdownMenuOption[];
     selected?: string | number;
-    onSelect: (option: DropdownMenuOption) => void;
+    onSelect?: (option: DropdownMenuOption) => void;
     footerOption?: DropdownMenuOption;
     moreButtonText?: string;
     position?: ICON_SIDEBAR_POSITION;
+    LinkComponent?: IconSidebarLinkType;
 };
 /**
  * @midnight-gray-supported
  * @uxr-only-supported
  * @alpine-light-supported
  */
-declare function IconSidebar({ className, options, selected, onSelect, footerOption, position, moreButtonText, }: IconSidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function IconSidebar({ className, options, selected, onSelect, footerOption, position, moreButtonText, LinkComponent, }: IconSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default IconSidebar;

package/cjs/icon-sidebar/icon-sidebar.js

@@ -8,9 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _faEllipsisVertical = require("@fortawesome/free-solid-svg-icons/faEllipsisVertical");
 var _dropdownMenu = require("../dropdown-menu");
-var _iconSidebarButton = require("./icon-sidebar-button");
 var _adaptiveList = require("../adaptive-list");
 var _useTranslation = require("../hooks/use-translation");
+var _withIconSidebarItem = require("./with-icon-sidebar-item");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let ICON_SIDEBAR_POSITION = exports.ICON_SIDEBAR_POSITION = /*#__PURE__*/function (ICON_SIDEBAR_POSITION) {
@@ -30,11 +30,13 @@ function IconSidebar({
   onSelect,
   footerOption,
   position = ICON_SIDEBAR_POSITION.LEFT,
-  moreButtonText
+  moreButtonText,
+  LinkComponent
 }) {
   const {
     t
   } = (0, _useTranslation.useTranslation)();
+  const ItemComponent = (0, _withIconSidebarItem.withIconSidebarItem)(LinkComponent);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('icon-sidebar-container', className, position),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -42,7 +44,7 @@ function IconSidebar({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_adaptiveList.AdaptiveList, {
         selected: selected,
         onSelect: onSelect,
-        Component: _iconSidebarButton.IconSidebarButton,
+        Component: ItemComponent,
         target: "offsetHeight",
         triggerOffset: 62,
         options: options,
@@ -51,7 +53,7 @@ function IconSidebar({
           placement: position === ICON_SIDEBAR_POSITION.LEFT ? _dropdownMenu.DROPDOWN_MENU_PLACEMENT_TYPES.RIGHT_START : _dropdownMenu.DROPDOWN_MENU_PLACEMENT_TYPES.LEFT_START,
           triggerDynamicContent: ({
             isOpen
-          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconSidebarButton.IconSidebarButton, {
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
             option: {
               key: 'more-trigger',
               title: moreButtonText ?? t('More'),
@@ -63,7 +65,7 @@ function IconSidebar({
       })
     }), footerOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "icon-sidebar-footer-container",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconSidebarButton.IconSidebarButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
         option: footerOption,
         onSelect: onSelect,
         selected: selected

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

@@ -0,0 +1,25 @@
+import { ComponentType, ReactNode, MouseEvent, AnchorHTMLAttributes } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { DropdownMenuOption } from '../dropdown-menu';
+export type IconSidebarItemProps = {
+    option: DropdownMenuOption & {
+        selectedIcon?: IconProp;
+        divider?: boolean;
+        ariaLabel?: string;
+    };
+    onSelect?: (option: DropdownMenuOption) => void;
+    selected?: number | string | (number | string)[];
+    isLimited?: boolean;
+    children?: ReactNode;
+};
+export type IconSidebarLinkProps = {
+    className: string;
+    href: string;
+    children: ReactNode;
+    tabIndex?: number;
+    onClick: (e: MouseEvent) => void;
+};
+export type IconSidebarLinkType = ComponentType<IconSidebarLinkProps>;
+export type DefaultLinkProps = {
+    children: ReactNode;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;

package/cjs/icon-sidebar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/icon-sidebar/with-icon-sidebar-item.d.ts

@@ -0,0 +1,3 @@
+import './icon-sidebar.less';
+import { IconSidebarItemProps, IconSidebarLinkType } from './types';
+export declare const withIconSidebarItem: (LinkComponent?: IconSidebarLinkType) => ({ option, selected, isLimited, onSelect, }: IconSidebarItemProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/icon-sidebar/with-icon-sidebar-item.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withIconSidebarItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = require("../tooltip");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _truncateWithTooltip = require("../truncate-with-tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DefaultLink = ({
+  children,
+  ...props
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+  rel: "noopener noreferrer",
+  ...props,
+  children: children
+});
+const withIconSidebarItem = (LinkComponent = DefaultLink) => {
+  const IconSidebarItem = ({
+    option,
+    selected,
+    isLimited,
+    onSelect
+  }) => {
+    const isSelected = option.key === selected;
+    const icon = isSelected && option.selectedIcon ? option.selectedIcon : option.icon;
+    const getTitle = () => {
+      if (option.title) {
+        if (option.tooltipText) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "icon-sidebar-text",
+            children: option.title
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+          className: "icon-sidebar-text",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: option.title
+          })
+        });
+      }
+    };
+    const onClick = e => {
+      if (option.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+
+      // Prevent calling onSelect when link is opened in a new tab
+      if (e.metaKey || e.ctrlKey) {
+        return;
+      }
+      onSelect?.(option);
+    };
+    const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "icon-sidebar-button-icon-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+          icon: icon
+        })
+      }), getTitle(), option.divider && !isLimited && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "icon-sidebar-divider"
+      })]
+    });
+    const props = {
+      className: (0, _classnames.default)('icon-sidebar-button-container', option.className, option.disabled && 'disabled', isSelected && 'selected'),
+      'test-id': option.testId,
+      'aria-label': option.title && typeof option.title === 'string' ? option.title : option.ariaLabel
+    };
+    if (option.link) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+        content: option.tooltipText,
+        placement: option.tooltipPlacement,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkComponent, {
+            ...props,
+            tabIndex: option.disabled ? -1 : 0,
+            href: option.link,
+            onClick: onClick,
+            children: content
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+      content: option.tooltipText,
+      placement: option.tooltipPlacement,
+      children: onSelect ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        ...props,
+        onClick: onClick,
+        disabled: option.disabled,
+        children: content
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ...props,
+        children: content
+      })
+    });
+  };
+  return IconSidebarItem;
+};
+exports.withIconSidebarItem = withIconSidebarItem;

package/esm/icon-sidebar/icon-sidebar.d.ts

@@ -1,4 +1,5 @@
 import { DropdownMenuOption } from '../dropdown-menu';
+import { IconSidebarLinkType } from './types';
 import './icon-sidebar.less';
 export declare enum ICON_SIDEBAR_POSITION {
     LEFT = "left",
@@ -8,15 +9,16 @@ export type IconSidebarProps = {
     className?: string;
     options: DropdownMenuOption[];
     selected?: string | number;
-    onSelect: (option: DropdownMenuOption) => void;
+    onSelect?: (option: DropdownMenuOption) => void;
     footerOption?: DropdownMenuOption;
     moreButtonText?: string;
     position?: ICON_SIDEBAR_POSITION;
+    LinkComponent?: IconSidebarLinkType;
 };
 /**
  * @midnight-gray-supported
  * @uxr-only-supported
  * @alpine-light-supported
  */
-declare function IconSidebar({ className, options, selected, onSelect, footerOption, position, moreButtonText, }: IconSidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function IconSidebar({ className, options, selected, onSelect, footerOption, position, moreButtonText, LinkComponent, }: IconSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default IconSidebar;

package/esm/icon-sidebar/icon-sidebar.js

@@ -2,9 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons/faEllipsisVertical';
 import { DROPDOWN_MENU_PLACEMENT_TYPES } from '../dropdown-menu';
-import { IconSidebarButton } from './icon-sidebar-button';
 import { AdaptiveList } from '../adaptive-list';
 import { useTranslation } from '../hooks/use-translation';
+import { withIconSidebarItem } from './with-icon-sidebar-item';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export let ICON_SIDEBAR_POSITION = /*#__PURE__*/function (ICON_SIDEBAR_POSITION) {
   ICON_SIDEBAR_POSITION["LEFT"] = "left";
@@ -23,11 +23,13 @@ function IconSidebar({
   onSelect,
   footerOption,
   position = ICON_SIDEBAR_POSITION.LEFT,
-  moreButtonText
+  moreButtonText,
+  LinkComponent
 }) {
   const {
     t
   } = useTranslation();
+  const ItemComponent = withIconSidebarItem(LinkComponent);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames('icon-sidebar-container', className, position),
     children: [/*#__PURE__*/_jsx("div", {
@@ -35,7 +37,7 @@ function IconSidebar({
       children: /*#__PURE__*/_jsx(AdaptiveList, {
         selected: selected,
         onSelect: onSelect,
-        Component: IconSidebarButton,
+        Component: ItemComponent,
         target: "offsetHeight",
         triggerOffset: 62,
         options: options,
@@ -44,7 +46,7 @@ function IconSidebar({
           placement: position === ICON_SIDEBAR_POSITION.LEFT ? DROPDOWN_MENU_PLACEMENT_TYPES.RIGHT_START : DROPDOWN_MENU_PLACEMENT_TYPES.LEFT_START,
           triggerDynamicContent: ({
             isOpen
-          }) => /*#__PURE__*/_jsx(IconSidebarButton, {
+          }) => /*#__PURE__*/_jsx(ItemComponent, {
             option: {
               key: 'more-trigger',
               title: moreButtonText ?? t('More'),
@@ -56,7 +58,7 @@ function IconSidebar({
       })
     }), footerOption && /*#__PURE__*/_jsx("div", {
       className: "icon-sidebar-footer-container",
-      children: /*#__PURE__*/_jsx(IconSidebarButton, {
+      children: /*#__PURE__*/_jsx(ItemComponent, {
         option: footerOption,
         onSelect: onSelect,
         selected: selected

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

@@ -0,0 +1,25 @@
+import { ComponentType, ReactNode, MouseEvent, AnchorHTMLAttributes } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { DropdownMenuOption } from '../dropdown-menu';
+export type IconSidebarItemProps = {
+    option: DropdownMenuOption & {
+        selectedIcon?: IconProp;
+        divider?: boolean;
+        ariaLabel?: string;
+    };
+    onSelect?: (option: DropdownMenuOption) => void;
+    selected?: number | string | (number | string)[];
+    isLimited?: boolean;
+    children?: ReactNode;
+};
+export type IconSidebarLinkProps = {
+    className: string;
+    href: string;
+    children: ReactNode;
+    tabIndex?: number;
+    onClick: (e: MouseEvent) => void;
+};
+export type IconSidebarLinkType = ComponentType<IconSidebarLinkProps>;
+export type DefaultLinkProps = {
+    children: ReactNode;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;

package/esm/icon-sidebar/types.js

@@ -0,0 +1 @@
+export {};

package/esm/icon-sidebar/with-icon-sidebar-item.d.ts

@@ -0,0 +1,3 @@
+import './icon-sidebar.less';
+import { IconSidebarItemProps, IconSidebarLinkType } from './types';
+export declare const withIconSidebarItem: (LinkComponent?: IconSidebarLinkType) => ({ option, selected, isLimited, onSelect, }: IconSidebarItemProps) => import("react/jsx-runtime").JSX.Element;

package/esm/icon-sidebar/with-icon-sidebar-item.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Tooltip } from '../tooltip';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { TruncateWithTooltip } from '../truncate-with-tooltip';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultLink = ({
+  children,
+  ...props
+}) => /*#__PURE__*/_jsx("a", {
+  rel: "noopener noreferrer",
+  ...props,
+  children: children
+});
+export const withIconSidebarItem = (LinkComponent = DefaultLink) => {
+  const IconSidebarItem = ({
+    option,
+    selected,
+    isLimited,
+    onSelect
+  }) => {
+    const isSelected = option.key === selected;
+    const icon = isSelected && option.selectedIcon ? option.selectedIcon : option.icon;
+    const getTitle = () => {
+      if (option.title) {
+        if (option.tooltipText) {
+          return /*#__PURE__*/_jsx("span", {
+            className: "icon-sidebar-text",
+            children: option.title
+          });
+        }
+        return /*#__PURE__*/_jsx(TruncateWithTooltip, {
+          className: "icon-sidebar-text",
+          children: /*#__PURE__*/_jsx("span", {
+            children: option.title
+          })
+        });
+      }
+    };
+    const onClick = e => {
+      if (option.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+
+      // Prevent calling onSelect when link is opened in a new tab
+      if (e.metaKey || e.ctrlKey) {
+        return;
+      }
+      onSelect?.(option);
+    };
+    const content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "icon-sidebar-button-icon-container",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: icon
+        })
+      }), getTitle(), option.divider && !isLimited && /*#__PURE__*/_jsx("div", {
+        className: "icon-sidebar-divider"
+      })]
+    });
+    const props = {
+      className: classNames('icon-sidebar-button-container', option.className, option.disabled && 'disabled', isSelected && 'selected'),
+      'test-id': option.testId,
+      'aria-label': option.title && typeof option.title === 'string' ? option.title : option.ariaLabel
+    };
+    if (option.link) {
+      return /*#__PURE__*/_jsx(Tooltip, {
+        content: option.tooltipText,
+        placement: option.tooltipPlacement,
+        children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(LinkComponent, {
+            ...props,
+            tabIndex: option.disabled ? -1 : 0,
+            href: option.link,
+            onClick: onClick,
+            children: content
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx(Tooltip, {
+      content: option.tooltipText,
+      placement: option.tooltipPlacement,
+      children: onSelect ? /*#__PURE__*/_jsx("button", {
+        ...props,
+        onClick: onClick,
+        disabled: option.disabled,
+        children: content
+      }) : /*#__PURE__*/_jsx("div", {
+        ...props,
+        children: content
+      })
+    });
+  };
+  return IconSidebarItem;
+};