@itwin/itwinui-react 3.5.0 → 3.6.0

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

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineClamp = 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 = __importStar(require("react"));
+const Box_js_1 = require("./Box.js");
+const ShadowRoot_js_1 = require("./ShadowRoot.js");
+/** @private */
+exports.LineClamp = React.forwardRef((props, forwardedRef) => {
+    const { lines, children, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { ref: forwardedRef, ...rest, style: { '--_iui-line-clamp': lines, ...props.style } },
+        React.createElement(ShadowRoot_js_1.ShadowRoot, { css: css },
+            React.createElement("slot", null)),
+        children));
+});
+const css = /* css */ `
+  :host {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: var(--_iui-line-clamp, 3);
+    -webkit-box-orient: vertical;
+  }
+`;

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

@@ -11,3 +11,4 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
+export * from './LineClamp.js';

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

@@ -31,3 +31,4 @@ __exportStar(require("./Box.js"), exports);
 __exportStar(require("./ButtonBase.js"), exports);
 __exportStar(require("./Portal.js"), exports);
 __exportStar(require("./ShadowRoot.js"), exports);
+__exportStar(require("./LineClamp.js"), exports);

package/cjs/core/utils/icons/SvgStatusError.js

@@ -32,6 +32,6 @@ const React = __importStar(require("react"));
 const Svg_js_1 = require("./Svg.js");
 const SvgStatusError = (props) => {
     return (React.createElement(Svg_js_1.Svg, { ...props },
-        React.createElement("path", { d: 'm8 0a8 8 0 1 0 8 8 8 8 0 0 0 -8-8zm1 12h-2v-2h2zm0-3h-2v-5h2z' })));
+        React.createElement("path", { d: 'M9 12H7v-2h2v2Zm0-3H7V4h2v5Zm2.314-9H4.686L0 4.686v6.628L4.686 16h6.628L16 11.314V4.686L11.314 0Z' })));
 };
 exports.SvgStatusError = SvgStatusError;

package/esm/core/Carousel/Carousel.d.ts

@@ -48,7 +48,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -92,7 +92,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                  */
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -129,7 +129,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -173,7 +173,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                  */
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -15,7 +15,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -41,7 +41,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -78,7 +78,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -104,7 +104,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/esm/core/Dialog/Dialog.js

@@ -11,26 +11,28 @@ import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../utils/index.js';
+import { Transition } from 'react-transition-group';
 const DialogComponent = React.forwardRef((props, ref) => {
     const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, portal = false, ...rest } = props;
     const dialogRootRef = React.useRef(null);
-    return (React.createElement(DialogContext.Provider, { value: {
-            isOpen,
-            onClose,
-            closeOnEsc,
-            closeOnExternalClick,
-            isDismissible,
-            preventDocumentScroll,
-            trapFocus,
-            setFocus,
-            isDraggable,
-            isResizable,
-            relativeTo,
-            dialogRootRef,
-            placement,
-        } },
-        React.createElement(Portal, { portal: portal },
-            React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: useMergedRefs(ref, dialogRootRef), ...rest }))));
+    return (React.createElement(Transition, { in: isOpen, timeout: { exit: 600 }, mountOnEnter: true, unmountOnExit: true },
+        React.createElement(DialogContext.Provider, { value: {
+                isOpen,
+                onClose,
+                closeOnEsc,
+                closeOnExternalClick,
+                isDismissible,
+                preventDocumentScroll,
+                trapFocus,
+                setFocus,
+                isDraggable,
+                isResizable,
+                relativeTo,
+                dialogRootRef,
+                placement,
+            } },
+            React.createElement(Portal, { portal: portal },
+                React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: useMergedRefs(ref, dialogRootRef), ...rest })))));
 });
 /**
  * Dialog component.

package/esm/core/Dialog/DialogContext.d.ts

@@ -3,6 +3,10 @@ import type { PortalProps } from '../utils/index.js';
 export type DialogContextProps = {
     /**
      * Flag whether dialog should be shown.
+     *
+     * It is recommended to directly pass the boolean condition to this prop instead of rendering the `Dialog`
+     * conditionally with `isOpen` hard-coded to `true`. One benefit of this is getting an exit animation.
+     *
      * @default false
      */
     isOpen?: boolean;

package/esm/core/Dialog/DialogMain.js

@@ -120,7 +120,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
                     }
                 }, onResizeEnd: setResizeStyle }))),
         children));
-    return (React.createElement(Transition, { in: isOpen, timeout: { exit: 600 }, 
+    return (React.createElement(Transition, { in: isOpen, appear: true, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
             previousFocusedElement.current = dialogRef.current?.ownerDocument

package/esm/core/Dialog/DialogTitleBar.js

@@ -34,7 +34,7 @@ export const DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
             'iui-dialog-title-bar-filled': isDraggable,
         }), ref: ref, onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle, null, titleText),
-        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close', "data-iui-shift": 'right' },
             React.createElement(SvgClose, null)))))));
 }), {
     Title: DialogTitleBarTitle,

package/esm/core/InputGroup/InputGroup.d.ts

@@ -12,6 +12,10 @@ type InputGroupProps = {
     status?: 'positive' | 'warning' | 'negative';
     /**
      * Message below the group. Does not apply to 'inline' group.
+     *
+     * When `typeof message === "string"`, it is automatically wrapped with {@link StatusMessage}.
+     * If you are passing a non-string message that is not `<StatusMessage>`, you may need to wrap it with
+     * `<StatusMessage>` yourself for proper styling of `message`.
      */
     message?: React.ReactNode;
     /**

package/esm/core/InputGroup/InputGroup.js

@@ -24,11 +24,27 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
  * </InputGroup>
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
-    const { className, children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, labelProps, messageProps, innerProps, ...rest } = props;
+    const { className, children, disabled = false, displayStyle = 'default', label, status, required = false, labelProps, innerProps, message, svgIcon, messageProps, ...rest } = props;
     return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), "data-iui-status": status, ...rest },
         label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
         React.createElement(Box, { as: 'div', ...innerProps, className: cx('iui-input-group', innerProps?.className) }, children),
-        (message || status || svgIcon) && (React.createElement(StatusMessage, { iconProps: {
-                'aria-hidden': true,
-            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message))));
+        React.createElement(BottomMessage, { message: message, status: status, svgIcon: svgIcon, displayStyle: displayStyle, messageProps: messageProps })));
 });
+// ------------------------------------------------------------------------------------------------
+/**
+ * @private
+ * - When `typeof message !== 'string'`, `message` is returned as-is (e.g. when `message=<StatusMessage />`).
+ * - Else, it is wrapped in a `<StatusMessage />`.
+ */
+const BottomMessage = (props) => {
+    const { message, status, svgIcon, displayStyle, messageProps } = props;
+    if (message && typeof message !== 'string') {
+        return message;
+    }
+    if (message || status || svgIcon) {
+        return (React.createElement(StatusMessage, { iconProps: {
+                'aria-hidden': true,
+            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message));
+    }
+    return undefined;
+};

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -5,9 +5,9 @@ import type { InputProps } from '../Input/Input.js';
  * Input component with various additional decorations.
  * You can add icons, buttons and other various subcomponents to it.
  *
- * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
  *
- * @usage
+ * @example
  * <InputWithDecorations>
  *    <InputWithDecorations.Input />
  *    <InputWithDecorations.Icon>
@@ -26,68 +26,24 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
     Input: PolymorphicForwardRefComponent<"input", InputProps>;
     /**
      * Subcomponent to include button in your InputWithDecorations
+     *
+     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
+     * in `InputWithDecorations`.
      */
-    Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
-        label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+        styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
+    } & {
         as?: "button" | undefined;
     }>;
+    /**
+     * Subcomponent to include button in your InputWithDecorations.
+     *
+     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
+     * in `InputWithDecorations`.
+     */
+    Icon: PolymorphicForwardRefComponent<"span", Omit<import("../Icon/Icon.js").IconProps, "padded"> & {
+        padded?: boolean | undefined;
+    }>;
 };

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -3,33 +3,38 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
+import { Box, InputFlexContainer, InputFlexContainerButton, InputFlexContainerIcon, useSafeContext, } from '../utils/index.js';
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
     const { children, size, isDisabled, ...rest } = props;
     return (React.createElement(InputWithDecorationsContext.Provider, { value: { size, isDisabled } },
         React.createElement(InputFlexContainer, { isDisabled: isDisabled, size: size, ref: ref, ...rest }, children)));
 });
-//-------------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
 const InputWithDecorationsInput = React.forwardRef((props, ref) => {
     const { id: idProp, size, disabled: localDisabled, ...rest } = props;
     const { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
     return (React.createElement(Box, { as: 'input', ref: ref, "data-iui-size": size ?? contextSize, disabled: localDisabled ?? isDisabled, id: idProp, ...rest }));
 });
-//-------------------------------------------------------------------------------
+InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+// ----------------------------------------------------------------------------
 const InputWithDecorationsButton = React.forwardRef((props, ref) => {
     const { children, size, disabled: localDisabled, ...rest } = props;
     const { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
-    return (React.createElement(IconButton, { ref: ref, size: size ?? contextSize, styleType: 'borderless', disabled: localDisabled ?? isDisabled, ...rest }, children));
+    return (React.createElement(InputFlexContainerButton, { ref: ref, size: size ?? contextSize, disabled: localDisabled ?? isDisabled, ...rest }, children));
 });
+InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+// ----------------------------------------------------------------------------
+const InputWithDecorationsIcon = InputFlexContainerIcon;
+InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+// ----------------------------------------------------------------------------
 /**
  * Input component with various additional decorations.
  * You can add icons, buttons and other various subcomponents to it.
  *
- * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
  *
- * @usage
+ * @example
  * <InputWithDecorations>
  *    <InputWithDecorations.Input />
  *    <InputWithDecorations.Icon>
@@ -44,6 +49,16 @@ export const InputWithDecorations = Object.assign(InputWithDecorationsComponent,
     Input: InputWithDecorationsInput,
     /**
      * Subcomponent to include button in your InputWithDecorations
+     *
+     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
+     * in `InputWithDecorations`.
      */
     Button: InputWithDecorationsButton,
+    /**
+     * Subcomponent to include button in your InputWithDecorations.
+     *
+     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
+     * in `InputWithDecorations`.
+     */
+    Icon: InputWithDecorationsIcon,
 });