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

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

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

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -40,15 +40,17 @@ require("@itwin/itwinui-variables/index.css");
  * </ThemeProvider>
  */
 exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
-    const { theme, children, themeOptions, ...rest } = props;
+    var _a;
+    const { theme: themeProp, 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 !== 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 }));
+        return (react_1.default.createElement(ThemeLogicWrapper, { theme: 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 },
@@ -69,7 +71,8 @@ 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 = ({ theme, themeOptions }) => {
+const ThemeLogicWrapper = (props) => {
+    const { theme, themeOptions } = props;
     (0, utils_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null);
 };

package/cjs/core/index.d.ts

@@ -104,5 +104,5 @@ export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote,
 export type { AnchorProps, BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, } from './utils';

package/cjs/core/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
 exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = void 0;
-exports.Icon = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = void 0;
+exports.Flex = exports.Icon = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -182,3 +182,4 @@ Object.defineProperty(exports, "useTheme", { enumerable: true, get: function ()
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return utils_1.ColorValue; } });
 Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return utils_1.MiddleTextTruncation; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return utils_1.Icon; } });
+Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return utils_1.Flex; } });

package/cjs/core/utils/components/Flex.d.ts

@@ -0,0 +1,142 @@
+import React from 'react';
+import type { AnyString } from '../types';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import '@itwin/itwinui-css/css/utils.css';
+declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
+/**
+ * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
+ */
+declare type SizeToken = typeof sizeTokens[number];
+declare type FlexOwnProps = {
+    /**
+     * Value of the `display` property.
+     * @default 'flex'
+     */
+    display?: 'flex' | 'inline-flex';
+    /**
+     * Value of the `justify-content` property.
+     * @default 'flex-start'
+     */
+    justifyContent?: React.CSSProperties['justifyContent'];
+    /**
+     * Value of the `align-items` property. Defaults to 'center' but you
+     * might want to use 'flex-start' in some cases.
+     * @default 'center'
+     */
+    alignItems?: React.CSSProperties['alignItems'];
+    /**
+     * Value of the `gap` property.
+     *
+     * Supports aliases for iTwinUI size tokens:
+     * 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
+     *
+     * Also accepts any valid css value (e.g. "1rem" or "2px")
+     *
+     * @default 'xs'
+     */
+    gap?: SizeToken | AnyString;
+    /**
+     * Value of the `direction` property.
+     * @default 'row'
+     */
+    flexDirection?: React.CSSProperties['flexDirection'];
+    /**
+     * Value of the `flex-wrap` property.
+     * @default 'nowrap'
+     */
+    flexWrap?: React.CSSProperties['flexWrap'];
+};
+declare type FlexSpacerOwnProps = {
+    /**
+     * Value of the `flex` css property.
+     *
+     * This may need to be adjusted if you're also setting `flex` on
+     * other `Flex.Item`s.
+     *
+     * @default 999
+     */
+    flex?: React.CSSProperties['flex'];
+};
+declare type FlexItemOwnProps = {
+    /**
+     * Gap before the flex item, if different from the `gap` set on `Flex` component.
+     */
+    gapBefore?: SizeToken | AnyString;
+    /**
+     * Gap after the flex item, if different from the `gap` set on `Flex` component.
+     */
+    gapAfter?: SizeToken | AnyString;
+    /**
+     * Value of the `flex` css property.
+     * @default 'auto'
+     */
+    flex?: React.CSSProperties['flex'];
+    /**
+     * Value of the `align-self` css property.
+     * @default 'auto'
+     */
+    alignSelf?: React.CSSProperties['alignSelf'];
+};
+/**
+ * A utility component that makes it easier to work with CSS flexbox
+ * and iTwinUI design tokens. Supports all flex properties.
+ * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
+ *
+ * @example
+ * <Flex>
+ *   <Icon>...</Icon>
+ *   <Text>...</Text>
+ *   <Flex.Spacer />
+ *   <IconButton>...</IconButton>
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='m' flexWrap='wrap'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   ...
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='l'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item gapBefore='s'>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ * </Flex>
+ */
+export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> & {
+    /**
+     * Subcomponent that allows customizing flex items through the
+     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
+     *
+     * The `gapBefore`/`gapAfter` props can used to override the gap at an
+     * individual level, for when you need a different gap than the one
+     * set in the parent `Flex`.
+     *
+     * @example
+     * <Flex gap='l'>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item gapBefore='s'>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     * </Flex>
+     */
+    Item: PolymorphicForwardRefComponent<"div", FlexItemOwnProps>;
+    /**
+     * Subcomponent that fills up the available space using a really large `flex` value.
+     * Useful when you want to push certain items to one edge.
+     *
+     * @example
+     * <Flex>
+     *   <div>this stays on the left</div>
+     *   <Flex.Spacer /> // this fills up the available empty space
+     *   <div>this gets pushed all the way to the end</div>
+     * </Flex>
+     */
+    Spacer: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
+};
+export declare type FlexProps = PolymorphicComponentProps<'div', FlexOwnProps>;
+export declare type FlexItemProps = PolymorphicComponentProps<'div', FlexItemOwnProps>;
+export declare type FlexSpacerProps = PolymorphicComponentProps<'div', FlexSpacerOwnProps>;
+export default Flex;

package/cjs/core/utils/components/Flex.js

@@ -0,0 +1,131 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/utils.css");
+const sizeTokens = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+];
+const getValueForToken = (token) => {
+    if (sizeTokens.includes(token)) {
+        return `var(--iui-size-${token})`;
+    }
+    return token;
+};
+// ----------------------------------------------------------------------------
+// Main Flex component
+const FlexComponent = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-flex', className), style: {
+            '--iui-flex-display': display,
+            '--iui-flex-direction': flexDirection,
+            '--iui-flex-justify': justifyContent,
+            '--iui-flex-align': alignItems,
+            '--iui-flex-gap': getValueForToken(gap),
+            '--iui-flex-wrap': flexWrap,
+            ...style,
+        }, ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Flex.Spacer component
+const FlexSpacer = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', flex, className, style, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Flex.Item subcomponent
+const FlexItem = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
+    const _style = {
+        '--iui-flex-item-flex': flex,
+        '--iui-flex-item-align': alignSelf,
+        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+        ...(gapBefore !== undefined && {
+            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
+        }),
+        ...(gapAfter !== undefined && {
+            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
+        }),
+        ...style,
+    };
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Exported compound component
+/**
+ * A utility component that makes it easier to work with CSS flexbox
+ * and iTwinUI design tokens. Supports all flex properties.
+ * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
+ *
+ * @example
+ * <Flex>
+ *   <Icon>...</Icon>
+ *   <Text>...</Text>
+ *   <Flex.Spacer />
+ *   <IconButton>...</IconButton>
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='m' flexWrap='wrap'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   ...
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='l'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item gapBefore='s'>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ * </Flex>
+ */
+exports.Flex = Object.assign(FlexComponent, {
+    /**
+     * Subcomponent that allows customizing flex items through the
+     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
+     *
+     * The `gapBefore`/`gapAfter` props can used to override the gap at an
+     * individual level, for when you need a different gap than the one
+     * set in the parent `Flex`.
+     *
+     * @example
+     * <Flex gap='l'>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item gapBefore='s'>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     * </Flex>
+     */
+    Item: FlexItem,
+    /**
+     * Subcomponent that fills up the available space using a really large `flex` value.
+     * Useful when you want to push certain items to one edge.
+     *
+     * @example
+     * <Flex>
+     *   <div>this stays on the left</div>
+     *   <Flex.Spacer /> // this fills up the available empty space
+     *   <div>this gets pushed all the way to the end</div>
+     * </Flex>
+     */
+    Spacer: FlexSpacer,
+});
+exports.default = exports.Flex;

package/cjs/core/utils/components/index.d.ts

@@ -7,3 +7,4 @@ export * from './MiddleTextTruncation';
 export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
+export * from './Flex';

package/cjs/core/utils/components/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./MiddleTextTruncation"), exports);
 __exportStar(require("./VirtualScroll"), exports);
 __exportStar(require("./VisuallyHidden"), exports);
 __exportStar(require("./Icon"), exports);
+__exportStar(require("./Flex"), exports);

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

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

package/esm/core/ThemeProvider/ThemeProvider.js

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

package/esm/core/index.d.ts

@@ -104,5 +104,5 @@ export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote,
 export type { AnchorProps, BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, } from './utils';

package/esm/core/index.js

@@ -55,4 +55,4 @@ export { Tooltip } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import type { AnyString } from '../types';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import '@itwin/itwinui-css/css/utils.css';
+declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
+/**
+ * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
+ */
+declare type SizeToken = typeof sizeTokens[number];
+declare type FlexOwnProps = {
+    /**
+     * Value of the `display` property.
+     * @default 'flex'
+     */
+    display?: 'flex' | 'inline-flex';
+    /**
+     * Value of the `justify-content` property.
+     * @default 'flex-start'
+     */
+    justifyContent?: React.CSSProperties['justifyContent'];
+    /**
+     * Value of the `align-items` property. Defaults to 'center' but you
+     * might want to use 'flex-start' in some cases.
+     * @default 'center'
+     */
+    alignItems?: React.CSSProperties['alignItems'];
+    /**
+     * Value of the `gap` property.
+     *
+     * Supports aliases for iTwinUI size tokens:
+     * 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
+     *
+     * Also accepts any valid css value (e.g. "1rem" or "2px")
+     *
+     * @default 'xs'
+     */
+    gap?: SizeToken | AnyString;
+    /**
+     * Value of the `direction` property.
+     * @default 'row'
+     */
+    flexDirection?: React.CSSProperties['flexDirection'];
+    /**
+     * Value of the `flex-wrap` property.
+     * @default 'nowrap'
+     */
+    flexWrap?: React.CSSProperties['flexWrap'];
+};
+declare type FlexSpacerOwnProps = {
+    /**
+     * Value of the `flex` css property.
+     *
+     * This may need to be adjusted if you're also setting `flex` on
+     * other `Flex.Item`s.
+     *
+     * @default 999
+     */
+    flex?: React.CSSProperties['flex'];
+};
+declare type FlexItemOwnProps = {
+    /**
+     * Gap before the flex item, if different from the `gap` set on `Flex` component.
+     */
+    gapBefore?: SizeToken | AnyString;
+    /**
+     * Gap after the flex item, if different from the `gap` set on `Flex` component.
+     */
+    gapAfter?: SizeToken | AnyString;
+    /**
+     * Value of the `flex` css property.
+     * @default 'auto'
+     */
+    flex?: React.CSSProperties['flex'];
+    /**
+     * Value of the `align-self` css property.
+     * @default 'auto'
+     */
+    alignSelf?: React.CSSProperties['alignSelf'];
+};
+/**
+ * A utility component that makes it easier to work with CSS flexbox
+ * and iTwinUI design tokens. Supports all flex properties.
+ * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
+ *
+ * @example
+ * <Flex>
+ *   <Icon>...</Icon>
+ *   <Text>...</Text>
+ *   <Flex.Spacer />
+ *   <IconButton>...</IconButton>
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='m' flexWrap='wrap'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   ...
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='l'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item gapBefore='s'>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ * </Flex>
+ */
+export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> & {
+    /**
+     * Subcomponent that allows customizing flex items through the
+     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
+     *
+     * The `gapBefore`/`gapAfter` props can used to override the gap at an
+     * individual level, for when you need a different gap than the one
+     * set in the parent `Flex`.
+     *
+     * @example
+     * <Flex gap='l'>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item gapBefore='s'>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     * </Flex>
+     */
+    Item: PolymorphicForwardRefComponent<"div", FlexItemOwnProps>;
+    /**
+     * Subcomponent that fills up the available space using a really large `flex` value.
+     * Useful when you want to push certain items to one edge.
+     *
+     * @example
+     * <Flex>
+     *   <div>this stays on the left</div>
+     *   <Flex.Spacer /> // this fills up the available empty space
+     *   <div>this gets pushed all the way to the end</div>
+     * </Flex>
+     */
+    Spacer: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
+};
+export declare type FlexProps = PolymorphicComponentProps<'div', FlexOwnProps>;
+export declare type FlexItemProps = PolymorphicComponentProps<'div', FlexItemOwnProps>;
+export declare type FlexSpacerProps = PolymorphicComponentProps<'div', FlexSpacerOwnProps>;
+export default Flex;

package/esm/core/utils/components/Flex.js

@@ -0,0 +1,125 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 '@itwin/itwinui-css/css/utils.css';
+const sizeTokens = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+];
+const getValueForToken = (token) => {
+    if (sizeTokens.includes(token)) {
+        return `var(--iui-size-${token})`;
+    }
+    return token;
+};
+// ----------------------------------------------------------------------------
+// Main Flex component
+const FlexComponent = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-flex', className), style: {
+            '--iui-flex-display': display,
+            '--iui-flex-direction': flexDirection,
+            '--iui-flex-justify': justifyContent,
+            '--iui-flex-align': alignItems,
+            '--iui-flex-gap': getValueForToken(gap),
+            '--iui-flex-wrap': flexWrap,
+            ...style,
+        }, ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Flex.Spacer component
+const FlexSpacer = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', flex, className, style, ...rest } = props;
+    return (React.createElement(Element, { className: cx('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Flex.Item subcomponent
+const FlexItem = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
+    const _style = {
+        '--iui-flex-item-flex': flex,
+        '--iui-flex-item-align': alignSelf,
+        '--iui-flex-item-gap-before': getValueForToken(gapBefore),
+        '--iui-flex-item-gap-after': getValueForToken(gapAfter),
+        ...(gapBefore !== undefined && {
+            '--iui-flex-item-gap-before-toggle': 'var(--iui-on)',
+        }),
+        ...(gapAfter !== undefined && {
+            '--iui-flex-item-gap-after-toggle': 'var(--iui-on)',
+        }),
+        ...style,
+    };
+    return (React.createElement(Element, { className: cx('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+});
+// ----------------------------------------------------------------------------
+// Exported compound component
+/**
+ * A utility component that makes it easier to work with CSS flexbox
+ * and iTwinUI design tokens. Supports all flex properties.
+ * Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
+ *
+ * @example
+ * <Flex>
+ *   <Icon>...</Icon>
+ *   <Text>...</Text>
+ *   <Flex.Spacer />
+ *   <IconButton>...</IconButton>
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='m' flexWrap='wrap'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   ...
+ * </Flex>
+ *
+ * @example
+ * <Flex gap='l'>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ *   <Flex.Item gapBefore='s'>...</Flex.Item>
+ *   <Flex.Item>...</Flex.Item>
+ * </Flex>
+ */
+export const Flex = Object.assign(FlexComponent, {
+    /**
+     * Subcomponent that allows customizing flex items through the
+     * `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
+     *
+     * The `gapBefore`/`gapAfter` props can used to override the gap at an
+     * individual level, for when you need a different gap than the one
+     * set in the parent `Flex`.
+     *
+     * @example
+     * <Flex gap='l'>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     *   <Flex.Item gapBefore='s'>...</Flex.Item>
+     *   <Flex.Item>...</Flex.Item>
+     * </Flex>
+     */
+    Item: FlexItem,
+    /**
+     * Subcomponent that fills up the available space using a really large `flex` value.
+     * Useful when you want to push certain items to one edge.
+     *
+     * @example
+     * <Flex>
+     *   <div>this stays on the left</div>
+     *   <Flex.Spacer /> // this fills up the available empty space
+     *   <div>this gets pushed all the way to the end</div>
+     * </Flex>
+     */
+    Spacer: FlexSpacer,
+});
+export default Flex;

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

@@ -7,3 +7,4 @@ export * from './MiddleTextTruncation';
 export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
+export * from './Flex';

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

@@ -11,3 +11,4 @@ export * from './MiddleTextTruncation';
 export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
+export * from './Flex';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.4.0-dev.1",
+  "version": "2.4.0-dev.3",
   "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.1",
+    "@itwin/itwinui-css": "1.5.0-dev.2",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
-    "@itwin/itwinui-variables": "2.0.0-dev.0",
+    "@itwin/itwinui-variables": "2.0.0-dev.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",