@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/esm/core/FileUpload/FileUploadCard.js

@@ -7,7 +7,6 @@ import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEven
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 const toBytes = (bytes) => {
     const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
     let i = 0;
@@ -36,7 +35,7 @@ const FileUploadCardTitle = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = useSafeContext(FileUploadCardContext);
     const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children ?? title));
 });
 FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 // ----------------------------------------------------------------------------
@@ -50,7 +49,7 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     if (files.length > 2) {
         description += ', and ' + (files.length - 2) + ' others';
     }
-    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children ?? description));
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 // ----------------------------------------------------------------------------
@@ -71,8 +70,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
     const { children, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
     const setNativeFilesRef = React.useCallback((node) => {
-        var _a;
-        if (!node || !((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.DataTransfer)) {
+        if (!node || !getWindow()?.DataTransfer) {
             return;
         }
         const dataTransfer = new DataTransfer();
@@ -87,21 +85,20 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         }
     }, [id, inputId, setInputId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(VisuallyHidden, { as: 'input', type: 'file', onChange: mergeEventHandlers(onChange, (e) => {
+        React.createElement(VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: mergeEventHandlers(onChange, (e) => {
                 const _files = Array.from(e.currentTarget.files || []);
-                onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
+                onFilesChange?.(_files);
                 setInternalFiles(_files);
-            }), ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
+            }), ref: refs, id: id ?? inputId, ...rest }),
         children));
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';
 const FileUploadCardComponent = React.forwardRef((props, ref) => {
-    var _a;
     const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
     const [internalFiles, setInternalFiles] = React.useState();
     const uid = useId();
     const [inputId, setInputId] = React.useState(uid);
-    const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
+    const files = filesProp ?? internalFiles ?? [];
     return (React.createElement(FileUploadCardContext.Provider, { value: {
             files,
             onFilesChange,
@@ -109,13 +106,14 @@ const FileUploadCardComponent = React.forwardRef((props, ref) => {
             inputId,
             setInputId,
         } },
-        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        files?.length ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
             React.createElement(FileUploadCard.Icon, null),
             React.createElement(FileUploadCard.Info, null,
                 React.createElement(FileUploadCard.Title, null),
                 React.createElement(FileUploadCard.Description, null)),
             React.createElement(FileUploadCard.Action, null,
-                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(FileUploadCard.Input, null)));
+                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard),
+        input ?? React.createElement(FileUploadCard.Input, null)));
 });
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.

package/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
 /**
  * Default template to be used with the `FileUpload` wrapper component.

package/esm/core/Footer/Footer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 export declare type TitleTranslations = {
     termsOfService: string;
     privacy: string;

package/esm/core/Footer/Footer.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';

package/esm/core/Footer/FooterItem.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterItem.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterList.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/esm/core/Footer/FooterList.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/esm/core/Footer/FooterSeparator.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterSeparator.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */

package/esm/core/Header/Header.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.

package/esm/core/Header/Header.js

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import * as React from 'react';
 import { IconButton } from '../Buttons/index.js';
 import { SvgMoreVertical, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 import { DropdownMenu } from '../DropdownMenu/index.js';
 const defaultTranslations = {
     moreOptions: 'More options',

package/esm/core/Header/HeaderBreadcrumbs.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 declare type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 /**
  * Header breadcrumbs, adds chevron between each provided items.
  * @example

package/esm/core/Header/HeaderButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Buttons/Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
 declare type HeaderButtonProps = {
     /**

package/esm/core/Header/HeaderButton.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 import { HeaderSplitButton } from './HeaderSplitButton.js';
 import { HeaderDropdownButton } from './HeaderDropdownButton.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';

package/esm/core/Header/HeaderLogo.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 declare type HeaderLogoOwnProps = {
     /**
      * Logo shown before the main content.

package/esm/core/Header/HeaderLogo.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 /**
  * Header Title section
  * @example

package/esm/core/InformationPanel/InformationPanel.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 declare type InformationPanelProps = {
     /**
      * Is the panel open?

package/esm/core/InformationPanel/InformationPanel.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -41,10 +40,7 @@ export const InformationPanel = React.forwardRef((props, ref) => {
         e.preventDefault();
         e.stopPropagation();
         infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
-        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => {
-            var _a;
-            return (_a = infoPanelRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.removeEventListener('pointermove', onResize);
-        }, { once: true });
+        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => infoPanelRef.current?.ownerDocument.removeEventListener('pointermove', onResize), { once: true });
     };
     const onResize = React.useCallback((e) => {
         e.preventDefault();

package/esm/core/InformationPanel/InformationPanelBody.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/esm/core/InformationPanel/InformationPanelBody.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/esm/core/InformationPanel/InformationPanelContent.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 declare type InformationPanelContentProps = {
     /**
      * If set to 'inline', the label/input pairs will be shown on the same line.

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * The `InformationPanelContent` component should be used inside `InformationPanelBody`
  * to style rows of key/value pairs, where the key is ideally represented by a `Label` component

package/esm/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 declare type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/index.js';
 import { SvgCloseSmall, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *

package/esm/core/InformationPanel/InformationPanelWrapper.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

package/esm/core/InformationPanel/InformationPanelWrapper.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

package/esm/core/Input/Input.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type InputProps = {
     /**
      * Set focus on input element.

package/esm/core/Input/Input.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic input component
  * @example

package/esm/core/InputGroup/InputGroup.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type InputGroupProps = {
     /**
      * Label of the group.

package/esm/core/InputGroup/InputGroup.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * Group Checkbox/Radio components together
  * @example

package/esm/core/Label/Label.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type LabelOwnProps = {
     /**
      * Set the display style of the label.

package/esm/core/Label/Label.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { InputProps } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledInputProps = {
     /**
      * Label of the input.

package/esm/core/LabeledInput/LabeledInput.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
 import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic labeled input component
  * @example
@@ -17,7 +16,7 @@ import '@itwin/itwinui-css/css/input.css';
 export const LabeledInput = React.forwardRef((props, ref) => {
     const uid = useId();
     const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, id = uid, ...rest } = props;
-    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
+    const icon = svgIcon ?? (status && StatusIconMap[status]());
     return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));
 });

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { SelectProps } from '../Select/Select.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { Select } from '../Select/index.js';
 import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Labeled select component to select value from options.
  * @example

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TextareaProps } from '../Textarea/Textarea.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import '@itwin/itwinui-css/css/input.css';
 declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
 import { Textarea } from '../Textarea/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -30,7 +29,7 @@ import '@itwin/itwinui-css/css/input.css';
 export const LabeledTextarea = React.forwardRef((props, ref) => {
     const uid = useId();
     const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, id = uid, ...textareaProps } = props;
-    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
+    const icon = svgIcon ?? (status && StatusIconMap[status]());
     return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));
 });

package/esm/core/List/List.d.ts

@@ -1,2 +1 @@
-import '@itwin/itwinui-css/css/menu.css';
 export declare const List: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;

package/esm/core/List/List.js

@@ -3,6 +3,5 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 export const List = polymorphic.ul('iui-list', { role: 'list' });
 List.displayName = 'List';

package/esm/core/List/ListItem.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 export declare type ListItemOwnProps = {
     /**
      * Size of the ListItem. Can be explicitly specified to be 'large',

package/esm/core/List/ListItem.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 const ListItemComponent = React.forwardRef((props, ref) => {
     const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
     return (React.createElement(Box, { as: 'li', className: cx('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));

package/esm/core/Menu/Menu.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 declare type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.

package/esm/core/Menu/Menu.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
@@ -20,10 +19,9 @@ export const Menu = React.forwardRef((props, ref) => {
         return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
     }, []);
     React.useEffect(() => {
-        var _a;
         const items = getFocusableNodes();
         if (focusedIndex != null) {
-            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            items?.[focusedIndex]?.focus();
             return;
         }
         const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
@@ -36,10 +34,10 @@ export const Menu = React.forwardRef((props, ref) => {
             return;
         }
         const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        if (!items?.length) {
             return;
         }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        const currentIndex = focusedIndex ?? 0;
         switch (event.key) {
             case 'ArrowDown': {
                 setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));

package/esm/core/Menu/MenuDivider.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example

package/esm/core/Menu/MenuDivider.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example

package/esm/core/Menu/MenuExtraContent.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example

package/esm/core/Menu/MenuExtraContent.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example

package/esm/core/Menu/MenuItem.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 import type { ListItemOwnProps } from '../List/ListItem.js';
 export declare type MenuItemProps = {
     /**