@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

package/cjs/core/Toast/index.js

@@ -1,9 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useToaster = 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 Toaster_js_1 = require("./Toaster.js");
-Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return Toaster_js_1.useToaster; } });
+var Toaster_js_1 = require('./Toaster.js');
+Object.defineProperty(exports, 'useToaster', {
+  enumerable: true,
+  get: function () {
+    return Toaster_js_1.useToaster;
+  },
+});

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ToggleSwitchProps = {
+type ToggleSwitchProps = {
     /**
      * Label for the toggle switch.
      */
@@ -10,11 +10,6 @@ declare type ToggleSwitchProps = {
      * @default 'right'
      */
     labelPosition?: 'left' | 'right';
-    /**
-     * Set focus on toggle.
-     * @default false
-     */
-    setFocus?: boolean;
 } & ({
     /**
      * Size of the toggle switch.

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -1,39 +1,14 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ToggleSwitch = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * 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 index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * A switch for turning on and off.
  * @example
@@ -53,27 +28,65 @@ const index_js_1 = require("../utils/index.js");
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 exports.ToggleSwitch = React.forwardRef((props, ref) => {
-    let icon;
-    if (props.size !== 'small') {
-        icon = props.icon;
-        props = { ...props };
-        delete props.icon;
-    }
-    const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus) {
-            inputElementRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(index_js_1.Box, { as: label ? 'label' : 'div', className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
-            'iui-disabled': disabled,
-            'iui-label-on-right': label && labelPosition === 'right',
-            'iui-label-on-left': label && labelPosition === 'left',
-        }, className), "data-iui-size": size, style: style },
-        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
-        icon && size !== 'small' && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
-        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
+  let icon;
+  if (props.size !== 'small') {
+    icon = props.icon;
+    props = { ...props };
+    delete props.icon;
+  }
+  const {
+    disabled = false,
+    labelPosition = 'right',
+    label,
+    className,
+    style,
+    size = 'default',
+    ...rest
+  } = props;
+  const inputElementRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: label ? 'label' : 'div',
+      className: (0, classnames_1.default)(
+        'iui-toggle-switch-wrapper',
+        {
+          'iui-disabled': disabled,
+          'iui-label-on-right': label && labelPosition === 'right',
+          'iui-label-on-left': label && labelPosition === 'left',
+        },
+        className,
+      ),
+      'data-iui-size': size,
+      style: style,
+    },
+    React.createElement(index_js_1.Box, {
+      as: 'input',
+      className: 'iui-toggle-switch',
+      type: 'checkbox',
+      role: 'switch',
+      disabled: disabled,
+      ref: refs,
+      ...rest,
+    }),
+    icon &&
+      size !== 'small' &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'span',
+          className: 'iui-toggle-switch-icon',
+          'aria-hidden': true,
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        index_js_1.Box,
+        { as: 'span', className: 'iui-toggle-switch-label' },
+        label,
+      ),
+  );
 });
 exports.default = exports.ToggleSwitch;

package/cjs/core/ToggleSwitch/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ToggleSwitch = 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 ToggleSwitch_js_1 = require("./ToggleSwitch.js");
-Object.defineProperty(exports, "ToggleSwitch", { enumerable: true, get: function () { return ToggleSwitch_js_1.ToggleSwitch; } });
+var ToggleSwitch_js_1 = require('./ToggleSwitch.js');
+Object.defineProperty(exports, 'ToggleSwitch', {
+  enumerable: true,
+  get: function () {
+    return ToggleSwitch_js_1.ToggleSwitch;
+  },
+});
 exports.default = './ToggleSwitch';

package/cjs/core/Tooltip/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '@floating-ui/react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type TooltipOptions = {
+type TooltipOptions = {
     /**
      * Placement of the Tooltip
      * @default 'top'
@@ -43,7 +43,7 @@ declare type TooltipOptions = {
         inline?: boolean;
     };
 };
-declare type TooltipOwnProps = {
+type TooltipOwnProps = {
     /**
      * Content of the tooltip.
      */

package/cjs/core/Tooltip/Tooltip.js

@@ -1,95 +1,87 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Tooltip = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * 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 react_1 = require("@floating-ui/react");
-const index_js_1 = require("../utils/index.js");
-const react_dom_1 = __importDefault(require("react-dom"));
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const react_1 = require('@floating-ui/react');
+const index_js_1 = require('../utils/index.js');
+const react_dom_1 = tslib_1.__importDefault(require('react-dom'));
 const useTooltip = (options = {}) => {
-    const { placement, visible: controlledOpen, middleware = {
-        flip: true,
-        shift: true,
-    }, autoUpdateOptions = {}, } = options;
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
-    const open = controlledOpen ?? uncontrolledOpen;
-    const data = (0, react_1.useFloating)({
-        placement,
-        open,
-        onOpenChange: setUncontrolledOpen,
-        whileElementsMounted: (referenceEl, floatingEl, update) => (0, react_1.autoUpdate)(referenceEl, floatingEl, update, {
-            animationFrame: autoUpdateOptions.animationFrame,
-            ancestorScroll: autoUpdateOptions.ancestorScroll,
-            ancestorResize: autoUpdateOptions.ancestorResize,
-            elementResize: autoUpdateOptions.elementResize,
-            layoutShift: autoUpdateOptions.layoutShift,
-        }),
-        middleware: [
-            middleware.offset !== undefined ? (0, react_1.offset)(middleware.offset) : (0, react_1.offset)(4),
-            middleware.flip && (0, react_1.flip)(),
-            middleware.shift && (0, react_1.shift)(),
-            middleware.size && (0, react_1.size)(),
-            middleware.autoPlacement && (0, react_1.autoPlacement)(),
-            middleware.inline && (0, react_1.inline)(),
-            middleware.hide && (0, react_1.hide)(),
-        ].filter(Boolean),
-    });
-    const context = data.context;
-    const hover = (0, react_1.useHover)(context, {
-        enabled: controlledOpen == null,
-        delay: {
-            open: 50,
-            close: 250,
-        },
-        handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
-    });
-    const focus = (0, react_1.useFocus)(context, {
-        enabled: controlledOpen == null,
-    });
-    const click = (0, react_1.useClick)(context, {
-        enabled: controlledOpen == null,
-    });
-    const dismiss = (0, react_1.useDismiss)(context, {
-        enabled: controlledOpen == null,
-    });
-    const role = (0, react_1.useRole)(context, { role: 'tooltip' });
-    const interactions = (0, react_1.useInteractions)([click, hover, focus, dismiss, role]);
-    return React.useMemo(() => ({
-        open,
-        setUncontrolledOpen,
-        ...interactions,
-        ...data,
-    }), [open, interactions, data]);
+  const {
+    placement,
+    visible: controlledOpen,
+    middleware = {
+      flip: true,
+      shift: true,
+    },
+    autoUpdateOptions = {},
+  } = options;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const data = (0, react_1.useFloating)({
+    placement,
+    open,
+    onOpenChange: setUncontrolledOpen,
+    whileElementsMounted: (referenceEl, floatingEl, update) =>
+      (0, react_1.autoUpdate)(referenceEl, floatingEl, update, {
+        animationFrame: autoUpdateOptions.animationFrame,
+        ancestorScroll: autoUpdateOptions.ancestorScroll,
+        ancestorResize: autoUpdateOptions.ancestorResize,
+        elementResize: autoUpdateOptions.elementResize,
+        layoutShift: autoUpdateOptions.layoutShift,
+      }),
+    middleware: [
+      middleware.offset !== undefined
+        ? (0, react_1.offset)(middleware.offset)
+        : (0, react_1.offset)(4),
+      middleware.flip && (0, react_1.flip)(),
+      middleware.shift && (0, react_1.shift)(),
+      middleware.size && (0, react_1.size)(),
+      middleware.autoPlacement && (0, react_1.autoPlacement)(),
+      middleware.inline && (0, react_1.inline)(),
+      middleware.hide && (0, react_1.hide)(),
+    ].filter(Boolean),
+  });
+  const context = data.context;
+  const hover = (0, react_1.useHover)(context, {
+    enabled: controlledOpen == null,
+    delay: {
+      open: 50,
+      close: 250,
+    },
+    handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
+  });
+  const focus = (0, react_1.useFocus)(context, {
+    enabled: controlledOpen == null,
+  });
+  const click = (0, react_1.useClick)(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = (0, react_1.useDismiss)(context, {
+    enabled: controlledOpen == null,
+  });
+  const role = (0, react_1.useRole)(context, { role: 'tooltip' });
+  const interactions = (0, react_1.useInteractions)([
+    click,
+    hover,
+    focus,
+    dismiss,
+    role,
+  ]);
+  return React.useMemo(
+    () => ({
+      open,
+      setUncontrolledOpen,
+      ...interactions,
+      ...data,
+    }),
+    [open, interactions, data],
+  );
 };
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
@@ -103,40 +95,73 @@ const useTooltip = (options = {}) => {
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
 exports.Tooltip = React.forwardRef((props, forwardRef) => {
-    const { content, children, portal = true, placement = 'top', autoUpdateOptions, middleware, style, className, visible, reference, ...rest } = props;
-    const tooltip = useTooltip({
-        placement,
-        visible,
-        autoUpdateOptions,
-        middleware,
-    });
-    const context = (0, index_js_1.useGlobals)();
-    React.useEffect(() => {
-        if (reference) {
-            tooltip.refs.setReference(reference.current);
-        }
-    }, [reference, tooltip.refs]);
-    const portalTo = typeof portal !== 'boolean'
-        ? portal.to
-        : portal
-            ? context?.portalContainerRef?.current ?? (0, index_js_1.getDocument)()?.body
-            : null;
-    const contentBox = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), ref: (0, index_js_1.useMergedRefs)(tooltip.refs.setFloating, forwardRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.getFloatingProps(), ...rest }, content));
-    const childrenRef = React.isValidElement(children) &&
-        (0, index_js_1.mergeRefs)(tooltip.refs.setReference, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        children.ref);
-    return (React.createElement(React.Fragment, null,
-        React.isValidElement(children)
-            ? React.cloneElement(children, tooltip.getReferenceProps({
-                ref: childrenRef,
-                ...children.props,
-            }))
-            : null,
-        tooltip.open
-            ? portalTo
-                ? react_dom_1.default.createPortal(contentBox, portalTo)
-                : contentBox
-            : null));
+  const {
+    content,
+    children,
+    portal = true,
+    placement = 'top',
+    autoUpdateOptions,
+    middleware,
+    style,
+    className,
+    visible,
+    reference,
+    ...rest
+  } = props;
+  const tooltip = useTooltip({
+    placement,
+    visible,
+    autoUpdateOptions,
+    middleware,
+  });
+  const context = (0, index_js_1.useGlobals)();
+  React.useEffect(() => {
+    if (reference) {
+      tooltip.refs.setReference(reference.current);
+    }
+  }, [reference, tooltip.refs]);
+  const portalTo =
+    typeof portal !== 'boolean'
+      ? portal.to
+      : portal
+      ? context?.portalContainerRef?.current ??
+        (0, index_js_1.getDocument)()?.body
+      : null;
+  const contentBox = React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-tooltip', className),
+      ref: (0, index_js_1.useMergedRefs)(tooltip.refs.setFloating, forwardRef),
+      style: { ...tooltip.floatingStyles, ...style },
+      ...tooltip.getFloatingProps(),
+      ...rest,
+    },
+    content,
+  );
+  const childrenRef =
+    React.isValidElement(children) &&
+    (0, index_js_1.mergeRefs)(
+      tooltip.refs.setReference,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children.ref,
+    );
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.isValidElement(children)
+      ? React.cloneElement(
+          children,
+          tooltip.getReferenceProps({
+            ref: childrenRef,
+            ...children.props,
+          }),
+        )
+      : null,
+    tooltip.open
+      ? portalTo
+        ? react_dom_1.default.createPortal(contentBox, portalTo)
+        : contentBox
+      : null,
+  );
 });
 exports.default = exports.Tooltip;

package/cjs/core/Tooltip/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Tooltip = 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 Tooltip_js_1 = require("./Tooltip.js");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_js_1.Tooltip; } });
+var Tooltip_js_1 = require('./Tooltip.js');
+Object.defineProperty(exports, 'Tooltip', {
+  enumerable: true,
+  get: function () {
+    return Tooltip_js_1.Tooltip;
+  },
+});
 exports.default = './Tooltip';

package/cjs/core/TransferList/TransferList.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { ListItem } from '../List/index.js';
-declare type TransferListListboxWrapperOwnProps = {};
-declare type TransferListItemOwnProps = {
+type TransferListListboxWrapperOwnProps = {};
+type TransferListItemOwnProps = {
     /**
      * Callback fired when the the active state changes.
      */
     onActiveChange?: (value: boolean) => void;
 } & React.ComponentProps<typeof ListItem>;
-declare type TransferListListboxLabelOwnProps = {
+type TransferListListboxLabelOwnProps = {
     /**
      * Text label that is wrapped by `TransferList.ListboxLabel`
      */
@@ -30,7 +30,7 @@ declare type TransferListListboxLabelOwnProps = {
  *   </TransferList.ListboxWrapper>
  * </TransferList>
  */
-export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+export declare const TransferList: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}> & {
     /**
      * 	TransferList listbox wrapper subcomponent
      */
@@ -38,7 +38,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList listbox subcomponent
      */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
         ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
     }, "as"> & {
         as?: "ul" | undefined;
@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Toolbar: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };
 export declare const TransferListContext: React.Context<{
     /**