@itwin/itwinui-react 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 2.3.0
+
+### Minor Changes
+
+- c06caffe: Added `actions` prop to `Tabs` to add right/bottom content to the horizontal/vertical tabs.
+
+  ```tsx
+  <Tabs
+    // ...
+    actions={[
+      <Button key={'Small'} size={'small'}>
+        Small size button
+      </Button>,
+      <Button key={'Normal'}>Normal size button</Button>,
+    ]}
+  >
+    // ...
+  </Tabs>
+  ```
+
+- ec26b72d: `Anchor` can now be rendered as a button using `as` prop.
+
+  ```jsx
+  <Anchor as='button' onClick={() => {}}>
+    ...
+  </Anchor>
+  ```
+
+- dd13257f: Added new Icon component for displaying svgs
+
+  - Supports `size` and `fill` props
+
+  ```tsx
+  <Icon size='medium' fill='positive'>
+    <svg>...</svg>
+  </Icon>
+  ```
+
+### Patch Changes
+
+- 8e319bea: Removes transitions for `Toast` component when `prefer-reduced-motion` is active
+- 24a0cf94: Fixed an issue where Table's `onBottomReached` callback was not being invoked when using strict mode with react 18.
+- Updated dependencies
+  - @itwin/itwinui-css@1.4.0
+
 ## 2.2.1
 
 ### Patch Changes

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

@@ -28,7 +28,7 @@ export declare type AvatarProps = {
      */
     abbreviation?: string;
     /**
-     * User image to be displayed. MUST be an <img> element!
+     * User image to be displayed. MUST be an `<img>` element!
      */
     image?: JSX.Element;
     /**

package/cjs/core/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CommonProps, SoftBackgrounds } from '../utils';
+import type { AnyString } from '../utils';
 import '@itwin/itwinui-css/css/badge.css';
 export declare type BadgeProps = {
     /**
@@ -9,7 +10,7 @@ export declare type BadgeProps = {
      *
      * If not specified, a default neutral background will be used.
      */
-    backgroundColor?: 'primary' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | (string & {});
+    backgroundColor?: 'primary' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | AnyString;
     /**
      * Badge label.
      * Always gets converted to uppercase, and truncated if too long.

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -51,11 +51,7 @@ const ExpandableBlock = (props) => {
             react_1.default.createElement("span", { className: 'iui-expandable-block-label' },
                 react_1.default.createElement("div", { className: 'iui-title' }, title),
                 caption && react_1.default.createElement("div", { className: 'iui-caption' }, caption)),
-            icon &&
-                react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-status-icon', icon.props.className),
-                    'data-iui-icon-color': status,
-                })),
+            icon && react_1.default.createElement(utils_1.Icon, { fill: status }, icon)),
         react_1.default.createElement(utils_1.WithCSSTransition, { in: expanded },
             react_1.default.createElement("div", { className: 'iui-expandable-content' },
                 react_1.default.createElement("div", null, children)))));

package/cjs/core/Tabs/Tabs.d.ts

@@ -17,6 +17,23 @@ declare type TabsOrientationProps = {
     orientation: 'vertical';
     type?: 'default' | 'borderless';
 };
+declare type TabsTypeProps = {
+    /**
+     * Type of the tabs.
+     *
+     * If `orientation = 'vertical'`, `pill` is not applicable.
+     * @default 'default'
+     */
+    type?: 'default' | 'borderless';
+    /**
+     * Content displayed to the right/bottom of the horizontal/vertical tabs
+     *
+     * If `type = 'pill'`, `actions` is not applicable.
+     */
+    actions?: React.ReactNode[];
+} | {
+    type: 'pill';
+};
 export declare type TabsProps = {
     /**
      * Elements shown for each tab.
@@ -58,7 +75,7 @@ export declare type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-} & TabsOrientationProps;
+} & TabsOrientationProps & TabsTypeProps;
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */

package/cjs/core/Tabs/Tabs.js

@@ -41,6 +41,13 @@ const Tab_1 = require("./Tab");
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 const Tabs = (props) => {
+    // Separate actions from props to avoid adding it to the DOM (using {...rest})
+    let actions;
+    if (props.type !== 'pill' && props.actions) {
+        actions = props.actions;
+        props = { ...props };
+        delete props.actions;
+    }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
     (0, utils_1.useTheme)();
     const tablistRef = react_1.default.useRef(null);
@@ -176,6 +183,8 @@ const Tabs = (props) => {
                 },
             }))));
         })),
+        actions && (react_1.default.createElement("div", { className: 'iui-tabs-actions-wrapper' },
+            react_1.default.createElement("div", { className: 'iui-tabs-actions' }, actions))),
         children && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;

package/cjs/core/Toast/Toast.js

@@ -14,6 +14,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/toast.css");
 const Buttons_1 = require("../Buttons");
+const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
 /**
  * Generic Toast Component
  * @example
@@ -92,18 +93,24 @@ const Toast = (props) => {
         return { translateX, translateY };
     };
     return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: (node) => {
-            node.style.transform = 'translateY(15%)';
-            node.style.transitionTimingFunction = 'ease';
+            if (isMotionOk()) {
+                node.style.transform = 'translateY(15%)';
+                node.style.transitionTimingFunction = 'ease';
+            }
         }, onEntered: (node) => {
-            node.style.transform = 'translateY(0)';
+            if (isMotionOk()) {
+                node.style.transform = 'translateY(0)';
+            }
         }, onExiting: (node) => {
-            const { translateX, translateY } = calculateOutAnimation(node);
-            node.style.transform = animateOutTo
-                ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-                : `scale(0.9)`;
-            node.style.opacity = '0';
-            node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-            node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+            if (isMotionOk()) {
+                const { translateX, translateY } = calculateOutAnimation(node);
+                node.style.transform = animateOutTo
+                    ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+                    : `scale(0.9)`;
+                node.style.opacity = '0';
+                node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+                node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+            }
         }, onExited: onRemove }, react_1.default.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: {
             height,
             ...marginStyle(),

package/cjs/core/Typography/Anchor/Anchor.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
+import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils';
 import '@itwin/itwinui-css/css/anchor.css';
-export declare const Anchor: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
+declare type AnchorOwnProps = Record<never, never>;
+export declare type AnchorProps<T extends React.ElementType = 'a'> = PolymorphicComponentProps<T, AnchorOwnProps>;
+/**
+ * A consistently styled anchor component.
+ *
+ * Supports polymorphic `as` prop for use with `Link` components from routers,
+ * or to render as a button.
+ *
+ * @example
+ * <Anchor href='/'>Home</Anchor>
+ * <Anchor href='/projects'>Projects</Anchor>
+ *
+ * @example
+ * <Anchor as={Link} to='/'>Home</Anchor>
+ * <Anchor as='button' onClick={() => {}}>click me</Anchor>
+ */
+export declare const Anchor: PolymorphicForwardRefComponent<"a", AnchorOwnProps>;
 export default Anchor;

package/cjs/core/Typography/Anchor/Anchor.js

@@ -12,8 +12,23 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/anchor.css");
-exports.Anchor = react_1.default.forwardRef(({ className, ...rest }, ref) => {
+/**
+ * A consistently styled anchor component.
+ *
+ * Supports polymorphic `as` prop for use with `Link` components from routers,
+ * or to render as a button.
+ *
+ * @example
+ * <Anchor href='/'>Home</Anchor>
+ * <Anchor href='/projects'>Projects</Anchor>
+ *
+ * @example
+ * <Anchor as={Link} to='/'>Home</Anchor>
+ * <Anchor as='button' onClick={() => {}}>click me</Anchor>
+ */
+exports.Anchor = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'a', className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return react_1.default.createElement("a", { className: (0, classnames_1.default)('iui-anchor', className), ref: ref, ...rest });
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-anchor', className), ref: ref, ...rest }));
 });
 exports.default = exports.Anchor;

package/cjs/core/Typography/Anchor/index.d.ts

@@ -1,3 +1,4 @@
 export { Anchor } from './Anchor';
+export type { AnchorProps } from './Anchor';
 declare const _default: "./Anchor";
 export default _default;

package/cjs/core/Typography/index.d.ts

@@ -1,4 +1,5 @@
 export { Anchor } from './Anchor';
+export type { AnchorProps } from './Anchor';
 export { Headline } from './Headline';
 export type { HeadlineProps } from './Headline';
 export { Title } from './Title';

package/cjs/core/index.d.ts

@@ -101,8 +101,8 @@ export type { TooltipProps } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
-export type { BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
+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, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps } 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.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.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.
@@ -181,3 +181,4 @@ Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });
 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; } });

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { AnyString } from '../types';
+import '@itwin/itwinui-css/css/utils.css';
+export declare type IconProps = {
+    /**
+     * Size of the svg.
+     *  - 'medium': works well with most text
+     *  - 'small': smaller than medium
+     *  - 'large': larger than medium
+     *  - 'auto': scales with text
+     *
+     * Also accepts a custom string value that will be used unchanged.
+     *
+     * @default 'medium'
+     */
+    size?: 'auto' | 'small' | 'medium' | 'large' | AnyString;
+    /**
+     * Fill (color) of the svg.
+     * Defaults to `--iui-color-icon-muted`. Can be specified to
+     * use one of the status colors.
+     *
+     * Also accepts a custom string value that will be used unchanged.
+     *
+     * @default 'default'
+     */
+    fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+} & React.ComponentProps<'span'>;
+/**
+ * A utility component to provide size and fill to svgs.
+ * Works well with svgs from `@itwin/itwinui-icons-react`.
+ *
+ * @example
+ * <Icon>
+ *   <SvgPlaceholder />
+ * </Icon>
+ *
+ * @example
+ * <Icon fill='negative'>
+ *   <SvgStatusError />
+ * </Icon>
+ */
+export declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "key" | "fill" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export default Icon;

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

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = 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 getSizeValue = (size) => {
+    switch (size) {
+        case 'small':
+            return 's';
+        case 'medium':
+            return 'm';
+        case 'large':
+            return 'l';
+        default:
+            return size;
+    }
+};
+/**
+ * A utility component to provide size and fill to svgs.
+ * Works well with svgs from `@itwin/itwinui-icons-react`.
+ *
+ * @example
+ * <Icon>
+ *   <SvgPlaceholder />
+ * </Icon>
+ *
+ * @example
+ * <Icon fill='negative'>
+ *   <SvgStatusError />
+ * </Icon>
+ */
+exports.Icon = react_1.default.forwardRef((props, ref) => {
+    const { size = 'medium', fill = 'default', className, ...rest } = props;
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+});
+exports.default = exports.Icon;

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

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

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

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

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

@@ -24,19 +24,15 @@ const dom_1 = require("../functions/dom");
  */
 const useIntersection = (onIntersect, options = {}, once = true) => {
     const { root, rootMargin, threshold } = options;
-    const observer = react_1.default.useRef();
+    const cleanupRef = react_1.default.useRef(() => { });
     const setRef = react_1.default.useCallback((node) => {
-        var _a;
-        if (!((_a = (0, dom_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
+        var _a, _b;
+        (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
+        if (!node || !((_b = (0, dom_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.IntersectionObserver)) {
             return;
         }
-        if (observer.current) {
-            observer.current.disconnect();
-        }
-        if (!node) {
-            return;
-        }
-        observer.current = new IntersectionObserver(([entry], obs) => {
+        const observer = new IntersectionObserver(([entry], obs) => {
             if (entry.isIntersecting) {
                 if (once) {
                     obs.disconnect();
@@ -44,9 +40,9 @@ const useIntersection = (onIntersect, options = {}, once = true) => {
                 onIntersect();
             }
         }, { root, rootMargin, threshold });
-        observer.current.observe(node);
+        observer.observe(node);
+        cleanupRef.current = () => observer.disconnect();
     }, [onIntersect, once, root, rootMargin, threshold]);
-    react_1.default.useEffect(() => () => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     return setRef;
 };
 exports.useIntersection = useIntersection;

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

@@ -4,3 +4,4 @@ export * from './components';
 export * from './props';
 export * from './color';
 export * from './icons';
+export * from './types';

package/cjs/core/utils/index.js

@@ -24,3 +24,4 @@ __exportStar(require("./components"), exports);
 __exportStar(require("./props"), exports);
 __exportStar(require("./color"), exports);
 __exportStar(require("./icons"), exports);
+__exportStar(require("./types"), exports);

package/cjs/core/utils/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This allows custom strings and keeps intellisense for string unions.
+ * See https://github.com/Microsoft/TypeScript/issues/29729
+ */
+export declare type AnyString = string & {};

package/cjs/core/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -28,7 +28,7 @@ export declare type AvatarProps = {
      */
     abbreviation?: string;
     /**
-     * User image to be displayed. MUST be an <img> element!
+     * User image to be displayed. MUST be an `<img>` element!
      */
     image?: JSX.Element;
     /**

package/esm/core/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CommonProps, SoftBackgrounds } from '../utils';
+import type { AnyString } from '../utils';
 import '@itwin/itwinui-css/css/badge.css';
 export declare type BadgeProps = {
     /**
@@ -9,7 +10,7 @@ export declare type BadgeProps = {
      *
      * If not specified, a default neutral background will be used.
      */
-    backgroundColor?: 'primary' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | (string & {});
+    backgroundColor?: 'primary' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | AnyString;
     /**
      * Badge label.
      * Always gets converted to uppercase, and truncated if too long.

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, StatusIconMap, WithCSSTransition, SvgChevronRight, } from '../utils';
+import { useTheme, StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, } from '../utils';
 import '@itwin/itwinui-css/css/expandable-block.css';
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
@@ -45,11 +45,7 @@ export const ExpandableBlock = (props) => {
             React.createElement("span", { className: 'iui-expandable-block-label' },
                 React.createElement("div", { className: 'iui-title' }, title),
                 caption && React.createElement("div", { className: 'iui-caption' }, caption)),
-            icon &&
-                React.cloneElement(icon, {
-                    className: cx('iui-status-icon', icon.props.className),
-                    'data-iui-icon-color': status,
-                })),
+            icon && React.createElement(Icon, { fill: status }, icon)),
         React.createElement(WithCSSTransition, { in: expanded },
             React.createElement("div", { className: 'iui-expandable-content' },
                 React.createElement("div", null, children)))));

package/esm/core/Tabs/Tabs.d.ts

@@ -17,6 +17,23 @@ declare type TabsOrientationProps = {
     orientation: 'vertical';
     type?: 'default' | 'borderless';
 };
+declare type TabsTypeProps = {
+    /**
+     * Type of the tabs.
+     *
+     * If `orientation = 'vertical'`, `pill` is not applicable.
+     * @default 'default'
+     */
+    type?: 'default' | 'borderless';
+    /**
+     * Content displayed to the right/bottom of the horizontal/vertical tabs
+     *
+     * If `type = 'pill'`, `actions` is not applicable.
+     */
+    actions?: React.ReactNode[];
+} | {
+    type: 'pill';
+};
 export declare type TabsProps = {
     /**
      * Elements shown for each tab.
@@ -58,7 +75,7 @@ export declare type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-} & TabsOrientationProps;
+} & TabsOrientationProps & TabsTypeProps;
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */

package/esm/core/Tabs/Tabs.js

@@ -35,6 +35,13 @@ import { Tab } from './Tab';
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 export const Tabs = (props) => {
+    // Separate actions from props to avoid adding it to the DOM (using {...rest})
+    let actions;
+    if (props.type !== 'pill' && props.actions) {
+        actions = props.actions;
+        props = { ...props };
+        delete props.actions;
+    }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
     useTheme();
     const tablistRef = React.useRef(null);
@@ -170,6 +177,8 @@ export const Tabs = (props) => {
                 },
             }))));
         })),
+        actions && (React.createElement("div", { className: 'iui-tabs-actions-wrapper' },
+            React.createElement("div", { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement("div", { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 /**

package/esm/core/Toast/Toast.js

@@ -8,6 +8,7 @@ import cx from 'classnames';
 import { getWindow, StatusIconMap, SvgCloseSmall } from '../utils';
 import '@itwin/itwinui-css/css/toast.css';
 import { IconButton } from '../Buttons';
+const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
 /**
  * Generic Toast Component
  * @example
@@ -86,18 +87,24 @@ export const Toast = (props) => {
         return { translateX, translateY };
     };
     return (React.createElement(Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: (node) => {
-            node.style.transform = 'translateY(15%)';
-            node.style.transitionTimingFunction = 'ease';
+            if (isMotionOk()) {
+                node.style.transform = 'translateY(15%)';
+                node.style.transitionTimingFunction = 'ease';
+            }
         }, onEntered: (node) => {
-            node.style.transform = 'translateY(0)';
+            if (isMotionOk()) {
+                node.style.transform = 'translateY(0)';
+            }
         }, onExiting: (node) => {
-            const { translateX, translateY } = calculateOutAnimation(node);
-            node.style.transform = animateOutTo
-                ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-                : `scale(0.9)`;
-            node.style.opacity = '0';
-            node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-            node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+            if (isMotionOk()) {
+                const { translateX, translateY } = calculateOutAnimation(node);
+                node.style.transform = animateOutTo
+                    ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+                    : `scale(0.9)`;
+                node.style.opacity = '0';
+                node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+                node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+            }
         }, onExited: onRemove }, React.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: {
             height,
             ...marginStyle(),

package/esm/core/Typography/Anchor/Anchor.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
+import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils';
 import '@itwin/itwinui-css/css/anchor.css';
-export declare const Anchor: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
+declare type AnchorOwnProps = Record<never, never>;
+export declare type AnchorProps<T extends React.ElementType = 'a'> = PolymorphicComponentProps<T, AnchorOwnProps>;
+/**
+ * A consistently styled anchor component.
+ *
+ * Supports polymorphic `as` prop for use with `Link` components from routers,
+ * or to render as a button.
+ *
+ * @example
+ * <Anchor href='/'>Home</Anchor>
+ * <Anchor href='/projects'>Projects</Anchor>
+ *
+ * @example
+ * <Anchor as={Link} to='/'>Home</Anchor>
+ * <Anchor as='button' onClick={() => {}}>click me</Anchor>
+ */
+export declare const Anchor: PolymorphicForwardRefComponent<"a", AnchorOwnProps>;
 export default Anchor;

package/esm/core/Typography/Anchor/Anchor.js

@@ -4,10 +4,25 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../../utils';
+import { useTheme, } from '../../utils';
 import '@itwin/itwinui-css/css/anchor.css';
-export const Anchor = React.forwardRef(({ className, ...rest }, ref) => {
+/**
+ * A consistently styled anchor component.
+ *
+ * Supports polymorphic `as` prop for use with `Link` components from routers,
+ * or to render as a button.
+ *
+ * @example
+ * <Anchor href='/'>Home</Anchor>
+ * <Anchor href='/projects'>Projects</Anchor>
+ *
+ * @example
+ * <Anchor as={Link} to='/'>Home</Anchor>
+ * <Anchor as='button' onClick={() => {}}>click me</Anchor>
+ */
+export const Anchor = React.forwardRef((props, ref) => {
+    const { as: Element = 'a', className, ...rest } = props;
     useTheme();
-    return React.createElement("a", { className: cx('iui-anchor', className), ref: ref, ...rest });
+    return (React.createElement(Element, { className: cx('iui-anchor', className), ref: ref, ...rest }));
 });
 export default Anchor;

package/esm/core/Typography/Anchor/index.d.ts

@@ -1,3 +1,4 @@
 export { Anchor } from './Anchor';
+export type { AnchorProps } from './Anchor';
 declare const _default: "./Anchor";
 export default _default;

package/esm/core/Typography/index.d.ts

@@ -1,4 +1,5 @@
 export { Anchor } from './Anchor';
+export type { AnchorProps } from './Anchor';
 export { Headline } from './Headline';
 export type { HeadlineProps } from './Headline';
 export { Title } from './Title';

package/esm/core/index.d.ts

@@ -101,8 +101,8 @@ export type { TooltipProps } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
-export type { BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
+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, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps } 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, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, } from './utils';

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { AnyString } from '../types';
+import '@itwin/itwinui-css/css/utils.css';
+export declare type IconProps = {
+    /**
+     * Size of the svg.
+     *  - 'medium': works well with most text
+     *  - 'small': smaller than medium
+     *  - 'large': larger than medium
+     *  - 'auto': scales with text
+     *
+     * Also accepts a custom string value that will be used unchanged.
+     *
+     * @default 'medium'
+     */
+    size?: 'auto' | 'small' | 'medium' | 'large' | AnyString;
+    /**
+     * Fill (color) of the svg.
+     * Defaults to `--iui-color-icon-muted`. Can be specified to
+     * use one of the status colors.
+     *
+     * Also accepts a custom string value that will be used unchanged.
+     *
+     * @default 'default'
+     */
+    fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+} & React.ComponentProps<'span'>;
+/**
+ * A utility component to provide size and fill to svgs.
+ * Works well with svgs from `@itwin/itwinui-icons-react`.
+ *
+ * @example
+ * <Icon>
+ *   <SvgPlaceholder />
+ * </Icon>
+ *
+ * @example
+ * <Icon fill='negative'>
+ *   <SvgStatusError />
+ * </Icon>
+ */
+export declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "key" | "fill" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export default Icon;

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

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 getSizeValue = (size) => {
+    switch (size) {
+        case 'small':
+            return 's';
+        case 'medium':
+            return 'm';
+        case 'large':
+            return 'l';
+        default:
+            return size;
+    }
+};
+/**
+ * A utility component to provide size and fill to svgs.
+ * Works well with svgs from `@itwin/itwinui-icons-react`.
+ *
+ * @example
+ * <Icon>
+ *   <SvgPlaceholder />
+ * </Icon>
+ *
+ * @example
+ * <Icon fill='negative'>
+ *   <SvgStatusError />
+ * </Icon>
+ */
+export const Icon = React.forwardRef((props, ref) => {
+    const { size = 'medium', fill = 'default', className, ...rest } = props;
+    return (React.createElement("span", { className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+});
+export default Icon;

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

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

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

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

package/esm/core/utils/hooks/useIntersection.js

@@ -18,19 +18,15 @@ import { getWindow } from '../functions/dom';
  */
 export const useIntersection = (onIntersect, options = {}, once = true) => {
     const { root, rootMargin, threshold } = options;
-    const observer = React.useRef();
+    const cleanupRef = React.useRef(() => { });
     const setRef = React.useCallback((node) => {
-        var _a;
-        if (!((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
+        var _a, _b;
+        (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
+        if (!node || !((_b = getWindow()) === null || _b === void 0 ? void 0 : _b.IntersectionObserver)) {
             return;
         }
-        if (observer.current) {
-            observer.current.disconnect();
-        }
-        if (!node) {
-            return;
-        }
-        observer.current = new IntersectionObserver(([entry], obs) => {
+        const observer = new IntersectionObserver(([entry], obs) => {
             if (entry.isIntersecting) {
                 if (once) {
                     obs.disconnect();
@@ -38,8 +34,8 @@ export const useIntersection = (onIntersect, options = {}, once = true) => {
                 onIntersect();
             }
         }, { root, rootMargin, threshold });
-        observer.current.observe(node);
+        observer.observe(node);
+        cleanupRef.current = () => observer.disconnect();
     }, [onIntersect, once, root, rootMargin, threshold]);
-    React.useEffect(() => () => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     return setRef;
 };

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

@@ -4,3 +4,4 @@ export * from './components';
 export * from './props';
 export * from './color';
 export * from './icons';
+export * from './types';

package/esm/core/utils/index.js

@@ -8,3 +8,4 @@ export * from './components';
 export * from './props';
 export * from './color';
 export * from './icons';
+export * from './types';

package/esm/core/utils/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This allows custom strings and keeps intellisense for string unions.
+ * See https://github.com/Microsoft/TypeScript/issues/29729
+ */
+export declare type AnyString = string & {};

package/esm/core/utils/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -59,11 +59,10 @@
     "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn dev:types\"",
     "dev:esm": "swc src -d esm --watch",
     "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs",
-    "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"",
-    "createComponent": "node ../../scripts/createComponent.js"
+    "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.2.0",
+    "@itwin/itwinui-css": "^1.4.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^1.0.0",
     "@tippyjs/react": "^4.2.6",