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

package/esm/core/ComboBox/ComboBoxMenu.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.
@@ -30,52 +8,49 @@ import { Menu } from '../Menu';
 import { Surface } from '../Surface';
 import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow, } from '../utils';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
-var VirtualizedComboBoxMenu = React.forwardRef(function (_a, forwardedRef) {
-    var _b, _c, _d;
-    var children = _a.children, className = _a.className, style = _a.style, rest = __rest(_a, ["children", "className", "style"]);
-    var _e = useSafeContext(ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
-    var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
-    var virtualItemRenderer = React.useCallback(function (index) {
-        return filteredOptions.length > 0
-            ? getMenuItem(filteredOptions[index], index)
-            : children;
-    }, // Here is expected empty state content
+const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
+    var _a, _b, _c;
+    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex, } = useSafeContext(ComboBoxStateContext);
+    const { menuRef } = useSafeContext(ComboBoxRefsContext);
+    const virtualItemRenderer = React.useCallback((index) => filteredOptions.length > 0
+        ? getMenuItem(filteredOptions[index], index)
+        : children, // Here is expected empty state content
     [filteredOptions, getMenuItem, children]);
-    var focusedVisibleIndex = React.useMemo(function () {
+    const focusedVisibleIndex = React.useMemo(() => {
         var _a, _b;
-        var currentElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-iui-index=\"".concat(focusedIndex, "\"]"));
+        const currentElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-iui-index="${focusedIndex}"]`);
         if (!currentElement) {
             return focusedIndex;
         }
         return Number((_b = currentElement.getAttribute('data-iui-filtered-index')) !== null && _b !== void 0 ? _b : focusedIndex);
     }, [focusedIndex, menuRef]);
-    var _f = useVirtualization({
+    const { outerProps, innerProps, visibleChildren } = useVirtualization({
         // 'Fool' VirtualScroll by passing length 1
         // whenever there is no elements, to show empty state message
         itemsLength: filteredOptions.length || 1,
         itemRenderer: virtualItemRenderer,
         scrollToIndex: focusedVisibleIndex,
-    }), outerProps = _f.outerProps, innerProps = _f.innerProps, visibleChildren = _f.visibleChildren;
-    var overflowY = ((_d = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.CSS) === null || _c === void 0 ? void 0 : _c.supports) === null || _d === void 0 ? void 0 : _d.call(_c, 'overflow-x: overlay'))
+    });
+    const overflowY = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'overflow-x: overlay'))
         ? { overflowY: 'overlay' }
         : { overflowY: 'auto' };
-    var styles = React.useMemo(function () { return ({
-        minWidth: minWidth,
-        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-    }); }, [minWidth]);
-    return (React.createElement(Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
-        React.createElement("div", __assign({}, outerProps),
-            React.createElement(Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), className: cx('iui-scroll', className), style: innerProps.style }, visibleChildren))));
+    const styles = React.useMemo(() => ({
+        minWidth,
+        maxWidth: `min(${minWidth * 2}px, 90vw)`,
+    }), [minWidth]);
+    return (React.createElement(Surface, { elevation: 1, style: { ...styles, ...overflowY, ...style }, ...rest },
+        React.createElement("div", { ...outerProps },
+            React.createElement(Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), className: cx('iui-scroll', className), style: innerProps.style }, visibleChildren))));
 });
-export var ComboBoxMenu = React.forwardRef(function (props, forwardedRef) {
-    var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
-    var _a = useSafeContext(ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id, enableVirtualization = _a.enableVirtualization;
-    var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
-    var refs = useMergedRefs(menuRef, forwardedRef);
-    var styles = React.useMemo(function () { return ({
-        minWidth: minWidth,
-        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-    }); }, [minWidth]);
-    return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: cx('iui-scroll', className) }, rest))) : (React.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
+export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
+    const { className, style, ...rest } = props;
+    const { minWidth, id, enableVirtualization } = useSafeContext(ComboBoxStateContext);
+    const { menuRef } = useSafeContext(ComboBoxRefsContext);
+    const refs = useMergedRefs(menuRef, forwardedRef);
+    const styles = React.useMemo(() => ({
+        minWidth,
+        maxWidth: `min(${minWidth * 2}px, 90vw)`,
+    }), [minWidth]);
+    return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(Menu, { id: `${id}-list`, style: { ...styles, ...style }, setFocus: false, role: 'listbox', ref: refs, className: cx('iui-scroll', className), ...rest })) : (React.createElement(VirtualizedComboBoxMenu, { ref: forwardedRef, ...props }))));
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.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,21 +6,21 @@ import cx from 'classnames';
 import React from 'react';
 import { useSafeContext, useMergedRefs } from '../utils';
 import { ComboBoxStateContext } from './helpers';
-export var ComboBoxMenuItem = React.memo(React.forwardRef(function (props, forwardedRef) {
-    var children = props.children, isSelected = props.isSelected, disabled = props.disabled, value = props.value, onClick = props.onClick, sublabel = props.sublabel, _a = props.size, size = _a === void 0 ? !!sublabel ? 'large' : 'default' : _a, icon = props.icon, badge = props.badge, className = props.className, _b = props.role, role = _b === void 0 ? 'menuitem' : _b, index = props.index, rest = __rest(props, ["children", "isSelected", "disabled", "value", "onClick", "sublabel", "size", "icon", "badge", "className", "role", "index"]);
-    var _c = useSafeContext(ComboBoxStateContext), focusedIndex = _c.focusedIndex, enableVirtualization = _c.enableVirtualization;
-    var focusRef = function (el) {
+export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) => {
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, role = 'menuitem', index, ...rest } = props;
+    const { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
+    const focusRef = (el) => {
         if (!enableVirtualization && focusedIndex === index) {
             el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
         }
     };
-    var refs = useMergedRefs(forwardedRef, focusRef);
-    return (React.createElement("li", __assign({ className: cx('iui-menu-item', {
+    const refs = useMergedRefs(forwardedRef, focusRef);
+    return (React.createElement("li", { className: cx('iui-menu-item', {
             'iui-large': size === 'large',
             'iui-active': isSelected,
             'iui-disabled': disabled,
             'iui-focused': focusedIndex === index,
-        }, className), ref: refs, onClick: function () { return !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)); }, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index }, rest),
+        }, className), ref: refs, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
         icon &&
             React.cloneElement(icon, {
                 className: cx(icon.props.className, 'iui-icon'),

package/esm/core/ComboBox/helpers.js

@@ -1,43 +1,35 @@
-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);
-};
 /*---------------------------------------------------------------------------------------------
  * 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';
-export var comboBoxReducer = function (state, _a) {
-    var _b;
-    var type = _a[0], value = _a[1];
+export const comboBoxReducer = (state, [type, value]) => {
+    var _a;
     switch (type) {
         case 'open': {
-            return __assign(__assign({}, state), { isOpen: true });
+            return { ...state, isOpen: true };
         }
         case 'close': {
-            return __assign(__assign({}, state), { isOpen: false });
+            return { ...state, isOpen: false };
         }
         case 'select': {
-            return __assign(__assign({}, state), { selectedIndex: value !== null && value !== void 0 ? value : state.selectedIndex, focusedIndex: value !== null && value !== void 0 ? value : state.focusedIndex });
+            return {
+                ...state,
+                selectedIndex: value !== null && value !== void 0 ? value : state.selectedIndex,
+                focusedIndex: value !== null && value !== void 0 ? value : state.focusedIndex,
+            };
         }
         case 'focus': {
-            return __assign(__assign({}, state), { focusedIndex: (_b = value !== null && value !== void 0 ? value : state.selectedIndex) !== null && _b !== void 0 ? _b : -1 });
+            return { ...state, focusedIndex: (_a = value !== null && value !== void 0 ? value : state.selectedIndex) !== null && _a !== void 0 ? _a : -1 };
         }
         default: {
             return state;
         }
     }
 };
-export var ComboBoxRefsContext = React.createContext(undefined);
+export const ComboBoxRefsContext = React.createContext(undefined);
 ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
-export var ComboBoxStateContext = React.createContext(undefined);
+export const ComboBoxStateContext = React.createContext(undefined);
 ComboBoxStateContext.displayName = 'ComboBoxStateContext';
-export var ComboBoxActionContext = React.createContext(undefined);
+export const ComboBoxActionContext = React.createContext(undefined);
 ComboBoxActionContext.displayName = 'ComboBoxActionContext';

package/esm/core/DatePicker/DatePicker.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.
@@ -30,41 +8,41 @@ import { useTheme, SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChe
 import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton';
 import { TimePicker } from '../TimePicker';
-var isSameDay = function (a, b) {
+const isSameDay = (a, b) => {
     return (a &&
         b &&
         a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 };
-var isInDateRange = function (date, startDate, endDate) {
+const isInDateRange = (date, startDate, endDate) => {
     if (!date || !startDate || !endDate) {
         return false;
     }
-    var minDate = new Date(startDate);
-    var maxDate = new Date(endDate);
-    var testDate = new Date(date);
+    const minDate = new Date(startDate);
+    const maxDate = new Date(endDate);
+    const testDate = new Date(date);
     testDate && testDate.setHours(0, 0, 0, 0);
     minDate && minDate.setHours(0, 0, 0, 0);
     maxDate && maxDate.setHours(0, 0, 0, 0);
     return testDate > minDate && testDate < maxDate;
 };
 // compares to see if one date is earlier than another
-var isBefore = function (beforeDate, afterDate) {
+const isBefore = (beforeDate, afterDate) => {
     if (!beforeDate || !afterDate) {
         return false;
     }
-    var firstDate = new Date(beforeDate);
-    var secondDate = new Date(afterDate);
+    const firstDate = new Date(beforeDate);
+    const secondDate = new Date(afterDate);
     firstDate && firstDate.setHours(0, 0, 0, 0);
     secondDate && secondDate.setHours(0, 0, 0, 0);
     return firstDate < secondDate;
 };
 // Type guard for multiple did not work
-var isSingleOnChange = function (onChange, enableRangeSelect) {
+const isSingleOnChange = (onChange, enableRangeSelect) => {
     return !enableRangeSelect;
 };
-var defaultMonths = [
+const defaultMonths = [
     'January',
     'February',
     'March',
@@ -78,8 +56,8 @@ var defaultMonths = [
     'November',
     'December',
 ];
-var defaultShortDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-var defaultLongDays = [
+const defaultShortDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const defaultLongDays = [
     'Sunday',
     'Monday',
     'Tuesday',
@@ -92,15 +70,15 @@ var defaultLongDays = [
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export var generateLocalizedStrings = function (locale) {
-    var shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+export const generateLocalizedStrings = (locale) => {
+    const shortWeekDayFormatter = new Intl.DateTimeFormat(locale, {
         weekday: 'short',
     });
-    var longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
+    const longWeekDayFormatter = new Intl.DateTimeFormat(locale, {
         weekday: 'long',
     });
-    var monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
-    var months = [
+    const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' });
+    const months = [
         monthFormatter.format(new Date(2020, 0, 1)),
         monthFormatter.format(new Date(2020, 1, 1)),
         monthFormatter.format(new Date(2020, 2, 1)),
@@ -114,7 +92,7 @@ export var generateLocalizedStrings = function (locale) {
         monthFormatter.format(new Date(2020, 10, 1)),
         monthFormatter.format(new Date(2020, 11, 1)),
     ];
-    var days = [
+    const days = [
         longWeekDayFormatter.format(new Date(2020, 10, 1)),
         longWeekDayFormatter.format(new Date(2020, 10, 2)),
         longWeekDayFormatter.format(new Date(2020, 10, 3)),
@@ -123,7 +101,7 @@ export var generateLocalizedStrings = function (locale) {
         longWeekDayFormatter.format(new Date(2020, 10, 6)),
         longWeekDayFormatter.format(new Date(2020, 10, 7)),
     ];
-    var shortDays = [
+    const shortDays = [
         shortWeekDayFormatter.format(new Date(2020, 10, 1)).slice(0, 2),
         shortWeekDayFormatter.format(new Date(2020, 10, 2)).slice(0, 2),
         shortWeekDayFormatter.format(new Date(2020, 10, 3)).slice(0, 2),
@@ -133,9 +111,9 @@ export var generateLocalizedStrings = function (locale) {
         shortWeekDayFormatter.format(new Date(2020, 10, 7)).slice(0, 2),
     ];
     return {
-        months: months,
-        shortDays: shortDays,
-        days: days,
+        months,
+        shortDays,
+        days,
     };
 };
 /**
@@ -143,36 +121,36 @@ export var generateLocalizedStrings = function (locale) {
  * @example
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
-export var DatePicker = function (props) {
+export const DatePicker = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _j = props.setFocus, setFocus = _j === void 0 ? false : _j, _k = props.showTime, showTime = _k === void 0 ? false : _k, _l = props.use12Hours, use12Hours = _l === void 0 ? false : _l, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, _m = props.showYearSelection, showYearSelection = _m === void 0 ? false : _m, _o = props.enableRangeSelect, enableRangeSelect = _o === void 0 ? false : _o, startDate = props.startDate, endDate = props.endDate, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "showYearSelection", "enableRangeSelect", "startDate", "endDate"]);
+    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
     useTheme();
-    var monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
-    var shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
-    var longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
-    var _p = React.useState(date), selectedDay = _p[0], setSelectedDay = _p[1];
-    var _q = React.useState(startDate), selectedStartDay = _q[0], setSelectedStartDay = _q[1];
-    var _r = React.useState(endDate), selectedEndDay = _r[0], setSelectedEndDay = _r[1];
-    var _s = React.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date()), focusedDay = _s[0], setFocusedDay = _s[1];
-    var _t = React.useState((_f = (_e = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _e !== void 0 ? _e : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth()) !== null && _f !== void 0 ? _f : new Date().getMonth()), displayedMonthIndex = _t[0], setDisplayedMonthIndex = _t[1];
-    var _u = React.useState((_h = (_g = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _g !== void 0 ? _g : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getFullYear()) !== null && _h !== void 0 ? _h : new Date().getFullYear()), displayedYear = _u[0], setDisplayedYear = _u[1];
+    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;
+    const longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
+    const [selectedDay, setSelectedDay] = React.useState(date);
+    const [selectedStartDay, setSelectedStartDay] = React.useState(startDate);
+    const [selectedEndDay, setSelectedEndDay] = React.useState(endDate);
+    const [focusedDay, setFocusedDay] = React.useState((_d = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _d !== void 0 ? _d : new Date());
+    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState((_f = (_e = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _e !== void 0 ? _e : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth()) !== null && _f !== void 0 ? _f : new Date().getMonth());
+    const [displayedYear, setDisplayedYear] = React.useState((_h = (_g = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _g !== void 0 ? _g : selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getFullYear()) !== null && _h !== void 0 ? _h : new Date().getFullYear());
     // boolean that toggles between the user picking the start date and end date for date range
-    var _v = React.useState(true), isSelectingStartDate = _v[0], setIsSelectingStartDate = _v[1];
+    const [isSelectingStartDate, setIsSelectingStartDate] = React.useState(true);
     // Used to focus days only when days are changed
     // e.g. without this, when changing months day would be focused
-    var needFocus = React.useRef(setFocus);
-    React.useEffect(function () {
+    const needFocus = React.useRef(setFocus);
+    React.useEffect(() => {
         if (needFocus.current) {
             needFocus.current = false;
         }
     });
-    var setMonthAndYear = React.useCallback(function (newMonth, newYear) {
+    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
         setDisplayedMonthIndex(newMonth);
         setDisplayedYear(newYear);
     }, []);
-    React.useEffect(function () {
+    React.useEffect(() => {
         var _a, _b, _c, _d;
-        var currentDate = new Date();
+        const currentDate = new Date();
         setSelectedDay(date);
         setSelectedStartDay(startDate);
         setSelectedEndDay(endDate);
@@ -181,64 +159,64 @@ export var DatePicker = function (props) {
         }
         setMonthAndYear((_b = (_a = startDate === null || startDate === void 0 ? void 0 : startDate.getMonth()) !== null && _a !== void 0 ? _a : date === null || date === void 0 ? void 0 : date.getMonth()) !== null && _b !== void 0 ? _b : currentDate.getMonth(), (_d = (_c = startDate === null || startDate === void 0 ? void 0 : startDate.getFullYear()) !== null && _c !== void 0 ? _c : date === null || date === void 0 ? void 0 : date.getFullYear()) !== null && _d !== void 0 ? _d : currentDate.getFullYear());
     }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
-    var days = React.useMemo(function () {
-        var offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
+    const days = React.useMemo(() => {
+        let offsetToFirst = new Date(displayedYear, displayedMonthIndex, 1).getDay();
         // if its sunday, show one week before
         if (0 === offsetToFirst) {
             offsetToFirst = 7;
         }
-        var daysInMonth = [];
+        const daysInMonth = [];
         // generate 6 weeks of dates
-        for (var i = 1; i <= 42; i++) {
-            var adjustedDay = i - offsetToFirst;
+        for (let i = 1; i <= 42; i++) {
+            const adjustedDay = i - offsetToFirst;
             daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
         }
         return daysInMonth;
     }, [displayedMonthIndex, displayedYear]);
-    var weeks = React.useMemo(function () {
-        var weeksInMonth = [];
-        var weekCount = Math.ceil(days.length / 7);
-        for (var i = 0; i < weekCount; i++) {
+    const weeks = React.useMemo(() => {
+        const weeksInMonth = [];
+        const weekCount = Math.ceil(days.length / 7);
+        for (let i = 0; i < weekCount; i++) {
             weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
         }
         return weeksInMonth;
     }, [days]);
-    var getNewFocusedDate = function (newYear, newMonth) {
+    const getNewFocusedDate = (newYear, newMonth) => {
         var _a;
-        var currentDate = (_a = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _a !== void 0 ? _a : new Date();
-        var newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+        const currentDate = (_a = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay) !== null && _a !== void 0 ? _a : new Date();
+        const newDate = new Date(newYear, newMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
         return newDate;
     };
-    var handleMoveToPreviousYear = function () {
-        var newYear = displayedYear - 1;
+    const handleMoveToPreviousYear = () => {
+        const newYear = displayedYear - 1;
         setMonthAndYear(displayedMonthIndex, newYear);
         setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
     };
-    var handleMoveToNextYear = function () {
-        var newYear = displayedYear + 1;
+    const handleMoveToNextYear = () => {
+        const newYear = displayedYear + 1;
         setMonthAndYear(displayedMonthIndex, newYear);
         setFocusedDay(getNewFocusedDate(newYear, displayedMonthIndex));
     };
-    var handleMoveToPreviousMonth = function () {
-        var newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
-        var newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
+    const handleMoveToPreviousMonth = () => {
+        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
+        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
         setMonthAndYear(newMonth, newYear);
         setFocusedDay(getNewFocusedDate(newYear, newMonth));
     };
-    var handleMoveToNextMonth = function () {
-        var newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
-        var newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
+    const handleMoveToNextMonth = () => {
+        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
+        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
         setMonthAndYear(newMonth, newYear);
         setFocusedDay(getNewFocusedDate(newYear, newMonth));
     };
-    var onDayClick = function (day) {
+    const onDayClick = (day) => {
         // single date selection
         if (!enableRangeSelect) {
             if (day.getMonth() !== (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.getMonth())) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            var currentDate = selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date();
-            var newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
+            const currentDate = selectedDay !== null && selectedDay !== void 0 ? selectedDay : new Date();
+            const newDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds());
             setSelectedDay(newDate);
             setFocusedDay(newDate);
             isSingleOnChange(onChange, enableRangeSelect) && (onChange === null || onChange === void 0 ? void 0 : onChange(newDate));
@@ -248,8 +226,8 @@ export var DatePicker = function (props) {
             if (day.getMonth() !== (selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth())) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            var currentStartDate = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : new Date();
-            var newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
+            const currentStartDate = selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : new Date();
+            const newStartDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds());
             setSelectedStartDay(newStartDate);
             setFocusedDay(newStartDate);
             // if the start date is after the end date or the end date is undefined, reset the end date
@@ -267,8 +245,8 @@ export var DatePicker = function (props) {
             if (day.getMonth() !== (selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth())) {
                 setMonthAndYear(day.getMonth(), day.getFullYear());
             }
-            var currentEndDate = selectedEndDay !== null && selectedEndDay !== void 0 ? selectedEndDay : new Date();
-            var newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
+            const currentEndDate = selectedEndDay !== null && selectedEndDay !== void 0 ? selectedEndDay : new Date();
+            const newEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds());
             setFocusedDay(newEndDate);
             // if the end date is before the start date, move back the start date and still have user select end date
             if (!isBefore(newEndDate, selectedStartDay)) {
@@ -282,11 +260,11 @@ export var DatePicker = function (props) {
             }
         }
     };
-    var handleCalendarKeyDown = function (event) {
+    const handleCalendarKeyDown = (event) => {
         if (!focusedDay) {
             return;
         }
-        var adjustedFocusedDay = new Date(focusedDay);
+        const adjustedFocusedDay = new Date(focusedDay);
         switch (event.key) {
             case 'ArrowDown':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
@@ -332,12 +310,12 @@ export var DatePicker = function (props) {
                 break;
         }
     };
-    var getDayClass = function (day) {
+    const getDayClass = (day) => {
         if (day.getMonth() !== displayedMonthIndex) {
             return 'iui-calendar-day-outside-month';
         }
-        var dayClass = 'iui-calendar-day';
-        var isSelectedDay = isSameDay(day, selectedDay) ||
+        let dayClass = 'iui-calendar-day';
+        const isSelectedDay = isSameDay(day, selectedDay) ||
             (isSameDay(day, selectedStartDay) && isSameDay(day, selectedEndDay));
         if (isSelectedDay) {
             dayClass += '-selected';
@@ -359,7 +337,7 @@ export var DatePicker = function (props) {
         }
         return dayClass;
     };
-    return (React.createElement("div", __assign({ className: cx('iui-date-picker', className), style: style }, rest),
+    return (React.createElement("div", { className: cx('iui-date-picker', className), style: style, ...rest },
         React.createElement("div", null,
             React.createElement("div", { className: 'iui-calendar-month-year' },
                 showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
@@ -374,18 +352,16 @@ export var DatePicker = function (props) {
                     React.createElement(SvgChevronRight, null)),
                 showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
                     React.createElement(SvgChevronRightDouble, null)))),
-            React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (React.createElement("div", { key: day, title: longDays[index] }, day)); })),
-            React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
-                return (React.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
-                    var dateValue = weekDay.getDate();
-                    return (React.createElement("div", { key: "day-".concat(displayedMonthIndex, "-").concat(dayIndex), className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
-                            return isSameDay(weekDay, focusedDay) &&
-                                needFocus.current &&
-                                (element === null || element === void 0 ? void 0 : element.focus());
-                        } }, dateValue));
+            React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
+            React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
+                return (React.createElement("div", { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
+                    const dateValue = weekDay.getDate();
+                    return (React.createElement("div", { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: (element) => isSameDay(weekDay, focusedDay) &&
+                            needFocus.current &&
+                            (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: function (date) {
+        showTime && (React.createElement(TimePicker, { date: selectedStartDay !== null && selectedStartDay !== void 0 ? selectedStartDay : selectedDay, use12Hours: use12Hours, precision: precision, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, onChange: (date) => {
                 var _a, _b, _c, _d, _e, _f;
                 return isSingleOnChange(onChange, enableRangeSelect)
                     ? onChange === null || onChange === void 0 ? void 0 : onChange(date)