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

package/esm/core/Header/HeaderSplitButton.js

@@ -4,22 +4,69 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { DropdownMenu } from '../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, Box } from '../utils/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import {
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  Box,
+  ButtonBase,
+} from '../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current) {
-            setMenuWidth(ref.current.offsetWidth);
-        }
-    }, [children]);
-    return (React.createElement(Box, { className: cx('iui-header-breadcrumb-button-wrapper', className), ref: ref },
-        React.createElement(HeaderBasicButton, { ref: forwardedRef, disabled: disabled, ...rest }, children),
-        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement(Box, { as: 'button', type: 'button', className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+  const {
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    children,
+    disabled,
+    ...rest
+  } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) {
+      setMenuWidth(ref.current.offsetWidth);
+    }
+  }, [children]);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-header-breadcrumb-button-wrapper', className),
+      ref: ref,
+    },
+    React.createElement(
+      HeaderBasicButton,
+      { ref: forwardedRef, disabled: disabled, ...rest },
+      children,
+    ),
+    React.createElement(
+      DropdownMenu,
+      {
+        placement: menuPlacement,
+        menuItems: menuItems,
+        style: { minInlineSize: menuWidth },
+        onVisibleChange: (open) => setIsMenuOpen(open),
+      },
+      React.createElement(
+        ButtonBase,
+        {
+          'aria-label': 'More',
+          className:
+            'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
+          disabled: disabled,
+        },
+        isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            })
+          : React.createElement(SvgCaretDownSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            }),
+      ),
+    ),
+  );
 });
 export default HeaderSplitButton;

package/{cjs/core/utils/components → esm/core/Icon}/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { AnyString } from '../types.js';
-import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type IconProps = {
+import type { AnyString } from '../utils/types.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
+export type IconProps = {
     /**
      * Size of the svg.
      *  - 'medium': works well with most text
@@ -24,6 +24,11 @@ export declare type IconProps = {
      * @default 'default'
      */
     fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
+    /**
+     * Option to add padding to the icon.
+     * @default false
+     */
+    padded?: boolean;
 } & React.ComponentPropsWithoutRef<'span'>;
 /**
  * A utility component to provide size and fill to svgs.

package/esm/core/{utils/components → Icon}/Icon.js

@@ -4,18 +4,18 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 const getSizeValue = (size) => {
-    switch (size) {
-        case 'small':
-            return 's';
-        case 'medium':
-            return 'm';
-        case 'large':
-            return 'l';
-        default:
-            return size;
-    }
+  switch (size) {
+    case 'small':
+      return 's';
+    case 'medium':
+      return 'm';
+    case 'large':
+      return 'l';
+    default:
+      return size;
+  }
 };
 /**
  * A utility component to provide size and fill to svgs.
@@ -32,7 +32,21 @@ const getSizeValue = (size) => {
  * </Icon>
  */
 export const Icon = React.forwardRef((props, ref) => {
-    const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+  const {
+    size = 'medium',
+    fill = 'default',
+    className,
+    padded = false,
+    ...rest
+  } = props;
+  return React.createElement(Box, {
+    as: 'span',
+    className: cx('iui-svg-icon', className),
+    'data-iui-icon-size': getSizeValue(size),
+    'data-iui-icon-color': fill,
+    'data-iui-padded': padded ? 'true' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 export default Icon;

package/esm/core/InformationPanel/InformationPanel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type InformationPanelProps = {
+type InformationPanelProps = {
     /**
      * Is the panel open?
      * @default false

package/esm/core/InformationPanel/InformationPanel.js

@@ -27,44 +27,76 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * </InformationPanelWrapper>
  */
 export const InformationPanel = React.forwardRef((props, ref) => {
-    const { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
-    const infoPanelRef = React.useRef(null);
-    const refs = useMergedRefs(ref, infoPanelRef);
-    const startResize = (e) => {
-        if (!infoPanelRef.current) {
-            return;
-        }
-        if (e.button != undefined && e.button !== 0) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
-        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => {
-            var _a;
-            return (_a = infoPanelRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.removeEventListener('pointermove', onResize);
-        }, { once: true });
-    };
-    const onResize = React.useCallback((e) => {
-        e.preventDefault();
-        if (!infoPanelRef.current) {
-            return;
-        }
-        const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
-        if (orientation === 'vertical') {
-            infoPanelRef.current.style.width = `${right - e.clientX}px`;
-        }
-        else {
-            infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
-        }
-    }, [orientation]);
-    return (React.createElement(Box, { className: cx('iui-information-panel', {
-            'iui-right': orientation === 'vertical',
-            'iui-bottom': orientation === 'horizontal',
-            'iui-visible': isOpen,
-        }, className), ref: refs, ...rest },
-        resizable && (React.createElement(Box, { className: 'iui-resizer', onPointerDown: startResize },
-            React.createElement(Box, { className: 'iui-resizer-bar' }))),
-        children));
+  const {
+    className,
+    isOpen = false,
+    orientation = 'vertical',
+    resizable = true,
+    children,
+    ...rest
+  } = props;
+  const infoPanelRef = React.useRef(null);
+  const refs = useMergedRefs(ref, infoPanelRef);
+  const startResize = (e) => {
+    if (!infoPanelRef.current) {
+      return;
+    }
+    if (e.button != undefined && e.button !== 0) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    infoPanelRef.current.ownerDocument.addEventListener(
+      'pointermove',
+      onResize,
+    );
+    infoPanelRef.current.ownerDocument.addEventListener(
+      'pointerup',
+      () =>
+        infoPanelRef.current?.ownerDocument.removeEventListener(
+          'pointermove',
+          onResize,
+        ),
+      { once: true },
+    );
+  };
+  const onResize = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!infoPanelRef.current) {
+        return;
+      }
+      const { right, bottom } = infoPanelRef.current.getBoundingClientRect();
+      if (orientation === 'vertical') {
+        infoPanelRef.current.style.width = `${right - e.clientX}px`;
+      } else {
+        infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
+      }
+    },
+    [orientation],
+  );
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-information-panel',
+        {
+          'iui-right': orientation === 'vertical',
+          'iui-bottom': orientation === 'horizontal',
+          'iui-visible': isOpen,
+        },
+        className,
+      ),
+      ref: refs,
+      ...rest,
+    },
+    resizable &&
+      React.createElement(
+        Box,
+        { className: 'iui-resizer', onPointerDown: startResize },
+        React.createElement(Box, { className: 'iui-resizer-bar' }),
+      ),
+    children,
+  );
 });
 export default InformationPanel;

package/esm/core/InformationPanel/InformationPanelContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type InformationPanelContentProps = {
+type InformationPanelContentProps = {
     /**
      * If set to 'inline', the label/input pairs will be shown on the same line.
      * The component handles the spacing and alignment automatically.

package/esm/core/InformationPanel/InformationPanelContent.js

@@ -28,8 +28,22 @@ import { Box } from '../utils/index.js';
  *   <Input id='path-input' value='/Shared/Music/' />
  * </InformationPanelContent>
  */
-export const InformationPanelContent = React.forwardRef((props, forwardedRef) => {
+export const InformationPanelContent = React.forwardRef(
+  (props, forwardedRef) => {
     const { className, displayStyle = 'default', children, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className), ref: forwardedRef, ...rest }, children));
-});
+    return React.createElement(
+      Box,
+      {
+        className: cx(
+          'iui-information-body-content',
+          { 'iui-inline': displayStyle === 'inline' },
+          className,
+        ),
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    );
+  },
+);
 export default InformationPanelContent;

package/esm/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type InformationPanelHeaderProps = {
+type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.
      *

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { SvgCloseSmall, Box } from '../utils/index.js';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
@@ -22,13 +22,37 @@ import { SvgCloseSmall, Box } from '../utils/index.js';
  *   <Text variant='subheading'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
-export const InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
+export const InformationPanelHeader = React.forwardRef(
+  (props, forwardedRef) => {
     const { children, onClose, actions, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-information-header', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'span', className: 'iui-information-header-label' }, children),
-        React.createElement(Box, { className: 'iui-information-header-actions' },
-            actions,
-            onClose && (React.createElement(IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                React.createElement(SvgCloseSmall, { "aria-hidden": true }))))));
-});
+    return React.createElement(
+      Box,
+      {
+        className: cx('iui-information-header', className),
+        ref: forwardedRef,
+        ...rest,
+      },
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-information-header-label' },
+        children,
+      ),
+      React.createElement(
+        Box,
+        { className: 'iui-information-header-actions' },
+        actions,
+        onClose &&
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              onClick: onClose,
+              'aria-label': 'Close',
+            },
+            React.createElement(SvgCloseSmall, { 'aria-hidden': true }),
+          ),
+      ),
+    );
+  },
+);
 export default InformationPanelHeader;

package/esm/core/InformationPanel/InformationPanelWrapper.js

@@ -12,5 +12,7 @@ import { polymorphic } from '../utils/index.js';
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-export const InformationPanelWrapper = polymorphic.div('iui-information-panel-wrapper');
+export const InformationPanelWrapper = polymorphic.div(
+  'iui-information-panel-wrapper',
+);
 export default InformationPanelWrapper;

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

@@ -1,19 +1,22 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type InputProps = {
-    /**
-     * Set focus on input element.
-     * @default false
-     */
-    setFocus?: boolean;
+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.
+     */
+    htmlSize?: number;
 };
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */

package/esm/core/Input/Input.js

@@ -8,19 +8,21 @@ import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */
 export const Input = React.forwardRef((props, ref) => {
-    const { setFocus = false, size, className, ...rest } = props;
-    const inputRef = React.useRef(null);
-    const refs = useMergedRefs(inputRef, ref);
-    React.useEffect(() => {
-        if (inputRef.current && setFocus) {
-            inputRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(Box, { as: 'input', className: cx('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
+  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,
+  });
 });
 export default Input;

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/InputGroup/InputGroup.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type InputGroupProps = {
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+type InputGroupProps = {
     /**
      * Label of the group.
      */
@@ -36,6 +37,18 @@ declare 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/InputGrid.js';
+import { Label } from '../Label/Label.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -20,19 +24,62 @@ import { StatusIconMap, InputContainer, Box } from '../utils/index.js';
  * </InputGroup>
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
-    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, ...rest } = props;
-    const icon = () => {
-        if (svgIcon) {
-            return React.cloneElement(svgIcon, { 'aria-hidden': true });
-        }
-        if (status && message) {
-            return React.cloneElement(StatusIconMap[status](), {
-                'aria-hidden': true,
-            });
-        }
-        return undefined;
-    };
-    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: 'iui-input-group' }, children)));
+  const {
+    className,
+    children,
+    disabled = false,
+    displayStyle = 'default',
+    label,
+    message,
+    status,
+    svgIcon,
+    required = false,
+    labelProps,
+    messageProps,
+    innerProps,
+    ...rest
+  } = props;
+  const icon = () => {
+    if (svgIcon) {
+      return React.cloneElement(svgIcon, { 'aria-hidden': true });
+    }
+    if (status && message) {
+      return React.cloneElement(StatusIconMap[status](), {
+        'aria-hidden': true,
+      });
+    }
+    return undefined;
+  };
+  return React.createElement(
+    InputGrid,
+    {
+      ref: forwardedRef,
+      as: 'div',
+      labelPlacement: displayStyle,
+      className: cx('iui-input-group-wrapper', className),
+      ...rest,
+    },
+    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;