@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -12,6 +12,21 @@ const index_js_1 = require('../utils/index.js');
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
+  const { children, title, caption, endIcon, ...rest } = props;
+  return React.createElement(
+    exports.ExpandableBlock.Wrapper,
+    { ...rest, ref: forwardedRef },
+    React.createElement(exports.ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(exports.ExpandableBlock.Content, null, children),
+  );
+});
+ExpandableBlockComponent.displayName = 'ExpandableBlock';
+// ----------------------------------------------------------------------------
+const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -55,23 +70,23 @@ 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 } = (0,
+  const { isExpanded, setExpanded, disabled, onToggle, status } = (0,
   index_js_1.useSafeContext)(ExpandableBlockContext);
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
-      type: 'button',
       className: (0, classnames_1.default)('iui-expandable-header', className),
       'aria-expanded': isExpanded,
       'aria-disabled': disabled,
@@ -95,11 +110,16 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
           exports.ExpandableBlock.LabelArea,
           null,
           React.createElement(exports.ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(exports.ExpandableBlock.Caption, null, caption),
         ),
+        endIcon || status
+          ? React.createElement(exports.ExpandableBlock.EndIcon, null, endIcon)
+          : null,
       ),
   );
 });
-ExpandableBlockHeader.displayName = 'ExpandableBlock.Header';
+ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.ExpandIcon component
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
@@ -178,29 +198,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>
  */
 exports.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
    */
@@ -226,17 +247,17 @@ exports.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/cjs/core/FileUpload/FileUpload.d.ts

@@ -15,6 +15,10 @@ type FileUploadProps = {
      * Either pass `FileUploadCard` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
+    /**
+     *  Allows for custom prop to be passed for content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
 };
 /**
  * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.

package/cjs/core/FileUpload/FileUpload.js

@@ -17,7 +17,14 @@ const index_js_1 = require('../utils/index.js');
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 exports.FileUpload = React.forwardRef((props, ref) => {
-  const { dragContent, children, onFileDropped, className, ...rest } = props;
+  const {
+    dragContent,
+    children,
+    onFileDropped,
+    className,
+    contentProps,
+    ...rest
+  } = props;
   const [isDragActive, setIsDragActive] = React.useState(false);
   const fileUploadRef = React.useRef(null);
   const refs = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
@@ -68,13 +75,27 @@ exports.FileUpload = React.forwardRef((props, ref) => {
       ? children
       : React.createElement(
           index_js_1.Box,
-          { className: 'iui-content' },
+          {
+            as: 'div',
+            ...contentProps,
+            className: (0, classnames_1.default)(
+              'iui-content',
+              contentProps?.className,
+            ),
+          },
           children,
         ),
     dragContent &&
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-content' },
+        {
+          as: 'div',
+          ...contentProps,
+          className: (0, classnames_1.default)(
+            'iui-content',
+            contentProps?.className,
+          ),
+        },
         dragContent,
       ),
   );

package/cjs/core/Header/HeaderBasicButton.js

@@ -10,31 +10,18 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 exports.HeaderBasicButton = React.forwardRef((props, ref) => {
-  const {
-    onClick,
-    className,
-    children,
-    style,
-    startIcon,
-    endIcon,
-    styleType,
-    size,
-    ...rest
-  } = props;
+  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
+    props;
   styleType; // To omit and prevent eslint error.
   size; // To omit and prevent eslint error.
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
       className: (0, classnames_1.default)(
         'iui-header-breadcrumb-button',
         className,
       ),
-      onClick: onClick,
       ref: ref,
-      type: 'button',
-      style: style,
       ...rest,
     },
     startIcon,

package/cjs/core/Header/HeaderDropdownButton.js

@@ -26,7 +26,7 @@ exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
     index_js_1.DropdownMenu,
     {
       menuItems: menuItems,
-      style: { minWidth: menuWidth },
+      style: { minInlineSize: menuWidth },
       onShow: () => setIsMenuOpen(true),
       onHide: () => setIsMenuOpen(false),
     },

package/cjs/core/Header/HeaderSplitButton.js

@@ -47,15 +47,14 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
       {
         placement: menuPlacement,
         menuItems: menuItems,
-        style: { minWidth: menuWidth },
+        style: { minInlineSize: menuWidth },
         onShow: React.useCallback(() => setIsMenuOpen(true), []),
         onHide: React.useCallback(() => setIsMenuOpen(false), []),
       },
       React.createElement(
-        index_js_2.Box,
+        index_js_2.ButtonBase,
         {
-          as: 'button',
-          type: 'button',
+          'aria-label': 'More',
           className:
             'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
           disabled: disabled,

package/cjs/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/cjs/core/Input/Input.js

@@ -17,13 +17,14 @@ const index_js_1 = require('../utils/index.js');
  * <Input size='small' />
  */
 exports.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 = (0, index_js_1.useMergedRefs)(inputRef, ref);
   return React.createElement(index_js_1.Box, {
     as: 'input',
     className: (0, classnames_1.default)('iui-input', className),
     'data-iui-size': size,
+    'data-iui-status': status,
     size: htmlSize,
     ref: refs,
     ...rest,

package/cjs/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/cjs/core/InputGrid/InputGrid.js

@@ -0,0 +1,39 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InputGrid = 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 index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('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>
+ */
+exports.InputGrid = React.forwardRef((props, ref) => {
+  const { children, className, labelPlacement = undefined, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-input-grid', className),
+      'data-iui-label-placement': labelPlacement,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+//-------------------------------------------------------------------------------
+exports.default = exports.InputGrid;

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

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

package/cjs/core/InputGrid/index.js

@@ -0,0 +1,15 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InputGrid = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var InputGrid_js_1 = require('./InputGrid.js');
+Object.defineProperty(exports, 'InputGrid', {
+  enumerable: true,
+  get: function () {
+    return InputGrid_js_1.InputGrid;
+  },
+});
+exports.default = './InputGrid';

package/cjs/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/cjs/core/InputGroup/InputGroup.js

@@ -7,7 +7,11 @@ const tslib_1 = require('tslib');
  * 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');
+const index_js_2 = require('../InputGrid/index.js');
+const index_js_3 = require('../Label/index.js');
+const index_js_4 = require('../StatusMessage/index.js');
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -25,6 +29,7 @@ const index_js_1 = require('../utils/index.js');
  */
 exports.InputGroup = React.forwardRef((props, forwardedRef) => {
   const {
+    className,
     children,
     disabled = false,
     displayStyle = 'default',
@@ -33,6 +38,9 @@ exports.InputGroup = React.forwardRef((props, forwardedRef) => {
     status,
     svgIcon,
     required = false,
+    labelProps,
+    messageProps,
+    innerProps,
     ...rest
   } = props;
   const icon = () => {
@@ -47,23 +55,41 @@ exports.InputGroup = React.forwardRef((props, forwardedRef) => {
     return undefined;
   };
   return React.createElement(
-    index_js_1.InputContainer,
+    index_js_2.InputGrid,
     {
-      label: label,
-      disabled: disabled,
-      required: required,
-      status: status,
-      message: message,
-      icon: icon(),
-      isLabelInline: displayStyle === 'inline',
       ref: forwardedRef,
+      as: 'div',
+      labelPlacement: displayStyle,
+      className: (0, classnames_1.default)(
+        'iui-input-group-wrapper',
+        className,
+      ),
       ...rest,
     },
+    label &&
+      React.createElement(
+        index_js_3.Label,
+        { as: 'label', required: required, disabled: disabled, ...labelProps },
+        label,
+      ),
     React.createElement(
       index_js_1.Box,
-      { className: 'iui-input-group' },
+      {
+        as: 'div',
+        ...innerProps,
+        className: (0, classnames_1.default)(
+          'iui-input-group',
+          innerProps?.className,
+        ),
+      },
       children,
     ),
+    (message || status || svgIcon) &&
+      React.createElement(
+        index_js_4.StatusMessage,
+        { startIcon: icon(), status: status, ...messageProps },
+        displayStyle !== 'inline' && message,
+      ),
   );
 });
 exports.default = exports.InputGroup;

package/cjs/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/cjs/core/InputWithDecorations/InputWithDecorations.js

@@ -0,0 +1,81 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InputWithDecorations = 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 index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../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(
+      index_js_1.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 } = (0, index_js_1.useSafeContext)(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(index_js_1.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 } = (0, index_js_1.useSafeContext)(
+    InputWithDecorationsContext,
+  );
+  return React.createElement(
+    index_js_2.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>
+ */
+exports.InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
+  /**
+   * Subcomponent to include input in your InputWithDecorations
+   */
+  Input: InputWithDecorationsInput,
+  /**
+   * Subcomponent to include button in your InputWithDecorations
+   */
+  Button: InputWithDecorationsButton,
+});

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

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

package/cjs/core/InputWithDecorations/index.js

@@ -0,0 +1,15 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.InputWithDecorations = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var InputWithDecorations_js_1 = require('./InputWithDecorations.js');
+Object.defineProperty(exports, 'InputWithDecorations', {
+  enumerable: true,
+  get: function () {
+    return InputWithDecorations_js_1.InputWithDecorations;
+  },
+});
+exports.default = './Input';

package/cjs/core/Label/Label.d.ts

@@ -12,6 +12,11 @@ type LabelOwnProps = {
      * This adds an asterisk next to the label text.
      */
     required?: boolean;
+    /**
+     * Adds disabled styling to a label.
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * A standalone label to be used with input components (using `htmlFor`).

package/cjs/core/Label/Label.js

@@ -20,6 +20,7 @@ exports.Label = React.forwardRef((props, forwardedRef) => {
   const {
     displayStyle = 'block',
     required,
+    disabled,
     className,
     children,
     ...rest
@@ -36,6 +37,7 @@ exports.Label = React.forwardRef((props, forwardedRef) => {
         },
         className,
       ),
+      'data-iui-disabled': disabled ? true : undefined,
       ref: forwardedRef,
       ...rest,
     },