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

package/es/components/OptionsTile/OptionsTile.js

@@ -2,72 +2,83 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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.
-import React, { useState, useRef } from 'react'; // Other standard imports.
+import React, { useState, useRef } from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
-import { pkg } from '../../settings'; // Carbon and package components we use.
+import { pkg } from '../../settings';
+import { useControllableState } from '../../global/js/hooks';
 
-import { Toggle } from '@carbon/react';
+// Carbon and package components we use.
+import { Layer, Toggle } from '@carbon/react';
 import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/react/icons';
-import * as carbonMotion from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
+import * as carbonMotion from '@carbon/motion';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(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.
  */
-
 export var OptionsTile = /*#__PURE__*/React.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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(open),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useState3 = useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevIsOpen = _useState4[0],
-      setPrevIsOpen = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      closing = _useState6[0],
-      setClosing = _useState6[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    prevIsOpen = _useState2[0],
+    setPrevIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    closing = _useState4[0],
+    setClosing = _useState4[1];
+  var _useControllableState = useControllableState({
+      value: open,
+      defaultValue: open || null,
+      onChange: function onChange(value) {
+        return _onChange(value);
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    isOpen = _useControllableState2[0],
+    setIsOpen = _useControllableState2[1];
   var detailsRef = useRef(null);
   var contentRef = useRef(null);
   var id = uuidv4();
@@ -79,27 +90,22 @@ export var OptionsTile = /*#__PURE__*/React.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,
@@ -121,16 +127,13 @@ export var OptionsTile = /*#__PURE__*/React.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,
@@ -145,12 +148,10 @@ export var OptionsTile = /*#__PURE__*/React.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 {
@@ -158,22 +159,18 @@ export var OptionsTile = /*#__PURE__*/React.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 = WarningFilled;
       text = invalidText;
@@ -185,19 +182,15 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     } else if (locked) {
       Icon = 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.createElement("div", {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/React.createElement("h6", {
@@ -212,9 +205,9 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
   }
-
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, // Apply the block class to the main HTML element
+    className: cx(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), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
     ref: ref
@@ -243,96 +236,90 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), renderTitle()), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
-  }, isLocked && /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement(Layer, null, isLocked && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
   }, /*#__PURE__*/React.createElement(Locked, {
     size: 16
-  }), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
+  }), lockedText), children))) : /*#__PURE__*/React.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
+OptionsTile = pkg.checkComponentEnabled(OptionsTile, componentName);
 
-OptionsTile = pkg.checkComponentEnabled(OptionsTile, componentName); // The display name of the component, used by React. Note that displayName
+// 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.node,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-
   /**
    * Whether the toggle is enabled or disabled. If nothing is passed,
    * no toggle will be rendered.
    */
   enabled: PropTypes.bool,
-
   /**
    * Whether the OptionsTile is in invalid validation state.
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide a text explaining why the OptionsTile is in invalid state.
    */
   invalidText: PropTypes.string,
-
   /**
    * Whether the OptionsTile is in locked validation state.
    */
   locked: PropTypes.bool,
-
   /**
    * Provide a text explaining why the OptionsTile is in locked state.
    */
   lockedText: PropTypes.string,
-
+  /**
+   * Provide a function which will be called each time the user
+   * toggles the open state of the OptionsTile.
+   */
+  onChange: PropTypes.func,
   /**
    * Provide a function which will be called each time the user
    * interacts with the toggle.
    */
   onToggle: PropTypes.func,
-
   /**
    * Whether the OptionsTile is in open state.
    */
   open: PropTypes.bool,
-
   /**
    * Define the size of the OptionsTile.
    */
   size: PropTypes.oneOf(['lg', 'xl']),
-
   /**
    * Optionally provide a text summarizing the current state of the content.
    */
   summary: PropTypes.string,
-
   /**
    * Provide the title for this OptionsTile.
    */
   title: PropTypes.string.isRequired,
-
   /**
    * Optionally provide an id which should be used for the title.
    */
   titleId: PropTypes.string,
-
   /**
    * Whether the OptionsTile is in warning validation state.
    */
   warn: PropTypes.bool,
-
   /**
    * Provide a text explaining why the OptionsTile is in warning state.
    */

package/es/components/OptionsTile/index.js

@@ -4,4 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { OptionsTile } from './OptionsTile';