@itwin/itwinui-react 1.20.0 → 1.21.0

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
-import { PopoverProps } from '../utils/Popover';
+import { CommonProps, PopoverProps } from '../utils';
 export declare type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -31,10 +31,8 @@ exports.DropdownMenu = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 var Menu_1 = require("../Menu");
-var Popover_1 = require("../utils/Popover");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
 /**
  * Dropdown menu component.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
@@ -73,9 +71,9 @@ var DropdownMenu = function (props) {
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    (0, useTheme_1.useTheme)();
-    return (react_1.default.createElement(Popover_1.Popover, __assign({ content: react_1.default.createElement(Menu_1.Menu, { className: className, style: style, role: role, id: id }, react_1.default.useMemo(function () { return menuItems(close); }, [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined }, rest), react_1.default.cloneElement(children, {
-        ref: (0, useMergedRefs_1.mergeRefs)(targetRef, props.children.ref),
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(utils_1.Popover, __assign({ content: react_1.default.createElement(Menu_1.Menu, { className: className, style: style, role: role, id: id }, react_1.default.useMemo(function () { return menuItems(close); }, [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined }, rest), react_1.default.cloneElement(children, {
+        ref: (0, utils_1.mergeRefs)(targetRef, props.children.ref),
         onClick: function (args) {
             var _a, _b;
             trigger === undefined && (isVisible ? close() : open());

package/cjs/core/ErrorPage/ErrorPage.js

@@ -39,7 +39,7 @@ var _503_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/ill
 var Error_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Error"));
 var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Buttons/Button");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/non-ideal-state.css");
 /**
  * A stylized display to communicate common http errors.
@@ -48,7 +48,7 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
  */
 var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
     function getErrorIcon() {
         switch (errorType) {

package/cjs/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/expandable-block.css';
 export declare type ExpandableBlockProps = {
     /**

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -34,9 +34,8 @@ var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/ico
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var react_transition_group_1 = require("react-transition-group");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/expandable-block.css");
-var common_1 = require("../utils/common");
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -49,8 +48,8 @@ var common_1 = require("../utils/common");
 var ExpandableBlock = function (props) {
     var _a;
     var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, endIcon = props.endIcon, status = props.status, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status"]);
-    (0, useTheme_1.useTheme)();
-    var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && common_1.StatusIconMap[status]());
+    (0, utils_1.useTheme)();
+    var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && utils_1.StatusIconMap[status]());
     var _c = react_1.default.useState(isExpanded), expanded = _c[0], setExpanded = _c[1];
     react_1.default.useEffect(function () {
         setExpanded(isExpanded);

package/cjs/core/Fieldset/Fieldset.js

@@ -31,7 +31,7 @@ exports.Fieldset = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 var classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/fieldset.css");
 /**
@@ -47,7 +47,7 @@ require("@itwin/itwinui-css/css/fieldset.css");
  */
 var Fieldset = function (props) {
     var children = props.children, className = props.className, disabled = props.disabled, legend = props.legend, rest = __rest(props, ["children", "className", "disabled", "legend"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("fieldset", __assign({ className: (0, classnames_1.default)('iui-fieldset', className), disabled: disabled }, rest),
         legend && react_1.default.createElement("legend", null, legend),
         disabled

package/cjs/core/FileUpload/FileUpload.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/file-upload.css';
 export declare type FileUploadProps = {
     /**
@@ -46,5 +46,5 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     id?: string | undefined;
 } & {
     style?: React.CSSProperties | undefined;
-} & import("../utils/props").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
+} & import("../utils").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
 export default FileUpload;

package/cjs/core/FileUpload/FileUpload.js

@@ -32,8 +32,7 @@ exports.FileUpload = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/file-upload.css");
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
@@ -44,10 +43,10 @@ require("@itwin/itwinui-css/css/file-upload.css");
  */
 exports.FileUpload = react_1.default.forwardRef(function (props, ref) {
     var dragContent = props.dragContent, children = props.children, onFileDropped = props.onFileDropped, className = props.className, rest = __rest(props, ["dragContent", "children", "onFileDropped", "className"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _a = react_1.default.useState(false), isDragActive = _a[0], setIsDragActive = _a[1];
     var fileUploadRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(fileUploadRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(fileUploadRef, ref);
     var onDragOverHandler = function (e) {
         e.preventDefault();
         e.stopPropagation();

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -9,7 +9,7 @@ exports.FileUploadTemplate = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/file-upload.css");
 var Upload_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Upload"));
 /**
@@ -20,7 +20,7 @@ var Upload_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Upl
  */
 var FileUploadTemplate = function (props) {
     var onChange = props.onChange, _a = props.acceptMultiple, acceptMultiple = _a === void 0 ? true : _a, acceptType = props.acceptType, _b = props.label, label = _b === void 0 ? 'Choose a file' : _b, _c = props.subtitle, subtitle = _c === void 0 ? 'or drag & drop it here.' : _c, children = props.children;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Upload_1.default, { className: 'iui-icon', "aria-hidden": true }),
         react_1.default.createElement("div", { className: 'iui-template-text' },

package/cjs/core/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
-import { StylingProps } from '../utils/props';
 export declare type TitleTranslations = {
     termsOfService: string;
     privacy: string;

package/cjs/core/Footer/Footer.js

@@ -41,7 +41,7 @@ exports.Footer = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/footer.css");
 var footerTranslations = {
     cookies: 'Cookies',
@@ -59,7 +59,7 @@ var footerTranslations = {
  */
 var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var today = new Date();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
     var defaultElements = [

package/cjs/core/Header/Header.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
-import { CommonProps } from '../utils/props';
 export declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.

package/cjs/core/Header/Header.js

@@ -34,7 +34,7 @@ var MoreVertical_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/ico
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../Buttons");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
 var DropdownMenu_1 = require("../DropdownMenu");
 var defaultTranslations = {
@@ -71,7 +71,7 @@ var defaultTranslations = {
  */
 var Header = function (props) {
     var appLogo = props.appLogo, breadcrumbs = props.breadcrumbs, _a = props.isSlim, isSlim = _a === void 0 ? false : _a, actions = props.actions, userIcon = props.userIcon, menuItems = props.menuItems, translatedStrings = props.translatedStrings, className = props.className, children = props.children, rest = __rest(props, ["appLogo", "breadcrumbs", "isSlim", "actions", "userIcon", "menuItems", "translatedStrings", "className", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var headerTranslations = __assign(__assign({}, defaultTranslations), translatedStrings);
     return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', { 'iui-slim': isSlim }, className) }, rest),
         react_1.default.createElement("div", { className: 'iui-left' },

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -41,7 +41,7 @@ exports.HeaderBreadcrumbs = void 0;
  *--------------------------------------------------------------------------------------------*/
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
 /**
  * Header breadcrumbs, adds chevron between each provided items.
@@ -55,7 +55,7 @@ require("@itwin/itwinui-css/css/header.css");
  */
 var HeaderBreadcrumbs = function (props) {
     var items = props.items, rest = __rest(props, ["items"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
         current,
         index !== items.length - 1 && (react_1.default.createElement(ChevronRight_1.default, { key: "chevron" + index, "aria-hidden": true, className: 'iui-chevron' })),

package/cjs/core/Header/HeaderButton.js

@@ -33,7 +33,7 @@ exports.HeaderButton = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../Buttons");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
 var isSplitButton = function (props) {
     return !!props.menuItems && !!props.onClick;
@@ -53,7 +53,7 @@ var isDropdownButton = function (props) {
  */
 var HeaderButton = function (props) {
     var name = props.name, description = props.description, _a = props.isActive, isActive = _a === void 0 ? false : _a, className = props.className, startIcon = props.startIcon, menuItems = props.menuItems, rest = __rest(props, ["name", "description", "isActive", "className", "startIcon", "menuItems"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var buttonProps = __assign(__assign({ startIcon: react_1.default.isValidElement(startIcon)
             ? react_1.default.cloneElement(startIcon, {
                 className: (0, classnames_1.default)('iui-header-button-icon', startIcon.props.className),

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
-import { CommonProps } from '../utils/props';
 export declare type HeaderLogoProps = {
     /**
      * Logo shown before the main content.

package/cjs/core/Header/HeaderLogo.js

@@ -32,7 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderLogo = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
 /**
  * Header Title section
@@ -51,7 +51,7 @@ var HeaderLogo = function (props) {
             onClick();
         }
     };
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-header-logo', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
         react_1.default.isValidElement(logo)
             ? react_1.default.cloneElement(logo, {

package/cjs/core/Input/Input.js

@@ -32,8 +32,7 @@ exports.Input = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Basic input component
@@ -45,9 +44,9 @@ require("@itwin/itwinui-css/css/inputs.css");
 exports.Input = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var _b = props.setFocus, setFocus = _b === void 0 ? false : _b, size = props.size, className = props.className, rest = __rest(props, ["setFocus", "size", "className"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var inputRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(inputRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(inputRef, ref);
     react_1.default.useEffect(function () {
         if (inputRef.current && setFocus) {
             inputRef.current.focus();

package/cjs/core/InputGroup/InputGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
 export declare type InputGroupProps = {
     /**

package/cjs/core/InputGroup/InputGroup.js

@@ -31,9 +31,7 @@ exports.InputGroup = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var common_1 = require("../utils/common");
-var useTheme_1 = require("../utils/hooks/useTheme");
-var InputContainer_1 = require("../utils/InputContainer");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Group Checkbox/Radio components together
@@ -52,9 +50,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 var InputGroup = function (props) {
     var children = props.children, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
-    (0, useTheme_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement(InputContainer_1.InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? react_1.default.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
+    (0, utils_1.useTheme)();
+    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
+    return (react_1.default.createElement(utils_1.InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? react_1.default.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
         react_1.default.createElement("div", { className: 'iui-input-group' }, children)));
 };
 exports.InputGroup = InputGroup;

package/cjs/core/LabeledInput/LabeledInput.js

@@ -32,9 +32,7 @@ exports.LabeledInput = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var Input_1 = require("../Input/Input");
-var common_1 = require("../utils/common");
-var useTheme_1 = require("../utils/hooks/useTheme");
-var InputContainer_1 = require("../utils/InputContainer");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Basic labeled input component
@@ -46,9 +44,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.LabeledInput = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "style", "inputClassName", "inputStyle", "displayStyle", "iconDisplayStyle", "required"]);
-    (0, useTheme_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement(InputContainer_1.InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
+    (0, utils_1.useTheme)();
+    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
+    return (react_1.default.createElement(utils_1.InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
         react_1.default.createElement(Input_1.Input, __assign({ disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref }, rest))));
 });
 exports.default = exports.LabeledInput;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -32,9 +32,7 @@ exports.LabeledSelect = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var Select_1 = require("../Select");
-var common_1 = require("../utils/common");
-var useTheme_1 = require("../utils/hooks/useTheme");
-var InputContainer_1 = require("../utils/InputContainer");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Labeled select component to select value from options.
@@ -71,9 +69,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 var LabeledSelect = function (props) {
     var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
-    (0, useTheme_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement(InputContainer_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
+    (0, utils_1.useTheme)();
+    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
+    return (react_1.default.createElement(utils_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
             ? react_1.default.cloneElement(icon, { 'aria-hidden': true })
             : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
         react_1.default.createElement(Select_1.Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -31,10 +31,8 @@ exports.LabeledTextarea = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var common_1 = require("../utils/common");
+var utils_1 = require("../utils");
 var Textarea_1 = require("../Textarea");
-var useTheme_1 = require("../utils/hooks/useTheme");
-var InputContainer_1 = require("../utils/InputContainer");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Textarea wrapper that allows for additional styling and labelling
@@ -59,9 +57,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.LabeledTextarea = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, style = props.style, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, textareaClassName = props.textareaClassName, textareaStyle = props.textareaStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, svgIcon = props.svgIcon, _d = props.required, required = _d === void 0 ? false : _d, textareaProps = __rest(props, ["className", "style", "disabled", "label", "message", "status", "textareaClassName", "textareaStyle", "displayStyle", "iconDisplayStyle", "svgIcon", "required"]);
-    (0, useTheme_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement(InputContainer_1.InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
+    (0, utils_1.useTheme)();
+    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
+    return (react_1.default.createElement(utils_1.InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
         react_1.default.createElement(Textarea_1.Textarea, __assign({ disabled: disabled, className: textareaClassName, style: textareaStyle, required: required }, textareaProps, { ref: ref }))));
 });
 exports.default = exports.LabeledTextarea;

package/cjs/core/Menu/Menu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuProps = {
     /**
@@ -14,6 +14,11 @@ export declare type MenuProps = {
      * and selected item should have `aria-selected={true}`.
      */
     children: React.ReactNode;
+    /**
+     * If true, the first selected or enabled menu item will be focused automatically.
+     * @default true
+     */
+    setFocus?: boolean;
 } & Omit<CommonProps, 'title'>;
 /**
  * Basic menu component. Can be used for select or dropdown components.
@@ -31,5 +36,10 @@ export declare const Menu: React.ForwardRefExoticComponent<{
      * and selected item should have `aria-selected={true}`.
      */
     children: React.ReactNode;
+    /**
+     * If true, the first selected or enabled menu item will be focused automatically.
+     * @default true
+     */
+    setFocus?: boolean | undefined;
 } & Omit<CommonProps, "title"> & React.RefAttributes<HTMLUListElement>>;
 export default Menu;

package/cjs/core/Menu/Menu.js

@@ -32,34 +32,34 @@ exports.Menu = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var common_1 = require("../utils/common");
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 exports.Menu = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.role, role = _a === void 0 ? 'menu' : _a, className = props.className, style = props.style, rest = __rest(props, ["children", "role", "className", "style"]);
-    (0, useTheme_1.useTheme)();
-    var _b = react_1.default.useState(), focusedIndex = _b[0], setFocusedIndex = _b[1];
+    var children = props.children, _a = props.role, role = _a === void 0 ? 'menu' : _a, _b = props.setFocus, setFocus = _b === void 0 ? true : _b, className = props.className, style = props.style, rest = __rest(props, ["children", "role", "setFocus", "className", "style"]);
+    (0, utils_1.useTheme)();
+    var _c = react_1.default.useState(), focusedIndex = _c[0], setFocusedIndex = _c[1];
     var menuRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(menuRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(menuRef, ref);
     react_1.default.useEffect(function () {
         var _a;
-        var items = (0, common_1.getFocusableElements)(menuRef.current);
+        var items = (0, utils_1.getFocusableElements)(menuRef.current);
         if (focusedIndex != null) {
             (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             return;
         }
         var selectedIndex = items.findIndex(function (el) { return el.getAttribute('aria-selected') === 'true'; });
-        setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
-    }, [focusedIndex]);
+        if (setFocus) {
+            setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
+        }
+    }, [setFocus, focusedIndex]);
     react_1.default.useEffect(function () {
         setFocusedIndex(null);
     }, [children]);
     var onKeyDown = function (event) {
-        var items = (0, common_1.getFocusableElements)(menuRef.current);
+        var items = (0, utils_1.getFocusableElements)(menuRef.current);
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;
         }

package/cjs/core/Menu/MenuDivider.js

@@ -9,10 +9,10 @@ exports.MenuDivider = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
 var MenuDivider = function () {
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return react_1.default.createElement("li", { role: 'separator', className: 'iui-menu-divider' });
 };
 exports.MenuDivider = MenuDivider;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuItemProps = {
     /**
@@ -108,5 +108,5 @@ export declare const MenuItem: React.ForwardRefExoticComponent<{
     id?: string | undefined;
 } & {
     style?: React.CSSProperties | undefined;
-} & import("../utils/props").ClassNameProps & React.RefAttributes<HTMLLIElement>>;
+} & import("../utils").ClassNameProps & React.RefAttributes<HTMLLIElement>>;
 export default MenuItem;

package/cjs/core/Menu/MenuItem.js

@@ -32,12 +32,10 @@ exports.MenuItem = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
 var CaretRightSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretRightSmall"));
-var Popover_1 = require("../utils/Popover");
 var Menu_1 = require("./Menu");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
@@ -47,9 +45,9 @@ var MenuItemContext = react_1.default.createContext({ ref: undefined });
  */
 exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
     var children = props.children, isSelected = props.isSelected, disabled = props.disabled, value = props.value, onClick = props.onClick, sublabel = props.sublabel, _a = props.size, size = _a === void 0 ? !!sublabel ? 'large' : 'default' : _a, icon = props.icon, badge = props.badge, className = props.className, style = props.style, _b = props.role, role = _b === void 0 ? 'menuitem' : _b, _c = props.subMenuItems, subMenuItems = _c === void 0 ? [] : _c, rest = __rest(props, ["children", "isSelected", "disabled", "value", "onClick", "sublabel", "size", "icon", "badge", "className", "style", "role", "subMenuItems"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var menuItemRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(menuItemRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(menuItemRef, ref);
     var parentMenuItemRef = react_1.default.useContext(MenuItemContext).ref;
     var subMenuRef = react_1.default.useRef(null);
     var _d = react_1.default.useState(false), isSubmenuVisible = _d[0], setIsSubmenuVisible = _d[1];
@@ -88,7 +86,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
             'iui-large': size === 'large',
             'iui-active': isSelected,
             'iui-disabled': disabled,
-        }, className), onClick: function () { return !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)); }, ref: refs, style: style, role: role, tabIndex: disabled ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: function () { return setIsSubmenuVisible(true); }, onMouseLeave: function (e) {
+        }, className), onClick: function () { return !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)); }, ref: refs, style: style, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: function () { return setIsSubmenuVisible(true); }, onMouseLeave: function (e) {
             var _a;
             if (!(e.relatedTarget instanceof Node) ||
                 !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
@@ -108,7 +106,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (react_1.default.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        react_1.default.createElement(Popover_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, content: react_1.default.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
+        react_1.default.createElement(utils_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, content: react_1.default.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
                     var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
                         !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&

package/cjs/core/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/modal.css';
 export declare type ModalProps = {
     /**