@itwin/itwinui-react 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.2.0](https://www.github.com/iTwin/iTwinUI-react/compare/v2.1.0...v2.2.0) (2022-12-19)
+
+### What's new
+
+* **NotificationMarker:** Add new `NotificationMarker` component ([#829](https://www.github.com/iTwin/iTwinUI-react/issues/829)) ([6a0a6c3](https://www.github.com/iTwin/iTwinUI-react/commit/6a0a6c3913a0d5ca51f9835f517bdac36236e8c9))
+* **Table:** `onFilter` gets filtered rows ([#958](https://www.github.com/iTwin/iTwinUI-react/issues/958)) ([84bc9e9](https://www.github.com/iTwin/iTwinUI-react/commit/84bc9e9dd957ed7e87ef9f3fc617c83c74127a5f))
+* **Timepicker:** Add combined time column ([#844](https://www.github.com/iTwin/iTwinUI-react/issues/844)) ([86050eb](https://www.github.com/iTwin/iTwinUI-react/commit/86050eb6d971437f287d13dbf9935d8dafbbb281))
+
+### Fixes
+
+* **Table:** Reset `columnOrder` when `columns` changes ([#983](https://www.github.com/iTwin/iTwinUI-react/issues/983)) ([4f184f6](https://www.github.com/iTwin/iTwinUI-react/commit/4f184f6caf37545a0008e6b9cd5d218bd218fdbd))
+
 ### 2.1.1 (2022-12-16)
 
 ### Fixes

package/cjs/core/DatePicker/DatePicker.js

@@ -130,7 +130,7 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  */
 const DatePicker = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
+    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
     (0, utils_1.useTheme)();
     const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
@@ -368,7 +368,7 @@ const DatePicker = (props) => {
                             (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
                 })));
             }))),
-        showTime && (react_1.default.createElement(TimePicker_1.TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, onChange: (date) => {
+        showTime && (react_1.default.createElement(TimePicker_1.TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => {
                 var _a, _b, _c, _d, _e, _f;
                 return isSingleOnChange(onChange, enableRangeSelect)
                     ? onChange === null || onChange === void 0 ? void 0 : onChange(date)

package/cjs/core/NotificationMarker/NotificationMarker.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
+export declare type NotificationMarkerProps = {
+    /**
+     * Content of the NotificationMarker.
+     */
+    children: React.ReactNode;
+    /**
+     * Status of notification
+     *
+     * - 'primary' = blue,
+     * - 'positive' = green,
+     * - 'warning' = orange,
+     * - 'negative' = red,
+     * - 'white' = white (useful for notifications in buttons with `style` = `high-visibility` | `cta`),
+     * @default 'primary'
+     */
+    status?: 'primary' | 'positive' | 'warning' | 'negative' | 'white';
+    /**
+     * Adds a pulse effect to the notification.
+     *
+     * **WARNING**: Avoid overuse of this prop.
+     * @default false
+     */
+    pulsing?: boolean;
+    /**
+     * Set this programmatically to false when you just want to render the passed children without the notification
+     * @default true
+     * @example
+     * let [newMessagesCount, ...] = useState(0);
+     * ...
+     * <NotificationMarker enabled={newMessagesCount > 0}>
+     *   <SvgNotification />
+     * </NotificationMarker>
+     */
+    enabled?: boolean;
+} & React.ComponentProps<'span'>;
+/**
+ * A small notification circle to the top-right of the passed children prop.
+ * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
+ * @example
+ * <IconButton styleType='borderless'>
+ *   <NotificationMarker>
+ *     <SvgNotification />
+ *   </NotificationMarker>
+ * </IconButton>
+ * @example
+ * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
+ */
+export declare const NotificationMarker: React.ForwardRefExoticComponent<Pick<NotificationMarkerProps, "key" | "status" | keyof React.HTMLAttributes<HTMLSpanElement> | "enabled" | "pulsing"> & React.RefAttributes<HTMLSpanElement>>;
+export default NotificationMarker;

package/cjs/core/NotificationMarker/NotificationMarker.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationMarker = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/utils.css");
+/**
+ * A small notification circle to the top-right of the passed children prop.
+ * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
+ * @example
+ * <IconButton styleType='borderless'>
+ *   <NotificationMarker>
+ *     <SvgNotification />
+ *   </NotificationMarker>
+ * </IconButton>
+ * @example
+ * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
+ */
+exports.NotificationMarker = react_1.default.forwardRef((props, ref) => {
+    const { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("span", { ref: ref, className: (0, classnames_1.default)({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
+});
+exports.default = exports.NotificationMarker;

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

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

package/cjs/core/NotificationMarker/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationMarker = 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 NotificationMarker_1 = require("./NotificationMarker");
+Object.defineProperty(exports, "NotificationMarker", { enumerable: true, get: function () { return NotificationMarker_1.NotificationMarker; } });
+exports.default = './NotificationMarker';

package/cjs/core/Table/Table.d.ts

@@ -117,7 +117,7 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side.
      * Must be memoized.
      */
-    onFilter?: (filters: TableFilterValue<T>[], state: TableState<T>) => void;
+    onFilter?: (filters: TableFilterValue<T>[], state: TableState<T>, filteredData?: Row<T>[]) => void;
     /**
      * Value used for global filtering.
      * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side.

package/cjs/core/Table/Table.js

@@ -123,13 +123,15 @@ const Table = (props) => {
         disableUserSelect,
         enableUserSelect,
     ]);
+    const previousFilter = react_1.default.useRef([]);
+    const currentFilter = react_1.default.useRef(previousFilter.current);
     const tableStateReducer = react_1.default.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
                 onSort === null || onSort === void 0 ? void 0 : onSort(newState);
                 break;
             case react_table_1.actions.setFilter:
-                (0, actionHandlers_1.onFilterHandler)(newState, action, previousState, instance, onFilter);
+                currentFilter.current = (0, actionHandlers_1.onFilterHandler)(newState, action, previousState, currentFilter.current, instance);
                 break;
             case react_table_1.actions.toggleRowExpanded:
             case react_table_1.actions.toggleAllRowsExpanded:
@@ -173,7 +175,6 @@ const Table = (props) => {
         hasManualSelectionColumn,
         isRowDisabled,
         onExpand,
-        onFilter,
         onSelect,
         onSort,
         stateReducer,
@@ -249,6 +250,22 @@ const Table = (props) => {
     react_1.default.useEffect(() => {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
+    react_1.default.useEffect(() => {
+        if (previousFilter.current !== currentFilter.current) {
+            previousFilter.current = currentFilter.current;
+            onFilter === null || onFilter === void 0 ? void 0 : onFilter(currentFilter.current, state, instance.filteredRows);
+        }
+    }, [state, instance.filteredRows, onFilter]);
+    const lastPassedColumns = react_1.default.useRef([]);
+    // Reset the column order whenever new columns are passed
+    // This is to avoid the old columnOrder from affecting the new columns' columnOrder
+    react_1.default.useEffect(() => {
+        // Check if columns have changed (by value)
+        if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
+            instance.setColumnOrder([]);
+        }
+        lastPassedColumns.current = columns;
+    }, [columns, instance]);
     const paginatorRendererProps = react_1.default.useMemo(() => ({
         currentPage: state.pageIndex,
         pageSize: state.pageSize,

package/cjs/core/Table/actionHandlers/filterHandler.d.ts

@@ -1,3 +1,3 @@
 import { ActionType, TableInstance, TableState } from 'react-table';
 import { TableFilterValue } from '../filters';
-export declare const onFilterHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, previousState: TableState<T>, instance?: TableInstance<T> | undefined, onFilter?: ((filters: TableFilterValue<T>[], state: TableState<T>) => void) | undefined) => void;
+export declare const onFilterHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, previousState: TableState<T>, currentFilter: TableFilterValue<T>[], instance?: TableInstance<T> | undefined) => TableFilterValue<T>[];

package/cjs/core/Table/actionHandlers/filterHandler.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.onFilterHandler = void 0;
-const onFilterHandler = (newState, action, previousState, instance, onFilter) => {
+const onFilterHandler = (newState, action, previousState, currentFilter, instance) => {
     const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
     if ((previousFilter === null || previousFilter === void 0 ? void 0 : previousFilter.value) != action.filterValue) {
         const filters = newState.filters.map((f) => {
@@ -14,7 +14,8 @@ const onFilterHandler = (newState, action, previousState, instance, onFilter) =>
                 filterType: (_b = column === null || column === void 0 ? void 0 : column.filter) !== null && _b !== void 0 ? _b : 'text',
             };
         });
-        onFilter === null || onFilter === void 0 ? void 0 : onFilter(filters, newState);
+        return filters;
     }
+    return currentFilter;
 };
 exports.onFilterHandler = onFilterHandler;

package/cjs/core/TimePicker/TimePicker.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/time-picker.css';
 export declare type MeridiemType = 'AM' | 'PM';
+export declare type Precision = 'hours' | 'minutes' | 'seconds';
 export declare type TimePickerProps = {
     /**
      * Selected date. Only time is used from Date object.
@@ -20,7 +21,7 @@ export declare type TimePickerProps = {
      * Precision of the time.
      * @default 'minutes'
      */
-    precision?: 'hours' | 'minutes' | 'seconds';
+    precision?: Precision;
     /**
      * Change step of the hours displayed.
      * @default 1
@@ -61,6 +62,30 @@ export declare type TimePickerProps = {
      * @default (meridiem: MeridiemType) => meridiem
      */
     meridiemRenderer?: (meridiem: MeridiemType) => React.ReactNode;
+    /**
+     * Use combined time renderer. Combines hour, minute, and seconds into one column.
+     * **WARNING**: Using the combined renderer with a `precision` of 'seconds' along with
+     * small time steps (`hourStep`, `minuteStep`, and especially `secondStep`) can result in slow performance!
+     * @default false
+     */
+    useCombinedRenderer?: boolean;
+    /**
+     * Custom combined time renderer.
+     * Default returns time in `HH:MM:SS` format
+     * @default (date: Date, precision: Precision) => {
+     *   let dateString = '';
+     *   switch (precision) {
+     *     case 'seconds':
+     *        dateString = ':' + date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
+     *      case 'minutes':
+     *        dateString = ':' + date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }) + dateString;
+     *      case 'hours':
+     *        dateString = date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }) + dateString;
+     *    }
+     *    return dateString;
+     *   }
+     */
+    combinedRenderer?: (date: Date, precision: Precision) => React.ReactNode;
 } & StylingProps;
 /**
  * Time picker component

package/cjs/core/TimePicker/TimePicker.js

@@ -27,6 +27,24 @@ const isSameMinute = (date1, date2) => {
 const isSameSecond = (date1, date2) => {
     return !!date2 && date1.getSeconds() === date2.getSeconds();
 };
+const isSameTime = (date1, date2, precision, meridiem) => {
+    let isSameTime = true;
+    switch (precision) {
+        case 'seconds':
+            isSameTime = isSameSecond(date1, date2);
+            if (!isSameTime) {
+                break;
+            }
+        case 'minutes':
+            isSameTime = isSameMinute(date1, date2);
+            if (!isSameTime) {
+                break;
+            }
+        case 'hours':
+            isSameTime = isSameHour(date1, date2, meridiem);
+    }
+    return isSameTime;
+};
 const isSameMeridiem = (meridiem, date) => {
     return (!!date && (meridiem === 'AM' ? date.getHours() < 12 : date.getHours() >= 12));
 };
@@ -37,13 +55,36 @@ const formatHourFrom12 = (hour, meridiem) => {
 const setHours = (hour, date) => {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hour, date.getMinutes(), date.getSeconds());
 };
+const defaultCombinedRenderer = (date, precision) => {
+    let dateString = '';
+    switch (precision) {
+        case 'seconds':
+            dateString =
+                ':' +
+                    date
+                        .getSeconds()
+                        .toLocaleString(undefined, { minimumIntegerDigits: 2 });
+        case 'minutes':
+            dateString =
+                ':' +
+                    date
+                        .getMinutes()
+                        .toLocaleString(undefined, { minimumIntegerDigits: 2 }) +
+                    dateString;
+        case 'hours':
+            dateString =
+                date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }) +
+                    dateString;
+    }
+    return dateString;
+};
 /**
  * Time picker component
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
 const TimePicker = (props) => {
-    const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, className, ...rest } = props;
+    const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, useCombinedRenderer = false, combinedRenderer = defaultCombinedRenderer, className, ...rest } = props;
     (0, utils_1.useTheme)();
     const [selectedTime, setSelectedTime] = react_1.default.useState(date);
     const [focusedTime, setFocusedTime] = react_1.default.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
@@ -59,6 +100,13 @@ const TimePicker = (props) => {
         const adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
         updateCurrentTime(adjustedSelectedTime);
     };
+    const onTimeClick = (date) => {
+        const adjustedHour = use12Hours
+            ? formatHourFrom12(date.getHours(), meridiem)
+            : date.getHours();
+        const adjustedSelectedTime = setHours(adjustedHour, date);
+        updateCurrentTime(adjustedSelectedTime);
+    };
     const onMeridiemClick = (value) => {
         let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         const currentHours = adjustedSelectedTime.getHours();
@@ -90,6 +138,12 @@ const TimePicker = (props) => {
             : date.getHours();
         setFocusedTime(setHours(adjustedHour, focusedTime));
     };
+    const onTimeFocus = (date) => {
+        const adjustedHour = use12Hours
+            ? formatHourFrom12(date.getHours(), meridiem)
+            : date.getHours();
+        setFocusedTime(setHours(adjustedHour, date));
+    };
     const onMeridiemFocus = (value) => {
         let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         const currentHours = adjustedSelectedTime.getHours();
@@ -105,13 +159,40 @@ const TimePicker = (props) => {
     };
     const generateDataList = (size, value, step) => {
         const data = [];
-        for (let i = 0; i < size; ++i) {
+        for (let i = 0; i < size; i++) {
             if (i % step === 0) {
                 data.push(value(i));
             }
         }
         return data;
     };
+    const time = react_1.default.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const data = [];
+        const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
+            .filter((i) => i % hourStep === 0)
+            .map((i) => (use12Hours && i === 0 ? 12 : i));
+        const minutesArray = Array.from(Array(60).keys()).filter((i) => i % minuteStep === 0);
+        const secondsArray = Array.from(Array(60).keys()).filter((i) => i % secondStep === 0);
+        hoursArray.forEach((hour) => {
+            if (precision === 'hours') {
+                data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, time.getMinutes(), time.getSeconds()));
+            }
+            else {
+                minutesArray.forEach((minute) => {
+                    if (precision === 'minutes') {
+                        data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, minute, time.getSeconds()));
+                    }
+                    else {
+                        secondsArray.forEach((second) => {
+                            data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, minute, second));
+                        });
+                    }
+                });
+            }
+        });
+        return data;
+    }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
     const hours = react_1.default.useMemo(() => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
@@ -125,14 +206,15 @@ const TimePicker = (props) => {
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-time-picker', className), ...rest },
-        react_1.default.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
-        precision != 'hours' && (react_1.default.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
-        precision == 'seconds' && (react_1.default.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })),
+        useCombinedRenderer ? (react_1.default.createElement(TimePickerColumn, { data: time, isSameFocused: (val) => isSameTime(val, focusedTime, precision, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameTime(val, selectedTime, precision, use12Hours ? meridiem : undefined), onFocusChange: onTimeFocus, onSelectChange: onTimeClick, setFocus: setFocusHour, precision: precision, valueRenderer: combinedRenderer })) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
+            precision !== 'hours' && (react_1.default.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
+            precision === 'seconds' && (react_1.default.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })))),
         use12Hours && (react_1.default.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
 };
 exports.TimePicker = TimePicker;
 const TimePickerColumn = (props) => {
-    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, className = 'iui-time', } = props;
+    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
     const needFocus = react_1.default.useRef(setFocus);
     // Used to focus row only when changed (keyboard navigation)
     // e.g. without this on every rerender it would be focused
@@ -182,7 +264,7 @@ const TimePickerColumn = (props) => {
                     needFocus.current && isSameFocus && (ref === null || ref === void 0 ? void 0 : ref.focus());
                 }, onClick: () => {
                     onSelectChange(value);
-                } }, valueRenderer(value)));
+                } }, valueRenderer(value, precision)));
         }))));
 };
 exports.default = exports.TimePicker;

package/cjs/core/index.d.ts

@@ -60,6 +60,8 @@ export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from
 export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, MenuItemSkeletonProps, } from './Menu';
 export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
+export { NotificationMarker } from './NotificationMarker';
+export type { NotificationMarkerProps } from './NotificationMarker';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators';
 export { Radio } from './Radio';

package/cjs/core/index.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = 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.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
-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.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = void 0;
+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.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -102,6 +102,8 @@ 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 NotificationMarker_1 = require("./NotificationMarker");
+Object.defineProperty(exports, "NotificationMarker", { enumerable: true, get: function () { return NotificationMarker_1.NotificationMarker; } });
 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/esm/core/DatePicker/DatePicker.js

@@ -123,7 +123,7 @@ export const generateLocalizedStrings = (locale) => {
  */
 export const DatePicker = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
+    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
     useTheme();
     const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
@@ -361,7 +361,7 @@ export const DatePicker = (props) => {
                             (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
                 })));
             }))),
-        showTime && (React.createElement(TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, onChange: (date) => {
+        showTime && (React.createElement(TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, useCombinedRenderer: useCombinedRenderer, combinedRenderer: combinedRenderer, hourRenderer: hourRenderer, minuteRenderer: minuteRenderer, secondRenderer: secondRenderer, meridiemRenderer: meridiemRenderer, onChange: (date) => {
                 var _a, _b, _c, _d, _e, _f;
                 return isSingleOnChange(onChange, enableRangeSelect)
                     ? onChange === null || onChange === void 0 ? void 0 : onChange(date)

package/esm/core/NotificationMarker/NotificationMarker.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
+export declare type NotificationMarkerProps = {
+    /**
+     * Content of the NotificationMarker.
+     */
+    children: React.ReactNode;
+    /**
+     * Status of notification
+     *
+     * - 'primary' = blue,
+     * - 'positive' = green,
+     * - 'warning' = orange,
+     * - 'negative' = red,
+     * - 'white' = white (useful for notifications in buttons with `style` = `high-visibility` | `cta`),
+     * @default 'primary'
+     */
+    status?: 'primary' | 'positive' | 'warning' | 'negative' | 'white';
+    /**
+     * Adds a pulse effect to the notification.
+     *
+     * **WARNING**: Avoid overuse of this prop.
+     * @default false
+     */
+    pulsing?: boolean;
+    /**
+     * Set this programmatically to false when you just want to render the passed children without the notification
+     * @default true
+     * @example
+     * let [newMessagesCount, ...] = useState(0);
+     * ...
+     * <NotificationMarker enabled={newMessagesCount > 0}>
+     *   <SvgNotification />
+     * </NotificationMarker>
+     */
+    enabled?: boolean;
+} & React.ComponentProps<'span'>;
+/**
+ * A small notification circle to the top-right of the passed children prop.
+ * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
+ * @example
+ * <IconButton styleType='borderless'>
+ *   <NotificationMarker>
+ *     <SvgNotification />
+ *   </NotificationMarker>
+ * </IconButton>
+ * @example
+ * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
+ */
+export declare const NotificationMarker: React.ForwardRefExoticComponent<Pick<NotificationMarkerProps, "key" | "status" | keyof React.HTMLAttributes<HTMLSpanElement> | "enabled" | "pulsing"> & React.RefAttributes<HTMLSpanElement>>;
+export default NotificationMarker;

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/utils.css';
+/**
+ * A small notification circle to the top-right of the passed children prop.
+ * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
+ * @example
+ * <IconButton styleType='borderless'>
+ *   <NotificationMarker>
+ *     <SvgNotification />
+ *   </NotificationMarker>
+ * </IconButton>
+ * @example
+ * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
+ */
+export const NotificationMarker = React.forwardRef((props, ref) => {
+    const { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
+    useTheme();
+    return (React.createElement("span", { ref: ref, className: cx({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
+});
+export default NotificationMarker;

package/esm/core/NotificationMarker/index.d.ts

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

package/esm/core/NotificationMarker/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { NotificationMarker } from './NotificationMarker';
+export default './NotificationMarker';

package/esm/core/Table/Table.d.ts

@@ -117,7 +117,7 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Use with `manualFilters` to handle filtering yourself e.g. filter in server-side.
      * Must be memoized.
      */
-    onFilter?: (filters: TableFilterValue<T>[], state: TableState<T>) => void;
+    onFilter?: (filters: TableFilterValue<T>[], state: TableState<T>, filteredData?: Row<T>[]) => void;
     /**
      * Value used for global filtering.
      * Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side.

package/esm/core/Table/Table.js

@@ -117,13 +117,15 @@ export const Table = (props) => {
         disableUserSelect,
         enableUserSelect,
     ]);
+    const previousFilter = React.useRef([]);
+    const currentFilter = React.useRef(previousFilter.current);
     const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case TableActions.toggleSortBy:
                 onSort === null || onSort === void 0 ? void 0 : onSort(newState);
                 break;
             case TableActions.setFilter:
-                onFilterHandler(newState, action, previousState, instance, onFilter);
+                currentFilter.current = onFilterHandler(newState, action, previousState, currentFilter.current, instance);
                 break;
             case TableActions.toggleRowExpanded:
             case TableActions.toggleAllRowsExpanded:
@@ -167,7 +169,6 @@ export const Table = (props) => {
         hasManualSelectionColumn,
         isRowDisabled,
         onExpand,
-        onFilter,
         onSelect,
         onSort,
         stateReducer,
@@ -243,6 +244,22 @@ export const Table = (props) => {
     React.useEffect(() => {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
+    React.useEffect(() => {
+        if (previousFilter.current !== currentFilter.current) {
+            previousFilter.current = currentFilter.current;
+            onFilter === null || onFilter === void 0 ? void 0 : onFilter(currentFilter.current, state, instance.filteredRows);
+        }
+    }, [state, instance.filteredRows, onFilter]);
+    const lastPassedColumns = React.useRef([]);
+    // Reset the column order whenever new columns are passed
+    // This is to avoid the old columnOrder from affecting the new columns' columnOrder
+    React.useEffect(() => {
+        // Check if columns have changed (by value)
+        if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
+            instance.setColumnOrder([]);
+        }
+        lastPassedColumns.current = columns;
+    }, [columns, instance]);
     const paginatorRendererProps = React.useMemo(() => ({
         currentPage: state.pageIndex,
         pageSize: state.pageSize,

package/esm/core/Table/actionHandlers/filterHandler.d.ts

@@ -1,3 +1,3 @@
 import { ActionType, TableInstance, TableState } from 'react-table';
 import { TableFilterValue } from '../filters';
-export declare const onFilterHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, previousState: TableState<T>, instance?: TableInstance<T> | undefined, onFilter?: ((filters: TableFilterValue<T>[], state: TableState<T>) => void) | undefined) => void;
+export declare const onFilterHandler: <T extends Record<string, unknown>>(newState: TableState<T>, action: ActionType, previousState: TableState<T>, currentFilter: TableFilterValue<T>[], instance?: TableInstance<T> | undefined) => TableFilterValue<T>[];

package/esm/core/Table/actionHandlers/filterHandler.js

@@ -1,4 +1,4 @@
-export const onFilterHandler = (newState, action, previousState, instance, onFilter) => {
+export const onFilterHandler = (newState, action, previousState, currentFilter, instance) => {
     const previousFilter = previousState.filters.find((f) => f.id === action.columnId);
     if ((previousFilter === null || previousFilter === void 0 ? void 0 : previousFilter.value) != action.filterValue) {
         const filters = newState.filters.map((f) => {
@@ -11,6 +11,7 @@ export const onFilterHandler = (newState, action, previousState, instance, onFil
                 filterType: (_b = column === null || column === void 0 ? void 0 : column.filter) !== null && _b !== void 0 ? _b : 'text',
             };
         });
-        onFilter === null || onFilter === void 0 ? void 0 : onFilter(filters, newState);
+        return filters;
     }
+    return currentFilter;
 };

package/esm/core/TimePicker/TimePicker.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/time-picker.css';
 export declare type MeridiemType = 'AM' | 'PM';
+export declare type Precision = 'hours' | 'minutes' | 'seconds';
 export declare type TimePickerProps = {
     /**
      * Selected date. Only time is used from Date object.
@@ -20,7 +21,7 @@ export declare type TimePickerProps = {
      * Precision of the time.
      * @default 'minutes'
      */
-    precision?: 'hours' | 'minutes' | 'seconds';
+    precision?: Precision;
     /**
      * Change step of the hours displayed.
      * @default 1
@@ -61,6 +62,30 @@ export declare type TimePickerProps = {
      * @default (meridiem: MeridiemType) => meridiem
      */
     meridiemRenderer?: (meridiem: MeridiemType) => React.ReactNode;
+    /**
+     * Use combined time renderer. Combines hour, minute, and seconds into one column.
+     * **WARNING**: Using the combined renderer with a `precision` of 'seconds' along with
+     * small time steps (`hourStep`, `minuteStep`, and especially `secondStep`) can result in slow performance!
+     * @default false
+     */
+    useCombinedRenderer?: boolean;
+    /**
+     * Custom combined time renderer.
+     * Default returns time in `HH:MM:SS` format
+     * @default (date: Date, precision: Precision) => {
+     *   let dateString = '';
+     *   switch (precision) {
+     *     case 'seconds':
+     *        dateString = ':' + date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
+     *      case 'minutes':
+     *        dateString = ':' + date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }) + dateString;
+     *      case 'hours':
+     *        dateString = date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }) + dateString;
+     *    }
+     *    return dateString;
+     *   }
+     */
+    combinedRenderer?: (date: Date, precision: Precision) => React.ReactNode;
 } & StylingProps;
 /**
  * Time picker component

package/esm/core/TimePicker/TimePicker.js

@@ -21,6 +21,24 @@ const isSameMinute = (date1, date2) => {
 const isSameSecond = (date1, date2) => {
     return !!date2 && date1.getSeconds() === date2.getSeconds();
 };
+const isSameTime = (date1, date2, precision, meridiem) => {
+    let isSameTime = true;
+    switch (precision) {
+        case 'seconds':
+            isSameTime = isSameSecond(date1, date2);
+            if (!isSameTime) {
+                break;
+            }
+        case 'minutes':
+            isSameTime = isSameMinute(date1, date2);
+            if (!isSameTime) {
+                break;
+            }
+        case 'hours':
+            isSameTime = isSameHour(date1, date2, meridiem);
+    }
+    return isSameTime;
+};
 const isSameMeridiem = (meridiem, date) => {
     return (!!date && (meridiem === 'AM' ? date.getHours() < 12 : date.getHours() >= 12));
 };
@@ -31,13 +49,36 @@ const formatHourFrom12 = (hour, meridiem) => {
 const setHours = (hour, date) => {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hour, date.getMinutes(), date.getSeconds());
 };
+const defaultCombinedRenderer = (date, precision) => {
+    let dateString = '';
+    switch (precision) {
+        case 'seconds':
+            dateString =
+                ':' +
+                    date
+                        .getSeconds()
+                        .toLocaleString(undefined, { minimumIntegerDigits: 2 });
+        case 'minutes':
+            dateString =
+                ':' +
+                    date
+                        .getMinutes()
+                        .toLocaleString(undefined, { minimumIntegerDigits: 2 }) +
+                    dateString;
+        case 'hours':
+            dateString =
+                date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }) +
+                    dateString;
+    }
+    return dateString;
+};
 /**
  * Time picker component
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
 export const TimePicker = (props) => {
-    const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, className, ...rest } = props;
+    const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, useCombinedRenderer = false, combinedRenderer = defaultCombinedRenderer, className, ...rest } = props;
     useTheme();
     const [selectedTime, setSelectedTime] = React.useState(date);
     const [focusedTime, setFocusedTime] = React.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
@@ -53,6 +94,13 @@ export const TimePicker = (props) => {
         const adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
         updateCurrentTime(adjustedSelectedTime);
     };
+    const onTimeClick = (date) => {
+        const adjustedHour = use12Hours
+            ? formatHourFrom12(date.getHours(), meridiem)
+            : date.getHours();
+        const adjustedSelectedTime = setHours(adjustedHour, date);
+        updateCurrentTime(adjustedSelectedTime);
+    };
     const onMeridiemClick = (value) => {
         let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         const currentHours = adjustedSelectedTime.getHours();
@@ -84,6 +132,12 @@ export const TimePicker = (props) => {
             : date.getHours();
         setFocusedTime(setHours(adjustedHour, focusedTime));
     };
+    const onTimeFocus = (date) => {
+        const adjustedHour = use12Hours
+            ? formatHourFrom12(date.getHours(), meridiem)
+            : date.getHours();
+        setFocusedTime(setHours(adjustedHour, date));
+    };
     const onMeridiemFocus = (value) => {
         let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         const currentHours = adjustedSelectedTime.getHours();
@@ -99,13 +153,40 @@ export const TimePicker = (props) => {
     };
     const generateDataList = (size, value, step) => {
         const data = [];
-        for (let i = 0; i < size; ++i) {
+        for (let i = 0; i < size; i++) {
             if (i % step === 0) {
                 data.push(value(i));
             }
         }
         return data;
     };
+    const time = React.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const data = [];
+        const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
+            .filter((i) => i % hourStep === 0)
+            .map((i) => (use12Hours && i === 0 ? 12 : i));
+        const minutesArray = Array.from(Array(60).keys()).filter((i) => i % minuteStep === 0);
+        const secondsArray = Array.from(Array(60).keys()).filter((i) => i % secondStep === 0);
+        hoursArray.forEach((hour) => {
+            if (precision === 'hours') {
+                data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, time.getMinutes(), time.getSeconds()));
+            }
+            else {
+                minutesArray.forEach((minute) => {
+                    if (precision === 'minutes') {
+                        data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, minute, time.getSeconds()));
+                    }
+                    else {
+                        secondsArray.forEach((second) => {
+                            data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, minute, second));
+                        });
+                    }
+                });
+            }
+        });
+        return data;
+    }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
     const hours = React.useMemo(() => {
         const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
         return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
@@ -119,13 +200,14 @@ export const TimePicker = (props) => {
         return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
     return (React.createElement("div", { className: cx('iui-time-picker', className), ...rest },
-        React.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
-        precision != 'hours' && (React.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
-        precision == 'seconds' && (React.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })),
+        useCombinedRenderer ? (React.createElement(TimePickerColumn, { data: time, isSameFocused: (val) => isSameTime(val, focusedTime, precision, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameTime(val, selectedTime, precision, use12Hours ? meridiem : undefined), onFocusChange: onTimeFocus, onSelectChange: onTimeClick, setFocus: setFocusHour, precision: precision, valueRenderer: combinedRenderer })) : (React.createElement(React.Fragment, null,
+            React.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
+            precision !== 'hours' && (React.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
+            precision === 'seconds' && (React.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })))),
         use12Hours && (React.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
 };
 const TimePickerColumn = (props) => {
-    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, className = 'iui-time', } = props;
+    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
     const needFocus = React.useRef(setFocus);
     // Used to focus row only when changed (keyboard navigation)
     // e.g. without this on every rerender it would be focused
@@ -175,7 +257,7 @@ const TimePickerColumn = (props) => {
                     needFocus.current && isSameFocus && (ref === null || ref === void 0 ? void 0 : ref.focus());
                 }, onClick: () => {
                     onSelectChange(value);
-                } }, valueRenderer(value)));
+                } }, valueRenderer(value, precision)));
         }))));
 };
 export default TimePicker;

package/esm/core/index.d.ts

@@ -60,6 +60,8 @@ export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from
 export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, MenuItemSkeletonProps, } from './Menu';
 export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
+export { NotificationMarker } from './NotificationMarker';
+export type { NotificationMarkerProps } from './NotificationMarker';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators';
 export { Radio } from './Radio';

package/esm/core/index.js

@@ -33,6 +33,7 @@ export { LabeledSelect } from './LabeledSelect';
 export { LabeledTextarea } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from './Menu';
 export { Modal, ModalButtonBar, ModalContent } from './Modal';
+export { NotificationMarker } from './NotificationMarker';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export { Radio } from './Radio';
 export { RadioTile, RadioTileGroup } from './RadioTiles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",