@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/InformationPanel/InformationPanel.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -28,44 +27,76 @@ import '@itwin/itwinui-css/css/information-panel.css';
  * </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/InformationPanelBody.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/esm/core/InformationPanel/InformationPanelBody.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-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

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * The `InformationPanelContent` component should be used inside `InformationPanelBody`
  * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
@@ -29,8 +28,22 @@ import '@itwin/itwinui-css/css/information-panel.css';
  *   <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,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-declare type InformationPanelHeaderProps = {
+type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.
      *

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/index.js';
 import { SvgCloseSmall, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *
@@ -23,13 +22,37 @@ import '@itwin/itwinui-css/css/information-panel.css';
  *   <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.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

package/esm/core/InformationPanel/InformationPanelWrapper.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.
@@ -13,5 +12,7 @@ import '@itwin/itwinui-css/css/information-panel.css';
  *   <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,15 +1,18 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
-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

package/esm/core/Input/Input.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic input component
  * @example
@@ -14,14 +13,17 @@ import '@itwin/itwinui-css/css/input.css';
  * <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/InputGrid/index.d.ts

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

package/esm/core/{ProgressIndicators/ProgressLinear → InputGrid}/index.js

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
-declare type InputGroupProps = {
+import { StatusMessage } from '../StatusMessage/index.js';
+type InputGroupProps = {
     /**
      * Label of the group.
      */
@@ -37,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,8 +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 '@itwin/itwinui-css/css/utils.css';
+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,19 +24,62 @@ import '@itwin/itwinui-css/css/utils.css';
  * </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;

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { InputProps } from '../Input/Input.js';
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "as" | keyof import("../utils/index.js").InputFlexContainerProps> & import("../utils/index.js").InputFlexContainerProps & {
+    as?: "div" | undefined;
+}> & {
+    /**
+     * Subcomponent to include input in your InputWithDecorations
+     */
+    Input: PolymorphicForwardRefComponent<"input", InputProps>;
+    /**
+     * Subcomponent to include button in your InputWithDecorations
+     */
+    Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+        isActive?: boolean | undefined;
+        label?: React.ReactNode;
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        as?: "button" | undefined;
+    }>;
+};

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+ * 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, InputFlexContainer, useSafeContext } from '../utils/index.js';
+import { IconButton } from '../Buttons/index.js';
+const InputWithDecorationsContext = React.createContext(undefined);
+const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
+  const { children, size, isDisabled, ...rest } = props;
+  return React.createElement(
+    InputWithDecorationsContext.Provider,
+    { value: { size, isDisabled } },
+    React.createElement(
+      InputFlexContainer,
+      { isDisabled: isDisabled, size: size, ref: ref, ...rest },
+      children,
+    ),
+  );
+});
+//-------------------------------------------------------------------------------
+const InputWithDecorationsInput = React.forwardRef((props, ref) => {
+  const { id: idProp, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(Box, {
+    as: 'input',
+    ref: ref,
+    'data-iui-size': size ?? contextSize,
+    disabled: localDisabled ?? isDisabled,
+    id: idProp,
+    ...rest,
+  });
+});
+//-------------------------------------------------------------------------------
+const InputWithDecorationsButton = React.forwardRef((props, ref) => {
+  const { children, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(
+    IconButton,
+    {
+      ref: ref,
+      size: size ?? contextSize,
+      styleType: 'borderless',
+      disabled: localDisabled ?? isDisabled,
+      ...rest,
+    },
+    children,
+  );
+});
+/**
+ * Input component with various additional decorations.
+ * You can add icons, buttons and other various subcomponents to it.
+ *
+ * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ *
+ * @usage
+ * <InputWithDecorations>
+ *    <InputWithDecorations.Input />
+ *    <InputWithDecorations.Icon>
+ *      <SvgAdd />
+ *    </InputWithDecorations.Icon>
+ * </InputWithDecorations>
+ */
+export const InputWithDecorations = Object.assign(
+  InputWithDecorationsComponent,
+  {
+    /**
+     * Subcomponent to include input in your InputWithDecorations
+     */
+    Input: InputWithDecorationsInput,
+    /**
+     * Subcomponent to include button in your InputWithDecorations
+     */
+    Button: InputWithDecorationsButton,
+  },
+);

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

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