@itwin/itwinui-react 2.10.0 → 2.11.0

package/cjs/core/Tabs/Tabs.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,10 +32,10 @@ exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/tabs.css");
-const Tab_1 = require("./Tab");
+const Tab_js_1 = require("./Tab.js");
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -48,23 +71,32 @@ const Tabs = (props) => {
         props = { ...props };
         delete props.actions;
     }
+    // Separate overflowOptions from props to avoid adding it to the DOM (using {...rest})
+    let overflowOptions;
+    if (props.type !== 'borderless' &&
+        props.type !== 'pill' &&
+        props.overflowOptions) {
+        overflowOptions = props.overflowOptions;
+        props = { ...props };
+        delete props.overflowOptions;
+    }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const isClient = (0, utils_1.useIsClient)();
-    const tablistRef = react_1.default.useRef(null);
-    const [tablistSizeRef, tabsWidth] = (0, utils_1.useContainerWidth)(type !== 'default');
-    const refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
-    const [currentActiveIndex, setCurrentActiveIndex] = react_1.default.useState(() => activeIndex != null
-        ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
+    (0, index_js_1.useTheme)();
+    const isClient = (0, index_js_1.useIsClient)();
+    const tablistRef = React.useRef(null);
+    const [tablistSizeRef, tabsWidth] = (0, index_js_1.useContainerWidth)(type !== 'default');
+    const refs = (0, index_js_1.useMergedRefs)(tablistRef, tablistSizeRef);
+    const [currentActiveIndex, setCurrentActiveIndex] = React.useState(() => activeIndex != null
+        ? (0, index_js_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
         : 0);
-    (0, utils_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
-            setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
+            setCurrentActiveIndex((0, index_js_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     // CSS custom properties to place the active stripe
-    const [stripeProperties, setStripeProperties] = react_1.default.useState({});
-    (0, utils_1.useIsomorphicLayoutEffect)(() => {
+    const [stripeProperties, setStripeProperties] = React.useState({});
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
         if (type !== 'default' && tablistRef.current != undefined) {
             const activeTab = tablistRef.current.children[currentActiveIndex];
             const activeTabRect = activeTab.getBoundingClientRect();
@@ -80,25 +112,191 @@ const Tabs = (props) => {
             });
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
-    react_1.default.useEffect(() => {
+    const [focusedIndex, setFocusedIndex] = React.useState();
+    React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
             const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
             tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
-    const [hasSublabel, setHasSublabel] = react_1.default.useState(false); // used for setting size
-    (0, utils_1.useIsomorphicLayoutEffect)(() => {
+    const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
             !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));
     }, [type]);
-    const onTabClick = (index) => {
+    const enableHorizontalScroll = React.useCallback((e) => {
+        var _a;
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        let scrollLeft = (_a = ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        if (e.deltaY > 0 || e.deltaX > 0) {
+            scrollLeft += 25;
+        }
+        else if (e.deltaY < 0 || e.deltaX < 0) {
+            scrollLeft -= 25;
+        }
+        ownerDoc.scrollLeft = scrollLeft;
+    }, []);
+    // allow normal mouse wheels to scroll horizontally for horizontal overflow
+    React.useEffect(() => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) || orientation === 'vertical') {
+            ownerDoc.removeEventListener('wheel', enableHorizontalScroll);
+            return;
+        }
+        ownerDoc.addEventListener('wheel', enableHorizontalScroll);
+    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, orientation, enableHorizontalScroll]);
+    const isTabHidden = (activeTab, isVertical) => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        const fadeBuffer = isVertical
+            ? ownerDoc.offsetHeight * 0.05
+            : ownerDoc.offsetWidth * 0.05;
+        const visibleStart = isVertical ? ownerDoc.scrollTop : ownerDoc.scrollLeft;
+        const visibleEnd = isVertical
+            ? ownerDoc.scrollTop + ownerDoc.offsetHeight
+            : ownerDoc.scrollLeft + ownerDoc.offsetWidth;
+        const tabStart = isVertical ? activeTab.offsetTop : activeTab.offsetLeft;
+        const tabEnd = isVertical
+            ? activeTab.offsetTop + activeTab.offsetHeight
+            : activeTab.offsetLeft + activeTab.offsetWidth;
+        if (tabStart > visibleStart + fadeBuffer &&
+            tabEnd < visibleEnd - fadeBuffer) {
+            return 0; // tab is visible
+        }
+        else if (tabStart < visibleStart + fadeBuffer) {
+            return -1; // tab is before visible section
+        }
+        else {
+            return 1; // tab is after visible section
+        }
+    };
+    const easeInOutQuad = (time, beginning, change, duration) => {
+        if ((time /= duration / 2) < 1) {
+            return (change / 2) * time * time + beginning;
+        }
+        return (-change / 2) * (--time * (time - 2) - 1) + beginning;
+    };
+    const scrollToTab = React.useCallback((list, activeTab, duration, isVertical, tabPlacement) => {
+        const start = isVertical ? list.scrollTop : list.scrollLeft;
+        let change = 0;
+        let currentTime = 0;
+        const increment = 20;
+        const fadeBuffer = isVertical
+            ? list.offsetHeight * 0.05
+            : list.offsetWidth * 0.05;
+        if (tabPlacement < 0) {
+            // if tab is before visible section
+            change = isVertical
+                ? activeTab.offsetTop - list.scrollTop
+                : activeTab.offsetLeft - list.scrollLeft;
+            change -= fadeBuffer; // give some space so the active tab isn't covered by the fade
+        }
+        else {
+            // tab is after visible section
+            change = isVertical
+                ? activeTab.offsetTop -
+                    (list.scrollTop + list.offsetHeight) +
+                    activeTab.offsetHeight
+                : activeTab.offsetLeft -
+                    (list.scrollLeft + list.offsetWidth) +
+                    activeTab.offsetWidth;
+            change += fadeBuffer; // give some space so the active tab isn't covered by the fade
+        }
+        const animateScroll = () => {
+            currentTime += increment;
+            const val = easeInOutQuad(currentTime, start, change, duration);
+            if (isVertical) {
+                list.scrollTop = val;
+            }
+            else {
+                list.scrollLeft = val;
+            }
+            if (currentTime < duration) {
+                setTimeout(animateScroll, increment);
+            }
+        };
+        animateScroll();
+    }, []);
+    // scroll to active tab if it is not visible with overflow
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        setTimeout(() => {
+            const ownerDoc = tablistRef.current;
+            if (ownerDoc !== null &&
+                (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
+                currentActiveIndex !== undefined) {
+                const activeTab = ownerDoc.querySelectorAll('.iui-tab')[currentActiveIndex];
+                const isVertical = orientation === 'vertical';
+                const tabPlacement = isTabHidden(activeTab, isVertical);
+                if (tabPlacement) {
+                    scrollToTab(ownerDoc, activeTab, 100, isVertical, tabPlacement);
+                }
+            }
+        }, 50);
+    }, [
+        overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow,
+        currentActiveIndex,
+        focusedIndex,
+        orientation,
+        scrollToTab,
+    ]);
+    const [scrollingPlacement, setScrollingPlacement] = React.useState(undefined);
+    const determineScrollingPlacement = React.useCallback(() => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        const isVertical = orientation === 'vertical';
+        const visibleStart = isVertical ? ownerDoc.scrollTop : ownerDoc.scrollLeft;
+        const visibleEnd = isVertical
+            ? ownerDoc.scrollTop + ownerDoc.offsetHeight
+            : ownerDoc.scrollLeft + ownerDoc.offsetWidth;
+        const totalTabsSpace = isVertical
+            ? ownerDoc.scrollHeight
+            : ownerDoc.scrollWidth;
+        if (Math.abs(visibleStart - 0) < 1 &&
+            Math.abs(visibleEnd - totalTabsSpace) < 1) {
+            setScrollingPlacement(undefined);
+        }
+        else if (Math.abs(visibleStart - 0) < 1) {
+            setScrollingPlacement('start');
+        }
+        else if (Math.abs(visibleEnd - totalTabsSpace) < 1) {
+            setScrollingPlacement('end');
+        }
+        else {
+            setScrollingPlacement('center');
+        }
+    }, [orientation, setScrollingPlacement]);
+    // apply correct mask when tabs list is resized
+    const [resizeRef] = (0, index_js_1.useResizeObserver)(determineScrollingPlacement);
+    resizeRef(tablistRef === null || tablistRef === void 0 ? void 0 : tablistRef.current);
+    // check if overflow tabs are scrolled to far edges
+    React.useEffect(() => {
+        const ownerDoc = tablistRef.current;
+        if (ownerDoc === null) {
+            return;
+        }
+        if (!(overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow)) {
+            ownerDoc.removeEventListener('scroll', determineScrollingPlacement);
+            return;
+        }
+        ownerDoc.addEventListener('scroll', determineScrollingPlacement);
+    }, [overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, determineScrollingPlacement]);
+    const onTabClick = React.useCallback((index) => {
         if (onTabSelected) {
             onTabSelected(index);
         }
         setCurrentActiveIndex(index);
-    };
+    }, [onTabSelected]);
     const onKeyDown = (event) => {
         // alt + arrow keys are used by browser / assistive technologies
         if (event.altKey) {
@@ -106,7 +304,7 @@ const Tabs = (props) => {
         }
         const isTabDisabled = (index) => {
             const tab = labels[index];
-            return react_1.default.isValidElement(tab) && tab.props.disabled;
+            return React.isValidElement(tab) && tab.props.disabled;
         };
         let newIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : currentActiveIndex;
         /** focus next tab if delta is +1, previous tab if -1 */
@@ -159,35 +357,36 @@ const Tabs = (props) => {
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
-        react_1.default.createElement("ul", { className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
+    const createTab = React.useCallback((label, index) => {
+        const onClick = () => {
+            setFocusedIndex(index);
+            onTabClick(index);
+        };
+        return (React.createElement("li", { key: index }, !React.isValidElement(label) ? (React.createElement(Tab_js_1.Tab, { label: label, className: (0, classnames_1.default)({
+                'iui-active': index === currentActiveIndex,
+            }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (React.cloneElement(label, {
+            className: (0, classnames_1.default)(label.props.className, {
+                'iui-active': index === currentActiveIndex,
+            }),
+            'aria-selected': index === currentActiveIndex,
+            tabIndex: index === currentActiveIndex ? 0 : -1,
+            onClick: (args) => {
+                var _a, _b;
+                onClick();
+                (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+            },
+        }))));
+    }, [currentActiveIndex, onTabClick]);
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
+        React.createElement("ul", { className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
-            }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => {
-            const onClick = () => {
-                setFocusedIndex(index);
-                onTabClick(index);
-            };
-            return (react_1.default.createElement("li", { key: index }, !react_1.default.isValidElement(label) ? (react_1.default.createElement(Tab_1.Tab, { label: label, className: (0, classnames_1.default)({
-                    'iui-active': index === currentActiveIndex,
-                }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (react_1.default.cloneElement(label, {
-                className: (0, classnames_1.default)(label.props.className, {
-                    'iui-active': index === currentActiveIndex,
-                }),
-                'aria-selected': index === currentActiveIndex,
-                tabIndex: index === currentActiveIndex ? 0 : -1,
-                onClick: (args) => {
-                    var _a, _b;
-                    onClick();
-                    (_b = (_a = label.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
-                },
-            }))));
-        })),
-        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))));
+            }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
+        actions && (React.createElement("div", { className: 'iui-tabs-actions-wrapper' },
+            React.createElement("div", { className: 'iui-tabs-actions' }, actions))),
+        children && (React.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;
 /**
@@ -202,7 +401,7 @@ exports.Tabs = Tabs;
  * ];
  * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
  */
-const HorizontalTabs = (props) => (react_1.default.createElement(exports.Tabs, { orientation: 'horizontal', ...props }));
+const HorizontalTabs = (props) => (React.createElement(exports.Tabs, { orientation: 'horizontal', ...props }));
 exports.HorizontalTabs = HorizontalTabs;
 /**
  * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
@@ -216,6 +415,6 @@ exports.HorizontalTabs = HorizontalTabs;
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */
-const VerticalTabs = (props) => (react_1.default.createElement(exports.Tabs, { orientation: 'vertical', ...props }));
+const VerticalTabs = (props) => (React.createElement(exports.Tabs, { orientation: 'vertical', ...props }));
 exports.VerticalTabs = VerticalTabs;
 exports.default = exports.Tabs;

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

@@ -1,4 +1,4 @@
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
-export type { TabsProps, VerticalTabsProps, HorizontalTabsProps } from './Tabs';
-export { Tab } from './Tab';
-export type { TabProps } from './Tab';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export type { TabsProps, VerticalTabsProps, HorizontalTabsProps, } from './Tabs.js';
+export { Tab } from './Tab.js';
+export type { TabProps } from './Tab.js';

package/cjs/core/Tabs/index.js

@@ -5,9 +5,9 @@ exports.Tab = exports.HorizontalTabs = exports.VerticalTabs = exports.Tabs = voi
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Tabs_1 = require("./Tabs");
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
-Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
-Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_1.HorizontalTabs; } });
-var Tab_1 = require("./Tab");
-Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
+var Tabs_js_1 = require("./Tabs.js");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_js_1.Tabs; } });
+Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_js_1.VerticalTabs; } });
+Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_js_1.HorizontalTabs; } });
+var Tab_js_1 = require("./Tab.js");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_js_1.Tab; } });

package/cjs/core/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
 export declare type TagProps = {
     /**

package/cjs/core/Tag/Tag.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,10 +32,10 @@ exports.Tag = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/tag.css");
-const Buttons_1 = require("../Buttons");
+const index_js_2 = require("../Buttons/index.js");
 /**
  * Tag for showing categories, filters etc.
  * @example
@@ -21,14 +44,14 @@ const Buttons_1 = require("../Buttons");
  */
 const Tag = (props) => {
     const { className, variant = 'default', children, onRemove, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)({
+    (0, index_js_1.useTheme)();
+    return (React.createElement("span", { className: (0, classnames_1.default)({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
         }, className), ...rest },
-        variant === 'default' ? (react_1.default.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
-        onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
-            react_1.default.createElement(utils_1.SvgCloseSmall, { "aria-hidden": true })))));
+        variant === 'default' ? (React.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
+        onRemove && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
+            React.createElement(index_js_1.SvgCloseSmall, { "aria-hidden": true })))));
 };
 exports.Tag = Tag;
 exports.default = exports.Tag;

package/cjs/core/Tag/TagContainer.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
 export declare type TagContainerProps = {
     /**

package/cjs/core/Tag/TagContainer.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,9 +31,9 @@ exports.TagContainer = 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 React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/tag.css");
 /**
  * TagContainer for grouping tags.
@@ -20,8 +43,8 @@ require("@itwin/itwinui-css/css/tag.css");
  */
 const TagContainer = (props) => {
     const { className, children, overflow, background = 'none', ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tag-container', {
+    (0, index_js_1.useTheme)();
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-tag-container', {
             [`iui-${overflow}`]: !!overflow,
             'iui-visible': background !== 'none',
         }, className), ...rest }, children));

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

@@ -1,6 +1,6 @@
-export { Tag } from './Tag';
-export type { TagProps } from './Tag';
+export { Tag } from './Tag.js';
+export type { TagProps } from './Tag.js';
 declare const _default: "./Tag";
 export default _default;
-export { TagContainer } from './TagContainer';
-export type { TagContainerProps } from './TagContainer';
+export { TagContainer } from './TagContainer.js';
+export type { TagContainerProps } from './TagContainer.js';

package/cjs/core/Tag/index.js

@@ -5,8 +5,8 @@ exports.TagContainer = exports.Tag = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Tag_1 = require("./Tag");
-Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
+var Tag_js_1 = require("./Tag.js");
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_js_1.Tag; } });
 exports.default = './Tag';
-var TagContainer_1 = require("./TagContainer");
-Object.defineProperty(exports, "TagContainer", { enumerable: true, get: function () { return TagContainer_1.TagContainer; } });
+var TagContainer_js_1 = require("./TagContainer.js");
+Object.defineProperty(exports, "TagContainer", { enumerable: true, get: function () { return TagContainer_js_1.TagContainer; } });

package/cjs/core/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/input.css';
 export declare type TextareaProps = {
     /**

package/cjs/core/Textarea/Textarea.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,8 +32,8 @@ exports.Textarea = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic textarea component
@@ -18,16 +41,16 @@ require("@itwin/itwinui-css/css/input.css");
  * <Textarea setFocus={true} placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-exports.Textarea = react_1.default.forwardRef((props, ref) => {
+exports.Textarea = React.forwardRef((props, ref) => {
     const { className, rows = 3, setFocus = false, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const textAreaRef = react_1.default.useRef(null);
-    const refs = (0, utils_1.useMergedRefs)(ref, textAreaRef);
-    react_1.default.useEffect(() => {
+    (0, index_js_1.useTheme)();
+    const textAreaRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(ref, textAreaRef);
+    React.useEffect(() => {
         if (textAreaRef.current && setFocus) {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("textarea", { className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
+    return (React.createElement("textarea", { className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
 });
 exports.default = exports.Textarea;

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

@@ -1,4 +1,4 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea';
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
 declare const _default: "./Textarea";
 export default _default;

package/cjs/core/Textarea/index.js

@@ -5,6 +5,6 @@ exports.Textarea = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Textarea_1 = require("./Textarea");
-Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
+var Textarea_js_1 = require("./Textarea.js");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_js_1.Textarea; } });
 exports.default = './Textarea';