use the new JSX transform (#2102)

.changeset/fresh-hats-count.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+The build output now uses the [new JSX transform](https://react.dev/link/new-jsx-transform) instead of `React.createElement`.

apps/react-workshop/src/Alert.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Alert } from '@itwin/itwinui-react';
 import { SvgPlaceholder, SvgSmileyHappy } from '@itwin/itwinui-icons-react';
 

apps/react-workshop/src/Anchor.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Anchor } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/Avatar.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { getUserColor, Avatar } from '@itwin/itwinui-react';
 import { SvgUser } from '@itwin/itwinui-icons-react';
 

apps/react-workshop/src/AvatarGroup.stories.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { useState } from 'react';
 import {
   getUserColor,
   Tooltip,
@@ -153,7 +153,7 @@ export const WithTooltip = () => {
   /**
    * Store the last avatar for tooltip positioning.
    */
-  const [countIcon, setCountIcon] = React.useState<HTMLElement | null>(null);
+  const [countIcon, setCountIcon] = useState<HTMLElement | null>(null);
 
   const usersSubArray = userNames.slice(5);
   const tooltipContent = usersSubArray.join(`\n`) as string;

apps/react-workshop/src/Badge.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Badge } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/Blockquote.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Blockquote } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/Breadcrumbs.stories.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { useMemo, useState } from 'react';
 import {
   IconButton,
   Breadcrumbs,
@@ -193,15 +193,15 @@ export const CustomOverflowDropdown = () => {
 };
 
 export const FolderNavigation = () => {
-  const items = React.useMemo(
+  const items = useMemo(
     () => ['Root', 'Level 1', 'Level 2', 'Level 3', 'Level 4'],
     [],
   );
 
-  const [lastIndex, setLastIndex] = React.useState(items.length - 1);
-  const [isEditing, setIsEditing] = React.useState(false);
+  const [lastIndex, setLastIndex] = useState(items.length - 1);
+  const [isEditing, setIsEditing] = useState(false);
 
-  const breadcrumbItems = React.useMemo(
+  const breadcrumbItems = useMemo(
     () =>
       items.slice(0, lastIndex + 1).map((item, index) => (
         <Breadcrumbs.Item

apps/react-workshop/src/Button.stories.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import * as React from 'react';
 import { Button, NotificationMarker } from '@itwin/itwinui-react';
 import { SvgAdd, SvgEmail, SvgPlaceholder } from '@itwin/itwinui-icons-react';
 

apps/react-workshop/src/ButtonGroup.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import {
   Button,
   ButtonGroup,

apps/react-workshop/src/Checkbox.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Checkbox } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/Code.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Code } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/ColorPicker.stories.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { useState } from 'react';
 import {
   ColorPicker,
   IconButton,
@@ -55,9 +55,9 @@ const ColorsList = [
 ];
 
 export const Basic = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [activeColor, setActiveColor] = React.useState(ColorsList[5]);
-  const [colorName, setColorName] = React.useState(ColorsList[5].name);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeColor, setActiveColor] = useState(ColorsList[5]);
+  const [colorName, setColorName] = useState(ColorsList[5].name);
 
   const onColorChanged = (color: ColorValue) => {
     const hexString = color.toHexString();
@@ -97,15 +97,15 @@ export const Basic = () => {
 };
 
 export const Advanced = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selectedColor, setSelectedColor] = React.useState<ColorValue>(
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedColor, setSelectedColor] = useState<ColorValue>(
     ColorValue.create({ h: 0, s: 100, l: 50 }),
   );
 
   const formats = ['hsl', 'rgb', 'hex'] as const;
-  const [currentFormat, setCurrentFormat] = React.useState<
-    (typeof formats)[number]
-  >(formats[0]);
+  const [currentFormat, setCurrentFormat] = useState<(typeof formats)[number]>(
+    formats[0],
+  );
 
   const onColorChanged = (color: ColorValue) => {
     setSelectedColor(color);
@@ -176,15 +176,15 @@ export const Advanced = () => {
 };
 
 export const WithAlpha = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selectedColor, setSelectedColor] = React.useState<ColorValue>(
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedColor, setSelectedColor] = useState<ColorValue>(
     ColorValue.create({ r: 90, g: 105, b: 115, a: 0.4 }),
   );
 
   const formats = ['hsl', 'rgb', 'hex'] as const;
-  const [currentFormat, setCurrentFormat] = React.useState<
-    (typeof formats)[number]
-  >(formats[0]);
+  const [currentFormat, setCurrentFormat] = useState<(typeof formats)[number]>(
+    formats[0],
+  );
 
   const onColorChanged = (color: ColorValue) => {
     setSelectedColor(color);

apps/react-workshop/src/DatePicker.stories.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { useState } from 'react';
 import {
   DatePicker,
   IconButton,
@@ -16,7 +16,7 @@ export default {
 };
 
 export const Basic = () => {
-  const [currentDate, setCurrentDate] = React.useState(
+  const [currentDate, setCurrentDate] = useState(
     new Date(2021, 4, 11, 14, 55, 22),
   );
   const onChange = (date: Date) => {
@@ -46,7 +46,7 @@ export const Basic = () => {
 };
 
 export const WithTime = () => {
-  const [currentDate, setCurrentDate] = React.useState(
+  const [currentDate, setCurrentDate] = useState(
     new Date(2021, 4, 11, 14, 55, 22),
   );
   const onChange = (date: Date) => {
@@ -77,7 +77,7 @@ export const WithTime = () => {
 };
 
 export const WithCombinedTime = () => {
-  const [currentDate, setCurrentDate] = React.useState(
+  const [currentDate, setCurrentDate] = useState(
     new Date(2021, 4, 11, 14, 30, 0),
   );
   const onChange = (date: Date) => {
@@ -111,7 +111,7 @@ export const WithCombinedTime = () => {
 };
 
 export const Localized = () => {
-  const [currentDate, setCurrentDate] = React.useState(
+  const [currentDate, setCurrentDate] = useState(
     new Date(2021, 4, 11, 14, 55, 22),
   );
   const onChange = (date: Date) => {
@@ -141,7 +141,7 @@ export const Localized = () => {
   );
 };
 export const WithYear = () => {
-  const [currentDate, setCurrentDate] = React.useState(
+  const [currentDate, setCurrentDate] = useState(
     new Date(2021, 4, 11, 14, 55, 22),
   );
   const onChange = (date: Date) => {
@@ -170,10 +170,10 @@ export const WithYear = () => {
 };
 
 export const Range = () => {
-  const [currentStartDate, setCurrentStartDate] = React.useState(
+  const [currentStartDate, setCurrentStartDate] = useState(
     new Date(2022, 6, 13, 14, 55, 22),
   );
-  const [currentEndDate, setCurrentEndDate] = React.useState(
+  const [currentEndDate, setCurrentEndDate] = useState(
     new Date(2022, 6, 27, 14, 55, 22),
   );
   const onChange = (startDate: Date, endDate?: Date) => {
@@ -216,10 +216,10 @@ export const Range = () => {
 };
 
 export const SomeDatesDisabled = () => {
-  const [currentStartDate, setCurrentStartDate] = React.useState(
+  const [currentStartDate, setCurrentStartDate] = useState(
     new Date(2022, 6, 13, 14, 55, 22),
   );
-  const [currentEndDate, setCurrentEndDate] = React.useState(
+  const [currentEndDate, setCurrentEndDate] = useState(
     new Date(2022, 6, 17, 14, 55, 22),
   );
 

apps/react-workshop/src/Dialog.stories.tsx

@@ -2,15 +2,15 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { useState } from 'react';
 import { Button, Code, Dialog } from '@itwin/itwinui-react';
 
 export default {
   title: 'Dialog',
 };
 
 export const Basic = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const closeDialog = () => {
     setIsOpen(false);
@@ -61,7 +61,7 @@ export const Basic = () => {
 };
 
 export const Modal = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const closeDialog = () => {
     setIsOpen(false);
@@ -122,7 +122,7 @@ export const Modal = () => {
 };
 
 export const DraggableAndResizable = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const closeDialog = () => {
     setIsOpen(false);
@@ -180,7 +180,7 @@ export const DraggableAndResizable = () => {
 };
 
 export const DraggableRelativeToContainer = () => {
-  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const closeDialog = () => {
     setIsDialogOpen(false);
@@ -252,7 +252,7 @@ export const DraggableRelativeToContainer = () => {
 };
 
 export const Placement = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const closeDialog = () => {
     setIsOpen(false);

apps/react-workshop/src/DropdownButton.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { MenuItem, DropdownButton } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/ExpandableBlock.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { ExpandableBlock } from '@itwin/itwinui-react';
 
 export default {

apps/react-workshop/src/Fieldset.stories.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { useState } from 'react';
 import {
   Fieldset,
   InputGroup,
@@ -16,7 +16,7 @@ export default {
 };
 
 export const Basic = () => {
-  const [value, setValue] = React.useState<number | undefined>(undefined);
+  const [value, setValue] = useState<number | undefined>(undefined);
 
   return (
     <Fieldset
@@ -52,7 +52,7 @@ export const Basic = () => {
 };
 
 export const Disabled = () => {
-  const [value, setValue] = React.useState<number | undefined>(undefined);
+  const [value, setValue] = useState<number | undefined>(undefined);
 
   return (
     <Fieldset

apps/react-workshop/src/FileUpload.stories.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { useState } from 'react';
-import React from 'react';
+import * as React from 'react';
 import {
   FileUpload,
   FileUploadCard,

apps/react-workshop/src/Flex.stories.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import React from 'react';
 import { Flex } from '@itwin/itwinui-react';
 import type { StoryDefault } from '@ladle/react';