@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/Tile/Tile.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { CheckboxCheckedFilled, Checkbox, ChevronDown } from '@carbon/icons-react';
+import { CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
 import Link from '../Link/Link.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
@@ -17,6 +17,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -43,12 +44,10 @@ Tile.propTypes = {
    * The child nodes.
    */
   children: PropTypes.node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes.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.
@@ -65,6 +64,7 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     light,
     onClick = () => {},
     onKeyDown = () => {},
+    renderIcon: Icon,
     ...rest
   } = _ref2;
   const prefix = usePrefix();
@@ -73,25 +73,33 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     [`${prefix}--tile--light`]: light
   }, className);
   const [isSelected, setIsSelected] = useState(clicked);
-
   function handleOnClick(evt) {
     evt.persist();
     setIsSelected(!isSelected);
     onClick(evt);
   }
-
   function handleOnKeyDown(evt) {
     evt.persist();
-
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
       onKeyDown(evt);
     }
-
     onKeyDown(evt);
   }
-
+  const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
+  if (v12DefaultIcons) {
+    if (!Icon) {
+      Icon = ArrowRight;
+    }
+    if (disabled) {
+      Icon = Error;
+    }
+  }
+  const iconClasses = cx({
+    [`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
+    [`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
+  });
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
@@ -99,7 +107,10 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
-  }, rest), children);
+  }, rest), children, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    className: iconClasses,
+    "aria-hidden": "true"
+  }));
 });
 ClickableTile.displayName = 'ClickableTile';
 ClickableTile.propTypes = {
@@ -107,47 +118,44 @@ ClickableTile.propTypes = {
    * The child nodes.
    */
   children: PropTypes.node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Boolean for whether a tile has been clicked.
    */
   clicked: PropTypes.bool,
-
   /**
    * Specify whether the ClickableTile should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * The href for the link.
    */
   href: PropTypes.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(PropTypes.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.func,
-
   /**
    * Specify the function to run when the ClickableTile is interacted with via a keyboard
    */
   onKeyDown: PropTypes.func,
-
   /**
    * The rel property for the link.
    */
-  rel: PropTypes.string
+  rel: PropTypes.string,
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 const SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableTile(_ref3, ref) {
   let {
@@ -175,46 +183,43 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     [`${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 (matches(evt, [Enter, 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.createElement("div", _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,
@@ -236,63 +241,51 @@ SelectableTile.propTypes = {
    * The child nodes.
    */
   children: PropTypes.node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the SelectableTile should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * The ID of the `<input>`.
    */
   id: PropTypes.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(PropTypes.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.string,
-
   /**
    * The empty handler of the `<input>`.
    */
   onChange: PropTypes.func,
-
   /**
    * Specify the function to run when the SelectableTile is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Specify the function to run when the SelectableTile is interacted with via a keyboard
    */
   onKeyDown: PropTypes.func,
-
   /**
    * `true` to select this tile.
    */
   selected: PropTypes.bool,
-
   /**
    * Specify the tab index of the wrapper element
    */
   tabIndex: PropTypes.number,
-
   /**
    * The `title` of the `<input>`.
    */
   title: PropTypes.string,
-
   /**
    * The value of the `<input>`.
    */
@@ -330,37 +323,30 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   const tile = useRef(null);
   const prefix = usePrefix();
   const ref = 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 (matches(evt, [Enter, Space])) {
@@ -368,11 +354,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
       }
     }
   }
-
   function getChildren() {
     return React__default.Children.toArray(children);
   }
-
   const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
@@ -465,58 +449,47 @@ ExpandableTile.propTypes = {
    * The child nodes.
    */
   children: PropTypes.node,
-
   /**
    * The CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * `true` if the tile is expanded.
    */
   expanded: PropTypes.bool,
-
   /**
    * An ID that can be provided to aria-labelledby
    */
   id: PropTypes.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(PropTypes.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.func,
-
   /**
    * optional handler to trigger a function when a key is pressed
    */
   onKeyUp: PropTypes.func,
-
   /**
    * The `tabindex` attribute.
    */
   tabIndex: PropTypes.number,
-
   /**
    * The description of the "collapsed" icon that can be read by screen readers.
    */
   tileCollapsedIconText: PropTypes.string,
-
   /**
    * When "collapsed", a label to appear next to the chevron (e.g., "View more").
    */
   tileCollapsedLabel: PropTypes.string,
-
   /**
    * The description of the "expanded" icon that can be read by screen readers.
    */
   tileExpandedIconText: PropTypes.string,
-
   /**
    * When "expanded", a label to appear next to the chevron (e.g., "View less").
    */

package/es/components/TileGroup/TileGroup.js

@@ -15,12 +15,10 @@ import { PrefixContext } from '../../internal/usePrefix.js';
 class TileGroup extends React__default.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       selected: this.props.valueSelected || this.props.defaultSelected || null,
       prevValueSelected: this.props.valueSelected
     });
-
     _defineProperty(this, "getRadioTiles", () => {
       const childrenArray = React__default.Children.toArray(this.props.children);
       const children = childrenArray.map(tileRadio => {
@@ -29,12 +27,10 @@ class TileGroup extends React__default.Component {
           ...other
         } = tileRadio.props;
         /* istanbul ignore if */
-
         if (typeof tileRadio.props.checked !== 'undefined') {
           process.env.NODE_ENV !== "production" ? 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.createElement(RadioTile, _extends({}, other, {
           name: this.props.name,
           key: value,
@@ -45,7 +41,6 @@ class TileGroup extends React__default.Component {
       });
       return children;
     });
-
     _defineProperty(this, "handleChange", (newSelection, value, evt) => {
       if (newSelection !== this.state.selected) {
         this.setState({
@@ -54,7 +49,6 @@ class TileGroup extends React__default.Component {
         this.props.onChange(newSelection, this.props.name, evt);
       }
     });
-
     _defineProperty(this, "renderLegend", legend => {
       if (legend) {
         return /*#__PURE__*/React__default.createElement("legend", {
@@ -63,7 +57,6 @@ class TileGroup extends React__default.Component {
       }
     });
   }
-
   static getDerivedStateFromProps(_ref, state) {
     let {
       valueSelected,
@@ -77,7 +70,6 @@ class TileGroup extends React__default.Component {
       prevValueSelected: valueSelected
     };
   }
-
   render() {
     const {
       context: prefix
@@ -92,58 +84,45 @@ class TileGroup extends React__default.Component {
       disabled: disabled
     }, this.renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, this.getRadioTiles()));
   }
-
 }
-
 _defineProperty(TileGroup, "contextType", PrefixContext);
-
 _defineProperty(TileGroup, "propTypes", {
   /**
    * Provide a collection of <RadioTile> components to render in the group
    */
   children: PropTypes.node,
-
   /**
    * Provide an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify the the value of <RadioTile> to be selected by default
    */
   defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * Specify whether the group is disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide an optional legend for this group
    */
   legend: PropTypes.string,
-
   /**
    * Specify the name of the underlying `<input>` nodes
    */
   name: PropTypes.string.isRequired,
-
   /**
    * Provide an optional `onChange` hook that is called whenever the value of
    * the group changes
    */
   onChange: PropTypes.func,
-
   /**
    * Specify the value that is currently selected in the group
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 });
-
 _defineProperty(TileGroup, "defaultProps", {
-  onChange:
-  /* istanbul ignore next */
-  () => {}
+  onChange: /* istanbul ignore next */() => {}
 });
 
 export { TileGroup as default };

package/es/components/TimePicker/TimePicker.js

@@ -38,39 +38,32 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
   const prefix = usePrefix();
   const [isValue, setValue] = React__default.useState(value);
   const [prevValue, setPrevValue] = React__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(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [className], {
     [`${prefix}--text-input--light`]: light
   });
@@ -95,20 +88,19 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
   const error = invalid ? /*#__PURE__*/React__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();
         }
@@ -116,7 +108,8 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     };
     const mappedChildren = React__default.Children.map(children, pickerSelect => {
       const item = pickerSelect;
-      return /*#__PURE__*/React__default.cloneElement(item, { ...item.props,
+      return /*#__PURE__*/React__default.cloneElement(item, {
+        ...item.props,
         disabled: disabled,
         readOnly: readOnly,
         ...readOnlyEventHandlers
@@ -124,7 +117,6 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     });
     return mappedChildren;
   }
-
   const readOnlyProps = {
     readOnly: readOnly
   };
@@ -155,96 +147,78 @@ TimePicker.propTypes = {
    * Pass in the children that will be rendered next to the form control
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify whether you want the underlying label to be visually hidden
    */
   hideLabel: PropTypes.bool,
-
   /**
    * Specify a custom `id` for the `<input>`
    */
   id: PropTypes.string.isRequired,
-
   /**
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */
   invalidText: PropTypes.node,
-
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes.node,
-
   /**
    * The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
    */
   light: deprecate(PropTypes.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.number,
-
   /**
    * Optionally provide an `onBlur` handler that is called whenever the
    * `<input>` loses focus
    */
   onBlur: PropTypes.func,
-
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated
    */
   onChange: PropTypes.func,
-
   /**
    * Optionally provide an `onClick` handler that is called whenever the
    * `<input>` is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Specify the regular expression working as the pattern of the time string in `<input>`
    */
   pattern: PropTypes.string,
-
   /**
    * Specify the placeholder attribute for the `<input>`
    */
   placeholder: PropTypes.string,
-
   /**
    * Specify whether the TimePicker should be read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify the size of the Time Picker.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Specify the type of the `<input>`
    */
   type: PropTypes.string,
-
   /**
    * Specify the value of the `<input>`
    */

package/es/components/TimePickerSelect/TimePickerSelect.js

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