@itwin/itwinui-react 3.3.3 → 3.4.0

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -116,7 +116,7 @@ const useParentThemeAndContext = (rootElement) => {
     const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
     const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
     const parentThemeRef = (0, index_js_1.useLatestRef)(parentContext?.theme);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         // bail if we already have theme from context
         if (parentThemeRef.current) {
             return;
@@ -155,7 +155,7 @@ const useParentThemeAndContext = (rootElement) => {
  * dynamically import it (if possible) and fallback to loading it from a CDN.
  */
 const FallbackStyles = ({ root }) => {
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         // bail if styles are already loaded
         if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
             return;

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

@@ -172,17 +172,17 @@ const useVirtualization = (props) => {
     const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(onResize);
     // Find scrollable parent
     // Needed only on init
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
+    (0, index_js_1.useLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = React.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -215,7 +215,7 @@ const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
@@ -227,7 +227,7 @@ const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!isMounted) {
             return;
         }
@@ -282,8 +282,8 @@ const useVirtualization = (props) => {
                 });
             }
         }
-    }, [scrollToIndex, isMounted]);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    }, [scrollToIndex, isMounted, itemsLength]);
+    (0, index_js_1.useLayoutEffect)(() => {
         if (!scrollContainerHeight) {
             return;
         }

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = void 0;
+exports.useLayoutEffect = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,6 +32,9 @@ const React = __importStar(require("react"));
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+exports.useLayoutEffect = useIsomorphicLayoutEffect;

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -33,7 +33,7 @@ const index_js_1 = require("../functions/index.js");
 const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
 const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {

package/cjs/core/utils/hooks/useOverflow.js

@@ -64,7 +64,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = (0, useResizeObserver_js_1.useResizeObserver)(updateContainerSize);
     const resizeObserverRef = React.useRef(observer);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -74,7 +74,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         if (!containerRef.current || disabled) {
             resizeObserverRef.current?.disconnect();
             return;
@@ -103,7 +103,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
+    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/esm/core/Carousel/CarouselSlider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import { getWindow, useMergedRefs, useLayoutEffect, Box, } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
@@ -23,7 +23,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
             index,
         })
         : child) ?? [], [children, idPrefix]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);

package/esm/core/ComboBox/ComboBox.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
 import { SelectTag } from '../Select/SelectTag.js';
 import { Text } from '../Typography/Text.js';
-import { mergeRefs, useLatestRef, useIsomorphicLayoutEffect, AutoclearingHiddenLiveRegion, useId, } from '../utils/index.js';
+import { mergeRefs, useLatestRef, useLayoutEffect, AutoclearingHiddenLiveRegion, useId, } from '../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
@@ -94,7 +94,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'close' });
         onHideRef.current?.();
     }, [onHideRef]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         // When the dropdown opens
         if (isOpen) {
             inputRef.current?.focus(); // Focus the input

package/esm/core/DatePicker/DatePicker.d.ts

@@ -96,6 +96,14 @@ type DatePickerProps = {
      * @default true
      */
     applyBackground?: boolean;
+    /**
+     * Whether dates outside the current month should be displayed (in a muted text style).
+     *
+     * It is recommended to set this to false. Currently it defaults to true for backward compatibility.
+     *
+     * @default true
+     */
+    showDatesOutsideMonth?: boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component

package/esm/core/DatePicker/DatePicker.js

@@ -110,7 +110,7 @@ export const generateLocalizedStrings = (locale) => {
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
 export const DatePicker = React.forwardRef((props, forwardedRef) => {
-    const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, ...rest } = props;
+    const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, monthYearProps, calendarProps, monthProps, weekDayProps, dayProps, weekProps, isDateDisabled, applyBackground = true, showDatesOutsideMonth = true, ...rest } = props;
     const monthNames = localizedNames?.months ?? defaultMonths;
     const shortDays = localizedNames?.shortDays ?? defaultShortDays;
     const longDays = localizedNames?.days ?? defaultLongDays;
@@ -152,8 +152,9 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
     const days = React.useMemo(() => {
         let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
-        // if its sunday, show one week before
-        if (0 === offsetToFirst) {
+        // If it's sunday, show one week before, but only if dates outside month are shown.
+        // (We do not want empty space at the top if dates outside month are not shown.)
+        if (0 === offsetToFirst && showDatesOutsideMonth) {
             offsetToFirst = 7;
         }
         const daysInMonth = [];
@@ -163,7 +164,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
             daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
         }
         return daysInMonth;
-    }, [displayedMonthIndex, displayedYear]);
+    }, [displayedMonthIndex, displayedYear, showDatesOutsideMonth]);
     const weeks = React.useMemo(() => {
         const weeksInMonth = [];
         const weekCount = Math.ceil(days.length / 7);
@@ -353,6 +354,10 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
                 return (React.createElement(Box, { as: 'div', key: `week-${displayedMonthIndex}-${weekIndex}`, ...weekProps, className: cx('iui-calendar-week', weekProps?.className) }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
                     const isDisabled = isDateDisabled?.(weekDay);
+                    const isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+                    if (isOutsideMonth && !showDatesOutsideMonth) {
+                        return (React.createElement(Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: cx(getDayClass(weekDay), dayProps?.className), "aria-hidden": true }));
+                    }
                     return (React.createElement(Box, { as: 'div', key: `day-${displayedMonthIndex}-${dayIndex}`, onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
                             needFocus.current &&
                             element?.focus(), ...dayProps, className: cx(getDayClass(weekDay), dayProps?.className) }, dateValue));

package/esm/core/Dialog/DialogMain.js

@@ -4,11 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useLayoutEffect, Box, } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
 import useDragAndDrop from '../utils/hooks/useDragAndDrop.js';
+import styles from '../../styles.js';
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -80,7 +81,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         }
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!isDraggable || !isOpen) {
             return;
         }
@@ -104,7 +105,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const content = (React.createElement(Box, { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
-            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
@@ -119,8 +119,9 @@ export const DialogMain = React.forwardRef((props, ref) => {
             }, onResizeEnd: setResizeStyle })),
         children));
     return (React.createElement(CSSTransition, { in: isOpen, classNames: {
-            enter: 'iui-dialog-animation-enter',
-            enterActive: 'iui-dialog-animation-enter-active',
+            enter: styles['iui-dialog-animation-enter'],
+            enterActive: styles['iui-dialog-animation-enter-active'],
+            enterDone: styles['iui-dialog-visible'],
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {

package/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -32,7 +32,8 @@ type FileUploadTemplateProps = {
     children?: React.ReactNode;
 };
 /**
- * @deprecated Use `FileUploadCard` instead.
+ * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#fileuploadcard) instead.
+ *
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -7,7 +7,8 @@ import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
 import { Anchor } from '../Typography/Anchor.js';
 /**
- * @deprecated Use `FileUploadCard` instead.
+ * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#fileuploadcard) instead.
+ *
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example

package/esm/core/LinkAction/LinkAction.d.ts

@@ -1,3 +1,4 @@
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -8,7 +9,7 @@
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkAction: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const LinkAction: PolymorphicForwardRefComponent<"a", {}>;
 /**
  * Polymorphic link box component.
  * Used to wrap around your component to use LinkAction.
@@ -20,4 +21,4 @@ export declare const LinkAction: import("../utils/props.js").PolymorphicForwardR
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkBox: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
+export declare const LinkBox: PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/LinkAction/LinkAction.js

@@ -2,7 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import cx from 'classnames';
 import { polymorphic } from '../utils/functions/polymorphic.js';
+import { Box } from '../utils/components/index.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -13,7 +16,10 @@ import { polymorphic } from '../utils/functions/polymorphic.js';
  *   </Surface>
  * </LinkBox>
  */
-export const LinkAction = polymorphic.a('iui-link-action');
+export const LinkAction = React.forwardRef((props, forwardedRef) => {
+    const { as: asProp = (!!props.href ? 'a' : 'button') } = props;
+    return (React.createElement(Box, { ...props, as: asProp, className: cx('iui-link-action', props.className), ref: forwardedRef }));
+});
 LinkAction.displayName = 'LinkAction';
 /**
  * Polymorphic link box component.

package/esm/core/Modal/Modal.d.ts

@@ -42,6 +42,18 @@ type ModalProps = {
      * Content of the modal.
      */
     children: React.ReactNode;
+    /**
+     * Props for customizing the title bar element.
+     */
+    titleBarProps?: React.ComponentPropsWithRef<'div'>;
+    /**
+     * Props for customizing the dialog-wrapper element.
+     */
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    /**
+     * Props for customizing the backdrop element.
+     */
+    backdropProps?: React.ComponentPropsWithRef<'div'>;
 } & Pick<DialogMainProps, 'isOpen' | 'styleType'>;
 /**
  * Modal component which can wrap any content.

package/esm/core/Modal/Modal.js

@@ -26,11 +26,11 @@ import { Dialog } from '../Dialog/Dialog.js';
  * </Modal>
  */
 export const Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
-    return (React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
-        React.createElement(Dialog.Backdrop, null),
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, wrapperProps, backdropProps, titleBarProps, ...rest } = props;
+    return (React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal, ...wrapperProps },
+        React.createElement(Dialog.Backdrop, { ...backdropProps }),
         React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
-            React.createElement(Dialog.TitleBar, { titleText: title }),
+            React.createElement(Dialog.TitleBar, { titleText: title, ...titleBarProps }),
             children)));
 });
 export default Modal;

package/esm/core/Popover/Popover.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, } from '@floating-ui/react';
-import { Box, cloneElementWithRef, useControlledState, useId, useIsomorphicLayoutEffect, useMergedRefs, } from '../utils/index.js';
+import { Box, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../utils/index.js';
 import { Portal } from '../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
@@ -101,7 +101,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     const popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
     const triggerId = `${useId()}-trigger`;
     const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!positionReference) {
             return;
         }

package/esm/core/ProgressIndicators/ProgressLinear.d.ts

@@ -23,7 +23,7 @@ type ProgressLinearProps = {
     /**
      * Status of progress.
      */
-    status?: 'positive' | 'negative';
+    status?: 'positive' | 'negative' | 'warning';
     /**
      * Pass props to ProgressLinear label group.
      */
@@ -32,16 +32,24 @@ type ProgressLinearProps = {
 /**
  * Shows progress on a linear bar
  * @example
- * Determinate
+ * // Determinate
  * <ProgressLinear value={25}/>
- * Indeterminate
+ * // Indeterminate
  * <ProgressLinear indeterminate={true}/>
- * Labeled - Center
+ * // Labeled - Center
  * <ProgressLinear value={50} labels={['Centered Label']} />
- * Labeled - Left & Right
+ * // Labeled - Left & Right
  * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * Positive / Negative.
- * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * // Status
+ * <ProgressLinear
+ *   status='positive'
+ *   labels={[
+ *    'Upload done!',
+ *    <Icon key='icon'>
+ *      <SvgStatusSuccess />{' '}
+ *    </Icon>
+ *   ]}
+ * />
  * <ProgressLinear status='negative' />
  */
 export declare const ProgressLinear: PolymorphicForwardRefComponent<"div", ProgressLinearProps>;

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -8,16 +8,24 @@ import { Box, getBoundedValue } from '../utils/index.js';
 /**
  * Shows progress on a linear bar
  * @example
- * Determinate
+ * // Determinate
  * <ProgressLinear value={25}/>
- * Indeterminate
+ * // Indeterminate
  * <ProgressLinear indeterminate={true}/>
- * Labeled - Center
+ * // Labeled - Center
  * <ProgressLinear value={50} labels={['Centered Label']} />
- * Labeled - Left & Right
+ * // Labeled - Left & Right
  * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * Positive / Negative.
- * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * // Status
+ * <ProgressLinear
+ *   status='positive'
+ *   labels={[
+ *    'Upload done!',
+ *    <Icon key='icon'>
+ *      <SvgStatusSuccess />{' '}
+ *    </Icon>
+ *   ]}
+ * />
  * <ProgressLinear status='negative' />
  */
 export const ProgressLinear = React.forwardRef((props, forwardedRef) => {

package/esm/core/ProgressIndicators/ProgressRadial.d.ts

@@ -14,7 +14,7 @@ type ProgressRadialProps = {
     /**
      * Status of Progress. Positive status always has 100% value.
      */
-    status?: 'positive' | 'negative';
+    status?: 'positive' | 'negative' | 'warning';
     /**
      * Size of the progress indicator. Defaults to medium size.
      * @default ''
@@ -32,9 +32,10 @@ type ProgressRadialProps = {
  * <ProgressRadial value={50} />
  * Indeterminate
  * <ProgressRadial indeterminate />
- * Positive / Negative
+ * // Positive / Negative / Warning
  * <ProgressRadial status='positive' />
  * <ProgressRadial status='negative' />
+ * <ProgressRadial status='warning' />
  * Centered Content
  * <ProgressRadial value={63}>63</ProgressRadial>
  * Small

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -12,9 +12,10 @@ import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, } from '../
  * <ProgressRadial value={50} />
  * Indeterminate
  * <ProgressRadial indeterminate />
- * Positive / Negative
+ * // Positive / Negative / Warning
  * <ProgressRadial status='positive' />
  * <ProgressRadial status='negative' />
+ * <ProgressRadial status='warning' />
  * Centered Content
  * <ProgressRadial value={63}>63</ProgressRadial>
  * Small
@@ -25,6 +26,7 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
     const statusMap = {
         negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
+        warning: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
     };
     return (React.createElement(Box, { className: cx('iui-progress-indicator-radial', className), "data-iui-size": size, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, ref: forwardedRef, style: {
             ...(value !== undefined && {

package/esm/core/Table/Table.js

@@ -7,7 +7,7 @@ import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
 import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -287,10 +287,19 @@ export const Table = (props) => {
         instance.selectedFlatRows,
         selectionMode,
     ]);
+    const headerRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
     const { scrollToIndex, tableRowRef } = useScrollToRow({ ...props, page });
     const columnRefs = React.useRef({});
     const previousTableWidth = React.useRef(0);
     const onTableResize = React.useCallback(({ width }) => {
+        // Handle header properties, regardless of whether the table is resizable
+        setHeaderScrollWidth(headerRef.current?.scrollWidth ?? 0);
+        setHeaderClientWidth(headerRef.current?.clientWidth ?? 0);
+        // Handle table properties, but only when table is resizable
+        if (!isResizable) {
+            return;
+        }
         instance.tableWidth = width;
         if (width === previousTableWidth.current) {
             return;
@@ -308,10 +317,18 @@ export const Table = (props) => {
             return;
         }
         dispatch({ type: tableResizeStartAction });
-    }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
+    }, [
+        dispatch,
+        state.columnResizing.columnWidths,
+        flatHeaders,
+        instance,
+        isResizable,
+    ]);
     const [resizeRef] = useResizeObserver(onTableResize);
+    const [headerScrollWidth, setHeaderScrollWidth] = React.useState(0);
+    const [headerClientWidth, setHeaderClientWidth] = React.useState(0);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (state.isTableResizing) {
             const newColumnWidths = {};
             flatHeaders.forEach((column) => {
@@ -323,8 +340,6 @@ export const Table = (props) => {
             dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths });
         }
     });
-    const headerRef = React.useRef(null);
-    const bodyRef = React.useRef(null);
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
@@ -374,9 +389,7 @@ export const Table = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, { ref: (element) => {
                 ownerDocument.current = element?.ownerDocument;
-                if (isResizable) {
-                    resizeRef(element);
-                }
+                resizeRef(element);
             }, id: id, ...getTableProps({
                 className: cx('iui-table', className),
                 style: {
@@ -468,12 +481,12 @@ export const Table = (props) => {
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 React.createElement(ShadowTemplate, null,
                     React.createElement("slot", null),
-                    React.createElement("div", { "aria-hidden": true, style: {
+                    rows.length === 0 && headerScrollWidth > headerClientWidth && (React.createElement("div", { "aria-hidden": true, style: {
                             // This ensures that the table-body is always the same width as the table-header,
                             // even if the table has no rows. See https://github.com/iTwin/iTwinUI/pull/1725
-                            width: headerRef.current?.scrollWidth,
+                            width: headerScrollWidth,
                             height: 0.1,
-                        } })),
+                        } }))),
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
                 isLoading && data.length === 0 && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement(ProgressRadial, { indeterminate: true }))),