@carbon/react 1.56.0-rc.1 → 1.57.0-rc.0

package/es/components/RadioTile/RadioTile.d.ts

@@ -50,6 +50,10 @@ export interface RadioTileProps {
      * Specify the value of the underlying `<input>`.
      */
     value: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/es/components/RadioTile/RadioTile.js

@@ -33,6 +33,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     id,
     onChange = noopFn,
     tabIndex = 0,
+    required,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -74,7 +75,8 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
     value: value,
-    ref: ref
+    ref: ref,
+    required: required
   }), /*#__PURE__*/React__default.createElement("label", _extends({}, rest, {
     htmlFor: inputId,
     className: className
@@ -120,6 +122,10 @@ RadioTile.propTypes = {
    * the underlying `<input>` changes.
    */
   onChange: PropTypes.func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes.bool,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/es/components/Slider/Slider.js

@@ -427,6 +427,10 @@ class Slider extends PureComponent {
       }
     });
     _defineProperty(this, "processNewInputValue", input => {
+      this.setState({
+        correctedValue: null,
+        correctedPosition: null
+      });
       const targetValue = Number.parseFloat(input.value);
       const validity = !isNaN(targetValue);
 
@@ -507,7 +511,7 @@ class Slider extends PureComponent {
       if (clientX) {
         const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
         return leftOffset / width;
-      } else if (value && range) {
+      } else if (value !== null && value !== undefined && range) {
         // Prevent NaN calculation if the range is 0.
         return range === 0 ? 0 : (value - this.props.min) / range;
       }
@@ -978,8 +982,8 @@ class Slider extends PureComponent {
       correctedPosition,
       isRtl
     } = this.state;
-    const showWarning = !readOnly && warn && isValid || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER;
-    const showWarningUpper = !readOnly && warn && (twoHandles ? isValidUpper : isValid) || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER);
+    const showWarning = !readOnly && warn || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = !readOnly && warn || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {
@@ -1089,7 +1093,7 @@ class Slider extends PureComponent {
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
         label: `${value}`,
-        align: twoHandles ? 'top-right' : 'top'
+        align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
@@ -1108,7 +1112,7 @@ class Slider extends PureComponent {
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${valueUpper}`,
-        align: "top-left"
+        align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: upperThumbClasses,
         role: "slider",

package/es/components/StructuredList/StructuredList.js

@@ -17,7 +17,7 @@ import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
 import { Text } from '../Text/Text.js';
 
-var _StructuredListCell, _RadioButtonChecked, _RadioButton;
+var _StructuredListCell;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
@@ -192,7 +192,11 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React__default.createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default.createElement(RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default.createElement(RadioButton, null))), children));
+  }, selection && /*#__PURE__*/React__default.createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React__default.createElement(RadioButtonChecked, {
+    className: `${prefix}--structured-list__icon`
+  }) : /*#__PURE__*/React__default.createElement(RadioButton, {
+    className: `${prefix}--structured-list__icon`
+  })), children));
 }
 StructuredListRow.propTypes = {
   /**

package/es/components/TextInput/PasswordInput.js

@@ -14,6 +14,8 @@ import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -38,7 +40,7 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     size = 'md',
     showPasswordLabel = 'Show password',
     tooltipPosition = 'bottom',
-    tooltipAlignment = 'center',
+    tooltipAlignment = 'end',
     type = 'password',
     warn = false,
     warnText,
@@ -127,11 +129,25 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
   }) : /*#__PURE__*/React__default.createElement(View, {
     className: `${prefix}--icon-visibility-on`
   });
-  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
-    [`${prefix}--btn--disabled`]: disabled,
+  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  let align = undefined;
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    if (tooltipAlignment === 'center') {
+      align = tooltipPosition;
+    }
+    if (tooltipAlignment === 'end') {
+      align = `${tooltipPosition}-right`;
+    }
+    if (tooltipAlignment === 'start') {
+      align = `${tooltipPosition}-left`;
+    }
+  }
+  if (tooltipPosition === 'right' || tooltipPosition === 'left') {
+    align = tooltipPosition;
+  }
   const input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,
@@ -145,14 +161,16 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--text-input__divider`
-  }), /*#__PURE__*/React__default.createElement("button", {
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    align: align,
+    className: `${prefix}--toggle-password-tooltip`,
+    label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
+  }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
-  }, !disabled && /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--assistive-text`
-  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+  }, passwordVisibilityIcon)));
   useEffect(() => {
     setInputType(type);
   }, [type]);

package/es/components/TileGroup/TileGroup.d.ts

@@ -40,6 +40,10 @@ export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, Exc
      * Specify the value that is currently selected in the group
      */
     valueSelected?: string | number;
+    /**
+     * `true` to specify if input selection in group is required.
+     */
+    required?: boolean;
 }
 declare const TileGroup: {
     (props: any): import("react/jsx-runtime").JSX.Element;
@@ -73,6 +77,10 @@ declare const TileGroup: {
          * the group changes
          */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to specify if input selection in group is required.
+         */
+        required: PropTypes.Requireable<boolean>;
         /**
          * Specify the value that is currently selected in the group
          */

package/es/components/TileGroup/TileGroup.js

@@ -21,7 +21,8 @@ const TileGroup = props => {
     legend,
     name,
     onChange = noopFn,
-    valueSelected
+    valueSelected,
+    required
   } = props;
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
@@ -45,6 +46,7 @@ const TileGroup = props => {
             ...otherProps
           } = child.props;
           return /*#__PURE__*/React__default.createElement(RadioTile, _extends({}, otherProps, {
+            required: required,
             name: name,
             key: value,
             value: value,
@@ -113,6 +115,10 @@ TileGroup.propTypes = {
    * the group changes
    */
   onChange: PropTypes.func,
+  /**
+   * `true` to specify if input selection in group is required.
+   */
+  required: PropTypes.bool,
   /**
    * Specify the value that is currently selected in the group
    */

package/es/index.js

@@ -179,7 +179,6 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
-export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
@@ -204,6 +203,7 @@ export { default as unstable__ChatButton } from './components/ChatButton/ChatBut
 export { default as unstable__ChatButtonSkeleton } from './components/ChatButton/ChatButton.Skeleton.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
+export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';
 export { Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';

package/es/internal/Selection.js

@@ -40,6 +40,9 @@ function useSelection(_ref2) {
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
   const isControlled = !!controlledItems;
   const [selectedItems, setSelectedItems] = useState(isControlled ? controlledItems : uncontrolledItems);
+  useEffect(() => {
+    setSelectedItems(isControlled ? controlledItems : uncontrolledItems);
+  }, [isControlled, controlledItems, uncontrolledItems]);
   useEffect(() => {
     callOnChangeHandler({
       isControlled,
@@ -74,7 +77,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: setSelectedItems([])
+      selectedItems: []
     });
   }, [disabled, isControlled]);
   useEffect(() => {

package/lib/components/ContainedList/ContainedList.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 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 React, { ReactNode } from 'react';
+declare const variants: readonly ["on-page", "disclosed"];
+type Variants = (typeof variants)[number];
+interface ContainedListProps {
+    /**
+     * A slot for a possible interactive element to render.
+     */
+    action?: ReactNode;
+    /**
+     * A collection of ContainedListItems to be rendered in the ContainedList
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the dividing lines in between list items should be inset.
+     */
+    isInset?: boolean;
+    /**
+     * The kind of ContainedList you want to display
+     */
+    kind?: Variants;
+    /**
+     * A label describing the contained list.
+     */
+    label: string | ReactNode;
+    /**
+     * Specify the size of the contained list.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const ContainedList: React.FC<ContainedListProps>;
+export default ContainedList;

package/lib/components/ContainedList/ContainedList.js

@@ -47,7 +47,7 @@ function renderChildren(children) {
   }
   return children;
 }
-function ContainedList(_ref) {
+const ContainedList = _ref => {
   let {
     action,
     children,
@@ -67,7 +67,20 @@ function ContainedList(_ref) {
     [`${prefix}--layout--size-${size}`]: size
   }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
-  const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
+  function isSearchAction(action) {
+    if (! /*#__PURE__*/React__default["default"].isValidElement(action)) {
+      return false;
+    }
+    const actionTypes = ['Search', 'ExpandableSearch'];
+    let actionType = '';
+    if (typeof action.type === 'string') {
+      actionType = action.type;
+    } else {
+      actionType = action.type.displayName || '';
+    }
+    return actionTypes.includes(actionType);
+  }
+  const isActionSearch = isSearchAction(action);
   const renderedChildren = renderChildren(children);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classes
@@ -96,7 +109,7 @@ function ContainedList(_ref) {
     role: "list",
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
-}
+};
 ContainedList.propTypes = {
   /**
    * A slot for a possible interactive element to render.
@@ -127,5 +140,6 @@ ContainedList.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
 };
+var ContainedList$1 = ContainedList;
 
-exports["default"] = ContainedList;
+exports["default"] = ContainedList$1;

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 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 React, { type ComponentType, type FunctionComponent, ReactNode } from 'react';
+interface ContainedListItemProps {
+    /**
+     * A slot for a possible interactive element to render within the item.
+     */
+    action?: ReactNode;
+    /**
+     * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Whether this item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Provide an optional function to be called when the item is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Provide an optional icon to render in front of the item's content.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+}
+declare const ContainedListItem: React.FC<ContainedListItemProps>;
+export default ContainedListItem;

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -22,7 +22,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ContainedListItem(_ref) {
+const ContainedListItem = _ref => {
   let {
     action,
     children,
@@ -58,7 +58,7 @@ function ContainedListItem(_ref) {
     },
     className: `${prefix}--contained-list-item__action`
   }, action));
-}
+};
 ContainedListItem.propTypes = {
   /**
    * A slot for a possible interactive element to render within the item.
@@ -83,7 +83,9 @@ ContainedListItem.propTypes = {
   /**
    * Provide an optional icon to render in front of the item's content.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
+var ContainedListItem$1 = ContainedListItem;
 
-exports["default"] = ContainedListItem;
+exports["default"] = ContainedListItem$1;

package/lib/components/DataTable/TableToolbarSearch.js

@@ -108,7 +108,7 @@ const TableToolbarSearch = _ref => {
     disabled: disabled,
     className: searchClasses,
     value: value,
-    id: typeof id !== 'undefined' ? id : uniqueId.toString(),
+    id: typeof id !== 'undefined' ? id : `table-toolbar-search-${uniqueId.toString()}`,
     labelText: labelText || t('carbon.table.toolbar.search.label'),
     placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
     onChange: onChange,

package/lib/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,9 +6,5 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ExpandableSearch {
-    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
-    var displayName: string;
-}
+declare const ExpandableSearch: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default ExpandableSearch;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -16,6 +16,7 @@ var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -24,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ExpandableSearch(_ref) {
+const ExpandableSearch = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {
     onBlur,
     onChange,
@@ -70,14 +71,14 @@ function ExpandableSearch(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: searchRef,
+    ref: mergeRefs["default"](searchRef, forwardedRef),
     className: classes,
     onBlur: events.composeEventHandlers([onBlur, handleBlur]),
     onChange: events.composeEventHandlers([onChange, handleChange]),
     onExpand: events.composeEventHandlers([onExpand, handleExpand]),
     onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown])
   }));
-}
+});
 ExpandableSearch.propTypes = Search["default"].propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';