@datarobot/design-system 30.1.3 → 30.3.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/table-react/components/table-settings/table-settings-item.js

@@ -15,6 +15,7 @@ var _truncateWithTooltip = require("../../../truncate-with-tooltip");
 var _button = require("../../../button");
 var _fontAwesomeIcon = require("../../../font-awesome-icon");
 var _hooks = require("../../../hooks");
+var _useTranslation = require("../../../hooks/use-translation");
 var _types = require("../../types");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,6 +31,9 @@ function TableSettingsItem({
   handleKeyboardColumnsReorder,
   localizationText
 }) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
   const isPinned = listItem.getIsPinned();
   const sorted = listItem.getIsSorted();
   const isVisible = listItem.getIsVisible();
@@ -67,6 +71,13 @@ function TableSettingsItem({
         break;
     }
   };
+  const visibleColumns = settings.getVisibleLeafColumns().filter(({
+    columnDef: {
+      meta
+    }
+  }) => meta?.hideFromSettings !== true);
+  const isOneVisible = visibleColumns.length === 1;
+  const disableHideColumns = isOneVisible && isVisible;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -87,6 +98,8 @@ function TableSettingsItem({
         id: `checkbox-${listItem.id}`,
         testId: `visibility-checkbox-${listItem.id}`,
         isChecked: isVisible,
+        isDisabled: disableHideColumns,
+        tooltipText: disableHideColumns ? t('At least one column must stay selected') : undefined,
         onChange: listItem.getToggleVisibilityHandler(),
         className: "table-settings-checkbox",
         ariaLabel: listItem.columnDef.header

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/table-react/components/table-settings/table-settings-item.js

@@ -9,6 +9,7 @@ import { TruncateWithTooltip } from '../../../truncate-with-tooltip';
 import { ACCENT_TYPES, Button, BUTTON_SIZES } from '../../../button';
 import { FontAwesomeIcon } from '../../../font-awesome-icon';
 import { useFocusWithin } from '../../../hooks';
+import { useTranslation } from '../../../hooks/use-translation';
 import { PINNED_WIDTH_THRESHOLD, SORTING } from '../../types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function TableSettingsItem({
@@ -22,6 +23,9 @@ export function TableSettingsItem({
   handleKeyboardColumnsReorder,
   localizationText
 }) {
+  const {
+    t
+  } = useTranslation();
   const isPinned = listItem.getIsPinned();
   const sorted = listItem.getIsSorted();
   const isVisible = listItem.getIsVisible();
@@ -59,6 +63,13 @@ export function TableSettingsItem({
         break;
     }
   };
+  const visibleColumns = settings.getVisibleLeafColumns().filter(({
+    columnDef: {
+      meta
+    }
+  }) => meta?.hideFromSettings !== true);
+  const isOneVisible = visibleColumns.length === 1;
+  const disableHideColumns = isOneVisible && isVisible;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -79,6 +90,8 @@ export function TableSettingsItem({
         id: `checkbox-${listItem.id}`,
         testId: `visibility-checkbox-${listItem.id}`,
         isChecked: isVisible,
+        isDisabled: disableHideColumns,
+        tooltipText: disableHideColumns ? t('At least one column must stay selected') : undefined,
         onChange: listItem.getToggleVisibilityHandler(),
         className: "table-settings-checkbox",
         ariaLabel: listItem.columnDef.header

package/js/bundle/bundle.js

@@ -47982,6 +47982,7 @@ var CollapsiblePanel = function CollapsiblePanel(_ref) {
       'collapsible-panel-expanded': expanded
     })
   }, headerPlacement === COLLAPSIBLE_PANEL_PLACEMENT.TOP && headerContainer, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_transition_group__WEBPACK_IMPORTED_MODULE_7__["default"], _extends({}, transitionProps, {
+    nodeRef: wrapperRef,
     "in": expanded,
     onEntering: onEntering,
     onEntered: onEntered,
@@ -67201,6 +67202,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   RangeSlider: () => (/* reexport safe */ _range_slider__WEBPACK_IMPORTED_MODULE_70__.RangeSlider),
 /* harmony export */   RefreshButton: () => (/* reexport safe */ _refresh_button__WEBPACK_IMPORTED_MODULE_72__.RefreshButton),
 /* harmony export */   SEARCH_MODE_TYPES: () => (/* reexport safe */ _search__WEBPACK_IMPORTED_MODULE_74__.SEARCH_MODE_TYPES),
+/* harmony export */   SELECTABLE_TILES_SIZES: () => (/* reexport safe */ _selectable_tiles__WEBPACK_IMPORTED_MODULE_76__.SELECTABLE_TILES_SIZES),
 /* harmony export */   SKELETON_TYPES: () => (/* reexport safe */ _skeleton__WEBPACK_IMPORTED_MODULE_81__.SKELETON_TYPES),
 /* harmony export */   SUB_NAVIGATION_ACCENT_SIZES: () => (/* reexport safe */ _sub_navigation__WEBPACK_IMPORTED_MODULE_86__.SUB_NAVIGATION_ACCENT_SIZES),
 /* harmony export */   SUB_NAVIGATION_ACCENT_TYPES: () => (/* reexport safe */ _sub_navigation__WEBPACK_IMPORTED_MODULE_86__.SUB_NAVIGATION_ACCENT_TYPES),
@@ -69297,13 +69299,16 @@ var LoadingBackdrop = function LoadingBackdrop(_ref) {
     testId = _ref$testId === void 0 ? 'loading-backdrop' : _ref$testId;
   var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_3__.useTranslation)(),
     t = _useTranslation.t;
+  var nodeRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_transition_group__WEBPACK_IMPORTED_MODULE_5__["default"], {
     classNames: "loading-backdrop",
+    nodeRef: nodeRef,
     "in": isLoading,
     onExited: onTransitionEnd,
     timeout: 500,
     appear: true
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    ref: nodeRef,
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('loading-backdrop center-status ', customClassName),
     "test-id": testId
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_message__WEBPACK_IMPORTED_MODULE_2__.Message, {
@@ -74924,9 +74929,12 @@ function SearchableList(_ref) {
 
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   SelectableTiles: () => (/* reexport safe */ _selectable_tiles__WEBPACK_IMPORTED_MODULE_0__["default"])
+/* harmony export */   SELECTABLE_TILES_SIZES: () => (/* reexport safe */ _types__WEBPACK_IMPORTED_MODULE_0__.SELECTABLE_TILES_SIZES),
+/* harmony export */   SelectableTiles: () => (/* reexport safe */ _selectable_tiles__WEBPACK_IMPORTED_MODULE_1__["default"])
 /* harmony export */ });
-/* harmony import */ var _selectable_tiles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./selectable-tiles */ "./src/components/selectable-tiles/selectable-tiles.tsx");
+/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/components/selectable-tiles/types.ts");
+/* harmony import */ var _selectable_tiles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./selectable-tiles */ "./src/components/selectable-tiles/selectable-tiles.tsx");
+
 
 
 /***/ }),
@@ -74957,6 +74965,7 @@ function SelectableTilesItem(_ref) {
     imgSrc = _ref.imgSrc,
     icon = _ref.icon,
     itemTestId = _ref.itemTestId,
+    size = _ref.size,
     selectedKey = _ref.selectedKey,
     onItemSelect = _ref.onItemSelect,
     isDisabled = _ref.isDisabled,
@@ -74992,7 +75001,7 @@ function SelectableTilesItem(_ref) {
     content: tooltipText,
     placement: tooltipPlacement
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('selectable-tiles-item', itemClassName, {
+    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('selectable-tiles-item', itemClassName, size, {
       'selectable-tiles-item-selected': isItemSelected,
       'selectable-tiles-item-disabled': isDisabled,
       'label-with-image': !!imgSrc
@@ -75053,8 +75062,10 @@ function StandardContent(_ref2) {
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _selectable_tiles_item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./selectable-tiles-item */ "./src/components/selectable-tiles/selectable-tiles-item.tsx");
-/* harmony import */ var _selectable_tiles_less__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectable-tiles.less */ "./src/components/selectable-tiles/selectable-tiles.less");
-/* harmony import */ var _selectable_tiles_less__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_selectable_tiles_less__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./types */ "./src/components/selectable-tiles/types.ts");
+/* harmony import */ var _selectable_tiles_less__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectable-tiles.less */ "./src/components/selectable-tiles/selectable-tiles.less");
+/* harmony import */ var _selectable_tiles_less__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_selectable_tiles_less__WEBPACK_IMPORTED_MODULE_4__);
+
 
 
 
@@ -75073,7 +75084,9 @@ function SelectableTiles(_ref) {
     _ref$optionId = _ref.optionId,
     optionId = _ref$optionId === void 0 ? 'id' : _ref$optionId,
     isDisabled = _ref.isDisabled,
-    labelledBy = _ref.labelledBy;
+    labelledBy = _ref.labelledBy,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _types__WEBPACK_IMPORTED_MODULE_3__.SELECTABLE_TILES_SIZES.MD : _ref$size;
   var onSelect = function onSelect(key) {
     if (key === selectedKey) {
       return;
@@ -75112,7 +75125,8 @@ function SelectableTiles(_ref) {
       customContent: customContent,
       tooltipText: tooltipText,
       tooltipPlacement: tooltipPlacement,
-      itemAriaLabel: itemAriaLabel
+      itemAriaLabel: itemAriaLabel,
+      size: size
     });
   }));
 }
@@ -75120,6 +75134,23 @@ function SelectableTiles(_ref) {
 
 /***/ }),
 
+/***/ "./src/components/selectable-tiles/types.ts":
+/*!**************************************************!*\
+  !*** ./src/components/selectable-tiles/types.ts ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SELECTABLE_TILES_SIZES: () => (/* binding */ SELECTABLE_TILES_SIZES)
+/* harmony export */ });
+var SELECTABLE_TILES_SIZES = {
+  SM: 'sm',
+  MD: 'md'
+};
+
+/***/ }),
+
 /***/ "./src/components/sidebar-cards/index.ts":
 /*!***********************************************!*\
   !*** ./src/components/sidebar-cards/index.ts ***!
@@ -79045,7 +79076,8 @@ function TableSettingsGroup(_ref) {
 /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../button */ "./src/components/button/index.ts");
 /* harmony import */ var _font_awesome_icon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../font-awesome-icon */ "./src/components/font-awesome-icon/index.ts");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../hooks */ "./src/components/hooks/index.ts");
-/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../types */ "./src/components/table-react/types.ts");
+/* harmony import */ var _hooks_use_translation__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../hooks/use-translation */ "./src/components/hooks/use-translation/index.ts");
+/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../types */ "./src/components/table-react/types.ts");
 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; } }
@@ -79064,6 +79096,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 function TableSettingsItem(_ref) {
   var index = _ref.index,
     listItem = _ref.listItem,
@@ -79074,6 +79107,8 @@ function TableSettingsItem(_ref) {
     isReorderEnabled = _ref.isReorderEnabled,
     handleKeyboardColumnsReorder = _ref.handleKeyboardColumnsReorder,
     localizationText = _ref.localizationText;
+  var _useTranslation = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_11__.useTranslation)(),
+    t = _useTranslation.t;
   var isPinned = listItem.getIsPinned();
   var sorted = listItem.getIsSorted();
   var isVisible = listItem.getIsVisible();
@@ -79089,10 +79124,10 @@ function TableSettingsItem(_ref) {
       setItemFocused(false);
     }
   });
-  var sortIcon = sorted === _types__WEBPACK_IMPORTED_MODULE_11__.SORTING.DESC ? _fortawesome_free_solid_svg_icons_faDownLong__WEBPACK_IMPORTED_MODULE_2__.faDownLong : _fortawesome_free_solid_svg_icons_faUpLong__WEBPACK_IMPORTED_MODULE_3__.faUpLong;
+  var sortIcon = sorted === _types__WEBPACK_IMPORTED_MODULE_12__.SORTING.DESC ? _fortawesome_free_solid_svg_icons_faDownLong__WEBPACK_IMPORTED_MODULE_2__.faDownLong : _fortawesome_free_solid_svg_icons_faUpLong__WEBPACK_IMPORTED_MODULE_3__.faUpLong;
   var nextSorting = listItem.getNextSortingOrder();
-  var nextSortIcon = nextSorting === _types__WEBPACK_IMPORTED_MODULE_11__.SORTING.DESC ? _fortawesome_free_solid_svg_icons_faDownLong__WEBPACK_IMPORTED_MODULE_2__.faDownLong : _fortawesome_free_solid_svg_icons_faUpLong__WEBPACK_IMPORTED_MODULE_3__.faUpLong;
-  var isColumnPinDisabled = !isPinned && (listItem.getSize() + settings.getLeftTotalSize()) / tableContainerWidth > _types__WEBPACK_IMPORTED_MODULE_11__.PINNED_WIDTH_THRESHOLD;
+  var nextSortIcon = nextSorting === _types__WEBPACK_IMPORTED_MODULE_12__.SORTING.DESC ? _fortawesome_free_solid_svg_icons_faDownLong__WEBPACK_IMPORTED_MODULE_2__.faDownLong : _fortawesome_free_solid_svg_icons_faUpLong__WEBPACK_IMPORTED_MODULE_3__.faUpLong;
+  var isColumnPinDisabled = !isPinned && (listItem.getSize() + settings.getLeftTotalSize()) / tableContainerWidth > _types__WEBPACK_IMPORTED_MODULE_12__.PINNED_WIDTH_THRESHOLD;
   var togglePin = function togglePin() {
     if (isPinned) {
       listItem.pin(false);
@@ -79114,6 +79149,12 @@ function TableSettingsItem(_ref) {
         break;
     }
   };
+  var visibleColumns = settings.getVisibleLeafColumns().filter(function (_ref2) {
+    var meta = _ref2.columnDef.meta;
+    return (meta === null || meta === void 0 ? void 0 : meta.hideFromSettings) !== true;
+  });
+  var isOneVisible = visibleColumns.length === 1;
+  var disableHideColumns = isOneVisible && isVisible;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -79135,6 +79176,8 @@ function TableSettingsItem(_ref) {
       id: "checkbox-".concat(listItem.id),
       testId: "visibility-checkbox-".concat(listItem.id),
       isChecked: isVisible,
+      isDisabled: disableHideColumns,
+      tooltipText: disableHideColumns ? t('At least one column must stay selected') : undefined,
       onChange: listItem.getToggleVisibilityHandler(),
       className: "table-settings-checkbox",
       ariaLabel: listItem.columnDef.header