@datarobot/design-system 28.10.0 → 29.0.0

package/esm/scheduler/with-button-switcher-scheduler-container.d.ts

@@ -1,3 +1,4 @@
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { SimpleSchedulerModalTexts, ContainerProps } from './constants';
 export type WithButtonSwitcherSchedulerContainerProps = ContainerProps & {
     showAdvancedScheduler: boolean;
@@ -5,5 +6,7 @@ export type WithButtonSwitcherSchedulerContainerProps = ContainerProps & {
     advancedSchedulerToggleButtonText: string;
     simpleSchedulerModalTexts: SimpleSchedulerModalTexts;
     onUseAdvancedScheduler: () => void;
+    advancedSchedulerSwitcherIcon: IconLookup;
+    simpleSchedulerSwitcherIcon: IconLookup;
 };
-export declare function WithButtonSwitcherSchedulerContainer({ showAdvancedScheduler, onUpdateSchedule, isDisabled, validationTexts, initialSchedule, schedulerKey, validateArrayOfRangedNumbersOrAll, simpleSchedulerToggleButtonText, advancedSchedulerToggleButtonText, simpleSchedulerModalTexts, advancedSchedulerInfoTexts, labelTexts, frequencyOptions, daysOfWeek, months, onUseSimpleScheduler, onUseAdvancedScheduler, }: WithButtonSwitcherSchedulerContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function WithButtonSwitcherSchedulerContainer({ showAdvancedScheduler, onUpdateSchedule, isDisabled, validationTexts, initialSchedule, schedulerKey, validateArrayOfRangedNumbersOrAll, simpleSchedulerToggleButtonText, advancedSchedulerToggleButtonText, simpleSchedulerModalTexts, advancedSchedulerInfoTexts, labelTexts, frequencyOptions, daysOfWeek, months, onUseSimpleScheduler, onUseAdvancedScheduler, advancedSchedulerSwitcherIcon, simpleSchedulerSwitcherIcon, }: WithButtonSwitcherSchedulerContainerProps): import("react/jsx-runtime").JSX.Element;

package/esm/scheduler/with-button-switcher-scheduler-container.js

@@ -20,8 +20,11 @@ export function WithButtonSwitcherSchedulerContainer({
   daysOfWeek,
   months,
   onUseSimpleScheduler,
-  onUseAdvancedScheduler
+  onUseAdvancedScheduler,
+  advancedSchedulerSwitcherIcon,
+  simpleSchedulerSwitcherIcon
 }) {
+  const switcherIcon = showAdvancedScheduler ? simpleSchedulerSwitcherIcon : advancedSchedulerSwitcherIcon;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [showAdvancedScheduler ? /*#__PURE__*/_jsx(AdvancedScheduler, {
       onUpdateSchedule: onUpdateSchedule,
@@ -47,7 +50,8 @@ export function WithButtonSwitcherSchedulerContainer({
       simpleSchedulerModalTexts: simpleSchedulerModalTexts,
       simpleSchedulerToggleButtonText: simpleSchedulerToggleButtonText,
       onUseSimpleScheduler: onUseSimpleScheduler,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      icon: switcherIcon
     })]
   });
 }

package/esm/sidebar-menu/sidebar-menu-item-edit-form.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { faSquareExclamation } from '@fortawesome/pro-solid-svg-icons/faSquareExclamation';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { Input, INPUT_SIZES } from '../input';
 import { useFocusWithin } from '../hooks/use-focus-within';
 import { getValidityMessages, VALIDATION_RULE_TYPES, useDefaultValidationValues } from '../form-field';
@@ -21,7 +21,7 @@ export function SidebarMenuItemEditForm({
       type: validity?.type,
       value: hasError
     },
-    rightIcon: hasError ? faSquareExclamation : null
+    rightIcon: hasError ? faCircleXmark : null
   };
   const validationValues = useDefaultValidationValues();
   const validityMessages = getValidityMessages({

package/esm/sidebar-menu/sidebar-menu-link.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { faExclamationSquare } from '@fortawesome/pro-solid-svg-icons/faExclamationSquare';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { getTabIndex } from '../hooks/use-non-native-button-attrs';
 import { useTranslation } from '../hooks/use-translation';
@@ -31,7 +31,7 @@ export function SidebarMenuLink({
     "test-id": testId,
     tabIndex: getTabIndex(isDisabled),
     children: [children, hasErrors() ? /*#__PURE__*/_jsx(FontAwesomeIcon, {
-      icon: faExclamationSquare,
+      icon: faCircleXmark,
       className: "sidebar-menu-link-error-icon",
       "aria-label": sectionErrorAriaLabel ?? t('Section has errors'),
       "aria-hidden": "false"

package/esm/table-react/components/custom-cells/row-expand-cell.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { faChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import classnames from 'classnames';
 import { ACCENT_TYPES, Button } from '../../../button';
 import { FontAwesomeIcon } from '../../../font-awesome-icon';

package/esm/tabular-data-tooltip/static-tabular-data-tooltip.js

@@ -1,17 +1,31 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import TabularDataTooltip from './tabular-data-tooltip';
 import { jsx as _jsx } from "react/jsx-runtime";
+const errorMessage = 'Warning: useLayoutEffect does nothing on the server';
 export default function StaticTabularDataTooltip(title, rows, {
   testId,
   className,
   footer
 } = {}) {
-  return renderToStaticMarkup(/*#__PURE__*/_jsx(TabularDataTooltip, {
+  const consoleError = console.error;
+  // This is done to suppress React warnings about useLayoutEffect. It is
+  // considered safe here because function is synchronous, and we restore the
+  // original function immediately after render.
+  console.error = (error, ...args) => {
+    if (error && error.includes(errorMessage)) {
+      return;
+    }
+    return consoleError(error, ...args);
+  };
+  const view = renderToStaticMarkup(/*#__PURE__*/_jsx(TabularDataTooltip, {
     title: title,
     rows: rows,
     testId: testId,
     footer: footer,
     className: className
   }));
+  console.error = consoleError;
+  return view;
 }

package/esm/tour/advanced-tour/components/advanced-tour-footer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
-import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { Button, ACCENT_TYPES } from '../../../button';
 import { useTranslation } from '../../../hooks/use-translation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/tour/components/tour-footer.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
-import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons/faChevronLeft';
-import { faCheck } from '@fortawesome/pro-regular-svg-icons/faCheck';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { Button, ACCENT_TYPES } from '../../button';
 import { useTranslation } from '../../hooks/use-translation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/zoom-controls/zoom-controls.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import './zoom-controls.less';
 export type ZoomControlsProps = {
     currentZoom: number;
@@ -13,9 +14,12 @@ export type ZoomControlsProps = {
     zoomInText?: string;
     zoomOutText?: string;
     resetText?: string;
+    zoomInIcon?: IconLookup;
+    zoomOutIcon?: IconLookup;
+    resetIcon?: IconLookup;
 };
 /** Zoom is used on graphs if you need to increase or decrease data visualization
  *  @midnight-gray-supported
  *  @alpine-light-supported
  *  */
-export default function ZoomControls({ currentZoom, onZoomIn, onZoomOut, onZoomReset, className, minZoomFactor, maxZoomFactor, testId, hidden, zoomInText, zoomOutText, resetText, }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ZoomControls({ currentZoom, onZoomIn, onZoomOut, onZoomReset, className, minZoomFactor, maxZoomFactor, testId, hidden, zoomInText, zoomOutText, resetText, zoomInIcon, zoomOutIcon, resetIcon, }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/zoom-controls/zoom-controls.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
 import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
-import { faMagnifyingGlassArrowsRotate } from '@fortawesome/pro-solid-svg-icons/faMagnifyingGlassArrowsRotate';
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons/faArrowsRotate';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { Button, BUTTON_TYPES, ACCENT_TYPES } from '../button';
 import { useTranslation } from '../hooks/use-translation';
@@ -24,7 +24,10 @@ export default function ZoomControls({
   hidden = false,
   zoomInText,
   zoomOutText,
-  resetText
+  resetText,
+  zoomInIcon = faMagnifyingGlassPlus,
+  zoomOutIcon = faMagnifyingGlassMinus,
+  resetIcon = faArrowsRotate
 }) {
   const {
     t
@@ -49,7 +52,7 @@ export default function ZoomControls({
       "aria-label": zoomInTextWithDefault,
       tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
       children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-        icon: faMagnifyingGlassPlus
+        icon: zoomInIcon
       })
     }), /*#__PURE__*/_jsx(Button, {
       className: "button command zoom-item",
@@ -62,7 +65,7 @@ export default function ZoomControls({
       "aria-label": zoomOutTextWithDefault,
       tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
       children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-        icon: faMagnifyingGlassMinus
+        icon: zoomOutIcon
       })
     }), /*#__PURE__*/_jsx(Button, {
       className: "button command zoom-item",
@@ -75,7 +78,7 @@ export default function ZoomControls({
       "aria-label": resetTextWithDefault,
       tooltipPlacement: TOOLTIP_PLACEMENT_TYPES.TOP,
       children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-        icon: faMagnifyingGlassArrowsRotate
+        icon: resetIcon
       })
     })]
   });