diff --git a/.all-contributorsrc b/.all-contributorsrc index 18becc6e8098..32de2ff27220 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1625,6 +1625,16 @@ "doc" ] }, + { + "login": "Neues", + "name": "Noah Sgorbati", + "avatar_url": "https://avatars.githubusercontent.com/u/9409245?v=4", + "profile": "https://github.com/Neues", + "contributions": [ + "code", + "doc" + ] + }, { "login": "divya-281", "name": "Divya G", diff --git a/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml b/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml index e3d7b79c705b..a57a47c32726 100644 --- a/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml +++ b/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml @@ -1,7 +1,8 @@ name: Accessibility Issue ♿ description: Report an accessibility or usability issue. title: '[a11y]: ' -labels: 'type: a11y ♿' +type: 'bug' +labels: ['type: a11y ♿', 'type: bug 🐛'] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml index 7ab41c9982f0..c48ab4c3de35 100644 --- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml +++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml @@ -2,6 +2,7 @@ name: Bug report 🐛 description: Something not working as expected? This is the place to report your issue. title: '[Bug]: ' +type: 'bug' labels: 'type: bug 🐛' body: - type: markdown diff --git a/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml b/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml index b203f018f945..e72b1e55fe39 100644 --- a/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml +++ b/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml @@ -1,6 +1,7 @@ name: Design defect 🎨 description: Report a visual design issue title: '[Bug]: ' +type: 'bug' labels: 'type: bug 🐛' body: - type: markdown diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml index 37a93001e14d..6b39354713d5 100644 --- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml +++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml @@ -1,6 +1,7 @@ name: Feature request or enhancement 💡 description: Suggest an idea for this project. title: '[Feature Request]: ' +type: 'enhancement' labels: 'type: enhancement 💡' body: - type: markdown diff --git a/.github/ISSUE_TEMPLATE/QUESTION.yaml b/.github/ISSUE_TEMPLATE/QUESTION.yaml index 0ec1683555b8..7757cd7737a6 100644 --- a/.github/ISSUE_TEMPLATE/QUESTION.yaml +++ b/.github/ISSUE_TEMPLATE/QUESTION.yaml @@ -23,10 +23,10 @@ body: value: '- `#carbon-design-system` for questions about the Design System.' - type: markdown attributes: - value: '- `#carbon-components` for questions about component styles.' + value: '- `#carbon-react` for questions about `@carbon/react`.' - type: markdown attributes: - value: '- `#carbon-react` for questions about our React components' + value: '- `#carbon-web-components` for questions about `@carbon/web-components`.' - type: markdown attributes: value: diff --git a/.github/ISSUE_TEMPLATE/USER_STORY.yaml b/.github/ISSUE_TEMPLATE/USER_STORY.yaml deleted file mode 100644 index 858c33d6c3f2..000000000000 --- a/.github/ISSUE_TEMPLATE/USER_STORY.yaml +++ /dev/null @@ -1,56 +0,0 @@ -name: (Carbon core team ONLY) User story -description: - Write a user story to begin solving their needs. -title: '[YOUR TITLE]: Brief description' -body: - - type: markdown - attributes: - value: "Avoid any type of solutions in this user story." - - type: markdown - attributes: - value: "Consider the following when writing Acceptance criteria for this story: - - - Each product backlog item or user story should have at least one Acceptance criteria. - - - Acceptance criteria defines a deliverable that can be completed in a single sprint. - - - Each Acceptance criterion is independently testable. - - - Include functional as well as non-functional criteria – when relevant. - - - Team members write Acceptance criteria and the Product Owner verifies it." - - type: textarea - id: user-story - attributes: - label: User story - value: "> As a `[user role below]`: - - - > I need to: - - - > so that I can:" - validations: - required: true - - type: textarea - id: additional-information - attributes: - label: Additional information - value: "- _{{user research}}_ - -- _{{user insights}}_ - -- _{{user metrics}}_" - validations: - required: true - - type: textarea - id: acceptance-criteria - attributes: - label: Acceptance criteria - value: "- [ ] _{{State acceptance criteria}}_ - -- [ ] _{{State another}}_ - -- [ ] _{{And another}}_" - validations: - required: true diff --git a/.github/workflows/deploy-web-components-storybook.yml b/.github/workflows/deploy-web-components-storybook.yml index 20a7e2b60f61..baa6776a19a7 100644 --- a/.github/workflows/deploy-web-components-storybook.yml +++ b/.github/workflows/deploy-web-components-storybook.yml @@ -24,7 +24,7 @@ jobs: - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0 - name: Use Node.js 20.x - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3 + uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4 with: node-version: '20.x' - name: Install dependencies diff --git a/README.md b/README.md index bda51be54ef1..73978e53b606 100644 --- a/README.md +++ b/README.md @@ -35,31 +35,32 @@ ## Getting started -If you're just getting started, check out [`@carbon/react`](./packages/react). +If you're just getting started, check out [`@carbon/react`](./packages/react) or +[`@carbon/web-components`](./packages/web-components). We also have community-contributed components for the following technologies: - [Angular](https://github.com/IBM/carbon-components-angular) - [Svelte](https://github.com/IBM/carbon-components-svelte) - [Vue](https://github.com/carbon-design-system/carbon-components-vue) -- [Web Components](https://github.com/carbon-design-system/carbon-web-components) If you're trying to find something specific, here's a full list of packages that we support! -| Package name | Description | -| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`@carbon/react`](./packages/react) | React components and styles | -| [`@carbon/styles`](./packages/styles) | Sass styles for components | -| [`@carbon/elements`](./packages/elements) | IBM Design Language elements like colors, type, iconography, and more | -| [`@carbon/colors`](./packages/colors) | Work with IBM Design Language colors | -| [`@carbon/grid`](./packages/grid) | Build layouts using the new 16 column grid system | -| [`@carbon/icons`](./packages/icons) | Iconography assets. We also offer support in: [React](./packages/icons-react), [Angular](https://github.com/carbon-design-system/carbon-icons-angular), [Vue](./packages/icons-vue), and [Svelte](https://github.com/IBM/carbon-icons-svelte) | -| [`@carbon/pictograms`](./packages/pictograms) | Pictogram assets. We also offer support in: [React](./packages/pictograms-react) and [Svelte](https://github.com/IBM/carbon-pictograms-svelte) | -| [`@carbon/layout`](./packages/layout) | Layout-based units and spacing scale | -| [`@carbon/motion`](./packages/motion) | Productive and expressive motion curves | -| [`@carbon/themes`](./packages/themes) | Color tokens available in the Carbon Design System, like `$interactive-01` | -| [`@carbon/type`](./packages/type) | New type tokens used alongside IBM Plex | +| Package name | Description | +| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`@carbon/react`](./packages/react) | React components and styles | +| [`@carbon/web-components`](./packages/web-components) | Web Components | +| [`@carbon/styles`](./packages/styles) | Sass styles for components | +| [`@carbon/elements`](./packages/elements) | IBM Design Language elements like colors, type, iconography, and more | +| [`@carbon/colors`](./packages/colors) | Work with IBM Design Language colors | +| [`@carbon/grid`](./packages/grid) | Build layouts using the new 16 column grid system | +| [`@carbon/icons`](./packages/icons) | Iconography assets. We also offer support in: [React](./packages/icons-react), [Angular](https://github.com/carbon-design-system/carbon-icons-angular), [Vue](./packages/icons-vue), and [Svelte](https://github.com/IBM/carbon-icons-svelte) | +| [`@carbon/pictograms`](./packages/pictograms) | Pictogram assets. We also offer support in: [React](./packages/pictograms-react) and [Svelte](https://github.com/IBM/carbon-pictograms-svelte) | +| [`@carbon/layout`](./packages/layout) | Layout-based units and spacing scale | +| [`@carbon/motion`](./packages/motion) | Productive and expressive motion curves | +| [`@carbon/themes`](./packages/themes) | Color tokens available in the Carbon Design System, like `$interactive-01` | +| [`@carbon/type`](./packages/type) | New type tokens used alongside IBM Plex | ## :books: Documentation @@ -305,6 +306,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Md Nabeel Ayubee
💻
Patan Amrulla Khan
💻 📖 +
Noah Sgorbati
💻 📖
Divya G
💻
Soumya Raju
💻 diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json index ef22f62ee693..0e775e9cc2c2 100644 --- a/examples/class-prefix/package.json +++ b/examples/class-prefix/package.json @@ -1,7 +1,7 @@ { "name": "class-prefix", "private": true, - "version": "0.64.0", + "version": "0.65.0-rc.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json index 24a6b43f49a8..cc82903df0a1 100644 --- a/examples/codesandbox-styles/package.json +++ b/examples/codesandbox-styles/package.json @@ -1,7 +1,7 @@ { "name": "codesandbox-styles", "private": true, - "version": "0.69.0", + "version": "0.70.0-rc.0", "type": "module", "scripts": { "dev": "vite" @@ -11,6 +11,6 @@ "vite": "^4.3.8" }, "dependencies": { - "@carbon/styles": "^1.66.0" + "@carbon/styles": "^1.67.0-rc.0" } } diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json index 94700afa65fb..7e96b6ea77b3 100644 --- a/examples/custom-theme/package.json +++ b/examples/custom-theme/package.json @@ -1,7 +1,7 @@ { "name": "custom-theme", "private": true, - "version": "0.65.0", + "version": "0.66.0-rc.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json index a63b80b3a36f..ec3553c58844 100644 --- a/examples/id-prefix/package.json +++ b/examples/id-prefix/package.json @@ -1,7 +1,7 @@ { "name": "id-prefix", "private": true, - "version": "0.64.0", + "version": "0.65.0-rc.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json index 2c8d043d9ca3..10e71fd5527e 100644 --- a/examples/light-dark-mode/package.json +++ b/examples/light-dark-mode/package.json @@ -1,7 +1,7 @@ { "name": "examples-light-dark", "private": true, - "version": "0.65.0", + "version": "0.66.0-rc.0", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "next": "14.1.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 6ec3008c0e40..9f0b37ff5cff 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,7 +1,7 @@ { "name": "examples-nextjs", "private": true, - "version": "0.67.0", + "version": "0.68.0-rc.0", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "next": "14.1.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/v10-token-compat-in-v11/package.json b/examples/v10-token-compat-in-v11/package.json index 075c5e8485ad..07fa25846a9f 100644 --- a/examples/v10-token-compat-in-v11/package.json +++ b/examples/v10-token-compat-in-v11/package.json @@ -1,7 +1,7 @@ { "name": "v10-token-compat-in-v11", "private": true, - "version": "0.65.0", + "version": "0.66.0-rc.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/vite/package.json b/examples/vite/package.json index 1da6cba93557..6cb1539c5b4a 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite", "private": true, - "version": "0.65.0", + "version": "0.66.0-rc.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json index ed3051e6f5a6..2c3d5c641959 100644 --- a/packages/carbon-components-react/package.json +++ b/packages/carbon-components-react/package.json @@ -1,7 +1,8 @@ { "name": "carbon-components-react", + "private": true, "description": "The Carbon Design System is IBM’s open-source design system for products and experiences. This package reached end of support on September 30, 2024 and will not receive any more updates.", - "version": "8.67.0", + "version": "8.68.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -42,8 +43,8 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/react": "^1.67.0", - "@carbon/styles": "^1.66.0", + "@carbon/react": "^1.68.0-rc.0", + "@carbon/styles": "^1.67.0-rc.0", "@ibm/telemetry-js": "^1.5.0", "chalk": "1.1.3" }, diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json index 0706a30e6a70..c64586e79301 100644 --- a/packages/carbon-components/package.json +++ b/packages/carbon-components/package.json @@ -1,7 +1,8 @@ { "name": "carbon-components", + "private": true, "description": "The Carbon Design System is IBM’s open-source design system for products and experiences. This package reached end of support on September 30, 2024 and will not receive any more updates.", - "version": "11.66.0", + "version": "11.67.0-rc.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -43,7 +44,7 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/styles": "^1.66.0", + "@carbon/styles": "^1.67.0-rc.0", "@ibm/telemetry-js": "^1.5.0", "chalk": "1.1.3" }, diff --git a/packages/elements/package.json b/packages/elements/package.json index 5c4721c208e9..f65dec03ada7 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/elements", "description": "A collection of design elements in code for the IBM Design Language", - "version": "11.54.0", + "version": "11.55.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -40,10 +40,10 @@ "dependencies": { "@carbon/colors": "^11.27.0", "@carbon/grid": "^11.28.0", - "@carbon/icons": "^11.50.0", + "@carbon/icons": "^11.51.0-rc.0", "@carbon/layout": "^11.27.0", "@carbon/motion": "^11.23.0", - "@carbon/themes": "^11.41.0", + "@carbon/themes": "^11.42.0-rc.0", "@carbon/type": "^11.32.0", "@ibm/telemetry-js": "^1.5.0" }, diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json index e4cb61d55818..9118ed486559 100644 --- a/packages/icons-react/package.json +++ b/packages/icons-react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-react", "description": "React components for icons in digital and software products using the Carbon Design System", - "version": "11.50.0", + "version": "11.51.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -44,7 +44,7 @@ }, "devDependencies": { "@carbon/icon-build-helpers": "^1.31.0", - "@carbon/icons": "^11.50.0", + "@carbon/icons": "^11.51.0-rc.0", "rimraf": "^6.0.0" }, "sideEffects": false diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json index db440ba6e508..0e8fb49d4ba6 100644 --- a/packages/icons-vue/package.json +++ b/packages/icons-vue/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-vue", "description": "Vue components for icons in digital and software products using the Carbon Design System", - "version": "10.99.0", + "version": "10.100.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -35,7 +35,7 @@ }, "devDependencies": { "@carbon/cli-reporter": "^10.7.0", - "@carbon/icons": "^11.50.0", + "@carbon/icons": "^11.51.0-rc.0", "fs-extra": "^11.0.0", "prettier": "^2.8.8", "rimraf": "^6.0.0", diff --git a/packages/icons/package.json b/packages/icons/package.json index f3258a487ef6..711dc5731221 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons", "description": "Icons for digital and software products using the Carbon Design System", - "version": "11.50.0", + "version": "11.51.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/react/package.json b/packages/react/package.json index 585b235ea702..62ae668bf22a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react", "description": "React components for the Carbon Design System", - "version": "1.67.0", + "version": "1.68.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -49,9 +49,9 @@ "dependencies": { "@babel/runtime": "^7.24.7", "@carbon/feature-flags": "^0.23.0", - "@carbon/icons-react": "^11.50.0", + "@carbon/icons-react": "^11.51.0-rc.0", "@carbon/layout": "^11.27.0", - "@carbon/styles": "^1.66.0", + "@carbon/styles": "^1.67.0-rc.0", "@floating-ui/react": "^0.26.0", "@ibm/telemetry-js": "^1.5.0", "classnames": "2.5.1", @@ -80,7 +80,7 @@ "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", "@carbon/test-utils": "^10.33.0", - "@carbon/themes": "^11.41.0", + "@carbon/themes": "^11.42.0-rc.0", "@figma/code-connect": "^1.1.4", "@rollup/plugin-babel": "^6.0.0", "@rollup/plugin-commonjs": "^26.0.0", diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js index d9da3d7ab0e9..2a91b5ae1df4 100644 --- a/packages/react/src/components/ComboBox/ComboBox-test.js +++ b/packages/react/src/components/ComboBox/ComboBox-test.js @@ -64,6 +64,18 @@ describe('ComboBox', () => { } }); + it('should call `onChange` when selection is cleared', async () => { + render(); + expect(mockProps.onChange).not.toHaveBeenCalled(); + await openMenu(); + await userEvent.click(screen.getAllByRole('option')[0]); + expect(mockProps.onChange).toHaveBeenCalledTimes(1); + await userEvent.click( + screen.getByRole('button', { name: 'Clear selected item' }) + ); + expect(mockProps.onChange).toHaveBeenCalledTimes(2); + }); + it('should call `onChange` with the proper item when `shouldFilterItem` is provided', async () => { const filterItems = (menu) => { return menu?.item?.label @@ -90,12 +102,6 @@ describe('ComboBox', () => { }); }); - it('should call `onChange` on a fully controlled component', async () => { - render(); - await userEvent.click(screen.getAllByRole('button')[0]); - expect(mockProps.onChange).toHaveBeenCalled(); - }); - it('should select the correct item from the filtered list after text input on click', async () => { const user = userEvent.setup(); @@ -270,14 +276,14 @@ describe('ComboBox', () => { }); }); - describe('should display selected item found in `selectedItem`', () => { - it('using an object type for the `selectedItem` prop', async () => { + describe('provided `selectedItem`', () => { + it('should display selected item using an object type for the `selectedItem` prop', async () => { render(); await waitForPosition(); expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label); }); - it('using a string type for the `selectedItem` prop', async () => { + it('should display selected item using a string type for the `selectedItem` prop', async () => { // Replace the 'items' property in mockProps with a list of strings mockProps = { ...mockProps, @@ -288,6 +294,45 @@ describe('ComboBox', () => { await waitForPosition(); expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]); }); + it('should update and call `onChange` when selection is updated from the combobox', async () => { + render(); + expect(mockProps.onChange).not.toHaveBeenCalled(); + await openMenu(); + await userEvent.click(screen.getByRole('option', { name: 'Item 2' })); + expect(mockProps.onChange).toHaveBeenCalledTimes(1); + expect( + screen.getByRole('combobox', { value: 'Item 2' }) + ).toBeInTheDocument(); + }); + it('should update and call `onChange` when selection is updated externally', async () => { + const { rerender } = render( + + ); + expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label); + rerender(); + expect(findInputNode()).toHaveDisplayValue(mockProps.items[1].label); + expect(mockProps.onChange).toHaveBeenCalledTimes(1); + }); + it('should clear selected item and call `onChange` when selection is cleared from the combobox', async () => { + render(); + expect(mockProps.onChange).not.toHaveBeenCalled(); + await userEvent.click( + screen.getByRole('button', { name: 'Clear selected item' }) + ); + expect(mockProps.onChange).toHaveBeenCalled(); + expect(findInputNode()).toHaveDisplayValue(''); + }); + it('should clear selected item when `selectedItem` is updated to `null` externally', async () => { + const { rerender } = render( + + ); + await waitForPosition(); + expect(findInputNode()).toHaveDisplayValue(mockProps.items[1].label); + rerender(); + await waitForPosition(); + expect(findInputNode()).toHaveDisplayValue(''); + expect(mockProps.onChange).toHaveBeenCalled(); + }); }); describe('when disabled', () => { diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index 3cb22508eb77..5f70ed56dbcf 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/packages/react/src/components/ComboBox/ComboBox.mdx @@ -19,6 +19,7 @@ import ComboBox from '../ComboBox'; - [downshiftProps](#combobox-downshiftprops) - [Placeholder and labeling](#placeholders-and-labeling) - [initialSelectedItem](#initialselecteditem) +- [selectedItem](#selecteditem) - [itemToElement](#itemtoelement) - [itemToString](#itemtostring) - [shouldFilterItem](#shouldfilteritem) @@ -126,6 +127,60 @@ const items = ['Option 1', 'Option 2', 'Option 3'] ``` +## `selectedItem` + +You can use `selectedItem` for a fully controlled component. + + + +```jsx + +const options = [ + { + id: 'option-1', + text: 'Option 1', + }, + { + id: 'option-2', + text: 'Option 2', + }, + { + id: 'option-3', + text: 'Option 3', + }, +]; +const [value, setValue] = useState(options[0]); + +const onChange = ({ selectedItem }) => { + setValue(selectedItem); +}; + +return ( +
+ (item ? item.text : '')} + titleText="Fully Controlled ComboBox title" + helperText="Combobox helper text" + /> +
+ + + + +
+
+); + +``` + ## `itemToElement` The Combobox takes in an `items` array and can then be formatted by diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index 35383df2cdf3..45c6588c4da4 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useRef } from 'react'; +import React, { useState, useRef } from 'react'; import { WithLayer } from '../../../.storybook/templates/WithLayer'; @@ -214,6 +214,52 @@ export const withAILabel = () => ( ); +export const _fullyControlled = () => { + const options = [ + { + id: 'option-1', + text: 'Option 1', + }, + { + id: 'option-2', + text: 'Option 2', + }, + { + id: 'option-3', + text: 'Option 3', + }, + ]; + const [value, setValue] = useState(options[0]); + const onChange = ({ selectedItem }) => { + setValue(selectedItem); + }; + + return ( +
+ (item ? item.text : '')} + titleText="Fully Controlled ComboBox title" + helperText="Combobox helper text" + /> +
+ + + + +
+
+ ); +}; + export const Playground = (args) => (
(item: ItemType | null) => { @@ -85,11 +84,13 @@ const getInputValue = ({ inputValue, itemToString, selectedItem, + prevSelectedItem, }: { initialSelectedItem?: ItemType | null; inputValue: string; itemToString: ItemToStringHandler; selectedItem?: ItemType | null; + prevSelectedItem?: ItemType | null; }) => { if (selectedItem) { return itemToString(selectedItem); @@ -99,6 +100,10 @@ const getInputValue = ({ return itemToString(initialSelectedItem); } + if (!selectedItem && prevSelectedItem) { + return ''; + } + return inputValue || ''; }; @@ -426,23 +431,29 @@ const ComboBox = forwardRef( }) ); const [isFocused, setIsFocused] = useState(false); - const [prevSelectedItem, setPrevSelectedItem] = useState(); - const [doneInitialSelectedItem, setDoneInitialSelectedItem] = - useState(false); const savedOnInputChange = useRef(onInputChange); + const prevSelectedItemProp = useRef( + selectedItemProp + ); - if (!doneInitialSelectedItem || prevSelectedItem !== selectedItemProp) { - setDoneInitialSelectedItem(true); - setPrevSelectedItem(selectedItemProp); - setInputValue( - getInputValue({ + // fully controlled combobox: handle changes to selectedItemProp + useEffect(() => { + if (prevSelectedItemProp.current !== selectedItemProp) { + const currentInputValue = getInputValue({ initialSelectedItem, inputValue, itemToString, selectedItem: selectedItemProp, - }) - ); - } + prevSelectedItem: prevSelectedItemProp.current, + }); + setInputValue(currentInputValue); + onChange({ + selectedItem: selectedItemProp, + inputValue: currentInputValue, + }); + prevSelectedItemProp.current = selectedItemProp; + } + }, [selectedItemProp]); const filterItems = ( items: ItemType[], @@ -523,15 +534,6 @@ const ComboBox = forwardRef( return changes; } - case FunctionSelectItem: - if (onChange) { - onChange({ - selectedItem: changes.selectedItem, - inputValue: changes.inputValue, - }); - } - return changes; - case InputKeyDownEnter: if (allowCustomValue) { setInputValue(inputValue); @@ -670,7 +672,12 @@ const ComboBox = forwardRef( return itemToString(item); }, onInputValueChange({ inputValue }) { - setInputValue(inputValue || ''); + const newInputValue = inputValue || ''; + setInputValue(newInputValue); + if (selectedItemProp && !inputValue) { + // ensure onChange is called when selectedItem is cleared + onChange({ selectedItem, inputValue: newInputValue }); + } setHighlightedIndex(indexToHighlight(inputValue)); }, onSelectedItemChange({ selectedItem }) { diff --git a/packages/react/src/components/ComposedModal/ModalHeader.tsx b/packages/react/src/components/ComposedModal/ModalHeader.tsx index 8e81364daa9c..ebab7412d9d5 100644 --- a/packages/react/src/components/ComposedModal/ModalHeader.tsx +++ b/packages/react/src/components/ComposedModal/ModalHeader.tsx @@ -124,7 +124,7 @@ export const ModalHeader = React.forwardRef(
{label &&

{label}

} - {title &&

{title}

} + {title &&

{title}

} {children} diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.tsx similarity index 84% rename from packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js rename to packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.tsx index a4819b8e7f07..a226efc4a5be 100644 --- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.tsx @@ -12,11 +12,22 @@ import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; import { Calendar } from '@carbon/icons-react'; -function FluidDatePickerSkeleton({ +export interface FluidDatePickerSkeletonProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; + /** + * Specify which variant of the DatePicker the skeleton should mimic + */ + datePickerType?: 'simple' | 'single' | 'range'; +} + +const FluidDatePickerSkeleton: React.FC = ({ className, datePickerType = 'single', ...other -}) { +}) => { const prefix = usePrefix(); const classNames = classnames( @@ -54,7 +65,7 @@ function FluidDatePickerSkeleton({
); -} +}; FluidDatePickerSkeleton.propTypes = { /** diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.tsx similarity index 69% rename from packages/react/src/components/FluidDatePicker/FluidDatePicker.js rename to packages/react/src/components/FluidDatePicker/FluidDatePicker.tsx index e6a1d43202f2..223e8068d3b8 100644 --- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.js +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.tsx @@ -6,13 +6,47 @@ */ import PropTypes from 'prop-types'; -import React from 'react'; import classnames from 'classnames'; import DatePicker from '../DatePicker'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; +import React from 'react'; + +export interface FluidDatePickerProps { + /** + * The child node(s) + */ + children?: React.ReactNode; + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; + /** + * Specify whether or not the control is invalid + */ + invalid?: boolean; + /** + * Provide the text that is displayed when the control is in error state + */ + invalidText?: React.ReactNode; + /** + * Whether the input should be read-only + */ + readOnly?: boolean; + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} -const FluidDatePicker = React.forwardRef(function FluidDatePicker( +const FluidDatePicker: React.FC = React.forwardRef< + HTMLInputElement, + FluidDatePickerProps +>(function FluidDatePicker( { className, children, diff --git a/packages/react/src/components/FluidDatePicker/index.js b/packages/react/src/components/FluidDatePicker/index.tsx similarity index 63% rename from packages/react/src/components/FluidDatePicker/index.js rename to packages/react/src/components/FluidDatePicker/index.tsx index 5042118884cb..fcc1a8c42057 100644 --- a/packages/react/src/components/FluidDatePicker/index.js +++ b/packages/react/src/components/FluidDatePicker/index.tsx @@ -6,7 +6,9 @@ */ import FluidDatePicker from './FluidDatePicker'; - +import type { FluidDatePickerProps } from './FluidDatePicker'; +import { FluidDatePickerSkeletonProps } from './FluidDatePicker.Skeleton'; +export type { FluidDatePickerProps, FluidDatePickerSkeletonProps }; export { default as FluidDatePickerSkeleton } from './FluidDatePicker.Skeleton'; export default FluidDatePicker; export { FluidDatePicker }; diff --git a/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js b/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.tsx similarity index 78% rename from packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js rename to packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.tsx index 35dabebc1189..b2a69d75bf0f 100644 --- a/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js +++ b/packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.tsx @@ -6,12 +6,12 @@ */ import React from 'react'; -import DatePickerInput from '../DatePickerInput'; +import DatePickerInput, { DatePickerInputProps } from '../DatePickerInput'; import { FormContext } from '../FluidForm/FormContext'; const FluidDatePickerInput = React.forwardRef(function FluidDatePickerInput( - { ...other }, - ref + { ...other }: DatePickerInputProps, + ref: React.Ref ) { return ( diff --git a/packages/react/src/components/FluidDatePickerInput/index.js b/packages/react/src/components/FluidDatePickerInput/index.tsx similarity index 100% rename from packages/react/src/components/FluidDatePickerInput/index.js rename to packages/react/src/components/FluidDatePickerInput/index.tsx diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx index 247d635595fb..5b7ee8795683 100644 --- a/packages/react/src/components/Modal/Modal.tsx +++ b/packages/react/src/components/Modal/Modal.tsx @@ -520,7 +520,7 @@ const Modal = React.forwardRef(function Modal( )} {modalHeading} diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.mdx b/packages/react/src/components/Tooltip/DefinitionTooltip.mdx index e7b1d95b6889..ee3ae85847df 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.mdx +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.mdx @@ -5,7 +5,7 @@ import * as DefinitionTooltipStories from './DefinitionTooltip.stories'; # DefinitionTooltip -[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tooltip/DefinitionTooltip.js) +[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tooltip/DefinitionTooltip.tsx)  |  [Usage guidelines](https://www.carbondesignsystem.com/components/tooltip/usage)  |  diff --git a/packages/styles/package.json b/packages/styles/package.json index f642597b1f11..1e9ba7bdab7a 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/styles", "description": "Styles for the Carbon Design System", - "version": "1.66.0", + "version": "1.67.0-rc.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -45,7 +45,7 @@ "@carbon/grid": "^11.28.0", "@carbon/layout": "^11.27.0", "@carbon/motion": "^11.23.0", - "@carbon/themes": "^11.41.0", + "@carbon/themes": "^11.42.0-rc.0", "@carbon/type": "^11.32.0", "@ibm/plex": "6.0.0-next.6", "@ibm/telemetry-js": "^1.5.0" diff --git a/packages/themes/package.json b/packages/themes/package.json index ab9cc055d3c1..4b11d963c7ef 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/themes", "description": "Themes for applying color in the Carbon Design System", - "version": "11.41.0", + "version": "11.42.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/upgrade/package.json b/packages/upgrade/package.json index bec8fca6e532..1dc93efbfbbe 100644 --- a/packages/upgrade/package.json +++ b/packages/upgrade/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/upgrade", "description": "A tool for upgrading Carbon versions", - "version": "11.18.0", + "version": "11.19.0-rc.0", "license": "Apache-2.0", "bin": { "carbon-upgrade": "./bin/carbon-upgrade.js" diff --git a/packages/web-components/package.json b/packages/web-components/package.json index b60e5dca73af..03d091f67574 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/web-components", "description": "Web components for the Carbon Design System", - "version": "2.14.0", + "version": "2.15.0-rc.0", "license": "Apache-2.0", "main": "es/index.js", "module": "es/index.js", @@ -78,7 +78,7 @@ }, "devDependencies": { "@carbon/icon-helpers": "10.47.0", - "@carbon/icons": "^11.50.0", + "@carbon/icons": "^11.51.0-rc.0", "@carbon/layout": "^11.27.0", "@carbon/motion": "^11.23.0", "@juggle/resize-observer": "^3.4.0", diff --git a/www/package.json b/www/package.json index 33b186fce9c5..ac9ddd1a6e99 100644 --- a/www/package.json +++ b/www/package.json @@ -1,7 +1,7 @@ { "name": "www", "private": true, - "version": "0.76.0", + "version": "0.77.0-rc.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -22,7 +22,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.67.0", + "@carbon/react": "^1.68.0-rc.0", "@octokit/core": "^4.0.0", "@octokit/plugin-retry": "^3.0.9", "@octokit/plugin-throttling": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index b3010467948e..203d8e445361 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1790,10 +1790,10 @@ __metadata: "@carbon/cli": "npm:^11.22.0" "@carbon/colors": "npm:^11.27.0" "@carbon/grid": "npm:^11.28.0" - "@carbon/icons": "npm:^11.50.0" + "@carbon/icons": "npm:^11.51.0-rc.0" "@carbon/layout": "npm:^11.27.0" "@carbon/motion": "npm:^11.23.0" - "@carbon/themes": "npm:^11.41.0" + "@carbon/themes": "npm:^11.42.0-rc.0" "@carbon/type": "npm:^11.32.0" "@ibm/telemetry-js": "npm:^1.5.0" fs-extra: "npm:^11.0.0" @@ -1926,13 +1926,13 @@ __metadata: languageName: unknown linkType: soft -"@carbon/icons-react@npm:^11.50.0, @carbon/icons-react@workspace:packages/icons-react": +"@carbon/icons-react@npm:^11.51.0-rc.0, @carbon/icons-react@workspace:packages/icons-react": version: 0.0.0-use.local resolution: "@carbon/icons-react@workspace:packages/icons-react" dependencies: "@carbon/icon-build-helpers": "npm:^1.31.0" "@carbon/icon-helpers": "npm:^10.53.0" - "@carbon/icons": "npm:^11.50.0" + "@carbon/icons": "npm:^11.51.0-rc.0" "@ibm/telemetry-js": "npm:^1.5.0" prop-types: "npm:^15.7.2" rimraf: "npm:^6.0.0" @@ -1947,7 +1947,7 @@ __metadata: dependencies: "@carbon/cli-reporter": "npm:^10.7.0" "@carbon/icon-helpers": "npm:^10.53.0" - "@carbon/icons": "npm:^11.50.0" + "@carbon/icons": "npm:^11.51.0-rc.0" "@ibm/telemetry-js": "npm:^1.5.0" fs-extra: "npm:^11.0.0" prettier: "npm:^2.8.8" @@ -1957,7 +1957,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/icons@npm:^11.50.0, @carbon/icons@workspace:packages/icons": +"@carbon/icons@npm:^11.51.0-rc.0, @carbon/icons@workspace:packages/icons": version: 0.0.0-use.local resolution: "@carbon/icons@workspace:packages/icons" dependencies: @@ -2035,7 +2035,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/react@npm:^1.67.0, @carbon/react@workspace:packages/react": +"@carbon/react@npm:^1.68.0-rc.0, @carbon/react@workspace:packages/react": version: 0.0.0-use.local resolution: "@carbon/react@workspace:packages/react" dependencies: @@ -2049,11 +2049,11 @@ __metadata: "@babel/preset-typescript": "npm:^7.24.7" "@babel/runtime": "npm:^7.24.7" "@carbon/feature-flags": "npm:^0.23.0" - "@carbon/icons-react": "npm:^11.50.0" + "@carbon/icons-react": "npm:^11.51.0-rc.0" "@carbon/layout": "npm:^11.27.0" - "@carbon/styles": "npm:^1.66.0" + "@carbon/styles": "npm:^1.67.0-rc.0" "@carbon/test-utils": "npm:^10.33.0" - "@carbon/themes": "npm:^11.41.0" + "@carbon/themes": "npm:^11.42.0-rc.0" "@figma/code-connect": "npm:^1.1.4" "@floating-ui/react": "npm:^0.26.0" "@ibm/telemetry-js": "npm:^1.5.0" @@ -2158,7 +2158,7 @@ __metadata: languageName: node linkType: hard -"@carbon/styles@npm:^1.66.0, @carbon/styles@workspace:packages/styles": +"@carbon/styles@npm:^1.67.0-rc.0, @carbon/styles@workspace:packages/styles": version: 0.0.0-use.local resolution: "@carbon/styles@workspace:packages/styles" dependencies: @@ -2168,7 +2168,7 @@ __metadata: "@carbon/layout": "npm:^11.27.0" "@carbon/motion": "npm:^11.23.0" "@carbon/test-utils": "npm:^10.33.0" - "@carbon/themes": "npm:^11.41.0" + "@carbon/themes": "npm:^11.42.0-rc.0" "@carbon/type": "npm:^11.32.0" "@ibm/plex": "npm:6.0.0-next.6" "@ibm/telemetry-js": "npm:^1.5.0" @@ -2215,7 +2215,7 @@ __metadata: languageName: node linkType: hard -"@carbon/themes@npm:^11.41.0, @carbon/themes@workspace:packages/themes": +"@carbon/themes@npm:^11.42.0-rc.0, @carbon/themes@workspace:packages/themes": version: 0.0.0-use.local resolution: "@carbon/themes@workspace:packages/themes" dependencies: @@ -2321,7 +2321,7 @@ __metadata: dependencies: "@carbon/ibm-products-styles": "npm:^2.30.1" "@carbon/icon-helpers": "npm:10.47.0" - "@carbon/icons": "npm:^11.50.0" + "@carbon/icons": "npm:^11.51.0-rc.0" "@carbon/layout": "npm:^11.27.0" "@carbon/motion": "npm:^11.23.0" "@carbon/styles": "npm:1.63.1" @@ -9594,8 +9594,8 @@ __metadata: "@babel/plugin-transform-react-constant-elements": "npm:^7.24.7" "@babel/preset-env": "npm:^7.24.7" "@babel/preset-react": "npm:^7.24.7" - "@carbon/react": "npm:^1.67.0" - "@carbon/styles": "npm:^1.66.0" + "@carbon/react": "npm:^1.68.0-rc.0" + "@carbon/styles": "npm:^1.67.0-rc.0" "@carbon/test-utils": "npm:^10.33.0" "@ibm/telemetry-js": "npm:^1.5.0" "@rollup/plugin-babel": "npm:^6.0.0" @@ -9622,7 +9622,7 @@ __metadata: version: 0.0.0-use.local resolution: "carbon-components@workspace:packages/carbon-components" dependencies: - "@carbon/styles": "npm:^1.66.0" + "@carbon/styles": "npm:^1.67.0-rc.0" "@carbon/test-utils": "npm:^10.33.0" "@ibm/telemetry-js": "npm:^1.5.0" chalk: "npm:1.1.3" @@ -9995,7 +9995,7 @@ __metadata: version: 0.0.0-use.local resolution: "class-prefix@workspace:examples/class-prefix" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -10281,7 +10281,7 @@ __metadata: version: 0.0.0-use.local resolution: "codesandbox-styles@workspace:examples/codesandbox-styles" dependencies: - "@carbon/styles": "npm:^1.66.0" + "@carbon/styles": "npm:^1.67.0-rc.0" sass: "npm:^1.77.7" vite: "npm:^4.3.8" languageName: unknown @@ -11337,7 +11337,7 @@ __metadata: version: 0.0.0-use.local resolution: "custom-theme@workspace:examples/custom-theme" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -13517,7 +13517,7 @@ __metadata: version: 0.0.0-use.local resolution: "examples-light-dark@workspace:examples/light-dark-mode" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" eslint: "npm:8.40.0" next: "npm:14.1.1" react: "npm:18.2.0" @@ -13530,7 +13530,7 @@ __metadata: version: 0.0.0-use.local resolution: "examples-nextjs@workspace:examples/nextjs" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" eslint: "npm:8.40.0" eslint-config-next: "npm:13.4.7" next: "npm:14.1.1" @@ -15763,7 +15763,7 @@ __metadata: version: 0.0.0-use.local resolution: "id-prefix@workspace:examples/id-prefix" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -27646,7 +27646,7 @@ __metadata: version: 0.0.0-use.local resolution: "v10-token-compat-in-v11@workspace:examples/v10-token-compat-in-v11" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -27981,7 +27981,7 @@ __metadata: version: 0.0.0-use.local resolution: "vite@workspace:examples/vite" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -28609,7 +28609,7 @@ __metadata: version: 0.0.0-use.local resolution: "www@workspace:www" dependencies: - "@carbon/react": "npm:^1.67.0" + "@carbon/react": "npm:^1.68.0-rc.0" "@octokit/core": "npm:^4.0.0" "@octokit/plugin-retry": "npm:^3.0.9" "@octokit/plugin-throttling": "npm:^4.0.0"