Merge branch 'main' into refactor/update-use-controllable-state

.all-contributorsrc

@@ -848,6 +848,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "dezkareid",
+      "name": "Joel Humberto Gómez Paredes",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1269896?v=4",
+      "profile": "https://github.com/dezkareid",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -194,6 +194,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/motou"><img src="https://avatars.githubusercontent.com/u/1215956?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zhen Wang</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=motou" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=motou" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Kman316"><img src="https://avatars.githubusercontent.com/u/25666525?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cathal Kenneally</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kman316" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dezkareid"><img src="https://avatars.githubusercontent.com/u/1269896?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joel Humberto Gómez Paredes</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=dezkareid" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -318,7 +318,6 @@ Map {
     "defaultProps": Object {
       "indeterminate": false,
       "onChange": [Function],
-      "onClick": [Function],
     },
     "propTypes": Object {
       "checked": Object {
@@ -350,9 +349,6 @@ Map {
       "onChange": Object {
         "type": "func",
       },
-      "onClick": Object {
-        "type": "func",
-      },
       "title": Object {
         "type": "string",
       },
@@ -4311,6 +4307,7 @@ Map {
       "light": false,
       "locale": "en",
       "open": false,
+      "selectedItems": null,
       "selectionFeedback": "top-after-reopen",
       "sortItems": [Function],
       "title": false,
@@ -4507,6 +4504,9 @@ Map {
       "open": Object {
         "type": "bool",
       },
+      "selectedItems": Object {
+        "type": "array",
+      },
       "selectionFeedback": Object {
         "args": Array [
           Array [

packages/react/src/components/Checkbox/Checkbox-story.js

@@ -102,7 +102,6 @@ const props = () => ({
   hideLabel: boolean('No label (hideLabel)', false),
   wrapperClassName: text('Wrapper CSS class name (wrapperClassName)', ''),
   onChange: action('onChange'),
-  onClick: action('onClick'),
 });
 
 export const playground = () => (

packages/react/src/components/Checkbox/Checkbox.js

@@ -19,7 +19,6 @@ const Checkbox = React.forwardRef(function Checkbox(
     id,
     labelText,
     onChange,
-    onClick,
     indeterminate,
     hideLabel,
     wrapperClassName,
@@ -45,15 +44,7 @@ const Checkbox = React.forwardRef(function Checkbox(
   );
 
   return (
-    /* 
-      The a11y rules below are disabled because <div> element has checkbox 
-      input and label elements as children that allows keyboard interaction. 
-      The onClick handler facilitates consumers' ability to stop click events 
-      from bubbling beyond the checkbox without having to implement their own 
-      wrapper element around <Checkbox>.
-    */
-    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-    <div className={wrapperClasses} onClick={(evt) => onClick(evt)}>
+    <div className={wrapperClasses}>
       <input
         {...other}
         type="checkbox"
@@ -132,14 +123,6 @@ Checkbox.propTypes = {
    */
   onChange: PropTypes.func,
 
-  /**
-   * Provide an optional click handler that is applied to the wrapper div
-   * containing both the input and the span label. As such, this will be
-   * called twice for every click - once for the input, a second time for the label.
-   * Receives the dom event as its only argument.
-   */
-  onClick: PropTypes.func,
-
   /**
    * Specify a title for the <label> node for the Checkbox
    */
@@ -156,7 +139,6 @@ Checkbox.propTypes = {
 
 Checkbox.defaultProps = {
   onChange: () => {},
-  onClick: () => {},
   indeterminate: false,
 };
 

packages/react/src/components/MultiSelect/MultiSelect-story.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -20,6 +20,7 @@ import MultiSelect from '../MultiSelect';
 import FilterableMultiSelect from '../MultiSelect/FilterableMultiSelect';
 import Checkbox from '../Checkbox';
 import mdx from './MultiSelect.mdx';
+import Button from '../Button';
 
 const items = [
   {
@@ -143,6 +144,44 @@ export const Default = withReadme(readme, () => {
   );
 });
 
+export const controlled = withReadme(readme, () => {
+  const {
+    listBoxMenuIconTranslationIds,
+    selectionFeedback,
+    ...multiSelectProps
+  } = props();
+  const [selectedItems, setSelectedItems] = useState([]);
+  const onChange = useCallback(({ selectedItems: newSelectedItems }) => {
+    setSelectedItems(newSelectedItems);
+  }, []);
+
+  return (
+    <div style={{ width: 300 }}>
+      <MultiSelect
+        {...multiSelectProps}
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+        selectionFeedback={selectionFeedback}
+        onChange={onChange}
+        selectedItems={selectedItems}
+      />
+      <Button
+        onClick={() => {
+          setSelectedItems([{ id: 'downshift-1-item-0', text: 'Option 1' }]);
+        }}>
+        click to select only Option 1
+      </Button>
+      <Button
+        onClick={() => {
+          setSelectedItems([]);
+        }}>
+        click to clear selections
+      </Button>
+    </div>
+  );
+});
+
 export const ItemToElement = withReadme(readme, () => {
   return (
     <div style={{ width: 300 }}>

packages/react/src/components/MultiSelect/MultiSelect.js

@@ -68,6 +68,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     onChange,
     onMenuChange,
     direction,
+    selectedItems: selected,
   },
   ref
 ) {
@@ -85,6 +86,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     disabled,
     initialSelectedItems,
     onChange,
+    selectedItems: selected,
   });
 
   const {
@@ -431,6 +433,11 @@ MultiSelect.propTypes = {
    */
   open: PropTypes.bool,
 
+  /**
+   * For full control of the selected items
+   */
+  selectedItems: PropTypes.array,
+
   /**
    * Specify feedback (mode) of the selection.
    * `top`: selected item jumps to top
@@ -491,6 +498,7 @@ MultiSelect.defaultProps = {
   direction: 'bottom',
   clearSelectionText: 'To clear selection, press Delete or Backspace,',
   clearSelectionDescription: 'Total items selected: ',
+  selectedItems: null,
 };
 
 export default MultiSelect;

packages/react/src/components/Search/next/Search.stories.js

@@ -23,6 +23,19 @@ export const Default = () => (
   />
 );
 
+export const Disabled = () => (
+  <Search
+    disabled
+    size="lg"
+    defaultValue="A default value"
+    labelText="Search"
+    closeButtonLabelText="Clear search input"
+    id="search-1"
+    onChange={() => {}}
+    onKeyDown={() => {}}
+  />
+);
+
 export const Expandable = () => (
   <ExpandableSearch
     size="lg"

packages/react/src/components/Slider/Slider.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import throttle from 'lodash.throttle';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 import * as keys from '../../internal/keyboard/keys';
 import { matches } from '../../internal/keyboard/match';
@@ -168,7 +169,9 @@ export default class Slider extends PureComponent {
     minLabel: '',
     maxLabel: '',
     inputType: 'number',
-    ariaLabelInput: 'Slider number input',
+    ariaLabelInput: FeatureFlags.enabled('enable-v11-release')
+      ? undefined
+      : 'Slider number input',
     light: false,
   };
 
@@ -600,7 +603,10 @@ export default class Slider extends PureComponent {
             ? classNames(`${prefix}--form-item`, className)
             : `${prefix}--form-item`
         }>
-        <label htmlFor={id} className={labelClasses} id={labelId}>
+        <label
+          htmlFor={`${id}-input-for-slider`}
+          className={labelClasses}
+          id={labelId}>
           {labelText}
         </label>
         <div className={`${prefix}--slider-container`}>
@@ -651,7 +657,7 @@ export default class Slider extends PureComponent {
             name={name}
             className={inputClasses}
             value={value}
-            aria-label={ariaLabelInput}
+            aria-label={ariaLabelInput ? ariaLabelInput : null}
             disabled={disabled}
             required={required}
             min={min}

packages/react/src/components/Tooltip/Tooltip-story.js

@@ -161,8 +161,8 @@ export default {
 
 export const DefaultBottom = () => (
   <div style={containerStyles}>
-    <Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
-      <p id="tooltip-body">
+    <Tooltip {...props.withIcon()}>
+      <p>
         This is some tooltip text. This box shows the maximum amount of text
         that should appear inside. If more room is needed please use a modal
         instead.

packages/react/src/components/Tooltip/Tooltip.js

@@ -671,7 +671,9 @@ class Tooltip extends Component {
                 className={`${prefix}--tooltip__trigger`}
                 {...properties}
                 ref={refProp}
-                aria-describedby={tooltipBodyId}>
+                aria-describedby={
+                  tooltipBodyId || properties['aria-describedby']
+                }>
                 <IconCustomElement {...iconProperties} />
               </div>
             </div>
@@ -681,7 +683,9 @@ class Tooltip extends Component {
               className={triggerClasses}
               ref={refProp}
               {...properties}
-              aria-describedby={tooltipBodyId}>
+              aria-describedby={
+                tooltipBodyId || properties['aria-describedby']
+              }>
               {triggerText}
             </div>
           )}