@itwin/imodel-components-react 4.10.0 → 4.11.0

package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js

@@ -34,84 +34,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SolarTimeline = void 0;
-// component is in alpha state - it may change after usability testing - test coverage not complete
-/* istanbul ignore file */
 require("./SolarTimeline.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const itwinui_react_1 = require("@itwin/itwinui-react");
 const core_common_1 = require("@itwin/core-common");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
 const components_react_1 = require("@itwin/components-react");
-const HueSlider_1 = require("../color/HueSlider");
-const SaturationPicker_1 = require("../color/SaturationPicker");
-const Swatch_1 = require("../color/Swatch");
-const PlayButton_1 = require("./PlayButton");
-const SpeedTimeline_1 = require("./SpeedTimeline");
-const Scrubber_1 = require("./Scrubber");
-const UiIModelComponents_1 = require("../UiIModelComponents");
+const itwinui_react_1 = require("@itwin/itwinui-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-// cSpell:ignore millisec solarsettings showticks shadowcolor solartimeline datepicker millisecs
-const millisecPerMinute = 1000 * 60;
-const millisecPerHour = millisecPerMinute * 60;
-// const millisecPerDay = millisecPerHour * 24;
-const defaultPlaybackDuration = 40 * 1000; // 40 seconds
-const addZero = (i) => {
-    return i < 10 ? `0${i}` : i;
-};
+const UiIModelComponents_1 = require("../UiIModelComponents");
+const PlayButton_1 = require("./PlayButton");
+const useTranslation_1 = require("../useTranslation");
+const msPerMinute = 1000 * 60;
+const msPerHour = msPerMinute * 60;
+const defaultPlaybackDuration = 40 * 1000;
+const offset = 6;
 function Timeline(props) {
-    const [sliderContainer, setSliderContainer] = React.useState(null);
-    const [pointerPercent, setPointerPercent] = React.useState(0);
-    const tooltipProps = React.useCallback(() => {
-        return { visible: false };
-    }, []);
-    const [showRailTooltip, setShowRailTooltip] = React.useState(false);
-    const handlePointerEnter = React.useCallback(() => {
-        setShowRailTooltip(true);
-    }, []);
-    const handlePointerLeave = React.useCallback(() => {
-        setShowRailTooltip(false);
-    }, []);
-    const handlePointerMove = React.useCallback((event) => {
-        sliderContainer &&
-            setPointerPercent((0, Scrubber_1.getPercentageOfRectangle)(sliderContainer.getBoundingClientRect(), event.clientX));
-    }, [sliderContainer]);
-    const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying, } = props;
-    const thumbHasFocus = (0, Scrubber_1.useFocusedThumb)(sliderContainer ?? undefined);
-    const tickLabel = React.useMemo(() => {
-        const showTip = isPlaying || showRailTooltip || thumbHasFocus;
-        const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;
-        const percent = isPlaying || thumbHasFocus
-            ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration
-            : pointerPercent;
-        const tooltipText = formatTime(isPlaying || thumbHasFocus
-            ? dayStartMs + currentTimeOffsetMs
-            : dayStartMs + (sunRiseOffsetMs + pointerPercent * totalDuration));
-        return (React.createElement(Scrubber_1.RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText }));
-    }, [
-        isPlaying,
-        showRailTooltip,
-        thumbHasFocus,
-        sunSetOffsetMs,
-        sunRiseOffsetMs,
-        currentTimeOffsetMs,
-        pointerPercent,
-        formatTime,
-        dayStartMs,
-    ]);
+    const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, } = props;
+    const tooltipContent = formatTime(dayStartMs + currentTimeOffsetMs);
     const className = (0, classnames_1.default)("solar-timeline", props.className, formatTick && "showticks");
-    const sunRiseFormat = formatTime(dayStartMs + sunRiseOffsetMs);
-    const sunSetFormat = formatTime(dayStartMs + sunSetOffsetMs);
+    const sunRiseStr = formatTime(dayStartMs + sunRiseOffsetMs);
+    const sunSetStr = formatTime(dayStartMs + sunSetOffsetMs);
     return (React.createElement("div", { className: className },
-        React.createElement(itwinui_react_1.Tooltip, { content: sunRiseFormat },
-            React.createElement("span", { className: "sunrise" }, "\u2600")),
-        React.createElement(itwinui_react_1.Slider, { ref: setSliderContainer, className: "solar-slider", step: millisecPerMinute, min: sunRiseOffsetMs, max: sunSetOffsetMs, minLabel: "", maxLabel: "", onUpdate: onUpdate, onChange: onChange, values: [currentTimeOffsetMs], tooltipProps: tooltipProps, thumbProps: () => ({
-                className: "components-timeline-thumb",
-                children: React.createElement(Scrubber_1.CustomThumb, null),
-            }), tickLabels: tickLabel, onPointerEnter: handlePointerEnter, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave }),
-        React.createElement(itwinui_react_1.Tooltip, { content: sunSetFormat },
-            React.createElement("span", { className: "sunset" }, "\u263D"))));
+        React.createElement(itwinui_react_1.VisuallyHidden, null, "Solar timeline"),
+        React.createElement(itwinui_react_1.Slider, { thumbProps: () => ({ "aria-labelledby": "timeline" }), step: msPerMinute, min: sunRiseOffsetMs, max: sunSetOffsetMs, minLabel: React.createElement(itwinui_react_1.Tooltip, { content: sunRiseStr },
+                React.createElement(itwinui_react_1.Icon, null,
+                    React.createElement(itwinui_icons_react_1.SvgSun, null))), maxLabel: React.createElement(itwinui_react_1.Tooltip, { content: sunSetStr },
+                React.createElement(itwinui_react_1.Icon, null,
+                    React.createElement(itwinui_icons_react_1.SvgMoon, null))), onUpdate: onUpdate, onChange: onChange, values: [currentTimeOffsetMs], tooltipProps: () => ({
+                content: tooltipContent,
+            }) })));
 }
 /** Solar Timeline
  * @alpha
@@ -119,35 +70,10 @@ function Timeline(props) {
 class SolarTimeline extends React.PureComponent {
     constructor(props) {
         super(props);
-        this._datePicker = null;
-        this._settings = null;
         this._requestFrame = 0;
         this._unmounted = false;
         this._timeLastCycle = 0;
         this._totalPlayTime = 0;
-        this._settingsPopupTitle = UiIModelComponents_1.UiIModelComponents.translate("solarsettings.shadowcolor");
-        this._playLabel = UiIModelComponents_1.UiIModelComponents.translate("solartimeline.play");
-        this._settingLabel = UiIModelComponents_1.UiIModelComponents.translate("solartimeline.settings");
-        this._loopLabel = UiIModelComponents_1.UiIModelComponents.translate("timeline.repeat");
-        this._speedLabel = UiIModelComponents_1.UiIModelComponents.translate("solartimeline.speed");
-        this._dateTimeLabel = UiIModelComponents_1.UiIModelComponents.translate("solartimeline.dateTime");
-        this._months = [
-            components_react_1.UiComponents.translate("month.short.january"),
-            components_react_1.UiComponents.translate("month.short.february"),
-            components_react_1.UiComponents.translate("month.short.march"),
-            components_react_1.UiComponents.translate("month.short.april"),
-            components_react_1.UiComponents.translate("month.short.may"),
-            components_react_1.UiComponents.translate("month.short.june"),
-            components_react_1.UiComponents.translate("month.short.july"),
-            components_react_1.UiComponents.translate("month.short.august"),
-            components_react_1.UiComponents.translate("month.short.september"),
-            components_react_1.UiComponents.translate("month.short.october"),
-            components_react_1.UiComponents.translate("month.short.november"),
-            components_react_1.UiComponents.translate("month.short.december"),
-        ];
-        this._timeLabel = components_react_1.UiComponents.translate("datepicker.time");
-        this._amLabel = components_react_1.UiComponents.translate("time.am");
-        this._pmLabel = components_react_1.UiComponents.translate("time.pm");
         this._presetColors = [
             core_common_1.ColorDef.create(core_common_1.ColorByName.grey),
             core_common_1.ColorDef.create(core_common_1.ColorByName.lightGrey),
@@ -158,9 +84,9 @@ class SolarTimeline extends React.PureComponent {
             core_common_1.ColorDef.create(core_common_1.ColorByName.tan),
             core_common_1.ColorDef.create(core_common_1.ColorByName.darkBrown),
         ];
+        this._speeds = [1, 2, 3, 4, 5, 6];
         // recursively update the animation until we hit the end or the pause button is clicked
         this._updateAnimation = (_timestamp) => {
-            // istanbul ignore else
             if (!this.state.isPlaying || this._unmounted) {
                 window.cancelAnimationFrame(this._requestFrame);
                 return;
@@ -196,7 +122,6 @@ class SolarTimeline extends React.PureComponent {
         };
         // user clicked pause button
         this._onPause = () => {
-            // istanbul ignore if
             if (!this.state.isPlaying)
                 return;
             const currentTime = new Date().getTime();
@@ -205,13 +130,11 @@ class SolarTimeline extends React.PureComponent {
             window.cancelAnimationFrame(this._requestFrame);
             // stop playing
             this.setState({ isPlaying: false });
-            // istanbul ignore else
             if (this.props.onPlayPause)
                 this.props.onPlayPause(false);
         };
         // user clicked play button
         this._onPlay = () => {
-            // istanbul ignore if
             if (this.state.isPlaying)
                 return;
             if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs ||
@@ -223,52 +146,34 @@ class SolarTimeline extends React.PureComponent {
                 this._play(this.state.currentTimeOffsetMs);
             }
         };
-        /** note the day passed in is in the time of the current user not in project time because the date picker works in
-         * local time  */
-        this._onDayClick = (day) => {
-            const selectedDate = new Date(day.getTime() + this.state.currentTimeOffsetMs);
-            this.props.dataProvider.setDateAndTime(selectedDate);
+        this._onDateChange = (newDate) => {
+            var _a, _b;
+            this.props.dataProvider.setDateAndTime(newDate);
             const dayStartMs = this.props.dataProvider.dayStartMs;
             const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;
             const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;
             const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;
-            const sunOffsetMs = this.ensureRange(this.state.currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);
-            this.setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs);
             /** call dataProvider to update display style */
-            if (this.props.dataProvider.onTimeChanged)
-                this.props.dataProvider.onTimeChanged(this.props.dataProvider.timeOfDay);
+            // this.props.dataProvider.onTimeChanged?.(this.props.dataProvider.timeOfDay);
+            // Update time
+            const newHours = newDate.getHours();
+            const newMinutes = newDate.getMinutes();
+            const newSunTime = newHours * msPerHour + newMinutes * msPerMinute;
+            const dateWithNewTime = new Date(dayStartMs + newSunTime);
+            // this.props.dataProvider.setDateAndTime(dateWithNewTime, true);
+            const currentTimeOffsetMs = this.ensureRange(newSunTime, sunRiseOffsetMs, sunSetOffsetMs);
+            this.setPlaybackTimeBySunTime(currentTimeOffsetMs, sunRiseOffsetMs, sunDeltaMs);
+            this._timeLastCycle = new Date().getTime();
+            (_b = (_a = this.props.dataProvider).onTimeChanged) === null || _b === void 0 ? void 0 : _b.call(_a, dateWithNewTime);
             this.setState({
                 dayStartMs,
                 sunRiseOffsetMs,
                 sunSetOffsetMs,
-                currentTimeOffsetMs: sunOffsetMs,
+                currentTimeOffsetMs,
                 sunDeltaMs,
                 isDateOpened: false,
-            }, () => {
-                this._timeLastCycle = new Date().getTime();
             });
         };
-        this._onTimeChanged = (time) => {
-            // compute the current date (with time)
-            const dayStartMs = this.props.dataProvider.dayStartMs;
-            const sunTime = time.hours * millisecPerHour + time.minutes * millisecPerMinute;
-            const dateWithNewTime = new Date(dayStartMs + sunTime);
-            this.props.dataProvider.setDateAndTime(dateWithNewTime, true);
-            // notify the provider to update style
-            if (this.props.dataProvider.onTimeChanged)
-                this.props.dataProvider.onTimeChanged(dateWithNewTime);
-            const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);
-            this.setPlaybackTimeBySunTime(currentTimeOffsetMs, this.state.sunRiseOffsetMs, this.state.sunDeltaMs);
-            this._timeLastCycle = new Date().getTime();
-            // update the timeline
-            this.setState({ currentTimeOffsetMs });
-        };
-        this._onCloseDayPicker = () => {
-            this.setState({ isDateOpened: false });
-        };
-        this._onOpenDayPicker = () => {
-            this.setState((prevState) => ({ isDateOpened: !prevState.isDateOpened }));
-        };
         this._onCloseSettingsPopup = () => {
             this.setState({ isSettingsOpened: false });
         };
@@ -292,25 +197,23 @@ class SolarTimeline extends React.PureComponent {
         this._onToggleLoop = () => {
             this.setState((prevState) => ({ loop: !prevState.loop }));
         };
-        this._formatTime = (millisec) => {
-            const date = new Date(millisec);
+        this._formatTime = (ms) => {
+            const date = new Date(ms);
+            const amLabel = components_react_1.UiComponents.translate("time.am");
+            const pmLabel = components_react_1.UiComponents.translate("time.pm");
             // convert project date to browser locale date
             const localTime = (0, components_react_1.adjustDateToTimezone)(date, this.props.dataProvider.timeZoneOffset * 60);
             let hours = localTime.getHours();
-            const minutes = addZero(date.getMinutes());
-            const abbrev = hours < 12 ? this._amLabel : hours === 24 ? this._amLabel : this._pmLabel;
+            const minutes = date.getMinutes();
+            const abbrev = hours < 12 ? amLabel : hours === 24 ? amLabel : pmLabel;
             hours = hours > 12 ? hours - 12 : hours;
-            return `${hours}:${minutes} ${abbrev}`;
-        };
-        this._onPresetColorPick = (shadowColor) => {
-            this.setState({ shadowColor }, () => (this.props.dataProvider.shadowColor = shadowColor));
-        };
-        this._handleHueOrSaturationChange = (hueOrSaturation) => {
-            if (hueOrSaturation.s === 0)
-                // for a ColorDef to be created from hsv s can't be 0
-                hueOrSaturation = hueOrSaturation.clone(undefined, 0.5);
-            const shadowColor = hueOrSaturation.toColorDef();
-            this.setState({ shadowColor }, () => (this.props.dataProvider.shadowColor = shadowColor));
+            const hoursStr = hours.toLocaleString(undefined, {
+                minimumIntegerDigits: 2,
+            });
+            const minutesStr = minutes.toLocaleString(undefined, {
+                minimumIntegerDigits: 2,
+            });
+            return `${hoursStr}:${minutesStr} ${abbrev}`;
         };
         const dayStartMs = this.props.dataProvider.dayStartMs;
         const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;
@@ -350,7 +253,6 @@ class SolarTimeline extends React.PureComponent {
         // start playing
         this.setState({ isPlaying: true, currentTimeOffsetMs: sunTimeMs }, () => {
             this._requestFrame = window.requestAnimationFrame(this._updateAnimation);
-            // istanbul ignore else
             if (this.props.onPlayPause)
                 this.props.onPlayPause(true);
         });
@@ -386,65 +288,72 @@ class SolarTimeline extends React.PureComponent {
     }
     render() {
         const { dataProvider } = this.props;
-        const { speed, loop, currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs, } = this.state;
+        const { speed: currentSpeed, loop, currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs, } = this.state;
+        const months = [
+            components_react_1.UiComponents.translate("month.short.january"),
+            components_react_1.UiComponents.translate("month.short.february"),
+            components_react_1.UiComponents.translate("month.short.march"),
+            components_react_1.UiComponents.translate("month.short.april"),
+            components_react_1.UiComponents.translate("month.short.may"),
+            components_react_1.UiComponents.translate("month.short.june"),
+            components_react_1.UiComponents.translate("month.short.july"),
+            components_react_1.UiComponents.translate("month.short.august"),
+            components_react_1.UiComponents.translate("month.short.september"),
+            components_react_1.UiComponents.translate("month.short.october"),
+            components_react_1.UiComponents.translate("month.short.november"),
+            components_react_1.UiComponents.translate("month.short.december"),
+        ];
         const localTime = this.getLocalTime(this.state.dayStartMs + this.state.currentTimeOffsetMs);
         const formattedTime = this._formatTime(dataProvider.dayStartMs + currentTimeOffsetMs);
-        const formattedDate = `${this._months[localTime.getMonth()]}, ${localTime.getDate()}`;
-        const colorSwatchStyle = {
-            width: `100%`,
-            height: `100%`,
-        };
+        const formattedDate = `${months[localTime.getMonth()]}, ${localTime.getDate()}`;
         return (React.createElement("div", { className: "solar-timeline-wrapper" },
-            React.createElement("div", { className: "header" },
-                React.createElement(PlayButton_1.PlayButton, { tooltip: this._playLabel, className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),
-                React.createElement("button", { "data-testid": "solar-date-time-button", title: this._dateTimeLabel, className: "current-date", ref: (element) => (this._datePicker = element), onClick: this._onOpenDayPicker },
-                    React.createElement("span", null, formattedDate),
-                    React.createElement("span", null, "/"),
-                    React.createElement("span", null, formattedTime),
-                    React.createElement("span", { className: "icon" },
-                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCalendar, null) }))),
-                React.createElement(core_react_1.Popup, { style: { border: "none" }, offset: 11, target: this._datePicker, isOpen: this.state.isDateOpened, onClose: this._onCloseDayPicker, position: appui_abstract_1.RelativePosition.Top },
-                    React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
-                        React.createElement(components_react_1.DatePicker, { selected: localTime, onDateChange: this._onDayClick, showFocusOutline: false }),
-                        React.createElement("div", { className: "time-container" },
-                            React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, this._timeLabel),
-                            React.createElement(components_react_1.TimeField, { time: {
-                                    hours: localTime.getHours(),
-                                    minutes: localTime.getMinutes(),
-                                    seconds: 0,
-                                }, timeDisplay: appui_abstract_1.TimeDisplay.H12MC, onTimeChange: this._onTimeChanged })))),
-                React.createElement(Timeline, { dayStartMs: dataProvider.dayStartMs, sunSetOffsetMs: sunSetOffsetMs, sunRiseOffsetMs: sunRiseOffsetMs, currentTimeOffsetMs: currentTimeOffsetMs, onChange: this._onChange, onUpdate: this._onUpdate, formatTime: this._formatTime, isPlaying: this.state.isPlaying }),
-                React.createElement("div", { className: "speed-container" },
-                    React.createElement("span", { title: this._speedLabel },
-                        speed,
-                        "x"),
-                    React.createElement(SpeedTimeline_1.SpeedTimeline, { className: "speed", onChange: this._onSpeedChange, speed: this.state.speed })),
-                React.createElement("span", { title: this._loopLabel, className: (0, classnames_1.default)("icon", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 },
-                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgLoop, null) })),
-                React.createElement("button", { "data-testid": "shadow-settings-button", title: this._settingLabel, className: "shadow-settings-button", ref: (element) => (this._settings = element), onClick: this._onOpenSettingsPopup },
-                    React.createElement("span", { className: "icon" },
-                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgSettings, null) }))),
-                React.createElement(core_react_1.Popup, { className: "shadow-settings-popup", target: this._settings, offset: 11, isOpen: this.state.isSettingsOpened, onClose: this._onCloseSettingsPopup, position: appui_abstract_1.RelativePosition.Top },
-                    React.createElement("div", { className: "shadow-settings-popup-container" },
-                        React.createElement("div", { className: "shadow-settings-header" }, this._settingsPopupTitle),
-                        React.createElement("div", { className: "shadow-settings-color" },
-                            React.createElement("div", { className: "shadow-settings-color-top" },
-                                React.createElement(SaturationPicker_1.SaturationPicker, { hsv: this.state.shadowColor.toHSV(), onSaturationChange: this._handleHueOrSaturationChange })),
-                            React.createElement("div", { className: "shadow-settings-color-bottom" },
-                                React.createElement("div", { className: "shadow-settings-color-bottom-left" },
-                                    React.createElement(HueSlider_1.HueSlider, { hsv: this.state.shadowColor.toHSV(), onHueChange: this._handleHueOrSaturationChange, isHorizontal: true })),
-                                React.createElement("div", { className: "shadow-settings-color-bottom-right" },
-                                    React.createElement(Swatch_1.ColorSwatch, { style: colorSwatchStyle, colorDef: this.state.shadowColor, round: false })))),
-                        React.createElement("div", { className: "shadow-settings-color-presets" },
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[0], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[1], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[2], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[3], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[4], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[5], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[6], round: false, onColorPick: this._onPresetColorPick }),
-                            React.createElement(Swatch_1.ColorSwatch, { colorDef: this._presetColors[7], round: false, onColorPick: this._onPresetColorPick })))))));
+            React.createElement(itwinui_react_1.Flex, { flexWrap: "wrap", gap: "none", className: "solar-timeline-start" },
+                React.createElement(PlayButton_1.PlayButton, { isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),
+                React.createElement(itwinui_react_1.Popover, { content: React.createElement(itwinui_react_1.DatePicker, { date: localTime, onChange: this._onDateChange, showTime: true, use12Hours: true }), visible: this.state.isDateOpened, onVisibleChange: (isDateOpened) => {
+                        this.setState({ isDateOpened });
+                    }, placement: "top", middleware: {
+                        offset,
+                    } },
+                    React.createElement(CalendarButton, { onClick: () => {
+                            const isDateOpened = !this.state.isDateOpened;
+                            this.setState({ isDateOpened });
+                        } },
+                        formattedDate,
+                        " @ ",
+                        formattedTime))),
+            React.createElement(Timeline, { dayStartMs: dataProvider.dayStartMs, sunSetOffsetMs: sunSetOffsetMs, sunRiseOffsetMs: sunRiseOffsetMs, currentTimeOffsetMs: currentTimeOffsetMs, onChange: this._onChange, onUpdate: this._onUpdate, formatTime: this._formatTime, isPlaying: this.state.isPlaying }),
+            React.createElement(itwinui_react_1.Flex, { justifyContent: "flex-end", flexWrap: "wrap", gap: "none", className: "solar-timeline-end" },
+                React.createElement(itwinui_react_1.VisuallyHidden, null,
+                    React.createElement(itwinui_react_1.Label, { htmlFor: "speed" }, "Timeline speed")),
+                React.createElement(itwinui_react_1.Tooltip, { content: UiIModelComponents_1.UiIModelComponents.translate("solartimeline.speed") },
+                    React.createElement(itwinui_react_1.Select, { native: true, styleType: "borderless", triggerProps: {
+                            name: "speed",
+                        }, onChange: (newValue) => this._onSpeedChange(Number(newValue)), value: currentSpeed.toString(), options: this._speeds.map((speed) => ({
+                            value: speed.toString(),
+                            label: `${speed}x`,
+                        })) })),
+                React.createElement(itwinui_react_1.IconButton, { styleType: "borderless", label: UiIModelComponents_1.UiIModelComponents.translate("timeline.repeat"), onClick: this._onToggleLoop, isActive: loop },
+                    React.createElement(itwinui_icons_react_1.SvgLoop, null)),
+                React.createElement(itwinui_react_1.Popover, { content: React.createElement(itwinui_react_1.ColorPicker, { selectedColor: this.state.shadowColor.colors, onChangeComplete: (color) => {
+                            const colorDef = core_common_1.ColorDef.create(color.toTbgr());
+                            this.setState({ shadowColor: colorDef }, () => (this.props.dataProvider.shadowColor = colorDef));
+                        } },
+                        React.createElement(itwinui_react_1.Text, { variant: "title", as: "h2", style: { textAlign: "center" } }, UiIModelComponents_1.UiIModelComponents.translate("solarsettings.shadowcolor")),
+                        React.createElement(itwinui_react_1.ColorBuilder, null),
+                        React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: "hsl" }),
+                        React.createElement(itwinui_react_1.ColorPalette, { colors: this._presetColors.map((color) => color.colors) })), placement: "top", middleware: {
+                        offset,
+                    } },
+                    React.createElement(itwinui_react_1.IconButton, { styleType: "borderless", "data-testid": "shadow-settings-button", label: UiIModelComponents_1.UiIModelComponents.translate("solartimeline.settings"), onClick: this._onOpenSettingsPopup },
+                        React.createElement(itwinui_icons_react_1.SvgSettings, null))))));
     }
 }
 exports.SolarTimeline = SolarTimeline;
+const CalendarButton = React.forwardRef(function CalendarButton({ children, onClick }, ref) {
+    const { translate } = (0, useTranslation_1.useTranslation)();
+    const tooltip = translate("solartimeline.dateTime");
+    return (React.createElement(itwinui_react_1.Tooltip, { content: tooltip },
+        React.createElement(itwinui_react_1.Button, { styleType: "borderless", startIcon: React.createElement(itwinui_icons_react_1.SvgCalendar, null), "data-testid": "solar-date-time-button", title: tooltip, onClick: onClick, ref: ref },
+            React.createElement("span", { className: "solar-timeline-date-time" }, children))));
+});
 //# sourceMappingURL=SolarTimeline.js.map