@itwin/itwinui-react 3.0.0-dev.9 → 3.0.0

package/cjs/core/Menu/MenuItem.js

@@ -11,6 +11,7 @@ const index_js_1 = require('../utils/index.js');
 const Menu_js_1 = require('./Menu.js');
 const ListItem_js_1 = require('../List/ListItem.js');
 const react_dom_1 = require('react-dom');
+const Popover_js_1 = require('../Popover/Popover.js');
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
@@ -51,7 +52,7 @@ exports.MenuItem = React.forwardRef((props, forwardedRef) => {
     // so we need to let the parent know whether the submenu is still open.
     parent.setIsNestedSubmenuVisible(open);
   };
-  const popover = (0, index_js_1.usePopover)({
+  const popover = (0, Popover_js_1.usePopover)({
     visible: isSubmenuVisible || isNestedSubmenuVisible,
     onVisibleChange,
     placement: 'right-start',

package/cjs/core/Menu/MenuItemSkeleton.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
@@ -54,7 +55,7 @@ exports.MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
           'aria-hidden': true,
         }),
       React.createElement(
-        index_js_1.VisuallyHidden,
+        VisuallyHidden_js_1.VisuallyHidden,
         null,
         translatedStrings.loading,
       ),

package/cjs/core/Modal/Modal.js

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Dialog/index.js');
+const Dialog_js_1 = require('../Dialog/Dialog.js');
 /**
  * Modal component which can wrap any content.
  * @example
@@ -42,7 +42,7 @@ exports.Modal = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Dialog,
+    Dialog_js_1.Dialog,
     {
       isOpen: isOpen,
       closeOnEsc: closeOnEsc,
@@ -55,11 +55,11 @@ exports.Modal = React.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       portal: portal,
     },
-    React.createElement(index_js_1.Dialog.Backdrop, null),
+    React.createElement(Dialog_js_1.Dialog.Backdrop, null),
     React.createElement(
-      index_js_1.Dialog.Main,
+      Dialog_js_1.Dialog.Main,
       { 'aria-modal': true, ...rest },
-      React.createElement(index_js_1.Dialog.TitleBar, { titleText: title }),
+      React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title }),
       children,
     ),
   );

package/cjs/core/NonIdealState/ErrorPage.js

@@ -7,38 +7,38 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Buttons/Button/index.js');
+const Button_js_1 = require('../Buttons/Button.js');
 const NonIdealState_js_1 = require('./NonIdealState.js');
-const index_js_2 = require('../ProgressIndicators/index.js');
-const index_js_3 = require('../utils/index.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const index_js_1 = require('../utils/index.js');
 const Svg401 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
 );
 const Svg403 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
 );
 const Svg404 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
 );
 const Svg500 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
 );
 const Svg502 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
 );
 const Svg503 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
 );
 const SvgError = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
 );
 const SvgRedirect = React.lazy(() =>
-  (0, index_js_3.dynamicImport)(
+  (0, index_js_1.dynamicImport)(
     '@itwin/itwinui-illustrations-react/SvgRedirect',
   ),
 );
 const SvgTimedOut = React.lazy(() =>
-  (0, index_js_3.dynamicImport)(
+  (0, index_js_1.dynamicImport)(
     '@itwin/itwinui-illustrations-react/SvgTimedOut',
   ),
 );
@@ -161,7 +161,7 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
       return undefined;
     }
     return React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       { styleType: 'high-visibility', onClick: primaryButtonHandle },
       primaryButtonLabel,
     );
@@ -171,7 +171,7 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
       return undefined;
     }
     return React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       { styleType: 'default', onClick: secondaryButtonHandle },
       secondaryButtonLabel,
     );
@@ -192,7 +192,9 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
   return React.createElement(NonIdealState_js_1.NonIdealState, {
     svg: React.createElement(
       React.Suspense,
-      { fallback: React.createElement(index_js_2.ProgressRadial, null) },
+      {
+        fallback: React.createElement(ProgressRadial_js_1.ProgressRadial, null),
+      },
       getErrorIcon(),
     ),
     heading: getHeadingMessage(),

package/cjs/core/{utils/components → Popover}/Popover.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '@floating-ui/react';
-import type { PolymorphicForwardRefComponent } from '../index.js';
-import type { PortalProps } from './Portal.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
 type PopoverOptions = {
     /**
      * Placement of the popover content.
@@ -19,12 +19,10 @@ type PopoverOptions = {
     onVisibleChange?: (visible: boolean) => void;
     /**
      * If true, the popover will close when clicking outside it.
+     *
+     * @default true
      */
     closeOnOutsideClick?: boolean;
-    /**
-     * Whether the popover should match the width of the trigger.
-     */
-    matchWidth?: boolean;
 };
 type PopoverInternalProps = {
     /**
@@ -64,6 +62,10 @@ type PopoverInternalProps = {
      */
     trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
     role?: 'dialog' | 'menu' | 'listbox';
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
@@ -81,11 +83,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         setFloating: (node: HTMLElement | null) => void;
     } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null; /**
-         * Middleware options.
-         *
-         * @see https://floating-ui.com/docs/offset
-         */
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
@@ -113,13 +111,31 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
 type PopoverPublicProps = {
+    /**
+     * Content displayed inside the popover.
+     */
     content?: React.ReactNode;
+    /**
+     * Element that triggers the popover. Should usually be a button.
+     */
     children?: React.ReactNode;
+    /**
+     * Whether the popover adds recommended CSS (background-color, box-shadow, etc.) to itself.
+     *
+     * @default false
+     */
     applyBackground?: boolean;
 } & PortalProps & PopoverOptions;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
  */
 export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;

package/cjs/core/{utils/components → Popover}/Popover.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.Popover = exports.usePopover = void 0;
 const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const react_1 = require('@floating-ui/react');
-const index_js_1 = require('../index.js');
-const Portal_js_1 = require('./Portal.js');
-const index_js_2 = require('../../Surface/index.js');
-const index_js_3 = require('../../ThemeProvider/index.js');
+const index_js_1 = require('../utils/index.js');
+const Portal_js_1 = require('../utils/components/Portal.js');
+const ThemeProvider_js_1 = require('../ThemeProvider/ThemeProvider.js');
 // ----------------------------------------------------------------------------
 const usePopover = (options) => {
   const {
@@ -96,8 +96,15 @@ const usePopover = (options) => {
 };
 exports.usePopover = usePopover;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
  */
 exports.Popover = React.forwardRef((props, forwardedRef) => {
   const {
@@ -105,15 +112,15 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     //
     // popover options
     visible,
-    placement,
+    placement = 'bottom-start',
     onVisibleChange,
-    closeOnOutsideClick,
-    matchWidth,
+    closeOnOutsideClick = true,
     //
     // dom props
+    className,
     children,
     content,
-    applyBackground,
+    applyBackground = false,
     ...rest
   } = props;
   const popover = (0, exports.usePopover)({
@@ -121,7 +128,6 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     placement,
     onVisibleChange,
     closeOnOutsideClick,
-    matchWidth,
     role: 'dialog',
   });
   const [popoverElement, setPopoverElement] = React.useState();
@@ -130,10 +136,13 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     forwardedRef,
     setPopoverElement,
   );
+  const triggerId = `${(0, index_js_1.useId)()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   return React.createElement(
     React.Fragment,
     null,
     (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      id: children.props.id || triggerId,
       ...popover.getReferenceProps(children.props),
       ref: popover.refs.setReference,
     })),
@@ -142,24 +151,33 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
           Portal_js_1.Portal,
           { portal: portal },
           React.createElement(
-            index_js_3.ThemeProvider,
-            { portalContainer: popoverElement },
+            react_1.FloatingPortal,
+            null,
             React.createElement(
-              react_1.FloatingFocusManager,
-              {
-                context: popover.context,
-                modal: false,
-                initialFocus: -1,
-                returnFocus: true,
-              },
+              ThemeProvider_js_1.ThemeProvider,
+              { portalContainer: popoverElement },
               React.createElement(
-                index_js_1.Box,
+                react_1.FloatingFocusManager,
                 {
-                  as: applyBackground ? index_js_2.Surface : 'div',
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
                 },
-                content,
+                React.createElement(
+                  index_js_1.Box,
+                  {
+                    className: (0, classnames_1.default)(
+                      { 'iui-popover-surface': applyBackground },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                  },
+                  content,
+                ),
               ),
             ),
           ),

package/cjs/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -7,8 +7,8 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../InputGroup/index.js');
-const index_js_2 = require('../utils/index.js');
+const InputGroup_js_1 = require('../InputGroup/InputGroup.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -20,10 +20,10 @@ const index_js_2 = require('../utils/index.js');
 exports.RadioTileGroup = React.forwardRef((props, forwardedRef) => {
   const { children, label, ...rest } = props;
   return React.createElement(
-    index_js_1.InputGroup,
+    InputGroup_js_1.InputGroup,
     { label: label, ref: forwardedRef, ...rest },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-radio-tile-container' },
       children,
     ),

package/cjs/core/SearchBox/SearchBox.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
+import type { PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton.js';
+import type { IconProps } from '../Icon/Icon.js';
 type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.

package/cjs/core/SearchBox/SearchBox.js

@@ -9,7 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/IconButton/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
   const {
@@ -122,7 +123,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 const SearchBoxIcon = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     {
       'aria-hidden': true,
       className: (0, classnames_1.default)('iui-search-icon', className),
@@ -162,7 +163,7 @@ const SearchBoxButton = React.forwardRef((props, ref) => {
     SearchBoxContext,
   );
   return React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: sizeContext,

package/cjs/core/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { usePopover } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 export type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.
@@ -168,5 +168,5 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default Select;

package/cjs/core/Select/Select.js

@@ -8,12 +8,13 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Menu/index.js');
-const index_js_2 = require('../utils/index.js');
-const SelectTag_js_1 = tslib_1.__importDefault(require('./SelectTag.js'));
-const SelectTagContainer_js_1 = tslib_1.__importDefault(
-  require('./SelectTagContainer.js'),
-);
+const Menu_js_1 = require('../Menu/Menu.js');
+const MenuItem_js_1 = require('../Menu/MenuItem.js');
+const index_js_1 = require('../utils/index.js');
+const SelectTag_js_1 = require('./SelectTag.js');
+const SelectTagContainer_js_1 = require('./SelectTagContainer.js');
+const Icon_js_1 = require('../Icon/Icon.js');
+const Popover_js_1 = require('../Popover/Popover.js');
 const isMultipleEnabled = (variable, multiple) => {
   return multiple;
 };
@@ -70,8 +71,8 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-const Select = (props) => {
-  const uid = (0, index_js_2.useId)();
+exports.Select = React.forwardRef((props, forwardedRef) => {
+  const uid = (0, index_js_1.useId)();
   const {
     options,
     value,
@@ -113,7 +114,7 @@ const Select = (props) => {
         : value === option.value;
       const menuItem = itemRenderer
         ? itemRenderer(option, { close: () => setIsOpen(false), isSelected })
-        : React.createElement(index_js_1.MenuItem, null, option.label);
+        : React.createElement(MenuItem_js_1.MenuItem, null, option.label);
       const { label, icon, startIcon: startIconProp, ...restOption } = option;
       const startIcon = startIconProp ?? icon;
       return React.cloneElement(menuItem, {
@@ -121,7 +122,7 @@ const Select = (props) => {
         isSelected,
         startIcon: startIcon,
         endIcon: isSelected
-          ? React.createElement(index_js_2.SvgCheckmark, {
+          ? React.createElement(index_js_1.SvgCheckmark, {
               'aria-hidden': true,
             })
           : null,
@@ -170,12 +171,12 @@ const Select = (props) => {
       : options.find((option) => option.value === value);
   }, [multiple, options, value]);
   const tagRenderer = React.useCallback((item) => {
-    return React.createElement(SelectTag_js_1.default, {
+    return React.createElement(SelectTag_js_1.SelectTag, {
       key: item.label,
       label: item.label,
     });
   }, []);
-  const popover = (0, index_js_2.usePopover)({
+  const popover = (0, Popover_js_1.usePopover)({
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
@@ -186,15 +187,18 @@ const Select = (props) => {
     React.Fragment,
     null,
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         className: (0, classnames_1.default)('iui-input-with-icon', className),
         style: style,
         ...rest,
-        ref: popover.refs.setPositionReference,
+        ref: (0, index_js_1.useMergedRefs)(
+          popover.refs.setPositionReference,
+          forwardedRef,
+        ),
       },
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           ...popover.getReferenceProps(),
           tabIndex: 0,
@@ -207,7 +211,7 @@ const Select = (props) => {
           'aria-haspopup': 'listbox',
           'aria-controls': `${uid}-menu`,
           ...triggerProps,
-          ref: (0, index_js_2.useMergedRefs)(
+          ref: (0, index_js_1.useMergedRefs)(
             selectRef,
             popover.refs.setReference,
           ),
@@ -223,7 +227,7 @@ const Select = (props) => {
         },
         (!selectedItems || selectedItems.length === 0) &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             { as: 'span', className: 'iui-content' },
             placeholder,
           ),
@@ -239,7 +243,7 @@ const Select = (props) => {
             }),
       ),
       React.createElement(
-        index_js_2.Icon,
+        Icon_js_1.Icon,
         {
           as: 'span',
           'aria-hidden': true,
@@ -248,23 +252,23 @@ const Select = (props) => {
             'iui-open': isOpen,
           }),
         },
-        React.createElement(index_js_2.SvgCaretDownSmall, null),
+        React.createElement(index_js_1.SvgCaretDownSmall, null),
       ),
       multiple
-        ? React.createElement(index_js_2.AutoclearingHiddenLiveRegion, {
+        ? React.createElement(index_js_1.AutoclearingHiddenLiveRegion, {
             text: liveRegionSelection,
           })
         : null,
     ),
     popover.open &&
       React.createElement(
-        index_js_2.Portal,
+        index_js_1.Portal,
         null,
         React.createElement(
-          index_js_1.Menu,
+          Menu_js_1.Menu,
           {
             role: 'listbox',
-            className: (0, classnames_1.default)('iui-scroll', menuClassName),
+            className: menuClassName,
             id: `${uid}-menu`,
             key: `${uid}-menu`,
             ...popover.getFloatingProps({
@@ -281,8 +285,7 @@ const Select = (props) => {
         ),
       ),
   );
-};
-exports.Select = Select;
+});
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(
@@ -296,12 +299,12 @@ const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
         null,
         startIcon &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             { as: 'span', className: 'iui-icon', 'aria-hidden': true },
             startIcon,
           ),
         React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           { as: 'span', className: 'iui-content' },
           selectedItem.label,
         ),
@@ -328,9 +331,9 @@ const MultipleSelectButton = ({
     selectedItems &&
       !selectedItemsRenderer &&
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         { as: 'span', className: 'iui-content' },
-        React.createElement(SelectTagContainer_js_1.default, {
+        React.createElement(SelectTagContainer_js_1.SelectTagContainer, {
           tags: selectedItemsElements,
         }),
       ),

package/cjs/core/Select/SelectTagContainer.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const SelectTag_js_1 = tslib_1.__importDefault(require('./SelectTag.js'));
+const SelectTag_js_1 = require('./SelectTag.js');
 /**
  */
 exports.SelectTagContainer = React.forwardRef((props, ref) => {
@@ -31,7 +31,7 @@ exports.SelectTagContainer = React.forwardRef((props, ref) => {
       null,
       visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
       visibleCount < tags.length &&
-        React.createElement(SelectTag_js_1.default, {
+        React.createElement(SelectTag_js_1.SelectTag, {
           label: `+${tags.length - visibleCount + 1} item(s)`,
         }),
     ),