@itwin/itwinui-react 1.34.0 → 1.35.0

package/cjs/core/Carousel/CarouselSlide.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselSlide = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+var CarouselContext_1 = require("./CarouselContext");
+/**
+ * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
+ *
+ * It is recommended that the slide content bring its own dimensions (esp. height) and that
+ * the dimensions should be the same for all slides.
+ */
+exports.CarouselSlide = react_1.default.forwardRef(function (props, ref) {
+    var index = props.index, className = props.className, children = props.children, rest = __rest(props, ["index", "className", "children"]);
+    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    if (!context || index == null) {
+        throw new Error('CarouselSlide must be used within Carousel');
+    }
+    var currentIndex = context.currentIndex, isManuallyUpdating = context.isManuallyUpdating, setCurrentIndex = context.setCurrentIndex;
+    var updateActiveIndexOnScroll = react_1.default.useCallback(function () {
+        // only update index if scroll was triggered by browser
+        if (!isManuallyUpdating.current && currentIndex !== index) {
+            setCurrentIndex(index);
+        }
+        // when manual scroll completes, reset the state of `isManuallyUpdating` so that it's ready for future actions
+        if (currentIndex === index) {
+            isManuallyUpdating.current = false;
+        }
+    }, [currentIndex, index, isManuallyUpdating, setCurrentIndex]);
+    var intersectionRef = (0, utils_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    var refs = (0, utils_1.useMergedRefs)(intersectionRef, ref);
+    return (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs }, rest), children));
+});

package/cjs/core/Carousel/CarouselSlider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
+ */
+export declare const CarouselSlider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "key" | keyof React.OlHTMLAttributes<HTMLOListElement>> & React.RefAttributes<HTMLOListElement>>;

package/cjs/core/Carousel/CarouselSlider.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselSlider = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var CarouselContext_1 = require("./CarouselContext");
+var utils_1 = require("../utils");
+/**
+ * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
+ */
+exports.CarouselSlider = react_1.default.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    if (!context) {
+        throw new Error('CarouselSlider must be used within Carousel');
+    }
+    var currentIndex = context.currentIndex, setSlideCount = context.setSlideCount, idPrefix = context.idPrefix, isManuallyUpdating = context.isManuallyUpdating, scrollInstantly = context.scrollInstantly;
+    var items = react_1.default.useMemo(function () {
+        var _a;
+        return (_a = react_1.default.Children.map(children, function (child, index) {
+            return react_1.default.isValidElement(child)
+                ? react_1.default.cloneElement(child, {
+                    id: idPrefix + "--slide-" + index,
+                    index: index,
+                })
+                : child;
+        })) !== null && _a !== void 0 ? _a : [];
+    }, [children, idPrefix]);
+    react_1.default.useLayoutEffect(function () {
+        setSlideCount(items.length);
+    }, [items.length, setSlideCount]);
+    var _a = react_1.default.useState(), width = _a[0], setWidth = _a[1];
+    var resizeRef = (0, utils_1.useResizeObserver)(function (_a) {
+        var width = _a.width;
+        return setWidth(width);
+    })[0];
+    var sliderRef = react_1.default.useRef(null);
+    var refs = (0, utils_1.useMergedRefs)(sliderRef, resizeRef, ref);
+    var justMounted = react_1.default.useRef(true);
+    var previousWidth = react_1.default.useRef();
+    react_1.default.useLayoutEffect(function () {
+        var _a, _b, _c;
+        var slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(currentIndex);
+        if (!sliderRef.current ||
+            !slideToShow ||
+            (!isManuallyUpdating.current && previousWidth.current === width)) {
+            return;
+        }
+        // instant scroll on first mount
+        if (justMounted.current) {
+            scrollInstantly.current = true;
+            justMounted.current = false;
+        }
+        var motionOk = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        sliderRef.current.scrollTo({
+            left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+            behavior: (scrollInstantly.current || !motionOk
+                ? 'instant'
+                : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
+        });
+        scrollInstantly.current = false;
+        previousWidth.current = width;
+    }, [currentIndex, isManuallyUpdating, scrollInstantly, width]);
+    return (react_1.default.createElement("ol", __assign({ "aria-live": 'polite', className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs }, rest), items));
+});

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

@@ -0,0 +1,4 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
+declare const _default: "./Carousel";
+export default _default;

package/cjs/core/Carousel/index.js

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

package/cjs/core/ComboBox/ComboBox.js

@@ -300,9 +300,9 @@ var ComboBox = function (props) {
                     }
                     (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
                 } }),
-                react_1.default.createElement(Input_1.Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
+                react_1.default.createElement(Input_1.Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
                         ? getOptionId(focusedIndex)
-                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps))),
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
             react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
                     'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
                     'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,

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

@@ -36,6 +36,11 @@ export declare type DatePickerProps = {
      * @default false
      */
     showTime?: boolean;
+    /**
+     * Show additional buttons to select year.
+     * @default false
+     */
+    showYearSelection?: boolean;
 } & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component

package/cjs/core/DatePicker/DatePicker.js

@@ -32,6 +32,8 @@ exports.DatePicker = exports.generateLocalizedStrings = void 0;
  *--------------------------------------------------------------------------------------------*/
 var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var ChevronLeftDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeftDouble"));
+var ChevronRightDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRightDouble"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -127,15 +129,15 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  */
 var DatePicker = function (props) {
     var _a, _b, _c;
-    var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, _e = props.showTime, showTime = _e === void 0 ? false : _e, _f = props.use12Hours, use12Hours = _f === void 0 ? false : _f, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep"]);
+    var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, _e = props.showTime, showTime = _e === void 0 ? false : _e, _f = props.use12Hours, use12Hours = _f === void 0 ? false : _f, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, _g = props.showYearSelection, showYearSelection = _g === void 0 ? false : _g, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "showYearSelection"]);
     (0, utils_1.useTheme)();
     var monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     var shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
     var longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
-    var _g = react_1.default.useState(date), selectedDay = _g[0], setSelectedDay = _g[1];
-    var _h = react_1.default.useState(selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date()), focusedDay = _h[0], setFocusedDay = _h[1];
-    var _j = react_1.default.useState(selectedDay ? selectedDay.getMonth() : new Date().getMonth()), displayedMonthIndex = _j[0], setDisplayedMonthIndex = _j[1];
-    var _k = react_1.default.useState(selectedDay ? selectedDay.getFullYear() : new Date().getFullYear()), displayedYear = _k[0], setDisplayedYear = _k[1];
+    var _h = react_1.default.useState(date), selectedDay = _h[0], setSelectedDay = _h[1];
+    var _j = react_1.default.useState(selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date()), focusedDay = _j[0], setFocusedDay = _j[1];
+    var _k = react_1.default.useState(selectedDay ? selectedDay.getMonth() : new Date().getMonth()), displayedMonthIndex = _k[0], setDisplayedMonthIndex = _k[1];
+    var _l = react_1.default.useState(selectedDay ? selectedDay.getFullYear() : new Date().getFullYear()), displayedYear = _l[0], setDisplayedYear = _l[1];
     // Used to focus days only when days are changed
     // e.g. without this, when changing months day would be focused
     var needFocus = react_1.default.useRef(setFocus);
@@ -181,6 +183,16 @@ var DatePicker = function (props) {
         var newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
         return newDate;
     };
+    var handleMoveToPreviousYear = function () {
+        var newYear = displayedYear - 1;
+        setMonthAndYear(displayedMonthIndex, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+    };
+    var handleMoveToNextYear = function () {
+        var newYear = displayedYear + 1;
+        setMonthAndYear(displayedMonthIndex, newYear);
+        setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
+    };
     var handleMoveToPreviousMonth = function () {
         var newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
         var newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
@@ -253,26 +265,39 @@ var DatePicker = function (props) {
                 break;
         }
     };
+    var getDayClass = function (day) {
+        if (day.getMonth() !== displayedMonthIndex) {
+            return 'iui-calendar-day-outside-month';
+        }
+        var dayClass = 'iui-calendar-day';
+        if (isSameDay(day, selectedDay)) {
+            dayClass += '-selected';
+        }
+        if (isSameDay(day, new Date())) {
+            dayClass += '-today';
+        }
+        return dayClass;
+    };
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-date-picker', className), style: style }, rest),
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: 'iui-calendar-month-year' },
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month' },
+                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
+                    react_1.default.createElement(ChevronLeftDouble_1.default, null))),
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
                     react_1.default.createElement(ChevronLeft_1.default, null)),
                 react_1.default.createElement("span", { "aria-live": 'polite' },
                     react_1.default.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month' },
-                    react_1.default.createElement(ChevronRight_1.default, null))),
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
+                    react_1.default.createElement(ChevronRight_1.default, null)),
+                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
+                    react_1.default.createElement(ChevronRightDouble_1.default, null)))),
             react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)); })),
             react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
                 return (react_1.default.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (react_1.default.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: (0, classnames_1.default)('iui-calendar-day', {
-                            'iui-outside-month': weekDay.getMonth() !== displayedMonthIndex,
-                            'iui-today': isSameDay(weekDay, new Date()),
-                            'iui-selected': isSameDay(weekDay, selectedDay),
-                        }), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
+                    return (react_1.default.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
                             return isSameDay(weekDay, focusedDay) &&
                                 needFocus.current &&
                                 (element === null || element === void 0 ? void 0 : element.focus());

package/cjs/core/Modal/Modal.d.ts

@@ -45,6 +45,11 @@ export declare type ModalProps = {
      * @default document
      */
     ownerDocument?: Document;
+    /**
+     * Type of the modal.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'fullPage';
     /**
      * Content of the modal.
      */

package/cjs/core/Modal/Modal.js

@@ -37,6 +37,7 @@ var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Clos
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/modal.css");
 var IconButton_1 = require("../Buttons/IconButton");
+var react_transition_group_1 = require("react-transition-group");
 /**
  * Modal component which can wrap any content.
  * @example
@@ -59,7 +60,7 @@ var IconButton_1 = require("../Buttons/IconButton");
  * </Modal>
  */
 var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? (0, utils_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
+    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.styleType, styleType = _e === void 0 ? 'default' : _e, _f = props.modalRootId, modalRootId = _f === void 0 ? 'iui-react-portal-container' : _f, _g = props.ownerDocument, ownerDocument = _g === void 0 ? (0, utils_1.getDocument)() : _g, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "styleType", "modalRootId", "ownerDocument"]);
     (0, utils_1.useTheme)();
     var container = (0, utils_1.getContainer)(modalRootId, ownerDocument);
     var overlayRef = react_1.default.useRef(null);
@@ -117,14 +118,15 @@ var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (react_dom_1.default.createPortal(isOpen && (react_1.default.createElement(utils_1.FocusTrap, null,
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-            react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                react_1.default.createElement("div", { className: 'iui-title-bar' },
-                    react_1.default.createElement("div", { className: 'iui-title' }, title),
-                    isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                        react_1.default.createElement(Close_1.default, null)))),
-                children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
+    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-modal-animation', timeout: { exit: 600 }, unmountOnExit: true },
+        react_1.default.createElement(utils_1.FocusTrap, null,
+            react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', { 'iui-modal-full-page': styleType === 'fullPage' }, { 'iui-modal-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
+                react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
+                    react_1.default.createElement("div", { className: 'iui-title-bar' },
+                        react_1.default.createElement("div", { className: 'iui-title' }, title),
+                        isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                            react_1.default.createElement(Close_1.default, null)))),
+                    children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

package/cjs/core/Modal/ModalContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/modal.css';
+export declare type ModalContentProps = {
+    /**
+     * Main content in the `Modal`.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * Container for content in `Modal`.
+ */
+export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
+export default ModalContent;

package/cjs/core/Modal/ModalContent.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/modal.css");
+/**
+ * Container for content in `Modal`.
+ */
+var ModalContent = function (props) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal-content', className) }, rest), children));
+};
+exports.ModalContent = ModalContent;
+exports.default = exports.ModalContent;

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

@@ -2,5 +2,7 @@ export { Modal } from './Modal';
 export type { ModalProps } from './Modal';
 export { ModalButtonBar } from './ModalButtonBar';
 export type { ModalButtonBarProps } from './ModalButtonBar';
+export { ModalContent } from './ModalContent';
+export type { ModalContentProps } from './ModalContent';
 declare const _default: "./Modal";
 export default _default;

package/cjs/core/Modal/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButtonBar = exports.Modal = void 0;
+exports.ModalContent = exports.ModalButtonBar = exports.Modal = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -9,4 +9,6 @@ var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 var ModalButtonBar_1 = require("./ModalButtonBar");
 Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return ModalButtonBar_1.ModalButtonBar; } });
+var ModalContent_1 = require("./ModalContent");
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return ModalContent_1.ModalContent; } });
 exports.default = './Modal';

package/cjs/core/Table/Table.js

@@ -234,11 +234,12 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
-    var getPreparedRow = react_1.default.useCallback(function (row) {
+    var getPreparedRow = react_1.default.useCallback(function (index) {
+        var row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
+        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
     }, [
-        data.length,
+        page,
         expanderCell,
         hasAnySubRows,
         instance,
@@ -250,7 +251,7 @@ var Table = function (props) {
         state,
         subComponent,
     ]);
-    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
+    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -274,8 +275,8 @@ var Table = function (props) {
                             }
                         } }),
                         column.render('Header'),
-                        !isLoading && (data.length != 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        !isLoading && data.length != 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
@@ -293,7 +294,7 @@ var Table = function (props) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
+                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
                     react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-row' },

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

@@ -50,15 +50,31 @@ var DateRangeFilter = function (props) {
     (0, utils_1.useTheme)();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _h = react_1.default.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined), from = _h[0], setFrom = _h[1];
+    var onFromChange = react_1.default.useCallback(function (date) {
+        setFrom(function (prevDate) {
+            if (prevDate || !date) {
+                return date;
+            }
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        });
+    }, []);
     var _j = react_1.default.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined), to = _j[0], setTo = _j[1];
+    var onToChange = react_1.default.useCallback(function (date) {
+        setTo(function (prevDate) {
+            if (prevDate || !date) {
+                return date;
+            }
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+        });
+    }, []);
     var onKeyDown = function (event) {
         if (event.key === 'Enter') {
             setFilter([from, to]);
         }
     };
     return (react_1.default.createElement(BaseFilter_1.BaseFilter, null,
-        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.from, date: from, onChange: setFrom, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
-        react_1.default.createElement(DatePickerInput_1.default, { label: translatedStrings.to, date: to, onChange: setTo, 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, 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(FilterButtonBar_1.FilterButtonBar, { setFilter: function () { return setFilter([from, to]); }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };
 exports.DateRangeFilter = DateRangeFilter;

package/cjs/core/index.d.ts

@@ -8,6 +8,8 @@ export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from '.
 export type { ButtonProps, DropdownButtonProps, IconButtonProps, IdeasButtonProps, SplitButtonProps, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker';
@@ -48,8 +50,8 @@ export { LabeledTextarea } from './LabeledTextarea';
 export type { LabeledTextareaProps } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
 export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, } from './Menu';
-export { Modal, ModalButtonBar } from './Modal';
-export type { ModalProps, ModalButtonBarProps } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
+export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators';
 export { Radio } from './Radio';

package/cjs/core/index.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
+exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = void 0;
+exports.MiddleTextTruncation = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -23,6 +24,8 @@ Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function
 Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return Buttons_1.SplitButton; } });
 var ButtonGroup_1 = require("./ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
+var Carousel_1 = require("./Carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var ColorPicker_1 = require("./ColorPicker");
@@ -85,6 +88,7 @@ Object.defineProperty(exports, "MenuExtraContent", { enumerable: true, get: func
 var Modal_1 = require("./Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return Modal_1.ModalButtonBar; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return Modal_1.ModalContent; } });
 var ProgressIndicators_1 = require("./ProgressIndicators");
 Object.defineProperty(exports, "ProgressLinear", { enumerable: true, get: function () { return ProgressIndicators_1.ProgressLinear; } });
 Object.defineProperty(exports, "ProgressRadial", { enumerable: true, get: function () { return ProgressIndicators_1.ProgressRadial; } });

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

@@ -5,3 +5,4 @@ export * from './useResizeObserver';
 export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
+export * from './useMediaQuery';

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

@@ -21,3 +21,4 @@ __exportStar(require("./useResizeObserver"), exports);
 __exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);
+__exportStar(require("./useMediaQuery"), exports);

package/cjs/core/utils/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (queryString: string) => boolean;
+export default useMediaQuery;