@itwin/itwinui-react 2.9.1 → 2.10.1

package/esm/core/Buttons/IconButton/IconButton.d.ts

@@ -1,19 +1,26 @@
-import { ButtonProps } from '../Button';
-import { PolymorphicForwardRefComponent } from '../../utils';
+import React from 'react';
+import type { ButtonProps } from '../Button';
+import type { PolymorphicForwardRefComponent } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
+import '@itwin/itwinui-css/css/tooltip.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.
      * @default false
      */
     isActive?: boolean;
+    /**
+     * Name of the button, shown in a tooltip and exposed to assistive technologies.
+     */
+    label?: React.ReactNode;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
 declare type IconButtonComponent = PolymorphicForwardRefComponent<'button', IconButtonProps>;
 /**
  * Icon button
  * @example
- * <IconButton><SvgAdd /></IconButton>
- * <IconButton styleType='borderless'><SvgAdd /></IconButton>
+ * <IconButton label='Add'><SvgAdd /></IconButton>
+ * @example
+ * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export declare const IconButton: IconButtonComponent;
 export default IconButton;

package/esm/core/Buttons/IconButton/IconButton.js

@@ -4,18 +4,26 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils';
+import { useTheme, VisuallyHidden, Popover } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
+import '@itwin/itwinui-css/css/tooltip.css';
 /**
  * Icon button
  * @example
- * <IconButton><SvgAdd /></IconButton>
- * <IconButton styleType='borderless'><SvgAdd /></IconButton>
+ * <IconButton label='Add'><SvgAdd /></IconButton>
+ * @example
+ * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export const IconButton = React.forwardRef((props, ref) => {
-    const { isActive, children, styleType = 'default', size, type = 'button', className, as: Element = 'button', ...rest } = props;
+    const { isActive, children, styleType = 'default', size, type = 'button', className, as: Element = 'button', label, ...rest } = props;
     useTheme();
-    return (React.createElement(Element, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type, ...rest },
-        React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children)));
+    return (React.createElement(IconButtonTooltip, { label: label },
+        React.createElement(Element, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, type: type, ...rest },
+            React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children),
+            label ? React.createElement(VisuallyHidden, null, label) : null)));
 });
+const IconButtonTooltip = (props) => {
+    const { label, children } = props;
+    return label ? (React.createElement(Popover, { interactive: false, offset: [0, 4], aria: { content: null }, content: React.createElement("div", { "aria-hidden": 'true', className: 'iui-tooltip' }, label) }, children)) : (children);
+};
 export default IconButton;

package/esm/core/Carousel/Carousel.d.ts

@@ -49,9 +49,11 @@ export declare const Carousel: React.ForwardRefExoticComponent<{
     Navigation: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> & {
         PreviousButton: React.ForwardRefExoticComponent<{
             isActive?: boolean | undefined;
+            label?: React.ReactNode;
         } & Omit<import("..").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
         NextButton: React.ForwardRefExoticComponent<{
             isActive?: boolean | undefined;
+            label?: React.ReactNode;
         } & Omit<import("..").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
     };
     DotsList: React.ForwardRefExoticComponent<{

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -8,8 +8,10 @@ import React from 'react';
 export declare const CarouselNavigation: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> & {
     PreviousButton: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;
+        label?: React.ReactNode;
     } & Omit<import("../Buttons").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
     NextButton: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;
+        label?: React.ReactNode;
     } & Omit<import("../Buttons").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
 };

package/esm/core/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, } from '../utils';
+import { useTheme, SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, } from '../utils';
 import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton';
 import { TimePicker } from '../TimePicker';
@@ -27,17 +27,6 @@ const isInDateRange = (date, startDate, endDate) => {
     maxDate && maxDate.setHours(0, 0, 0, 0);
     return testDate > minDate && testDate < maxDate;
 };
-// compares to see if one date is earlier than another
-const isBefore = (beforeDate, afterDate) => {
-    if (!beforeDate || !afterDate) {
-        return false;
-    }
-    const firstDate = new Date(beforeDate);
-    const secondDate = new Date(afterDate);
-    firstDate && firstDate.setHours(0, 0, 0, 0);
-    secondDate && secondDate.setHours(0, 0, 0, 0);
-    return firstDate < secondDate;
-};
 // Type guard for multiple did not work
 const isSingleOnChange = (onChange, enableRangeSelect) => {
     return !enableRangeSelect;

package/esm/core/FileUpload/FileUploadCard.js

@@ -23,16 +23,19 @@ const FileUploadCardIcon = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     return (React.createElement("span", { className: cx('iui-file-card-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgDocument, null)));
 });
+FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
 const FileUploadCardInfo = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     return (React.createElement("span", { className: cx('iui-file-card-text', className), ref: ref, ...rest }, children));
 });
+FileUploadCardInfo.displayName = 'FileUploadCard.Info';
 const FileUploadCardTitle = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = useSafeContext(FileUploadCardContext);
     const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
     return (React.createElement("span", { className: cx('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
 });
+FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 const FileUploadCardDescription = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = useSafeContext(FileUploadCardContext);
@@ -44,15 +47,18 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     }
     return (React.createElement("span", { className: cx('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
 });
+FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 const FileUploadCardAction = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     return (React.createElement("div", { className: cx('iui-file-card-action', className), ref: ref, ...rest }, children));
 });
+FileUploadCardAction.displayName = 'FileUploadCard.Action';
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { inputId } = useSafeContext(FileUploadCardContext);
     return (React.createElement("label", { className: cx('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
 });
+FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
 const FileUploadCardInput = React.forwardRef((props, ref) => {
     const { children, className, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
@@ -67,9 +73,11 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         node.files = dataTransfer.files;
     }, [files]);
     const refs = useMergedRefs(ref, setNativeFilesRef);
-    if (id && id !== inputId) {
-        setInputId(id);
-    }
+    React.useEffect(() => {
+        if (id && id !== inputId) {
+            setInputId(id);
+        }
+    }, [id, inputId, setInputId]);
     return (React.createElement(React.Fragment, null,
         React.createElement("input", { className: cx('iui-visually-hidden', className), type: 'file', onChange: (e) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -81,6 +89,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
             }, ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
         children));
 });
+FileUploadCardInput.displayName = 'FileUploadCard.Input';
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
  * @example
@@ -109,7 +118,8 @@ export const FileUploadCard = Object.assign(React.forwardRef((props, ref) => {
     var _a;
     const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
     const [internalFiles, setInternalFiles] = React.useState();
-    const [inputId, setInputId] = React.useState(useId());
+    const uid = useId();
+    const [inputId, setInputId] = React.useState(uid);
     const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
     return (React.createElement(FileUploadCardContext.Provider, { value: {
             files,
@@ -134,5 +144,6 @@ export const FileUploadCard = Object.assign(React.forwardRef((props, ref) => {
     InputLabel: FileUploadCardInputLabel,
     Input: FileUploadCardInput,
 });
+FileUploadCard.displayName = 'FileUploadCard';
 export default FileUploadCard;
 export const FileUploadCardContext = React.createContext(undefined);

package/esm/core/LabeledInput/LabeledInput.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { Input } from '../Input/Input';
-import { StatusIconMap, useTheme, InputContainer } from '../utils';
+import { StatusIconMap, useTheme, InputContainer, useId } from '../utils';
 import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic labeled input component
@@ -15,10 +15,11 @@ import '@itwin/itwinui-css/css/input.css';
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
 export const LabeledInput = React.forwardRef((props, ref) => {
-    const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, ...rest } = props;
+    const uid = useId();
+    const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, id = uid, ...rest } = props;
     useTheme();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
-        React.createElement(Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, ...rest })));
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
+        React.createElement(Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));
 });
 export default LabeledInput;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { Select } from '../Select';
-import { StatusIconMap, useTheme, InputContainer } from '../utils';
+import { StatusIconMap, useTheme, InputContainer, useId } from '../utils';
 import '@itwin/itwinui-css/css/input.css';
 /**
  * Labeled select component to select value from options.
@@ -40,8 +40,9 @@ import '@itwin/itwinui-css/css/input.css';
  * />
  */
 export const LabeledSelect = (props) => {
-    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, selectClassName, selectStyle, required = false, ...rest } = props;
+    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, selectClassName, selectStyle, required = false, triggerProps, ...rest } = props;
     useTheme();
+    const labelId = `${useId()}-label`;
     const icon = () => {
         if (svgIcon) {
             return React.cloneElement(svgIcon, { 'aria-hidden': true });
@@ -51,7 +52,10 @@ export const LabeledSelect = (props) => {
         }
         return undefined;
     };
-    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
-        React.createElement(Select, { disabled: disabled, className: selectClassName, style: selectStyle, ...rest })));
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style, labelId: labelId },
+        React.createElement(Select, { disabled: disabled, className: selectClassName, style: selectStyle, ...rest, triggerProps: {
+                'aria-labelledby': labelId,
+                ...triggerProps,
+            } })));
 };
 export default LabeledSelect;

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { StatusIconMap, useTheme, InputContainer } from '../utils';
+import { StatusIconMap, useTheme, InputContainer, useId } from '../utils';
 import { Textarea } from '../Textarea';
 import '@itwin/itwinui-css/css/input.css';
 /**
@@ -28,10 +28,11 @@ import '@itwin/itwinui-css/css/input.css';
  * />
  */
 export const LabeledTextarea = React.forwardRef((props, ref) => {
-    const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, ...textareaProps } = props;
+    const uid = useId();
+    const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, id = uid, ...textareaProps } = props;
     useTheme();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
-        React.createElement(Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, ...textareaProps, ref: ref })));
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
+        React.createElement(Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));
 });
 export default LabeledTextarea;

package/esm/core/Select/Select.d.ts

@@ -111,6 +111,10 @@ export declare type SelectProps<T> = {
      * @see [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/)
      */
     popoverProps?: Omit<PopoverProps, 'onShow' | 'onHide' | 'disabled'>;
+    /**
+     * Props to pass to the select button (trigger) element.
+     */
+    triggerProps?: React.ComponentPropsWithoutRef<'div'>;
 } & SelectMultipleTypeProps<T> & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 /**
  * Select component to select value from options.

package/esm/core/Select/Select.js

@@ -4,9 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { DropdownMenu } from '../DropdownMenu';
-import { MenuItem } from '../Menu/MenuItem';
-import { useTheme, SvgCaretDownSmall, } from '../utils';
+import { Menu, MenuItem } from '../Menu';
+import { useTheme, SvgCaretDownSmall, Popover, useId, } from '../utils';
 import '@itwin/itwinui-css/css/select.css';
 import SelectTag from './SelectTag';
 import SelectTagContainer from './SelectTagContainer';
@@ -68,14 +67,12 @@ const isSingleOnChange = (onChange, multiple) => {
  */
 export const Select = (props) => {
     var _a;
-    const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, ...rest } = props;
+    const uid = useId();
+    const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, triggerProps, ...rest } = props;
     useTheme();
-    const [isOpen, setIsOpen] = React.useState((_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : false);
-    React.useEffect(() => {
-        setIsOpen((open) => { var _a; return (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : open; });
-    }, [popoverProps]);
+    const [isOpenState, setIsOpen] = React.useState(false);
+    const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
     const [minWidth, setMinWidth] = React.useState(0);
-    const toggle = () => setIsOpen((open) => !open);
     const selectRef = React.useRef(null);
     const toggleButtonRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
@@ -83,7 +80,9 @@ export const Select = (props) => {
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
     }, [onShow]);
     const onHideHandler = React.useCallback((instance) => {
+        var _a;
         setIsOpen(false);
+        (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // move focus back to select button
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
     React.useEffect(() => {
@@ -96,30 +95,29 @@ export const Select = (props) => {
             setMinWidth(selectRef.current.offsetWidth);
         }
     }, [isOpen]);
-    const onKeyDown = (event, toggle) => {
+    const onKeyDown = (event) => {
         if (event.altKey) {
             return;
         }
         switch (event.key) {
             case 'Enter':
             case ' ':
-            case 'Spacebar':
-                if (event.target === selectRef.current) {
-                    toggle();
-                    event.preventDefault();
-                }
+            case 'Spacebar': {
+                setIsOpen((o) => !o);
+                event.preventDefault();
                 break;
+            }
             default:
                 break;
         }
     };
-    const menuItems = React.useCallback((close) => {
+    const menuItems = React.useMemo(() => {
         return options.map((option, index) => {
             var _a;
             const isSelected = isMultipleEnabled(value, multiple)
                 ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
                 : value === option.value;
-            const menuItem = itemRenderer ? (itemRenderer(option, { close, isSelected })) : (React.createElement(MenuItem, null, option.label));
+            const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(MenuItem, null, option.label));
             const { label, ...restOption } = option;
             return React.cloneElement(menuItem, {
                 key: `${label}-${index}`,
@@ -130,7 +128,7 @@ export const Select = (props) => {
                     }
                     if (isSingleOnChange(onChange, multiple)) {
                         onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
-                        close();
+                        setIsOpen(false);
                     }
                     else {
                         onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
@@ -138,7 +136,7 @@ export const Select = (props) => {
                 },
                 ref: (el) => {
                     if (isSelected && !multiple) {
-                        el === null || el === void 0 ? void 0 : el.scrollIntoView();
+                        el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
                     }
                 },
                 role: 'option',
@@ -158,29 +156,29 @@ export const Select = (props) => {
     const tagRenderer = React.useCallback((item) => {
         return React.createElement(SelectTag, { key: item.label, label: item.label });
     }, []);
-    return (React.createElement("div", { className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style, ...rest },
-        React.createElement(DropdownMenu, { menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: {
-                minWidth,
-                maxWidth: `min(${minWidth * 2}px, 90vw)`,
-                ...menuStyle,
-            }, role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled, ...popoverProps, visible: isOpen, onClickOutside: (_, { target }) => {
+    return (React.createElement("div", { className: cx('iui-input-with-icon', className), style: style, ...rest },
+        React.createElement(Popover, { content: React.createElement(Menu, { role: 'listbox', className: cx('iui-scroll', menuClassName), style: {
+                    minWidth,
+                    maxWidth: `min(${minWidth * 2}px, 90vw)`,
+                    ...menuStyle,
+                }, id: `${uid}-menu`, key: `${uid}-menu` }, menuItems), placement: 'bottom-start', aria: { content: null }, onShow: onShowHandler, onHide: onHideHandler, ...popoverProps, visible: isOpen, onClickOutside: (_, { target }) => {
                 var _a;
                 if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
                     setIsOpen(false);
                 }
             } },
-            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', {
+            React.createElement("div", { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: cx('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
-                }), "data-iui-size": size, onClick: () => !disabled && toggle(), onKeyDown: (e) => !disabled && onKeyDown(e, toggle), tabIndex: !disabled ? 0 : undefined },
+                }, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
-        React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
+        React.createElement("span", { "aria-hidden": true, ref: toggleButtonRef, className: cx('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
-            }), onClick: () => !disabled && toggle() },
-            React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))));
+            }), onClick: () => !disabled && setIsOpen((o) => !o) },
+            React.createElement(SvgCaretDownSmall, null))));
 };
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
     return (React.createElement(React.Fragment, null,

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -5,6 +5,14 @@ export declare type DatePickerInputProps = {
     onChange: (date?: Date) => void;
     parseInput: (text: string) => Date;
     formatDate: (date: Date) => string;
+    /**
+     * Decides if this component is used for the 'from' or 'to' date
+     */
+    isFromOrTo?: 'from' | 'to';
+    /**
+     * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
+     */
+    selectedDate?: Date;
 } & Omit<LabeledInputProps, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
 declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;
 export default DatePickerInput;

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -3,12 +3,20 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { Popover, SvgCalendar } from '../../../utils';
+import { Popover, SvgCalendar, isBefore } from '../../../utils';
 import { LabeledInput } from '../../../LabeledInput';
 import { DatePicker } from '../../../DatePicker';
 import { IconButton } from '../../../Buttons';
 const DatePickerInput = (props) => {
-    const { onChange, date, parseInput, formatDate, ...rest } = props;
+    const { onChange, date, parseInput, formatDate, isFromOrTo, selectedDate, ...rest } = props;
+    const isDateDisabled = (date) => {
+        if (isFromOrTo === 'to') {
+            return isBefore(date, selectedDate);
+        }
+        else {
+            return isBefore(selectedDate, date);
+        }
+    };
     const buttonRef = React.useRef(null);
     const [inputValue, setInputValue] = React.useState('');
     React.useEffect(() => {
@@ -35,7 +43,7 @@ const DatePickerInput = (props) => {
             onChange(parsedDate);
         }
     }, [onChange, parseInput]);
-    return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
+    return (React.createElement(Popover, { content: React.createElement(DatePicker, { date: date, onChange: onDateSelected, setFocus: true, isDateDisabled: isDateDisabled }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
             var _a;
             if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 close();

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -59,7 +59,7 @@ export const DateRangeFilter = (props) => {
         }
     };
     return (React.createElement(BaseFilter, null,
-        React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
-        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
+        React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', setFocus: true }),
+        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to' }),
         React.createElement(FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };

package/esm/core/utils/components/InputContainer.d.ts

@@ -11,6 +11,8 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     isLabelInline?: boolean;
     isIconInline?: boolean;
     statusMessage?: React.ReactNode;
+    inputId?: string;
+    labelId?: string;
 } & React.ComponentPropsWithoutRef<T>;
 /**
  * Input container to wrap inputs with label, and add optional message and icon.

package/esm/core/utils/components/InputContainer.js

@@ -11,7 +11,8 @@ import '@itwin/itwinui-css/css/utils.css';
  */
 export const InputContainer = (props) => {
     var _a;
-    const { as: Element = 'div', label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, ...rest } = props;
+    const { as: Element = 'div', label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
+    const LabelElement = inputId && Element !== 'label' ? 'label' : 'div';
     return (React.createElement(Element, { className: cx('iui-input-container', {
             'iui-disabled': disabled,
             [`iui-${status}`]: !!status,
@@ -19,9 +20,9 @@ export const InputContainer = (props) => {
             'iui-inline-icon': isIconInline,
             'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
         }, className), style: style, ...rest },
-        label && (React.createElement("div", { className: cx('iui-label', {
+        label && (React.createElement(LabelElement, { className: cx('iui-label', {
                 'iui-required': required,
-            }) }, label)),
+            }), htmlFor: inputId, id: labelId }, label)),
         children,
         statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
             icon &&

package/esm/core/utils/functions/date.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Return true if the first date is earlier than the second date
+ */
+export declare const isBefore: (beforeDate: Date | undefined, afterDate: Date | undefined) => boolean;

package/esm/core/utils/functions/date.js

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/**
+ * Return true if the first date is earlier than the second date
+ */
+export const isBefore = (beforeDate, afterDate) => {
+    if (!beforeDate || !afterDate) {
+        return false;
+    }
+    const firstDate = new Date(beforeDate);
+    const secondDate = new Date(afterDate);
+    firstDate && firstDate.setHours(0, 0, 0, 0);
+    secondDate && secondDate.setHours(0, 0, 0, 0);
+    return firstDate < secondDate;
+};

package/esm/core/utils/functions/index.d.ts

@@ -1,3 +1,4 @@
+export * from './date';
 export * from './dom';
 export * from './colors';
 export * from './numbers';

package/esm/core/utils/functions/index.js

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+export * from './date';
 export * from './dom';
 export * from './colors';
 export * from './numbers';

package/esm/core/utils/hooks/useId.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 /**
- * Return custom useId function as a fallback for React.useId
+ * Wrapper around React's `useId` hook, which prefixes the id with `iui-` and uses
+ * a random value as fallback for older React versions which don't include `useId`.
  */
-export declare const useId: typeof React.useId;
+export declare const useId: () => string;

package/esm/core/utils/hooks/useId.js

@@ -6,9 +6,11 @@ var _a;
 import React from 'react';
 import { getRandomValue } from '../functions/numbers';
 /**
- * Return custom useId function as a fallback for React.useId
+ * Wrapper around React's `useId` hook, which prefixes the id with `iui-` and uses
+ * a random value as fallback for older React versions which don't include `useId`.
  */
-export const useId = (_a = React.useId) !== null && _a !== void 0 ? _a : (() => {
-    const [id] = React.useState(() => `iui-${getRandomValue(10)}`);
-    return id;
-});
+export const useId = () => {
+    const uniqueValue = useUniqueValue();
+    return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
+};
+const useUniqueValue = (_a = React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.9.1",
+  "version": "2.10.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -31,6 +31,11 @@
   ],
   "description": "A react component library for iTwinUI",
   "homepage": "https://github.com/iTwin/iTwinUI",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iTwin/iTwinUI.git",
+    "directory": "packages/itwinui-react"
+  },
   "keywords": [
     "component",
     "components",
@@ -62,7 +67,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.10.1",
+    "@itwin/itwinui-css": "^1.10.3",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",