@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/internal/useDelayedState.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+
+/**
+ * `useDelayedState` mirrors `useState` but also allows you to add a delay to
+ * when your state updates. You can provide a second argument to `setState`,
+ * `delayMs`, which will be the time in milliseconds after which the state is
+ * updated.
+ *
+ * This hook will clean up pending timers in `useEffect` and will cancel any
+ * pending timers when a `setState` is called before the state is updated from
+ * a previous call
+ */
+
+function useDelayedState(initialState) {
+  var _useState = React.useState(initialState),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var timeoutId = React.useRef(null); // We use `useCallback` to match the signature of React's `useState` which will
+  // always return the same reference for the `setState` updater
+
+  var setStateWithDelay = React.useCallback(function (stateToSet) {
+    var delayMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    clearTimeout(timeoutId.current);
+    timeoutId.current = null;
+
+    if (delayMs === 0) {
+      setState(stateToSet);
+      return;
+    }
+
+    timeoutId.current = setTimeout(function () {
+      setState(stateToSet);
+      timeoutId.current = null;
+    }, delayMs);
+  }, []);
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(timeoutId.current);
+    };
+  }, []);
+  return [state, setStateWithDelay];
+}
+
+exports.useDelayedState = useDelayedState;

package/lib/internal/useEffectOnce.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * A custom hook which will call the given callback exactly once when your
+ * component is initially rendered and effects are first called
+ *
+ * @param {Function} callback
+ */
+
+function useEffectOnce(callback) {
+  var savedCallback = React.useRef(callback);
+  var effectGuard = React.useRef(false);
+  React.useEffect(function () {
+    savedCallback.current = callback;
+  });
+  React.useEffect(function () {
+    if (effectGuard.current !== true) {
+      effectGuard.current = true;
+      savedCallback.current();
+    }
+  }, []);
+}
+
+exports.useEffectOnce = useEffectOnce;

package/lib/internal/useId.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
+var environment = require('./environment.js');
+
+var getId = setupGetInstanceId["default"]();
+var useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
+var serverHandoffCompleted = false;
+/**
+ * Generate a unique ID with an optional prefix prepended to it
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+
+function useId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
+
+  var _useState = React.useState(function () {
+    if (serverHandoffCompleted) {
+      return "".concat(prefix, "-").concat(getId());
+    }
+
+    return null;
+  }),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      id = _useState2[0],
+      setId = _useState2[1];
+
+  useIsomorphicLayoutEffect(function () {
+    if (id === null) {
+      setId("".concat(prefix, "-").concat(getId()));
+    }
+  }, [getId]);
+  React.useEffect(function () {
+    if (serverHandoffCompleted === false) {
+      serverHandoffCompleted = true;
+    }
+  }, []);
+  return id;
+}
+/**
+ * Generate a unique id if a given `id` is not provided
+ * @param {string} id
+ * @returns {string}
+ */
+
+function useFallbackId(id) {
+  var fallback = useId();
+  return id !== null && id !== void 0 ? id : fallback;
+}
+
+exports.useFallbackId = useFallbackId;
+exports.useId = useId;

package/lib/internal/useIsomorphicEffect.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicEffect$1 = useIsomorphicEffect;
+
+exports["default"] = useIsomorphicEffect$1;

package/lib/internal/useMatchMedia.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var environment = require('./environment.js');
+
+function useMatchMedia(mediaQueryString) {
+  var _useState = React.useState(function () {
+    if (environment.canUseDOM) {
+      var mediaQueryList = window.matchMedia(mediaQueryString);
+      return mediaQueryList.matches;
+    }
+
+    return false;
+  }),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      matches = _useState2[0],
+      setMatches = _useState2[1];
+
+  React.useEffect(function () {
+    function listener(event) {
+      setMatches(event.matches);
+    }
+
+    var mediaQueryList = window.matchMedia(mediaQueryString); // Support fallback to `addListener` for broader browser support
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    } // Make sure the media query list is in sync with the matches state
+
+
+    setMatches(mediaQueryList.matches);
+    return function () {
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.removeEventListener('change', listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, [mediaQueryString]);
+  return matches;
+}
+
+exports.useMatchMedia = useMatchMedia;

package/lib/internal/useMergedRefs.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Combine multiple refs into a single ref. This use useful when you have two
+ * refs from both `React.forwardRef` and `useRef` that you would like to add to
+ * the same node.
+ *
+ * @param {Array} refs
+ * @returns {Function}
+ */
+
+function useMergedRefs(refs) {
+  return React.useCallback(function (node) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref !== null && ref !== undefined) {
+        ref.current = node;
+      }
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
+
+exports.useMergedRefs = useMergedRefs;

package/lib/internal/useNoInteractiveChildren.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+
+function useNoInteractiveChildren(ref) {
+  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'component should have no interactive child nodes';
+
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(function () {
+      var node = ref.current ? getInteractiveContent(ref.current) : false;
+
+      if (node) {
+        throw new Error("Error: ".concat(message, ".\n\nInstead found: ").concat(node.outerHTML));
+      }
+    });
+  }
+}
+/**
+ * Determines if a given DOM node has interactive content, or is itself
+ * interactive. It returns the interactive node if one is found
+ *
+ * @param {HTMLElement} node
+ * @returns {HTMLElement}
+ */
+
+function getInteractiveContent(node) {
+  if (isFocusable(node)) {
+    return node;
+  }
+
+  var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(node.childNodes),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var childNode = _step.value;
+      var interactiveNode = getInteractiveContent(childNode);
+
+      if (interactiveNode) {
+        return interactiveNode;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return null;
+}
+/**
+ * Determines if the given element is focusable, or not
+ *
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
+ */
+
+function isFocusable(element) {
+  if (element.tabIndex < 0) {
+    return false;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+
+    case 'INPUT':
+      return element.type !== 'hidden';
+
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+
+    default:
+      return false;
+  }
+}
+
+exports.getInteractiveContent = getInteractiveContent;
+exports.useNoInteractiveChildren = useNoInteractiveChildren;

package/lib/internal/useNormalizedInputProps.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var iconsReact = require('@carbon/icons-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var prefix = 'cds';
+/**
+ * @typedef {object} InputProps
+ * @property {string} id - The input's id
+ * @property {boolean} readOnly - Whether the input should be readonly
+ * @property {boolean} disabled - Whether the input should be disabled
+ * @property {boolean} invalid - Whether the input should be marked as invalid
+ * @property {string} invalidText - The validation message displayed in case the input is considered invalid
+ * @property {boolean} warn - Whether the input should be in warning state
+ * @property {string} warnText - The validation message displayed in case the input is in warning state
+ */
+
+/**
+ * @typedef {object} NormalizedInputProps
+ * @property {boolean} disabled - Whether the input is disabled
+ * @property {boolean} invalid - Whether the input is invalid (takes precedence over warn)
+ * @property {string} invalidId - The invalid message's id
+ * @property {boolean} warn - Whether the input is in warning state
+ * @property {string} warnId - The warning message's id
+ * @property {React.ReactNode | null} validation – React node rendering the appropriate validation message (if any)
+ * @property {React.ReactNode | null} icon – React node rendering the appropriate accompanying icon (if any)
+ */
+
+/**
+ * Returns an object containing non-colliding props and additional, generated ones.
+ * This hook ensures that only either "invalid" or "warn" is true but never both at
+ * the same time. Regardless whether "invalid" or "warn", the appropriate validation
+ * message is passed as "validation". If the input should be accompanied by an icon
+ * (to visually represent a readonly, invalid or warning state), the appropriate icon
+ * is passed as "icon".
+ * It also ensure that neither "invalid", nor "warn", nor "disabled" are enabled when
+ * "readonly" is passed as "readonly" takes precedence over these variants.
+ *
+ * @param {InputProps} props - The props passed to the component
+ * @returns {NormalizedInputProps}
+ */
+
+function useNormalizedInputProps(_ref) {
+  var id = _ref.id,
+      readOnly = _ref.readOnly,
+      disabled = _ref.disabled,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText;
+  var normalizedProps = {
+    disabled: !readOnly && disabled,
+    invalid: !readOnly && invalid,
+    invalidId: "".concat(id, "-error-msg"),
+    warn: !readOnly && !invalid && warn,
+    warnId: "".concat(id, "-warn-msg"),
+    validation: null,
+    icon: null,
+    helperId: "".concat(id, "-helper-text")
+  };
+
+  if (readOnly) {
+    normalizedProps.icon = iconsReact.EditOff;
+  } else {
+    if (normalizedProps.invalid) {
+      normalizedProps.icon = iconsReact.WarningFilled;
+      normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--form-requirement"),
+        id: normalizedProps.invalidId
+      }, invalidText);
+    } else if (normalizedProps.warn) {
+      normalizedProps.icon = iconsReact.WarningAltFilled;
+      normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--form-requirement"),
+        id: normalizedProps.warnId
+      }, warnText);
+    }
+  }
+
+  return normalizedProps;
+}
+
+exports.useNormalizedInputProps = useNormalizedInputProps;

package/lib/internal/usePrefix.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PrefixContext = /*#__PURE__*/React__default["default"].createContext('cds');
+function usePrefix() {
+  return React__default["default"].useContext(PrefixContext);
+}
+
+exports.PrefixContext = PrefixContext;
+exports.usePrefix = usePrefix;

package/lib/internal/useSavedCallback.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Provide a stable reference for a callback that is passed as a prop to a
+ * component. This is helpful when you want access to the latest version of a
+ * callback prop but don't want it to be added to the dependency array of an
+ * effect.
+ *
+ * @param {Function} callback
+ * @returns {Function}
+ */
+
+function useSavedCallback(callback) {
+  var savedCallback = React.useRef(callback);
+  React.useEffect(function () {
+    savedCallback.current = callback;
+  });
+  return React.useCallback(function () {
+    if (savedCallback.current) {
+      return savedCallback.current();
+    }
+  }, []);
+}
+
+exports.useSavedCallback = useSavedCallback;

package/lib/internal/warning.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emptyFunction = function emptyFunction() {};
+
+var warning = process.env.NODE_ENV !== "production" ? function warning(condition, format) {
+  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    args[_key - 2] = arguments[_key];
+  }
+
+  if (format === undefined) {
+    throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'format argument');
+  }
+
+  if (!condition) {
+    var index = 0;
+    var message = format.replace(/%s/g, function () {
+      return args[index++];
+    });
+    console.warn('Warning: ' + message);
+  }
+} : emptyFunction;
+
+exports.warning = warning;

package/lib/internal/wrapFocus.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var findLast = require('lodash.findlast');
+var navigation = require('./keyboard/navigation.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var findLast__default = /*#__PURE__*/_interopDefaultLegacy(findLast);
+
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+
+function elementOrParentIsFloatingMenu(node) {
+  var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  if (node && typeof node.closest === 'function') {
+    var allSelectorsFloatingMenus = [".cds--overflow-menu-options", ".cds--tooltip", '.flatpickr-calendar'].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus));
+    return allSelectorsFloatingMenus.some(function (selector) {
+      return node.closest(selector);
+    });
+  }
+}
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node} options.bodyNode
+ * @param {Node} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
+ */
+
+
+function wrapFocus(_ref) {
+  var bodyNode = _ref.bodyNode,
+      startTrapNode = _ref.startTrapNode,
+      endTrapNode = _ref.endTrapNode,
+      currentActiveNode = _ref.currentActiveNode,
+      oldActiveNode = _ref.oldActiveNode,
+      selectorsFloatingMenus = _ref.selectorsFloatingMenus;
+
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+    var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
+
+    if (currentActiveNode === startTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
+      var tabbable = findLast__default["default"](bodyNode.querySelectorAll(navigation.selectorTabbable), function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+
+      if (tabbable) {
+        tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    } else if (currentActiveNode === endTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_FOLLOWING) {
+      var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(navigation.selectorTabbable), function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+
+      if (_tabbable) {
+        _tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    }
+  }
+}
+
+exports["default"] = wrapFocus;
+exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;