@itwin/itwinui-react 1.20.0 → 1.21.0

package/cjs/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/cjs/core/UserIconGroup/UserIconGroup.js

@@ -31,8 +31,8 @@ exports.UserIconGroup = 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 classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/user-icon.css");
 /**
  * Group User Icons together.
@@ -67,7 +67,7 @@ var UserIconGroup = function (props) {
     var children = props.children, _b = props.animated, animated = _b === void 0 ? false : _b, _c = props.stacked, stacked = _c === void 0 ? true : _c, _d = props.maxIcons, maxIcons = _d === void 0 ? 5 : _d, _e = props.iconSize, iconSize = _e === void 0 ? 'small' : _e, countIconProps = props.countIconProps, className = props.className, rest = __rest(props, ["children", "animated", "stacked", "maxIcons", "iconSize", "countIconProps", "className"]);
     var childrenArray = react_1.default.Children.toArray(children);
     var childrenLength = childrenArray.length;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var getUserIconList = function (count) {
         return childrenArray.slice(0, count).map(function (child) {
             return react_1.default.cloneElement(child, {

package/cjs/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/cjs/core/Wizard/Wizard.js

@@ -32,7 +32,7 @@ exports.Wizard = 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/wizard.css");
 var Step_1 = require("./Step");
 var defaultWizardLocalization = {
@@ -56,7 +56,7 @@ var defaultWizardLocalization = {
 exports.Wizard = react_1.default.forwardRef(function (props, ref) {
     var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultWizardLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
     var boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-wizard', {
             'iui-long': type === 'long',
             'iui-workflow': type === 'workflow',

package/cjs/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/cjs/core/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalButtonBar = exports.Modal = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Input = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.EditableCell = void 0;
+exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalButtonBar = exports.Modal = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Input = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.EditableCell = exports.DefaultCell = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -25,6 +25,8 @@ var ButtonGroup_1 = require("./ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var ComboBox_1 = require("./ComboBox");
+Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function () { return ComboBox_1.ComboBox; } });
 var DatePicker_1 = require("./DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 Object.defineProperty(exports, "generateLocalizedStrings", { enumerable: true, get: function () { return DatePicker_1.generateLocalizedStrings; } });
@@ -124,7 +126,6 @@ var UserIconGroup_1 = require("./UserIconGroup");
 Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return UserIconGroup_1.UserIconGroup; } });
 var Wizard_1 = require("./Wizard");
 Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return Wizard_1.Wizard; } });
-var common_1 = require("./utils/common");
-Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return common_1.getUserColor; } });
-var useTheme_1 = require("./utils/hooks/useTheme");
-Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return useTheme_1.useTheme; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return utils_1.getUserColor; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });

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

@@ -9,8 +9,8 @@ exports.FocusTrap = 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("./common");
-var useMergedRefs_1 = require("./hooks/useMergedRefs");
+var focusable_1 = require("../functions/focusable");
+var useMergedRefs_1 = require("../hooks/useMergedRefs");
 /**
  * Trap focus within child container.
  * Used for modals and dialogs.
@@ -19,7 +19,7 @@ var FocusTrap = function (props) {
     var children = props.children;
     var childRef = react_1.default.useRef();
     var getFirstLastFocusables = function () {
-        var elements = (0, common_1.getTabbableElements)(childRef.current);
+        var elements = (0, focusable_1.getTabbableElements)(childRef.current);
         var firstElement = elements[0];
         var lastElement = elements[(elements.length || 1) - 1];
         return [firstElement, lastElement];

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

@@ -1,4 +1,26 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,15 +39,15 @@ var classnames_1 = __importDefault(require("classnames"));
 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_1.default.createElement(Element, { className: (0, classnames_1.default)('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_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('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_1.default.createElement("div", { className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
             }) }, label)),

package/cjs/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/cjs/core/utils/{Popover.js → components/Popover.js}

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hideOnEscOrTab = exports.Popover = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = __importDefault(require("@tippyjs/react"));
-var useMergedRefs_1 = require("./hooks/useMergedRefs");
+var useMergedRefs_1 = require("../hooks/useMergedRefs");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).

package/cjs/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/cjs/core/utils/components/icons.js

@@ -0,0 +1,32 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIconMap = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var InfoCircular_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/InfoCircular"));
+var StatusError_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/StatusError"));
+var StatusSuccess_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/StatusSuccess"));
+var StatusWarning_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/StatusWarning"));
+var react_1 = __importDefault(require("react"));
+exports.StatusIconMap = {
+    negative: function (args) { return react_1.default.createElement(StatusError_1.default, __assign({ "aria-hidden": true }, args)); },
+    positive: function (args) { return react_1.default.createElement(StatusSuccess_1.default, __assign({ "aria-hidden": true }, args)); },
+    warning: function (args) { return react_1.default.createElement(StatusWarning_1.default, __assign({ "aria-hidden": true }, args)); },
+    informational: function (args) { return (react_1.default.createElement(InfoCircular_1.default, __assign({ "aria-hidden": true }, args))); },
+};

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./Popover"), exports);
+__exportStar(require("./FocusTrap"), exports);
+__exportStar(require("./InputContainer"), exports);
+__exportStar(require("./icons"), exports);

package/cjs/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/cjs/core/utils/functions/colors.js

@@ -0,0 +1,52 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUserColor = exports.isSoftBackground = exports.SoftBackgrounds = void 0;
+exports.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 */
+var isSoftBackground = function (value) {
+    return Object.keys(exports.SoftBackgrounds).includes(value);
+};
+exports.isSoftBackground = isSoftBackground;
+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.
+ */
+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];
+};
+exports.getUserColor = getUserColor;

package/cjs/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;

package/cjs/core/utils/functions/dom.js

@@ -0,0 +1,42 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+/**
+ * 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).
+ */
+var getContainer = function (containerId, ownerDocument) {
+    var _a;
+    if (ownerDocument === void 0) { ownerDocument = (0, exports.getDocument)(); }
+    var container = (_a = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.getElementById(containerId)) !== null && _a !== void 0 ? _a : undefined;
+    if (container == null && !!ownerDocument) {
+        container = ownerDocument.createElement('div');
+        container.setAttribute('id', containerId);
+        ownerDocument.body.appendChild(container);
+    }
+    return container;
+};
+exports.getContainer = getContainer;
+/**
+ * Get document if it is defined.
+ * Used to support SSR/SSG applications.
+ */
+var getDocument = function () {
+    return typeof document === 'undefined' ? undefined : document;
+};
+exports.getDocument = getDocument;
+/**
+ * Get window if it is defined.
+ * Used to support SSR/SSG applications.
+ */
+var getWindow = function () {
+    return typeof window === 'undefined' ? undefined : window;
+};
+exports.getWindow = getWindow;

package/cjs/core/utils/functions/focusable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Return array of tabbable elements in the container.
+ */
+export declare const getTabbableElements: (container: HTMLElement | undefined | null) => Element[];
+/**
+ * Return array of focusable elements in the container.
+ */
+export declare const getFocusableElements: (container: HTMLElement | undefined | null) => Element[];

package/cjs/core/utils/functions/focusable.js

@@ -0,0 +1,34 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusableElements = exports.getTabbableElements = void 0;
+var tabbableElementsSelector = 'a[href], button, input, textarea, select, details, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Return array of tabbable elements in the container.
+ */
+var getTabbableElements = function (container) {
+    if (!container) {
+        return [];
+    }
+    var elements = container.querySelectorAll(tabbableElementsSelector);
+    return Array.from(elements).filter(function (el) {
+        return !el.hasAttribute('disabled') && !el.classList.contains('iui-disabled');
+    });
+};
+exports.getTabbableElements = getTabbableElements;
+/**
+ * Return array of focusable elements in the container.
+ */
+var getFocusableElements = function (container) {
+    if (!container) {
+        return [];
+    }
+    var elements = container.querySelectorAll(tabbableElementsSelector + ", [tabindex=\"-1\"]");
+    return Array.from(elements).filter(function (el) {
+        return !el.hasAttribute('disabled') && !el.classList.contains('iui-disabled');
+    });
+};
+exports.getFocusableElements = getFocusableElements;

package/cjs/core/utils/functions/index.d.ts

@@ -0,0 +1,4 @@
+export * from './dom';
+export * from './colors';
+export * from './numbers';
+export * from './focusable';

package/cjs/core/utils/functions/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./dom"), exports);
+__exportStar(require("./colors"), exports);
+__exportStar(require("./numbers"), exports);
+__exportStar(require("./focusable"), exports);

package/cjs/core/utils/functions/numbers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Return input value bounded by specified range.
+ */
+export declare const getBoundedValue: (val: number, min: number, max: number) => number;
+/**
+ * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
+ */
+export declare const getRandomValue: (length?: number) => string;

package/cjs/core/utils/functions/numbers.js

@@ -0,0 +1,27 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRandomValue = exports.getBoundedValue = void 0;
+/**
+ * Return input value bounded by specified range.
+ */
+var getBoundedValue = function (val, min, max) {
+    return Math.min(max, Math.max(min, val));
+};
+exports.getBoundedValue = getBoundedValue;
+/**
+ * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
+ */
+var getRandomValue = function (length) {
+    if (length === void 0) { length = 21; }
+    var alphabet = "_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    var id = '';
+    for (var i = 0; i < length; i++) {
+        id += alphabet[(Math.random() * 64) | 0];
+    }
+    return id;
+};
+exports.getRandomValue = getRandomValue;

package/cjs/core/utils/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useEventListener';
+export * from './useMergedRefs';
+export * from './useOverflow';
+export * from './useResizeObserver';
+export * from './useTheme';
+export * from './useIntersection';

package/cjs/core/utils/hooks/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./useEventListener"), exports);
+__exportStar(require("./useMergedRefs"), exports);
+__exportStar(require("./useOverflow"), exports);
+__exportStar(require("./useResizeObserver"), exports);
+__exportStar(require("./useTheme"), exports);
+__exportStar(require("./useIntersection"), exports);

package/cjs/core/utils/hooks/useIntersection.js

@@ -9,7 +9,7 @@ exports.useIntersection = 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("../common");
+var dom_1 = require("../functions/dom");
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
  * Callback is called only once.
@@ -27,7 +27,7 @@ var useIntersection = function (onIntersect, options) {
     var observer = react_1.default.useRef();
     var setRef = react_1.default.useCallback(function (node) {
         var _a;
-        if (!((_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
+        if (!((_a = (0, dom_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
             return;
         }
         if (observer.current) {

package/cjs/core/utils/hooks/useResizeObserver.js

@@ -9,7 +9,7 @@ exports.useResizeObserver = 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("../common");
+var dom_1 = require("../functions/dom");
 /**
  * Hook that uses `ResizeObserver` to access an element's size every time it updates.
  * @private
@@ -26,7 +26,7 @@ var useResizeObserver = function (onResize) {
     var resizeObserver = react_1.default.useRef();
     var elementRef = react_1.default.useCallback(function (element) {
         var _a, _b, _c;
-        if (!((_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
+        if (!((_a = (0, dom_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
             return;
         }
         (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();

package/cjs/core/utils/hooks/useTheme.js

@@ -10,7 +10,7 @@ exports.useTheme = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 require("@itwin/itwinui-css/css/global.css");
-var common_1 = require("../common");
+var dom_1 = require("../functions/dom");
 /**
  * Hook that applies styling and theme to all components.
  * Defaults to light theme if none provided or set elsewhere.
@@ -19,7 +19,7 @@ var common_1 = require("../common");
  */
 var useTheme = function (theme, themeOptions) {
     var _a;
-    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, common_1.getDocument)();
+    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, dom_1.getDocument)();
     react_1.default.useLayoutEffect(function () {
         if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
@@ -38,7 +38,7 @@ var useTheme = function (theme, themeOptions) {
                 addDarkTheme(ownerDocument);
                 break;
             case 'os':
-                if ((_b = (_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)').matches) {
+                if ((_b = (_a = (0, dom_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)').matches) {
                     addDarkTheme(ownerDocument);
                 }
                 else {

package/cjs/core/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './functions';
+export * from './hooks';
+export * from './components';
+export * from './props';