@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.21

package/lib/global/js/hooks/useControllableState.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useControllableState = useControllableState;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _pconsole = _interopRequireDefault(require("../utils/pconsole"));
+
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * This custom hook simplifies the behavior of a component if it has state that
+ * can be both controlled and uncontrolled. It functions identical to a
+ * useState() hook and provides [state, setState] for you to use. You can use
+ * the `onChange` argument to allow updates to the `state` to be communicated to
+ * owners of controlled components.
+ *
+ * Note: this hook will warn if a component is switching from controlled to
+ * uncontrolled, or vice-versa.
+ *
+ * @param {object} config
+ * @param {string} config.name - the name of the custom component
+ * @param {any} config.defaultValue - the default value used for the state. This will be
+ * the fallback value used if `value` is not defined.
+ * @param {Function} config.onChange - an optional function that is called when
+ * the value of the state changes. This is useful for communicating to parents of
+ * controlled components that the value is requesting to be changed.
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
+ * uncontrolled
+ * @returns {[any, Function]}
+ */
+function useControllableState(_ref) {
+  var defaultValue = _ref.defaultValue,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'custom' : _ref$name,
+      onChange = _ref.onChange,
+      value = _ref.value;
+
+  var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : defaultValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      internalSetState = _useState2[1];
+
+  var controlled = (0, _react.useRef)(null);
+
+  if (controlled.current === null) {
+    controlled.current = value !== undefined;
+  }
+
+  function setState(stateOrUpdater) {
+    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+
+    if (controlled.current === false) {
+      internalSetState(value);
+    }
+
+    if (onChange) {
+      onChange(value);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    var controlledValue = value !== undefined; // Uncontrolled -> Controlled
+    // If the component prop is uncontrolled, the prop value should be undefined
+
+    if (controlled.current === false && controlledValue) {
+      _pconsole.default.warn("A component is changing an uncontrolled %s component to be controlled.\n          This is likely caused by the value changing to a defined value\n          from undefined. Decide between using a controlled or uncontrolled\n          value for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components");
+    } // Controlled -> Uncontrolled
+    // If the component prop is controlled, the prop value should be defined
+
+
+    if (controlled.current === true && !controlledValue) {
+      _pconsole.default.warn("A component is changing a controlled %s component to be uncontrolled.\n        'This is likely caused by the value changing to an undefined value\n        'from a defined one. Decide between using a controlled or\n        'uncontrolled value for the lifetime of the component.\n        'More info: https://reactjs.org/link/controlled-components");
+    }
+  }, [name, value]);
+
+  if (controlled.current === true) {
+    return [value, setState];
+  }
+
+  return [state, setState];
+}

package/lib/global/js/hooks/useCreateComponentFocus.js

@@ -1,13 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCreateComponentFocus = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("react");
 
-var _getFocusableElements = require("../utils/getFocusableElements");
+var _wait = _interopRequireDefault(require("../utils/wait"));
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -20,25 +26,50 @@ var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   var previousState = _ref.previousState,
       currentStep = _ref.currentStep,
       blockClass = _ref.blockClass,
-      onMount = _ref.onMount;
+      onMount = _ref.onMount,
+      firstFocusElement = _ref.firstFocusElement;
   (0, _react.useEffect)(function () {
     if (typeof onMount === 'function') {
       onMount();
     }
   }, [onMount]);
   (0, _react.useEffect)(function () {
+    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
+    var awaitFocus = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(elm) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return (0, _wait.default)(10);
+
+              case 2:
+                elm.focus();
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function awaitFocus(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
-      var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
-      var focusableStepElements = visibleStepInnerContent ? (0, _getFocusableElements.getFocusableElements)(visibleStepInnerContent) : [];
-
-      if (focusableStepElements && focusableStepElements.length) {
-        focusableStepElements[0].focus();
-      } else {
-        var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
-        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+      if (firstFocusElement) {
+        var elm = document.querySelector(firstFocusElement);
+
+        if (elm) {
+          awaitFocus(elm);
+        }
       }
     }
-  }, [currentStep, previousState, blockClass, onMount]);
+  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
 };
 
 exports.useCreateComponentFocus = useCreateComponentFocus;

package/lib/global/js/hooks/useResetCreateComponent.js

@@ -7,6 +7,8 @@ exports.useResetCreateComponent = void 0;
 
 var _react = require("react");
 
+var _getNumberOfHiddenSteps = require("../utils/getNumberOfHiddenSteps");
+
 /**
  * Copyright IBM Corp. 2021, 2022
  *
@@ -21,6 +23,7 @@ var _react = require("react");
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {object} useResetCreateComponent.stepData
  * @param {number} useResetCreateComponent.initialStep
  * @param {number} useResetCreateComponent.totalSteps
  * @param {string} useResetCreateComponent.componentName
@@ -30,13 +33,15 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
       previousState = _ref.previousState,
       open = _ref.open,
       setCurrentStep = _ref.setCurrentStep,
+      stepData = _ref.stepData,
       initialStep = _ref.initialStep,
       totalSteps = _ref.totalSteps,
       componentName = _ref.componentName;
   (0, _react.useEffect)(function () {
     if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
-        setCurrentStep(Number(initialStep));
+        var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+        setCurrentStep(Number(initialStep + numberOfHiddenSteps));
       } else {
         // default should be fist includedStep instead of just 1
         setCurrentStep(firstIncludedStep);
@@ -47,7 +52,7 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
         console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
       }
     }
-  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
 };
 
 exports.useResetCreateComponent = useResetCreateComponent;

package/lib/global/js/package-settings.js

@@ -40,6 +40,8 @@ var defaults = {
     HTTPErrorOther: true,
     ImportModal: true,
     InlineEdit: true,
+    InlineEditV1: true,
+    MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -51,29 +53,30 @@ var defaults = {
     RemoveModal: true,
     Saving: true,
     SidePanel: true,
+    SingleAddSelect: true,
     StatusIcon: true,
     TagSet: true,
     Tearsheet: true,
     TearsheetNarrow: true,
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
+    WebTerminal: true,
+    WebTerminalContentWrapper: true,
+    WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    MultiAddSelect: false,
-    SingleAddSelect: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
-    WebTerminal: false,
-    WebTerminalContentWrapper: false,
-    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
     Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
-    EditFullPage: false
+    EditFullPage: false,
+    EditUpdateCards: false,
+    InlineEditV2: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/global/js/utils/getBezierValues.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBezierValues = void 0;
+
+var _motion = require("@carbon/motion");
+
+/**
+ * This function turns a cubic-bezier() string to an
+ * array of values that we can use with framer-motion
+ * @param {string} type - The carbon motion type, either 'standard', 'entrance', or 'exit'
+ * @param {string} mode - The carbon motion mode, either 'productive', or 'expressive'
+ */
+var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = (0, _motion.motion)(type, mode);
+  var extractStringFromParens = /\(([^)]+)\)/;
+  var desiredBezierStrings = extractStringFromParens.exec(cubicBezier)[1];
+  var formattedDesiredBezierStrings = desiredBezierStrings.trim().split(',').map(Number);
+
+  if (Array.isArray(formattedDesiredBezierStrings)) {
+    return formattedDesiredBezierStrings;
+  }
+
+  return [];
+};
+
+exports.getBezierValues = getBezierValues;

package/lib/global/js/utils/getNumberOfHiddenSteps.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNumberOfHiddenSteps = void 0;
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
+  var numberOfHiddenSteps = 0;
+  stepData.forEach(function (step, stepIndex) {
+    if (stepIndex + 1 > initialStep) {
+      return;
+    }
+
+    if (step.shouldIncludeStep === false) {
+      numberOfHiddenSteps += 1;
+    }
+  });
+  return numberOfHiddenSteps;
+};
+
+exports.getNumberOfHiddenSteps = getNumberOfHiddenSteps;

package/lib/global/js/utils/motionConstants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EASINGS = exports.DURATIONS = void 0;
+
+var _getBezierValues = require("./getBezierValues");
+
+var _motion = require("@carbon/motion");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(_motion.fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(_motion.fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(_motion.moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(_motion.moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(_motion.slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(_motion.slow02) // '700ms'
+
+};
+exports.DURATIONS = DURATIONS;
+var EASINGS = {
+  productive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'productive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'productive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'productive')
+  },
+  expressive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'expressive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'expressive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'expressive')
+  }
+};
+exports.EASINGS = EASINGS;

package/lib/global/js/utils/rangeWithCallback.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rangeWithCallback = void 0;
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Iterates through a numeric range and calls callback
+// function for each iteration
+var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};
+
+exports.rangeWithCallback = rangeWithCallback;

package/lib/global/js/utils/story-helper.js

@@ -46,7 +46,11 @@ var getStoryTitle = function getStoryTitle(componentName) {
 
 exports.getStoryTitle = getStoryTitle;
 
-var getStoryId = function getStoryId(componentName, scenario) {
+var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat((0, _csf.sanitize)(getStoryTitle(componentName)), "-").concat((0, _csf.sanitize)(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat((0, _csf.sanitize)(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**

package/lib/global/js/utils/uuidv4.spec.js

@@ -9,11 +9,15 @@ describe('uuidv4', function () {
     jest.resetAllMocks();
   });
   it('Uses Math.random when window is not defined', function () {
+    var _window = window,
+        crypto = _window.crypto;
+    delete window.crypto;
     var mockMath = Object.create(global.Math);
     var mockMathRandom = jest.fn().mockReturnValue(0.5);
     mockMath.random = mockMathRandom;
     global.Math = mockMath;
     expect((0, _uuidv.default)()).toEqual('98888888-9888-4888-a888-988888888888');
+    window.crypto = crypto;
   });
   it('Uses crypto from window when window is defined', function () {
     var mGetRandomValues = jest.fn().mockReturnValue(new Uint32Array(10));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.21",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,11 +36,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-first build-all",
+    "build": "run-s clean build-first build-all build-css-update-maps",
     "build-all": "run-p 'build:*'",
     "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
     "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
     "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
+    "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
@@ -54,33 +55,28 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.18",
+    "@babel/core": "^7.18.13",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
-    "jest": "^28.1.3",
-    "jest-config-ibm-cloud-cognitive": "^0.24.4",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.0.1",
+    "jest-config-ibm-cloud-cognitive": "^0.24.5",
+    "jest-environment-jsdom": "^29.0.1",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.5",
+    "npm-check-updates": "^16.0.6",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.4",
+    "sass": "^1.54.8",
     "yargs": "^17.5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@carbon/grid": "^11.3.0",
-    "@carbon/layout": "^11.3.0",
-    "@carbon/motion": "^11.2.0",
-    "@carbon/react": "^1.9.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
-    "@carbon/themes": "^11.4.0",
-    "@carbon/type": "^11.4.0",
+    "framer-motion": "^6.5.1",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -89,8 +85,14 @@
     "react-window": "^1.8.7"
   },
   "peerDependencies": {
+    "@carbon/grid": "^11.3.0",
+    "@carbon/layout": "^11.3.0",
+    "@carbon/motion": "^11.2.0",
+    "@carbon/react": "^1.13.0",
+    "@carbon/themes": "^11.4.0",
+    "@carbon/type": "^11.4.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "9f9114881d1ed7ebb8f8f6799ec7e4aa27f11b3c"
+  "gitHead": "18e39051d3cdcf186d14a87665f958dd14429927"
 }

package/scss/components/ActionSet/_action-set.scss

@@ -22,15 +22,20 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$action-set-block-class} .#{$action-set-block-class}__action-button {
   @include type.type-style('body-short-01');
 
-  height: $spacing-10;
   align-items: center;
-  padding-top: $spacing-05;
-  padding-bottom: $spacing-07;
   margin: 0;
+
+  &.#{$action-set-block-class}__action-button--expressive {
+    height: $spacing-10;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
+  }
 }
 
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
-  .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive {
+  .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--expressive,
+.#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set
+  .#{$action-set-block-class}__action-button.#{c4p-settings.$carbon-prefix}--btn {
   max-width: none;
 }