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

package/cjs/core/ComboBox/ComboBox.js

@@ -71,7 +71,6 @@ const ComboBox = (props) => {
   // Refs get set in subcomponents
   const inputRef = React.useRef(null);
   const menuRef = React.useRef(null);
-  const toggleButtonRef = React.useRef(null);
   const onChangeProp = (0, index_js_3.useLatestRef)(onChange);
   const optionsRef = (0, index_js_3.useLatestRef)(options);
   // Record to store all extra information (e.g. original indexes), where the key is the id of the option
@@ -368,7 +367,7 @@ const ComboBox = (props) => {
   );
   return React.createElement(
     helpers_js_1.ComboBoxRefsContext.Provider,
-    { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
+    { value: { inputRef, menuRef, optionsExtraInfoRef } },
     React.createElement(
       helpers_js_1.ComboBoxActionContext.Provider,
       { value: dispatch },
@@ -389,12 +388,13 @@ const ComboBox = (props) => {
         },
         React.createElement(
           ComboBoxInputContainer_js_1.ComboBoxInputContainer,
-          { disabled: inputProps?.disabled, ...rest },
+          { ...rest },
           React.createElement(
             React.Fragment,
             null,
             React.createElement(ComboBoxInput_js_1.ComboBoxInput, {
               value: inputValue,
+              disabled: inputProps?.disabled,
               ...inputProps,
               onChange: handleOnInput,
               selectTags: isMultipleEnabled(selected, multiple)

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -17,7 +17,7 @@ exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   const dispatch = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxActionContext,
   );
-  const { inputRef, toggleButtonRef } = (0, index_js_1.useSafeContext)(
+  const { inputRef } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxRefsContext,
   );
   // sync internal isOpen state with user's visible prop
@@ -29,14 +29,9 @@ exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   return React.createElement(index_js_1.Popover, {
     placement: 'bottom-start',
     visible: isOpen,
-    onClickOutside: React.useCallback(
-      (_, { target }) => {
-        if (!toggleButtonRef.current?.contains(target)) {
-          dispatch({ type: 'close' });
-        }
-      },
-      [dispatch, toggleButtonRef],
-    ),
+    onClickOutside: React.useCallback(() => {
+      dispatch({ type: 'close' });
+    }, [dispatch]),
     animation: 'shift-away',
     duration: 200,
     reference: inputRef,

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -9,40 +9,21 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const helpers_js_1 = require('./helpers.js');
 exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    onClick: onClickProp,
-    disabled,
-    isOpen,
-    ...rest
-  } = props;
-  const dispatch = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxActionContext,
-  );
-  const { toggleButtonRef } = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxRefsContext,
-  );
-  const refs = (0, index_js_1.useMergedRefs)(toggleButtonRef, forwardedRef);
+  const { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.Icon,
     {
       as: 'span',
-      ref: refs,
+      ref: forwardedRef,
       className: (0, classnames_1.default)(
         'iui-end-icon',
         {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         },
         className,
       ),
-      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
-        dispatch({ type: isOpen ? 'close' : 'open' });
-      }),
       ...rest,
     },
     children ??

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -195,7 +195,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       spellCheck: false,
       autoCapitalize: 'none',
       autoCorrect: 'off',
-      style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {},
+      style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
       ...rest,
     }),

package/cjs/core/ComboBox/ComboBoxMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'ul'>;
-export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"ul", ComboBoxMenuProps>;
+type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'div'>;
+export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"div", ComboBoxMenuProps>;
 export {};

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -48,11 +48,11 @@ const VirtualizedComboBoxMenu = React.forwardRef(
       scrollToIndex: focusedVisibleIndex,
     });
     const surfaceStyles = {
-      minWidth,
+      minInlineSize: minWidth,
       // set as constant because we don't want it shifting when items are unmounted
-      maxWidth: minWidth,
+      maxInlineSize: minWidth,
       // max-height must be on the outermost element for virtual scroll
-      maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
+      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
       overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
       ...style,
     };
@@ -94,8 +94,8 @@ exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   const refs = (0, index_js_3.useMergedRefs)(menuRef, forwardedRef);
   const styles = React.useMemo(
     () => ({
-      minWidth,
-      maxWidth: `min(${minWidth * 2}px, 90vw)`,
+      minInlineSize: minWidth,
+      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
     }),
     [minWidth],
   );

package/cjs/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -4,5 +4,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
 };
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"li", ComboBoxMenuItemProps>>;
+export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", ComboBoxMenuItemProps>>;
 export {};

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -37,6 +37,7 @@ exports.ComboBoxMenuItem = React.memo(
     return React.createElement(
       ListItem_js_1.ListItem,
       {
+        as: 'div',
         actionable: true,
         size: size,
         active: isSelected,
@@ -68,12 +69,13 @@ exports.ComboBoxMenuItem = React.memo(
             sublabel,
           ),
       ),
-      endIcon &&
-        React.createElement(
-          ListItem_js_1.ListItem.Icon,
-          { as: 'span', 'aria-hidden': true },
-          endIcon,
-        ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem_js_1.ListItem.Icon,
+            { as: 'span', 'aria-hidden': true },
+            endIcon ?? React.createElement(index_js_1.SvgCheckmark, null),
+          )),
     );
   }),
 );

package/cjs/core/ComboBox/helpers.d.ts

@@ -25,8 +25,7 @@ export declare const comboBoxReducer: (state: {
 };
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLUListElement>;
-    toggleButtonRef: React.RefObject<HTMLSpanElement>;
+    menuRef: React.RefObject<HTMLElement>;
     optionsExtraInfoRef: React.MutableRefObject<Record<string, {
         __originalIndex: number;
     }>>;

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -1,14 +1,14 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TimePickerProps } from '../TimePicker/TimePicker.js';
+export type DatePickerLocalizedNames = {
+    [key in 'months' | 'shortDays' | 'days']: string[];
+};
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string) => {
-    months: string[];
-    shortDays: string[];
-    days: string[];
-};
+export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
 export type DateRangePickerProps = {
     /**
      * Enable date range support.
@@ -42,9 +42,7 @@ type DatePickerProps = {
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
      */
-    localizedNames?: {
-        [key in 'months' | 'shortDays' | 'days']: string[];
-    };
+    localizedNames?: DatePickerLocalizedNames;
     /**
      * Set focus on selected day or today.
      * @default false
@@ -60,6 +58,30 @@ type DatePickerProps = {
      * @default false
      */
     showYearSelection?: boolean;
+    /**
+     * Allows props to be passed for calendar month year, referring to the div that wraps around the month/year and the next/previous buttons.
+     */
+    monthYearProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for only month, referring to span that wraps around the month title.
+     */
+    monthProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for week days, referring to div that wraps around the week day title.
+     */
+    weekDayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for individual day , referring to div element the wraps around single day number.
+     */
+    dayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for calendar, referring to div that is used for listbox for wraping days and weeks.
+     */
+    calendarProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for weeks, referring to div that wraps around weeks.
+     */
+    weekProps?: React.ComponentProps<'div'>;
     /**
      * Will disable dates for which this function returns true.
      * Disabled dates cannot be selected.

package/cjs/core/DatePicker/DatePicker.js

@@ -139,6 +139,12 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     enableRangeSelect = false,
     startDate,
     endDate,
+    monthYearProps,
+    calendarProps,
+    monthProps,
+    weekDayProps,
+    dayProps,
+    weekProps,
     isDateDisabled,
     ...rest
   } = props;
@@ -407,6 +413,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     }
     return dayClass;
   };
+  const dateTableId = (0, index_js_1.useId)();
   return React.createElement(
     index_js_1.Box,
     {
@@ -419,7 +426,14 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       null,
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-calendar-month-year' },
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: (0, classnames_1.default)(
+            'iui-calendar-month-year',
+            monthYearProps?.className,
+          ),
+        },
         showYearSelection &&
           React.createElement(
             index_js_2.IconButton,
@@ -448,8 +462,13 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             index_js_1.Box,
             {
               as: 'span',
-              className: 'iui-calendar-month',
+              id: dateTableId,
               title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: (0, classnames_1.default)(
+                'iui-calendar-month',
+                monthProps?.className,
+              ),
             },
             monthNames[displayedMonthIndex],
           ),
@@ -480,20 +499,37 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-calendar-weekdays' },
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: (0, classnames_1.default)(
+            'iui-calendar-weekdays',
+            weekDayProps?.className,
+          ),
+        },
         shortDays.map((day, index) =>
           React.createElement('div', { key: day, title: longDays[index] }, day),
         ),
       ),
       React.createElement(
         'div',
-        { onKeyDown: handleCalendarKeyDown, role: 'listbox' },
+        {
+          onKeyDown: handleCalendarKeyDown,
+          role: 'listbox',
+          'aria-labelledby': dateTableId,
+          ...calendarProps,
+        },
         weeks.map((weekDays, weekIndex) => {
           return React.createElement(
             index_js_1.Box,
             {
+              as: 'div',
               key: `week-${displayedMonthIndex}-${weekIndex}`,
-              className: 'iui-calendar-week',
+              ...weekProps,
+              className: (0, classnames_1.default)(
+                'iui-calendar-week',
+                weekProps?.className,
+              ),
             },
             weekDays.map((weekDay, dayIndex) => {
               const dateValue = weekDay.getDate();
@@ -501,8 +537,8 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
               return React.createElement(
                 index_js_1.Box,
                 {
+                  as: 'div',
                   key: `day-${displayedMonthIndex}-${dayIndex}`,
-                  className: getDayClass(weekDay),
                   onClick: () => !isDisabled && onDayClick(weekDay),
                   role: 'option',
                   tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
@@ -511,6 +547,11 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
                     isSameDay(weekDay, focusedDay) &&
                     needFocus.current &&
                     element?.focus(),
+                  ...dayProps,
+                  className: (0, classnames_1.default)(
+                    getDayClass(weekDay),
+                    dayProps?.className,
+                  ),
                 },
                 dateValue,
               );

package/cjs/core/Dialog/Dialog.js

@@ -7,7 +7,6 @@ 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 ReactDOM = tslib_1.__importStar(require('react-dom'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const DialogTitleBar_js_1 = require('./DialogTitleBar.js');
 const DialogContent_js_1 = require('./DialogContent.js');
@@ -35,21 +34,6 @@ const DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const dialogRootRef = React.useRef(null);
-  const context = (0, index_js_1.useGlobals)();
-  const isClient = (0, index_js_1.useIsClient)();
-  const portalTo =
-    typeof portal !== 'boolean'
-      ? portal.to
-      : portal
-      ? context?.portalContainerRef?.current ??
-        (0, index_js_1.getDocument)()?.body
-      : null;
-  const dialog = React.createElement(index_js_1.Box, {
-    className: (0, classnames_1.default)('iui-dialog-wrapper', className),
-    'data-iui-relative': relativeTo === 'container',
-    ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef),
-    ...rest,
-  });
   return React.createElement(
     DialogContext_js_1.DialogContext.Provider,
     {
@@ -69,7 +53,16 @@ const DialogComponent = React.forwardRef((props, ref) => {
         placement,
       },
     },
-    portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog,
+    React.createElement(
+      index_js_1.Portal,
+      { portal: portal },
+      React.createElement(index_js_1.Box, {
+        className: (0, classnames_1.default)('iui-dialog-wrapper', className),
+        'data-iui-relative': relativeTo === 'container',
+        ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef),
+        ...rest,
+      }),
+    ),
   );
 });
 /**

package/cjs/core/Dialog/DialogContext.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PortalProps } from '../utils/index.js';
 export type DialogContextProps = {
     /**
      * Flag whether dialog should be shown.
@@ -67,11 +68,9 @@ export type DialogContextProps = {
      *
      * Can be set to an object with a `to` property to portal into a specific element.
      *
-     * @default false
+     * Defaults to false if using `Dialog` and true if using `Modal`.
      */
-    portal?: boolean | {
-        to: HTMLElement;
-    };
+    portal?: PortalProps['portal'];
     /**
      * Dialog root ref. For internal use.
      */

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]);
@@ -167,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.d.ts

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