@itwin/itwinui-react 3.15.5 → 3.16.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 3.16.1
+
+### Patch Changes
+
+- [#2362](https://github.com/iTwin/iTwinUI/pull/2362): `Select` with "small" size now has the same height (`24px`) as other input elements with "small" size (e.g. `ComboBox`)
+- [#2370](https://github.com/iTwin/iTwinUI/pull/2370): Fixed `Panels` animations not working in some rare cases.
+- [#2374](https://github.com/iTwin/iTwinUI/pull/2374): Fixed `HeaderButton`'s `startIcon` and `endIcon` fill color.
+- [#2359](https://github.com/iTwin/iTwinUI/pull/2359): `Tooltip` now remains visible when hovered up to `4px` outside its border.
+
+## 3.16.0
+
+### Minor Changes
+
+- [#2001](https://github.com/iTwin/iTwinUI/pull/2001): Added a new generic `unstable_Panels` component for easy setup of nested screens/panels. Example uses: multi-layered menus, wizards, settings screens, etc.
+  - This API is temporarily marked as **unstable** to collect [feedback](https://github.com/iTwin/iTwinUI/discussions/2348) for some time to tailor the generic component specifically to users' needs.
+- [#2345](https://github.com/iTwin/iTwinUI/pull/2345): `Stepper` now allows passing custom icon or content in each step circle using a `stepContent` property in each item of the `steps` array.
+- [#2294](https://github.com/iTwin/iTwinUI/pull/2294): `ComboBox` with `multiple` enabled now offers a `clearFilterOnOptionToggle` prop to control whether the filter is cleared or not when an option is toggled. Default value is `true` (i.e. no breaking change).
+- [#2299](https://github.com/iTwin/iTwinUI/pull/2299)/[5d313a7](https://github.com/iTwin/iTwinUI/commit/5d313a763b5b5996664a3af14c8270e40dc07b72): Added new `tileContainer` prop to `RadioTileGroup` to allow further customization of inner DOM elements.
+
+### Patch Changes
+
+- [#2337](https://github.com/iTwin/iTwinUI/pull/2337): Fixed a `Table` bug where row items could not be focused via the `Tab` key.
+- [#2317](https://github.com/iTwin/iTwinUI/pull/2317): Fixed duplicate data returned from `Table`'s `onSelect` prop.
+- [#2316](https://github.com/iTwin/iTwinUI/pull/2316): `TablePaginator`'s page buttons no longer get overlapped by neighboring paginator elements.
+- [#2327](https://github.com/iTwin/iTwinUI/pull/2327): Fixed a `Tree` bug where the `size` prop was not respected when virtualization was enabled.
+- [#2311](https://github.com/iTwin/iTwinUI/pull/2311): Updated the default value of `Dialog`'s `setFocus` prop to be based on the value of the `trapFocus` prop.
+- [#2154](https://github.com/iTwin/iTwinUI/pull/2154): Fixed bugs and improved performance in components with overflow support (e.g. `ComboBox`, `Select`, `ButtonGroup`, `Breadcrumbs`, etc.)
+- [#2339](https://github.com/iTwin/iTwinUI/pull/2339): Improved the accessibility of `MiddleTextTruncation` so that the entire untruncated text is part of the accessibility tree.
+- [#2334](https://github.com/iTwin/iTwinUI/pull/2334): `DatePicker` with `enableRangeSelect` now allows `startDate` and `endDate` to _both_ be `undefined` (e.g. when there is no initial range). Passing `Date` to just _one_ of them is not allowed.
+- [#2347](https://github.com/iTwin/iTwinUI/pull/2347): `InputWithDecorations.Input` now properly gets `cursor: not-allowed` when disabled.
+- [#2323](https://github.com/iTwin/iTwinUI/pull/2323): Ensured that the `useToaster` wrapper does not block clicks when used within other portal containers (e.g. from AppUI).
+
 ## 3.15.5
 
 ### Patch Changes

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

@@ -15,7 +15,7 @@ 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 BreadcrumbsComponent = _react.forwardRef((props, ref) => {
+const BreadcrumbsComponent = _react.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
     currentIndex = _react.Children.count(childrenProp) - 1,
@@ -33,7 +33,7 @@ const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
     {
       as: 'nav',
       className: (0, _classnames.default)('iui-breadcrumbs', className),
-      ref: ref,
+      ref: forwardedRef,
       'aria-label': 'Breadcrumb',
       ...rest,
     },

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

@@ -46,11 +46,11 @@ const Checkbox = _react.forwardRef((props, ref) => {
         'iui-checkbox',
         {
           'iui-checkbox-visibility': 'eyeball' === variant,
-          'iui-loading': isLoading,
         },
         className,
       ),
       style: style,
+      'data-iui-loading': isLoading ? 'true' : void 0,
       disabled: disabled || isLoading,
       type: 'checkbox',
       ref: refs,
@@ -71,13 +71,11 @@ const Checkbox = _react.forwardRef((props, ref) => {
           as: 'label',
           className: (0, _classnames.default)(
             'iui-checkbox-wrapper',
-            {
-              'iui-disabled': disabled,
-              [`iui-${status}`]: !!status,
-              'iui-loading': isLoading,
-            },
             wrapperClassName,
           ),
+          'data-iui-disabled': disabled ? 'true' : void 0,
+          'data-iui-status': status,
+          'data-iui-loading': isLoading ? 'true' : void 0,
           ...restWrapperProps,
         },
         checkbox,

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

@@ -51,6 +51,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     onHide: onHideProp,
     id = inputProps?.id ? `iui-${inputProps.id}-cb` : idPrefix,
     defaultValue,
+    clearFilterOnOptionToggle = true,
     ...rest
   } = props;
   let inputRef = _react.useRef(null);
@@ -204,7 +205,6 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         preventScroll: true,
       });
       if (optionsRef.current[__originalIndex]?.disabled) return;
-      setIsInputDirty(false);
       if (multiple) {
         let actionType = isMenuItemSelected(__originalIndex)
           ? 'removed'
@@ -222,7 +222,10 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
             .filter(Boolean)
             .join(', '),
         );
-        setInputValue('');
+        if (clearFilterOnOptionToggle) {
+          setInputValue('');
+          setIsInputDirty(false);
+        }
       } else {
         setSelectedIndexes(__originalIndex);
         hide();
@@ -230,13 +233,14 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       }
     },
     [
-      selectedChangeHandler,
-      isMenuItemSelected,
+      optionsRef,
       multiple,
+      isMenuItemSelected,
+      selectedChangeHandler,
+      setSelectedIndexes,
       onChangeHandler,
-      optionsRef,
+      clearFilterOnOptionToggle,
       hide,
-      setSelectedIndexes,
     ],
   );
   let getMenuItem = _react.useCallback(

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

@@ -148,6 +148,14 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     showDatesOutsideMonth = true,
     ...rest
   } = props;
+  let logWarning = (0, _index.useWarningLogger)();
+  {
+    let onlyOneRangePropPassed = (startDate ? 1 : 0) + (endDate ? 1 : 0) === 1;
+    if (enableRangeSelect && onlyOneRangePropPassed)
+      logWarning(
+        '`DatePicker` with `enableRangeSelect` needs *both* `startDate` and `endDate` to either be `Date` or `undefined`. Passing `Date` to just one of them is not allowed.',
+      );
+  }
   let monthNames = localizedNames?.months ?? defaultMonths;
   let shortDays = localizedNames?.shortDays ?? defaultShortDays;
   let longDays = localizedNames?.days ?? defaultLongDays;
@@ -192,7 +200,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
   let popoverInitialFocusContext = _react.useContext(
     _Popover.PopoverInitialFocusContext,
   );
-  _react.useLayoutEffect(() => {
+  (0, _index.useLayoutEffect)(() => {
     if (setFocus && popoverInitialFocusContext)
       popoverInitialFocusContext.setInitialFocus(-1);
   }, [popoverInitialFocusContext, setFocus]);

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

@@ -23,7 +23,7 @@ const _reacttransitiongroup = require('react-transition-group');
 const DialogComponent = _react.forwardRef((props, ref) => {
   let {
     trapFocus = false,
-    setFocus = false,
+    setFocus = trapFocus,
     preventDocumentScroll = false,
     isOpen = false,
     isDismissible = true,

package/DEV-cjs/core/Header/HeaderDropdownButton.js

@@ -8,15 +8,13 @@ Object.defineProperty(exports, 'HeaderDropdownButton', {
     return HeaderDropdownButton;
   },
 });
-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 _DropdownMenu = require('../DropdownMenu/DropdownMenu.js');
 const _index = require('../../utils/index.js');
 const _HeaderBasicButton = require('./HeaderBasicButton.js');
 const HeaderDropdownButton = _react.forwardRef((props, ref) => {
-  let { menuItems, className, children, ...rest } = props;
+  let { menuItems, children, ...rest } = props;
   let [isMenuOpen, setIsMenuOpen] = _react.useState(false);
   let [menuWidth, setMenuWidth] = _react.useState(0);
   let buttonRef = _react.useRef(null);
@@ -36,10 +34,6 @@ const HeaderDropdownButton = _react.forwardRef((props, ref) => {
     _react.createElement(
       _HeaderBasicButton.HeaderBasicButton,
       {
-        className: (0, _classnames.default)(
-          'iui-header-breadcrumb-button',
-          className,
-        ),
         ref: refs,
         'aria-label': 'Dropdown',
         endIcon: isMenuOpen

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

@@ -0,0 +1,322 @@
+'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, {
+  Panels: function () {
+    return Panels;
+  },
+  PanelsWrapper: function () {
+    return PanelsWrapper;
+  },
+  PanelsWrapperContext: function () {
+    return PanelsWrapperContext;
+  },
+});
+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 _reactdom = _interop_require_wildcard._(require('react-dom'));
+const _index = require('../../utils/index.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _Flex = require('../Flex/Flex.js');
+const _Text = require('../Typography/Text.js');
+const _classnames = _interop_require_default._(require('classnames'));
+const _helpers = require('./helpers.js');
+const PanelsWrapper = _react.forwardRef((props, forwardedRef) => {
+  let {
+    children,
+    className,
+    onActiveIdChange: onActiveIdChangeProp,
+    instance,
+    ...rest
+  } = props;
+  let onActiveIdChange = (0, _index.useLatestRef)(onActiveIdChangeProp);
+  let ref = _react.useRef(null);
+  let [activePanelId, setActivePanelId] = _react.useState(void 0);
+  let [triggers, setTriggers] = _react.useState({});
+  let panels = _react.useRef(new Set());
+  let [shouldFocus, setShouldFocus] = _react.useState(void 0);
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
+  let changeActivePanel = _react.useCallback(
+    (newActiveId) => {
+      if (!panels.current.has(newActiveId) || newActiveId === activePanelId)
+        return;
+      _reactdom.flushSync(() => setActivePanelId(newActiveId));
+      onActiveIdChange.current?.(newActiveId);
+      ref.current
+        ?.getRootNode()
+        .getElementById(newActiveId)
+        ?.scrollIntoView({
+          block: 'nearest',
+          inline: 'center',
+          behavior: motionOk ? 'smooth' : 'instant',
+        });
+    },
+    [activePanelId, motionOk, onActiveIdChange],
+  );
+  return _react.createElement(
+    PanelsWrapperContext.Provider,
+    {
+      value: _react.useMemo(
+        () => ({
+          activePanelId,
+          setActivePanelId,
+          changeActivePanel,
+          triggers,
+          setTriggers,
+          shouldFocus,
+          setShouldFocus,
+          panels,
+        }),
+        [
+          activePanelId,
+          changeActivePanel,
+          setActivePanelId,
+          setTriggers,
+          shouldFocus,
+          triggers,
+        ],
+      ),
+    },
+    _react.createElement(
+      _helpers.PanelsInstanceProvider,
+      {
+        instance: instance,
+      },
+      _react.createElement(
+        _index.Box,
+        {
+          ref: (0, _index.useMergedRefs)(ref, forwardedRef),
+          ...rest,
+          className: (0, _classnames.default)('iui-panel-wrapper', className),
+        },
+        children,
+      ),
+    ),
+  );
+});
+PanelsWrapper.displayName = 'Panels.Wrapper';
+const PanelsWrapperContext = _react.createContext(void 0);
+PanelsWrapperContext.displayName = 'PanelsWrapperContext';
+const Panel = _react.forwardRef((props, forwardedRef) => {
+  let { id, children, className, ...rest } = props;
+  let { activePanelId, triggers, panels, setActivePanelId } = (0,
+  _index.useSafeContext)(PanelsWrapperContext);
+  let associatedTrigger = _react.useMemo(() => triggers[id], [id, triggers]);
+  let previousActivePanelId = useDelayed(activePanelId) || activePanelId;
+  let isMounted = [activePanelId, previousActivePanelId].includes(id);
+  let isTransitioning =
+    activePanelId === id && activePanelId !== previousActivePanelId;
+  let isInert = previousActivePanelId === id && activePanelId !== id;
+  (0, _index.useLayoutEffect)(() => {
+    let isFirstPanel = null == activePanelId && 0 === panels.current.size;
+    if (isFirstPanel) setActivePanelId(id);
+    let panelsCurrent = panels.current;
+    if (!panelsCurrent.has(id)) panelsCurrent.add(id);
+    return () => {
+      panelsCurrent.delete(id);
+    };
+  }, [activePanelId, id, panels, setActivePanelId]);
+  return _react.createElement(
+    PanelContext.Provider,
+    {
+      value: _react.useMemo(
+        () => ({
+          id,
+          associatedTrigger,
+        }),
+        [associatedTrigger, id],
+      ),
+    },
+    isMounted &&
+      _react.createElement(
+        _index.Box,
+        {
+          ref: forwardedRef,
+          id: id,
+          className: (0, _classnames.default)('iui-panel', className),
+          'aria-labelledby': `${id}-header-title`,
+          role: 'group',
+          inert: isInert ? '' : void 0,
+          'data-iui-transitioning': isTransitioning ? 'true' : void 0,
+          ...rest,
+        },
+        children,
+      ),
+  );
+});
+Panel.displayName = 'Panels.Panel';
+const PanelContext = _react.createContext(void 0);
+PanelContext.displayName = 'PanelContext';
+const PanelTrigger = (props) => {
+  let { children, for: forProp } = props;
+  let {
+    changeActivePanel,
+    triggers,
+    setTriggers,
+    activePanelId: activePanel,
+    shouldFocus,
+    setShouldFocus,
+    panels,
+  } = (0, _index.useSafeContext)(PanelsWrapperContext);
+  let { id: panelId } = (0, _index.useSafeContext)(PanelContext);
+  let fallbackId = _react.useId();
+  let triggerId = children.props.id || fallbackId;
+  let onClick = _react.useCallback(() => {
+    if (null == activePanel) return;
+    setShouldFocus({
+      fromPanelId: activePanel,
+      toPanelId: forProp,
+      direction: 'forward',
+    });
+    changeActivePanel?.(forProp);
+  }, [activePanel, changeActivePanel, forProp, setShouldFocus]);
+  let focusRef = _react.useCallback(
+    (el) => {
+      if (
+        shouldFocus?.direction === 'backward' &&
+        shouldFocus?.toPanelId === panelId &&
+        shouldFocus?.fromPanelId === forProp
+      ) {
+        el?.focus({
+          preventScroll: true,
+        });
+        setShouldFocus(void 0);
+      }
+    },
+    [forProp, panelId, setShouldFocus, shouldFocus],
+  );
+  let logWarning = (0, _index.useWarningLogger)();
+  _react.useEffect(() => {
+    if (!panels.current.has(forProp))
+      logWarning(
+        `Panels.Trigger's \`for\` prop ("${forProp}") corresponds to no Panel.`,
+      );
+  }, [forProp, logWarning, panels, triggers]);
+  _react.useEffect(() => {
+    setTriggers((oldTriggers) => {
+      let triggersMatch = oldTriggers[forProp];
+      if (
+        null == triggersMatch ||
+        panelId !== triggersMatch.panelId ||
+        triggerId !== triggersMatch.triggerId
+      )
+        return {
+          ...oldTriggers,
+          [forProp]: {
+            panelId,
+            triggerId,
+          },
+        };
+      return oldTriggers;
+    });
+  }, [forProp, panelId, setTriggers, triggerId]);
+  return (0, _index.cloneElementWithRef)(children, (children) => ({
+    ...children.props,
+    id: triggerId,
+    ref: focusRef,
+    onClick: (0, _index.mergeEventHandlers)(children.props.onClick, onClick),
+    'aria-expanded': activePanel === forProp,
+    'aria-controls': forProp,
+  }));
+};
+PanelTrigger.displayName = 'Panels.Trigger';
+const PanelHeader = _react.forwardRef((props, forwardedRef) => {
+  let { titleProps, children, ...rest } = props;
+  let { shouldFocus, setShouldFocus } = (0, _index.useSafeContext)(
+    PanelsWrapperContext,
+  );
+  let { id: panelId, associatedTrigger: panelAssociatedTrigger } = (0,
+  _index.useSafeContext)(PanelContext);
+  let focusRef = _react.useCallback(
+    (el) => {
+      if (
+        shouldFocus?.direction === 'forward' &&
+        shouldFocus.toPanelId === panelId
+      ) {
+        el?.focus({
+          preventScroll: true,
+        });
+        setShouldFocus(void 0);
+      }
+    },
+    [panelId, setShouldFocus, shouldFocus?.direction, shouldFocus?.toPanelId],
+  );
+  return _react.createElement(
+    _Flex.Flex,
+    {
+      ref: forwardedRef,
+      ...rest,
+    },
+    panelAssociatedTrigger && _react.createElement(PanelBackButton, null),
+    _react.createElement(
+      _Text.Text,
+      {
+        id: `${panelId}-header-title`,
+        as: 'h2',
+        tabIndex: -1,
+        ref: focusRef,
+        ...titleProps,
+      },
+      children,
+    ),
+  );
+});
+PanelHeader.displayName = 'Panels.Header';
+const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
+  let { children, onClick, ...rest } = props;
+  let { instance: panelInstance } = (0, _index.useSafeContext)(
+    _helpers.PanelsInstanceContext,
+  );
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      ref: forwardedRef,
+      'aria-label': 'Previous panel',
+      styleType: 'borderless',
+      size: 'small',
+      'data-iui-shift': 'left',
+      ...rest,
+      onClick: (0, _index.mergeEventHandlers)(
+        _react.useCallback(() => panelInstance?.goBack(), [panelInstance]),
+        onClick,
+      ),
+    },
+    children || _react.createElement(_index.SvgChevronLeft, null),
+  );
+});
+PanelBackButton.displayName = 'Panels.BackButton';
+const Panels = {
+  Wrapper: PanelsWrapper,
+  Panel,
+  Trigger: PanelTrigger,
+  Header: PanelHeader,
+  useInstance: _index.useInstance,
+};
+function useDelayed(
+  value,
+  { delay } = {
+    delay: 500,
+  },
+) {
+  let [delayed, setDelayed] = _react.useState(void 0);
+  let timeout = _react.useRef(void 0);
+  _react.useEffect(() => {
+    if (0 === delay) setDelayed(value);
+    else timeout.current = setTimeout(() => setDelayed(value), delay);
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, [value, delay]);
+  return delayed;
+}

package/DEV-cjs/core/Panels/helpers.js

@@ -0,0 +1,62 @@
+'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, {
+  PanelsInstanceContext: function () {
+    return PanelsInstanceContext;
+  },
+  PanelsInstanceProvider: function () {
+    return PanelsInstanceProvider;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _Panels = require('./Panels.js');
+const PanelsInstanceContext = _react.createContext(void 0);
+PanelsInstanceContext.displayName = 'PanelsInstanceContext';
+const PanelsInstanceProvider = (props) => {
+  let { children, instance: instanceProp } = props;
+  let instanceBackup = _Panels.Panels.useInstance();
+  let instance = instanceProp || instanceBackup;
+  let { activePanelId, changeActivePanel, triggers, setShouldFocus } = (0,
+  _index.useSafeContext)(_Panels.PanelsWrapperContext);
+  let goBack = _react.useCallback(async () => {
+    if (null == activePanelId) return;
+    let trigger = triggers[activePanelId];
+    if (null != trigger.triggerId) {
+      setShouldFocus({
+        fromPanelId: activePanelId,
+        toPanelId: trigger.panelId,
+        direction: 'backward',
+      });
+      changeActivePanel(trigger.panelId);
+    }
+  }, [activePanelId, changeActivePanel, setShouldFocus, triggers]);
+  (0, _index.useSynchronizeInstance)(
+    instance,
+    _react.useMemo(
+      () => ({
+        goBack,
+      }),
+      [goBack],
+    ),
+  );
+  return _react.createElement(
+    PanelsInstanceContext.Provider,
+    {
+      value: {
+        instance,
+      },
+    },
+    children,
+  );
+};

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

@@ -28,7 +28,7 @@ const Radio = _react.forwardRef((props, ref) => {
   let refs = (0, _index.useMergedRefs)(inputElementRef, ref);
   let radio = _react.createElement(_index.Box, {
     as: 'input',
-    className: (0, _classnames.default)('iui-radio', className),
+    className: (0, _classnames.default)('iui-checkbox', 'iui-radio', className),
     style: style,
     disabled: disabled,
     type: 'radio',
@@ -42,13 +42,11 @@ const Radio = _react.forwardRef((props, ref) => {
           as: 'label',
           ...wrapperProps,
           className: (0, _classnames.default)(
-            'iui-radio-wrapper',
-            {
-              'iui-disabled': disabled,
-              [`iui-${status}`]: !!status,
-            },
+            'iui-checkbox-wrapper',
             wrapperProps?.className,
           ),
+          'data-iui-status': status,
+          'data-iui-disabled': disabled ? 'true' : void 0,
         },
         radio,
         label &&

package/DEV-cjs/core/RadioTiles/RadioTileGroup.js

@@ -8,12 +8,14 @@ Object.defineProperty(exports, 'RadioTileGroup', {
     return RadioTileGroup;
   },
 });
+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 _InputGroup = require('../InputGroup/InputGroup.js');
 const _index = require('../../utils/index.js');
+const _classnames = _interop_require_default._(require('classnames'));
 const RadioTileGroup = _react.forwardRef((props, forwardedRef) => {
-  let { children, label, ...rest } = props;
+  let { children, label, tileContainerProps, ...rest } = props;
   return _react.createElement(
     _InputGroup.InputGroup,
     {
@@ -24,7 +26,12 @@ const RadioTileGroup = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _index.Box,
       {
-        className: 'iui-radio-tile-container',
+        as: 'div',
+        ...tileContainerProps,
+        className: (0, _classnames.default)(
+          'iui-radio-tile-container',
+          tileContainerProps?.className,
+        ),
       },
       children,
     ),

package/DEV-cjs/core/Select/SelectTag.js

@@ -12,24 +12,22 @@ const _interop_require_default = require('@swc/helpers/_/_interop_require_defaul
 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 _Tag = require('../Tag/Tag.js');
 const SelectTag = _react.forwardRef((props, forwardedRef) => {
   let { className, label, ...rest } = props;
   return _react.createElement(
-    _index.Box,
+    _Tag.Tag,
     {
-      as: 'span',
       className: (0, _classnames.default)('iui-select-tag', className),
+      labelProps: {
+        className: 'iui-select-tag-label',
+      },
+      removeButtonProps: {
+        className: 'iui-select-tag-button',
+      },
       ref: forwardedRef,
       ...rest,
     },
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'span',
-        className: 'iui-select-tag-label',
-      },
-      label,
-    ),
+    label,
   );
 });