@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../../../_virtual/index.js');
 var react = require('@carbon/react');
@@ -20,123 +19,110 @@ var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var modifiers = require('@dnd-kit/modifiers');
 
-var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
-var matchedColsById = function matchedColsById(col1, col2) {
-  return col1 && col2 && col1.id === col2.id;
-};
-var DraggableItemsList = function DraggableItemsList(_ref) {
-  var columns = _ref.columns,
-    filterString = _ref.filterString,
-    id = _ref.id,
-    moveElement = _ref.moveElement,
-    onSelectColumn = _ref.onSelectColumn,
-    setAriaRegionText = _ref.setAriaRegionText;
-  var draggableClass = "".concat(blockClass, "__draggable-item");
-  var generatedId = useId.useId();
-  var visibleCols = columns
+const blockClass = `${settings.pkg.prefix}--datagrid`;
+const matchedColsById = (col1, col2) => col1 && col2 && col1.id === col2.id;
+const DraggableItemsList = _ref => {
+  let {
+    columns,
+    filterString,
+    id,
+    moveElement,
+    onSelectColumn,
+    setAriaRegionText
+  } = _ref;
+  const draggableClass = `${blockClass}__draggable-item`;
+  const generatedId = useId.useId();
+  const visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
-  .filter(function (colDef) {
-    return getNodeTextContent.getNodeTextContent(colDef.Header).trim().length !== 0;
-  }).filter(Boolean).filter(function (colDef) {
-    return !colDef.isAction;
-  }).filter(function (colDef) {
-    return colDef.id !== 'spacer';
-  }).filter(function (colDef) {
+  .filter(colDef => getNodeTextContent.getNodeTextContent(colDef.Header).trim().length !== 0).filter(Boolean).filter(colDef => !colDef.isAction).filter(colDef => colDef.id !== 'spacer').filter(colDef => {
     return filterString.length === 0 || getNodeTextContent.getNodeTextContent(colDef.Header).toLowerCase().includes(filterString);
   });
-  var getUpdatedDragCols = function getUpdatedDragCols() {
-    var tempCols = _rollupPluginBabelHelpers.toConsumableArray(visibleCols);
-    tempCols.forEach(function (col) {
+  const getUpdatedDragCols = () => {
+    const tempCols = [...visibleCols];
+    tempCols.forEach(col => {
       if (col.sticky) {
         col.disabled = true;
       }
     });
     return tempCols;
   };
-  var updatedDragCols = getUpdatedDragCols();
+  const updatedDragCols = getUpdatedDragCols();
 
   // let localRefCopy;
-  var handleDragEnd = function handleDragEnd(event) {
-    var _destOverCol$;
-    var active = event.active,
-      over = event.over;
+  const handleDragEnd = event => {
+    const {
+      active,
+      over
+    } = event;
 
     // Stop any re-ordering updates if the destination column is disabled
     // ie: it is a frozen column.
-    var destOverCol = updatedDragCols.filter(function (item) {
-      return item.id === over.id;
-    });
-    if (destOverCol !== null && destOverCol !== void 0 && destOverCol.length && (_destOverCol$ = destOverCol[0]) !== null && _destOverCol$ !== void 0 && _destOverCol$.disabled) {
+    const destOverCol = updatedDragCols.filter(item => item.id === over.id);
+    if (destOverCol?.length && destOverCol[0]?.disabled) {
       return;
     }
-    var fromVisibleIndex = updatedDragCols.findIndex(function (col) {
-      return matchedColsById(col, active);
-    });
-    var toVisibleIndex = updatedDragCols.findIndex(function (col) {
-      return matchedColsById(col, over);
-    });
-    var colTitle = getNodeTextContent.getNodeTextContent(updatedDragCols[fromVisibleIndex].Header);
-    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(updatedDragCols.length, "."));
-    var fromIndex = columns.findIndex(function (col) {
-      return matchedColsById(col, active);
-    });
-    var toIndex = columns.findIndex(function (col) {
-      return matchedColsById(col, over);
-    });
+    const fromVisibleIndex = updatedDragCols.findIndex(col => matchedColsById(col, active));
+    const toVisibleIndex = updatedDragCols.findIndex(col => matchedColsById(col, over));
+    const colTitle = getNodeTextContent.getNodeTextContent(updatedDragCols[fromVisibleIndex].Header);
+    setAriaRegionText(`${colTitle} dropped. New position ${toVisibleIndex + 1} of ${updatedDragCols.length}.`);
+    const fromIndex = columns.findIndex(col => matchedColsById(col, active));
+    const toIndex = columns.findIndex(col => matchedColsById(col, over));
     moveElement(fromIndex, toIndex);
   };
-  var handleDragStart = function handleDragStart(event) {
-    var active = event.active;
-    var fromIndex = updatedDragCols.findIndex(function (col) {
-      return matchedColsById(col, active);
-    });
-    var colTitle = getNodeTextContent.getNodeTextContent(updatedDragCols[fromIndex].Header);
-    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(updatedDragCols.length, "."));
+  const handleDragStart = event => {
+    const {
+      active
+    } = event;
+    const fromIndex = updatedDragCols.findIndex(col => matchedColsById(col, active));
+    const colTitle = getNodeTextContent.getNodeTextContent(updatedDragCols[fromIndex].Header);
+    setAriaRegionText(`${colTitle} grabbed. Current position ${fromIndex + 1} of ${updatedDragCols.length}.`);
   };
-  var handleDragUpdate = function handleDragUpdate(event) {
-    var active = event.active,
-      over = event.over;
-    var fromIndex = updatedDragCols.findIndex(function (col) {
-      return matchedColsById(col, active);
-    });
-    var toIndex = updatedDragCols.findIndex(function (col) {
-      return matchedColsById(col, over);
-    });
-    var colTitle = getNodeTextContent.getNodeTextContent(updatedDragCols[fromIndex].Header);
-    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(updatedDragCols.length, "."));
+  const handleDragUpdate = event => {
+    const {
+      active,
+      over
+    } = event;
+    const fromIndex = updatedDragCols.findIndex(col => matchedColsById(col, active));
+    const toIndex = updatedDragCols.findIndex(col => matchedColsById(col, over));
+    const colTitle = getNodeTextContent.getNodeTextContent(updatedDragCols[fromIndex].Header);
+    setAriaRegionText(`${colTitle} grabbed. Original position ${fromIndex + 1}, new position ${toIndex + 1} of ${updatedDragCols.length}.`);
   };
-  var pointerSensor = core.useSensor(core.PointerSensor, {
+  const pointerSensor = core.useSensor(core.PointerSensor, {
     // Require the mouse to move by 10 pixels before activating
     activationConstraint: {
       distance: 4
     }
   });
-  var keyboardSensor = core.useSensor(core.KeyboardSensor, {
-    coordinateGetter: function coordinateGetter(event, args) {
-      var currentCoordinates = args.currentCoordinates;
-      var target = event.target;
+  const keyboardSensor = core.useSensor(core.KeyboardSensor, {
+    coordinateGetter: (event, args) => {
+      const {
+        currentCoordinates
+      } = args;
+      let target = event.target;
       while (target && !target.classList.contains(draggableClass)) {
         target = target.parentNode;
       }
-      var delta = target.offsetHeight;
+      const delta = target.offsetHeight;
       switch (event.code) {
         case 'ArrowRight':
         case 'ArrowLeft':
           // ignore right and left
           return currentCoordinates;
         case 'ArrowUp':
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentCoordinates), {}, {
+          return {
+            ...currentCoordinates,
             y: currentCoordinates.y - delta
-          });
+          };
         case 'ArrowDown':
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentCoordinates), {}, {
+          return {
+            ...currentCoordinates,
             y: currentCoordinates.y + delta
-          });
+          };
       }
     }
   });
-  var sensors = core.useSensors(pointerSensor, keyboardSensor);
-  var handleCheckboxKeydown = function handleCheckboxKeydown(event, colDef) {
+  const sensors = core.useSensors(pointerSensor, keyboardSensor);
+  const handleCheckboxKeydown = (event, colDef) => {
     if (event.code === 'Space') {
       onSelectColumn(colDef, !common.isColumnVisible(colDef));
       event.preventDefault();
@@ -152,51 +138,47 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     sensors: sensors,
     modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis]
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__draggable-underlay"),
+    className: `${blockClass}__draggable-underlay`,
     "aria-hidden": "true",
-    key: "draggable-underlay-".concat(id)
-  }, visibleCols.map(function (colDef) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__draggable-underlay-item"),
-      key: colDef.id
-    });
-  })), /*#__PURE__*/React.createElement(sortable.SortableContext, {
+    key: `draggable-underlay-${id}`
+  }, visibleCols.map(colDef => /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__draggable-underlay-item`,
+    key: colDef.id
+  }))), /*#__PURE__*/React.createElement(sortable.SortableContext, {
     items: updatedDragCols,
     strategy: sortable.verticalListSortingStrategy
-  }, visibleCols.map(function (colDef) {
-    var colHeaderTitle = getNodeTextContent.getNodeTextContent(colDef.Header);
-    var parts = colHeaderTitle.split(new RegExp("(".concat(filterString, ")"), 'gi'));
-    var highlightedText = parts.map(function (part) {
-      return part.toLowerCase() === filterString.toLowerCase() ? "<strong>".concat(part, "</strong>") : part;
-    }).join('');
-    var isFrozenColumn = !!colDef.sticky;
-    var isDisabled = colDef.disabled;
-    var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Checkbox, {
+  }, visibleCols.map(colDef => {
+    const colHeaderTitle = getNodeTextContent.getNodeTextContent(colDef.Header);
+    const parts = colHeaderTitle.split(new RegExp(`(${filterString})`, 'gi'));
+    const highlightedText = parts.map(part => part.toLowerCase() === filterString.toLowerCase() ? `<strong>${part}</strong>` : part).join('');
+    const isFrozenColumn = !!colDef.sticky;
+    const isDisabled = colDef.disabled;
+    const listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Checkbox, {
       checked: common.isColumnVisible(colDef),
       disabled: isDisabled || isFrozenColumn,
-      onChange: function onChange(_, _ref2) {
-        var checked = _ref2.checked;
+      onChange: (_, _ref2) => {
+        let {
+          checked
+        } = _ref2;
         return onSelectColumn(colDef, checked);
       },
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      id: `${blockClass}__customization-column-${colDef.id}`,
       labelText: colHeaderTitle,
       title: colHeaderTitle,
-      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      className: `${blockClass}__customize-columns-checkbox`,
       hideLabel: true,
-      onKeyDown: function onKeyDown(event) {
-        return handleCheckboxKeydown(event, colDef);
-      }
+      onKeyDown: event => handleCheckboxKeydown(event, colDef)
     }), /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: highlightedText
       },
-      className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
+      className: `${blockClass}__customize-columns-checkbox-visible-label`
     }));
     return /*#__PURE__*/React.createElement(DraggableElement.default, {
       classList: draggableClass,
       key: colDef.id,
       id: colDef.id,
-      elementId: "".concat(colDef.id, "-").concat(generatedId),
+      elementId: `${colDef.id}-${generatedId}`,
       disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colHeaderTitle,
       isSticky: isFrozenColumn,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -16,22 +16,26 @@ var index = require('../../../../../_virtual/index.js');
 var CustomizeColumnsTearsheet = require('./CustomizeColumnsTearsheet.js');
 var InlineEditContext = require('../InlineEdit/InlineEditContext/InlineEditContext.js');
 
-var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
-var TearsheetWrapper = function TearsheetWrapper(_ref) {
-  var instance = _ref.instance;
-  var _instance$customizeCo = instance.customizeColumnsProps,
-    _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
-    isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
-    setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
-    labels = _instance$customizeCo.labels,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_instance$customizeCo, _excluded);
-  var _useContext = React.useContext(InlineEditContext.InlineEditContext),
-    state = _useContext.state;
-  var _ref2 = state || {},
-    featureFlags = _ref2.featureFlags;
-  React.useEffect(function () {
-    if (featureFlags && !(featureFlags !== null && featureFlags !== void 0 && featureFlags['enable-datagrid-useCustomizeColumns'])) {
-      console.error("Datagrid useCustomizeColumns extension has not been enabled via feature flag.");
+const TearsheetWrapper = _ref => {
+  let {
+    instance
+  } = _ref;
+  const {
+    onSaveColumnPrefs,
+    isTearsheetOpen,
+    setIsTearsheetOpen,
+    labels,
+    ...rest
+  } = instance.customizeColumnsProps;
+  const {
+    state
+  } = React.useContext(InlineEditContext.InlineEditContext);
+  const {
+    featureFlags
+  } = state || {};
+  React.useEffect(() => {
+    if (featureFlags && !featureFlags?.['enable-datagrid-useCustomizeColumns']) {
+      console.error(`Datagrid useCustomizeColumns extension has not been enabled via feature flag.`);
     }
   }, [featureFlags]);
   return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet.default, _rollupPluginBabelHelpers.extends({}, rest, labels, {
@@ -39,25 +43,19 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,
-    onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
-      setTimeout(function () {
-        var hiddenIds = updatedColDefs.filter(function (colDef) {
-          return !colDef.isVisible;
-        }).map(function (colDef) {
-          return colDef.id;
-        });
+    onSaveColumnPrefs: updatedColDefs => {
+      setTimeout(() => {
+        const hiddenIds = updatedColDefs.filter(colDef => !colDef.isVisible).map(colDef => colDef.id);
         instance.setHiddenColumns(hiddenIds);
         if (typeof instance.setColumnOrder === 'function') {
-          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
-            return colDef.id;
-          }));
+          instance.setColumnOrder(updatedColDefs.map(colDef => colDef.id));
         } else {
           // eslint-disable-next-line no-console
           console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
         }
       }, 0);
-      if (typeof _onSaveColumnPrefs === 'function') {
-        _onSaveColumnPrefs(updatedColDefs);
+      if (typeof onSaveColumnPrefs === 'function') {
+        onSaveColumnPrefs(updatedColDefs);
       }
     }
   }));

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-var isColumnVisible = function isColumnVisible(colDef) {
-  return typeof colDef.isVisible === 'boolean' ? colDef.isVisible : true;
-};
+const isColumnVisible = colDef => typeof colDef.isVisible === 'boolean' ? colDef.isVisible : true;
 
 exports.isColumnVisible = isColumnVisible;