@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Tooltip/Tooltip.js

@@ -1,126 +1,98 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const tslib_1 = require('tslib');
+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 = 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 = 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 useTooltip = (options = {}) => {
-  const uniqueId = (0, index_js_1.useId)();
-  const {
-    placement = 'top',
-    visible,
-    onVisibleChange,
-    middleware = { flip: true, shift: true },
-    autoUpdateOptions = {},
-    reference,
-    ariaStrategy = 'description',
-    id = uniqueId,
-    ...props
-  } = options;
-  const [open, onOpenChange] = (0, index_js_1.useControlledState)(
-    false,
-    visible,
-    onVisibleChange,
-  );
-  const floating = (0, react_1.useFloating)({
-    placement,
-    open,
-    onOpenChange,
-    whileElementsMounted: (...args) =>
-      (0, react_1.autoUpdate)(...args, autoUpdateOptions),
-    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),
-    ...(reference && { elements: { reference } }),
-  });
-  const ariaProps = React.useMemo(
-    () =>
-      ariaStrategy === 'description'
+    const uniqueId = (0, index_js_1.useId)();
+    const { placement = 'top', visible, onVisibleChange, middleware = { flip: true, shift: true }, autoUpdateOptions = {}, reference, ariaStrategy = 'description', id = uniqueId, ...props } = options;
+    const [open, onOpenChange] = (0, index_js_1.useControlledState)(false, visible, onVisibleChange);
+    const floating = (0, react_1.useFloating)({
+        placement,
+        open,
+        onOpenChange,
+        whileElementsMounted: (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions),
+        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),
+        ...(reference && { elements: { reference } }),
+    });
+    const ariaProps = React.useMemo(() => ariaStrategy === 'description'
         ? { 'aria-describedby': id }
         : ariaStrategy === 'label'
-        ? { 'aria-labelledby': id }
-        : {},
-    [ariaStrategy, id],
-  );
-  const { delay } = (0, react_1.useDelayGroupContext)();
-  (0, react_1.useDelayGroup)(floating.context, { id: (0, index_js_1.useId)() });
-  const interactions = (0, react_1.useInteractions)([
-    (0, react_1.useHover)(floating.context, {
-      delay: delay ?? { open: 50, close: 250 },
-      handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
-    }),
-    (0, react_1.useFocus)(floating.context),
-    (0, react_1.useClick)(floating.context),
-    (0, react_1.useDismiss)(floating.context),
-  ]);
-  // Manually add attributes and event handlers to external reference element,
-  // because we cannot spread getReferenceProps onto it.
-  React.useEffect(() => {
-    if (!reference) {
-      return;
-    }
-    /** e.g. onPointerDown --> pointerdown */
-    const domEventName = (e) => e.toLowerCase().substring(2);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const cleanupValues = {};
-    Object.entries({
-      ...ariaProps,
-      ...interactions.getReferenceProps(),
-    }).forEach(([key, value]) => {
-      if (typeof value === 'function') {
-        reference.addEventListener(domEventName(key), value);
-        cleanupValues[key] = value;
-      } else if (value) {
-        cleanupValues[key] = reference.getAttribute(key);
-        reference.setAttribute(key, value);
-      }
-    });
-    return () => {
-      Object.entries(cleanupValues).forEach(([key, value]) => {
-        if (typeof value === 'function') {
-          reference.removeEventListener(domEventName(key), value);
-        } else if (value) {
-          reference.setAttribute(key, value);
-        } else {
-          reference.removeAttribute(key);
+            ? { 'aria-labelledby': id }
+            : {}, [ariaStrategy, id]);
+    const { delay } = (0, react_1.useDelayGroupContext)();
+    (0, react_1.useDelayGroup)(floating.context, { id: (0, index_js_1.useId)() });
+    const interactions = (0, react_1.useInteractions)([
+        (0, react_1.useHover)(floating.context, {
+            delay: delay ?? { open: 50, close: 250 },
+            handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
+        }),
+        (0, react_1.useFocus)(floating.context),
+        (0, react_1.useClick)(floating.context),
+        (0, react_1.useDismiss)(floating.context),
+    ]);
+    // Manually add attributes and event handlers to external reference element,
+    // because we cannot spread getReferenceProps onto it.
+    React.useEffect(() => {
+        if (!reference) {
+            return;
         }
-      });
-    };
-  }, [ariaProps, reference, interactions]);
-  const getReferenceProps = React.useCallback(
-    (userProps) => {
-      return interactions.getReferenceProps({ ...userProps, ...ariaProps });
-    },
-    [interactions, ariaProps],
-  );
-  const floatingProps = React.useMemo(
-    () =>
-      interactions.getFloatingProps({
+        /** e.g. onPointerDown --> pointerdown */
+        const domEventName = (e) => e.toLowerCase().substring(2);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const cleanupValues = {};
+        Object.entries({
+            ...ariaProps,
+            ...interactions.getReferenceProps(),
+        }).forEach(([key, value]) => {
+            if (typeof value === 'function') {
+                reference.addEventListener(domEventName(key), value);
+                cleanupValues[key] = value;
+            }
+            else if (value) {
+                cleanupValues[key] = reference.getAttribute(key);
+                reference.setAttribute(key, value);
+            }
+        });
+        return () => {
+            Object.entries(cleanupValues).forEach(([key, value]) => {
+                if (typeof value === 'function') {
+                    reference.removeEventListener(domEventName(key), value);
+                }
+                else if (value) {
+                    reference.setAttribute(key, value);
+                }
+                else {
+                    reference.removeAttribute(key);
+                }
+            });
+        };
+    }, [ariaProps, reference, interactions]);
+    const getReferenceProps = React.useCallback((userProps) => {
+        return interactions.getReferenceProps({ ...userProps, ...ariaProps });
+    }, [interactions, ariaProps]);
+    const floatingProps = React.useMemo(() => interactions.getFloatingProps({
         hidden: !open,
         'aria-hidden': 'true',
         ...props,
         id,
-      }),
-    [interactions, props, id, open],
-  );
-  return React.useMemo(
-    () => ({ getReferenceProps, floatingProps, ...floating }),
-    [getReferenceProps, floatingProps, floating],
-  );
+    }), [interactions, props, id, open]);
+    return React.useMemo(() => ({ getReferenceProps, floatingProps, ...floating }), [getReferenceProps, floatingProps, floating]);
 };
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
@@ -134,32 +106,14 @@ const useTooltip = (options = {}) => {
  * <Tooltip content='tooltip text' reference={trigger} />
  */
 exports.Tooltip = React.forwardRef((props, forwardedRef) => {
-  const { content, children, portal = true, className, style, ...rest } = props;
-  const tooltip = useTooltip(rest);
-  return React.createElement(
-    React.Fragment,
-    null,
-    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
-      ...tooltip.getReferenceProps(children.props),
-      ref: tooltip.refs.setReference,
-    })),
-    React.createElement(
-      index_js_1.Portal,
-      { portal: portal },
-      React.createElement(
-        index_js_1.Box,
-        {
-          className: (0, classnames_1.default)('iui-tooltip', className),
-          ref: (0, index_js_1.useMergedRefs)(
-            tooltip.refs.setFloating,
-            forwardedRef,
-          ),
-          style: { ...tooltip.floatingStyles, ...style },
-          ...tooltip.floatingProps,
-        },
-        content,
-      ),
-    ),
-  );
+    const { content, children, portal = true, className, style, ...rest } = props;
+    const tooltip = useTooltip(rest);
+    return (React.createElement(React.Fragment, null,
+        (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+            ...tooltip.getReferenceProps(children.props),
+            ref: tooltip.refs.setReference,
+        })),
+        React.createElement(index_js_1.Portal, { portal: portal },
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), ref: (0, index_js_1.useMergedRefs)(tooltip.refs.setFloating, forwardedRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.floatingProps }, content))));
 });
 exports.default = exports.Tooltip;

package/cjs/core/TransferList/TransferList.js

@@ -1,183 +1,109 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransferListContext = exports.TransferList = void 0;
-const tslib_1 = require('tslib');
+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_1 = tslib_1.__importDefault(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const List_js_1 = require('../List/List.js');
-const ListItem_js_1 = require('../List/ListItem.js');
-const Label_js_1 = require('../Label/Label.js');
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const List_js_1 = require("../List/List.js");
+const ListItem_js_1 = require("../List/ListItem.js");
+const Label_js_1 = require("../Label/Label.js");
 // ----------------------------------------------------------------------------
 // TransferListComponent
-const TransferListComponent = (0, index_js_1.polymorphic)(
-  'iui-transfer-list-wrapper',
-);
+const TransferListComponent = (0, index_js_1.polymorphic)('iui-transfer-list-wrapper');
 TransferListComponent.displayName = 'TransferList';
 const TransferListListboxWrapper = react_1.default.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const uid = (0, index_js_1.useId)();
-  const [labelId, setLabelId] = react_1.default.useState(uid);
-  return react_1.default.createElement(
-    index_js_1.Box,
-    {
-      as: 'div',
-      className: (0, classnames_1.default)(
-        'iui-transfer-list-listbox-wrapper',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    react_1.default.createElement(
-      exports.TransferListContext.Provider,
-      { value: { labelId, setLabelId } },
-      children,
-    ),
-  );
+    const { className, children, ...rest } = props;
+    const uid = (0, index_js_1.useId)();
+    const [labelId, setLabelId] = react_1.default.useState(uid);
+    return (react_1.default.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
+        react_1.default.createElement(exports.TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
 });
 TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = react_1.default.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { labelId } = (0, index_js_1.useSafeContext)(
-    exports.TransferListContext,
-  );
-  const [focusedIndex, setFocusedIndex] = react_1.default.useState();
-  const listRef = react_1.default.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(listRef, ref);
-  const getFocusableNodes = react_1.default.useCallback(() => {
-    const focusableItems = (0, index_js_1.getFocusableElements)(
-      listRef.current,
-    );
-    // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
-    return focusableItems.filter(
-      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
-    );
-  }, []);
-  react_1.default.useEffect(() => {
-    const items = getFocusableNodes();
-    if (focusedIndex != null) {
-      items?.[focusedIndex]?.focus();
-      return;
-    }
-  }, [focusedIndex, getFocusableNodes]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const items = getFocusableNodes();
-    if (!items?.length) {
-      return;
-    }
-    const currentIndex = focusedIndex ?? 0;
-    switch (event.key) {
-      case 'ArrowDown': {
-        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      case 'ArrowUp': {
-        setFocusedIndex(Math.max(currentIndex - 1, 0));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  return react_1.default.createElement(
-    List_js_1.List,
-    {
-      className: (0, classnames_1.default)(
-        'iui-transfer-list-listbox',
-        className,
-      ),
-      onKeyDown: onKeyDown,
-      role: 'listbox',
-      'aria-multiselectable': true,
-      'aria-labelledby': labelId,
-      tabIndex: 0,
-      ref: refs,
-      ...rest,
-    },
-    children,
-  );
+    const { children, className, ...rest } = props;
+    const { labelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
+    const [focusedIndex, setFocusedIndex] = react_1.default.useState();
+    const listRef = react_1.default.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(listRef, ref);
+    const getFocusableNodes = react_1.default.useCallback(() => {
+        const focusableItems = (0, index_js_1.getFocusableElements)(listRef.current);
+        // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
+    }, []);
+    react_1.default.useEffect(() => {
+        const items = getFocusableNodes();
+        if (focusedIndex != null) {
+            items?.[focusedIndex]?.focus();
+            return;
+        }
+    }, [focusedIndex, getFocusableNodes]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        const items = getFocusableNodes();
+        if (!items?.length) {
+            return;
+        }
+        const currentIndex = focusedIndex ?? 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    return (react_1.default.createElement(List_js_1.List, { className: (0, classnames_1.default)('iui-transfer-list-listbox', className), onKeyDown: onKeyDown, role: 'listbox', "aria-multiselectable": true, "aria-labelledby": labelId, tabIndex: 0, ref: refs, ...rest }, children));
 });
 TransferListListbox.displayName = 'TransferList.Listbox';
 const TransferListItem = react_1.default.forwardRef((props, ref) => {
-  const {
-    actionable = true,
-    disabled,
-    onActiveChange,
-    children,
-    active,
-    ...rest
-  } = props;
-  const onClickEvents = () =>
-    actionable && onActiveChange && onActiveChange(!active);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    if (
-      event.key === 'Enter' ||
-      event.key === ' ' ||
-      event.key === 'Spacebar'
-    ) {
-      !disabled && onClickEvents();
-      event.preventDefault();
-    }
-  };
-  return react_1.default.createElement(
-    ListItem_js_1.ListItem,
-    {
-      ref: ref,
-      onClick: onClickEvents,
-      onKeyDown: onKeyDown,
-      active: active,
-      actionable: actionable,
-      tabIndex: -1,
-      role: 'option',
-      'aria-disabled': disabled ? 'true' : undefined,
-      'aria-selected': active ? 'true' : undefined,
-      disabled: disabled,
-      ...rest,
-    },
-    children,
-  );
+    const { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
+    const onClickEvents = () => actionable && onActiveChange && onActiveChange(!active);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'Spacebar') {
+            !disabled && onClickEvents();
+            event.preventDefault();
+        }
+    };
+    return (react_1.default.createElement(ListItem_js_1.ListItem, { ref: ref, onClick: onClickEvents, onKeyDown: onKeyDown, active: active, actionable: actionable, tabIndex: -1, role: 'option', "aria-disabled": disabled ? 'true' : undefined, "aria-selected": active ? 'true' : undefined, disabled: disabled, ...rest }, children));
 });
 TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = react_1.default.forwardRef((props, ref) => {
-  const { children, id, ...rest } = props;
-  const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(
-    exports.TransferListContext,
-  );
-  react_1.default.useEffect(() => {
-    if (id && id !== labelId) {
-      setLabelId(id);
-    }
-  }, [id, labelId, setLabelId]);
-  return react_1.default.createElement(
-    Label_js_1.Label,
-    { as: 'div', id: labelId, ref: ref, ...rest },
-    children,
-  );
+    const { children, id, ...rest } = props;
+    const { labelId, setLabelId } = (0, index_js_1.useSafeContext)(exports.TransferListContext);
+    react_1.default.useEffect(() => {
+        if (id && id !== labelId) {
+            setLabelId(id);
+        }
+    }, [id, labelId, setLabelId]);
+    return (react_1.default.createElement(Label_js_1.Label, { as: 'div', id: labelId, ref: ref, ...rest }, children));
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 // ----------------------------------------------------------------------------
 // TransferList.Toolbar component
-const TransferListToolbar = (0, index_js_1.polymorphic)(
-  'iui-transfer-list-toolbar',
-  {
+const TransferListToolbar = (0, index_js_1.polymorphic)('iui-transfer-list-toolbar', {
     role: 'toolbar',
-  },
-);
+});
 TransferListToolbar.displayName = 'TransferList.Toolbar';
 /**
  * The TransferList component is used to display a list within a box
@@ -196,26 +122,26 @@ TransferListToolbar.displayName = 'TransferList.Toolbar';
  * </TransferList>
  */
 exports.TransferList = Object.assign(TransferListComponent, {
-  /**
-   * 	TransferList listbox wrapper subcomponent
-   */
-  ListboxWrapper: TransferListListboxWrapper,
-  /**
-   * 	TransferList listbox subcomponent
-   */
-  Listbox: TransferListListbox,
-  /**
-   * 	TransferList item subcomponent
-   */
-  Item: TransferListItem,
-  /**
-   * 	TransferList listbox label subcomponent
-   */
-  ListboxLabel: TransferListListboxLabel,
-  /**
-   * 	TransferList toolbar subcomponent
-   */
-  Toolbar: TransferListToolbar,
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: TransferListListboxWrapper,
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: TransferListListbox,
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: TransferListItem,
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: TransferListListboxLabel,
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: TransferListToolbar,
 });
 exports.TransferListContext = react_1.default.createContext(undefined);
 exports.default = exports.TransferList;