@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/utils/components/WithCSSTransition.js

@@ -1,67 +1,59 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCSSTransition = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const react_transition_group_1 = require("react-transition-group");
-const styles_js_1 = __importDefault(require("../../styles.js"));
+Object.defineProperty(exports, 'WithCSSTransition', {
+  enumerable: true,
+  get: function () {
+    return WithCSSTransition;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _reacttransitiongroup = require('react-transition-group');
+const _styles = require('../../styles.js');
 const WithCSSTransition = (props) => {
-    const { in: visible, dimension = 'height', children, ...rest } = props;
-    const expandedSize = React.useRef(0);
-    const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
-    return (React.createElement(react_transition_group_1.CSSTransition, { in: visible, timeout: 200, unmountOnExit: true, onEnter: (node) => {
-            node.style[`min${dimensionCamelCase}`] = 'initial';
-            node.style[dimension] = '0px';
-        }, onEntering: (node) => {
-            node.style[dimension] = `${expandedSize.current}px`;
-        }, onEntered: (node) => {
-            node.style[`min${dimensionCamelCase}`] = '';
-            node.style[dimension] = '';
-        }, onExit: (node) => {
-            node.style[dimension] = `${expandedSize.current}px`;
-        }, onExiting: (node) => {
-            node.style[`min${dimensionCamelCase}`] = 'initial';
-            node.style[dimension] = '0px';
-        }, classNames: {
-            enter: styles_js_1.default['iui-enter'],
-            enterActive: styles_js_1.default['iui-enter-active'],
-            exit: styles_js_1.default['iui-exit'],
-            exitActive: styles_js_1.default['iui-exit-active'],
-        }, ...rest }, React.isValidElement(children) ? (React.cloneElement(children, {
-        ref: (el) => {
+  const { in: visible, dimension = 'height', children, ...rest } = props;
+  const expandedSize = _react.useRef(0);
+  const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
+  return (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
+    in: visible,
+    timeout: 200,
+    unmountOnExit: true,
+    onEnter: (node) => {
+      node.style[`min${dimensionCamelCase}`] = 'initial';
+      node.style[dimension] = '0px';
+    },
+    onEntering: (node) => {
+      node.style[dimension] = `${expandedSize.current}px`;
+    },
+    onEntered: (node) => {
+      node.style[`min${dimensionCamelCase}`] = '';
+      node.style[dimension] = '';
+    },
+    onExit: (node) => {
+      node.style[dimension] = `${expandedSize.current}px`;
+    },
+    onExiting: (node) => {
+      node.style[`min${dimensionCamelCase}`] = 'initial';
+      node.style[dimension] = '0px';
+    },
+    classNames: {
+      enter: _styles.styles['iui-enter'],
+      enterActive: _styles.styles['iui-enter-active'],
+      exit: _styles.styles['iui-exit'],
+      exitActive: _styles.styles['iui-exit-active'],
+    },
+    ...rest,
+    children: _react.isValidElement(children)
+      ? _react.cloneElement(children, {
+          ref: (el) => {
             if (el) {
-                expandedSize.current = el.getBoundingClientRect()[dimension];
+              expandedSize.current = el.getBoundingClientRect()[dimension];
             }
-        },
-    })) : (React.createElement(React.Fragment, null))));
+          },
+        })
+      : (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}),
+  });
 };
-exports.WithCSSTransition = WithCSSTransition;

package/cjs/utils/components/index.js

@@ -1,34 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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("./Resizer.js"), exports);
-__exportStar(require("./FocusTrap.js"), exports);
-__exportStar(require("./InputContainer.js"), exports);
-__exportStar(require("./InputFlexContainer.js"), exports);
-__exportStar(require("./InputWithIcon.js"), exports);
-__exportStar(require("./WithCSSTransition.js"), exports);
-__exportStar(require("./MiddleTextTruncation.js"), exports);
-__exportStar(require("./VirtualScroll.js"), exports);
-__exportStar(require("./AutoclearingHiddenLiveRegion.js"), exports);
-__exportStar(require("./Box.js"), exports);
-__exportStar(require("./ButtonBase.js"), exports);
-__exportStar(require("./Portal.js"), exports);
-__exportStar(require("./ShadowRoot.js"), exports);
-__exportStar(require("./LineClamp.js"), exports);
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const _export_star = require('@swc/helpers/_/_export_star');
+_export_star._(require('./Resizer.js'), exports);
+_export_star._(require('./FocusTrap.js'), exports);
+_export_star._(require('./InputContainer.js'), exports);
+_export_star._(require('./InputFlexContainer.js'), exports);
+_export_star._(require('./InputWithIcon.js'), exports);
+_export_star._(require('./WithCSSTransition.js'), exports);
+_export_star._(require('./MiddleTextTruncation.js'), exports);
+_export_star._(require('./VirtualScroll.js'), exports);
+_export_star._(require('./AutoclearingHiddenLiveRegion.js'), exports);
+_export_star._(require('./Box.js'), exports);
+_export_star._(require('./ButtonBase.js'), exports);
+_export_star._(require('./Portal.js'), exports);
+_export_star._(require('./ShadowRoot.js'), exports);
+_export_star._(require('./LineClamp.js'), exports);

package/cjs/utils/functions/colors.d.ts

@@ -12,7 +12,7 @@ export declare const SoftBackgrounds: {
     readonly oak: "var(--iui-color-background-oak)";
 };
 /** 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";
+export declare const isSoftBackground: (value: string) => value is keyof typeof SoftBackgrounds;
 /**
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.

package/cjs/utils/functions/colors.js

@@ -1,40 +1,48 @@
-"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: 'var(--iui-color-background-skyblue)',
-    celery: 'var(--iui-color-background-celery)',
-    froly: 'var(--iui-color-background-froly)',
-    steelblue: 'var(--iui-color-background-steelblue)',
-    sunglow: 'var(--iui-color-background-sunglow)',
-    seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
-    montecarlo: 'var(--iui-color-background-montecarlo)',
-    poloblue: 'var(--iui-color-background-poloblue)',
-    bouquet: 'var(--iui-color-background-bouquet)',
-    ash: 'var(--iui-color-background-ash)',
-    oak: 'var(--iui-color-background-oak)',
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  SoftBackgrounds: function () {
+    return SoftBackgrounds;
+  },
+  getUserColor: function () {
+    return getUserColor;
+  },
+  isSoftBackground: function () {
+    return isSoftBackground;
+  },
+});
+const SoftBackgrounds = {
+  skyblue: 'var(--iui-color-background-skyblue)',
+  celery: 'var(--iui-color-background-celery)',
+  froly: 'var(--iui-color-background-froly)',
+  steelblue: 'var(--iui-color-background-steelblue)',
+  sunglow: 'var(--iui-color-background-sunglow)',
+  seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
+  montecarlo: 'var(--iui-color-background-montecarlo)',
+  poloblue: 'var(--iui-color-background-poloblue)',
+  bouquet: 'var(--iui-color-background-bouquet)',
+  ash: 'var(--iui-color-background-ash)',
+  oak: 'var(--iui-color-background-oak)',
 };
-/** Returns true if a string value is one of the SoftBackgrounds keys */
 const isSoftBackground = (value) => {
-    return Object.keys(exports.SoftBackgrounds).includes(value);
+  return Object.keys(SoftBackgrounds).includes(value);
 };
-exports.isSoftBackground = isSoftBackground;
-const USER_COLORS = Object.values(exports.SoftBackgrounds);
-/**
- * Generate color from user name or email.
- * Recommended to use for `backgroundColor` in `Avatar` component.
- */
+const USER_COLORS = Object.values(SoftBackgrounds);
 const getUserColor = (emailOrName) => {
-    const normalizedString = emailOrName.trim().toLowerCase();
-    let hash = 0;
-    for (let i = 0; i < normalizedString.length; i++) {
-        const charCode = normalizedString.charCodeAt(i);
-        hash = (hash + charCode) % USER_COLORS.length;
-    }
-    return USER_COLORS[hash];
+  const normalizedString = emailOrName.trim().toLowerCase();
+  let hash = 0;
+  for (let i = 0; i < normalizedString.length; i++) {
+    const charCode = normalizedString.charCodeAt(i);
+    hash = (hash + charCode) % USER_COLORS.length;
+  }
+  return USER_COLORS[hash];
 };
-exports.getUserColor = getUserColor;

package/cjs/utils/functions/date.js

@@ -1,21 +1,20 @@
-"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.isBefore = void 0;
-/**
- * Return true if the first date is earlier than the second date
- */
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'isBefore', {
+  enumerable: true,
+  get: function () {
+    return isBefore;
+  },
+});
 const isBefore = (beforeDate, afterDate) => {
-    if (!beforeDate || !afterDate) {
-        return false;
-    }
-    const firstDate = new Date(beforeDate);
-    const secondDate = new Date(afterDate);
-    firstDate && firstDate.setHours(0, 0, 0, 0);
-    secondDate && secondDate.setHours(0, 0, 0, 0);
-    return firstDate < secondDate;
+  if (!beforeDate || !afterDate) {
+    return false;
+  }
+  const firstDate = new Date(beforeDate);
+  const secondDate = new Date(afterDate);
+  firstDate && firstDate.setHours(0, 0, 0, 0);
+  secondDate && secondDate.setHours(0, 0, 0, 0);
+  return firstDate < secondDate;
 };
-exports.isBefore = isBefore;

package/cjs/utils/functions/dev.js

@@ -1,41 +1,44 @@
-"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.createWarningLogger = exports.isDev = exports.isUnitTest = void 0;
-// @ts-expect-error -- jest is not used in iTwinUI but may be used in consuming apps
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  createWarningLogger: function () {
+    return createWarningLogger;
+  },
+  isDev: function () {
+    return isDev;
+  },
+  isUnitTest: function () {
+    return isUnitTest;
+  },
+});
 const isJest = typeof jest !== 'undefined';
-const isMocha = typeof globalThis.beforeEach !== 'undefined' &&
-    `${globalThis.beforeEach}`.replace(/\s/g, '') ===
-        'function(name,fn){suites[0].beforeEach(name,fn);}';
+const isMocha =
+  typeof globalThis.beforeEach !== 'undefined' &&
+  `${globalThis.beforeEach}`.replace(/\s/g, '') ===
+    'function(name,fn){suites[0].beforeEach(name,fn);}';
 const isVitest = typeof globalThis.__vitest_index__ !== 'undefined';
 const isUnitTest = isJest || isVitest || isMocha;
-exports.isUnitTest = isUnitTest;
 let isDev = false;
-exports.isDev = isDev;
-// wrapping in try-catch because process might be undefined
 try {
-    exports.isDev = isDev = process.env.NODE_ENV !== 'production' && !isUnitTest;
-}
-catch { }
-/**
- * Logs message one time only in dev environments.
- *
- * @example
- * const logWarningInDev = createWarningLogger();
- * logWarningInDev("please don't use this")
- */
+  isDev = process.env.NODE_ENV !== 'production' && !isUnitTest;
+} catch {}
 const createWarningLogger = !isDev
-    ? () => () => { }
-    : () => {
-        let logged = false;
-        return (message) => {
-            if (!logged) {
-                console.warn(message);
-                logged = true;
-            }
-        };
+  ? () => () => {}
+  : () => {
+      let logged = false;
+      return (message) => {
+        if (!logged) {
+          console.warn(message);
+          logged = true;
+        }
+      };
     };
-exports.createWarningLogger = createWarningLogger;

package/cjs/utils/functions/dom.d.ts

@@ -12,7 +12,7 @@ export declare const getWindow: () => (Window & typeof globalThis) | undefined;
  * Merges multiple event handlers into one, while making sure that
  * `defaultPrevented` is respected for each callback.
  */
-export declare const mergeEventHandlers: <E extends import("react").SyntheticEvent<Element, Event>>(...callbacks: (((event: E) => void) | undefined)[]) => (event: E) => void;
+export declare const mergeEventHandlers: <E extends React.SyntheticEvent>(...callbacks: Array<((event: E) => void) | undefined>) => (event: E) => void;
 /**
  * Returns translate values as an array of a given element.
  * @param element HTML element you want to get translate value of

package/cjs/utils/functions/dom.js

@@ -1,54 +1,56 @@
-"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.getTranslateValues = exports.getTranslateValuesFromElement = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = void 0;
-/**
- * Get document if it is defined.
- * Used to support SSR/SSG applications.
- */
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  getDocument: function () {
+    return getDocument;
+  },
+  getTranslateValues: function () {
+    return getTranslateValues;
+  },
+  getTranslateValuesFromElement: function () {
+    return getTranslateValuesFromElement;
+  },
+  getWindow: function () {
+    return getWindow;
+  },
+  mergeEventHandlers: function () {
+    return mergeEventHandlers;
+  },
+});
 const getDocument = () => {
-    return typeof document === 'undefined' ? undefined : document;
+  return typeof document === 'undefined' ? undefined : document;
 };
-exports.getDocument = getDocument;
-/**
- * Get window if it is defined.
- * Used to support SSR/SSG applications.
- */
 const getWindow = () => {
-    return typeof window === 'undefined' ? undefined : window;
+  return typeof window === 'undefined' ? undefined : window;
 };
-exports.getWindow = getWindow;
-/**
- * Merges multiple event handlers into one, while making sure that
- * `defaultPrevented` is respected for each callback.
- */
-const mergeEventHandlers = (...callbacks) => (event) => {
+const mergeEventHandlers =
+  (...callbacks) =>
+  (event) => {
     for (const cb of callbacks) {
-        cb?.(event);
-        if (event?.defaultPrevented) {
-            return;
-        }
+      cb?.(event);
+      if (event?.defaultPrevented) {
+        return;
+      }
     }
-};
-exports.mergeEventHandlers = mergeEventHandlers;
-/**
- * Returns translate values as an array of a given element.
- * @param element HTML element you want to get translate value of
- * @returns Translate values in pixels in an array `[translateX, translateY]`
- */
+  };
 const getTranslateValuesFromElement = (element) => {
-    if (!element) {
-        return [];
-    }
-    const transformValue = getComputedStyle(element).getPropertyValue('transform');
-    return (0, exports.getTranslateValues)(transformValue);
+  if (!element) {
+    return [];
+  }
+  const transformValue =
+    getComputedStyle(element).getPropertyValue('transform');
+  return getTranslateValues(transformValue);
 };
-exports.getTranslateValuesFromElement = getTranslateValuesFromElement;
 const getTranslateValues = (transformValue) => {
-    const matrix = new DOMMatrix(transformValue);
-    return [matrix.m41, matrix.m42];
+  const matrix = new DOMMatrix(transformValue);
+  return [matrix.m41, matrix.m42];
 };
-exports.getTranslateValues = getTranslateValues;

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * Return array of tabbable elements in the container.
  */
@@ -6,3 +7,25 @@ export declare const getTabbableElements: (container: HTMLElement | undefined |
  * Return array of focusable elements in the container.
  */
 export declare const getFocusableElements: (container: HTMLElement | undefined | null) => Element[];
+/**
+ * Returns the latest focusable elements in the `root` element.
+ * This is returned as a ref and a state. Choose which one to use according to the use case. E.g.:
+ * - ref: since FloatingUI needs a ref ([`listRef`](https://floating-ui.com/docs/useListNavigation#listref)).
+ * - state: when reading this value in a render.
+ *
+ * Pass `extraOptions.filter` to filter the elements.
+ *
+ * @example
+ * const {focusableElementsRef, focusableElements} = useFocusableElements(root, {
+ *   // Filter out focusable elements that are inside other focusable elements.
+ *   filter: (allElements) => allElements.filter(
+ *     (i) => !allElements?.some((p) => p.contains(i.parentElement)),
+ *   ),
+ * });
+ */
+export declare function useFocusableElements(root: HTMLElement | null, extraOptions?: {
+    filter?: (elements: HTMLElement[]) => HTMLElement[];
+}): {
+    focusableElementsRef: React.MutableRefObject<HTMLElement[]>;
+    focusableElements: HTMLElement[];
+};