@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/core/Popover/Popover.js

@@ -1,205 +1,276 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-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.Popover = exports.usePopover = void 0;
-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 Portal_js_1 = require("../../utils/components/Portal.js");
-const ThemeProvider_js_1 = require("../ThemeProvider/ThemeProvider.js");
-// ----------------------------------------------------------------------------
-const usePopover = (options) => {
-    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
-    const mergedInteractions = {
-        ...{
-            click: true,
-            dismiss: true,
-            hover: false,
-            focus: false,
-            listNavigation: undefined,
-        },
-        ...interactionsProp,
-    };
-    const tree = (0, react_1.useFloatingTree)();
-    const middleware = React.useMemo(() => ({ flip: true, shift: true, ...options.middleware }), [options.middleware]);
-    const [open, onOpenChange] = (0, index_js_1.useControlledState)(false, visible, onVisibleChange);
-    const floating = (0, react_1.useFloating)({
-        placement,
-        open,
-        onOpenChange,
-        whileElementsMounted: React.useMemo(() => 
-        // autoUpdate is expensive and should only be called when the popover is open
-        open ? (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
-        ...rest,
-        middleware: React.useMemo(() => [
-            middleware.offset !== undefined && (0, react_1.offset)(middleware.offset),
-            middleware.flip && (0, react_1.flip)(),
-            middleware.shift && (0, react_1.shift)(),
-            matchWidth &&
-                (0, react_1.size)({
-                    apply: ({ rects }) => {
-                        setReferenceWidth(rects.reference.width);
-                    },
-                }),
-            middleware.autoPlacement && (0, react_1.autoPlacement)(),
-            middleware.inline && (0, react_1.inline)(),
-            middleware.hide && (0, react_1.hide)(),
-        ].filter(Boolean), [matchWidth, middleware]),
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
     });
-    const interactions = (0, react_1.useInteractions)([
-        (0, react_1.useClick)(floating.context, {
-            enabled: !!mergedInteractions.click,
-            ...mergedInteractions.click,
-        }),
-        (0, react_1.useDismiss)(floating.context, {
-            enabled: !!mergedInteractions.dismiss,
-            outsidePress: closeOnOutsideClick,
-            bubbles: tree != null,
-            ...mergedInteractions.dismiss,
-        }),
-        (0, react_1.useHover)(floating.context, {
-            enabled: !!mergedInteractions.hover,
-            delay: 100,
-            handleClose: (0, react_1.safePolygon)({
-                buffer: 1,
-                blockPointerEvents: true,
+}
+_export(exports, {
+  Popover: function () {
+    return Popover;
+  },
+  PopoverOpenContext: function () {
+    return PopoverOpenContext;
+  },
+  usePopover: function () {
+    return usePopover;
+  },
+});
+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 _react1 = require('@floating-ui/react');
+const _index = require('../../utils/index.js');
+const _Portal = require('../../utils/components/Portal.js');
+const _ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
+const PopoverOpenContext = _react.createContext(undefined);
+const usePopover = (options) => {
+  const {
+    placement = 'bottom-start',
+    visible,
+    onVisibleChange,
+    closeOnOutsideClick,
+    autoUpdateOptions,
+    matchWidth,
+    interactions: interactionsProp,
+    role,
+    ...rest
+  } = options;
+  const mergedInteractions = _react.useMemo(
+    () => ({
+      ...{
+        click: true,
+        dismiss: true,
+        hover: false,
+        focus: false,
+      },
+      ...interactionsProp,
+    }),
+    [interactionsProp],
+  );
+  const tree = (0, _react1.useFloatingTree)();
+  const middleware = _react.useMemo(
+    () => ({
+      flip: true,
+      shift: true,
+      ...options.middleware,
+    }),
+    [options.middleware],
+  );
+  const [open, onOpenChange] = (0, _index.useControlledState)(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = (0, _react1.useFloating)({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: _react.useMemo(
+      () =>
+        open
+          ? (...args) => (0, _react1.autoUpdate)(...args, autoUpdateOptions)
+          : undefined,
+      [autoUpdateOptions, open],
+    ),
+    ...rest,
+    middleware: _react.useMemo(
+      () =>
+        [
+          middleware.offset !== undefined &&
+            (0, _react1.offset)(middleware.offset),
+          middleware.flip && (0, _react1.flip)(),
+          middleware.shift && (0, _react1.shift)(),
+          matchWidth &&
+            (0, _react1.size)({
+              apply: ({ rects }) => {
+                setReferenceWidth(rects.reference.width);
+              },
             }),
-            move: false,
-            ...mergedInteractions.hover,
-        }),
-        (0, react_1.useFocus)(floating.context, {
-            enabled: !!mergedInteractions.focus,
-            ...mergedInteractions.focus,
-        }),
-        (0, react_1.useRole)(floating.context, { role: 'dialog', enabled: !!role }),
-        (0, react_1.useListNavigation)(floating.context, {
-            enabled: !!mergedInteractions.listNavigation,
-            ...mergedInteractions.listNavigation,
-        }),
-    ]);
-    const [referenceWidth, setReferenceWidth] = React.useState();
-    const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
+          middleware.autoPlacement && (0, _react1.autoPlacement)(),
+          middleware.inline && (0, _react1.inline)(),
+          middleware.hide && (0, _react1.hide)(),
+        ].filter(Boolean),
+      [matchWidth, middleware],
+    ),
+  });
+  const interactions = (0, _react1.useInteractions)([
+    (0, _react1.useClick)(floating.context, {
+      enabled: !!mergedInteractions.click,
+      ...mergedInteractions.click,
+    }),
+    (0, _react1.useDismiss)(floating.context, {
+      enabled: !!mergedInteractions.dismiss,
+      outsidePress: closeOnOutsideClick,
+      bubbles: tree != null,
+      ...mergedInteractions.dismiss,
+    }),
+    (0, _react1.useHover)(floating.context, {
+      enabled: !!mergedInteractions.hover,
+      delay: 100,
+      handleClose: (0, _react1.safePolygon)({
+        buffer: 1,
+        blockPointerEvents: true,
+      }),
+      move: false,
+      ...mergedInteractions.hover,
+    }),
+    (0, _react1.useFocus)(floating.context, {
+      enabled: !!mergedInteractions.focus,
+      ...mergedInteractions.focus,
+    }),
+    (0, _react1.useRole)(floating.context, {
+      role: 'dialog',
+      enabled: !!role,
+    }),
+  ]);
+  const [referenceWidth, setReferenceWidth] = _react.useState();
+  const getFloatingProps = _react.useCallback(
+    (userProps) =>
+      interactions.getFloatingProps({
         ...userProps,
         style: {
-            ...floating.floatingStyles,
-            zIndex: 9999,
-            ...(matchWidth && referenceWidth
-                ? {
-                    minInlineSize: `${referenceWidth}px`,
-                    maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
-                }
-                : {}),
-            ...userProps?.style,
+          ...floating.floatingStyles,
+          zIndex: 9999,
+          ...(matchWidth && referenceWidth
+            ? {
+                minInlineSize: `${referenceWidth}px`,
+                maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
+              }
+            : {}),
+          ...userProps?.style,
         },
-    }), [floating.floatingStyles, interactions, matchWidth, referenceWidth]);
-    return React.useMemo(() => ({
-        open,
-        onOpenChange,
-        ...interactions,
-        getFloatingProps,
-        ...floating,
-    }), [open, onOpenChange, interactions, getFloatingProps, floating]);
+      }),
+    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+  );
+  const getReferenceProps = _react.useCallback(
+    (userProps) =>
+      interactions.getReferenceProps({
+        ...userProps,
+        onClick: (0, _index.mergeEventHandlers)(userProps?.onClick, () => {
+          if (!!mergedInteractions.click && visible) {
+            onOpenChange(false);
+          }
+        }),
+      }),
+    [interactions, mergedInteractions.click, visible, onOpenChange],
+  );
+  return _react.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      getReferenceProps,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+  );
 };
-exports.usePopover = usePopover;
-/**
- * A utility component to help with positioning of floating content relative to a trigger.
- * Built on top of [`floating-ui`](https://floating-ui.com/).
- *
- * @see https://itwinui.bentley.com/docs/popover
- *
- * @example
- * <Popover content='This is a popover'>
- *   <Button>Show popover</Button>
- * </Popover>
- */
-exports.Popover = React.forwardRef((props, forwardedRef) => {
-    const { portal = true, 
-    //
-    // popover options
-    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, 
-    //
-    // extra props
-    positionReference, 
-    //
-    // dom props
-    className, children, content, applyBackground = false, ...rest } = props;
-    const popover = (0, exports.usePopover)({
-        visible,
-        placement,
-        onVisibleChange,
-        closeOnOutsideClick,
-        role: 'dialog',
-        middleware,
-    });
-    const [popoverElement, setPopoverElement] = React.useState();
-    const popoverRef = (0, index_js_1.useMergedRefs)(popover.refs.setFloating, forwardedRef, setPopoverElement);
-    const triggerId = `${(0, index_js_1.useId)()}-trigger`;
-    const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-    (0, index_js_1.useLayoutEffect)(() => {
-        if (!positionReference) {
-            return;
-        }
-        popover.refs.setPositionReference(positionReference);
-        return () => void popover.refs.setPositionReference(null);
-    }, [popover.refs, positionReference]);
-    return (React.createElement(React.Fragment, null,
-        (0, index_js_1.cloneElementWithRef)(children, (children) => ({
-            id: children.props.id || triggerId,
-            ...popover.getReferenceProps(children.props),
-            ref: popover.refs.setReference,
+const Popover = _react.forwardRef((props, forwardedRef) => {
+  const {
+    portal = true,
+    visible,
+    placement = 'bottom-start',
+    onVisibleChange,
+    closeOnOutsideClick = true,
+    middleware,
+    positionReference,
+    className,
+    children,
+    content,
+    applyBackground = false,
+    ...rest
+  } = props;
+  const popover = usePopover({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    role: 'dialog',
+    middleware,
+  });
+  const [popoverElement, setPopoverElement] = _react.useState();
+  const popoverRef = (0, _index.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  const triggerId = `${(0, _index.useId)()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+  (0, _index.useLayoutEffect)(() => {
+    if (!positionReference) {
+      return;
+    }
+    popover.refs.setPositionReference(positionReference);
+    return () => void popover.refs.setPositionReference(null);
+  }, [popover.refs, positionReference]);
+  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    children: [
+      (0, _jsxruntime.jsx)(PopoverOpenContext.Provider, {
+        value: popover.open,
+        children: (0, _index.cloneElementWithRef)(children, (children) => ({
+          id: children.props.id || triggerId,
+          ...popover.getReferenceProps(children.props),
+          ref: popover.refs.setReference,
         })),
-        popover.open ? (React.createElement(PopoverPortal, { portal: portal },
-            React.createElement(ThemeProvider_js_1.ThemeProvider, { portalContainer: popoverElement },
-                React.createElement(DisplayContents, null),
-                React.createElement(react_1.FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
-                    React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
-                            ? popover.refs.domReference.current?.id
-                            : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content))))) : null));
+      }),
+      popover.open
+        ? (0, _jsxruntime.jsx)(PopoverPortal, {
+            portal: portal,
+            children: (0, _jsxruntime.jsxs)(_ThemeProvider.ThemeProvider, {
+              portalContainer: popoverElement,
+              children: [
+                (0, _jsxruntime.jsx)(DisplayContents, {}),
+                (0, _jsxruntime.jsx)(_react1.FloatingFocusManager, {
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
+                  children: (0, _jsxruntime.jsx)(_index.Box, {
+                    className: (0, _classnames.default)(
+                      {
+                        'iui-popover-surface': applyBackground,
+                      },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                    children: content,
+                  }),
+                }),
+              ],
+            }),
+          })
+        : null,
+    ],
+  });
 });
-// ----------------------------------------------------------------------------
-const PopoverPortal = ({ children, portal = true, }) => {
-    const portalTo = (0, Portal_js_1.usePortalTo)(portal);
-    return (React.createElement(react_1.FloatingPortal, { root: portalTo },
-        React.createElement(DisplayContents, null),
-        children));
+const PopoverPortal = ({ children, portal = true }) => {
+  const portalTo = (0, _Portal.usePortalTo)(portal);
+  return (0, _jsxruntime.jsxs)(
+    _react1.FloatingPortal,
+    {
+      root: portalTo,
+      children: [(0, _jsxruntime.jsx)(DisplayContents, {}), children],
+    },
+    portalTo?.id,
+  );
 };
-// ----------------------------------------------------------------------------
-/** Applies `display: contents` to the parent div. */
-const DisplayContents = React.memo(() => {
-    return (React.createElement(index_js_1.ShadowRoot, { css: `
+const DisplayContents = _react.memo(() => {
+  return (0, _jsxruntime.jsx)(_index.ShadowRoot, {
+    css: `
         :host {
           display: contents;
         }
-      ` },
-        React.createElement("slot", null)));
+      `,
+    children: (0, _jsxruntime.jsx)('slot', {}),
+  });
 });

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -1,71 +1,73 @@
-"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.ProgressLinear = 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 index_js_1 = require("../../utils/index.js");
-const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
-/**
- * Shows progress on a linear bar
- * @example
- * // Determinate
- * <ProgressLinear value={25}/>
- * // Indeterminate
- * <ProgressLinear indeterminate={true}/>
- * // Labeled - Center
- * <ProgressLinear value={50} labels={['Centered Label']} />
- * // Labeled - Left & Right
- * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * // Status
- * <ProgressLinear
- *   status='positive'
- *   labels={[
- *    'Upload done!',
- *    <Icon key='icon'>
- *      <SvgStatusSuccess />{' '}
- *    </Icon>
- *   ]}
- * />
- * <ProgressLinear status='negative' />
- */
-exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
-    const { value, indeterminate = value === undefined, labels = [], isAnimated = false, status, className, labelGroupProps, ...rest } = props;
-    const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-linear', className), ref: forwardedRef, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
-            '--iui-progress-percentage': `${boundedValue}%`,
-        }, ...rest },
-        React.createElement(index_js_1.ShadowRoot, null,
-            value !== 100 && React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, "Loading."),
-            React.createElement("slot", null)),
-        labels.length > 0 && (React.createElement(index_js_1.Box, { as: 'div', ...labelGroupProps, className: (0, classnames_1.default)('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+Object.defineProperty(exports, 'ProgressLinear', {
+  enumerable: true,
+  get: function () {
+    return ProgressLinear;
+  },
+});
+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 _index = require('../../utils/index.js');
+const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const ProgressLinear = _react.forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    indeterminate = value === undefined,
+    labels = [],
+    isAnimated = false,
+    status,
+    className,
+    labelGroupProps,
+    ...rest
+  } = props;
+  const boundedValue = (0, _index.getBoundedValue)(value ?? 100, 0, 100);
+  return (0, _jsxruntime.jsxs)(_index.Box, {
+    className: (0, _classnames.default)(
+      'iui-progress-indicator-linear',
+      className,
+    ),
+    ref: forwardedRef,
+    'data-iui-status': status,
+    'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+    'data-iui-animated': isAnimated ? 'true' : undefined,
+    style: {
+      '--iui-progress-percentage': `${boundedValue}%`,
+    },
+    ...rest,
+    children: [
+      (0, _jsxruntime.jsxs)(_index.ShadowRoot, {
+        children: [
+          value !== 100 &&
+            (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+              children: 'Loading.',
+            }),
+          (0, _jsxruntime.jsx)('slot', {}),
+        ],
+      }),
+      labels.length > 0 &&
+        (0, _jsxruntime.jsx)(_index.Box, {
+          as: 'div',
+          ...labelGroupProps,
+          className: (0, _classnames.default)(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          ),
+          children: labels.map((label, index) =>
+            (0, _jsxruntime.jsx)(
+              'span',
+              {
+                children: label,
+              },
+              index,
+            ),
+          ),
+        }),
+    ],
+  });
 });