@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/cjs/core/Overlay/Overlay.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type OverlayComponentProps = {
+    /**
+     * The sub-component elements of Overlay.
+     */
+    children?: React.ReactNode;
+    /**
+     * Placeholder for Progress Indicator in Overlay
+     */
+    content?: React.ReactNode;
+};
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <Overlay content="loading">
+ * content beneath the overlay... (text, img, etc.)
+ * </Overlay>
+ *
+ *
+ * This is an Overlay Component using subcomponents.
+ *
+ *
+ * @example
+ * <Overlay.Wrapper>
+ *  <Overlay.Overlay>
+ *    loading...
+ *  <Overlay.Overlay>
+ *  <Overlay.HiddenContent>
+ *    content beneath the overlay... (text, img, etc.)
+ *  <Overlay.HiddenContent />
+ * </Overlay.Wrapper>
+ *
+ *
+ */
+export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
+    /**
+     *
+     * The main component is a wrapper to hold the
+     * Overlay HiddenContent and Overlay Message.
+     */
+    Wrapper: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * HiddenContent houses page elements that are blurred by the
+     * Overlay.
+     */
+    HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
+    /**
+     *  Message contains the progress indicator and loading message
+     *  for the Overlay. It sits on top of the HiddenContent.
+     */
+    Overlay: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+};
+export {};

package/cjs/core/Overlay/Overlay.js

@@ -0,0 +1,96 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Overlay = 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_1 = tslib_1.__importDefault(require('react'));
+const index_js_1 = require('../utils/index.js');
+// --------------------------------------------------------------------------------
+const OverlayComponent = react_1.default.forwardRef((props, forwardedRef) => {
+  const { content, children, ...rest } = props;
+  return react_1.default.createElement(
+    OverlayWrapper,
+    { ref: forwardedRef, ...rest },
+    react_1.default.createElement(OverlayMessage, null, content),
+    react_1.default.createElement(OverlayHiddenContent, null, children),
+  );
+});
+OverlayComponent.displayName = 'Overlay';
+// --------------------------------------------------------------------------------
+const OverlayHiddenContent = react_1.default.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  useInertPolyfill();
+  return react_1.default.createElement(
+    index_js_1.Box,
+    { inert: '', ref: ref, ...rest },
+    children,
+  );
+});
+OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
+// --------------------------------------------------------------------------------
+const OverlayMessage = (0, index_js_1.polymorphic)('iui-overlay');
+OverlayMessage.displayName = 'Overlay.Overlay';
+// --------------------------------------------------------------------------------
+const OverlayWrapper = (0, index_js_1.polymorphic)('iui-overlay-wrapper');
+OverlayWrapper.displayName = 'Overlay.Wrapper';
+// --------------------------------------------------------------------------------
+/**
+ *
+ * This is an Overlay Component.
+ *
+ *
+ * @example
+ * <Overlay content="loading">
+ * content beneath the overlay... (text, img, etc.)
+ * </Overlay>
+ *
+ *
+ * This is an Overlay Component using subcomponents.
+ *
+ *
+ * @example
+ * <Overlay.Wrapper>
+ *  <Overlay.Overlay>
+ *    loading...
+ *  <Overlay.Overlay>
+ *  <Overlay.HiddenContent>
+ *    content beneath the overlay... (text, img, etc.)
+ *  <Overlay.HiddenContent />
+ * </Overlay.Wrapper>
+ *
+ *
+ */
+exports.Overlay = Object.assign(OverlayComponent, {
+  /**
+   *
+   * The main component is a wrapper to hold the
+   * Overlay HiddenContent and Overlay Message.
+   */
+  Wrapper: OverlayWrapper,
+  /**
+   * HiddenContent houses page elements that are blurred by the
+   * Overlay.
+   */
+  HiddenContent: OverlayHiddenContent,
+  /**
+   *  Message contains the progress indicator and loading message
+   *  for the Overlay. It sits on top of the HiddenContent.
+   */
+  Overlay: OverlayMessage,
+});
+const useInertPolyfill = () => {
+  const loaded = react_1.default.useRef(false);
+  const modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  react_1.default.useEffect(() => {
+    async () => {
+      if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
+        await (0, index_js_1.dynamicImport)(modulePath);
+        loaded.current = true;
+      }
+    };
+  }, []);
+};

package/cjs/core/Popover/Popover.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /**
+     * Controlled flag for whether the popover is visible.
+     */
+    visible?: boolean;
+    /**
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * If true, the popover will close when clicking outside it.
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
+};
+type PopoverInternalProps = {
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want popover to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Middleware options.
+     *
+     * @see https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+    /**
+     * By default, the popover will only open on click.
+     * `hover` and `focus` can be manually specified as triggers.
+     */
+    trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
+    role?: 'dialog' | 'menu' | 'listbox';
+};
+export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    open: boolean | undefined;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+};
+type PopoverPublicProps = {
+    content?: React.ReactNode;
+    children?: React.ReactNode;
+    applyBackground?: boolean;
+} & PortalProps & PopoverOptions;
+/**
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
+ */
+export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
+export default Popover;

package/cjs/core/Popover/Popover.js

@@ -0,0 +1,174 @@
+'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.Popover = exports.usePopover = void 0;
+const tslib_1 = require('tslib');
+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 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,
+    middleware = { flip: true, shift: true },
+    matchWidth,
+    trigger = { click: true, hover: false, focus: false },
+    role,
+  } = 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),
+      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),
+  });
+  const interactions = (0, react_1.useInteractions)([
+    (0, react_1.useClick)(floating.context, { enabled: !!trigger.click }),
+    (0, react_1.useDismiss)(floating.context, {
+      outsidePress: closeOnOutsideClick,
+    }),
+    (0, react_1.useHover)(floating.context, {
+      enabled: !!trigger.hover,
+      delay: 100,
+      handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
+    }),
+    (0, react_1.useFocus)(floating.context, { enabled: !!trigger.focus }),
+    (0, react_1.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, interactions, matchWidth, referenceWidth],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      ...interactions,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, interactions, getFloatingProps, floating],
+  );
+};
+exports.usePopover = usePopover;
+/**
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
+ */
+exports.Popover = React.forwardRef((props, forwardedRef) => {
+  const {
+    portal = true,
+    //
+    // popover options
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    matchWidth,
+    //
+    // dom props
+    className,
+    children,
+    content,
+    applyBackground,
+    ...rest
+  } = props;
+  const popover = (0, exports.usePopover)({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    matchWidth,
+    role: 'dialog',
+  });
+  const [popoverElement, setPopoverElement] = React.useState();
+  const popoverRef = (0, index_js_1.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      ref: popover.refs.setReference,
+    })),
+    popover.open
+      ? React.createElement(
+          Portal_js_1.Portal,
+          { portal: portal },
+          React.createElement(
+            ThemeProvider_js_1.ThemeProvider,
+            { portalContainer: popoverElement },
+            React.createElement(
+              react_1.FloatingFocusManager,
+              {
+                context: popover.context,
+                modal: false,
+                initialFocus: -1,
+                returnFocus: true,
+              },
+              React.createElement(
+                index_js_1.Box,
+                {
+                  className: (0, classnames_1.default)(
+                    { 'iui-popover-surface': applyBackground },
+                    className,
+                  ),
+                  ...popover.getFloatingProps(rest),
+                  ref: popoverRef,
+                },
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
+});
+exports.default = exports.Popover;

package/cjs/core/ProgressIndicators/{ProgressLinear/ProgressLinear.d.ts → ProgressLinear.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type ProgressLinearProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
-     * Progress variant. If true, value will be ignored.
-     * @default false
+     * Progress variant. If true, `value` will be ignored.
+     *
+     * Defaults to true if `value` is passed, otherwise false.
      */
     indeterminate?: boolean;
     /**
@@ -21,9 +21,13 @@ declare type ProgressLinearProps = {
      */
     isAnimated?: boolean;
     /**
-     * Status of progress. Positive status always has 100% value.
+     * Status of progress.
      */
     status?: 'positive' | 'negative';
+    /**
+     * Pass props to ProgressLinear label group.
+     */
+    labelGroupProps?: React.ComponentProps<'div'>;
 };
 /**
  * Shows progress on a linear bar

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -0,0 +1,72 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ProgressLinear = 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 = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.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%']} />
+ * Positive / Negative.
+ * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
+ * <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,
+    },
+    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),
+        ),
+      ),
+  );
+});
+exports.default = exports.ProgressLinear;

package/cjs/core/ProgressIndicators/{ProgressRadial/ProgressRadial.d.ts → ProgressRadial.d.ts}

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type ProgressRadialProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
      * Progress variant. If true, value will be ignored.
-     * @default false
+     *
+     * @default false if value is provided, true otherwise
      */
     indeterminate?: boolean;
     /**

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -0,0 +1,74 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ProgressRadial = 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 classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+/**
+ * Circular Progress Indicator
+ * @example
+ * Basic
+ * <ProgressRadial value={50} />
+ * Indeterminate
+ * <ProgressRadial indeterminate />
+ * Positive / Negative
+ * <ProgressRadial status='positive' />
+ * <ProgressRadial status='negative' />
+ * Centered Content
+ * <ProgressRadial value={63}>63</ProgressRadial>
+ * Small
+ * <ProgressRadial size={'small'} indeterminate/>
+ */
+exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    indeterminate = value === undefined,
+    status,
+    size,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  const statusMap = {
+    negative: React.createElement(index_js_1.SvgImportantSmall, {
+      'aria-hidden': true,
+    }),
+    positive: React.createElement(index_js_1.SvgCheckmarkSmall, {
+      'aria-hidden': true,
+    }),
+  };
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-progress-indicator-radial',
+        className,
+      ),
+      'data-iui-size': size,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
+      ref: forwardedRef,
+      style: {
+        ...(value !== undefined && {
+          '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(
+            value,
+            0,
+            100,
+          )}%`,
+        }),
+        ...style,
+      },
+      ...rest,
+    },
+    size !== 'x-small'
+      ? children ?? (!!status ? statusMap[status] : null)
+      : null,
+  );
+});
+exports.default = exports.ProgressRadial;

package/cjs/core/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type RadioProps = {
+type RadioProps = {
     /**
      * Label of the radio.
      */
@@ -10,10 +10,13 @@ declare type RadioProps = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Set focus on radio element.
-     * @default false
+     * Passes props to Radio label.
      */
-    setFocus?: boolean;
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to Radio wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
 };
 /**
  * Basic radio input component