@datarobot/design-system 28.9.1 → 28.9.3

package/cjs/table-react/components/table-header-cell-menu.js

@@ -60,26 +60,29 @@ function TableHeaderCellMenu({
       return acc;
     }, {})
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownMenu, {
-    options: menuActions,
-    triggerClassName: (0, _classnames.default)('react-table-cell-menu-trigger', {
-      'focused-visible': isVisible
-    }),
-    contentClassName: "react-table-cell-menu-content",
-    selectedKey: sorted || undefined,
-    onSelect: selectedOption => {
-      const key = selectedOption?.key;
-      const handler = actionsHandlers[key] || (() => {});
-      handler();
-    },
-    triggerHideChevron: true,
-    triggerDynamicContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
-      icon: _faEllipsisVertical.faEllipsisVertical
-    }),
-    triggerIsIcon: true,
-    triggerId: `header-menu-actions-${header.column.id}`,
-    triggerTestId: "header-menu-actions",
-    triggerAriaLabelText: localizationTextWithDefault?.headerActionsAriaLabel,
-    contentTestId: "header-menu-actions-content"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "menu-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownMenu, {
+      options: menuActions,
+      triggerClassName: (0, _classnames.default)('react-table-cell-menu-trigger', {
+        'focused-visible': isVisible
+      }),
+      contentClassName: "react-table-cell-menu-content",
+      selectedKey: sorted || undefined,
+      onSelect: selectedOption => {
+        const key = selectedOption?.key;
+        const handler = actionsHandlers[key] || (() => {});
+        handler();
+      },
+      triggerHideChevron: true,
+      triggerDynamicContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+        icon: _faEllipsisVertical.faEllipsisVertical
+      }),
+      triggerIsIcon: true,
+      triggerId: `header-menu-actions-${header.column.id}`,
+      triggerTestId: "header-menu-actions",
+      triggerAriaLabelText: localizationTextWithDefault?.headerActionsAriaLabel,
+      contentTestId: "header-menu-actions-content"
+    })
   });
 }

package/cjs/table-react/components/table-header-cell.js

@@ -138,14 +138,11 @@ function TableHeaderCell({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "react-table-cell-splitter"
         })]
-      }), canShowMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "menu-wrapper",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tableHeaderCellMenu.TableHeaderCellMenu, {
-          header: header,
-          tableContainerWidth: tableContainerWidth,
-          localizationText: localizationTextWithDefault?.headerMenu,
-          isVisible: isCurrentCellFocused
-        })
+      }), canShowMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tableHeaderCellMenu.TableHeaderCellMenu, {
+        header: header,
+        tableContainerWidth: tableContainerWidth,
+        localizationText: localizationTextWithDefault?.headerMenu,
+        isVisible: isCurrentCellFocused
       }), !header.column.columnDef.meta?.hideSeparator &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions

package/cjs/table-react/hooks/useColumns.js

@@ -14,14 +14,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function calculateDelta(columns, maxWidth, padding = 0, columnSizing = {}, visibility = {}) {
   // we are interested only in visible columns
   const visibleColumns = columns.filter(({
-    accessorKey
-  }) => visibility[accessorKey] !== false);
+    accessorKey,
+    id
+  }) => {
+    // visibility state uses column ids for setting visibility, and for most cases it's the same as accessorKey
+    // but for the case when either 1) user provided an explicit id to the columnDef or 2) accessorKey is a complex get object path like `<object_name>.<object_property_name>`
+    // accessorKey would be different from id. Thus we should add a check on columnDef.id here
+    const visibilityValue = visibility[id] ?? visibility[accessorKey];
+    return visibilityValue !== false;
+  });
   // we need to know columns that do have maxSize set, as it will influence how free space is distributed
   const columnsWithMaxSize = visibleColumns.filter(column => !!column.maxSize);
 
   // calculation of all current columns width
   const currentWidth = visibleColumns.reduce((acc, current) => {
-    const resizeValue = columnSizing[current.accessorKey];
+    const resizeValue = columnSizing[current.id] || columnSizing[current.accessorKey];
     const minWidth = current.minSize || _types.COLUMN_SIZE.MIN_WIDTH;
     const resizeWidth = resizeValue ? Math.max(resizeValue, minWidth) : 0;
     const columnSize = Math.max(current.size || _types.COLUMN_SIZE.WIDTH, minWidth);
@@ -39,8 +46,9 @@ function calculateDelta(columns, maxWidth, padding = 0, columnSizing = {}, visib
   // whose size was altered manually by drag-n-drop in UI)
   const notSettedColumns = visibleColumns.filter(({
     size,
-    accessorKey
-  }) => !size && !columnSizing[accessorKey]);
+    accessorKey,
+    id
+  }) => !size && !(columnSizing[id] || columnSizing[accessorKey]));
   const evenDistribution = delta / notSettedColumns.length;
 
   // if there is no max size on any columns - distribute free space evenly across columns

package/esm/table-react/components/table-header-cell-menu.js

@@ -53,26 +53,29 @@ export function TableHeaderCellMenu({
       return acc;
     }, {})
   };
-  return /*#__PURE__*/_jsx(DropdownMenu, {
-    options: menuActions,
-    triggerClassName: classnames('react-table-cell-menu-trigger', {
-      'focused-visible': isVisible
-    }),
-    contentClassName: "react-table-cell-menu-content",
-    selectedKey: sorted || undefined,
-    onSelect: selectedOption => {
-      const key = selectedOption?.key;
-      const handler = actionsHandlers[key] || (() => {});
-      handler();
-    },
-    triggerHideChevron: true,
-    triggerDynamicContent: () => /*#__PURE__*/_jsx(FontAwesomeIcon, {
-      icon: faEllipsisVertical
-    }),
-    triggerIsIcon: true,
-    triggerId: `header-menu-actions-${header.column.id}`,
-    triggerTestId: "header-menu-actions",
-    triggerAriaLabelText: localizationTextWithDefault?.headerActionsAriaLabel,
-    contentTestId: "header-menu-actions-content"
+  return /*#__PURE__*/_jsx("div", {
+    className: "menu-wrapper",
+    children: /*#__PURE__*/_jsx(DropdownMenu, {
+      options: menuActions,
+      triggerClassName: classnames('react-table-cell-menu-trigger', {
+        'focused-visible': isVisible
+      }),
+      contentClassName: "react-table-cell-menu-content",
+      selectedKey: sorted || undefined,
+      onSelect: selectedOption => {
+        const key = selectedOption?.key;
+        const handler = actionsHandlers[key] || (() => {});
+        handler();
+      },
+      triggerHideChevron: true,
+      triggerDynamicContent: () => /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faEllipsisVertical
+      }),
+      triggerIsIcon: true,
+      triggerId: `header-menu-actions-${header.column.id}`,
+      triggerTestId: "header-menu-actions",
+      triggerAriaLabelText: localizationTextWithDefault?.headerActionsAriaLabel,
+      contentTestId: "header-menu-actions-content"
+    })
   });
 }

package/esm/table-react/components/table-header-cell.js

@@ -130,14 +130,11 @@ export function TableHeaderCell({
         }), /*#__PURE__*/_jsx("div", {
           className: "react-table-cell-splitter"
         })]
-      }), canShowMenu && /*#__PURE__*/_jsx("div", {
-        className: "menu-wrapper",
-        children: /*#__PURE__*/_jsx(TableHeaderCellMenu, {
-          header: header,
-          tableContainerWidth: tableContainerWidth,
-          localizationText: localizationTextWithDefault?.headerMenu,
-          isVisible: isCurrentCellFocused
-        })
+      }), canShowMenu && /*#__PURE__*/_jsx(TableHeaderCellMenu, {
+        header: header,
+        tableContainerWidth: tableContainerWidth,
+        localizationText: localizationTextWithDefault?.headerMenu,
+        isVisible: isCurrentCellFocused
       }), !header.column.columnDef.meta?.hideSeparator &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions

package/esm/table-react/hooks/useColumns.js

@@ -7,14 +7,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function calculateDelta(columns, maxWidth, padding = 0, columnSizing = {}, visibility = {}) {
   // we are interested only in visible columns
   const visibleColumns = columns.filter(({
-    accessorKey
-  }) => visibility[accessorKey] !== false);
+    accessorKey,
+    id
+  }) => {
+    // visibility state uses column ids for setting visibility, and for most cases it's the same as accessorKey
+    // but for the case when either 1) user provided an explicit id to the columnDef or 2) accessorKey is a complex get object path like `<object_name>.<object_property_name>`
+    // accessorKey would be different from id. Thus we should add a check on columnDef.id here
+    const visibilityValue = visibility[id] ?? visibility[accessorKey];
+    return visibilityValue !== false;
+  });
   // we need to know columns that do have maxSize set, as it will influence how free space is distributed
   const columnsWithMaxSize = visibleColumns.filter(column => !!column.maxSize);
 
   // calculation of all current columns width
   const currentWidth = visibleColumns.reduce((acc, current) => {
-    const resizeValue = columnSizing[current.accessorKey];
+    const resizeValue = columnSizing[current.id] || columnSizing[current.accessorKey];
     const minWidth = current.minSize || COLUMN_SIZE.MIN_WIDTH;
     const resizeWidth = resizeValue ? Math.max(resizeValue, minWidth) : 0;
     const columnSize = Math.max(current.size || COLUMN_SIZE.WIDTH, minWidth);
@@ -32,8 +39,9 @@ function calculateDelta(columns, maxWidth, padding = 0, columnSizing = {}, visib
   // whose size was altered manually by drag-n-drop in UI)
   const notSettedColumns = visibleColumns.filter(({
     size,
-    accessorKey
-  }) => !size && !columnSizing[accessorKey]);
+    accessorKey,
+    id
+  }) => !size && !(columnSizing[id] || columnSizing[accessorKey]));
   const evenDistribution = delta / notSettedColumns.length;
 
   // if there is no max size on any columns - distribute free space evenly across columns

package/js/bundle/bundle.js

@@ -75397,7 +75397,9 @@ function TableHeaderCellMenu(_ref) {
     acc[customAction.key] = customAction.onOptionSelect;
     return acc;
   }, {}));
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dropdown_menu__WEBPACK_IMPORTED_MODULE_5__.DropdownMenu, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "menu-wrapper"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dropdown_menu__WEBPACK_IMPORTED_MODULE_5__.DropdownMenu, {
     options: menuActions,
     triggerClassName: classnames__WEBPACK_IMPORTED_MODULE_1___default()('react-table-cell-menu-trigger', {
       'focused-visible': isVisible
@@ -75420,7 +75422,7 @@ function TableHeaderCellMenu(_ref) {
     triggerTestId: "header-menu-actions",
     triggerAriaLabelText: localizationTextWithDefault === null || localizationTextWithDefault === void 0 ? void 0 : localizationTextWithDefault.headerActionsAriaLabel,
     contentTestId: "header-menu-actions-content"
-  });
+  }));
 }
 
 /***/ }),
@@ -75586,14 +75588,12 @@ function TableHeaderCell(_ref) {
     "test-id": "table-react-header-cell-sorting-icon"
   }, sortingIcon), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "react-table-cell-splitter"
-  })), canShowMenu && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "menu-wrapper"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_table_header_cell_menu__WEBPACK_IMPORTED_MODULE_9__.TableHeaderCellMenu, {
+  })), canShowMenu && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_table_header_cell_menu__WEBPACK_IMPORTED_MODULE_9__.TableHeaderCellMenu, {
     header: header,
     tableContainerWidth: tableContainerWidth,
     localizationText: localizationTextWithDefault === null || localizationTextWithDefault === void 0 ? void 0 : localizationTextWithDefault.headerMenu,
     isVisible: isCurrentCellFocused
-  })), !((_header$column$column10 = header.column.columnDef.meta) !== null && _header$column$column10 !== void 0 && _header$column$column10.hideSeparator) &&
+  }), !((_header$column$column10 = header.column.columnDef.meta) !== null && _header$column$column10 !== void 0 && _header$column$column10.hideSeparator) &&
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
   react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -76937,8 +76937,14 @@ function calculateDelta(columns, maxWidth) {
   var visibility = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   // we are interested only in visible columns
   var visibleColumns = columns.filter(function (_ref) {
-    var accessorKey = _ref.accessorKey;
-    return visibility[accessorKey] !== false;
+    var _visibility;
+    var accessorKey = _ref.accessorKey,
+      id = _ref.id;
+    // visibility state uses column ids for setting visibility, and for most cases it's the same as accessorKey
+    // but for the case when either 1) user provided an explicit id to the columnDef or 2) accessorKey is a complex get object path like `<object_name>.<object_property_name>`
+    // accessorKey would be different from id. Thus we should add a check on columnDef.id here
+    var visibilityValue = (_visibility = visibility[id]) !== null && _visibility !== void 0 ? _visibility : visibility[accessorKey];
+    return visibilityValue !== false;
   });
   // we need to know columns that do have maxSize set, as it will influence how free space is distributed
   var columnsWithMaxSize = visibleColumns.filter(function (column) {
@@ -76947,7 +76953,7 @@ function calculateDelta(columns, maxWidth) {
 
   // calculation of all current columns width
   var currentWidth = visibleColumns.reduce(function (acc, current) {
-    var resizeValue = columnSizing[current.accessorKey];
+    var resizeValue = columnSizing[current.id] || columnSizing[current.accessorKey];
     var minWidth = current.minSize || _types__WEBPACK_IMPORTED_MODULE_1__.COLUMN_SIZE.MIN_WIDTH;
     var resizeWidth = resizeValue ? Math.max(resizeValue, minWidth) : 0;
     var columnSize = Math.max(current.size || _types__WEBPACK_IMPORTED_MODULE_1__.COLUMN_SIZE.WIDTH, minWidth);
@@ -76965,8 +76971,9 @@ function calculateDelta(columns, maxWidth) {
   // whose size was altered manually by drag-n-drop in UI)
   var notSettedColumns = visibleColumns.filter(function (_ref2) {
     var size = _ref2.size,
-      accessorKey = _ref2.accessorKey;
-    return !size && !columnSizing[accessorKey];
+      accessorKey = _ref2.accessorKey,
+      id = _ref2.id;
+    return !size && !(columnSizing[id] || columnSizing[accessorKey]);
   });
   var evenDistribution = delta / notSettedColumns.length;