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

package/cjs/core/Dialog/DialogContent.js

@@ -1,10 +1,13 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 exports.DialogContent = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -13,5 +16,26 @@ const index_js_1 = require('../utils/index.js');
  *   My dialog content
  * </Dialog.Content>
  */
-exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
+exports.DialogContent = React.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const contentRef = React.useRef(null);
+  React.useEffect(() => {
+    // firefox hack for adding data-iui-flex in absence of :has
+    if (!(0, index_js_1.supportsHas)()) {
+      const dialog = contentRef.current?.closest('[role=dialog]');
+      if (dialog instanceof HTMLElement) {
+        dialog.dataset.iuiFlex = 'true';
+      }
+    }
+  }, []);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-dialog-content', className),
+      ref: (0, index_js_1.useMergedRefs)(contentRef, ref),
+      ...rest,
+    },
+    children,
+  );
+});
 exports.default = exports.DialogContent;

package/cjs/core/Dialog/DialogMain.js

@@ -122,10 +122,10 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     );
     setStyle((oldStyle) => ({
       ...oldStyle,
-      width: rect?.width,
-      height: rect?.height,
-      left: dialogRef.current?.offsetLeft,
-      top: dialogRef.current?.offsetTop,
+      inlineSize: rect?.width,
+      blockSize: rect?.height,
+      insetInlineStart: dialogRef.current?.offsetLeft,
+      insetBlockStart: dialogRef.current?.offsetTop,
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
   }, [isDraggable, isOpen]);
@@ -155,7 +155,6 @@ exports.DialogMain = React.forwardRef((props, ref) => {
       'data-iui-placement': placement,
       style: {
         transform,
-        overflow: 'unset',
         ...style,
         ...propStyle,
       },
@@ -168,7 +167,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
         onResizeStart: () => {
           if (!hasBeenResized.current) {
             hasBeenResized.current = true;
-            setResizeStyle({ maxWidth: '100%' });
+            setResizeStyle({ maxInlineSize: '100%' });
           }
         },
         onResizeEnd: setResizeStyle,

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -68,10 +68,8 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
   const { isExpanded, setExpanded, disabled, onToggle } = (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,

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

@@ -16,6 +16,10 @@ type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
+    /**
+     * Modify the native `name` attribute of the `<button>` element.
+     */
+    htmlName?: string;
 } & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 /**
  * Header button that handles slim state of the `Header` it's in.

package/cjs/core/Header/HeaderButton.js

@@ -25,6 +25,7 @@ exports.HeaderButton = React.forwardRef((props, ref) => {
   const {
     name,
     description,
+    htmlName,
     isActive = false,
     startIcon,
     menuItems,
@@ -63,6 +64,7 @@ exports.HeaderButton = React.forwardRef((props, ref) => {
     ),
     ref: ref,
     disabled: disabled,
+    name: htmlName,
     ...(!!menuItems && { menuItems }),
     ...rest,
   }; // eslint-disable-line @typescript-eslint/no-explicit-any

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,13 @@ 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',
           className:
             'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
           disabled: disabled,

package/cjs/core/Input/Input.d.ts

@@ -4,6 +4,11 @@ export type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
+    /**
+     * 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/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, className, ...rest } = props;
+  const { size, htmlSize, 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,
+    size: htmlSize,
     ref: refs,
     ...rest,
   });

package/cjs/core/ProgressIndicators/ProgressLinear.d.ts

@@ -24,6 +24,10 @@ type ProgressLinearProps = {
      * Status of progress.
      */
     status?: 'positive' | 'negative';
+    /**
+     * Pass props to ProgressLinear label group.
+     */
+    labelGroupProps?: React.ComponentProps<'div'>;
 };
 /**
  * Shows progress on a linear bar

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -32,6 +32,7 @@ exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
     isAnimated = false,
     status,
     className,
+    labelGroupProps,
     ...rest
   } = props;
   const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
@@ -54,7 +55,14 @@ exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
     labels.length > 0 &&
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-progress-indicator-linear-label' },
+        {
+          as: 'div',
+          ...labelGroupProps,
+          className: (0, classnames_1.default)(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          ),
+        },
         labels.map((label, index) =>
           React.createElement('span', { key: index }, label),
         ),

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

@@ -9,6 +9,14 @@ type RadioProps = {
      * Status of the radio.
      */
     status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Passes props to Radio label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to Radio wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
 };
 /**
  * Basic radio input component

package/cjs/core/Radio/Radio.js

@@ -20,16 +20,22 @@ const index_js_1 = require('../utils/index.js');
  * <Radio status='negative' label='Negative' />
  */
 exports.Radio = React.forwardRef((props, ref) => {
-  const { className, disabled = false, label, status, style, ...rest } = props;
+  const {
+    className,
+    disabled = false,
+    label,
+    status,
+    labelProps,
+    wrapperProps,
+    style,
+    ...rest
+  } = props;
   const inputElementRef = React.useRef(null);
   const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
   const radio = React.createElement(index_js_1.Box, {
     as: 'input',
-    className: (0, classnames_1.default)(
-      'iui-radio',
-      className && { [className]: !label },
-    ),
-    style: !label ? style : undefined,
+    className: (0, classnames_1.default)('iui-radio', className),
+    style: style,
     disabled: disabled,
     type: 'radio',
     ref: refs,
@@ -41,18 +47,25 @@ exports.Radio = React.forwardRef((props, ref) => {
         index_js_1.Box,
         {
           as: 'label',
+          ...wrapperProps,
           className: (0, classnames_1.default)(
             'iui-radio-wrapper',
             { 'iui-disabled': disabled, [`iui-${status}`]: !!status },
-            className,
+            wrapperProps?.className,
           ),
-          style: style,
         },
         radio,
         label &&
           React.createElement(
             index_js_1.Box,
-            { as: 'span', className: 'iui-radio-label' },
+            {
+              as: 'span',
+              ...labelProps,
+              className: (0, classnames_1.default)(
+                'iui-radio-label',
+                labelProps?.className,
+              ),
+            },
             label,
           ),
       );

package/cjs/core/RadioTiles/RadioTile.d.ts

@@ -13,6 +13,22 @@ type RadioTileProps = {
      * Additional description, if needed.
      */
     description?: React.ReactNode;
+    /**
+     * Passes props to tile wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'label'>;
+    /**
+     * Passes props to tile icon.
+     */
+    iconProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to tile label.
+     */
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to tile sublabel.
+     */
+    subLabelProps?: React.ComponentProps<'div'>;
 };
 /**
  * RadioTile component to be used in RadioTileGroup component

package/cjs/core/RadioTiles/RadioTile.js

@@ -15,45 +15,79 @@ const index_js_1 = require('../utils/index.js');
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
 exports.RadioTile = React.forwardRef((props, ref) => {
-  const { icon, label, description, className, style, ...rest } = props;
+  const {
+    icon,
+    label,
+    description,
+    className,
+    wrapperProps,
+    iconProps,
+    labelProps,
+    subLabelProps,
+    style,
+    ...rest
+  } = props;
   const inputElementRef = React.useRef(null);
   const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
   return React.createElement(
     index_js_1.Box,
     {
       as: 'label',
-      className: (0, classnames_1.default)('iui-radio-tile', className),
-      style: style,
+      'data-iui-disabled': props.disabled ? 'true' : undefined,
+      ...wrapperProps,
+      className: (0, classnames_1.default)(
+        'iui-radio-tile',
+        wrapperProps?.className,
+      ),
     },
     React.createElement(index_js_1.Box, {
       as: 'input',
-      className: 'iui-radio-tile-input',
-      type: 'radio',
       ref: refs,
+      className: (0, classnames_1.default)('iui-radio-tile-input', className),
+      style: style,
+      type: 'radio',
       ...rest,
     }),
-    React.createElement(
-      index_js_1.Box,
-      { className: 'iui-radio-tile-content' },
-      icon &&
-        React.createElement(
-          index_js_1.Box,
-          { as: 'span', className: 'iui-radio-tile-icon', 'aria-hidden': true },
-          icon,
-        ),
-      label &&
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-radio-tile-label' },
-          label,
-        ),
-      description &&
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-radio-tile-sublabel' },
-          description,
-        ),
-    ),
+    icon &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...iconProps,
+          className: (0, classnames_1.default)(
+            'iui-radio-tile-icon',
+            iconProps?.className,
+          ),
+        },
+        icon,
+      ),
+    label &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...labelProps,
+          className: (0, classnames_1.default)(
+            'iui-radio-tile-label',
+            labelProps?.className,
+          ),
+        },
+        label,
+      ),
+    description &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...subLabelProps,
+          className: (0, classnames_1.default)(
+            'iui-radio-tile-sublabel',
+            subLabelProps?.className,
+          ),
+        },
+        description,
+      ),
   );
 });
 exports.default = exports.RadioTile;

package/cjs/core/Select/Select.js

@@ -214,8 +214,8 @@ const Select = (props) => {
             role: 'listbox',
             className: (0, classnames_1.default)('iui-scroll', menuClassName),
             style: {
-              minWidth,
-              maxWidth: `min(${minWidth * 2}px, 90vw)`,
+              minInlineSize: minWidth,
+              maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
               ...menuStyle,
             },
             id: `${uid}-menu`,

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -48,6 +48,22 @@ type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
+    /**
+     * Passes props for SideNav wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav top.
+     */
+    topProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav bottom.
+     */
+    bottomProps?: React.ComponentProps<'div'>;
 };
 /**
  * Left side navigation menu component.

package/cjs/core/SideNavigation/SideNavigation.js

@@ -35,6 +35,10 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
     onExpanderClick,
     submenu,
     isSubmenuOpen = false,
+    wrapperProps,
+    contentProps,
+    topProps,
+    bottomProps,
     ...rest
   } = props;
   const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
@@ -55,28 +59,48 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Box,
     {
+      ...wrapperProps,
       className: (0, classnames_1.default)(
         'iui-side-navigation-wrapper',
-        className,
+        wrapperProps?.className,
       ),
       ref: forwardedRef,
-      ...rest,
     },
     React.createElement(
       index_js_1.Box,
       {
-        className: (0, classnames_1.default)('iui-side-navigation', {
-          'iui-expanded': _isExpanded,
-          'iui-collapsed': !_isExpanded,
-        }),
+        as: 'div',
+        className: (0, classnames_1.default)(
+          'iui-side-navigation',
+          {
+            'iui-expanded': _isExpanded,
+            'iui-collapsed': !_isExpanded,
+          },
+          className,
+        ),
+        ...rest,
       },
       expanderPlacement === 'top' && ExpandButton,
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-sidenav-content' },
+        {
+          as: 'div',
+          ...contentProps,
+          className: (0, classnames_1.default)(
+            'iui-sidenav-content',
+            contentProps?.className,
+          ),
+        },
         React.createElement(
           index_js_1.Box,
-          { className: 'iui-top' },
+          {
+            as: 'div',
+            ...topProps,
+            className: (0, classnames_1.default)(
+              'iui-top',
+              topProps?.className,
+            ),
+          },
           items.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(
@@ -93,7 +117,14 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
         ),
         React.createElement(
           index_js_1.Box,
-          { className: 'iui-bottom' },
+          {
+            as: 'div',
+            ...bottomProps,
+            className: (0, classnames_1.default)(
+              'iui-bottom',
+              bottomProps?.className,
+            ),
+          },
           secondaryItems?.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(

package/cjs/core/Slider/Slider.d.ts

@@ -68,6 +68,30 @@ export type SliderProps = {
      * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
      */
     railContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Allows props to be passed for slider-min
+     */
+    minProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-max
+     */
+    maxProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-rail
+     */
+    railProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for slider-track
+     */
+    trackProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for slider-tick
+     */
+    tickProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-ticks
+     */
+    ticksProps?: React.ComponentProps<'div'>;
     /**
      * Defines the allowed behavior when moving Thumbs when multiple Thumbs are
      * shown. It controls if a Thumb movement should be limited to only move in