@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/internal/ClickListener.js

@@ -0,0 +1,110 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+
+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);
+
+/**
+ * Generic component used for reacting to a click event happening outside of a
+ * given `children` element.
+ */
+
+var ClickListener = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(ClickListener, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(ClickListener);
+
+  function ClickListener(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ClickListener);
+
+    _this = _super.call(this, props); // We manually bind handlers in this Component, versus using class
+    // properties, so that we can properly test the `handleRef` handler with
+    // enzyme.
+
+    _this.handleRef = _this.handleRef.bind(_rollupPluginBabelHelpers.assertThisInitialized(_this));
+    _this.handleDocumentClick = _this.handleDocumentClick.bind(_rollupPluginBabelHelpers.assertThisInitialized(_this));
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(ClickListener, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleDocumentClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleDocumentClick);
+    }
+  }, {
+    key: "handleDocumentClick",
+    value: function handleDocumentClick(evt) {
+      if (this.element) {
+        if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
+          this.props.onClickOutside(evt);
+        }
+      }
+    }
+  }, {
+    key: "handleRef",
+    value: function handleRef(el) {
+      var children = this.props.children;
+      this.element = 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);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default["default"].cloneElement(this.props.children, {
+        ref: this.handleRef
+      });
+    }
+  }], [{
+    key: "getEventTarget",
+    value: function getEventTarget(evt) {
+      // support Shadow DOM
+      if (evt.composed && typeof evt.composedPath === 'function') {
+        return evt.composedPath()[0];
+      }
+
+      return evt.target;
+    }
+  }]);
+
+  return ClickListener;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(ClickListener, "propTypes", {
+  children: PropTypes__default["default"].element.isRequired,
+  onClickOutside: PropTypes__default["default"].func.isRequired
+});
+
+exports["default"] = ClickListener;

package/lib/internal/ComponentToggle.js

@@ -0,0 +1,50 @@
+/**
+ * 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 index = require('../components/FeatureFlags/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function createComponentToggle(spec) {
+  var name = spec.name,
+      _spec$flag = spec.flag,
+      flag = _spec$flag === void 0 ? 'enable-v11-release' : _spec$flag,
+      next = spec.next,
+      classic = spec.classic;
+
+  function ComponentToggle(props, ref) {
+    var enabled = index.useFeatureFlag(flag);
+
+    if (enabled) {
+      if (next) {
+        return /*#__PURE__*/React__default["default"].createElement(next, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+          ref: ref
+        }));
+      }
+
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(classic, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+      ref: ref
+    }));
+  }
+
+  var wrappedComponent = /*#__PURE__*/React__default["default"].forwardRef(ComponentToggle);
+  wrappedComponent.displayName = "FeatureToggle(".concat(name, ")");
+  return wrappedComponent;
+}
+
+exports.createComponentToggle = createComponentToggle;

package/lib/internal/FeatureFlags.js

@@ -0,0 +1,56 @@
+/**
+ * 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 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;