@carbon/ibm-products 2.0.0-rc.33 → 2.0.0-rc.38

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

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+/**
+ * This utility will return the index of the last instance of an
+ * item in the given array of objects whose key is equal to the value
+ * parameter. If there are no matches, -1 is returned as similar to findIndex
+ * @param {Array<Object.*>} array
+ * @param {string} key
+ * @param {string|boolean|number} value
+ */
+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

@@ -0,0 +1,34 @@
+//
+// 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.
+//
+
+export var isProduction = process.env.NODE_ENV === 'production';
+export var noop = function noop() {
+  return undefined;
+};
+export var shimIfProduction = function shimIfProduction(fn) {
+  return isProduction ? noop : 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 {
+  isProduction: isProduction,
+  noop: noop,
+  shimIfProduction: shimIfProduction,
+  log: log,
+  warn: warn,
+  error: error
+};

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

@@ -0,0 +1,256 @@
+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
+
+/**
+ * Prepare a set of props, or prop types or default props, merging values
+ * from one or more sets and optionally blocking keys which should not be
+ * passed. Returns the prepared set of props. Does not modify any of the
+ * objects passed.
+ *
+ * @param {{} | '' | ['']} values One or more sets of keys and values to be
+ * merged, or names of keys to be blocked. Each parameter that is an object is
+ * treated as keys and values to be merged, and each parameter that is a string
+ * or an array of strings is treated as keys to be blocked.
+ *
+ * Examples:
+ *   const props = { a: 3, c: 4, d: 5 };
+ *
+ *   * prepareProps(props) -> { a: 3, c: 4, d: 5 }
+ *   * prepareProps(props, 'c') -> { a: 3, d: 5 }
+ *   * prepareProps(props, ['a', 'c', 'e']) -> { d: 5 }
+ *
+ *   * prepareProps({ a: 1, b: 2 }, props) -> { a: 3, b: 2, c: 4, d: 5 }
+ *   * prepareProps({ a: 1, b: 2 }, props, ['a', 'c']) -> { b: 2, d: 5 }
+ *
+ *   * 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
+  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))));
+
+  // 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];
+    if (value !== null) {
+      result[key] = value;
+    }
+    return result;
+  }, {});
+};
+
+// 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
+ * matches the supplied value.
+ * @param {} validator The prop-types validator for the prop usage that is
+ * currently supported. If the deprecated validator does not match the supplied
+ * value and this validator produces type checking errors they will be reported
+ * as usual.
+ * @param {} deprecated The prop-types validator for the prop usage that is
+ * now deprecated. If the deprecated validator matches the supplied value the
+ * deprecation warning message is reported but the value is considered valid.
+ * @param {*} additionalInfo One or more sentences to be appended to the
+ * deprecation message to explain why the prop usage is deprecated and/or what
+ * 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) {
+      pconsole.warn("The usage of the ".concat(loc, " `").concat(propFullName || propName, "` of `").concat(comp, "` has been changed and support for the old usage will soon be removed. ").concat(additionalInfo));
+      return null;
+    } else {
+      return validator(props, propName, comp, loc, propFullName, secret);
+    }
+  };
+};
+
+/**
+ * A prop-types type checker that marks a prop as deprecated.
+ * @param {} validator The prop-types validator for the prop as it should be
+ * used if it weren't deprecated. If this validator produces type checking
+ * errors they will be reported as usual.
+ * @param {*} additionalInfo One or more sentences to be appended to the
+ * deprecation message to explain why the prop is deprecated and/or what should
+ * 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) {
+    return acc[cur] = {
+      table: {
+        disable: true
+      }
+    }, 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);
+    return unwrappedItems.map(function (item) {
+      return _objectSpread({
+        key: item.key
+      }, 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
+ * to combine custom validation functions with regular prop types, or for
+ * combining inherited prop-types from another component with tighter
+ * requirements.
+ *
+ * Examples:
+ *
+ * MyComponent.propTypes = {
+ *
+ *   foo: allPropTypes([
+ *     customValidationFunction,
+ *     PropTypes.arrayOf(
+ *       PropTypes.shape({
+ *         text: PropType.string
+ *       })
+ *     )
+ *   ]),
+ *
+ *   kind: allPropTypes([
+ *     Button.propTypes.kind,
+ *     PropTypes.oneOf(['primary', 'secondary'])
+ *   ]),
+ *
+ * }
+ */
+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
+ * the type checker according to whether the condition function returns false
+ * or true when called with the full set of props. This can be useful to make
+ * a prop conditionally required. The function also has a decorate function
+ * which can be used to add isRequiredIf to any existing type which already has
+ * an isRequired variant, and this is automatically applied to the simple type
+ * checkers in PropTypes when this props-helper module is imported. The second
+ * example produces better results with DocGen and Storybook.
+ *
+ * Examples:
+ *
+ * MyComponent1.propTypes = {
+ *   showFoo: PropTypes.bool,
+ *   fooLabel: isRequiredIf(PropTypes.string, ({ showFoo }) => showFoo),
+ * }
+ *
+ * MyComponent2.propTypes = {
+ *   showBar: PropTypes.bool,
+ *   barLabel: PropTypes.string.isRequired.if(({ showBar }) => showBar),
+ * }
+ *
+ */
+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

@@ -0,0 +1,14 @@
+/**
+ * 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
+export var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};

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

@@ -0,0 +1,38 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+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)) {
+      return target.parentNode;
+    } else {
+      return scrollableAncestorInner(target.parentNode);
+    }
+  } else {
+    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
+  var style = window.getComputedStyle(target);
+  if (!target || !style || style.position === 'fixed') {
+    return document.scrollingElement;
+  }
+  return scrollableAncestorInner(target);
+};

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

@@ -0,0 +1,108 @@
+//
+// 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.
+//
+
+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
+  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.
+ * @param {string} componentName The name of the component.
+ * @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
+ * number so that stories can then be sorted into declared order reliably.
+ * @param template the story template render function
+ * @param options an object containing fields to be added to the bound
+ * 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: codesandbox
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "Edit on CodeSandbox",
+    src: "https://codesandbox.io/static/img/play-codesandbox.svg"
+  }));
+};
+CodesandboxLink.propTypes = {
+  /**
+   * 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';
+};