@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/esm/core/Tag/TagContainer.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -34,13 +12,12 @@ import '@itwin/itwinui-css/css/tag.css';
  * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
-export var TagContainer = function (props) {
-    var _a;
-    var className = props.className, children = props.children, overflow = props.overflow, _b = props.background, background = _b === void 0 ? 'none' : _b, rest = __rest(props, ["className", "children", "overflow", "background"]);
+export const TagContainer = (props) => {
+    const { className, children, overflow, background = 'none', ...rest } = props;
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-tag-container', (_a = {},
-            _a["iui-".concat(overflow)] = !!overflow,
-            _a['iui-visible'] = background !== 'none',
-            _a), className) }, rest), children));
+    return (React.createElement("div", { className: cx('iui-tag-container', {
+            [`iui-${overflow}`]: !!overflow,
+            'iui-visible': background !== 'none',
+        }, className), ...rest }, children));
 };
 export default TagContainer;

package/esm/core/Textarea/Textarea.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -34,16 +12,16 @@ import '@itwin/itwinui-css/css/input.css';
  * <Textarea setFocus={true} placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export var Textarea = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.rows, rows = _a === void 0 ? 3 : _a, _b = props.setFocus, setFocus = _b === void 0 ? false : _b, rest = __rest(props, ["className", "rows", "setFocus"]);
+export const Textarea = React.forwardRef((props, ref) => {
+    const { className, rows = 3, setFocus = false, ...rest } = props;
     useTheme();
-    var textAreaRef = React.useRef(null);
-    var refs = useMergedRefs(ref, textAreaRef);
-    React.useEffect(function () {
+    const textAreaRef = React.useRef(null);
+    const refs = useMergedRefs(ref, textAreaRef);
+    React.useEffect(() => {
         if (textAreaRef.current && setFocus) {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("textarea", __assign({ className: cx('iui-input', className), rows: rows, ref: refs }, rest)));
+    return (React.createElement("textarea", { className: cx('iui-input', className), rows: rows, ref: refs, ...rest }));
 });
 export default Textarea;

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -28,4 +28,5 @@ export default ThemeProvider;
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
+    rootRef: React.RefObject<HTMLElement>;
 } | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -1,32 +1,10 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * 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 cx from 'classnames';
-import { useTheme, useMediaQuery } from '../utils';
+import { useTheme, useMediaQuery, useMergedRefs } from '../utils';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
 /**
@@ -49,25 +27,26 @@ import '@itwin/itwinui-variables/index.css';
  *   <App />
  * </ThemeProvider>
  */
-export var ThemeProvider = React.forwardRef(function (props, ref) {
+export const ThemeProvider = React.forwardRef((props, ref) => {
     var _a;
-    var theme = props.theme, children = props.children, themeOptions = props.themeOptions, _b = props.as, Element = _b === void 0 ? 'div' : _b, className = props.className, rest = __rest(props, ["theme", "children", "themeOptions", "as", "className"]);
-    var hasChildren = React.Children.count(children) > 0;
-    var parentContext = React.useContext(ThemeContext);
-    var prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
-    var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-    var shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-    var shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
+    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const rootRef = React.useRef(null);
+    const mergedRefs = useMergedRefs(rootRef, ref);
+    const hasChildren = React.Children.count(children) > 0;
+    const parentContext = React.useContext(ThemeContext);
+    const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+    const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+    const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+    const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
     // only provide context if wrapped around children
-    return hasChildren ? (React.createElement(ThemeContext.Provider, { value: { theme: theme, themeOptions: themeOptions } },
-        React.createElement(Element, __assign({ className: cx('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: ref }, rest), children))) : (
+    return hasChildren ? (React.createElement(ThemeContext.Provider, { value: { theme, themeOptions, rootRef } },
+        React.createElement(Element, { className: cx('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children))) : (
     // otherwise just apply theme on the root using this wrapper component
     React.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
 });
 export default ThemeProvider;
-export var ThemeContext = React.createContext(undefined);
-var ThemeLogicWrapper = function (_a) {
-    var theme = _a.theme, themeOptions = _a.themeOptions;
+export const ThemeContext = React.createContext(undefined);
+const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     useTheme(theme, themeOptions);
     return React.createElement(React.Fragment, null);
 };

package/esm/core/Tile/Tile.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -48,24 +26,22 @@ import { ProgressRadial } from '../ProgressIndicators';
  *  isNew={false}
  * />
  */
-export var Tile = function (props) {
-    var _a;
-    var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _b = props.variant, variant = _b === void 0 ? 'default' : _b, children = props.children, isActionable = props.isActionable, status = props.status, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.isDisabled, isDisabled = _d === void 0 ? false : _d, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable", "status", "isLoading", "isDisabled"]);
+export const Tile = (props) => {
+    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable, status, isLoading = false, isDisabled = false, ...rest } = props;
     useTheme();
-    var _e = React.useState(false), isMenuVisible = _e[0], setIsMenuVisible = _e[1];
-    var showMenu = React.useCallback(function () { return setIsMenuVisible(true); }, []);
-    var hideMenu = React.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (React.createElement("div", __assign({ className: cx('iui-tile', (_a = {
-                'iui-folder': variant === 'folder',
-                'iui-new': isNew,
-                'iui-selected': isSelected,
-                'iui-actionable': isActionable
-            },
-            _a["iui-".concat(status)] = !!status,
-            _a['iui-loading'] = isLoading,
-            _a), className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined }, rest),
+    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
+    const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
+    const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
+    return (React.createElement("div", { className: cx('iui-tile', {
+            'iui-folder': variant === 'folder',
+            'iui-new': isNew,
+            'iui-selected': isSelected,
+            'iui-actionable': isActionable,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading,
+        }, className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined, ...rest },
         thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
+            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                 className: 'iui-tile-thumbnail-picture',
             })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
                 className: cx('iui-thumbnail-icon', thumbnail.props.className),
@@ -87,17 +63,13 @@ export var Tile = function (props) {
                 React.createElement("span", { className: 'iui-tile-name-label' }, name)),
             description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
             metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-            moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
-                    return moreOptions.map(function (option) {
-                        return React.cloneElement(option, {
-                            onClick: function (value) {
-                                var _a, _b;
-                                close();
-                                (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                            },
-                        });
-                    });
-                } },
+            moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
+                    onClick: (value) => {
+                        var _a, _b;
+                        close();
+                        (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                    },
+                })) },
                 React.createElement("div", { className: cx('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
                     }) },
@@ -106,9 +78,8 @@ export var Tile = function (props) {
             children),
         buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
-var TitleIcon = function (_a) {
-    var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.isNew, isNew = _d === void 0 ? false : _d, status = _a.status;
-    var StatusIcon = !!status && StatusIconMap[status];
+const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
+    const StatusIcon = !!status && StatusIconMap[status];
     if (isLoading) {
         return (React.createElement(ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
     }

package/esm/core/TimePicker/TimePicker.js

@@ -1,25 +1,3 @@
-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;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -28,8 +6,8 @@ import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/time-picker.css';
-var isSameHour = function (date1, date2, meridiem) {
-    var adjustedHours = meridiem
+const isSameHour = (date1, date2, meridiem) => {
+    const adjustedHours = meridiem
         ? formatHourFrom12(date1.getHours(), meridiem)
         : date1.getHours();
     if (!!meridiem) {
@@ -37,20 +15,20 @@ var isSameHour = function (date1, date2, meridiem) {
     }
     return !!date2 && adjustedHours === date2.getHours();
 };
-var isSameMinute = function (date1, date2) {
+const isSameMinute = (date1, date2) => {
     return !!date2 && date1.getMinutes() === date2.getMinutes();
 };
-var isSameSecond = function (date1, date2) {
+const isSameSecond = (date1, date2) => {
     return !!date2 && date1.getSeconds() === date2.getSeconds();
 };
-var isSameMeridiem = function (meridiem, date) {
+const isSameMeridiem = (meridiem, date) => {
     return (!!date && (meridiem === 'AM' ? date.getHours() < 12 : date.getHours() >= 12));
 };
-var formatHourFrom12 = function (hour, meridiem) {
-    var adjustedHour = hour % 12;
+const formatHourFrom12 = (hour, meridiem) => {
+    const adjustedHour = hour % 12;
     return meridiem === 'PM' ? adjustedHour + 12 : adjustedHour;
 };
-var setHours = function (hour, date) {
+const setHours = (hour, date) => {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hour, date.getMinutes(), date.getSeconds());
 };
 /**
@@ -58,32 +36,26 @@ var setHours = function (hour, date) {
  * @example
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
-export var TimePicker = function (props) {
-    var date = props.date, onChange = props.onChange, _a = props.use12Hours, use12Hours = _a === void 0 ? false : _a, _b = props.precision, precision = _b === void 0 ? 'minutes' : _b, _c = props.hourStep, hourStep = _c === void 0 ? 1 : _c, _d = props.minuteStep, minuteStep = _d === void 0 ? 1 : _d, _e = props.secondStep, secondStep = _e === void 0 ? 1 : _e, _f = props.setFocusHour, setFocusHour = _f === void 0 ? false : _f, _g = props.hourRenderer, hourRenderer = _g === void 0 ? function (date) {
-        return date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 });
-    } : _g, _h = props.minuteRenderer, minuteRenderer = _h === void 0 ? function (date) {
-        return date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 });
-    } : _h, _j = props.secondRenderer, secondRenderer = _j === void 0 ? function (date) {
-        return date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
-    } : _j, _k = props.meridiemRenderer, meridiemRenderer = _k === void 0 ? function (meridiem) { return meridiem; } : _k, className = props.className, rest = __rest(props, ["date", "onChange", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "setFocusHour", "hourRenderer", "minuteRenderer", "secondRenderer", "meridiemRenderer", "className"]);
+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;
     useTheme();
-    var _l = React.useState(date), selectedTime = _l[0], setSelectedTime = _l[1];
-    var _m = React.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date()), focusedTime = _m[0], setFocusedTime = _m[1];
-    var _o = React.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined), meridiem = _o[0], setMeridiem = _o[1];
-    React.useEffect(function () {
+    const [selectedTime, setSelectedTime] = React.useState(date);
+    const [focusedTime, setFocusedTime] = React.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+    const [meridiem, setMeridiem] = React.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined);
+    React.useEffect(() => {
         setFocusedTime(date !== null && date !== void 0 ? date : new Date());
         setSelectedTime(date);
     }, [date]);
-    var onHourClick = function (date) {
-        var adjustedHour = use12Hours
+    const onHourClick = (date) => {
+        const adjustedHour = use12Hours
             ? formatHourFrom12(date.getHours(), meridiem)
             : date.getHours();
-        var adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
+        const adjustedSelectedTime = setHours(adjustedHour, selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date());
         updateCurrentTime(adjustedSelectedTime);
     };
-    var onMeridiemClick = function (value) {
-        var adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        var currentHours = adjustedSelectedTime.getHours();
+    const onMeridiemClick = (value) => {
+        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const currentHours = adjustedSelectedTime.getHours();
         setMeridiem(value);
         if (value === 'AM' && currentHours > 11) {
             adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
@@ -93,8 +65,8 @@ export var TimePicker = function (props) {
         }
         updateCurrentTime(adjustedSelectedTime);
     };
-    var updateCurrentTime = function (time) {
-        var adjustedTime = time;
+    const updateCurrentTime = (time) => {
+        let adjustedTime = time;
         // Nullify other values, according to precision
         if (precision === 'hours') {
             adjustedTime = new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), 0, 0);
@@ -106,15 +78,15 @@ export var TimePicker = function (props) {
         setSelectedTime(adjustedTime);
         onChange === null || onChange === void 0 ? void 0 : onChange(adjustedTime);
     };
-    var onHourFocus = function (date) {
-        var adjustedHour = use12Hours
+    const onHourFocus = (date) => {
+        const adjustedHour = use12Hours
             ? formatHourFrom12(date.getHours(), meridiem)
             : date.getHours();
         setFocusedTime(setHours(adjustedHour, focusedTime));
     };
-    var onMeridiemFocus = function (value) {
-        var adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        var currentHours = adjustedSelectedTime.getHours();
+    const onMeridiemFocus = (value) => {
+        let adjustedSelectedTime = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        const currentHours = adjustedSelectedTime.getHours();
         if (value === 'AM' && currentHours > 11) {
             setMeridiem(value);
             adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
@@ -125,57 +97,47 @@ export var TimePicker = function (props) {
         }
         setFocusedTime(adjustedSelectedTime);
     };
-    var generateDataList = function (size, value, step) {
-        var data = [];
-        for (var i = 0; i < size; ++i) {
+    const generateDataList = (size, value, step) => {
+        const data = [];
+        for (let i = 0; i < size; ++i) {
             if (i % step === 0) {
                 data.push(value(i));
             }
         }
         return data;
     };
-    var hours = React.useMemo(function () {
-        var time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        return generateDataList(use12Hours ? 12 : 24, function (i) {
-            return new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds());
-        }, hourStep);
+    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);
     }, [hourStep, selectedTime, use12Hours]);
-    var minutes = React.useMemo(function () {
-        var time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        return generateDataList(60, function (i) {
-            return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds());
-        }, minuteStep);
+    const minutes = React.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds()), minuteStep);
     }, [minuteStep, selectedTime]);
-    var seconds = React.useMemo(function () {
-        var time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
-        return generateDataList(60, function (i) {
-            return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i);
-        }, secondStep);
+    const seconds = React.useMemo(() => {
+        const time = selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date();
+        return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
     }, [secondStep, selectedTime]);
-    return (React.createElement("div", __assign({ className: cx('iui-time-picker', className) }, rest),
-        React.createElement(TimePickerColumn, { data: hours, isSameFocused: function (val) {
-                return isSameHour(val, focusedTime, use12Hours ? meridiem : undefined);
-            }, isSameSelected: function (val) {
-                return isSameHour(val, selectedTime, use12Hours ? meridiem : undefined);
-            }, onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
-        precision != 'hours' && (React.createElement(TimePickerColumn, { data: minutes, isSameFocused: function (val) { return isSameMinute(val, focusedTime); }, isSameSelected: function (val) { return isSameMinute(val, selectedTime); }, onFocusChange: function (date) { return setFocusedTime(date); }, onSelectChange: function (date) { return updateCurrentTime(date); }, valueRenderer: minuteRenderer })),
-        precision == 'seconds' && (React.createElement(TimePickerColumn, { data: seconds, isSameFocused: function (val) { return isSameSecond(val, focusedTime); }, isSameSelected: function (val) { return isSameSecond(val, selectedTime); }, onFocusChange: function (date) { return setFocusedTime(date); }, onSelectChange: function (date) { return updateCurrentTime(date); }, valueRenderer: secondRenderer })),
-        use12Hours && (React.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: function (val) { return isSameMeridiem(val, focusedTime); }, isSameSelected: function (val) { return isSameMeridiem(val, selectedTime); }, onFocusChange: function (date) { return onMeridiemFocus(date); }, onSelectChange: function (value) { return onMeridiemClick(value); }, valueRenderer: meridiemRenderer, className: 'iui-period' }))));
+    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 })),
+        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' }))));
 };
-var TimePickerColumn = function (props) {
-    var data = props.data, onFocusChange = props.onFocusChange, onSelectChange = props.onSelectChange, isSameFocused = props.isSameFocused, isSameSelected = props.isSameSelected, _a = props.setFocus, setFocus = _a === void 0 ? false : _a, valueRenderer = props.valueRenderer, _b = props.className, className = _b === void 0 ? 'iui-time' : _b;
-    var needFocus = React.useRef(setFocus);
+const TimePickerColumn = (props) => {
+    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, 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
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (needFocus.current) {
             needFocus.current = false;
         }
     });
-    var scrollIntoView = function (ref, isSame) {
+    const scrollIntoView = (ref, isSame) => {
         isSame && (ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({ block: 'nearest', inline: 'nearest' }));
     };
-    var handleTimeKeyDown = function (event, maxValue, onFocus, onSelect, currentValue) {
+    const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
         switch (event.key) {
             case 'ArrowDown':
                 if (currentValue + 1 > maxValue) {
@@ -202,16 +164,16 @@ var TimePickerColumn = function (props) {
         }
     };
     return (React.createElement("div", { className: className },
-        React.createElement("ol", null, data.map(function (value, index) {
-            var isSameFocus = isSameFocused(value);
-            return (React.createElement("li", { onKeyDown: function (event) {
-                    handleTimeKeyDown(event, data.length - 1, function (index) { return onFocusChange(data[index]); }, function (index) { return onSelectChange(data[index]); }, index);
+        React.createElement("ol", null, data.map((value, index) => {
+            const isSameFocus = isSameFocused(value);
+            return (React.createElement("li", { onKeyDown: (event) => {
+                    handleTimeKeyDown(event, data.length - 1, (index) => onFocusChange(data[index]), (index) => onSelectChange(data[index]), index);
                 }, className: cx({
                     'iui-selected': isSameSelected(value),
-                }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: function (ref) {
+                }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: (ref) => {
                     scrollIntoView(ref, isSameFocus);
                     needFocus.current && isSameFocus && (ref === null || ref === void 0 ? void 0 : ref.focus());
-                }, onClick: function () {
+                }, onClick: () => {
                     onSelectChange(value);
                 } }, valueRenderer(value)));
         }))));