@itwin/itwinui-react 2.4.0-dev.3 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 2.4.0
+
+### Minor Changes
+
+- 054bc3ba: `<Avatar>`'s `image` now supports passing `<svg>` too
+
+  ```tsx
+  <Avatar image={<SvgUser />} />
+  ```
+
+- 06476ada: Added new `Flex` utility component and optional `Flex.Spacer`/`Flex.Item` subcomponents to make it easier to work with CSS flexbox and use iTwinUI design tokens for gap.
+
+  ```jsx
+  <Flex gap='xl' justifyContent='center'>
+    <div>...</div>
+    <div>...</div>
+  </Flex>
+  ```
+
+  ```jsx
+  <Flex>
+    <Flex.Item>...</Flex.Item>
+    <Flex.Spacer />
+    <Flex.Item>...</Flex.Item>
+    <Flex.Item>...</Flex.Item>
+  </Flex>
+  ```
+
+- 44446e50: `DropdownButton` now exposes `dropdownMenuProps` to allow control over all popover props, such as `placement`.
+
+### Patch Changes
+
+- Updated dependencies
+  - @itwin/itwinui-css@1.5.0
+
 ## 2.3.0
 
 ### Minor Changes

package/cjs/core/Avatar/Avatar.d.ts

@@ -28,12 +28,11 @@ export declare type AvatarProps = {
      */
     abbreviation?: string;
     /**
-     * User image to be displayed. MUST be an `<img>` element!
+     * User image to be displayed. Can be `<img>` or `<svg>` or anything else.
      */
     image?: JSX.Element;
     /**
-     * Color of the icon. You can use `getUserColor` function to generate color from user name or email.
-     * @default 'white'
+     * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
      */
     backgroundColor?: string;
     /**

package/cjs/core/Avatar/Avatar.js

@@ -34,10 +34,12 @@ exports.defaultStatusTitles = {
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 const Avatar = (props) => {
-    const { size = 'small', status, abbreviation, image, backgroundColor = 'white', title, translatedStatusTitles, className, style, ...rest } = props;
+    const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     (0, utils_1.useTheme)();
     const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: style, ...rest }, image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ...rest },
+        !image && (react_1.default.createElement("abbr", { className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+        image,
         react_1.default.createElement("span", { className: 'iui-stroke' }),
         status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
                 [`iui-${status}`]: !!status,

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -13,7 +13,7 @@ declare type RootProps = {
      *
      * @default 'light'
      */
-    theme?: ThemeType | 'inherit';
+    theme?: ThemeType;
     themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
         /**
          * Whether or not the element should apply the recommended `background-color` on itself.

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -40,17 +40,15 @@ require("@itwin/itwinui-variables/index.css");
  * </ThemeProvider>
  */
 exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
-    var _a;
-    const { theme: themeProp, children, themeOptions, ...rest } = props;
+    const { theme, children, themeOptions, ...rest } = props;
     const rootRef = react_1.default.useRef(null);
     const mergedRefs = (0, utils_1.useMergedRefs)(rootRef, ref);
     const hasChildren = react_1.default.Children.count(children) > 0;
     const parentContext = react_1.default.useContext(exports.ThemeContext);
-    const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
     const contextValue = react_1.default.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
     // if no children, then fallback to this wrapper component which calls useTheme
     if (!hasChildren) {
-        return (react_1.default.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+        return (react_1.default.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_1.default.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: mergedRefs, ...rest },
@@ -71,8 +69,7 @@ const Root = react_1.default.forwardRef((props, forwardedRef) => {
     const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : !isThemeAlreadySet.current;
     return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
 });
-const ThemeLogicWrapper = (props) => {
-    const { theme, themeOptions } = props;
+const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     (0, utils_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null);
 };

package/esm/core/Avatar/Avatar.d.ts

@@ -28,12 +28,11 @@ export declare type AvatarProps = {
      */
     abbreviation?: string;
     /**
-     * User image to be displayed. MUST be an `<img>` element!
+     * User image to be displayed. Can be `<img>` or `<svg>` or anything else.
      */
     image?: JSX.Element;
     /**
-     * Color of the icon. You can use `getUserColor` function to generate color from user name or email.
-     * @default 'white'
+     * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
      */
     backgroundColor?: string;
     /**

package/esm/core/Avatar/Avatar.js

@@ -28,10 +28,12 @@ export const defaultStatusTitles = {
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 export const Avatar = (props) => {
-    const { size = 'small', status, abbreviation, image, backgroundColor = 'white', title, translatedStatusTitles, className, style, ...rest } = props;
+    const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     useTheme();
     const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement("span", { className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: style, ...rest }, image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (React.createElement("span", { className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ...rest },
+        !image && (React.createElement("abbr", { className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+        image,
         React.createElement("span", { className: 'iui-stroke' }),
         status && (React.createElement("span", { title: statusTitles[status], className: cx('iui-status', {
                 [`iui-${status}`]: !!status,

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

@@ -13,7 +13,7 @@ declare type RootProps = {
      *
      * @default 'light'
      */
-    theme?: ThemeType | 'inherit';
+    theme?: ThemeType;
     themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
         /**
          * Whether or not the element should apply the recommended `background-color` on itself.

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -34,17 +34,15 @@ import '@itwin/itwinui-variables/index.css';
  * </ThemeProvider>
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a;
-    const { theme: themeProp, children, themeOptions, ...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 theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
     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, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+        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 },
@@ -65,8 +63,7 @@ const Root = React.forwardRef((props, forwardedRef) => {
     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));
 });
-const ThemeLogicWrapper = (props) => {
-    const { theme, themeOptions } = props;
+const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     useTheme(theme, themeOptions);
     return React.createElement(React.Fragment, null);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.4.0-dev.3",
+  "version": "2.4.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -62,9 +62,9 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "1.5.0-dev.2",
+    "@itwin/itwinui-css": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
-    "@itwin/itwinui-variables": "2.0.0-dev.1",
+    "@itwin/itwinui-variables": "^1.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",