@carbon/ibm-products 1.0.0-rc.0 → 1.0.1

package/es/global/js/utils/ClickListener.js

@@ -0,0 +1,70 @@
+/**
+ * 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 portions of React that are needed.
+import React, { useEffect, useRef } from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+/**
+ * Generic component used for reacting to a click event happening outside of a
+ * given `children` element. Adapted from carbon-react internal utilities, converted
+ * to use React hooks.
+ */
+
+export var ClickListener = function ClickListener(_ref) {
+  var children = _ref.children,
+      onClickOutside = _ref.onClickOutside;
+  var targetElement = useRef();
+
+  var getEventTarget = function getEventTarget(evt) {
+    // support Shadow DOM
+    if (evt.composed && typeof evt.composedPath === 'function') {
+      return evt.composedPath()[0];
+    }
+
+    return evt.target;
+  };
+
+  useEffect(function () {
+    document.addEventListener('click', handleDocumentClick);
+    return function () {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  });
+
+  var handleDocumentClick = function handleDocumentClick(evt) {
+    if (targetElement && targetElement.current) {
+      if (targetElement.current.contains && !targetElement.current.contains(getEventTarget(evt))) {
+        onClickOutside(evt);
+      }
+    }
+  };
+
+  var handleRef = function handleRef(el) {
+    targetElement.current = el;
+    /**
+     * One important note, `children.ref` corresponds to a `ref` prop passed in
+     * directly to the child, not necessarily a `ref` defined in the component.
+     * This means that here we target the following `ref` location:
+     *
+     * <ClickListener onClickOutside={() => {}}>
+     *   <Child ref={targetedRefHere} />
+     * </ClickListener>
+     */
+
+    if (children.ref && typeof children.ref === 'function') {
+      children.ref(el);
+    }
+  };
+
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: handleRef
+  });
+};
+ClickListener.propTypes = {
+  children: PropTypes.element.isRequired,
+  onClickOutside: PropTypes.func.isRequired
+};

package/es/global/js/utils/Wrap.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["alwaysRender", "children", "element", "neverRender"];
+
+/**
+ * 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 portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types'; // Examine a flat array of children to decide whether it is effectively empty.
+// If there are no children, or all the children are falsy, or all the non-falsy
+// children are themselves Wrap components that are empty, then return true.
+
+var isEmpty = function isEmpty(children) {
+  var result = true;
+  React.Children.forEach(children, function (child) {
+    if (child) {
+      var _child$type, _child$props;
+
+      result && (result = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Wrap' && isEmpty(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children));
+    }
+  });
+  return result;
+};
+/**
+ * A simple conditional wrapper that encloses its children in a <div> (or other
+ * element if specified), passing any supplied attributes to the <div> (or other
+ * element). The component renders nothing at all if there are no children or
+ * the children are empty/falsy, or if all the non-falsy children are themselves
+ * Wrap components that do not wish to render. This behavior can be overridden
+ * by setting neverRender or alwaysRender to true. Note that if a ref is passed,
+ * the ref.current will be set to the wrapper element if it renders, and will
+ * remain undefined if it does not render.
+ */
+
+
+export var Wrap = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var alwaysRender = _ref.alwaysRender,
+      children = _ref.children,
+      Wrapper = _ref.element,
+      neverRender = _ref.neverRender,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return (neverRender || isEmpty(children)) && !alwaysRender ? null : /*#__PURE__*/React.createElement(Wrapper, _extends({}, rest, {
+    ref: ref
+  }), children);
+});
+Wrap.displayName = 'Wrap';
+Wrap.propTypes = {
+  /**
+   * Specify whether the wrapper element should render even if there are no
+   * children or the children are themselves empty wrappers. Useful if there
+   * are some conditions in which the wrapper element is still required. Note
+   * that this prop takes precedence over neverRender if both are set to true.
+   */
+  alwaysRender: PropTypes.bool,
+
+  /**
+   * The content of the wrapper element. If no children are supplied, or the
+   * resulting value(s) are falsy, or if all the non-falsy children are Wrap
+   * components that decide not to render, nothing will be rendered in the DOM.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The element name or component to use as a wrapper for the content.
+   */
+  element: PropTypes.elementType,
+
+  /**
+   * Specify whether nothing should be rendered even if there are children
+   * in the content. Useful if there are some circumstances in which the
+   * component should not render at all. Note that if alwaysRender is also
+   * set to true then it will take precedence and the wrapper element and
+   * content will be rendered.
+   */
+  neverRender: PropTypes.bool
+};
+Wrap.defaultProps = {
+  element: 'div'
+};

package/es/global/js/utils/devtools.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/**
+ * 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 pkg from '../package-settings';
+var devtoolsAttribute = 'data-carbon-devtools-id';
+
+function getDevtoolsId(componentName) {
+  return "".concat(pkg.prefix, "--").concat(componentName);
+}
+
+function getDevtoolsProps(componentName) {
+  return _defineProperty({}, devtoolsAttribute, getDevtoolsId(componentName));
+}
+
+export { devtoolsAttribute, getDevtoolsId, getDevtoolsProps };

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

@@ -0,0 +1,14 @@
+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) {
+    return !e.hasAttribute('disabled');
+  });
+};

package/es/global/js/utils/hasValidType.js

@@ -0,0 +1,94 @@
+/**
+ * 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 { Fragment } from 'react'; // Custom PropType validator which checks and ensures that all children of the create component are indeed all CreateStep components.
+
+export var hasValidChildrenType = function hasValidChildrenType(_ref) {
+  var componentName = _ref.componentName,
+      childType = _ref.childType;
+  return function (_ref2) {
+    var children = _ref2.children;
+    children.length > 1 && children.map(function (child) {
+      var _child$type;
+
+      if (typeof (child === null || child === void 0 ? void 0 : child.type) !== 'function' && child && child.props && child.props.type !== childType || typeof (child === null || child === void 0 ? void 0 : child.type) === 'function' && ((_child$type = child.type()) === null || _child$type === void 0 ? void 0 : _child$type.props.type) !== childType) {
+        throw new Error("Each child of ".concat(componentName, " is required to be a ").concat(childType, ". Please remove the HTML element, or wrap it around the ").concat(childType, " component."));
+      }
+
+      return;
+    });
+  };
+};
+/**
+ * Returns array of CreateTearsheetSteps or CreateFullPageSteps
+ * @param {Array} arr All of the children passed to the create tearsheet component
+ * @param {string} type string that represents the `type` of component/s we're looking for
+ */
+
+export var getExtractedSteps = function getExtractedSteps(arr, type) {
+  var steps = [];
+
+  var validateChild = function validateChild(child) {
+    var _child$type2;
+
+    // If the child is a CreateTearsheetStep component
+    // we can add it to our array of steps
+    if (typeof (child === null || child === void 0 ? void 0 : child.type) !== 'function' && child && child.props && child.props.type === type) {
+      steps.push(child);
+    } // Creating custom step components will follow this format
+
+
+    if (typeof (child === null || child === void 0 ? void 0 : child.type) === 'function' && ((_child$type2 = child.type()) === null || _child$type2 === void 0 ? void 0 : _child$type2.props.type) === type) {
+      // If the custom component does not have any props
+      // ie all of the create tearsheet step props are set
+      // inside of the custom component
+      if (!Object.entries(child.props).length) {
+        steps.push(child.type());
+      } else {
+        steps.push(child);
+      }
+    }
+  };
+
+  var validateFragmentChild = function validateFragmentChild(child) {
+    if (child.props.children.length) {
+      child.props.children.map(function (fragmentChild) {
+        // We need to make sure that we catch all fragments that have
+        // fragments as children, so we recursively call `validateFragmentChild`
+        // again until child.type is not a `Fragment`
+        if ((fragmentChild === null || fragmentChild === void 0 ? void 0 : fragmentChild.type) === Fragment) {
+          validateFragmentChild(fragmentChild);
+        }
+
+        validateChild(fragmentChild);
+      });
+    } else {
+      validateChild(child.props.children);
+    }
+  };
+
+  arr.length && arr.map(function (child) {
+    if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) {
+      validateFragmentChild(child);
+    }
+
+    validateChild(child);
+  });
+  return steps;
+}; // Utility used to check the `type` of a child component
+
+export var hasValidChildType = function hasValidChildType(_ref3) {
+  var _child$props;
+
+  var child = _ref3.child,
+      type = _ref3.type;
+
+  if (child && child !== null && child !== void 0 && child.props && (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.type) === type) {
+    return true;
+  }
+
+  return false;
+};

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Various utilities to help with a11y work
+ */
+
+/**
+ * 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`
+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`
+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/pconsole.js

@@ -0,0 +1,36 @@
+//
+// 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,272 @@
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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/scrollableAncestor.js

@@ -0,0 +1,40 @@
+var windowExists = 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.position === 'fixed') {
+    return document.scrollingElement;
+  }
+
+  return scrollableAncestorInner(target);
+};