@carbon/react 1.29.1 → 1.30.0

package/lib/components/Tile/Tile.js

@@ -21,6 +21,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
+var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -53,12 +54,10 @@ Tile.propTypes = {
    * The child nodes.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
@@ -75,6 +74,7 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     light,
     onClick = () => {},
     onKeyDown = () => {},
+    renderIcon: Icon,
     ...rest
   } = _ref2;
   const prefix = usePrefix.usePrefix();
@@ -83,25 +83,33 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     [`${prefix}--tile--light`]: light
   }, className);
   const [isSelected, setIsSelected] = React.useState(clicked);
-
   function handleOnClick(evt) {
     evt.persist();
     setIsSelected(!isSelected);
     onClick(evt);
   }
-
   function handleOnKeyDown(evt) {
     evt.persist();
-
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
       onKeyDown(evt);
     }
-
     onKeyDown(evt);
   }
-
+  const v12DefaultIcons = index.useFeatureFlag('enable-v12-tile-default-icons');
+  if (v12DefaultIcons) {
+    if (!Icon) {
+      Icon = iconsReact.ArrowRight;
+    }
+    if (disabled) {
+      Icon = iconsReact.Error;
+    }
+  }
+  const iconClasses = cx__default["default"]({
+    [`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
+    [`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
+  });
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
     className: classes,
     href: href,
@@ -109,7 +117,10 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
-  }, rest), children);
+  }, rest), children, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: iconClasses,
+    "aria-hidden": "true"
+  }));
 });
 ClickableTile.displayName = 'ClickableTile';
 ClickableTile.propTypes = {
@@ -117,47 +128,44 @@ ClickableTile.propTypes = {
    * The child nodes.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Boolean for whether a tile has been clicked.
    */
   clicked: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the ClickableTile should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * The href for the link.
    */
   href: PropTypes__default["default"].string,
-
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-
   /**
    * Specify the function to run when the ClickableTile is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the function to run when the ClickableTile is interacted with via a keyboard
    */
   onKeyDown: PropTypes__default["default"].func,
-
   /**
    * The rel property for the link.
    */
-  rel: PropTypes__default["default"].string
+  rel: PropTypes__default["default"].string,
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
 const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile(_ref3, ref) {
   let {
@@ -185,46 +193,43 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     [`${prefix}--tile--is-selected`]: isSelected,
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--disabled`]: disabled
-  }, className); // TODO: rename to handleClick when handleClick prop is deprecated
+  }, className);
 
+  // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
     evt.persist();
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
-  } // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
-
+  }
 
+  // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
   function handleOnKeyDown(evt) {
     evt.persist();
-
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
       onChange(evt);
     }
-
     keyDownHandler(evt);
   }
-
   function handleChange(event) {
     setIsSelected(event.target.checked);
     onChange(event);
   }
-
   if (selected !== prevSelected) {
     setIsSelected(selected);
     setPrevSelected(selected);
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classes,
     onClick: !disabled ? handleOnClick : null,
     role: "checkbox",
     "aria-checked": isSelected,
     disabled: disabled,
-    onKeyDown: !disabled ? handleOnKeyDown : null // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    onKeyDown: !disabled ? handleOnKeyDown : null
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: !disabled ? tabIndex : null,
     value: value,
@@ -246,63 +251,51 @@ SelectableTile.propTypes = {
    * The child nodes.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the SelectableTile should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * The ID of the `<input>`.
    */
   id: PropTypes__default["default"].string,
-
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-
   /**
    * The `name` of the `<input>`.
    */
   name: PropTypes__default["default"].string,
-
   /**
    * The empty handler of the `<input>`.
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Specify the function to run when the SelectableTile is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the function to run when the SelectableTile is interacted with via a keyboard
    */
   onKeyDown: PropTypes__default["default"].func,
-
   /**
    * `true` to select this tile.
    */
   selected: PropTypes__default["default"].bool,
-
   /**
    * Specify the tab index of the wrapper element
    */
   tabIndex: PropTypes__default["default"].number,
-
   /**
    * The `title` of the `<input>`.
    */
   title: PropTypes__default["default"].string,
-
   /**
    * The value of the `<input>`.
    */
@@ -340,37 +333,30 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const tile = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   const ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
-
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
     setPrevExpanded(expanded);
     setMaxHeight();
   }
-
   if (tileMaxHeight !== prevTileMaxHeight) {
     setIsTileMaxHeight(tileMaxHeight);
     setPrevTileMaxHeight(tileMaxHeight);
   }
-
   if (tilePadding !== prevTilePadding) {
     setIsTilePadding(tilePadding);
     setPrevTilePadding(tilePadding);
   }
-
   function setMaxHeight() {
     if (isExpanded) {
       setIsTileMaxHeight(tileContent.current.getBoundingClientRect().height);
     }
-
     setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
   }
-
   function handleClick(evt) {
     evt.persist();
     setIsExpanded(!isExpanded);
     setMaxHeight();
   }
-
   function handleKeyUp(evt) {
     if (evt.target !== tile.current) {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
@@ -378,11 +364,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
       }
     }
   }
-
   function getChildren() {
     return React__default["default"].Children.toArray(children);
   }
-
   const classNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, {
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
@@ -475,58 +459,47 @@ ExpandableTile.propTypes = {
    * The child nodes.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * `true` if the tile is expanded.
    */
   expanded: PropTypes__default["default"].bool,
-
   /**
    * An ID that can be provided to aria-labelledby
    */
   id: PropTypes__default["default"].string,
-
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
-
   /**
    * Specify the function to run when the ExpandableTile is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * optional handler to trigger a function when a key is pressed
    */
   onKeyUp: PropTypes__default["default"].func,
-
   /**
    * The `tabindex` attribute.
    */
   tabIndex: PropTypes__default["default"].number,
-
   /**
    * The description of the "collapsed" icon that can be read by screen readers.
    */
   tileCollapsedIconText: PropTypes__default["default"].string,
-
   /**
    * When "collapsed", a label to appear next to the chevron (e.g., "View more").
    */
   tileCollapsedLabel: PropTypes__default["default"].string,
-
   /**
    * The description of the "expanded" icon that can be read by screen readers.
    */
   tileExpandedIconText: PropTypes__default["default"].string,
-
   /**
    * When "expanded", a label to appear next to the chevron (e.g., "View less").
    */

package/lib/components/TileGroup/TileGroup.js

@@ -24,12 +24,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 class TileGroup extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       selected: this.props.valueSelected || this.props.defaultSelected || null,
       prevValueSelected: this.props.valueSelected
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "getRadioTiles", () => {
       const childrenArray = React__default["default"].Children.toArray(this.props.children);
       const children = childrenArray.map(tileRadio => {
@@ -38,12 +36,10 @@ class TileGroup extends React__default["default"].Component {
           ...other
         } = tileRadio.props;
         /* istanbul ignore if */
-
         if (typeof tileRadio.props.checked !== 'undefined') {
           process.env.NODE_ENV !== "production" ? warning.warning(false, `Instead of using the checked property on the RadioTile, set
             the defaultSelected property or valueSelected property on the TileGroup.`) : void 0;
         }
-
         return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, other, {
           name: this.props.name,
           key: value,
@@ -54,7 +50,6 @@ class TileGroup extends React__default["default"].Component {
       });
       return children;
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleChange", (newSelection, value, evt) => {
       if (newSelection !== this.state.selected) {
         this.setState({
@@ -63,7 +58,6 @@ class TileGroup extends React__default["default"].Component {
         this.props.onChange(newSelection, this.props.name, evt);
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "renderLegend", legend => {
       if (legend) {
         return /*#__PURE__*/React__default["default"].createElement("legend", {
@@ -72,7 +66,6 @@ class TileGroup extends React__default["default"].Component {
       }
     });
   }
-
   static getDerivedStateFromProps(_ref, state) {
     let {
       valueSelected,
@@ -86,7 +79,6 @@ class TileGroup extends React__default["default"].Component {
       prevValueSelected: valueSelected
     };
   }
-
   render() {
     const {
       context: prefix
@@ -101,58 +93,45 @@ class TileGroup extends React__default["default"].Component {
       disabled: disabled
     }, this.renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, this.getRadioTiles()));
   }
-
 }
-
 _rollupPluginBabelHelpers.defineProperty(TileGroup, "contextType", usePrefix.PrefixContext);
-
 _rollupPluginBabelHelpers.defineProperty(TileGroup, "propTypes", {
   /**
    * Provide a collection of <RadioTile> components to render in the group
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the the value of <RadioTile> to be selected by default
    */
   defaultSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify whether the group is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide an optional legend for this group
    */
   legend: PropTypes__default["default"].string,
-
   /**
    * Specify the name of the underlying `<input>` nodes
    */
   name: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional `onChange` hook that is called whenever the value of
    * the group changes
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Specify the value that is currently selected in the group
    */
   valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 });
-
 _rollupPluginBabelHelpers.defineProperty(TileGroup, "defaultProps", {
-  onChange:
-  /* istanbul ignore next */
-  () => {}
+  onChange: /* istanbul ignore next */() => {}
 });
 
 exports["default"] = TileGroup;

package/lib/components/TimePicker/TimePicker.js

@@ -48,39 +48,32 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
   const prefix = usePrefix.usePrefix();
   const [isValue, setValue] = React__default["default"].useState(value);
   const [prevValue, setPrevValue] = React__default["default"].useState(value);
-
   if (value !== prevValue) {
     setValue(value);
     setPrevValue(value);
   }
-
   function handleOnClick(evt) {
     if (!disabled) {
       if (!readOnly) {
         setValue(isValue);
       }
-
       onClick(evt);
     }
   }
-
   function handleOnChange(evt) {
     if (!disabled && !readOnly) {
       setValue(isValue);
       onChange(evt);
     }
   }
-
   function handleOnBlur(evt) {
     if (!disabled) {
       if (!readOnly) {
         setValue(isValue);
       }
-
       onBlur(evt);
     }
   }
-
   const timePickerInputClasses = cx__default["default"](`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [className], {
     [`${prefix}--text-input--light`]: light
   });
@@ -105,20 +98,19 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
   const error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`
   }, invalidText) : null;
-
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
       onMouseDown: evt => {
         // NOTE: does not prevent click
         if (readOnly) {
-          evt.preventDefault(); // focus on the element as per readonly input behavior
-
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
           evt.target.focus();
         }
       },
       onKeyDown: evt => {
-        const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ']; // This prevents the select from opening for the above keys
-
+        const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' '];
+        // This prevents the select from opening for the above keys
         if (readOnly && selectAccessKeys.includes(evt.key)) {
           evt.preventDefault();
         }
@@ -126,7 +118,8 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     };
     const mappedChildren = React__default["default"].Children.map(children, pickerSelect => {
       const item = pickerSelect;
-      return /*#__PURE__*/React__default["default"].cloneElement(item, { ...item.props,
+      return /*#__PURE__*/React__default["default"].cloneElement(item, {
+        ...item.props,
         disabled: disabled,
         readOnly: readOnly,
         ...readOnlyEventHandlers
@@ -134,7 +127,6 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     });
     return mappedChildren;
   }
-
   const readOnlyProps = {
     readOnly: readOnly
   };
@@ -165,96 +157,78 @@ TimePicker.propTypes = {
    * Pass in the children that will be rendered next to the form control
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify whether you want the underlying label to be visually hidden
    */
   hideLabel: PropTypes__default["default"].bool,
-
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */
   invalidText: PropTypes__default["default"].node,
-
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes__default["default"].node,
-
   /**
    * The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead.'),
-
   /**
    * Specify the maximum length of the time string in `<input>`
    */
   maxLength: PropTypes__default["default"].number,
-
   /**
    * Optionally provide an `onBlur` handler that is called whenever the
    * `<input>` loses focus
    */
   onBlur: PropTypes__default["default"].func,
-
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<input>` is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the regular expression working as the pattern of the time string in `<input>`
    */
   pattern: PropTypes__default["default"].string,
-
   /**
    * Specify the placeholder attribute for the `<input>`
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * Specify whether the TimePicker should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * Specify the size of the Time Picker.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify the type of the `<input>`
    */
   type: PropTypes__default["default"].string,
-
   /**
    * Specify the value of the `<input>`
    */

package/lib/components/TimePickerSelect/TimePickerSelect.js

@@ -57,26 +57,23 @@ TimePickerSelect.propTypes = {
    * Provide the contents of your TimePickerSelect
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the node containing the label and the select box
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Optionally provide the default value of the `<select>`
    */
   defaultValue: PropTypes__default["default"].any,
-
   /**
    * Specify whether the control is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify a custom `id` for the `<select>`
    */
   id: PropTypes__default["default"].string.isRequired
 };
+var TimePickerSelect$1 = TimePickerSelect;
 
-exports["default"] = TimePickerSelect;
+exports["default"] = TimePickerSelect$1;