@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/utils/functions/polymorphic.js

@@ -1,103 +1,70 @@
-"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.polymorphic = 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 classnames_1 = __importDefault(require("classnames"));
-const useGlobals_js_1 = require("../hooks/useGlobals.js");
-const styles_js_1 = __importDefault(require("../../styles.js"));
+Object.defineProperty(exports, 'polymorphic', {
+  enumerable: true,
+  get: function () {
+    return polymorphic;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _useGlobals = require('../hooks/useGlobals.js');
+const _styles = require('../../styles.js');
 const _base = (defaultElement) => {
-    return (className, attrs) => {
-        const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
-            props = {
-                ...attrs,
-                ...props,
-                className: getScopedClassName((0, classnames_1.default)(className, attrs?.className, props.className)),
-            };
-            const Element = as || 'div';
-            // Add tabIndex to interactive elements if not already set.
-            // Workaround for Safari refusing to focus links/buttons/non-text inputs.
-            if (Element === 'button' ||
-                Element === 'a' ||
-                (Element === 'input' && props.type === 'checkbox')) {
-                props.tabIndex ?? (props.tabIndex = 0);
-            }
-            (0, useGlobals_js_1.useGlobals)();
-            return React.createElement(Element, { ref: ref, ...props });
-        });
-        Comp.displayName = getDisplayNameFromClass(className);
-        return Comp;
-    };
+  return (className, attrs) => {
+    const Comp = _react.forwardRef(({ as = defaultElement, ...props }, ref) => {
+      props = {
+        ...attrs,
+        ...props,
+        className: getScopedClassName(
+          (0, _classnames.default)(
+            className,
+            attrs?.className,
+            props.className,
+          ),
+        ),
+      };
+      const Element = as || 'div';
+      if (
+        Element === 'button' ||
+        Element === 'a' ||
+        (Element === 'input' && props.type === 'checkbox')
+      ) {
+        var _props;
+        (_props = props).tabIndex ?? (_props.tabIndex = 0);
+      }
+      (0, _useGlobals.useGlobals)();
+      return (0, _jsxruntime.jsx)(Element, {
+        ref: ref,
+        ...props,
+      });
+    });
+    Comp.displayName = getDisplayNameFromClass(className);
+    return Comp;
+  };
 };
-/**
- * Utility to create a type-safe polymorphic component with a simple class.
- *
- * Can be called directly or as a property of the `polymorphic` object.
- * In both cases, returns a component that:
- * - uses CSS-modules scoped classes
- * - supports `as` prop with default element
- * - forwards ref and spreads rest props
- * - adds and merges CSS classes
- * - adds tabIndex to interactive elements (Safari workaround)
- *
- * @example
- * const MyPolyDiv = polymorphic('my-poly-div');
- * <MyPolyDiv>...</MyPolyDiv>;
- *
- * @example
- * const MyPolyButton = polymorphic.button('my-poly-button', { type: 'button' });
- * <MyPolyButton as='a' href='#'>...</MyPolyButton>;
- *
- * @private
- */
-exports.polymorphic = new Proxy(_base('div'), {
-    get: (target, prop) => {
-        if (typeof prop === 'string') {
-            // eslint-disable-next-line -- string is as far as we can narrow it down
-            // @ts-ignore
-            return _base(prop);
-        }
-        return Reflect.get(target, prop);
-    },
+const polymorphic = new Proxy(_base('div'), {
+  get: (target, prop) => {
+    if (typeof prop === 'string') {
+      return _base(prop);
+    }
+    return Reflect.get(target, prop);
+  },
 });
-// e.g. iui-list-item-icon -> ListItemIcon
 const getDisplayNameFromClass = (str) => {
-    const camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-    return camel.substring(3);
+  const camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  return camel.substring(3);
 };
-// e.g. iui-button -> _iui3-button
 const getScopedClassName = (className = '') => {
-    return (className
-        .split(' ')
-        .map((c) => (c in styles_js_1.default ? styles_js_1.default[c] : c))
-        .join(' ') || null);
+  return (
+    className
+      .split(' ')
+      .map((c) => (c in _styles.styles ? _styles.styles[c] : c))
+      .join(' ') || null
+  );
 };

package/cjs/utils/functions/react.js

@@ -1,59 +1,32 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cloneElementWithRef = 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 useMergedRefs_js_1 = require("../hooks/useMergedRefs.js");
-/**
- * Wrapper over `cloneElement` that automatically checks for `isValidElement`
- * and automatically merges `children.ref` with the ref passed in props.
- *
- * @private
- */
+Object.defineProperty(exports, 'cloneElementWithRef', {
+  enumerable: true,
+  get: function () {
+    return cloneElementWithRef;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _useMergedRefs = require('../hooks/useMergedRefs.js');
 const cloneElementWithRef = (children, getProps) => {
-    if (!children) {
-        return null;
-    }
-    if (!React.isValidElement(children)) {
-        return children;
-    }
-    const props = getProps(children);
-    const ref = (0, useMergedRefs_js_1.mergeRefs)(...[
-        'ref' in children ? children.ref : null,
-        'ref' in props ? props.ref : null,
-    ].filter(Boolean));
-    return React.cloneElement(children, {
-        ...props,
-        // we already checked ref above and handled null, so ts-ignore is ok
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        ref,
-    });
+  if (!children) {
+    return null;
+  }
+  if (!_react.isValidElement(children)) {
+    return children;
+  }
+  const props = getProps(children);
+  const ref = (0, _useMergedRefs.mergeRefs)(
+    ...[
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return _react.cloneElement(children, {
+    ...props,
+    ref,
+  });
 };
-exports.cloneElementWithRef = cloneElementWithRef;

package/cjs/utils/functions/supports.js

@@ -1,13 +1,13 @@
-"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.supportsHas = void 0;
-const dom_js_1 = require("./dom.js");
-/**
- * Returns true if the :has selector is supported in the browser
- */
-const supportsHas = () => (0, dom_js_1.getWindow)()?.CSS?.supports?.('selector(:has(+ *))');
-exports.supportsHas = supportsHas;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'supportsHas', {
+  enumerable: true,
+  get: function () {
+    return supportsHas;
+  },
+});
+const _dom = require('./dom.js');
+const supportsHas = () =>
+  (0, _dom.getWindow)()?.CSS?.supports?.('selector(:has(+ *))');

package/cjs/utils/hooks/index.js

@@ -1,35 +1,20 @@
-"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("./useEventListener.js"), exports);
-__exportStar(require("./useMergedRefs.js"), exports);
-__exportStar(require("./useOverflow.js"), exports);
-__exportStar(require("./useResizeObserver.js"), exports);
-__exportStar(require("./useContainerWidth.js"), exports);
-__exportStar(require("./useGlobals.js"), exports);
-__exportStar(require("./useIntersection.js"), exports);
-__exportStar(require("./useMediaQuery.js"), exports);
-__exportStar(require("./useSafeContext.js"), exports);
-__exportStar(require("./useLatestRef.js"), exports);
-__exportStar(require("./useIsomorphicLayoutEffect.js"), exports);
-__exportStar(require("./useIsClient.js"), exports);
-__exportStar(require("./useId.js"), exports);
-__exportStar(require("./useControlledState.js"), exports);
-__exportStar(require("./useSyncExternalStore.js"), exports);
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const _export_star = require('@swc/helpers/_/_export_star');
+_export_star._(require('./useEventListener.js'), exports);
+_export_star._(require('./useMergedRefs.js'), exports);
+_export_star._(require('./useOverflow.js'), exports);
+_export_star._(require('./useResizeObserver.js'), exports);
+_export_star._(require('./useContainerWidth.js'), exports);
+_export_star._(require('./useGlobals.js'), exports);
+_export_star._(require('./useIntersection.js'), exports);
+_export_star._(require('./useMediaQuery.js'), exports);
+_export_star._(require('./useSafeContext.js'), exports);
+_export_star._(require('./useLatestRef.js'), exports);
+_export_star._(require('./useIsomorphicLayoutEffect.js'), exports);
+_export_star._(require('./useIsClient.js'), exports);
+_export_star._(require('./useId.js'), exports);
+_export_star._(require('./useControlledState.js'), exports);
+_export_star._(require('./useSyncExternalStore.js'), exports);

package/cjs/utils/hooks/useContainerWidth.js

@@ -1,65 +1,38 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContainerWidth = 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 useMergedRefs_js_1 = require("./useMergedRefs.js");
-const useResizeObserver_js_1 = require("./useResizeObserver.js");
-/**
- * Hook that returns the width of an element in three stages:
- *  - initialized with 0
- *  - immediately set to element's initial width as soon as it's mounted
- *  - update to new width every time it changes (using `useResizeObserver` hook)
- *
- * @private
- * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
- * @returns [ref to attach to the element, stateful width of the element]
- *
- * @example
- * const [ref, width] = useContainerWidth();
- * ... // do something with width
- * return <div ref={ref}>...</div>;
- */
+Object.defineProperty(exports, 'useContainerWidth', {
+  enumerable: true,
+  get: function () {
+    return useContainerWidth;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _useMergedRefs = require('./useMergedRefs.js');
+const _useResizeObserver = require('./useResizeObserver.js');
 const useContainerWidth = (watchResizes = true) => {
-    const [contentWidth, setContentWidth] = React.useState(0);
-    const ref = React.useCallback((element) => {
-        if (!element) {
-            return;
-        }
-        setContentWidth(element.getBoundingClientRect().width);
-    }, []);
-    const updateWidth = React.useCallback(({ width }) => setContentWidth(width), []);
-    const [resizeRef, resizeObserver] = (0, useResizeObserver_js_1.useResizeObserver)(updateWidth);
-    if (!watchResizes) {
-        resizeObserver?.disconnect();
+  const [contentWidth, setContentWidth] = _react.useState(0);
+  const ref = _react.useCallback((element) => {
+    if (!element) {
+      return;
     }
-    const refs = (0, useMergedRefs_js_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
-    return [refs, contentWidth];
+    setContentWidth(element.getBoundingClientRect().width);
+  }, []);
+  const updateWidth = _react.useCallback(
+    ({ width }) => setContentWidth(width),
+    [],
+  );
+  const [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
+    updateWidth,
+  );
+  if (!watchResizes) {
+    resizeObserver?.disconnect();
+  }
+  const refs = (0, _useMergedRefs.useMergedRefs)(
+    ref,
+    watchResizes ? resizeRef : undefined,
+  );
+  return [refs, contentWidth];
 };
-exports.useContainerWidth = useContainerWidth;

package/cjs/utils/hooks/useControlledState.d.ts

@@ -10,4 +10,4 @@ import * as React from 'react';
  * @example
  * const [state, setState] = useControlledState(null, props.value, props.onChange);
  */
-export declare const useControlledState: <T>(initialValue: T, controlledState: T, setControlledState?: React.Dispatch<React.SetStateAction<T>> | undefined) => readonly [T, React.Dispatch<React.SetStateAction<T>>];
+export declare const useControlledState: <T>(initialValue: T, controlledState: T | undefined, setControlledState?: React.Dispatch<React.SetStateAction<T>>) => readonly [T, React.Dispatch<React.SetStateAction<T>>];

package/cjs/utils/hooks/useControlledState.js

@@ -1,52 +1,32 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useControlledState = 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"));
-/**
- * Wrapper over `useState` that always gives preference to the
- * controlled state (which often comes from a prop).
- *
- * This is helpful when a component needs to support both uncontrolled
- * and controlled states. If controlled value/setter is not passed,
- * then it will work just like a regular `useState`.
- *
- * @example
- * const [state, setState] = useControlledState(null, props.value, props.onChange);
- */
-const useControlledState = (initialValue, controlledState, setControlledState) => {
-    const [uncontrolledState, setUncontrolledState] = React.useState(initialValue);
-    const state = controlledState !== undefined ? controlledState : uncontrolledState;
-    const setState = React.useCallback((value) => {
-        setUncontrolledState(value);
-        setControlledState?.(value);
-    }, [setControlledState, setUncontrolledState]);
-    return [state, setState];
+Object.defineProperty(exports, 'useControlledState', {
+  enumerable: true,
+  get: function () {
+    return useControlledState;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  const [uncontrolledState, setUncontrolledState] =
+    _react.useState(initialValue);
+  const state = _react.useMemo(
+    () => (controlledState !== undefined ? controlledState : uncontrolledState),
+    [controlledState, uncontrolledState],
+  );
+  const setState = _react.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
 };
-exports.useControlledState = useControlledState;