@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/OptionsTile/OptionsTile.js

@@ -1,92 +1,90 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OptionsTile = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _devtools = require("../../global/js/utils/devtools");
-
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-
 var _settings = require("../../settings");
-
+var _hooks = require("../../global/js/hooks");
 var _react2 = require("@carbon/react");
-
 var _icons = require("@carbon/react/icons");
-
 var carbonMotion = _interopRequireWildcard(require("@carbon/motion"));
-
-var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
-
+var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
+/**
+ * Copyright IBM Corp. 2021, 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 portions of React that are needed.
+// Other standard imports.
+// Carbon and package components we use.
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--options-tile");
-var componentName = 'OptionsTile'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
-// Default values for props
+var componentName = 'OptionsTile';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values for props
 var defaults = {
+  onChange: function onChange() {},
   size: 'xl'
 };
+
 /**
  * TODO: A description of the component.
  */
-
 var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      className = _ref.className,
-      enabled = _ref.enabled,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      locked = _ref.locked,
-      lockedText = _ref.lockedText,
-      onToggle = _ref.onToggle,
-      open = _ref.open,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaults.size : _ref$size,
-      summary = _ref.summary,
-      title = _ref.title,
-      userDefinedTitleId = _ref.titleId,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    className = _ref.className,
+    enabled = _ref.enabled,
+    invalid = _ref.invalid,
+    invalidText = _ref.invalidText,
+    locked = _ref.locked,
+    lockedText = _ref.lockedText,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
+    onToggle = _ref.onToggle,
+    open = _ref.open,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    summary = _ref.summary,
+    title = _ref.title,
+    userDefinedTitleId = _ref.titleId,
+    warn = _ref.warn,
+    warnText = _ref.warnText,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(open),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(open),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      prevIsOpen = _useState4[0],
-      setPrevIsOpen = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      closing = _useState6[0],
-      setClosing = _useState6[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    prevIsOpen = _useState2[0],
+    setPrevIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    closing = _useState4[0],
+    setClosing = _useState4[1];
+  var _useControllableState = (0, _hooks.useControllableState)({
+      value: open,
+      defaultValue: open || null,
+      onChange: function onChange(value) {
+        return _onChange(value);
+      }
+    }),
+    _useControllableState2 = (0, _slicedToArray2.default)(_useControllableState, 2),
+    isOpen = _useControllableState2[0],
+    setIsOpen = _useControllableState2[1];
   var detailsRef = (0, _react.useRef)(null);
   var contentRef = (0, _react.useRef)(null);
   var id = (0, _uuidv.default)();
@@ -98,27 +96,22 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
-
   if (open !== prevIsOpen) {
     if (isOpen && !open) {
       collapse();
     } else if (!isOpen && open) {
       expand();
     }
-
     setPrevIsOpen(open);
   }
-
   function expand() {
     if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
       setIsOpen(true);
       detailsRef.current.open = true;
-
       var _getComputedStyle = getComputedStyle(contentRef.current),
-          paddingTop = _getComputedStyle.paddingTop,
-          paddingBottom = _getComputedStyle.paddingBottom,
-          height = _getComputedStyle.height;
-
+        paddingTop = _getComputedStyle.paddingTop,
+        paddingBottom = _getComputedStyle.paddingBottom,
+        height = _getComputedStyle.height;
       contentRef.current.animate([{
         paddingTop: 0,
         paddingBottom: 0,
@@ -140,16 +133,13 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       setIsOpen(true);
     }
   }
-
   function collapse() {
     if (contentRef.current && !reducedMotion.matches) {
       setClosing(true);
-
       var _getComputedStyle2 = getComputedStyle(contentRef.current),
-          paddingTop = _getComputedStyle2.paddingTop,
-          paddingBottom = _getComputedStyle2.paddingBottom,
-          height = _getComputedStyle2.height;
-
+        paddingTop = _getComputedStyle2.paddingTop,
+        paddingBottom = _getComputedStyle2.paddingBottom,
+        height = _getComputedStyle2.height;
       var animation = contentRef.current.animate([{
         paddingTop: paddingTop,
         paddingBottom: paddingBottom,
@@ -164,12 +154,10 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         duration: Number(carbonMotion.moderate01.replace('ms', '')),
         easing: carbonMotion.easings.entrance.productive
       });
-
       var callback = function callback() {
         setIsOpen(false);
         setClosing(false);
       };
-
       animation.onfinish = callback;
       animation.oncancel = callback;
     } else {
@@ -177,22 +165,18 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       setIsOpen(false);
     }
   }
-
   function toggle(e) {
     e.preventDefault();
-
     if (isOpen) {
       collapse();
     } else {
       expand();
     }
   }
-
   function renderTitle() {
     var Icon = null;
     var text = summary;
     var summaryClasses = ["".concat(blockClass, "__summary")];
-
     if (invalid) {
       Icon = _icons.WarningFilled;
       text = invalidText;
@@ -204,19 +188,15 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     } else if (locked) {
       Icon = _icons.Locked;
       summaryClasses.push("".concat(blockClass, "__summary--locked"));
-
       if (!text) {
         text = lockedText;
       }
     }
-
     var hasValidationState = invalid || warn || locked;
     var summaryHidden = !hasValidationState && enabled === false;
-
     if (summaryHidden) {
       summaryClasses.push("".concat(blockClass, "__summary--hidden"));
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/_react.default.createElement("h6", {
@@ -231,9 +211,9 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
   }
-
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
+    className: (0, _classnames.default)(blockClass,
+    // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
     "".concat(blockClass, "--").concat(size), (0, _defineProperty2.default)({}, "".concat(blockClass, "--closing"), closing)),
     ref: ref
@@ -262,98 +242,91 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }), renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
-  }, isLocked && /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Layer, null, isLocked && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
   }, /*#__PURE__*/_react.default.createElement(_icons.Locked, {
     size: 16
-  }), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
+  }), lockedText), children))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__static-content")
   }, renderTitle()));
-}); // Return a placeholder if not released and not enabled by feature flag
-
+});
 
+// Return a placeholder if not released and not enabled by feature flag
 exports.OptionsTile = OptionsTile;
-exports.OptionsTile = OptionsTile = _settings.pkg.checkComponentEnabled(OptionsTile, componentName); // The display name of the component, used by React. Note that displayName
+exports.OptionsTile = OptionsTile = _settings.pkg.checkComponentEnabled(OptionsTile, componentName);
+
+// The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
+OptionsTile.displayName = componentName;
 
-OptionsTile.displayName = componentName; // The types and DocGen commentary for the component props,
+// The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-
 OptionsTile.propTypes = {
   /**
    * Provide content to render as expandable OptionsTile. If no children
    * are present, the OptionsTile will render as its variant.
    */
   children: _propTypes.default.node,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
-
   /**
    * Whether the toggle is enabled or disabled. If nothing is passed,
    * no toggle will be rendered.
    */
   enabled: _propTypes.default.bool,
-
   /**
    * Whether the OptionsTile is in invalid validation state.
    */
   invalid: _propTypes.default.bool,
-
   /**
    * Provide a text explaining why the OptionsTile is in invalid state.
    */
   invalidText: _propTypes.default.string,
-
   /**
    * Whether the OptionsTile is in locked validation state.
    */
   locked: _propTypes.default.bool,
-
   /**
    * Provide a text explaining why the OptionsTile is in locked state.
    */
   lockedText: _propTypes.default.string,
-
+  /**
+   * Provide a function which will be called each time the user
+   * toggles the open state of the OptionsTile.
+   */
+  onChange: _propTypes.default.func,
   /**
    * Provide a function which will be called each time the user
    * interacts with the toggle.
    */
   onToggle: _propTypes.default.func,
-
   /**
    * Whether the OptionsTile is in open state.
    */
   open: _propTypes.default.bool,
-
   /**
    * Define the size of the OptionsTile.
    */
   size: _propTypes.default.oneOf(['lg', 'xl']),
-
   /**
    * Optionally provide a text summarizing the current state of the content.
    */
   summary: _propTypes.default.string,
-
   /**
    * Provide the title for this OptionsTile.
    */
   title: _propTypes.default.string.isRequired,
-
   /**
    * Optionally provide an id which should be used for the title.
    */
   titleId: _propTypes.default.string,
-
   /**
    * Whether the OptionsTile is in warning validation state.
    */
   warn: _propTypes.default.bool,
-
   /**
    * Provide a text explaining why the OptionsTile is in warning state.
    */

package/lib/components/OptionsTile/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "OptionsTile", {
     return _OptionsTile.OptionsTile;
   }
 });
-
 var _OptionsTile = require("./OptionsTile");