Merge branch 'main' into fluid-datepicker-skeleton

examples/codesandbox-styles/package.json

@@ -1,15 +1,15 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.20.0-rc.1",
+  "version": "0.20.0-rc.2",
   "scripts": {
     "develop": "vite"
   },
   "devDependencies": {
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "sass": "^1.51.0"
   }
 }

examples/codesandbox-with-sass-compilation/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox-with-sass-compilation",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0-rc.2",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/codesandbox/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0-rc.2",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/custom-theme/package.json

@@ -1,14 +1,14 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0-rc.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/incremental-migration/package.json

@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration",
   "private": true,
-  "version": "0.17.0-rc.1",
+  "version": "0.17.0-rc.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "carbon-components": "^10.57.0",
     "carbon-components-react": "^7.57.0",
     "carbon-icons": "^7.0.7",

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0-rc.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.17.0-rc.1",
+  "version": "0.17.0-rc.2",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"

examples/vite/package.json

@@ -1,14 +1,14 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.15.0-rc.1",
+  "version": "0.15.0-rc.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

package.json

@@ -30,7 +30,7 @@
   },
   "resolutions": {
     "@types/react": "~17.0.2",
-    "@types/prop-types": "15.7.4",
+    "@types/prop-types": "15.7.5",
     "ast-types": "^0.14.0",
     "node-sass": "^6.0.0",
     "react": "~17.0.2",

packages/carbon-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "8.17.0-rc.1",
+  "version": "8.17.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,8 +39,8 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/react": "^1.17.0-rc.1",
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/react": "^1.17.0-rc.2",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0"
   },
   "devDependencies": {

packages/carbon-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "11.17.0-rc.1",
+  "version": "11.17.0-rc.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0"
   },
   "devDependencies": {

packages/icon-build-helpers/package.json

@@ -31,7 +31,7 @@
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/icon-helpers": "^10.34.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.0",
     "browserslist-config-carbon": "^11.0.0",
     "change-case": "^4.1.1",
     "core-js": "^3.16.0",

packages/layout/examples/preview/yarn.lock

@@ -4137,13 +4137,13 @@ fsevents@~2.3.2:
   linkType: hard
 
 "loader-utils@npm:^1.1.0":
-  version: 1.4.0
-  resolution: "loader-utils@npm:1.4.0"
+  version: 1.4.1
+  resolution: "loader-utils@npm:1.4.1"
   dependencies:
     big.js: ^5.2.2
     emojis-list: ^3.0.0
     json5: ^1.0.1
-  checksum: d150b15e7a42ac47d935c8b484b79e44ff6ab4c75df7cc4cb9093350cf014ec0b17bdb60c5d6f91a37b8b218bd63b973e263c65944f58ca2573e402b9a27e717
+  checksum: ea0b648cba0194e04a90aab6270619f0e35be009e33a443d9e642e93056cd49e6ca4c9678bd1c777a2392551bc5f4d0f24a87f5040608da1274aa84c6eebb502
   languageName: node
   linkType: hard
 

packages/pictograms/examples/preview/yarn.lock

@@ -4271,13 +4271,13 @@ fsevents@~2.3.2:
   linkType: hard
 
 "loader-utils@npm:^1.1.0":
-  version: 1.4.0
-  resolution: "loader-utils@npm:1.4.0"
+  version: 1.4.1
+  resolution: "loader-utils@npm:1.4.1"
   dependencies:
     big.js: ^5.2.2
     emojis-list: ^3.0.0
     json5: ^1.0.1
-  checksum: d150b15e7a42ac47d935c8b484b79e44ff6ab4c75df7cc4cb9093350cf014ec0b17bdb60c5d6f91a37b8b218bd63b973e263c65944f58ca2573e402b9a27e717
+  checksum: ea0b648cba0194e04a90aab6270619f0e35be009e33a443d9e642e93056cd49e6ca4c9678bd1c777a2392551bc5f4d0f24a87f5040608da1274aa84c6eebb502
   languageName: node
   linkType: hard
 

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

@@ -4929,6 +4929,9 @@ Map {
       "open": Object {
         "type": "bool",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "selectedItems": Object {
         "type": "array",
       },

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.17.0-rc.1",
+  "version": "1.17.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/icons-react": "^11.10.0",
     "@carbon/layout": "^11.7.0",
-    "@carbon/styles": "^1.17.0-rc.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",

packages/react/src/components/DatePicker/DatePicker.js

@@ -350,6 +350,10 @@ const DatePicker = React.forwardRef(function DatePicker(
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
+      if (match(event, keys.Escape)) {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (match(event, keys.ArrowDown)) {
         const {
           calendarContainer,
@@ -370,6 +374,10 @@ const DatePicker = React.forwardRef(function DatePicker(
     }
 
     function handleOnChange() {
+      if (datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (start.value !== '') {
         return;
       }
@@ -446,7 +454,7 @@ const DatePicker = React.forwardRef(function DatePicker(
 
   useEffect(() => {
     if (calendarRef.current && disable) {
-      calendarRef.current.set('disbale', disable);
+      calendarRef.current.set('disable', disable);
     }
   }, [disable]);
 

packages/react/src/components/Grid/FlexGrid.stories.js

@@ -4,7 +4,7 @@ import { FlexGrid, Row, Column } from './';
 import mdx from './FlexGrid.mdx';
 
 export default {
-  title: 'Components/FlexGrid',
+  title: 'Elements/FlexGrid',
   component: FlexGrid,
   subcomponents: {
     Row,
@@ -323,6 +323,12 @@ Playground.argTypes = {
     },
     defaultValue: 'div',
   },
+  children: {
+    control: false,
+  },
+  className: {
+    control: false,
+  },
   fullWidth: {
     control: {
       type: 'boolean',

packages/react/src/components/Grid/Grid.stories.js

@@ -289,6 +289,12 @@ Playground.argTypes = {
     },
     defaultValue: 'div',
   },
+  children: {
+    control: false,
+  },
+  className: {
+    control: false,
+  },
   fullWidth: {
     control: {
       type: 'boolean',

packages/react/src/components/Icons/Icons.stories.js

@@ -34,3 +34,15 @@ export const Default = () => {
     </>
   );
 };
+
+export const Playground = (args) => {
+  return <Bee {...args} />;
+};
+
+Playground.argTypes = {
+  size: {
+    options: ['16', '20', '32'],
+    control: { type: 'select' },
+    defaultValue: 16,
+  },
+};

packages/react/src/components/Icons/Icons.stories.scss

@@ -6,7 +6,19 @@
 //
 .demo-icon-example {
   display: flex;
-  width: 10rem;
+  width: 15rem;
   justify-content: space-between;
   margin: 2rem;
 }
+
+.demo-icon-example:nth-child(1) svg {
+  min-width: 1rem;
+}
+
+.demo-icon-example:nth-child(2) svg {
+  min-width: 1.25rem;
+}
+
+.demo-icon-example:nth-child(3) svg {
+  min-width: 2rem;
+}

packages/react/src/components/ListBox/ListBoxSelection.js

@@ -23,6 +23,7 @@ function ListBoxSelection({
   translateWithId: t,
   disabled,
   onClearSelection,
+  readOnly,
 }) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--list-box__selection`, {
@@ -31,7 +32,7 @@ function ListBoxSelection({
   });
   const handleOnClick = (event) => {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
     clearSelection(event);
@@ -41,7 +42,7 @@ function ListBoxSelection({
   };
   const handleOnKeyDown = (event) => {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -75,7 +76,8 @@ function ListBoxSelection({
         onKeyDown={handleOnKeyDown}
         disabled={disabled}
         aria-label={t('clear.all')}
-        title={description}>
+        title={description}
+        aria-disabled={readOnly ? true : undefined}>
         <Close />
       </div>
     </div>
@@ -134,6 +136,11 @@ ListBoxSelection.propTypes = {
    */
   onKeyDown: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.