@itwin/itwinui-react 2.9.1 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 2.10.0
+
+### Minor Changes
+
+- [#1231](https://github.com/iTwin/iTwinUI/pull/1231): Added `label` prop to `IconButton`. The label will be displayed visually as a tooltip when the button is hovered/focused and will be exposed as the button's accessible name.
+- [#1211](https://github.com/iTwin/iTwinUI/pull/1211): The date range picker used in date filters now prevents users from picking a start date later than the end date or picking an end date earlier than the start date.
+- [#1238](https://github.com/iTwin/iTwinUI/pull/1238): `Select` will now render a `<div role=combobox>` instead of a generic `<div>` for the trigger element. This element now also supports passing DOM props/attributes using `triggerProps`.
+
+  `LabeledSelect` will correctly associate the label with select's trigger using `aria-labelledby`.
+
+- [#1235](https://github.com/iTwin/iTwinUI/pull/1235): Changed the internal DOM structure of `LabeledInput` and `LabeledTextarea` to prefer explicit association over implicit. The `<label>` is now associated with the input using `htmlFor`/`id` and the container is a generic div.
+
+  This change improves accessibility, with no API changes and no effect on visuals.
+
+### Patch Changes
+
+- [#1232](https://github.com/iTwin/iTwinUI/pull/1232): `IconButton` will now set `aria-pressed` attribute when `isActive` prop is used.
+- [#1236](https://github.com/iTwin/iTwinUI/pull/1236): Fixed an issue in FileUploadCard where setState was called during render.
+- [#1238](https://github.com/iTwin/iTwinUI/pull/1238): Fixed an issue in Select where `popoverProps.visible` was not being respected.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.10.2
+
 ## 2.9.1
 
 ### Patch Changes

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

@@ -12,16 +12,24 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
+require("@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>
  */
 exports.IconButton = react_1.default.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;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type, ...rest },
-        react_1.default.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children)));
+    return (react_1.default.createElement(IconButtonTooltip, { label: label },
+        react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('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_1.default.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children),
+            label ? react_1.default.createElement(utils_1.VisuallyHidden, null, label) : null)));
 });
+const IconButtonTooltip = (props) => {
+    const { label, children } = props;
+    return label ? (react_1.default.createElement(utils_1.Popover, { interactive: false, offset: [0, 4], aria: { content: null }, content: react_1.default.createElement("div", { "aria-hidden": 'true', className: 'iui-tooltip' }, label) }, children)) : (children);
+};
 exports.default = exports.IconButton;

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

@@ -33,17 +33,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;
@@ -238,7 +227,7 @@ const DatePicker = (props) => {
             setSelectedStartDay(newStartDate);
             setFocusedDay(newStartDate);
             // if the start date is after the end date or the end date is undefined, reset the end date
-            if (!isBefore(newStartDate, selectedEndDay)) {
+            if (!(0, utils_1.isBefore)(newStartDate, selectedEndDay)) {
                 setSelectedEndDay(newStartDate);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newStartDate, newStartDate);
             }
@@ -256,7 +245,7 @@ const DatePicker = (props) => {
             const newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
             setFocusedDay(newEndDate);
             // if the end date is before the start date, move back the start date and still have user select end date
-            if (!isBefore(newEndDate, selectedStartDay)) {
+            if (!(0, utils_1.isBefore)(newEndDate, selectedStartDay)) {
                 setSelectedEndDay(newEndDate);
                 selectedStartDay && (onChange === null || onChange === void 0 ? void 0 : onChange(selectedStartDay, newEndDate));
                 setIsSelectingStartDate(true);

package/cjs/core/FileUpload/FileUploadCard.js

@@ -29,16 +29,19 @@ const FileUploadCardIcon = react_1.default.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgDocument, null)));
 });
+FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
 const FileUploadCardInfo = react_1.default.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-text', className), ref: ref, ...rest }, children));
 });
+FileUploadCardInfo.displayName = 'FileUploadCard.Info';
 const FileUploadCardTitle = react_1.default.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
     const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
 });
+FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 const FileUploadCardDescription = react_1.default.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
@@ -50,15 +53,18 @@ const FileUploadCardDescription = react_1.default.forwardRef((props, ref) => {
     }
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
 });
+FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 const FileUploadCardAction = react_1.default.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-file-card-action', className), ref: ref, ...rest }, children));
 });
+FileUploadCardAction.displayName = 'FileUploadCard.Action';
 const FileUploadCardInputLabel = react_1.default.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { inputId } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
     return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
 });
+FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
 const FileUploadCardInput = react_1.default.forwardRef((props, ref) => {
     const { children, className, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0, utils_1.useSafeContext)(exports.FileUploadCardContext);
@@ -73,9 +79,11 @@ const FileUploadCardInput = react_1.default.forwardRef((props, ref) => {
         node.files = dataTransfer.files;
     }, [files]);
     const refs = (0, utils_1.useMergedRefs)(ref, setNativeFilesRef);
-    if (id && id !== inputId) {
-        setInputId(id);
-    }
+    react_1.default.useEffect(() => {
+        if (id && id !== inputId) {
+            setInputId(id);
+        }
+    }, [id, inputId, setInputId]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("input", { className: (0, classnames_1.default)('iui-visually-hidden', className), type: 'file', onChange: (e) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -87,6 +95,7 @@ const FileUploadCardInput = react_1.default.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
@@ -115,7 +124,8 @@ exports.FileUploadCard = Object.assign(react_1.default.forwardRef((props, ref) =
     var _a;
     const { className, children, files: filesProp, onFilesChange, emptyCard = react_1.default.createElement(FileEmptyCard_1.FileEmptyCard, null), input, ...rest } = props;
     const [internalFiles, setInternalFiles] = react_1.default.useState();
-    const [inputId, setInputId] = react_1.default.useState((0, utils_2.useId)());
+    const uid = (0, utils_2.useId)();
+    const [inputId, setInputId] = react_1.default.useState(uid);
     const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
     return (react_1.default.createElement(exports.FileUploadCardContext.Provider, { value: {
             files,
@@ -140,5 +150,6 @@ exports.FileUploadCard = Object.assign(react_1.default.forwardRef((props, ref) =
     InputLabel: FileUploadCardInputLabel,
     Input: FileUploadCardInput,
 });
+exports.FileUploadCard.displayName = 'FileUploadCard';
 exports.default = exports.FileUploadCard;
 exports.FileUploadCardContext = react_1.default.createContext(undefined);

package/cjs/core/LabeledInput/LabeledInput.js

@@ -21,10 +21,11 @@ require("@itwin/itwinui-css/css/input.css");
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
 exports.LabeledInput = react_1.default.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 = (0, utils_1.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;
     (0, utils_1.useTheme)();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
-    return (react_1.default.createElement(utils_1.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_1.default.createElement(Input_1.Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, ...rest })));
+    return (react_1.default.createElement(utils_1.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_1.default.createElement(Input_1.Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));
 });
 exports.default = exports.LabeledInput;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -46,8 +46,9 @@ require("@itwin/itwinui-css/css/input.css");
  * />
  */
 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;
     (0, utils_1.useTheme)();
+    const labelId = `${(0, utils_1.useId)()}-label`;
     const icon = () => {
         if (svgIcon) {
             return react_1.default.cloneElement(svgIcon, { 'aria-hidden': true });
@@ -57,8 +58,11 @@ const LabeledSelect = (props) => {
         }
         return undefined;
     };
-    return (react_1.default.createElement(utils_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
-        react_1.default.createElement(Select_1.Select, { disabled: disabled, className: selectClassName, style: selectStyle, ...rest })));
+    return (react_1.default.createElement(utils_1.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_1.default.createElement(Select_1.Select, { disabled: disabled, className: selectClassName, style: selectStyle, ...rest, triggerProps: {
+                'aria-labelledby': labelId,
+                ...triggerProps,
+            } })));
 };
 exports.LabeledSelect = LabeledSelect;
 exports.default = exports.LabeledSelect;

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -34,10 +34,11 @@ require("@itwin/itwinui-css/css/input.css");
  * />
  */
 exports.LabeledTextarea = react_1.default.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 = (0, utils_1.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;
     (0, utils_1.useTheme)();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
-    return (react_1.default.createElement(utils_1.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_1.default.createElement(Textarea_1.Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, ...textareaProps, ref: ref })));
+    return (react_1.default.createElement(utils_1.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_1.default.createElement(Textarea_1.Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));
 });
 exports.default = exports.LabeledTextarea;

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

@@ -10,8 +10,7 @@ exports.Select = void 0;
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const DropdownMenu_1 = require("../DropdownMenu");
-const MenuItem_1 = require("../Menu/MenuItem");
+const Menu_1 = require("../Menu");
 const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/select.css");
 const SelectTag_1 = __importDefault(require("./SelectTag"));
@@ -74,14 +73,12 @@ const isSingleOnChange = (onChange, multiple) => {
  */
 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 = (0, utils_1.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;
     (0, utils_1.useTheme)();
-    const [isOpen, setIsOpen] = react_1.default.useState((_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : false);
-    react_1.default.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_1.default.useState(false);
+    const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
     const [minWidth, setMinWidth] = react_1.default.useState(0);
-    const toggle = () => setIsOpen((open) => !open);
     const selectRef = react_1.default.useRef(null);
     const toggleButtonRef = react_1.default.useRef(null);
     const onShowHandler = react_1.default.useCallback((instance) => {
@@ -89,7 +86,9 @@ const Select = (props) => {
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
     }, [onShow]);
     const onHideHandler = react_1.default.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_1.default.useEffect(() => {
@@ -102,30 +101,29 @@ 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_1.default.useCallback((close) => {
+    const menuItems = react_1.default.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_1.default.createElement(MenuItem_1.MenuItem, null, option.label));
+            const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (react_1.default.createElement(Menu_1.MenuItem, null, option.label));
             const { label, ...restOption } = option;
             return react_1.default.cloneElement(menuItem, {
                 key: `${label}-${index}`,
@@ -136,7 +134,7 @@ 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');
@@ -144,7 +142,7 @@ 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',
@@ -164,29 +162,29 @@ const Select = (props) => {
     const tagRenderer = react_1.default.useCallback((item) => {
         return react_1.default.createElement(SelectTag_1.default, { key: item.label, label: item.label });
     }, []);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style, ...rest },
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('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_1.default.createElement("div", { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest },
+        react_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(Menu_1.Menu, { role: 'listbox', className: (0, classnames_1.default)('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_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', {
+            react_1.default.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: (0, classnames_1.default)('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_1.default.createElement("span", { className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (react_1.default.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (react_1.default.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
-        react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
+        react_1.default.createElement("span", { "aria-hidden": true, ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
-            }), onClick: () => !disabled && toggle() },
-            react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true }))));
+            }), onClick: () => !disabled && setIsOpen((o) => !o) },
+            react_1.default.createElement(utils_1.SvgCaretDownSmall, null))));
 };
 exports.Select = Select;
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {

package/cjs/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/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -13,7 +13,15 @@ const LabeledInput_1 = require("../../../LabeledInput");
 const DatePicker_1 = require("../../../DatePicker");
 const Buttons_1 = require("../../../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 (0, utils_1.isBefore)(date, selectedDate);
+        }
+        else {
+            return (0, utils_1.isBefore)(selectedDate, date);
+        }
+    };
     const buttonRef = react_1.default.useRef(null);
     const [inputValue, setInputValue] = react_1.default.useState('');
     react_1.default.useEffect(() => {
@@ -40,7 +48,7 @@ const DatePickerInput = (props) => {
             onChange(parsedDate);
         }
     }, [onChange, parseInput]);
-    return (react_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(DatePicker_1.DatePicker, { date: date, onChange: onDateSelected, setFocus: true }), placement: 'bottom', visible: isVisible, onClickOutside: (_, e) => {
+    return (react_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(DatePicker_1.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/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -65,8 +65,8 @@ const DateRangeFilter = (props) => {
         }
     };
     return (react_1.default.createElement(BaseFilter_1.BaseFilter, null,
-        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
-        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
+        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: to, isFromOrTo: 'from', setFocus: true }),
+        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, selectedDate: from, isFromOrTo: 'to' }),
         react_1.default.createElement(FilterButtonBar_1.FilterButtonBar, { setFilter: () => setFilter([from, to]), clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.DateRangeFilter = DateRangeFilter;

package/cjs/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/cjs/core/utils/components/InputContainer.js

@@ -17,7 +17,8 @@ require("@itwin/itwinui-css/css/utils.css");
  */
 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_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-input-container', {
             'iui-disabled': disabled,
             [`iui-${status}`]: !!status,
@@ -25,9 +26,9 @@ const InputContainer = (props) => {
             'iui-inline-icon': isIconInline,
             'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
         }, className), style: style, ...rest },
-        label && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-label', {
+        label && (react_1.default.createElement(LabelElement, { className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
-            }) }, label)),
+            }), htmlFor: inputId, id: labelId }, label)),
         children,
         statusMessage ? (statusMessage) : (react_1.default.createElement(react_1.default.Fragment, null,
             icon &&

package/cjs/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/cjs/core/utils/functions/date.js

@@ -0,0 +1,21 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBefore = void 0;
+/**
+ * Return true if the first date is earlier than the second date
+ */
+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;
+};
+exports.isBefore = isBefore;

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

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

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

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./date"), exports);
 __exportStar(require("./dom"), exports);
 __exportStar(require("./colors"), exports);
 __exportStar(require("./numbers"), exports);

package/cjs/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/cjs/core/utils/hooks/useId.js

@@ -12,9 +12,12 @@ exports.useId = void 0;
 const react_1 = __importDefault(require("react"));
 const numbers_1 = require("../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`.
  */
-exports.useId = (_a = react_1.default.useId) !== null && _a !== void 0 ? _a : (() => {
-    const [id] = react_1.default.useState(() => `iui-${(0, numbers_1.getRandomValue)(10)}`);
-    return id;
-});
+const useId = () => {
+    const uniqueValue = useUniqueValue();
+    return react_1.default.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
+};
+exports.useId = useId;
+const useUniqueValue = (_a = react_1.default.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_1.getRandomValue)(10));