@datarobot/design-system 30.2.0 → 30.3.0

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

@@ -79076,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; } }
@@ -79095,6 +79096,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 function TableSettingsItem(_ref) {
   var index = _ref.index,
     listItem = _ref.listItem,
@@ -79105,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();
@@ -79120,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);
@@ -79145,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
@@ -79166,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