@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -0,0 +1,250 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/**
+ * 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 { useCallback, useEffect } from 'react';
+export var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
+  var setCurrentStep = _ref.setCurrentStep,
+      setIsSubmitting = _ref.setIsSubmitting,
+      setShouldViewAll = _ref.setShouldViewAll,
+      onClose = _ref.onClose,
+      onRequestSubmit = _ref.onRequestSubmit,
+      componentName = _ref.componentName,
+      getComponentSteps = _ref.getComponentSteps,
+      currentStep = _ref.currentStep,
+      shouldViewAll = _ref.shouldViewAll,
+      backButtonText = _ref.backButtonText,
+      cancelButtonText = _ref.cancelButtonText,
+      submitButtonText = _ref.submitButtonText,
+      nextButtonText = _ref.nextButtonText,
+      isSubmitting = _ref.isSubmitting,
+      componentBlockClass = _ref.componentBlockClass,
+      setCreateComponentActions = _ref.setCreateComponentActions,
+      setModalIsOpen = _ref.setModalIsOpen;
+  // useEffect to handle multi step logic
+  useEffect(function () {
+    var _getComponentSteps;
+
+    var onUnmount = function onUnmount() {
+      if (componentName !== 'CreateFullPage') {
+        setCurrentStep(0);
+      }
+
+      setIsSubmitting(false);
+      setShouldViewAll(false);
+      onClose();
+    };
+
+    var handleOnRequestSubmit = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return onRequestSubmit();
+
+              case 3:
+                onUnmount();
+                _context.next = 10;
+                break;
+
+              case 6:
+                _context.prev = 6;
+                _context.t0 = _context["catch"](0);
+                setIsSubmitting(false);
+                console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 6]]);
+      }));
+
+      return function handleOnRequestSubmit() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    var isSubmitDisabled = function isSubmitDisabled() {
+      var step = 0;
+      var submitDisabled = false;
+      var viewAllSubmitDisabled = false;
+      var createComponentSteps = getComponentSteps();
+      createComponentSteps.forEach(function (child) {
+        step++;
+
+        if (currentStep === step) {
+          submitDisabled = child.props.disableSubmit;
+        }
+
+        if (shouldViewAll && child.props.disableSubmit) {
+          viewAllSubmitDisabled = true;
+        }
+      });
+
+      if (!shouldViewAll) {
+        return submitDisabled;
+      }
+
+      return viewAllSubmitDisabled;
+    };
+
+    var handleNext = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var createSteps;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                setIsSubmitting(true);
+                createSteps = getComponentSteps();
+
+                if (!createSteps[currentStep - 1].props.onNext) {
+                  _context2.next = 15;
+                  break;
+                }
+
+                _context2.prev = 3;
+                _context2.next = 6;
+                return createSteps[currentStep - 1].props.onNext();
+
+              case 6:
+                continueToNextStep();
+                _context2.next = 13;
+                break;
+
+              case 9:
+                _context2.prev = 9;
+                _context2.t0 = _context2["catch"](3);
+                setIsSubmitting(false);
+                console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
+
+              case 13:
+                _context2.next = 16;
+                break;
+
+              case 15:
+                continueToNextStep();
+
+              case 16:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[3, 9]]);
+      }));
+
+      return function handleNext() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    var handleSubmit = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var createSteps;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                setIsSubmitting(true);
+                createSteps = getComponentSteps(); // last step should have onNext as well
+
+                if (!createSteps[currentStep - 1].props.onNext) {
+                  _context3.next = 16;
+                  break;
+                }
+
+                _context3.prev = 3;
+                _context3.next = 6;
+                return createSteps[currentStep - 1].props.onNext();
+
+              case 6:
+                _context3.next = 8;
+                return handleOnRequestSubmit();
+
+              case 8:
+                _context3.next = 14;
+                break;
+
+              case 10:
+                _context3.prev = 10;
+                _context3.t0 = _context3["catch"](3);
+                setIsSubmitting(false);
+                console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
+
+              case 14:
+                _context3.next = 18;
+                break;
+
+              case 16:
+                _context3.next = 18;
+                return handleOnRequestSubmit();
+
+              case 18:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, null, [[3, 10]]);
+      }));
+
+      return function handleSubmit() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+
+    if ((_getComponentSteps = getComponentSteps()) !== null && _getComponentSteps !== void 0 && _getComponentSteps.length) {
+      var createSteps = getComponentSteps();
+      var total = createSteps.length;
+      var buttons = [];
+
+      if (total > 1 && !shouldViewAll) {
+        buttons.push({
+          key: 'create-action-button-back',
+          label: backButtonText,
+          onClick: function onClick() {
+            return setCurrentStep(function (prev) {
+              return prev - 1;
+            });
+          },
+          kind: 'secondary',
+          disabled: currentStep === 1
+        });
+      }
+
+      buttons.push({
+        key: 'create-action-button-cancel',
+        label: cancelButtonText,
+        onClick: componentName === 'CreateFullPage' ? function () {
+          return setModalIsOpen(true);
+        } : onUnmount,
+        kind: 'ghost'
+      });
+      buttons.push({
+        key: 'create-action-button-submit',
+        label: shouldViewAll ? submitButtonText : currentStep < total ? nextButtonText : submitButtonText,
+        onClick: shouldViewAll ? handleSubmit : currentStep < total ? handleNext : handleSubmit,
+        disabled: isSubmitDisabled(),
+        kind: 'primary',
+        loading: isSubmitting,
+        className: "".concat(componentBlockClass, "__create-button")
+      });
+      setCreateComponentActions(buttons);
+    }
+  }, [getComponentSteps, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
+  var continueToNextStep = useCallback(function () {
+    setIsSubmitting(false);
+    setCurrentStep(function (prev) {
+      return prev + 1;
+    });
+  }, [setCurrentStep, setIsSubmitting]);
+};

package/es/global/js/hooks/usePreviousValue.js

@@ -0,0 +1,19 @@
+/**
+ * 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 { useEffect, useRef } from 'react';
+/**
+ * Returns the previous state values included in the param
+ * @param {object} value
+ */
+
+export var usePreviousValue = function usePreviousValue(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};

package/es/global/js/hooks/useResetCreateComponent.js

@@ -0,0 +1,40 @@
+/**
+ * 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 { useEffect } from 'react';
+/**
+ * Resets the current step of the create component if it has been closed.
+ * @param {object} useResetCreateComponent - Create component that uses this custom hook
+ * @param {object} useResetCreateComponent.previousState
+ * @param {boolean} useResetCreateComponent.open
+ * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {number} useResetCreateComponent.initialStep
+ * @param {number} useResetCreateComponent.totalSteps
+ * @param {string} useResetCreateComponent.componentName
+ */
+
+export var useResetCreateComponent = function useResetCreateComponent(_ref) {
+  var previousState = _ref.previousState,
+      open = _ref.open,
+      setCurrentStep = _ref.setCurrentStep,
+      initialStep = _ref.initialStep,
+      totalSteps = _ref.totalSteps,
+      componentName = _ref.componentName;
+  useEffect(function () {
+    if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
+      if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
+        setCurrentStep(Number(initialStep));
+      } else {
+        setCurrentStep(1);
+      } // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
+
+
+      if (initialStep && totalSteps && Number(initialStep) > Number(totalSteps) || Number(initialStep) <= 0) {
+        console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
+      }
+    }
+  }, [open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+};

package/es/global/js/hooks/useValidCreateStepCount.js

@@ -0,0 +1,23 @@
+/**
+ * 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 { useEffect } from 'react';
+/**
+ * Logs a warning to console if an invalid number of steps are used with the given CreateComponent
+ * @param {Function} getCreateComponentSteps
+ * @param {string} componentName
+ */
+
+export var useValidCreateStepCount = function useValidCreateStepCount(getCreateComponentSteps, componentName) {
+  useEffect(function () {
+    var createSteps = getCreateComponentSteps();
+    var total = createSteps.length;
+
+    if (total === 1) {
+      console.warn("".concat(componentName, ": ").concat(componentName, "s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components."));
+    }
+  }, [getCreateComponentSteps, componentName]);
+};

package/es/global/js/hooks/useWindowResize.js

@@ -0,0 +1,67 @@
+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; }
+
+import { useRef, useLayoutEffect } from 'react';
+var windowExists = typeof window !== "undefined";
+
+var getWindowSize = function getWindowSize() {
+  if (!windowExists) {
+    return {
+      innerHeight: 0,
+      innerWidth: 0,
+      outerHeight: 0,
+      outerWidth: 0
+    };
+  }
+
+  var _window = _objectSpread({}, window),
+      innerHeight = _window.innerHeight,
+      innerWidth = _window.innerWidth,
+      outerHeight = _window.outerHeight,
+      outerWidth = _window.outerWidth;
+
+  return {
+    innerHeight: innerHeight,
+    innerWidth: innerWidth,
+    outerHeight: outerHeight,
+    outerWidth: outerWidth
+  };
+};
+
+export var useWindowResize = function useWindowResize(effect, deps) {
+  var throttleInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var windowSize = useRef({});
+  var throttleTimeout = useRef(null);
+
+  var doGetWindowSize = function doGetWindowSize() {
+    var newVal = {
+      previous: windowSize.current,
+      current: getWindowSize()
+    }; // call effect
+
+    effect(newVal);
+    windowSize.current = newVal.current;
+    throttleTimeout.current = null;
+  };
+
+  useLayoutEffect(function () {
+    var handleResize = function handleResize() {
+      if (throttleInterval) {
+        if (throttleTimeout.current === null) {
+          throttleTimeout.current = setTimeout(doGetWindowSize, throttleInterval);
+        }
+      } else {
+        doGetWindowSize();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    doGetWindowSize();
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};

package/es/global/js/hooks/useWindowScroll.js

@@ -0,0 +1,80 @@
+import { useRef, useLayoutEffect } from 'react';
+import { scrollableAncestor } from '../utils/scrollableAncestor';
+var windowExists = typeof window !== "undefined";
+
+var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {
+  var scrollPosition = useRef({});
+  var throttleTimeout = useRef(null);
+
+  var getScrollPosition = function getScrollPosition() {
+    if (!target || !windowExists && target === window) {
+      return {
+        scrollX: -1,
+        scrollY: -1
+      };
+    } //
+
+
+    var scrollX, scrollY;
+
+    if (target === window) {
+      scrollX = window.scrollX;
+      scrollY = window.scrollY;
+    } else {
+      scrollX = target.scrollLeft;
+      scrollY = target.scrollTop;
+    }
+
+    return {
+      scrollX: scrollX,
+      scrollY: scrollY
+    };
+  };
+
+  var doGetScrollPosition = function doGetScrollPosition() {
+    var newVal = {
+      previous: scrollPosition.current,
+      current: getScrollPosition()
+    }; // call effect
+
+    effect(newVal);
+    scrollPosition.current = newVal.current;
+    throttleTimeout.current = null;
+  };
+
+  useLayoutEffect(function () {
+    var handleScroll = function handleScroll() {
+      if (throttleInterval) {
+        if (throttleTimeout.current === null) {
+          throttleTimeout.current = setTimeout(doGetScrollPosition, throttleInterval);
+        }
+      } else {
+        doGetScrollPosition();
+      }
+    };
+
+    if (target) {
+      target.addEventListener('scroll', handleScroll);
+      doGetScrollPosition();
+    }
+
+    return function () {
+      return target && target.removeEventListener('scroll', handleScroll);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};
+
+export function useWindowScroll(effect, deps) {
+  var throttleInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return useTargetScroll(window, effect, deps, throttleInterval);
+}
+export function useNearestScroll(ref, effect, deps) {
+  var throttle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var scrollableTarget = scrollableAncestor(ref.current);
+
+  if (scrollableTarget && (document.body === scrollableTarget || scrollableTarget.contains(document.body))) {
+    scrollableTarget = window;
+  }
+
+  return useTargetScroll(scrollableTarget, effect, deps, throttle);
+}

package/es/global/js/package-settings.js

@@ -0,0 +1,161 @@
+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 { devtoolsAttribute, getDevtoolsId } from './utils/devtools';
+var defaults = {
+  prefix: 'c4p',
+  // by default only released components are set to true
+  component: {
+    // reviewed and released components:
+    AboutModal: true,
+    APIKeyModal: true,
+    Cascade: true,
+    CreateModal: true,
+    CreateFullPage: true,
+    CreateFullPageStep: true,
+    CreateSidePanel: true,
+    CreateTearsheetNarrow: true,
+    CreateTearsheet: true,
+    CreateTearsheetStep: true,
+    CreateTearsheetDivider: true,
+    EmptyState: true,
+    ErrorEmptyState: true,
+    ExportModal: true,
+    ExpressiveCard: true,
+    HTTPError403: true,
+    HTTPError404: true,
+    HTTPErrorOther: true,
+    ImportModal: true,
+    NotificationsPanel: true,
+    NoDataEmptyState: true,
+    NoTagsEmptyState: true,
+    NotFoundEmptyState: true,
+    NotificationsEmptyState: true,
+    PageHeader: true,
+    ProductiveCard: true,
+    RemoveModal: true,
+    Saving: true,
+    SidePanel: true,
+    StatusIcon: true,
+    TagSet: true,
+    Tearsheet: true,
+    TearsheetNarrow: true,
+    UnauthorizedEmptyState: true,
+    UserProfileImage: true,
+    // other public components not yet reviewed and released:
+    ExampleComponent: false,
+    LoadingBar: false,
+    ModifiedTabs: false,
+    Toolbar: false,
+    ToolbarButton: false,
+    ToolbarGroup: false,
+    WebTerminal: false,
+    EditSidePanel: false,
+    OptionsTile: false
+    /* new component flags here - comment used by generate CLI */
+
+  },
+  // feature level flags
+  feature: {
+    'a-new-feature': false
+  }
+};
+
+var warningMessageComponent = function warningMessageComponent(property) {
+  return "Carbon for IBM Products (WARNING): Component \"".concat(property, "\" enabled via feature flags. This component has not yet completed its review process.");
+};
+
+var warningMessageFeature = function warningMessageFeature(property) {
+  return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
+};
+
+var warningMessageAllComponents = 'Carbon for IBM Products (WARNING): All components enabled through use of setAllComponents. This includes components that have not yet completed their review process.';
+var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures'; // Values to represent overrides for component or feature settings.
+// Each value maps the initial value to the value that should be returned.
+
+var all = {
+  INITIAL: function INITIAL(v) {
+    return v;
+  },
+  ON: function ON() {
+    return true;
+  },
+  OFF: function OFF() {
+    return false;
+  }
+};
+var allComponents = all.INITIAL;
+var allFeatures = all.INITIAL;
+var silent = false;
+var component = new Proxy(_objectSpread({}, defaults.component), {
+  set: function set(target, property, value) {
+    value && !silent && console.warn(warningMessageComponent(property));
+    target[property] = value;
+    return true; // value set
+  },
+  get: function get(target, property) {
+    var _target$property;
+
+    return allComponents((_target$property = target[property]) !== null && _target$property !== void 0 ? _target$property : false);
+  }
+});
+var feature = new Proxy(_objectSpread({}, defaults.feature), {
+  set: function set(target, property, value) {
+    value && !silent && console.warn(warningMessageFeature(property));
+    target[property] = value;
+    return true; // value set
+  },
+  get: function get(target, property) {
+    var _target$property2;
+
+    return allFeatures((_target$property2 = target[property]) !== null && _target$property2 !== void 0 ? _target$property2 : false);
+  }
+});
+export default {
+  devtoolsAttribute: devtoolsAttribute,
+  getDevtoolsId: getDevtoolsId,
+  prefix: defaults.prefix,
+  component: component,
+  feature: feature,
+  isComponentEnabled: function isComponentEnabled(componentOrName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var componentName = (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.displayName) || (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.name) || componentOrName;
+    return byDefault ? defaults.component[componentName] : component[componentName];
+  },
+  isComponentPublic: function isComponentPublic(componentOrName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var componentName = (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.displayName) || (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.name) || componentOrName;
+    return Object.prototype.hasOwnProperty.call(byDefault ? defaults.component : component, componentName);
+  },
+  isFeatureEnabled: function isFeatureEnabled(featureName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return byDefault ? defaults.feature[featureName] : feature[featureName];
+  },
+  isFeaturePublic: function isFeaturePublic(featureName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);
+  },
+  setAllComponents: function setAllComponents(enabled) {
+    enabled === true && !silent && console.warn(warningMessageAllComponents);
+    allComponents = enabled === true ? all.ON : enabled === false ? all.OFF : all.INITIAL;
+  },
+  setAllFeatures: function setAllFeatures(enabled) {
+    enabled === true && !silent && console.warn(warningMessageAllFeatures);
+    allFeatures = enabled === true ? all.ON : enabled === false ? all.OFF : all.INITIAL;
+  },
+  _silenceWarnings: function _silenceWarnings(value) {
+    // This will suppress console warnings when components or feature flags
+    // are enabled, and should only be used when this is not an issue, such
+    // as in internal test suites and storybook builds.
+    silent = value;
+  }
+};