@carbon/react 1.8.0-rc.0 → 1.9.0

package/es/internal/FeatureFlags.js

@@ -1,52 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { enabled } from '@carbon/feature-flags';
-
-/**
- * This file contains the list of the default values of compile-time feature flags.
- *
- * Build toolchain can replace variable here and/or the references
- * in order to apply non-default values to those feature flags.
- *
- * @example Render `foo` if `aFeatureFlag` is `true`, render `bar` otherwise.
- * import { aFeatureFlag } from '/path/to/FeatureFlags';
- * ...
- * const MyComponent = props => (<div {...props}>{aFeatureFlag ? 'foo' : 'bar'}</div>);
- */
-
-/**
- * With this flag, certain components will be created in either a controlled or controlled
- * mode based on the existence of a value prop.
- *
- * The following components will have the significance of their props slightly altered as outlined below.
- *
- * Components: `<NumberInput>`
- *
- * * `value` → when provided, enables controlled mode.
- *   For the rest of the component's lifecycle, it will be controlled by this prop as it's single source of truth.
- * * `defaultValue` → Optional starting value, used for for uncontrolled mode only (no value prop).
- *   The value prop takes precedence over defaultValue.
- * * `onChange` → Optional event handler.
- *   However, if value is provided and a handler is not, we'll throw a warning indicating the component is now read-only
- * * `readOnly` → silences the above warning, acknowledging the read-only state of the component
- *
- * This flag also disables prop -> state sync in several components, notably `<NumberInput>`.
- *
- * This flag also updates event handlers to pass an up-to-date value in the second parameter,
- * so applications can use it in both controlled and uncontrolled components.
- *
- * * _With_ this feature flag, the signature of the event handler will be altered to provide additional context in the second parameter: `onChange(event, { value, ...rest })` where:
- *   * `event` is the (React) raw event
- *   * `value` is the new value
- *   * `rest` tells you additional information based on the source component
- * * _Without_ this feature flag the event handler has component-specific signature, e.g. `onChange(event, direction)`.
- */
-
-var useControlledStateWithValue = enabled('enable-use-controlled-state-with-value');
-
-export { useControlledStateWithValue };

package/es/prop-types/requiredIfValueExists.js

@@ -1,32 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/**
- * @param {Function} propType The original prop type checker.
- * @returns {Function} The new prop type checker for `onChange` that makes it required if `value` exists and `readOnly` does not exist.
- */
-function requiredIfValueExists(propType) {
-  return function check(props, propName, componentName) {
-    var onChange = props[propName],
-        value = props.value,
-        readOnly = props.readOnly;
-    var exists = onChange !== undefined;
-    var valueExists = value !== undefined;
-
-    if (process.env.NODE_ENV !== "production" && !exists && valueExists && !readOnly) {
-      return new Error("You provided a value prop to `".concat(componentName, "` without an `onChange` handler. ") + 'This will render a read-only field. ' + 'If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
-    }
-
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
-
-    return propType.apply(void 0, [props, propName, componentName].concat(rest));
-  };
-}
-
-export { requiredIfValueExists as default };

package/lib/components/Modal/next/Modal.js

@@ -1,284 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
-var toggleClass = require('../../../tools/toggleClass.js');
-var Button = require('../../Button/Button.js');
-var ButtonSet = require('../../ButtonSet/ButtonSet.js');
-var requiredIfGivenPropIsTruthy = require('../../../prop-types/requiredIfGivenPropIsTruthy.js');
-var wrapFocus = require('../../../internal/wrapFocus.js');
-var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
-var usePrefix = require('../../../internal/usePrefix.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _Modal$propTypes;
-
-var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
-var getInstanceId = setupGetInstanceId["default"]();
-var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
-  var _classNames;
-
-  var children = _ref.children,
-      className = _ref.className,
-      modalHeading = _ref.modalHeading,
-      modalLabel = _ref.modalLabel,
-      modalAriaLabel = _ref.modalAriaLabel,
-      passiveModal = _ref.passiveModal,
-      secondaryButtonText = _ref.secondaryButtonText,
-      primaryButtonText = _ref.primaryButtonText,
-      open = _ref.open,
-      onRequestClose = _ref.onRequestClose,
-      onRequestSubmit = _ref.onRequestSubmit,
-      onSecondarySubmit = _ref.onSecondarySubmit,
-      primaryButtonDisabled = _ref.primaryButtonDisabled,
-      danger = _ref.danger,
-      alert = _ref.alert,
-      secondaryButtons = _ref.secondaryButtons,
-      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-      selectorsFloatingMenus = _ref.selectorsFloatingMenus,
-      shouldSubmitOnEnter = _ref.shouldSubmitOnEnter,
-      size = _ref.size,
-      hasScrollingContent = _ref.hasScrollingContent,
-      closeButtonLabel = _ref.closeButtonLabel,
-      preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var button = React.useRef();
-  var secondaryButton = React.useRef();
-  var innerModal = React.useRef();
-  var startTrap = React.useRef();
-  var endTrap = React.useRef();
-  var modalInstanceId = "modal-".concat(getInstanceId());
-  var modalLabelId = "".concat(prefix, "--modal-header__label--").concat(modalInstanceId);
-  var modalHeadingId = "".concat(prefix, "--modal-header__heading--").concat(modalInstanceId);
-  var modalBodyId = "".concat(prefix, "--modal-body--").concat(modalInstanceId);
-  var modalCloseButtonClass = "".concat(prefix, "--modal-close");
-
-  function isCloseButton(element) {
-    return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
-  }
-
-  function handleKeyDown(evt) {
-    if (open) {
-      if (evt.which === 27) {
-        onRequestClose(evt);
-      }
-
-      if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
-        onRequestSubmit(evt);
-      }
-    }
-  }
-
-  function handleMousedown(evt) {
-    if (innerModal.current && !innerModal.current.contains(evt.target) && !wrapFocus.elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
-      onRequestClose(evt);
-    }
-  }
-
-  function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-        currentActiveNode = _ref2.relatedTarget;
-
-    if (open && currentActiveNode && oldActiveNode) {
-      var bodyNode = innerModal.current;
-      var startTrapNode = startTrap.current;
-      var endTrapNode = endTrap.current;
-      wrapFocus["default"]({
-        bodyNode: bodyNode,
-        startTrapNode: startTrapNode,
-        endTrapNode: endTrapNode,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus
-      });
-    }
-  }
-
-  var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
-  var modalClasses = cx__default["default"]("".concat(prefix, "--modal"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _rollupPluginBabelHelpers.defineProperty(_classNames, 'is-visible', open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
-  var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
-  var contentClasses = cx__default["default"]("".concat(prefix, "--modal-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
-  var footerClasses = cx__default["default"]("".concat(prefix, "--modal-footer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
-  var modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
-    className: modalCloseButtonClass,
-    type: "button",
-    onClick: onRequestClose,
-    title: ariaLabel,
-    "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
-    ref: button
-  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
-    size: 20,
-    "aria-hidden": "true",
-    tabIndex: "-1",
-    className: "".concat(modalCloseButtonClass, "__icon")
-  }));
-  var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
-  var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
-  var hasScrollingContentProps = hasScrollingContent ? {
-    tabIndex: 0,
-    role: 'region',
-    'aria-label': ariaLabel,
-    'aria-labelledby': getAriaLabelledBy
-  } : {};
-  var alertDialogProps = {};
-
-  if (alert && passiveModal) {
-    alertDialogProps.role = 'alert';
-  }
-
-  if (alert && !passiveModal) {
-    alertDialogProps.role = 'alertdialog';
-    alertDialogProps['aria-describedby'] = modalBodyId;
-  }
-
-  React.useEffect(function () {
-    return function () {
-      toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), false);
-    };
-  }, [prefix]);
-  React.useEffect(function () {
-    toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), open);
-  }, [open, prefix]);
-  React.useEffect(function () {
-    var initialFocus = function initialFocus(focusContainerElement) {
-      var containerElement = focusContainerElement || innerModal.current;
-      var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
-
-      if (primaryFocusElement) {
-        return primaryFocusElement;
-      }
-
-      return button && button.current;
-    };
-
-    var focusButton = function focusButton(focusContainerElement) {
-      var target = initialFocus(focusContainerElement);
-
-      if (target) {
-        target.focus();
-      }
-    };
-
-    if (open) {
-      focusButton(innerModal.current);
-    }
-  }, [open, selectorPrimaryFocus]);
-  var modalBody = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    ref: innerModal,
-    role: "dialog"
-  }, alertDialogProps, {
-    className: containerClasses,
-    "aria-label": ariaLabel,
-    "aria-modal": "true",
-    tabIndex: "-1"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--modal-header")
-  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default["default"].createElement("h2", {
-    id: modalLabelId,
-    className: "".concat(prefix, "--modal-header__label")
-  }, modalLabel), /*#__PURE__*/React__default["default"].createElement("h3", {
-    id: modalHeadingId,
-    className: "".concat(prefix, "--modal-header__heading")
-  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    id: modalBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps, {
-    "aria-labelledby": getAriaLabelledBy
-  }), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--modal-content--overflow-indicator")
-  }), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
-    className: footerClasses
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref3, i) {
-    var buttonText = _ref3.buttonText,
-        onButtonClick = _ref3.onClick;
-    return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-      key: "".concat(buttonText, "-").concat(i),
-      kind: "secondary",
-      onClick: onButtonClick
-    }, buttonText);
-  }) : secondaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    kind: "secondary",
-    onClick: onSecondaryButtonClick,
-    ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    kind: danger ? 'danger' : 'primary',
-    disabled: primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, primaryButtonText)));
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    onKeyDown: handleKeyDown,
-    onMouseDown: handleMousedown,
-    onBlur: handleBlur,
-    className: modalClasses,
-    role: "presentation",
-    ref: ref
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: startTrap,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(prefix, "--visually-hidden")
-  }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: endTrap,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(prefix, "--visually-hidden")
-  }, "Focus sentinel"));
-});
-Modal.propTypes = (_Modal$propTypes = {
-  /**
-   * Specify whether the Modal is displaying an alert, error or warning
-   * Should go hand in hand with the danger prop.
-   */
-  alert: PropTypes__default["default"].bool
-}, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
-  if (props.secondaryButtons) {
-    if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-      return new Error("".concat(propName, " needs to be an array of two button config objects"));
-    }
-
-    var shape = {
-      buttonText: PropTypes__default["default"].node,
-      onClick: PropTypes__default["default"].func
-    };
-    props[propName].forEach(function (secondaryButton) {
-      PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
-    });
-  }
-
-  return null;
-}), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "shouldSubmitOnEnter", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _Modal$propTypes);
-Modal.defaultProps = {
-  onRequestClose: function onRequestClose() {},
-  onRequestSubmit: function onRequestSubmit() {},
-  primaryButtonDisabled: false,
-  onKeyDown: function onKeyDown() {},
-  passiveModal: false,
-  modalHeading: '',
-  modalLabel: '',
-  preventCloseOnClickOutside: false,
-  selectorPrimaryFocus: '[data-modal-primary-focus]',
-  hasScrollingContent: false
-};
-var ModalNext = Modal;
-
-exports["default"] = ModalNext;

package/lib/internal/FeatureFlags.js

@@ -1,56 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var FeatureFlags = require('@carbon/feature-flags');
-
-/**
- * This file contains the list of the default values of compile-time feature flags.
- *
- * Build toolchain can replace variable here and/or the references
- * in order to apply non-default values to those feature flags.
- *
- * @example Render `foo` if `aFeatureFlag` is `true`, render `bar` otherwise.
- * import { aFeatureFlag } from '/path/to/FeatureFlags';
- * ...
- * const MyComponent = props => (<div {...props}>{aFeatureFlag ? 'foo' : 'bar'}</div>);
- */
-
-/**
- * With this flag, certain components will be created in either a controlled or controlled
- * mode based on the existence of a value prop.
- *
- * The following components will have the significance of their props slightly altered as outlined below.
- *
- * Components: `<NumberInput>`
- *
- * * `value` → when provided, enables controlled mode.
- *   For the rest of the component's lifecycle, it will be controlled by this prop as it's single source of truth.
- * * `defaultValue` → Optional starting value, used for for uncontrolled mode only (no value prop).
- *   The value prop takes precedence over defaultValue.
- * * `onChange` → Optional event handler.
- *   However, if value is provided and a handler is not, we'll throw a warning indicating the component is now read-only
- * * `readOnly` → silences the above warning, acknowledging the read-only state of the component
- *
- * This flag also disables prop -> state sync in several components, notably `<NumberInput>`.
- *
- * This flag also updates event handlers to pass an up-to-date value in the second parameter,
- * so applications can use it in both controlled and uncontrolled components.
- *
- * * _With_ this feature flag, the signature of the event handler will be altered to provide additional context in the second parameter: `onChange(event, { value, ...rest })` where:
- *   * `event` is the (React) raw event
- *   * `value` is the new value
- *   * `rest` tells you additional information based on the source component
- * * _Without_ this feature flag the event handler has component-specific signature, e.g. `onChange(event, direction)`.
- */
-
-var useControlledStateWithValue = FeatureFlags.enabled('enable-use-controlled-state-with-value');
-
-exports.useControlledStateWithValue = useControlledStateWithValue;

package/lib/prop-types/requiredIfValueExists.js

@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/**
- * @param {Function} propType The original prop type checker.
- * @returns {Function} The new prop type checker for `onChange` that makes it required if `value` exists and `readOnly` does not exist.
- */
-function requiredIfValueExists(propType) {
-  return function check(props, propName, componentName) {
-    var onChange = props[propName],
-        value = props.value,
-        readOnly = props.readOnly;
-    var exists = onChange !== undefined;
-    var valueExists = value !== undefined;
-
-    if (process.env.NODE_ENV !== "production" && !exists && valueExists && !readOnly) {
-      return new Error("You provided a value prop to `".concat(componentName, "` without an `onChange` handler. ") + 'This will render a read-only field. ' + 'If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
-    }
-
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
-
-    return propType.apply(void 0, [props, propName, componentName].concat(rest));
-  };
-}
-
-exports["default"] = requiredIfValueExists;