@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/es/global/js/utils/getBezierValues.js

@@ -0,0 +1,19 @@
+import { motion } from '@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'
+ */
+
+export var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = 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 [];
+};

package/es/global/js/utils/getFocusableElements.js

@@ -1,11 +1,11 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
 /**
  * Copyright IBM Corp. 2021, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 // Returns an array of focusable elements
 export var getFocusableElements = function getFocusableElements(element) {
   return _toConsumableArray(element.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')).filter(function (e) {

package/es/global/js/utils/getNumberOfHiddenSteps.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+export 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;
+};

package/es/global/js/utils/getScrollbarWidth.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export var getScrollbarWidth = function getScrollbarWidth() {
   var scrollDiv = document.createElement('div');
   scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');

package/es/global/js/utils/keyboardNavigation.js

@@ -13,22 +13,24 @@
  * A flag `node.compareDocumentPosition(target)` returns,
  * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
  */
-export var DOCUMENT_POSITION_BROAD_PRECEDING = // Checks `typeof Node` for `react-docgen`
+export var DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
 typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
  * that indicates `target` is located later than `node` in the document or `node` contains `target`.
  */
-
-export var DOCUMENT_POSITION_BROAD_FOLLOWING = // Checks `typeof Node` for `react-docgen`
+export var DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
 typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+
 /**
  * CSS selector that selects major nodes that are sequential-focusable.
  */
-
 export var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+
 /**
  * CSS selector that selects major nodes that are click focusable
  */
-
 export var selectorFocusable = "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";

package/es/global/js/utils/lastIndexInArray.js

@@ -16,11 +16,9 @@
 export var lastIndexInArray = function lastIndexInArray(array, key, value) {
   for (var i = array.length - 1; i >= 0; i--) {
     var _array$i;
-
     if (((_array$i = array[i]) === null || _array$i === void 0 ? void 0 : _array$i[key]) === value) {
       return i + 1;
     }
   }
-
   return -1;
 };

package/es/global/js/utils/motionConstants.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import { getBezierValues } from './getBezierValues';
+import { fast01, fast02, moderate01, moderate02, slow01, slow02 } from '@carbon/motion';
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+export var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(slow02) // '700ms'
+};
+
+export var EASINGS = {
+  productive: {
+    entrance: getBezierValues('entrance', 'productive'),
+    standard: getBezierValues('standard', 'productive'),
+    exit: getBezierValues('exit', 'productive')
+  },
+  expressive: {
+    entrance: getBezierValues('entrance', 'expressive'),
+    standard: getBezierValues('standard', 'expressive'),
+    exit: getBezierValues('exit', 'expressive')
+  }
+};

package/es/global/js/utils/pconsole.js

@@ -4,6 +4,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 export var isProduction = process.env.NODE_ENV === 'production';
 export var noop = function noop() {
   return undefined;
@@ -13,17 +14,14 @@ export var shimIfProduction = function shimIfProduction(fn) {
 };
 export var log = shimIfProduction(function () {
   var _console;
-
   return (_console = console).log.apply(_console, arguments);
 });
 export var warn = shimIfProduction(function () {
   var _console2;
-
   return (_console2 = console).warn.apply(_console2, arguments);
 });
 export var error = shimIfProduction(function () {
   var _console3;
-
   return (_console3 = console).error.apply(_console3, arguments);
 });
 export default {

package/es/global/js/utils/props-helper.js

@@ -1,21 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 //
 // Copyright IBM Corp. 2020, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import unwrapIfFragment from './unwrap-if-fragment';
-import pconsole from './pconsole'; // helper functions for component props
+import pconsole from './pconsole';
+
+// helper functions for component props
 
 /**
  * Prepare a set of props, or prop types or default props, merging values
@@ -41,51 +41,47 @@ import pconsole from './pconsole'; // helper functions for component props
  *   * prepareProps(props, { c: 6 }) -> { a: 3, c: 6, d: 5 }
  *   * prepareProps(props, 'a', { c: 6 }) -> { c: 6, d: 5 }
  */
-
 export var prepareProps = function prepareProps() {
   // Convert any string or array arg into an object with nulls as values
   var toNulls = function toNulls(arg) {
     return typeof arg === 'string' ? _defineProperty({}, arg, null) : Array.isArray(arg) ? Object.fromEntries(arg.map(function (key) {
       return [key, null];
     })) : arg;
-  }; // Merge all the args from left to right
-
+  };
 
+  // Merge all the args from left to right
   for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
     values[_key] = arguments[_key];
   }
+  var merged = Object.assign.apply(Object, [{}].concat(_toConsumableArray(values.map(toNulls))));
 
-  var merged = Object.assign.apply(Object, [{}].concat(_toConsumableArray(values.map(toNulls)))); // Now strip any keys whose final value is null
-
+  // Now strip any keys whose final value is null
   return Object.entries(merged).reduce(function (result, _ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
-
+      key = _ref3[0],
+      value = _ref3[1];
     if (value !== null) {
       result[key] = value;
     }
-
     return result;
   }, {});
-}; // Determine whether a named prop in a set of props has been given a value.
+};
+
+// Determine whether a named prop in a set of props has been given a value.
 // null and undefined do not count as values, but anything else does. If the
 // prop is 'children', then an array of null/undefined also does not count as
 // a value, but anything else does.
-
 var propHasValue = function propHasValue(props, propName) {
   var result = props[propName] !== null && props[propName] !== undefined;
-
   if (result && propName === 'children' && Array.isArray(props[propName])) {
     result = false;
-
     for (var i = 0; !result && i < props[propName].length; i++) {
       result = props[propName][i] !== null && props[propName][i] !== undefined;
     }
   }
-
   return result;
 };
+
 /**
  * A prop-types type checker that marks a particular usage of a prop as
  * deprecated. The deprecation message is reported if the deprecated validator
@@ -102,8 +98,6 @@ var propHasValue = function propHasValue(props, propName) {
  * should be used instead.
  * @returns Any type checking error reported by the validator, or null.
  */
-
-
 export var deprecatePropUsage = function deprecatePropUsage(validator, deprecated, additionalInfo) {
   return function (props, propName, comp, loc, propFullName, secret) {
     if (propHasValue(props, propName) && deprecated(props, propName, comp, loc, propFullName, secret) === null) {
@@ -114,6 +108,7 @@ export var deprecatePropUsage = function deprecatePropUsage(validator, deprecate
     }
   };
 };
+
 /**
  * A prop-types type checker that marks a prop as deprecated.
  * @param {} validator The prop-types validator for the prop as it should be
@@ -124,21 +119,19 @@ export var deprecatePropUsage = function deprecatePropUsage(validator, deprecate
  * be used instead.
  * @returns Any type checking error reported by the validator, or null.
  */
-
 export var deprecateProp = function deprecateProp(validator, additionalInfo) {
   return function (props, propName, comp, loc, propFullName, secret) {
     if (propHasValue(props, propName)) {
       pconsole.warn("The ".concat(loc, " `").concat(propFullName || propName, "` of `").concat(comp, "` has been deprecated and will soon be removed. ").concat(additionalInfo));
     }
-
     return validator(props, propName, comp, loc, propFullName, secret);
   };
 };
+
 /**
  * A function that returns a storybook argTypes object configured to remove deprecated
  * props from the storybook controls
  */
-
 export var getDeprecatedArgTypes = function getDeprecatedArgTypes(deprecatedProps) {
   var keys = Object.keys(deprecatedProps);
   return keys.reduce(function (acc, cur) {
@@ -149,15 +142,14 @@ export var getDeprecatedArgTypes = function getDeprecatedArgTypes(deprecatedProp
     }, acc;
   }, {});
 };
+
 /**
  * Takes items as fragment, node or array
  * @param {node || array} items - which may have shape to extract
  * @returns Array of items
  */
-
 export var extractShapesArray = function extractShapesArray(items) {
   var _items$, _items$2;
-
   // unwrap if items or the first index looks like a React element or fragment
   if (items && (items !== null && items !== void 0 && (_items$ = items[0]) !== null && _items$ !== void 0 && _items$.props || (items === null || items === void 0 ? void 0 : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.type) === React.Fragment || items.type === React.Fragment)) {
     var unwrappedItems = unwrapIfFragment(items);
@@ -167,9 +159,9 @@ export var extractShapesArray = function extractShapesArray(items) {
       }, item.props);
     });
   }
-
   return Array.isArray(items) ? items : [];
 };
+
 /**
  * A prop-types validation function that takes an array of type checkers and
  * requires prop values to satisfy all of the type checkers. This can be useful
@@ -197,39 +189,34 @@ export var extractShapesArray = function extractShapesArray(items) {
  *
  * }
  */
-
 export var allPropTypes = pconsole.shimIfProduction(function (arrayOfTypeCheckers) {
   if (!Array.isArray(arrayOfTypeCheckers)) {
     pconsole.error('Warning: Invalid argument supplied to allPropTypes, expected an instance of array.');
     return pconsole.noop;
   }
-
   for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
     if (typeof arrayOfTypeCheckers[i] !== 'function') {
       pconsole.error("Invalid argument supplied to allPropTypes. Expected an array of check functions, but received ".concat(arrayOfTypeCheckers[i], " at index ").concat(i, "."));
       return pconsole.noop;
     }
   }
-
   var checkType = function checkType() {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     var error = null;
     arrayOfTypeCheckers.some(function (checker) {
       return error = checker.apply(void 0, args);
     });
     return error;
   };
-
   checkType.isRequired = function (props, propName, comp, loc, propFullName, secret) {
     var prop = propFullName || propName;
     return props[prop] == null ? new Error("The ".concat(loc, " `").concat(prop, "` is marked as required in `").concat(comp || '<<anonymous>>', "`, but its value is `").concat(props[prop] === null ? 'null' : 'undefined', "`.")) : checkType(props, prop, comp, loc, propFullName, secret);
   };
-
   return checkType;
 });
+
 /**
  * A prop-types validation function that takes a type checkers and a condition
  * function and invokes either the type checker or the isRequired variant of
@@ -254,17 +241,14 @@ export var allPropTypes = pconsole.shimIfProduction(function (arrayOfTypeChecker
  * }
  *
  */
-
 export var isRequiredIf = function isRequiredIf(checker, conditionFn) {
   return function (props, propName, componentName, location, propFullName, secret) {
     return (conditionFn(props) ? checker.isRequired : checker)(props, propName, componentName, location, propFullName, secret);
   };
 };
-
 isRequiredIf.decorate = function (checker) {
   checker.isRequired.if = pconsole.isProduction ? pconsole.noop : isRequiredIf.bind(null, checker);
 };
-
 for (var checker in PropTypes) {
   if (PropTypes[checker].isRequired) {
     isRequiredIf.decorate(PropTypes[checker]);

package/es/global/js/utils/rangeWithCallback.js

@@ -4,6 +4,7 @@
  * 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
 export var rangeWithCallback = function rangeWithCallback(start, end, fn) {

package/es/global/js/utils/scrollableAncestor.js

@@ -1,11 +1,11 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined"; // determine whether the target is scrollable
+var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";
 
+// determine whether the target is scrollable
 var scrollable = function scrollable(target) {
   var style = window.getComputedStyle(target);
   return /(auto|scroll|hidden)/.test(style.overflow);
 };
-
 var scrollableAncestorInner = function scrollableAncestorInner(target) {
   if (target.parentNode && target.parentNode !== document) {
     if (scrollable(target.parentNode)) {
@@ -17,25 +17,22 @@ var scrollableAncestorInner = function scrollableAncestorInner(target) {
     return document.scrollingElement;
   }
 };
+
 /**
  * Walks up the parent nodes to identify the first scrollable ancestor
  *
  * @param {HTMLElement} target
  * @returns {HTMLElement}
  */
-
-
 export var scrollableAncestor = function scrollableAncestor(target) {
   if (!windowExists || !target) {
     return null;
-  } // based on https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
-
+  }
 
+  // based on https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
   var style = window.getComputedStyle(target);
-
-  if (!target || style.position === 'fixed') {
+  if (!target || !style || style.position === 'fixed') {
     return document.scrollingElement;
   }
-
   return scrollableAncestorInner(target);
 };

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

@@ -4,23 +4,27 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { sanitize } from '@storybook/csf';
 import pkg from '../package-settings';
 import { getPathForComponent } from '../../../../../core/story-structure';
+
 /**
  * A helper function to return the structured story title for a component.
  * @param {string} componentName The name of the component.
  * @returns The structured story title.
  */
-
 export var getStoryTitle = function getStoryTitle(componentName) {
-  var title = // if the component isn't in the master structure, put it in a lost+found section
-  getPathForComponent('c', componentName) || "Carbon for IBM Products/Lost + found/".concat(componentName); // add a canary tag if the component is public but not normally enabled
+  var title =
+  // if the component isn't in the master structure, put it in a lost+found section
+  getPathForComponent('c', componentName) || "Carbon for IBM Products/Lost + found/".concat(componentName);
 
+  // add a canary tag if the component is public but not normally enabled
   return !pkg.isComponentEnabled(componentName, true) && pkg.isComponentPublic(componentName, true) ? "".concat(title, "#canary") : title;
 };
+
 /**
  * A helper function to return the slug (structured path name reduced to lower
  * case text and hyphens) which identifies individual story instances.
@@ -28,14 +32,13 @@ export var getStoryTitle = function getStoryTitle(componentName) {
  * @param {string} scenario The scenario name, also as a slug.
  * @returns The story id.
  */
-
 export var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
   if (subdirectory) {
     return "".concat(sanitize(getStoryTitle(componentName)), "-").concat(sanitize(subdirectory), "--").concat(scenario);
   }
-
   return "".concat(sanitize(getStoryTitle(componentName)), "--").concat(scenario);
 };
+
 /**
  * A helper function to prepare storybook stories for export. This function
  * binds the template, adds the supplied fields, and also inserts a sequence
@@ -45,27 +48,28 @@ export var getStoryId = function getStoryId(componentName, scenario, subdirector
  * template, such as `args`, `storyName`, etc.
  * @returns A bound template with the option fields applied.
  */
-
 var sequence = 0;
 var bindTarget = {};
 export var prepareStory = function prepareStory(template, options) {
   var _result$parameters, _result$parameters2, _result$parameters2$c;
-
   var result = Object.assign(template.bind(bindTarget), options);
   (_result$parameters = result.parameters) !== null && _result$parameters !== void 0 ? _result$parameters : result.parameters = {};
   (_result$parameters2$c = (_result$parameters2 = result.parameters).ccsSettings) !== null && _result$parameters2$c !== void 0 ? _result$parameters2$c : _result$parameters2.ccsSettings = {};
   result.parameters.ccsSettings.sequence = sequence++;
   return result;
 };
+
 /**
  * A helper component that returns a codesandbox link to an example codesandbox for the component.
  * The link URL is based on the example directory name and the standard codesandbox URL for package examples.
  */
-
+var packagePath = 'github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products';
 export var CodesandboxLink = function CodesandboxLink(_ref) {
   var exampleDirectory = _ref.exampleDirectory;
+  // const stackblitz = `https://stackblitz.com/${packagePath}/${dir}?file=src%2FExample%2FExample.jsx`;
+  var codesandbox = "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
   return /*#__PURE__*/React.createElement("a", {
-    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/carbon-for-ibm-products/".concat(exampleDirectory)
+    href: codesandbox
   }, /*#__PURE__*/React.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"
@@ -73,7 +77,32 @@ export var CodesandboxLink = function CodesandboxLink(_ref) {
 };
 CodesandboxLink.propTypes = {
   /**
-   * directory withing examples codesandbox will be found
+   * directory within examples codesandbox will be found
    */
   exampleDirectory: PropTypes.string
+};
+export var StackblitzLink = function StackblitzLink(_ref2) {
+  var exampleDirectory = _ref2.exampleDirectory;
+  var stackblitz = "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
+  return /*#__PURE__*/React.createElement("a", {
+    href: stackblitz
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "Edit on Stackblitz",
+    src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg"
+  }));
+};
+StackblitzLink.propTypes = {
+  /**
+   * directory within examples stackblitz will be found
+   */
+  exampleDirectory: PropTypes.string
+};
+
+/**
+ * A helper function that finds the designated theme on the Storybook canvas.
+ * @returns "dark" or "light"
+ */
+export var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
+  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };