@itwin/itwinui-react 1.20.0 → 1.21.0

package/esm/core/Textarea/Textarea.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useMergedRefs } from '../utils/hooks/useMergedRefs';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useMergedRefs, useTheme } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Basic textarea component

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeOptions, ThemeType } from '../utils/hooks/useTheme';
+import { ThemeOptions, ThemeType } from '../utils';
 export declare type ThemeProviderProps = {
     /**
      * Theme to be applied. If not set, light theme will be used.

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 /**
  * Component providing global styles that are required for all components and allows changing theme.
  */

package/esm/core/Tile/Tile.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
-import { CommonProps } from '../utils/props';
 export declare type TileProps = {
     /**
      * Name or title of the tile.
@@ -39,7 +39,7 @@ export declare type TileProps = {
      *  thumbnail={<SvgImodelHollow />}
      * />
      */
-    thumbnail: string | React.ReactNode;
+    thumbnail?: string | React.ReactNode;
     /**
      * `Badge` shown on the bottom right of thumbnail.
      */

package/esm/core/Tile/Tile.js

@@ -29,7 +29,7 @@ import cx from 'classnames';
 import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
 import SvgMore from '@itwin/itwinui-icons-react/cjs/icons/More';
 import SvgNew from '@itwin/itwinui-icons-react/cjs/icons/New';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu';
 import { IconButton } from '../Buttons';
@@ -57,7 +57,7 @@ export var Tile = function (props) {
     var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
     return (React.createElement("div", __assign({ className: cx('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
-        React.createElement("div", { className: 'iui-thumbnail' },
+        thumbnail && (React.createElement("div", { className: 'iui-thumbnail' },
             typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                 className: 'iui-picture',
             })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
@@ -71,7 +71,7 @@ export var Tile = function (props) {
                 React.cloneElement(rightIcon, {
                     className: 'iui-small iui-quick-action',
                 }),
-            badge && React.createElement("div", { className: 'iui-badge-container' }, badge)),
+            badge && React.createElement("div", { className: 'iui-badge-container' }, badge))),
         React.createElement("div", { className: 'iui-content' },
             React.createElement("div", { className: 'iui-name' },
                 isSelected && (React.createElement(SvgCheckmark, { className: cx('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),

package/esm/core/TimePicker/TimePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/time-picker.css';
-import { StylingProps } from '../utils/props';
 export declare type MeridiemType = 'AM' | 'PM';
 export declare type TimePickerProps = {
     /**

package/esm/core/TimePicker/TimePicker.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/time-picker.css';
 var isSameHour = function (date1, date2, meridiem) {
     var adjustedHours = meridiem

package/esm/core/Toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/toast-notification.css';
-import { CommonProps } from '../utils/props';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {
     /**

package/esm/core/Toast/Toast.js

@@ -28,10 +28,9 @@ import React from 'react';
 import { Transition } from 'react-transition-group';
 import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, getWindow, StatusIconMap } from '../utils';
 import '@itwin/itwinui-css/css/toast-notification.css';
 import { IconButton } from '../Buttons';
-import { getWindow, StatusIconMap } from '../utils/common';
 /**
  * Generic Toast Notification Component
  * @example

package/esm/core/Toast/Toaster.js

@@ -24,7 +24,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { getContainer } from '../utils/common';
+import { getContainer } from '../utils';
 import { ToastWrapper } from './ToastWrapper';
 var TOASTS_CONTAINER_ID = 'iui-toasts-container';
 var Toaster = /** @class */ (function () {

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -47,7 +47,7 @@ export declare const ToggleSwitch: React.ForwardRefExoticComponent<{
      * Position of the label.
      * @default 'right'
      */
-    labelPosition?: "left" | "right" | undefined;
+    labelPosition?: "right" | "left" | undefined;
     /**
      * Set focus on toggle.
      * @default false

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useMergedRefs } from '../utils/hooks/useMergedRefs';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useMergedRefs, useTheme } from '../utils';
 import '@itwin/itwinui-css/css/toggle-switch.css';
 /**
  * A switch for turning on and off.

package/esm/core/Tooltip/Tooltip.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps, PopoverProps } from '../utils';
 import '@itwin/itwinui-css/css/tooltip.css';
-import { PopoverProps } from '../utils/Popover';
 export declare type TooltipProps = {
     /**
      * Content of the tooltip.

package/esm/core/Tooltip/Tooltip.js

@@ -26,9 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme, Popover } from '../utils';
 import '@itwin/itwinui-css/css/tooltip.css';
-import { Popover } from '../utils/Popover';
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

package/esm/core/Typography/Blockquote/Blockquote.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/blockquote.css';
 /**
  * Basic blockquote component

package/esm/core/Typography/Body/Body.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * Body text, renders a paragraph element

package/esm/core/Typography/Code/Code.d.ts

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

package/esm/core/Typography/Code/Code.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/code.css';
 /**
  * Inline code element.

package/esm/core/Typography/Headline/Headline.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * The biggest title on the page, renders a h1 element

package/esm/core/Typography/Kbd/Kbd.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.

package/esm/core/Typography/Kbd/Kbd.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.

package/esm/core/Typography/Leading/Leading.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * The third biggest title on the page, renders a h3 element

package/esm/core/Typography/Small/Small.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * Small text, renders a paragraph element

package/esm/core/Typography/Subheading/Subheading.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * The third biggest title on the page, renders a h3 element

package/esm/core/Typography/Text/Text.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 declare type TextOwnProps<T extends React.ElementType | React.ComponentType = 'div'> = {
     /**

package/esm/core/Typography/Text/Text.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.

package/esm/core/Typography/Title/Title.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils/hooks/useTheme';
+import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * The second biggest title on the page, renders a h2 element

package/esm/core/UserIcon/UserIcon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/user-icon.css';
 export declare type UserIconStatus = 'online' | 'busy' | 'away' | 'offline';
 export declare type StatusTitles = {

package/esm/core/UserIcon/UserIcon.js

@@ -29,7 +29,7 @@ import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
 import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/user-icon.css';
 export var defaultStatusTitles = {
     away: 'Away',

package/esm/core/UserIconGroup/UserIconGroup.d.ts

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

package/esm/core/UserIconGroup/UserIconGroup.js

@@ -25,8 +25,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
 import cx from 'classnames';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/user-icon.css';
 /**
  * Group User Icons together.

package/esm/core/Wizard/Step.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StylingProps } from '../utils/props';
+import { StylingProps } from '../utils';
 import { WizardType } from './Wizard';
 export declare type StepProps = {
     /**

package/esm/core/Wizard/Wizard.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../utils/hooks/useTheme';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/wizard.css';
 import { Step } from './Step';
 var defaultWizardLocalization = {

package/esm/core/index.d.ts

@@ -10,6 +10,8 @@ export { ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
+export { ComboBox } from './ComboBox';
+export type { ComboBoxProps } from './ComboBox';
 export { DatePicker, generateLocalizedStrings } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
 export { DropdownMenu } from './DropdownMenu';
@@ -80,6 +82,5 @@ export { UserIconGroup } from './UserIconGroup';
 export type { UserIconGroupProps } from './UserIconGroup';
 export { Wizard } from './Wizard';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-export { getUserColor } from './utils/common';
-export { useTheme } from './utils/hooks/useTheme';
-export type { ThemeType } from './utils/hooks/useTheme';
+export { getUserColor, useTheme } from './utils';
+export type { ThemeType } from './utils';

package/esm/core/index.js

@@ -8,6 +8,7 @@ export { Breadcrumbs } from './Breadcrumbs';
 export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
 export { Checkbox } from './Checkbox';
+export { ComboBox } from './ComboBox';
 export { DatePicker, generateLocalizedStrings } from './DatePicker';
 export { DropdownMenu } from './DropdownMenu';
 export { ErrorPage } from './ErrorPage';
@@ -43,5 +44,4 @@ export { Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kb
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';
 export { Wizard } from './Wizard';
-export { getUserColor } from './utils/common';
-export { useTheme } from './utils/hooks/useTheme';
+export { getUserColor, useTheme } from './utils';

package/esm/core/utils/{FocusTrap.js → components/FocusTrap.js}

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { getTabbableElements } from './common';
-import { mergeRefs } from './hooks/useMergedRefs';
+import { getTabbableElements } from '../functions/focusable';
+import { mergeRefs } from '../hooks/useMergedRefs';
 /**
  * Trap focus within child container.
  * Used for modals and dialogs.

package/esm/core/utils/{InputContainer.js → components/InputContainer.js}

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,15 +33,15 @@ import cx from 'classnames';
 export var InputContainer = function (props) {
     var _a;
     var _b;
-    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style;
-    return (React.createElement(Element, { className: cx('iui-input-container', (_a = {
+    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style"]);
+    return (React.createElement(Element, __assign({ className: cx('iui-input-container', (_a = {
                 'iui-disabled': disabled
             },
             _a["iui-" + status] = !!status,
             _a['iui-inline-label'] = isLabelInline,
             _a['iui-inline-icon'] = isIconInline,
             _a['iui-with-message'] = !!message && !isLabelInline,
-            _a), className), style: style },
+            _a), className), style: style }, rest),
         label && (React.createElement("div", { className: cx('iui-label', {
                 'iui-required': required,
             }) }, label)),

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

@@ -42,7 +42,7 @@ export declare const Popover: React.ForwardRefExoticComponent<Pick<{
      * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
      */
     placement?: import("@popperjs/core").Placement | undefined;
-} & Omit<TippyProps, "visible" | "placement" | "trigger">, "disabled" | "children" | "className" | "role" | "visible" | "content" | "sticky" | "touch" | "placement" | "trigger" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "theme" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "children" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -24,7 +24,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React from 'react';
 import Tippy from '@tippyjs/react';
-import { useMergedRefs } from './hooks/useMergedRefs';
+import { useMergedRefs } from '../hooks/useMergedRefs';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).

package/esm/core/utils/components/icons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CommonProps } from '../props';
+export declare const StatusIconMap: {
+    negative: (args?: CommonProps | undefined) => JSX.Element;
+    positive: (args?: CommonProps | undefined) => JSX.Element;
+    warning: (args?: CommonProps | undefined) => JSX.Element;
+    informational: (args?: CommonProps | undefined) => JSX.Element;
+};

package/esm/core/utils/components/icons.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import SvgInfoCircular from '@itwin/itwinui-icons-react/cjs/icons/InfoCircular';
+import SvgStatusError from '@itwin/itwinui-icons-react/cjs/icons/StatusError';
+import SvgStatusSuccess from '@itwin/itwinui-icons-react/cjs/icons/StatusSuccess';
+import SvgStatusWarning from '@itwin/itwinui-icons-react/cjs/icons/StatusWarning';
+import React from 'react';
+export var StatusIconMap = {
+    negative: function (args) { return React.createElement(SvgStatusError, __assign({ "aria-hidden": true }, args)); },
+    positive: function (args) { return React.createElement(SvgStatusSuccess, __assign({ "aria-hidden": true }, args)); },
+    warning: function (args) { return React.createElement(SvgStatusWarning, __assign({ "aria-hidden": true }, args)); },
+    informational: function (args) { return (React.createElement(SvgInfoCircular, __assign({ "aria-hidden": true }, args))); },
+};

package/esm/core/utils/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Popover';
+export * from './FocusTrap';
+export * from './InputContainer';
+export * from './icons';

package/esm/core/utils/components/index.js

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export * from './Popover';
+export * from './FocusTrap';
+export * from './InputContainer';
+export * from './icons';

package/esm/core/utils/functions/colors.d.ts

@@ -0,0 +1,20 @@
+export declare const SoftBackgrounds: {
+    readonly skyblue: "hsl(197, 71%, 83%)";
+    readonly celery: "hsl(72, 51%, 66%)";
+    readonly froly: "hsl(2, 90%, 83%)";
+    readonly steelblue: "hsl(207, 44%, 73%)";
+    readonly sunglow: "hsl(42, 100%, 70%)";
+    readonly seabuckthorn: "hsl(29, 92%, 71%)";
+    readonly montecarlo: "hsl(176, 43%, 72%)";
+    readonly poloblue: "hsl(211, 44%, 77%)";
+    readonly bouquet: "hsl(305, 19%, 75%)";
+    readonly ash: "hsl(42, 15%, 85%)";
+    readonly oak: "hsl(27, 32%, 72%)";
+};
+/** Returns true if a string value is one of the SoftBackgrounds keys */
+export declare const isSoftBackground: (value: string) => value is "skyblue" | "celery" | "froly" | "steelblue" | "sunglow" | "seabuckthorn" | "montecarlo" | "poloblue" | "bouquet" | "ash" | "oak";
+/**
+ * Generate color from user name or email.
+ * Recommended to use for `backgroundColor` in `UserIcon` component.
+ */
+export declare const getUserColor: (emailOrName: string) => string;

package/esm/core/utils/functions/colors.js

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export var SoftBackgrounds = {
+    skyblue: 'hsl(197, 71%, 83%)',
+    celery: 'hsl(72, 51%, 66%)',
+    froly: 'hsl(2, 90%, 83%)',
+    steelblue: 'hsl(207, 44%, 73%)',
+    sunglow: 'hsl(42, 100%, 70%)',
+    seabuckthorn: 'hsl(29, 92%, 71%)',
+    montecarlo: 'hsl(176, 43%, 72%)',
+    poloblue: 'hsl(211, 44%, 77%)',
+    bouquet: 'hsl(305, 19%, 75%)',
+    ash: 'hsl(42, 15%, 85%)',
+    oak: 'hsl(27, 32%, 72%)',
+};
+/** Returns true if a string value is one of the SoftBackgrounds keys */
+export var isSoftBackground = function (value) {
+    return Object.keys(SoftBackgrounds).includes(value);
+};
+var USER_COLORS = [
+    '#6AB9EC',
+    '#B1C854',
+    '#F7706C',
+    '#4585A5',
+    '#FFC335',
+    '#F7963E',
+    '#73C7C1',
+    '#85A9CF',
+    '#A3779F',
+    '#C8C2B4',
+    '#A47854',
+];
+/**
+ * Generate color from user name or email.
+ * Recommended to use for `backgroundColor` in `UserIcon` component.
+ */
+export var getUserColor = function (emailOrName) {
+    var normalizedString = emailOrName.trim().toLowerCase();
+    var hash = 0;
+    for (var i = 0; i < normalizedString.length; i++) {
+        var charCode = normalizedString.charCodeAt(i);
+        hash = (hash + charCode) % USER_COLORS.length;
+    }
+    return USER_COLORS[hash];
+};

package/esm/core/utils/functions/dom.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Get the container as a child of body, or create one if it doesn't exist.
+ * Mostly used for dynamic components like Modal or Toast.
+ *
+ * @param containerId id of the container to find or create
+ * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
+ */
+export declare const getContainer: (containerId: string, ownerDocument?: Document | undefined) => HTMLElement | undefined;
+/**
+ * Get document if it is defined.
+ * Used to support SSR/SSG applications.
+ */
+export declare const getDocument: () => Document | undefined;
+/**
+ * Get window if it is defined.
+ * Used to support SSR/SSG applications.
+ */
+export declare const getWindow: () => (Window & typeof globalThis) | undefined;