@itwin/itwinui-react 2.0.4 → 2.1.1

package/esm/core/Select/SelectTagContainer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare type SelectTagContainerProps = {
+    /**
+     * Select tags.
+     */
+    tags: React.ReactNode[];
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+/**
+ */
+export declare const SelectTagContainer: React.ForwardRefExoticComponent<{
+    /**
+     * Select tags.
+     */
+    tags: React.ReactNode[];
+} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export default SelectTagContainer;

package/esm/core/Select/SelectTagContainer.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 cx from 'classnames';
+import { useTheme, useOverflow, useMergedRefs } from '../utils';
+import SelectTag from './SelectTag';
+/**
+ */
+export const SelectTagContainer = React.forwardRef((props, ref) => {
+    const { tags, className, ...rest } = props;
+    useTheme();
+    const [containerRef, visibleCount] = useOverflow(tags);
+    const refs = useMergedRefs(ref, containerRef);
+    return (React.createElement("div", { className: cx('iui-select-tag-container', className), ref: refs, ...rest },
+        React.createElement(React.Fragment, null,
+            visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
+            visibleCount < tags.length && (React.createElement(SelectTag, { label: `+${tags.length - visibleCount + 1} item(s)` })))));
+});
+export default SelectTagContainer;

package/esm/core/Table/Table.js

@@ -13,7 +13,7 @@ import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
 import { customFilterFunctions } from './filters/customFilterFunctions';
 import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useScrollToRow, useStickyColumns, } from './hooks';
-import { onExpandHandler, onFilterHandler, onSelectHandler, onShiftSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
+import { onExpandHandler, onFilterHandler, onToggleHandler, onShiftSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
 import VirtualScroll from '../utils/components/VirtualScroll';
 import { SELECTION_CELL_ID } from './columns';
 const singleRowSelectedAction = 'singleRowSelected';
@@ -144,7 +144,7 @@ export const Table = (props) => {
             case TableActions.toggleRowSelected:
             case TableActions.toggleAllRowsSelected:
             case TableActions.toggleAllPageRowsSelected: {
-                onSelectHandler(newState, instance, onSelect, 
+                onToggleHandler(newState, action, instance, onSelect, 
                 // If it has manual selection column, then we can't check whether row is disabled
                 hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
@@ -203,6 +203,7 @@ export const Table = (props) => {
     const showSortButton = (column) => data.length !== 0 && column.canSort;
     const onRowClickHandler = React.useCallback((event, row) => {
         const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+        const ctrlPressed = event.ctrlKey || event.metaKey;
         if (!isDisabled) {
             onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
         }
@@ -214,10 +215,11 @@ export const Table = (props) => {
                 dispatch({
                     type: shiftRowSelectedAction,
                     id: row.id,
+                    ctrlPressed: ctrlPressed,
                 });
             }
             else if (!row.isSelected &&
-                (selectionMode === 'single' || !event.ctrlKey)) {
+                (selectionMode === 'single' || !ctrlPressed)) {
                 dispatch({
                     type: singleRowSelectedAction,
                     id: row.id,

package/esm/core/Table/actionHandlers/index.d.ts

@@ -1,4 +1,4 @@
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler';
+export { onToggleHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler';
 export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

package/esm/core/Table/actionHandlers/index.js

@@ -4,5 +4,5 @@
  *--------------------------------------------------------------------------------------------*/
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler';
+export { onToggleHandler, onSingleSelectHandler, onShiftSelectHandler, } from './selectHandler';
 export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

package/esm/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,8 +1,8 @@
 import { ActionType, TableInstance, TableState } from 'react-table';
 /**
- * Handles selection when clicked on a checkbox.
+ * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
-export declare const onSelectHandler: <T extends Record<string, unknown>>(newState: TableState<T>, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => void;
+export declare const onToggleHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => void;
 /**
  * Handles selection when clicked on a row.
  */

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -1,7 +1,9 @@
 /**
- * Handles selection when clicked on a checkbox.
+ * Handles subrow selection and validation.
+ * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
+ * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
-export const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
+const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
     if (!(instance === null || instance === void 0 ? void 0 : instance.rows.length)) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect([], newState);
         return;
@@ -33,6 +35,14 @@ export const onSelectHandler = (newState, instance, onSelect, isRowDisabled) =>
     newState.selectedRowIds = newSelectedRowIds;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedData, newState);
 };
+/**
+ * Handles selection when toggling a row (Ctrl click or checkbox click)
+ */
+export const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled) => {
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
+    newState.lastSelectedRowId = action.id;
+};
 /**
  * Handles selection when clicked on a row.
  */
@@ -68,7 +78,11 @@ export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDis
         startIndex = endIndex;
         endIndex = temp;
     }
-    const selectedRowIds = {};
+    // If ctrl + shift click, do not lose previous selection
+    // If shift click, start new selection
+    const selectedRowIds = !!action.ctrlPressed
+        ? state.selectedRowIds
+        : {};
     // 1. Select all rows between start and end
     instance.flatRows
         .slice(startIndex, endIndex + 1)

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -3,7 +3,7 @@ import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOp
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;
-declare type ThemeProviderOwnProps = {
+declare type RootProps = {
     /**
      * Theme to be applied. Can be 'light' or 'dark' or 'os'.
      *
@@ -14,8 +14,21 @@ declare type ThemeProviderOwnProps = {
      * @default 'light'
      */
     theme?: ThemeType;
-} & ({
-    themeOptions?: Pick<ThemeOptions, 'highContrast'>;
+    themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
+        /**
+         * Whether or not the element should apply the recommended `background-color` on itself.
+         *
+         * When not specified, the default behavior is to apply a background-color only
+         * if it is the topmost `ThemeProvider` in the tree. Nested `ThemeProvider`s will
+         * be detected using React Context and will not apply a background-color.
+         *
+         * When set to true or false, it will override the default behavior.
+         */
+        applyBackground?: boolean;
+    };
+};
+declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
+    themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
 } | {
     themeOptions?: ThemeOptions;
@@ -26,10 +39,11 @@ declare type ThemeProviderOwnProps = {
  * that it is wrapping around. The `theme` prop is optional and defaults to the
  * light theme.
  *
- * If you want to theme the entire app, you should use this component at the root.
- * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ * If you want to theme the entire app, you should use this component at the root. You can also
+ * use this component to apply a different theme to only a part of the tree.
  *
- * You can also use this component to apply a different theme to only a part of the tree.
+ * By default, the topmost `ThemeProvider` in the tree will apply the recommended
+ * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
  *
  * @example
  * <ThemeProvider theme='os'>
@@ -40,6 +54,11 @@ declare type ThemeProviderOwnProps = {
  * <ThemeProvider as='body'>
  *   <App />
  * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
+ *  <App />
+ * </ThemeProvider>
  */
 export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", ThemeProviderOwnProps>;
 export default ThemeProvider;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme, useMediaQuery, useMergedRefs } from '../utils';
+import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, } from '../utils';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 /**
@@ -12,10 +12,11 @@ import '@itwin/itwinui-variables/index.css';
  * that it is wrapping around. The `theme` prop is optional and defaults to the
  * light theme.
  *
- * If you want to theme the entire app, you should use this component at the root.
- * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ * If you want to theme the entire app, you should use this component at the root. You can also
+ * use this component to apply a different theme to only a part of the tree.
  *
- * You can also use this component to apply a different theme to only a part of the tree.
+ * By default, the topmost `ThemeProvider` in the tree will apply the recommended
+ * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
  *
  * @example
  * <ThemeProvider theme='os'>
@@ -26,26 +27,42 @@ import '@itwin/itwinui-variables/index.css';
  * <ThemeProvider as='body'>
  *   <App />
  * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
+ *  <App />
+ * </ThemeProvider>
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a;
-    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const { theme, children, themeOptions, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = useMergedRefs(rootRef, ref);
     const hasChildren = React.Children.count(children) > 0;
     const parentContext = React.useContext(ThemeContext);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
+    // if no children, then fallback to this wrapper component which calls useTheme
+    if (!hasChildren) {
+        return (React.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+    }
+    // now that we know there are children, we can render the root and provide the context value
+    return (React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
+        React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
+});
+export default ThemeProvider;
+export const ThemeContext = React.createContext(undefined);
+const Root = React.forwardRef((props, forwardedRef) => {
+    var _a, _b, _c;
+    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const ref = React.useRef(null);
+    const mergedRefs = useMergedRefs(ref, forwardedRef);
     const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
     const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
     const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
-    // only provide context if wrapped around children
-    return hasChildren ? (React.createElement(ThemeContext.Provider, { value: { theme, themeOptions, rootRef } },
-        React.createElement(Element, { className: cx('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children))) : (
-    // otherwise just apply theme on the root using this wrapper component
-    React.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+    const isThemeAlreadySet = useIsThemeAlreadySet((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
+    return (React.createElement(Element, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });
-export default ThemeProvider;
-export const ThemeContext = React.createContext(undefined);
 const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     useTheme(theme, themeOptions);
     return React.createElement(React.Fragment, null);

package/esm/core/utils/components/Popover.d.ts

@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/esm/core/utils/hooks/index.d.ts

@@ -9,3 +9,4 @@ export * from './useMediaQuery';
 export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
+export * from './useIsThemeAlreadySet';

package/esm/core/utils/hooks/index.js

@@ -13,3 +13,4 @@ export * from './useMediaQuery';
 export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
+export * from './useIsThemeAlreadySet';

package/esm/core/utils/hooks/useIsThemeAlreadySet.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Hook that returns a boolean ref which is true if either:
+ * - There is a parent `ThemeProvider` in the tree, or
+ * - The <body> element has data-iui-theme attribute
+ */
+export declare const useIsThemeAlreadySet: (ownerDocument?: Document | undefined) => React.MutableRefObject<boolean>;

package/esm/core/utils/hooks/useIsThemeAlreadySet.js

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { ThemeContext } from '../../ThemeProvider/ThemeProvider';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import { getDocument } from '../functions';
+/**
+ * Hook that returns a boolean ref which is true if either:
+ * - There is a parent `ThemeProvider` in the tree, or
+ * - The <body> element has data-iui-theme attribute
+ */
+export const useIsThemeAlreadySet = (ownerDocument = getDocument()) => {
+    const parentContext = React.useContext(ThemeContext);
+    const isThemeAlreadySet = React.useRef(!!parentContext || !!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.dataset.iuiTheme));
+    useIsomorphicLayoutEffect(() => {
+        if (parentContext ||
+            (ownerDocument && !!ownerDocument.body.dataset.iuiTheme)) {
+            isThemeAlreadySet.current = true;
+        }
+        return () => {
+            isThemeAlreadySet.current = false;
+        };
+    }, [parentContext, ownerDocument]);
+    return isThemeAlreadySet;
+};

package/esm/core/utils/hooks/useTheme.js

@@ -2,10 +2,9 @@
  * 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 { ThemeContext } from '../../ThemeProvider/ThemeProvider';
 import { getDocument, getWindow } from '../functions';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import { useIsThemeAlreadySet } from './useIsThemeAlreadySet';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 /**
@@ -19,11 +18,10 @@ import '@itwin/itwinui-variables/index.css';
  */
 export const useTheme = (theme, themeOptions) => {
     var _a;
-    const themeContext = React.useContext(ThemeContext);
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
+    const isThemeAlreadySet = useIsThemeAlreadySet(ownerDocument);
     useIsomorphicLayoutEffect(() => {
-        // exit early if theme was already set by provider or is present on <body>
-        if (themeContext || !ownerDocument || ownerDocument.body.dataset.iuiTheme) {
+        if (!ownerDocument || isThemeAlreadySet.current) {
             return;
         }
         ownerDocument.body.classList.toggle('iui-root', true);
@@ -41,7 +39,7 @@ export const useTheme = (theme, themeOptions) => {
                 return;
             }
         }
-    }, [theme, themeContext, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
+    }, [theme, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
 };
 /**
  * Helper function to apply the specified theme, or detect the OS theme.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -47,8 +47,8 @@
   ],
   "scripts": {
     "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
-    "build:watch": "yarn clean:build && concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
-    "clean:build": "yarn clean:coverage && rimraf esm && rimraf cjs",
+    "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
+    "clean:build": "rimraf esm && rimraf cjs",
     "clean:coverage": "rimraf coverage",
     "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules",
     "test": "jest",
@@ -56,11 +56,14 @@
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && node ../configs/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
-    "dev": "yarn build:watch",
+    "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn dev:types\"",
+    "dev:esm": "swc src -d esm --watch",
+    "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs",
+    "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"",
     "createComponent": "node ../../scripts/createComponent.js"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.1.0",
+    "@itwin/itwinui-css": "^1.2.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^1.0.0",
     "@tippyjs/react": "^4.2.6",
@@ -72,6 +75,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@swc/cli": "^0.1.57",
+    "@swc/core": "^1.3.21",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^14.1.1",