-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: automatically import and define Calcite Components when importing their React wrapper #7185
Conversation
…import * origin/master: (30 commits) chore: release next fix(radio-button, radio-button-group): prevent emitting events when selecting a checked radio button (#7102) feat(list): Add slots for filter actions (#7148) chore: release next fix(tooltip): improve component timing (#7172) chore: release next fix(input-date-picker): Fix showing the placeholder when resetting the value (#7156) chore: release next fix(input,input-number): allow typing decimal separator in firefox for arabic locale (#7173) build(deps): Bump workbox-build from 6.5.4 to 7.0.0 (#7167) build(deps): Bump type-fest from 3.5.0 to 3.11.1 (#7169) build(deps): Bump chromatic from 6.17.4 to 6.19.5 (#7171) build(deps): Bump @floating-ui/dom from 1.2.9 to 1.3.0 in /packages/calcite-components (#7168) build(deps): Bump @esri/calcite-ui-icons from 3.22.9 to 3.23.1 in /packages/calcite-components (#7166) build: update browserslist db (#7162) ci(release-please): change PR title and ensure git tag consistency (#7153) docs(changelog): Update commit message for #7160 (#7161) chore: release next fix(list): Improve border styling (#7160) chore: release next ...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome!
Will this feature bump calcite-components
version or will it ship silently under the wrapper's synced version, or both? If this does bump the version, let's merge after the June (patch-only) release is done.
Yeah it would bump CC's version too because we are only doing patches for CC at the moment. So we can hold off for now. |
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.4.3...@esri/calcite-components@1.5.0) (2023-08-03) ### Features * **action-group:** Adds overlayPositioning property. ([#7366](#7366)) ([ca9f35a](ca9f35a)) * Allow sharing focus trap stacks via configuration global ([#7334](#7334)) ([934a19f](934a19f)) * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) * **block, block-section:** Add setFocus method ([#7208](#7208)) ([35d4bbb](35d4bbb)) * **block:** Improve block's content layout to allow scrolling ([#7367](#7367)) ([ecbf17b](ecbf17b)) * **color-picker:** Replaces thumb focus outline to rounded ([#7378](#7378)) ([d803980](d803980)) * **filter:** Add filter method ([#7127](#7127)) ([5a4283f](5a4283f)) * **flow:** Adds setFocus method ([#7252](#7252)) ([2472c58](2472c58)) * Improve focus behavior in components ([#7277](#7277)) ([ad9fbca](ad9fbca)) * **input-time-zone:** Add input-time-zone component ([#6947](#6947)) ([87bd496](87bd496)) * **list:** Add slots for filter actions ([#7183](#7183)) ([da07ab1](da07ab1)) * **list:** Add support for dragging items. ([#7109](#7109)) ([7324f70](7324f70)) * **menu-item:** Update spacing and icon layout ([#7381](#7381)) ([5659671](5659671)) * **navigation-logo:** Increase font-size of heading with no description ([#7081](#7081)) ([355e101](355e101)) * **switch:** Updates focus outline to be rounded ([#7390](#7390)) ([2616b82](2616b82)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7299](#7299)) ([c5678eb](c5678eb)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7412](#7412)) ([c1af3c7](c1af3c7)) ### Bug Fixes * **accordion, accordion-item:** `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes ([#7191](#7191)) ([2b09aba](2b09aba)) * **action-bar:** No longer delegates focus when clicked on non-focusable region ([#7310](#7310)) ([1a9c15c](1a9c15c)) * **action:** Correctly focus the button after rendering updates. ([#7255](#7255)) ([40fe2ce](40fe2ce)) * **block:** Loader now appears for all loading cases ([#7303](#7303)) ([5af3600](5af3600)) * **block:** Removes extra loading indicator ([#7239](#7239)) ([a334a75](a334a75)) * **card:** Ensure teardown logic is called when disconnected ([#7289](#7289)) ([d07e322](d07e322)) * **chip:** Disconnect mutation observer when component is disconnected from the DOM ([#7418](#7418)) ([412e5fb](412e5fb)) * **color-picker:** Draw slider thumbs within bounds ([#7398](#7398)) ([2f37854](2f37854)) * **color-picker:** Fix opacity slider keyboard nudging ([#7400](#7400)) ([2b4f7c3](2b4f7c3)) * **color-picker:** Maintains correct numbering system when entering invalid RGB value ([#7327](#7327)) ([8d2a3a5](8d2a3a5)) * **combobox:** Add space after grouped items ([#7302](#7302)) ([b1580c7](b1580c7)) * **dropdown-item:** Provides accessible label when href is not parsed ([#7316](#7316)) ([966b83d](966b83d)) * **flow:** Call setFocus() on back button click ([#7285](#7285)) ([9102aa4](9102aa4)) * **input-date-picker:** Provides placeholder text context for AT users ([#7320](#7320)) ([31e0ba2](31e0ba2)) * **input-date-picker:** Reset active date picker date after closing ([#7219](#7219)) ([91b2a1b](91b2a1b)) * **input, input-number:** No longer removes trailing decimal separator ([#7159](#7159)) ([01535cf](01535cf)) * **link:** Adds outline-offset to avoid overlapping with text. ([#7342](#7342)) ([c30db4e](c30db4e)) * **list:** Changing filterText property will now update filtered items ([#7133](#7133)) ([a9c0bce](a9c0bce)) * **list:** Fix keyboard navigation after a listItem's disabled or closed property changes ([#7275](#7275)) ([91d28eb](91d28eb)) * **list:** Fix keyboard navigation when filterEnabled is true ([#7385](#7385)) ([41a2e42](41a2e42)) * **menu-item:** Prevent duplicate border in nested vertical menu-items ([#7387](#7387)) ([186a738](186a738)) * **panel:** Remove double border styling when content isn't provided ([#7368](#7368)) ([91a0610](91a0610)) * Remove style modifying all host components with hidden attribute ([#7346](#7346)) ([3103e2f](3103e2f)) * **scrim:** Update loader scale on resize of component. ([#7419](#7419)) ([24e7f70](24e7f70)) * **slider:** Prevent excessive tick rendering ([#7421](#7421)) ([c799409](c799409)) * **switch:** Fix for focus outline style in certain cases ([#7414](#7414)) ([217324f](217324f)) * **tab-title:** Add full focus outline to closable tab button in high contrast mode ([#7272](#7272)) ([d812d17](d812d17)) * **tooltip:** Avoid extra before open/close event emitting ([#7422](#7422)) ([dbb6818](dbb6818)) * **tooltip:** Deprecate the label property due to the description coming from the component's content ([#7247](#7247)) ([7934d75](7934d75)) * **tooltip:** Emits `close` and `beforeClose` events when container is set to `display:none` ([#7258](#7258)) ([60a4683](60a4683)) * **tooltip:** Ensure --calcite-app-z-index-tooltip is applied ([#7345](#7345)) ([a9a7072](a9a7072)) </details> <details><summary>@esri/calcite-components-react: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.4.3...@esri/calcite-components-react@1.5.0) (2023-08-03) ### Features * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
There is an issue with auto-importing and defining calcite components using the react wrapper via Esri/calcite-design-system#7185 It appears to be a Stencil bug related to our SSR patch which dynamically imports the web components to prevent them from rendering on the server. Esri/calcite-design-system#7521
…ender issues BREAKING CHANGE: Disabled includeImportCustomElements, make sure to "double" import the components - once from calcite-components-react and once from calcite-components. See #7185 for examples.
…ender issues (#8248) **Related Issue:** #8143 ## Summary The `ReferenceError: navigator is not defined` error is still present in Stencil v4 when removing the patch. Disabled [`includeImportCustomElements`](https://stenciljs.com/docs/react#includeimportcustomelements) for now while we investigate an alternative fix that doesn't cause initial render issues. BREAKING CHANGE: Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the react wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined on the window.
…ender issues (#8248) **Related Issue:** #8143 ## Summary The `ReferenceError: navigator is not defined` error is still present in Stencil v4 when removing the patch. Disabled [`includeImportCustomElements`](https://stenciljs.com/docs/react#includeimportcustomelements) for now while we investigate an alternative fix that doesn't cause initial render issues. BREAKING CHANGE: Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the react wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined on the window.
…ender issues (#8248) **Related Issue:** #8143 ## Summary The `ReferenceError: navigator is not defined` error is still present in Stencil v4 when removing the patch. Disabled [`includeImportCustomElements`](https://stenciljs.com/docs/react#includeimportcustomelements) for now while we investigate an alternative fix that doesn't cause initial render issues. BREAKING CHANGE: Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the react wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined on the window.
…ender issues (#8248) **Related Issue:** #8143 ## Summary The `ReferenceError: navigator is not defined` error is still present in Stencil v4 when removing the patch. Disabled [`includeImportCustomElements`](https://stenciljs.com/docs/react#includeimportcustomelements) for now while we investigate an alternative fix that doesn't cause initial render issues. BREAKING CHANGE: Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the react wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined on the window.
…ender issues (#8248) **Related Issue:** #8143 ## Summary The `ReferenceError: navigator is not defined` error is still present in Stencil v4 when removing the patch. Disabled [`includeImportCustomElements`](https://stenciljs.com/docs/react#includeimportcustomelements) for now while we investigate an alternative fix that doesn't cause initial render issues. BREAKING CHANGE: Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the react wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined on the window.
…ender issues (#8248) **Related Issue:** #8143 ## Summary The `ReferenceError: navigator is not defined` error is still present in Stencil v4 when removing the patch. Disabled [`includeImportCustomElements`](https://stenciljs.com/docs/react#includeimportcustomelements) for now while we investigate an alternative fix that doesn't cause initial render issues. BREAKING CHANGE: Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the react wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined on the window.
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.1.0...@esri/calcite-design-tokens@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - Change the default export to a tree-shakable list of design tokens in camelCase format rather than a JSON object (`import * as tokens from "@esri/calcite-design-tokens";`) - Use font name in core font family tokens - Remove unnecessary core tokens line-height, font-size, letter-spacing, paragraph-spacing as these can be exclusive to semantic and reference core size tokens - Core size tokens now use their pixel size in their name - Change `border-radius` to `corner-radius` - Remove unnecessary `border-width` tokens `none`, `sm`, `md`, `lg` - Platform output - Remove component tokens from global output - Add new platform output - css - index - global - light - dark - core - breakpoint - typography classes - scss - index - global - light - dark - core - breakpoints - typography mixins - Replace "headless" with "global" - Remove "calcite" from filenames - Package.json exports - `@esri/calcite-design-tokens/css/headless` is now `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` is now `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` is now `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` is now `@esri/calcite-design-tokens/es6/global` - Token paths and values - Border - Use t-shirt sizing for border width tokens - `Border.border-width.0` is now `border.width.none` (--calcite-border-width-none) - `border.border-width.1` is now `border.width.sm` (--calcite-border-width-sm) - `border.border-width.2` is now `border.width.md` (--calcite-border-width-md) - `border.border-width.3` is now `border.width.lg` (--calcite-border-width-lg) - `border.border-width.4` is removed - Remove unused border radius tokens - `Core.border.border-radius.0` - `Core.border.border-radius.2` - `Core.border.border-radius.3` - Use t-shirt sizing for border radius (now called corner radius) tokens - `semantic.ui.border.border-radius` is `semantic.corner.radius.default` - `Core.border.border-radius.1` is now `semantic.corner.radius.sharp` - `Core.border.border-radius.4` is now `semantic.corner.radius.round` - `Core.border.border-radius.5` is now `semantic.corner.radius.pill` - Sizing - `core.sizing.` tokens are now `core.size.default` - Breakpoints - Move breakpoint tokens to their own separate output file for most platform outputs (except JS) - Update breakpoint token path from `.breakpoint.` to `.container-size.` - Delete unused `breakpoint.cols` tokens - Box Shadow - Use t-shirt sizing for global box shadow tokens - `box-shadow.0` is now `shadow.none` - `box-shadow.1` is now `shadow.sm` - `box-shadow.2` is now `shadow.md` - Colors - Remove "palette" from core color paths - `core.color.palette.high-saturation` is now `core.color.high-saturation` - Light Mode and Dark Mode - Semantic color tokens now use the composite color scheme token type to reference "light" and "dark" mode instead of having separate light and dark tokens. - `.calcite-mode-light` and `.calcite-mode-dark` classes as well as the color scheme media queries are now provided via `calcite-design-tokens/css/index.css` - Provide light and dark mode mixins via `calcite-design-tokens/css/index.scss` - Remove "ui" from output platform names in favor of "color" - `--calcite-ui-background` is now `--calcite-color-background` - `--calcite-ui-brand` is now `--calcite-color-brand` - `--calcite-ui-success` is now `--calcite-color-status-success` - `--calcite-ui-danger` is now `--calcite-color-status-danger` - `--calcite-ui-warning` is now `--calcite-color-status-warning` - `--calcite-ui-hint` is now `--calcite-color-status-hint` - `--calcite-button-transparent-hover` is now `--calcite-color-transparent-press` ### Features - Add json to design token output ([#8290](#8290)) ([753061f](753061f)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - Update default main file output for design tokens ([#8299](#8299)) ([4050a91](4050a91)) - Update json shape for docs ([#8308](#8308)) ([6fac3e9](6fac3e9)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.0.0</summary> ## [1.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.3...@esri/eslint-plugin-calcite-components@1.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) </details> <details><summary>@esri/calcite-components: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.11.0...@esri/calcite-components@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __tokens:__ Changes to `@esri/calcite-design-tokens`, including the names of CSS variables used to customize component styling. See the [breaking changes section](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-design-tokens/CHANGELOG.md#200-2023-12-02) of the `@esri/calcite-design-tokens` changelog. ([#8311](#8311)) ([8d7cf3f](8d7cf3f)), ([#8299](#8299)) ([4050a91](4050a91)), ([#8215](#8215)) ([335d010](335d010)) - __button, list, pick-list, value-list:__ Setting `loading` prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please set `disabled` along with `loading`. ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __dropdown:__ Dropdown's default `display` was changed from `inline-flex` to `inline-block` to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width __or__ setting `width: 100%` or `display: block` on the dropdown of a width-constrained parent). ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown, modal:__ For consistency, renames the `width` property to `widthScale`. ([#8251](#8251)) ([ab12968](ab12968)), ([#8252](#8252)) ([6b09245](6b09245)) - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. ([#8248](#8248)) ([0948c1a](0948c1a)) - __i18n:__ Reduced numbering system support to `latn`, `arab` and `arabext`. The following numbering systems were removed: `bali`, `beng`, `deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`, `knda`, `laoo`, `limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`, `telu`, `thai`, `tibt`. ([#8217](#8217)) ([9946ac1](9946ac1)) - __stepper-item:__ Removed both `previousStep` and `nextStep` message properties. These are no longer overrideable via `messageOverrides`. ([#8234](#8234)) ([331aafb](331aafb)) - __card:__ Removed the `deselect` message property – this property was deprecated in [#6657](#6657) as it is no longer being rendered. This is no longer overrideable via `messageOverrides`. ([#8099](#8099)) ([1bab172](1bab172)) - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Features - __action-menu:__ Set max height of the action menu ([#8275](#8275)) ([ca1be28](ca1be28)) - __action-menu:__ Support action-groups ([#8273](#8273)) ([c07144f](c07144f)) - __combobox, checkbox, input-time-zone, select, text-area:__ Add `status` property ([#8304](#8304)) ([a44e9fe](a44e9fe)) - __handle:__ Add disabled property ([#8283](#8283)) ([7aeecd5](7aeecd5)) - __list-item:__ Add dragDisabled property ([#8285](#8285)) ([f091f26](f091f26)) - __list:__ Support multiple selection using the shift key ([#8301](#8301)) ([79538be](79538be)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - __stepper:__ Enable responsive layout ([#7744](#7744)) ([556b8bc](556b8bc)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) - __button, list, pick-list, value-list:__ Prevent loading prop from affecting interactivity ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __button:__ Sets aria-disabled instead of disabled on internal anchor element ([#8270](#8270)) ([0926eb6](0926eb6)) - __color-picker, popover, shell-panel, slider, tooltip:__ Register events on the window instead of the document ([#8247](#8247)) ([2aaf592](2aaf592)) - __combobox, dropdown, input-date-picker, popover, tooltip:__ Fix positioning of component when component is moved ([#8296](#8296)) ([2b2506d](2b2506d)) - Dragging floating ui components ([#8230](#8230)) ([5a81f6c](5a81f6c)) - __dropdown:__ Change display to inline-block to ease truncation setup ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown:__ Restore trigger container height ([51d1ea8](51d1ea8)) - __input-time-zone:__ Update time zone items when item-dependent props change ([#8271](#8271)) ([f77532e](f77532e)) - __input:__ Prevents mutating value on `blur` when `type="number"` ([#8245](#8245)) ([58ededd](58ededd)) - __label:__ Associate label to component when `for` prop is set after initialization ([#8309](#8309)) ([e81b650](e81b650)) - __list-item:__ Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([ae9b083](ae9b083)) - __list-item:__ Adds border between last item in a group and slotted item ([#8262](#8262)) ([9b5cf76](9b5cf76)) - __list-item:__ An item with an empty slotted list should be openable. ([#8240](#8240)) ([d615b39](d615b39)) - __list-item:__ Focus on the first focusable element within the component when using arrow keys ([#8291](#8291)) ([b902365](b902365)) - __list-item:__ Reserve space for empty open lists. ([#8239](#8239)) ([484a5aa](484a5aa)) - __list:__ Add live region for dynamically changing list items ([#8148](#8148)) ([e3c0c06](e3c0c06)) - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) - __stepper:__ Typo in CSS variable for step bar's fill ([#8255](#8255)) ([2e643aa](2e643aa)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Code Refactoring - __card:__ Remove deprecated `deselected` message ([#8099](#8099)) ([1bab172](1bab172)) - __dropdown:__ Rename `width` property to `widthScale` ([#8251](#8251)) ([ab12968](ab12968)) - __i18n:__ Reduce list of supported numbering systems to `latn`, `arab`, and `arabext` ([#8217](#8217)) ([9946ac1](9946ac1)) - __modal:__ Rename `width` property to `widthScale` ([#8252](#8252)) ([6b09245](6b09245)) - __stepper-item:__ No longer supports previousStep and nextStep messages ([#8234](#8234)) ([331aafb](331aafb)) ### Dependencies - The following workspace dependencies were updated - devDependencies - @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0 - @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to 1.0.0 </details> <details><summary>@esri/calcite-components-angular: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.11.0...@esri/calcite-components-angular@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> <details><summary>@esri/calcite-components-react: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.11.0...@esri/calcite-components-react@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Bug Fixes - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev> Co-authored-by: Ali Stump <astump@esri.com> Co-authored-by: JC Franco <jfranco@esri.com>
Related Issue: #6601
Summary
Automatically imports and defines Calcite Components when importing the React wrappers. For example, here is a snippet from our React sample:
The above snippet can now be simplified to the following:
Note
I had to patch the build because Stencil was generating an incorrect import path to the JSX type. I tested in our old output targets repo and it reproduced there as well, so this isn't related to the monorepo change.