@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/ActionSet/ActionSet.js

@@ -16,40 +16,44 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 
 var _InlineLoading;
-var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpressive"],
-  _excluded2 = ["actions", "buttonSize", "className", "size"];
-var blockClass = "".concat(settings.pkg.prefix, "--action-set");
-var componentName = 'ActionSet';
-var ActionSetButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    disabled = _ref.disabled,
-    kind = _ref.kind,
-    label = _ref.label,
-    loading = _ref.loading,
-    _ref$isExpressive = _ref.isExpressive,
-    isExpressive = _ref$isExpressive === void 0 ? true : _ref$isExpressive,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+const blockClass = `${settings.pkg.prefix}--action-set`;
+const componentName = 'ActionSet';
+const ActionSetButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    className,
+    disabled,
+    kind,
+    label,
+    loading,
+    isExpressive = true,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, rest, {
     isExpressive: isExpressive,
-    className: cx(className, ["".concat(blockClass, "__action-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost'), "".concat(blockClass, "__action-button--expressive"), isExpressive)]),
+    className: cx(className, [`${blockClass}__action-button`, {
+      [`${blockClass}__action-button--ghost`]: kind === 'ghost' || kind === 'danger--ghost',
+      [`${blockClass}__action-button--expressive`]: isExpressive
+    }]),
     disabled: disabled || loading || false,
-    kind: kind,
-    ref: ref
+    kind,
+    ref
   }), label, loading && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null))));
 });
 ActionSetButton.displayName = 'ActionSetButton';
-ActionSetButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.PropTypes), {}, {
+ActionSetButton.propTypes = {
+  /**@ts-ignore*/
+  ...react.Button.PropTypes,
   kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
   label: index.default.string,
   loading: index.default.bool
-});
-var defaultKind = 'primary';
-var willStack = function willStack(size, numberOfActions) {
-  return size === 'sm' || size === 'md' && numberOfActions > 2;
 };
+const defaultKind = 'primary';
+const willStack = (size, numberOfActions) => size === 'sm' || size === 'md' && numberOfActions > 2;
 
 // Default values for props
-var defaults = {
+const defaults = {
   size: 'md'
 };
 /**
@@ -64,43 +68,47 @@ var defaults = {
  * it appears at the left side. If there is a primary button it appears at the
  * right.
  */
-var ActionSet = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var _actions$slice;
-  var actions = _ref3.actions,
-    buttonSize = _ref3.buttonSize,
-    className = _ref3.className,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? defaults.size : _ref3$size,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
-  var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || [];
+const ActionSet = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    actions,
+    buttonSize,
+    className,
+    size = defaults.size,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref2;
+  const buttons = actions && actions.slice?.(0) || [];
 
   // We stack the buttons in a sm set, or if there are three or more in a md set.
-  var stacking = willStack(size, buttons.length);
+  const stacking = willStack(size, buttons.length);
 
   // Order of button kinds: ghost first, then danger--ghost, then most other types,
   // then danger, and finally primary
-  var buttonOrder = function buttonOrder(kind) {
-    var _ghost$dangerGhost$;
-    return (_ghost$dangerGhost$ = {
-      ghost: 1,
-      'danger--ghost': 2,
-      danger: 4,
-      primary: 5
-    }[kind]) !== null && _ghost$dangerGhost$ !== void 0 ? _ghost$dangerGhost$ : 3;
-  };
+  const buttonOrder = kind => ({
+    ghost: 1,
+    'danger--ghost': 2,
+    danger: 4,
+    primary: 5
+  })[kind] ?? 3;
 
   // order the actions with ghost/ghost-danger buttons first and primary/danger buttons last
   // (or the opposite way if we're stacking)
-  buttons.sort(function (action1, action2) {
-    return (buttonOrder(action1.kind || defaultKind) - buttonOrder(action2.kind || defaultKind)) * (stacking ? -1 : 1);
-  });
+  buttons.sort((action1, action2) => (buttonOrder(action1.kind || defaultKind) - buttonOrder(action2.kind || defaultKind)) * (stacking ? -1 : 1));
   return /*#__PURE__*/React.createElement(react.ButtonSet, _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--row-single"), !stacking && buttons.length === 1), "".concat(blockClass, "--row-double"), !stacking && buttons.length === 2), "".concat(blockClass, "--row-triple"), !stacking && buttons.length === 3), "".concat(blockClass, "--row-quadruple"), !stacking && buttons.length >= 4), "".concat(blockClass, "--stacking"), stacking), "".concat(blockClass, "--").concat(size)),
+    className: cx(blockClass, className, {
+      [`${blockClass}--row-single`]: !stacking && buttons.length === 1,
+      [`${blockClass}--row-double`]: !stacking && buttons.length === 2,
+      [`${blockClass}--row-triple`]: !stacking && buttons.length === 3,
+      [`${blockClass}--row-quadruple`]: !stacking && buttons.length >= 4,
+      [`${blockClass}--stacking`]: stacking
+    }, `${blockClass}--${size}`),
     ref: ref,
     role: "presentation",
     stacked: stacking
-  }), buttons.map(function (action, index) {
-    var actionProps = propsHelper.prepareProps(action, ['key']);
+  }), buttons.map((action, index) => {
+    const actionProps = propsHelper.prepareProps(action, ['key']);
     return /*#__PURE__*/React.createElement(ActionSetButton, _rollupPluginBabelHelpers.extends({
       key: action.key || index
     }, actionProps, {
@@ -124,45 +132,39 @@ ActionSet.displayName = componentName;
  * an explanatory message.
  */
 /**@ts-ignore*/
-ActionSet.validateActions = function (sizeFn) {
-  return function (props, propName, componentName, location, propFullName) {
-    var name = propFullName || propName;
-    var prop = props[name];
-    var actions = prop && (prop === null || prop === void 0 ? void 0 : prop.length);
-    var problems = [];
-    if (actions > 0) {
-      var size = sizeFn ? sizeFn(props) : props.size || defaults.size;
-      var stacking = willStack(size, actions);
-      var countActions = function countActions(kind) {
-        return prop.filter(function (action) {
-          return (action.kind || defaultKind) === kind;
-        }).length;
-      };
-      var primaryActions = countActions('primary');
-      var secondaryActions = countActions('secondary');
-      var dangerActions = countActions('danger');
-      var ghostActions = countActions('ghost') + countActions('danger--ghost');
-      if (stacking && actions > 3) {
-        problems.push("you cannot have more than three actions in this size of ".concat(componentName));
-      }
-      if (actions > 4) {
-        problems.push("you cannot have more than four actions in a ".concat(componentName));
-      }
-      if (primaryActions > 1) {
-        problems.push("you cannot have more than one 'primary' action in a ".concat(componentName));
-      }
-      if (ghostActions > 1) {
-        problems.push("you cannot have more than one 'ghost' action in a ".concat(componentName));
-      }
-      if (stacking && actions > 1 && ghostActions > 0) {
-        problems.push("you cannot have a 'ghost' button in conjunction with other action types in this size of ".concat(componentName));
-      }
-      if (actions > primaryActions + secondaryActions + dangerActions + ghostActions) {
-        problems.push("you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ".concat(componentName));
-      }
+ActionSet.validateActions = sizeFn => (props, propName, componentName, location, propFullName) => {
+  const name = propFullName || propName;
+  const prop = props[name];
+  const actions = prop && prop?.length;
+  const problems = [];
+  if (actions > 0) {
+    const size = sizeFn ? sizeFn(props) : props.size || defaults.size;
+    const stacking = willStack(size, actions);
+    const countActions = kind => prop.filter(action => (action.kind || defaultKind) === kind).length;
+    const primaryActions = countActions('primary');
+    const secondaryActions = countActions('secondary');
+    const dangerActions = countActions('danger');
+    const ghostActions = countActions('ghost') + countActions('danger--ghost');
+    if (stacking && actions > 3) {
+      problems.push(`you cannot have more than three actions in this size of ${componentName}`);
+    }
+    if (actions > 4) {
+      problems.push(`you cannot have more than four actions in a ${componentName}`);
+    }
+    if (primaryActions > 1) {
+      problems.push(`you cannot have more than one 'primary' action in a ${componentName}`);
     }
-    return problems.length > 0 ? new Error("Invalid ".concat(location, " `").concat(name, "` supplied to `").concat(componentName, "`: ").concat(problems.join(', and '), ".")) : null;
-  };
+    if (ghostActions > 1) {
+      problems.push(`you cannot have more than one 'ghost' action in a ${componentName}`);
+    }
+    if (stacking && actions > 1 && ghostActions > 0) {
+      problems.push(`you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}`);
+    }
+    if (actions > primaryActions + secondaryActions + dangerActions + ghostActions) {
+      problems.push(`you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
+    }
+  }
+  return problems.length > 0 ? new Error(`Invalid ${location} \`${name}\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
 };
 ActionSet.propTypes = {
   /**
@@ -178,14 +180,16 @@ ActionSet.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: propsHelper.allPropTypes([/**@ts-ignore*/
-  ActionSet.validateActions(), index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  ActionSet.validateActions(), index.default.arrayOf(index.default.shape({
+    /**@ts-ignore*/
+    ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: index.default.string,
     loading: index.default.bool,
     // we duplicate this Button prop to improve the DocGen here
     /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
-  })))]),
+  }))]),
   /**
    * The size of buttons to use for the actions. The allowed values are
    * those for the size prop of carbon Button. If this prop is specified, all

package/lib/components/AddSelect/AddSelect.js

@@ -13,27 +13,29 @@ var index = require('../../_virtual/index.js');
 var AddSelectBody = require('./AddSelectBody.js');
 var addSelectUtils = require('./add-select-utils.js');
 
-var _excluded = ["items", "globalFilters"];
-var componentName = 'AddSelect';
-var AddSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? {
+const componentName = 'AddSelect';
+const AddSelect = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    items = {
       entries: []
-    } : _ref$items,
-    globalFilters = _ref.globalFilters,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var useNormalizedItems = !!items.entries.find(function (item) {
-    return item.children;
-  });
-  var normalizedItems = useNormalizedItems ? addSelectUtils.normalize(items) : null;
-  var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? addSelectUtils.getGlobalFilterValues(globalFilters, normalizedItems) : null;
-  var defaultModifiers = props.multi && items.modifiers ? items.entries.map(function (item) {
-    var _items$modifiers;
-    var modifierAttribute = items === null || items === void 0 || (_items$modifiers = items.modifiers) === null || _items$modifiers === void 0 ? void 0 : _items$modifiers.id;
-    var modifier = {
+    },
+    globalFilters,
+    ...props
+  } = _ref;
+  const useNormalizedItems = !!items.entries.find(item => item.children);
+  const normalizedItems = useNormalizedItems ? addSelectUtils.normalize(items) : null;
+  const globalFilterOpts = props.multi && globalFilters?.length ? addSelectUtils.getGlobalFilterValues(globalFilters, normalizedItems) : null;
+  const defaultModifiers = props.multi && items.modifiers ? items.entries.map(item => {
+    const modifierAttribute = items?.modifiers?.id;
+    const modifier = {
       id: item.id
     };
-    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, modifier), modifierAttribute && _rollupPluginBabelHelpers.defineProperty({}, modifierAttribute, item[modifierAttribute]));
+    return {
+      ...modifier,
+      ...(modifierAttribute && {
+        [modifierAttribute]: item[modifierAttribute]
+      })
+    };
   }) : [];
   return /*#__PURE__*/React.createElement(AddSelectBody.AddSelectBody, _rollupPluginBabelHelpers.extends({}, props, {
     ref: ref,