@itwin/itwinui-react 3.12.2 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## 3.13.0
+
+### Minor Changes
+
+- [#2106](https://github.com/iTwin/iTwinUI/pull/2106): All internal CSS class prefixes have been changed to prevent style conflicts across minor versions.
+  - While this is _not_ considered a breaking change according to our [support policy](https://github.com/iTwin/iTwinUI/wiki/Support-policy), this change might affect you if you ignore our pleas to not rely on these internal class names. The recommendation is to pass your own custom `className` through props.
+
+- [#2131](https://github.com/iTwin/iTwinUI/pull/2131): Development-only warnings will now be properly excluded from the production build. This is done using a separate `"development"` entrypoint listed in `package.json#exports`.
+
+- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): Changed the column manager from a `DropdownMenu` to a `Popover` to fix invalid markup and accessibility issues.
+
+- Added dependency on `@tanstack/react-virtual` to replace the custom virtual-scroll implementation. This affects the `enableVirtualization` prop in `ComboBox`, `Table`, and `Tree`.
+  - [#2061](https://github.com/iTwin/iTwinUI/pull/2061): Virtualized `ComboBox` now correctly supports dynamic sizing, e.g. when options both with and without `subLabel` are present.
+  - [#2092](https://github.com/iTwin/iTwinUI/pull/2092): Virtualized `Table` has been improved so that scrolling no longer jumps when rows are scrolled past.
+  - [#2139](https://github.com/iTwin/iTwinUI/pull/2139): Virtualized `Tree` no longer requires a wrapping scrollable element, since the tree itself is scrollable now.
+    <details>
+      <summary>Diff</summary>
+
+      ```diff
+      - <div style={{overflow: 'auto', height: 'min(400px, 90vh)'}}>
+          <Tree
+            enableVirtualization
+      +     style={{height: 'min(400px, 90vh)'}}
+          />
+      - </div>
+      ```
+    </details>
+
+### Patch Changes
+
+- [#2139](https://github.com/iTwin/iTwinUI/pull/2139): Added `overflow: auto` to `Tree` component to provide more consistent styling across components.
+- [#2137](https://github.com/iTwin/iTwinUI/pull/2137): Console warnings will now be displayed during development when multiple versions of iTwinUI are detected.
+- [#2145](https://github.com/iTwin/iTwinUI/pull/2145): Fixed an issue where the `Overlay` component was causing bundler warnings about a non-analyzable expression used in a dependency.
+- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): The `Table` column manager button's open state no longer has the `Button`'s blue active color.
+- [#2142](https://github.com/iTwin/iTwinUI/pull/2142): Added `displayName`s to all components that were previously missing them.
+- [#2141](https://github.com/iTwin/iTwinUI/pull/2141): `displayName`s have been eliminated from the production build, so they only show up during development.
+- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): `ActionColumn`'s `dropdownMenuProps` no longer exposes the unnecessary `matchWidth` prop.
+
 ## 3.12.2
 
 ### Patch Changes

package/DEV-cjs/core/Alert/Alert.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Alert", {
+    enumerable: true,
+    get: function() {
+        return Alert;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _IconButton = require("../Buttons/IconButton.js");
+const _Icon = require("../Icon/Icon.js");
+const _Anchor = require("../Typography/Anchor.js");
+const AlertContext = _react.createContext(void 0);
+const AlertComponent = _react.forwardRef((props, forwardedRef)=>{
+    let { children, type = 'informational', isSticky = false, clickableText, clickableTextProps, onClose, ...rest } = props;
+    return _react.createElement(Alert.Wrapper, {
+        type: type,
+        isSticky: isSticky,
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(Alert.Icon, null), _react.createElement(Alert.Message, null, children, clickableText ? _react.createElement(Alert.Action, clickableTextProps, clickableText) : null), onClose ? _react.createElement(Alert.CloseButton, {
+        onClick: onClose
+    }) : null);
+});
+AlertComponent.displayName = 'Alert';
+const AlertWrapper = _react.forwardRef((props, ref)=>{
+    let { children, className, type = 'informational', isSticky = false, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-alert', className),
+        "data-iui-status": type,
+        "data-iui-variant": isSticky ? 'sticky' : void 0,
+        ref: ref,
+        ...rest
+    }, _react.createElement(AlertContext.Provider, {
+        value: {
+            type
+        }
+    }, children));
+});
+AlertWrapper.displayName = 'Alert.Wrapper';
+const AlertIcon = _react.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    let { type } = (0, _index.useSafeContext)(AlertContext);
+    let StatusIcon = _index.StatusIconMap[type];
+    return _react.createElement(_Icon.Icon, {
+        fill: type,
+        ref: ref,
+        ...rest
+    }, children ?? _react.createElement(StatusIcon, null));
+});
+AlertIcon.displayName = 'Alert.Icon';
+const AlertMessage = _index.polymorphic.span('iui-alert-message');
+AlertMessage.displayName = 'Alert.Message';
+const AlertAction = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { type } = (0, _index.useSafeContext)(AlertContext);
+    return _react.createElement(_Anchor.Anchor, {
+        as: props.href ? 'a' : 'button',
+        className: (0, _classnames.default)('iui-button-base', 'iui-alert-link', className),
+        underline: true,
+        "data-iui-status": type,
+        ref: ref,
+        ...rest
+    }, children);
+});
+AlertAction.displayName = 'Alert.Action';
+const AlertCloseButton = _react.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    return _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        size: "small",
+        "aria-label": "Close",
+        ref: ref,
+        ...rest
+    }, children ?? _react.createElement(_index.SvgCloseSmall, null));
+});
+AlertCloseButton.displayName = 'Alert.CloseButton';
+const Alert = Object.assign(AlertComponent, {
+    Wrapper: AlertWrapper,
+    Icon: AlertIcon,
+    Message: AlertMessage,
+    Action: AlertAction,
+    CloseButton: AlertCloseButton
+});

package/DEV-cjs/core/Avatar/Avatar.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Avatar: function() {
+        return Avatar;
+    },
+    defaultStatusTitles: function() {
+        return defaultStatusTitles;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden.js");
+const getBackground = (color)=>{
+    if (!color) return '';
+    return (0, _index.isSoftBackground)(color) ? _index.SoftBackgrounds[color] : color;
+};
+const defaultStatusTitles = {
+    away: 'Away',
+    busy: 'Busy',
+    offline: 'Offline',
+    online: 'Online'
+};
+const Avatar = _react.forwardRef((props, ref)=>{
+    let { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
+    let statusTitles = {
+        ...defaultStatusTitles,
+        ...translatedStatusTitles
+    };
+    return _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-avatar', className),
+        "data-iui-size": 'medium' !== size ? size : void 0,
+        "data-iui-status": status,
+        title: title,
+        style: {
+            backgroundColor: getBackground(backgroundColor),
+            ...style
+        },
+        ref: ref,
+        ...rest
+    }, image ? null : abbreviation?.substring(0, 2), image, status ? _react.createElement(_VisuallyHidden.VisuallyHidden, null, statusTitles[status]) : null);
+});
+Avatar.displayName = 'Avatar';

package/DEV-cjs/core/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AvatarGroup", {
+    enumerable: true,
+    get: function() {
+        return AvatarGroup;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const AvatarGroup = _react.forwardRef((props, ref)=>{
+    let maxLength = 99;
+    let { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
+    let childrenArray = _react.Children.toArray(children);
+    let childrenLength = childrenArray.length;
+    let getAvatarList = (count)=>childrenArray.slice(0, count).map((child)=>_react.cloneElement(child, {
+                status: void 0,
+                size: iconSize
+            }));
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-avatar-list', {
+            'iui-animated': animated,
+            'iui-stacked': stacked
+        }, className),
+        ref: ref,
+        ...rest
+    }, childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1), childrenArray.length > maxIcons + 1 && _react.createElement(_react.Fragment, null, getAvatarList(maxIcons), _react.createElement(_index.Box, {
+        ...countIconProps,
+        className: (0, _classnames.default)('iui-avatar', 'iui-avatar-count', countIconProps?.className),
+        "data-iui-size": 'medium' !== iconSize ? iconSize : void 0
+    }, childrenLength <= maxLength ? `${childrenLength - maxIcons}` : `${maxLength}+`)));
+});
+AvatarGroup.displayName = 'AvatarGroup';

package/DEV-cjs/core/Backdrop/Backdrop.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Backdrop", {
+    enumerable: true,
+    get: function() {
+        return Backdrop;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const Backdrop = _react.forwardRef((props, ref)=>{
+    let { isVisible = true, className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-backdrop', {
+            'iui-backdrop-visible': isVisible
+        }, className),
+        ref: ref,
+        ...rest
+    });
+});
+Backdrop.displayName = 'Backdrop';

package/DEV-cjs/core/Badge/Badge.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Badge", {
+    enumerable: true,
+    get: function() {
+        return Badge;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const getBadgeColorValue = (color)=>{
+    if (!color) return '';
+    return (0, _index.isSoftBackground)(color) ? _index.SoftBackgrounds[color] : color;
+};
+const getStatusValue = (color)=>{
+    let statuses = [
+        'positive',
+        'negative',
+        'warning',
+        'informational'
+    ];
+    return color && statuses.includes(color) ? color : void 0;
+};
+const Badge = _react.forwardRef((props, forwardedRef)=>{
+    let { backgroundColor, style, className, children, ...rest } = props;
+    let reducedBackgroundColor = 'primary' === backgroundColor ? 'informational' : backgroundColor;
+    let statusValue = getStatusValue(reducedBackgroundColor);
+    let _style = reducedBackgroundColor && !statusValue ? {
+        '--iui-badge-background-color': getBadgeColorValue(reducedBackgroundColor),
+        ...style
+    } : {
+        ...style
+    };
+    return _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-badge', className),
+        style: _style,
+        "data-iui-status": statusValue,
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+Badge.displayName = 'Badge';

package/DEV-cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+    enumerable: true,
+    get: function() {
+        return Breadcrumbs;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _Button = require("../Buttons/Button.js");
+const _Anchor = require("../Typography/Anchor.js");
+const logWarning = (0, _index.createWarningLogger)();
+const BreadcrumbsComponent = _react.forwardRef((props, ref)=>{
+    let { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
+    let [overflowRef, visibleCount] = (0, _index.useOverflow)(items);
+    let refs = (0, _index.useMergedRefs)(overflowRef, ref);
+    return _react.createElement(_index.Box, {
+        as: "nav",
+        className: (0, _classnames.default)('iui-breadcrumbs', className),
+        ref: refs,
+        "aria-label": "Breadcrumb",
+        ...rest
+    }, _react.createElement(_index.Box, {
+        as: "ol",
+        className: "iui-breadcrumbs-list"
+    }, visibleCount > 1 && _react.createElement(_react.Fragment, null, _react.createElement(ListItem, {
+        item: items[0],
+        isActive: 0 === currentIndex
+    }), _react.createElement(Separator, {
+        separator: separator
+    })), items.length - visibleCount > 0 && _react.createElement(_react.Fragment, null, _react.createElement(_index.Box, {
+        as: "li",
+        className: "iui-breadcrumbs-item"
+    }, overflowButton ? overflowButton(visibleCount) : _react.createElement(_index.Box, {
+        as: "span",
+        className: "iui-breadcrumbs-content"
+    }, "…")), _react.createElement(Separator, {
+        separator: separator
+    })), items.slice(visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1).map((_, _index)=>{
+        let index = visibleCount > 1 ? 1 + (items.length - visibleCount) + _index : items.length - 1;
+        return _react.createElement(_react.Fragment, {
+            key: index
+        }, _react.createElement(ListItem, {
+            item: items[index],
+            isActive: currentIndex === index
+        }), index < items.length - 1 && _react.createElement(Separator, {
+            separator: separator
+        }));
+    })));
+});
+BreadcrumbsComponent.displayName = 'Breadcrumbs';
+const ListItem = ({ item, isActive })=>{
+    let children = item;
+    if (children?.type === 'span' || children?.type === 'a' || children?.type === _Button.Button) {
+        logWarning('Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.');
+        children = _react.createElement(BreadcrumbsItem, children.props);
+    }
+    return _react.createElement(_index.Box, {
+        as: "li",
+        className: 'iui-breadcrumbs-item'
+    }, children && _react.cloneElement(children, {
+        'aria-current': children.props['aria-current'] ?? isActive ? 'location' : void 0
+    }));
+};
+const Separator = ({ separator })=>_react.createElement(_index.Box, {
+        as: "li",
+        className: "iui-breadcrumbs-separator",
+        "aria-hidden": true
+    }, separator ?? _react.createElement(_index.SvgChevronRight, null));
+const BreadcrumbsItem = _react.forwardRef((props, forwardedRef)=>{
+    let { as: asProp, ...rest } = props;
+    let commonProps = {
+        ...rest,
+        className: (0, _classnames.default)('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef
+    };
+    if ('span' === String(asProp) || null == props.href && null == props.onClick && null == asProp) return _react.createElement(_index.Box, {
+        as: "span",
+        ...commonProps
+    });
+    return _react.createElement(_Button.Button, {
+        as: 'a' === asProp || null == asProp && props.href ? _Anchor.Anchor : asProp,
+        styleType: "borderless",
+        ...commonProps
+    });
+});
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
+    Item: BreadcrumbsItem
+});

package/DEV-cjs/core/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ButtonGroup: function() {
+        return ButtonGroup;
+    },
+    ButtonGroupContext: function() {
+        return ButtonGroupContext;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _react1 = require("@floating-ui/react");
+const ButtonGroupContext = _react.createContext(void 0);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+const ButtonGroup = _react.forwardRef((props, forwardedRef)=>{
+    let { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    let children = _react.useMemo(()=>{
+        if ('toolbar' !== props.role) return childrenProp;
+        return _react.Children.map(childrenProp, (child, index)=>_react.isValidElement(child) ? _react.createElement(_react1.CompositeItem, {
+                key: index,
+                render: child
+            }) : child);
+    }, [
+        childrenProp,
+        props.role
+    ]);
+    let node = overflowButton ? _react.createElement(OverflowGroup, {
+        orientation: orientation,
+        overflowButton: overflowButton,
+        overflowPlacement: overflowPlacement,
+        ref: forwardedRef,
+        ...rest
+    }, children) : _react.createElement(BaseGroup, {
+        orientation: orientation,
+        ref: forwardedRef,
+        ...rest
+    }, children);
+    return _react.createElement(_react1.FloatingDelayGroup, {
+        delay: {
+            open: 50,
+            close: 250
+        }
+    }, _react.createElement(ButtonGroupContext.Provider, {
+        value: orientation
+    }, 'toolbar' === props.role ? _react.createElement(_react1.Composite, {
+        orientation: orientation,
+        render: node,
+        disabledIndices: []
+    }) : node));
+});
+ButtonGroup.displayName = 'ButtonGroup';
+const BaseGroup = _react.forwardRef((props, forwardedRef)=>{
+    let { orientation, className, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-button-group', className),
+        "data-iui-orientation": 'vertical' === orientation ? orientation : void 0,
+        ref: forwardedRef,
+        ...rest
+    });
+});
+const OverflowGroup = _react.forwardRef((props, forwardedRef)=>{
+    let { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
+    let items = _react.useMemo(()=>_react.Children.toArray(childrenProp).filter(Boolean), [
+        childrenProp
+    ]);
+    let [overflowRef, visibleCount] = (0, _index.useOverflow)(items, !overflowButton, orientation);
+    return _react.createElement(BaseGroup, {
+        orientation: orientation,
+        ...rest,
+        className: (0, _classnames.default)({
+            'iui-button-group-overflow-x': !!overflowButton && 'horizontal' === orientation
+        }, props.className),
+        ref: (0, _index.useMergedRefs)(forwardedRef, overflowRef)
+    }, (()=>{
+        if (!(visibleCount < items.length)) return items;
+        let overflowStart = 'start' === overflowPlacement ? items.length - visibleCount : visibleCount - 1;
+        return _react.createElement(_react.Fragment, null, overflowButton && 'start' === overflowPlacement && overflowButton(overflowStart), 'start' === overflowPlacement ? items.slice(overflowStart + 1) : items.slice(0, Math.max(0, overflowStart)), overflowButton && 'end' === overflowPlacement && overflowButton(overflowStart));
+    })());
+});

package/DEV-cjs/core/Buttons/Button.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Button", {
+    enumerable: true,
+    get: function() {
+        return Button;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _ProgressRadial = require("../ProgressIndicators/ProgressRadial.js");
+const _Popover = require("../Popover/Popover.js");
+const Button = _react.forwardRef((props, ref)=>{
+    let { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, loading: loading, disabled: disabledProp, ...rest } = props;
+    let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+    return _react.createElement(_index.ButtonBase, {
+        ref: ref,
+        className: (0, _classnames.default)('iui-button', 'iui-field', className),
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        "data-iui-size": size,
+        "data-iui-loading": loading ? 'true' : void 0,
+        "data-iui-has-popover": hasPopoverOpen ? 'open' : void 0,
+        disabled: disabledProp || loading,
+        ...rest,
+        style: {
+            '--_iui-width': stretched ? '100%' : void 0,
+            ...props.style
+        }
+    }, startIcon && _react.createElement(_index.Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...startIconProps,
+        className: (0, _classnames.default)('iui-button-icon', startIconProps?.className)
+    }, startIcon), children && _react.createElement(_index.Box, {
+        as: "span",
+        ...labelProps,
+        className: (0, _classnames.default)('iui-button-label', labelProps?.className)
+    }, children), endIcon && _react.createElement(_index.Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...endIconProps,
+        className: (0, _classnames.default)('iui-button-icon', endIconProps?.className)
+    }, endIcon), loading && _react.createElement(_ProgressRadial.ProgressRadial, {
+        size: 'small' === size ? 'x-small' : 'small',
+        className: "iui-button-spinner",
+        "aria-hidden": true
+    }));
+});
+Button.displayName = 'Button';

package/DEV-cjs/core/Buttons/DropdownButton.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DropdownButton", {
+    enumerable: true,
+    get: function() {
+        return DropdownButton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _Button = require("./Button.js");
+const _DropdownMenu = require("../DropdownMenu/DropdownMenu.js");
+const _index = require("../../utils/index.js");
+const DropdownButton = _react.forwardRef((props, forwardedRef)=>{
+    let { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
+    let [isMenuOpen, setIsMenuOpen] = _react.useState(false);
+    return _react.createElement(_DropdownMenu.DropdownMenu, {
+        menuItems: menuItems,
+        matchWidth: true,
+        visible: isMenuOpen,
+        ...dropdownMenuProps,
+        onVisibleChange: (open)=>{
+            setIsMenuOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
+        }
+    }, _react.createElement(_Button.Button, {
+        className: (0, _classnames.default)('iui-button-dropdown', className),
+        size: size,
+        styleType: styleType,
+        endIcon: isMenuOpen ? _react.createElement(_index.SvgCaretUpSmall, {
+            "aria-hidden": true
+        }) : _react.createElement(_index.SvgCaretDownSmall, {
+            "aria-hidden": true
+        }),
+        ref: forwardedRef,
+        ...rest
+    }, children));
+});
+DropdownButton.displayName = 'DropdownButton';

package/DEV-cjs/core/Buttons/IconButton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "IconButton", {
+    enumerable: true,
+    get: function() {
+        return IconButton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _Tooltip = require("../Tooltip/Tooltip.js");
+const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden.js");
+const _ButtonGroup = require("../ButtonGroup/ButtonGroup.js");
+const _Popover = require("../Popover/Popover.js");
+const IconButton = _react.forwardRef((props, ref)=>{
+    let { isActive, children, styleType = 'default', size, className, label, iconProps, labelProps, ...rest } = props;
+    let buttonGroupOrientation = _react.useContext(_ButtonGroup.ButtonGroupContext);
+    let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+    let button = _react.createElement(_index.ButtonBase, {
+        ref: ref,
+        className: (0, _classnames.default)('iui-button', 'iui-field', className),
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        "data-iui-size": size,
+        "data-iui-active": isActive,
+        "data-iui-has-popover": hasPopoverOpen ? 'open' : void 0,
+        "aria-pressed": isActive,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...iconProps,
+        className: (0, _classnames.default)('iui-button-icon', iconProps?.className)
+    }, children), label ? _react.createElement(_VisuallyHidden.VisuallyHidden, null, label) : null);
+    return label ? _react.createElement(_Tooltip.Tooltip, {
+        placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
+        ...labelProps,
+        content: label,
+        ariaStrategy: "none"
+    }, button) : button;
+});
+IconButton.displayName = 'IconButton';

package/DEV-cjs/core/Buttons/IdeasButton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "IdeasButton", {
+    enumerable: true,
+    get: function() {
+        return IdeasButton;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _Button = require("./Button.js");
+const IdeasButton = _react.forwardRef((props, ref)=>{
+    let { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
+    return _react.createElement(_Button.Button, {
+        ref: ref,
+        className: (0, _classnames.default)('iui-button-idea', className),
+        "data-iui-variant": "high-visibility",
+        onClick: onClick,
+        startIcon: _react.createElement(_index.SvgSmileyHappy, {
+            "aria-hidden": true
+        }),
+        ...rest
+    }, feedbackLabel);
+});
+IdeasButton.displayName = 'IdeasButton';