@itwin/itwinui-react 3.7.0 → 3.7.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.7.2
+
+### Patch Changes
+
+- [#1939](https://github.com/iTwin/iTwinUI/pull/1939): Fixed an issue in `ButtonGroup` where the overflow logic was running even when `overflowButton` prop was not passed.
+
+## 3.7.1
+
+### Patch Changes
+
+- [#1934](https://github.com/iTwin/iTwinUI/pull/1934): Fixed the types for `Table` column `filter` to allow `"includesSome"`, which is an already-supported filter function. Also improved the types for the `filter` prop to improve TS autocompletion.
+- [#1936](https://github.com/iTwin/iTwinUI/pull/1936): Fixed an issue in `ProgressRadial` where the visually hidden "Loading." text was sometimes incorrectly displayed for a short while in the beginning.
+
 ## 3.7.0
 
 ### Minor Changes

package/cjs/core/Avatar/Avatar.js

@@ -68,7 +68,7 @@ exports.defaultStatusTitles = {
 exports.Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', className), "data-iui-size": size !== 'medium' ? size : undefined, "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
         !image ? abbreviation?.substring(0, 2) : null,
         image,
         status ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, statusTitles[status]) : null));

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -79,7 +79,7 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
         childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
         childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
             getAvatarList(maxIcons),
-            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) }, childrenLength <= maxLength
+            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', 'iui-avatar-count', countIconProps?.className), "data-iui-size": iconSize !== 'medium' ? iconSize : undefined }, childrenLength <= maxLength
                 ? `${childrenLength - maxIcons}`
                 : `${maxLength}+`)))));
 });

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -71,12 +71,15 @@ exports.ButtonGroup = React.forwardRef((props, ref) => {
     const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
     const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
     const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
-    const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
+    const refs = (0, index_js_1.useMergedRefs)(!!overflowButton ? overflowRef : null, ref);
     return (React.createElement(react_1.FloatingDelayGroup, { delay: { open: 50, close: 250 } },
         React.createElement(exports.ButtonGroupContext.Provider, { value: orientation },
             React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', {
                     'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
                 }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
+                if (!overflowButton) {
+                    return children;
+                }
                 if (!(visibleCount < items.length)) {
                     return items;
                 }

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -46,8 +46,8 @@ const index_js_1 = require("../utils/index.js");
  */
 exports.HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
     const { className, items, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-breadcrumbs', 'iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'ol', className: (0, classnames_1.default)('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list') }, items.reduce((previous, current, index) => [
             ...previous,
             current,
             index !== items.length - 1 && (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -46,11 +46,12 @@ const index_js_1 = require("../utils/index.js");
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
     const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    const isMounted = (0, index_js_1.useIsClient)();
     // ShadowRoot is not supported on all elements, so we only use it for few common ones.
     const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
         React.createElement(index_js_1.ShadowRoot, { css: css },
             React.createElement("slot", null)),
-        childrenProp));
+        isMounted && childrenProp));
     return (React.createElement(index_js_1.Box, { as: asProp, className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
 // ----------------------------------------------------------------------------

package/cjs/react-table/react-table.d.ts

@@ -1,4 +1,9 @@
 import type { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactFragment, ReactNode } from 'react';
+/**
+ * This allows custom strings and keeps intellisense for string unions.
+ * See https://github.com/Microsoft/TypeScript/issues/29729
+ */
+type AnyString = string & {};
 export type FieldType = 'text' | 'number' | 'date' | string;
 export type CellRendererProps<D extends Record<string, unknown> = {}> = {
     /**
@@ -109,10 +114,10 @@ export interface ColumnInterface<D extends Record<string, unknown> = {}> extends
     Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
     /**
      * String value or custom function to use for filtering.
-     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
-     * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js
+     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `includesSome`, `exact`, `equals`, `between`.
+     * More info about these filters: https://github.com/TanStack/table/blob/v7/src/filterTypes.js
      */
-    filter?: FilterType<D> | DefaultFilterTypes | string;
+    filter?: FilterType<D> | DefaultFilterTypes | AnyString;
     /**
      * Function that should return whole cell element not only the content.
      * Must be memoized.
@@ -428,7 +433,7 @@ export type UseFiltersColumnOptions<D extends Record<string, unknown>> = Partial
     Filter: Renderer<FilterProps<D>>;
     disableFilters: boolean;
     defaultCanFilter: boolean;
-    filter: FilterType<D> | DefaultFilterTypes | string;
+    filter: FilterType<D> | DefaultFilterTypes | AnyString;
 }>;
 export interface UseFiltersInstanceProps<D extends Record<string, unknown>> {
     preFilteredRows: Array<Row<D>>;
@@ -457,7 +462,7 @@ export type Filters<D extends Record<string, unknown>> = Array<{
     value: FilterValue;
 }>;
 export type FilterTypes<D extends Record<string, unknown>> = Record<string, FilterType<D>>;
-export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'exact' | 'equals' | 'between';
+export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'includesSome' | 'exact' | 'equals' | 'between';
 export interface FilterType<D extends Record<string, unknown>> {
     (rows: Array<Row<D>>, columnIds: Array<IdType<D>>, filterValue: FilterValue): Array<Row<D>>;
     autoRemove?: ((filterValue: FilterValue) => boolean) | undefined;

package/esm/core/Avatar/Avatar.js

@@ -39,7 +39,7 @@ export const defaultStatusTitles = {
 export const Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
+    return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', className), "data-iui-size": size !== 'medium' ? size : undefined, "data-iui-status": status, title: title, style: { backgroundColor: getBackground(backgroundColor), ...style }, ref: ref, ...rest },
         !image ? abbreviation?.substring(0, 2) : null,
         image,
         status ? React.createElement(VisuallyHidden, null, statusTitles[status]) : null));

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -50,7 +50,7 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
         childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
         childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
             getAvatarList(maxIcons),
-            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) }, childrenLength <= maxLength
+            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', 'iui-avatar-count', countIconProps?.className), "data-iui-size": iconSize !== 'medium' ? iconSize : undefined }, childrenLength <= maxLength
                 ? `${childrenLength - maxIcons}`
                 : `${maxLength}+`)))));
 });

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -42,12 +42,15 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
     const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
     const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
     const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
-    const refs = useMergedRefs(overflowRef, ref);
+    const refs = useMergedRefs(!!overflowButton ? overflowRef : null, ref);
     return (React.createElement(FloatingDelayGroup, { delay: { open: 50, close: 250 } },
         React.createElement(ButtonGroupContext.Provider, { value: orientation },
             React.createElement(Box, { className: cx('iui-button-group', {
                     'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
                 }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
+                if (!overflowButton) {
+                    return children;
+                }
                 if (!(visibleCount < items.length)) {
                     return items;
                 }

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -17,8 +17,8 @@ import { SvgChevronRight, Box } from '../utils/index.js';
  */
 export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
     const { className, items, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+    return (React.createElement(Box, { as: 'nav', "aria-label": 'breadcrumbs', className: cx('iui-breadcrumbs', 'iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'ol', className: cx('iui-breadcrumbs-list', 'iui-header-breadcrumbs-list') }, items.reduce((previous, current, index) => [
             ...previous,
             current,
             index !== items.length - 1 && (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, ShadowRoot } from '../utils/index.js';
+import { Box, ShadowRoot, useIsClient } from '../utils/index.js';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -17,11 +17,12 @@ import { Box, ShadowRoot } from '../utils/index.js';
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
     const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    const isMounted = useIsClient();
     // ShadowRoot is not supported on all elements, so we only use it for few common ones.
     const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
         React.createElement(ShadowRoot, { css: css },
             React.createElement("slot", null)),
-        childrenProp));
+        isMounted && childrenProp));
     return (React.createElement(Box, { as: asProp, className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
 // ----------------------------------------------------------------------------

package/esm/react-table/react-table.d.ts

@@ -1,4 +1,9 @@
 import type { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactFragment, ReactNode } from 'react';
+/**
+ * This allows custom strings and keeps intellisense for string unions.
+ * See https://github.com/Microsoft/TypeScript/issues/29729
+ */
+type AnyString = string & {};
 export type FieldType = 'text' | 'number' | 'date' | string;
 export type CellRendererProps<D extends Record<string, unknown> = {}> = {
     /**
@@ -109,10 +114,10 @@ export interface ColumnInterface<D extends Record<string, unknown> = {}> extends
     Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
     /**
      * String value or custom function to use for filtering.
-     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
-     * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js
+     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `includesSome`, `exact`, `equals`, `between`.
+     * More info about these filters: https://github.com/TanStack/table/blob/v7/src/filterTypes.js
      */
-    filter?: FilterType<D> | DefaultFilterTypes | string;
+    filter?: FilterType<D> | DefaultFilterTypes | AnyString;
     /**
      * Function that should return whole cell element not only the content.
      * Must be memoized.
@@ -428,7 +433,7 @@ export type UseFiltersColumnOptions<D extends Record<string, unknown>> = Partial
     Filter: Renderer<FilterProps<D>>;
     disableFilters: boolean;
     defaultCanFilter: boolean;
-    filter: FilterType<D> | DefaultFilterTypes | string;
+    filter: FilterType<D> | DefaultFilterTypes | AnyString;
 }>;
 export interface UseFiltersInstanceProps<D extends Record<string, unknown>> {
     preFilteredRows: Array<Row<D>>;
@@ -457,7 +462,7 @@ export type Filters<D extends Record<string, unknown>> = Array<{
     value: FilterValue;
 }>;
 export type FilterTypes<D extends Record<string, unknown>> = Record<string, FilterType<D>>;
-export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'exact' | 'equals' | 'between';
+export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'includesSome' | 'exact' | 'equals' | 'between';
 export interface FilterType<D extends Record<string, unknown>> {
     (rows: Array<Row<D>>, columnIds: Array<IdType<D>>, filterValue: FilterValue): Array<Row<D>>;
     autoRemove?: ((filterValue: FilterValue) => boolean) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",

package/react-table.d.ts

@@ -1,4 +1,9 @@
 import type { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactFragment, ReactNode } from 'react';
+/**
+ * This allows custom strings and keeps intellisense for string unions.
+ * See https://github.com/Microsoft/TypeScript/issues/29729
+ */
+type AnyString = string & {};
 export type FieldType = 'text' | 'number' | 'date' | string;
 export type CellRendererProps<D extends Record<string, unknown> = {}> = {
     /**
@@ -109,10 +114,10 @@ export interface ColumnInterface<D extends Record<string, unknown> = {}> extends
     Filter?: Renderer<FilterProps<D>> | Renderer<TableFilterProps<D>>;
     /**
      * String value or custom function to use for filtering.
-     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `exact`, `equals`, `between`.
-     * More info about these filters: https://github.com/tannerlinsley/react-table/blob/master/src/filterTypes.js
+     * Possible string values: `text`, `exactText`, `exactTextCase`, `includes`, `includesAll`, `includesSome`, `exact`, `equals`, `between`.
+     * More info about these filters: https://github.com/TanStack/table/blob/v7/src/filterTypes.js
      */
-    filter?: FilterType<D> | DefaultFilterTypes | string;
+    filter?: FilterType<D> | DefaultFilterTypes | AnyString;
     /**
      * Function that should return whole cell element not only the content.
      * Must be memoized.
@@ -428,7 +433,7 @@ export type UseFiltersColumnOptions<D extends Record<string, unknown>> = Partial
     Filter: Renderer<FilterProps<D>>;
     disableFilters: boolean;
     defaultCanFilter: boolean;
-    filter: FilterType<D> | DefaultFilterTypes | string;
+    filter: FilterType<D> | DefaultFilterTypes | AnyString;
 }>;
 export interface UseFiltersInstanceProps<D extends Record<string, unknown>> {
     preFilteredRows: Array<Row<D>>;
@@ -457,7 +462,7 @@ export type Filters<D extends Record<string, unknown>> = Array<{
     value: FilterValue;
 }>;
 export type FilterTypes<D extends Record<string, unknown>> = Record<string, FilterType<D>>;
-export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'exact' | 'equals' | 'between';
+export type DefaultFilterTypes = 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'includesSome' | 'exact' | 'equals' | 'between';
 export interface FilterType<D extends Record<string, unknown>> {
     (rows: Array<Row<D>>, columnIds: Array<IdType<D>>, filterValue: FilterValue): Array<Row<D>>;
     autoRemove?: ((filterValue: FilterValue) => boolean) | undefined;