@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.9

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
+import { Popover } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
      * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
      */
-    menuItems: (close: () => void) => JSX.Element[] | JSX.Element[] | JSX.Element;
+    menuItems: ((close: () => void) => JSX.Element[]) | JSX.Element[] | JSX.Element;
     /**
      * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
      * @default 'menu'
@@ -15,10 +16,10 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
+} & Pick<React.ComponentProps<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -35,5 +36,5 @@ export type DropdownMenuProps = {
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export declare const DropdownMenu: (props: DropdownMenuProps) => React.JSX.Element;
+export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
 export default DropdownMenu;

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,11 +3,20 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, mergeRefs } from '../utils/index.js';
+import {
+  Popover,
+  useMergedRefs,
+  usePopover,
+  Portal,
+  cloneElementWithRef,
+  useControlledState,
+  mergeRefs,
+  mergeEventHandlers,
+} from '../utils/index.js';
 import { Menu } from '../Menu/index.js';
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -24,74 +33,73 @@ import { Menu } from '../Menu/index.js';
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export const DropdownMenu = (props) => {
+export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     children,
-    className,
-    style,
     role = 'menu',
-    visible,
+    visible: visibleProp,
     placement = 'bottom-start',
-    onShow,
-    onHide,
-    trigger,
-    id,
+    matchWidth = false,
+    onVisibleChange,
+    portal = true,
     ...rest
   } = props;
-  const [isVisible, setIsVisible] = React.useState(visible ?? false);
-  React.useEffect(() => {
-    setIsVisible(visible ?? false);
-  }, [visible]);
-  const open = React.useCallback(() => setIsVisible(true), []);
-  const close = React.useCallback(() => setIsVisible(false), []);
+  const [visible, setVisible] = useControlledState(
+    false,
+    visibleProp,
+    onVisibleChange,
+  );
+  const triggerRef = React.useRef(null);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  }, [setVisible]);
   const menuContent = React.useMemo(() => {
     if (typeof menuItems === 'function') {
       return menuItems(close);
     }
     return menuItems;
   }, [menuItems, close]);
-  const targetRef = React.useRef(null);
-  const onShowHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(true);
-      onShow?.(instance);
-    },
-    [onShow],
-  );
-  const onHideHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(false);
-      targetRef.current?.focus();
-      onHide?.(instance);
-    },
-    [onHide],
-  );
+  const popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
   return React.createElement(
-    Popover,
-    {
-      content: React.createElement(
-        Menu,
-        { className: className, style: style, role: role, id: id },
-        menuContent,
-      ),
-      visible: trigger === undefined ? isVisible : undefined,
-      onClickOutside: close,
-      placement: placement,
-      onShow: onShowHandler,
-      onHide: onHideHandler,
-      trigger: visible === undefined ? trigger : undefined,
-      ...rest,
-    },
-    React.isValidElement(children)
-      ? React.cloneElement(children, {
-          ref: mergeRefs(targetRef, props.children.ref),
-          onClick: (args) => {
-            trigger === undefined && (isVisible ? close() : open());
-            children.props.onClick?.(args);
+    React.Fragment,
+    null,
+    cloneElementWithRef(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      'aria-expanded': popover.open,
+      ref: mergeRefs(triggerRef, popover.refs.setReference),
+    })),
+    popover.open &&
+      React.createElement(
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+                if (e.defaultPrevented) {
+                  return;
+                }
+                if (e.key === 'Tab') {
+                  close();
+                }
+              }),
+            }),
+            ref: popoverRef,
           },
-        })
-      : React.createElement(React.Fragment, null),
+          menuContent,
+        ),
+      ),
   );
-};
+});
 export default DropdownMenu;

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -36,9 +36,11 @@ type ExpandableBlockOwnProps = {
      */
     disabled?: boolean;
 };
-type ExpandableBlockHeaderOwnProps = {
+type ExpandableBlockTriggerOwnProps = {
     label?: React.ReactNode;
+    caption?: React.ReactNode;
     expandIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 };
 type ExpandableBlockContentOwnProps = {
     innerProps?: React.ComponentPropsWithoutRef<'div'>;
@@ -46,29 +48,32 @@ type ExpandableBlockContentOwnProps = {
 /**
  * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example
- *  <ExpandableBlock>
- *    <ExpandableBlock.Header>
+ *  <ExpandableBlock.Wrapper>
+ *    <ExpandableBlock.Trigger>
  *      <ExpandableBlock.ExpandIcon/>
  *      <ExpandableBlock.LabelArea>
  *        <ExpandableBlock.Title/>
  *        <ExpandableBlock.Caption/>
  *      </ExpandableBlock.LabelArea>
  *      <ExpandableBlock.EndIcon/>
- *    </ExpandableBlock.Header>
+ *    </ExpandableBlock.Trigger>
  *    <ExpandableBlock.Content/>
- *  </ExpandableBlock>
+ *  </ExpandableBlock.Wrapper>
  */
-export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps> & {
+export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps & {
+    title?: React.ReactNode;
+} & Pick<ExpandableBlockTriggerOwnProps, "caption" | "endIcon">> & {
+    Wrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
     /**
      * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
      * @example
-     * <ExpandableBlock.Header>
+     * <ExpandableBlock.Trigger>
      *    <ExpandableBlock.ExpandIcon/>
      *    <ExpandableBlock.LabelArea/>
      *    <ExpandableBlock.EndIcon/>
-     * </ExpandableBlock.Header>
+     * </ExpandableBlock.Trigger>
      */
-    Header: PolymorphicForwardRefComponent<"button", ExpandableBlockHeaderOwnProps>;
+    Trigger: PolymorphicForwardRefComponent<"button", ExpandableBlockTriggerOwnProps>;
     /**
      * The expanding icon on the left of header
      */
@@ -94,24 +99,25 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
      * Svg icon displayed at the end of the main text.
      * Will override status icon if specified. Used inside `Header` subcomponent.
      * @example
-     * <ExpandableBlock.Header>
+     * <ExpandableBlock.Trigger>
      *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-     * <ExpandableBlock.Header/>
+     * <ExpandableBlock.Trigger/>
      */
     EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }, "ref">>;
     /**
      * Content shown in the block's body when fully expanded.
      * @example
-     * <ExpandableBlock>
+     * <ExpandableBlock.Wrapper>
      *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-     * </ExpandableBlock>
+     * </ExpandableBlock.Wrapper>
      */
     Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
 };

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -17,6 +17,21 @@ import {
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
+  const { children, title, caption, endIcon, ...rest } = props;
+  return React.createElement(
+    ExpandableBlock.Wrapper,
+    { ...rest, ref: forwardedRef },
+    React.createElement(ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(ExpandableBlock.Content, null, children),
+  );
+});
+ExpandableBlockComponent.displayName = 'ExpandableBlock';
+// ----------------------------------------------------------------------------
+const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -60,19 +75,20 @@ const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ExpandableBlockComponent.displayName = 'ExpandableBlock';
-const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
+ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
+const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     children,
     label,
+    caption,
     onClick: onClickProp,
     expandIcon,
+    endIcon,
     ...rest
   } = props;
-  const { isExpanded, setExpanded, disabled, onToggle } = useSafeContext(
-    ExpandableBlockContext,
-  );
+  const { isExpanded, setExpanded, disabled, onToggle, status } =
+    useSafeContext(ExpandableBlockContext);
   return React.createElement(
     ButtonBase,
     {
@@ -98,11 +114,16 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
           ExpandableBlock.LabelArea,
           null,
           React.createElement(ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(ExpandableBlock.Caption, null, caption),
         ),
+        endIcon || status
+          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
+          : null,
       ),
   );
 });
-ExpandableBlockHeader.displayName = 'ExpandableBlock.Header';
+ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.ExpandIcon component
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
@@ -170,29 +191,30 @@ ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 /**
  * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example
- *  <ExpandableBlock>
- *    <ExpandableBlock.Header>
+ *  <ExpandableBlock.Wrapper>
+ *    <ExpandableBlock.Trigger>
  *      <ExpandableBlock.ExpandIcon/>
  *      <ExpandableBlock.LabelArea>
  *        <ExpandableBlock.Title/>
  *        <ExpandableBlock.Caption/>
  *      </ExpandableBlock.LabelArea>
  *      <ExpandableBlock.EndIcon/>
- *    </ExpandableBlock.Header>
+ *    </ExpandableBlock.Trigger>
  *    <ExpandableBlock.Content/>
- *  </ExpandableBlock>
+ *  </ExpandableBlock.Wrapper>
  */
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
+  Wrapper: ExpandableBlockWrapper,
   /**
    * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
    * @example
-   * <ExpandableBlock.Header>
+   * <ExpandableBlock.Trigger>
    *    <ExpandableBlock.ExpandIcon/>
    *    <ExpandableBlock.LabelArea/>
    *    <ExpandableBlock.EndIcon/>
-   * </ExpandableBlock.Header>
+   * </ExpandableBlock.Trigger>
    */
-  Header: ExpandableBlockHeader,
+  Trigger: ExpandableBlockTrigger,
   /**
    * The expanding icon on the left of header
    */
@@ -218,17 +240,17 @@ export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
    * Svg icon displayed at the end of the main text.
    * Will override status icon if specified. Used inside `Header` subcomponent.
    * @example
-   * <ExpandableBlock.Header>
+   * <ExpandableBlock.Trigger>
    *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-   * <ExpandableBlock.Header/>
+   * <ExpandableBlock.Trigger/>
    */
   EndIcon: ExpandableBlockEndIcon,
   /**
    * Content shown in the block's body when fully expanded.
    * @example
-   * <ExpandableBlock>
+   * <ExpandableBlock.Wrapper>
    *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-   * </ExpandableBlock>
+   * </ExpandableBlock.Wrapper>
    */
   Content: ExpandableBlockContent,
 });

package/esm/core/Header/HeaderDropdownButton.js

@@ -27,8 +27,7 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
     {
       menuItems: menuItems,
       style: { minInlineSize: menuWidth },
-      onShow: () => setIsMenuOpen(true),
-      onHide: () => setIsMenuOpen(false),
+      onVisibleChange: (open) => setIsMenuOpen(open),
     },
     React.createElement(
       HeaderBasicButton,

package/esm/core/Header/HeaderSplitButton.js

@@ -46,12 +46,12 @@ export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
         placement: menuPlacement,
         menuItems: menuItems,
         style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        onVisibleChange: (open) => setIsMenuOpen(open),
       },
       React.createElement(
         ButtonBase,
         {
+          'aria-label': 'More',
           className:
             'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
           disabled: disabled,

package/esm/core/Input/Input.d.ts

@@ -4,6 +4,10 @@ export type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
+    /**
+     * Status of input.
+     */
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Modify the native `size` attribute of the `<input>` element.
      * The `width` or `inline-size` property must be unset in order to use this prop.

package/esm/core/Input/Input.js

@@ -13,13 +13,14 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <Input size='small' />
  */
 export const Input = React.forwardRef((props, ref) => {
-  const { size, htmlSize, className, ...rest } = props;
+  const { size, htmlSize, status, className, ...rest } = props;
   const inputRef = React.useRef(null);
   const refs = useMergedRefs(inputRef, ref);
   return React.createElement(Box, {
     as: 'input',
     className: cx('iui-input', className),
     'data-iui-size': size,
+    'data-iui-status': status,
     size: htmlSize,
     ref: refs,
     ...rest,

package/esm/core/InputGrid/InputGrid.d.ts

@@ -0,0 +1,25 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type InputGridOwnProps = {
+    /**
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
+     * @default 'default'
+     */
+    labelPlacement?: 'default' | 'inline';
+};
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+export declare const InputGrid: PolymorphicForwardRefComponent<"div", InputGridOwnProps>;
+export default InputGrid;

package/esm/core/InputGrid/InputGrid.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Box } from '../utils/index.js';
+import cx from 'classnames';
+//-------------------------------------------------------------------------------
+/**
+ * InputGrid component is used to display inputs (input, textarea, select)
+ * with label and/or status message
+ *
+ * @usage
+ *
+ * <InputGrid>
+ *   <Label htmlFor='input-1'>This is label</Label>
+ *   <Input id='input-1'/>
+ *   <StatusMessage>This is message</StatusMessage>
+ * </InputGrid>
+ */
+export const InputGrid = React.forwardRef((props, ref) => {
+  const { children, className, labelPlacement = undefined, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+//-------------------------------------------------------------------------------
+export default InputGrid;

package/esm/core/InputGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { InputGrid } from './InputGrid.js';
+declare const _default: "./InputGrid";
+export default _default;

package/esm/core/InputGrid/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { InputGrid } from './InputGrid.js';
+export default './InputGrid';

package/esm/core/InputGroup/InputGroup.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { StatusMessage } from '../StatusMessage/index.js';
 type InputGroupProps = {
     /**
      * Label of the group.
@@ -36,6 +37,18 @@ type InputGroupProps = {
      * Child inputs inside group.
      */
     children: React.ReactNode;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes properties for message.
+     */
+    messageProps?: Pick<React.ComponentProps<typeof StatusMessage>, 'iconProps' | 'contentProps'>;
+    /**
+     * Passes properties for inner input group element.
+     */
+    innerProps?: React.ComponentProps<'div'>;
 };
 /**
  * Group Checkbox/Radio components together

package/esm/core/InputGroup/InputGroup.js

@@ -3,7 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
+import cx from 'classnames';
+import { StatusIconMap, Box } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/index.js';
+import { Label } from '../Label/index.js';
+import { StatusMessage } from '../StatusMessage/index.js';
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -21,6 +25,7 @@ import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
   const {
+    className,
     children,
     disabled = false,
     displayStyle = 'default',
@@ -29,6 +34,9 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     status,
     svgIcon,
     required = false,
+    labelProps,
+    messageProps,
+    innerProps,
     ...rest
   } = props;
   const icon = () => {
@@ -43,19 +51,35 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     return undefined;
   };
   return React.createElement(
-    InputContainer,
+    InputGrid,
     {
-      label: label,
-      disabled: disabled,
-      required: required,
-      status: status,
-      message: message,
-      icon: icon(),
-      isLabelInline: displayStyle === 'inline',
       ref: forwardedRef,
+      as: 'div',
+      labelPlacement: displayStyle,
+      className: cx('iui-input-group-wrapper', className),
       ...rest,
     },
-    React.createElement(Box, { className: 'iui-input-group' }, children),
+    label &&
+      React.createElement(
+        Label,
+        { as: 'label', required: required, disabled: disabled, ...labelProps },
+        label,
+      ),
+    React.createElement(
+      Box,
+      {
+        as: 'div',
+        ...innerProps,
+        className: cx('iui-input-group', innerProps?.className),
+      },
+      children,
+    ),
+    (message || status || svgIcon) &&
+      React.createElement(
+        StatusMessage,
+        { startIcon: icon(), status: status, ...messageProps },
+        displayStyle !== 'inline' && message,
+      ),
   );
 });
 export default InputGroup;