@tcn/ui-time-selector 1.0.0 → 2.1.0

package/dist/components/time_selector/time_selector.d.ts

@@ -1,6 +1,8 @@
 export interface TimeSelectorOwnProps {
     onChange?: (start: Date, end: Date) => void;
     onTimezoneChange?: (timezone: string) => void;
+    startDate?: Date | null;
+    endDate?: Date | null;
     startDateMin?: Date | null;
     startDateMax?: Date | null;
     endDateMin?: Date | null;
@@ -8,5 +10,5 @@ export interface TimeSelectorOwnProps {
     timezones?: string[];
 }
 export type TimeSelectorProps = TimeSelectorOwnProps;
-export declare function TimeSelector({ onChange, onTimezoneChange, startDateMin, startDateMax, endDateMin, endDateMax, timezones, }: TimeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeSelector({ onChange, onTimezoneChange, startDate, endDate, startDateMin, startDateMax, endDateMin, endDateMax, timezones, }: TimeSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=time_selector.d.ts.map

package/dist/components/time_selector/time_selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time_selector.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC5C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAErD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,2CAoEnB"}
+{"version":3,"file":"time_selector.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC5C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAErD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,2CA2EnB"}

package/dist/components/time_selector/time_selector.js

@@ -1,94 +1,103 @@
-import { jsxs as r, Fragment as v, jsx as t } from "react/jsx-runtime";
-import { useSignalValue as o } from "@tcn/state";
-import { ElementPopper as S } from "@tcn/ui/overlay";
-import { HStack as p, VStack as _ } from "@tcn/ui/stacks";
-import { BodyText as m } from "@tcn/ui/typography";
-import { useState as x, useRef as A } from "react";
-import { TimeSelectorPresenter as R } from "./time_selector_presenter.js";
-import { PresetPanel as T } from "../preset_panel/preset_panel.js";
-import { DateRangePanel as k } from "../date_range_panel/date_range_panel.js";
-import { TimezoneFooter as w } from "../timezone_footer/timezone_footer.js";
-import '../../time_selector.css';const z = "_trigger-abbreviation_8e22c20", F = "_trigger_1096f0b", V = "_popper-content_9403264", a = { "trigger-abbreviation": z, trigger: F, "popper-content": V };
-function q({
-  onChange: l,
+import { jsxs as r, Fragment as x, jsx as t } from "react/jsx-runtime";
+import { useSignalValue as n } from "@tcn/state";
+import { ElementPopper as z } from "@tcn/ui/overlay";
+import { HStack as f, VStack as _ } from "@tcn/ui/stacks";
+import { BodyText as g } from "@tcn/ui/typography";
+import { ChevronDownIcon as w } from "@tcn/icons/chevron_down_icon.js";
+import { ChevronUpIcon as A } from "@tcn/icons/chevron_up_icon.js";
+import { useState as E, useRef as R, useEffect as T } from "react";
+import { TimeSelectorPresenter as k } from "./time_selector_presenter.js";
+import { PresetPanel as F } from "../preset_panel/preset_panel.js";
+import { DateRangePanel as V } from "../date_range_panel/date_range_panel.js";
+import { TimezoneFooter as C } from "../timezone_footer/timezone_footer.js";
+import '../../time_selector.css';const N = "_trigger-abbreviation_8e22c20", O = "_trigger_1096f0b", j = "_popper-content_9403264", c = { "trigger-abbreviation": N, trigger: O, "popper-content": j };
+function Q({
+  onChange: p,
   onTimezoneChange: d,
-  startDateMin: g,
-  startDateMax: f,
+  startDate: s,
+  endDate: i,
+  startDateMin: h,
+  startDateMax: u,
   endDateMin: b,
-  endDateMax: h,
-  timezones: u
+  endDateMax: P,
+  timezones: v
 }) {
-  const [e] = x(() => new R()), c = A(null), n = o(e.broadcasts.isOpen), s = o(e.broadcasts.selectedPreset), P = o(e.broadcasts.displayValue), y = o(
+  const [e] = E(() => new k()), m = R(null);
+  T(() => {
+    s != null && i != null && e.setExternalDates(s, i);
+  }, [s, i, e]);
+  const o = n(e.broadcasts.isOpen), l = n(e.broadcasts.selectedPreset), y = n(e.broadcasts.displayValue), S = n(
     e.timezoneFooterPresenter.broadcasts.timezoneAbbreviation
   );
-  return /* @__PURE__ */ r(v, { children: [
+  return /* @__PURE__ */ r(x, { children: [
     /* @__PURE__ */ t(
       "div",
       {
-        ref: c,
-        className: a.trigger,
+        ref: m,
+        className: c.trigger,
         onClick: () => e.toggleOpen(),
-        children: /* @__PURE__ */ r(p, { height: "auto", width: "auto", gap: "4px", children: [
-          /* @__PURE__ */ r(m, { selectable: !1, children: [
-            P,
+        children: /* @__PURE__ */ r(f, { height: "auto", width: "auto", gap: "4px", children: [
+          /* @__PURE__ */ r(g, { selectable: !1, children: [
+            y,
             ","
           ] }),
           /* @__PURE__ */ t(
-            m,
+            g,
             {
               selectable: !1,
               style: { fontWeight: 700 },
-              className: a["trigger-abbreviation"],
-              children: y
+              className: c["trigger-abbreviation"],
+              children: S
             }
-          )
+          ),
+          o ? /* @__PURE__ */ t(A, { size: "sm" }) : /* @__PURE__ */ t(w, { size: "sm" })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      S,
+      z,
       {
-        anchorElement: c,
-        open: n,
+        anchorElement: m,
+        open: o,
         onDismissal: () => e.close(),
         dismissals: [],
         children: /* @__PURE__ */ r(
           _,
           {
-            className: a["popper-content"],
+            className: c["popper-content"],
             height: "auto",
-            onKeyDown: (i) => {
-              i.key === "Escape" && e.close();
+            onKeyDown: (a) => {
+              a.key === "Escape" && e.close();
             },
             children: [
-              /* @__PURE__ */ r(p, { height: "auto", width: "100%", vAlign: "start", children: [
+              /* @__PURE__ */ r(f, { height: "auto", width: "100%", vAlign: "start", children: [
                 /* @__PURE__ */ t(
-                  k,
+                  V,
                   {
                     presenter: e.dateRangePanelPresenter,
-                    focused: n && s == null,
-                    startDateMin: g,
-                    startDateMax: f,
+                    focused: o && l == null,
+                    startDateMin: h,
+                    startDateMax: u,
                     endDateMin: b,
-                    endDateMax: h,
-                    onApply: () => e.applyTimeRange(l)
+                    endDateMax: P,
+                    onApply: () => e.applyTimeRange(p)
                   }
                 ),
                 /* @__PURE__ */ t(
-                  T,
+                  F,
                   {
                     presenter: e.presetPanelPresenter,
-                    selectedPreset: s,
-                    focused: n && s != null,
-                    onSelect: (i) => e.handlePresetSelect(i, l)
+                    selectedPreset: l,
+                    focused: o && l != null,
+                    onSelect: (a) => e.handlePresetSelect(a, p)
                   }
                 )
               ] }),
               /* @__PURE__ */ t(
-                w,
+                C,
                 {
                   presenter: e.timezoneFooterPresenter,
-                  timezones: u,
+                  timezones: v,
                   onTimezoneChange: d
                 }
               )
@@ -100,6 +109,6 @@ function q({
   ] });
 }
 export {
-  q as TimeSelector
+  Q as TimeSelector
 };
 //# sourceMappingURL=time_selector.js.map

package/dist/components/time_selector/time_selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"time_selector.js","sources":["../../../src/components/time_selector/time_selector.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { ElementPopper } from '@tcn/ui/overlay';\nimport { HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { useRef, useState } from 'react';\nimport { TimeSelectorPresenter } from './time_selector_presenter.js';\nimport { PresetPanel } from '../preset_panel/preset_panel.js';\nimport { DateRangePanel } from '../date_range_panel/date_range_panel.js';\nimport { TimezoneFooter } from '../timezone_footer/timezone_footer.js';\nimport styles from './time_selector.module.css';\n\nexport interface TimeSelectorOwnProps {\n  onChange?: (start: Date, end: Date) => void;\n  onTimezoneChange?: (timezone: string) => void;\n  startDateMin?: Date | null;\n  startDateMax?: Date | null;\n  endDateMin?: Date | null;\n  endDateMax?: Date | null;\n  timezones?: string[];\n}\n\nexport type TimeSelectorProps = TimeSelectorOwnProps;\n\nexport function TimeSelector({\n  onChange,\n  onTimezoneChange,\n  startDateMin,\n  startDateMax,\n  endDateMin,\n  endDateMax,\n  timezones,\n}: TimeSelectorProps) {\n  const [presenter] = useState(() => new TimeSelectorPresenter());\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const isOpen = useSignalValue(presenter.broadcasts.isOpen);\n  const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);\n  const displayValue = useSignalValue(presenter.broadcasts.displayValue);\n  const displayAbbreviation = useSignalValue(\n    presenter.timezoneFooterPresenter.broadcasts.timezoneAbbreviation\n  );\n\n  return (\n    <>\n      <div\n        ref={anchorRef}\n        className={styles.trigger}\n        onClick={() => presenter.toggleOpen()}\n      >\n        <HStack height=\"auto\" width=\"auto\" gap=\"4px\">\n          <BodyText selectable={false}>{displayValue},</BodyText>\n          <BodyText\n            selectable={false}\n            style={{ fontWeight: 700 }}\n            className={styles['trigger-abbreviation']}\n          >\n            {displayAbbreviation}\n          </BodyText>\n        </HStack>\n      </div>\n      <ElementPopper\n        anchorElement={anchorRef}\n        open={isOpen}\n        onDismissal={() => presenter.close()}\n        dismissals={[]}\n      >\n        <VStack\n          className={styles['popper-content']}\n          height=\"auto\"\n          onKeyDown={e => {\n            if (e.key === 'Escape') presenter.close();\n          }}\n        >\n          <HStack height=\"auto\" width=\"100%\" vAlign=\"start\">\n            <DateRangePanel\n              presenter={presenter.dateRangePanelPresenter}\n              focused={isOpen && selectedPreset == null}\n              startDateMin={startDateMin}\n              startDateMax={startDateMax}\n              endDateMin={endDateMin}\n              endDateMax={endDateMax}\n              onApply={() => presenter.applyTimeRange(onChange)}\n            />\n            <PresetPanel\n              presenter={presenter.presetPanelPresenter}\n              selectedPreset={selectedPreset}\n              focused={isOpen && selectedPreset != null}\n              onSelect={item => presenter.handlePresetSelect(item, onChange)}\n            />\n          </HStack>\n          <TimezoneFooter\n            presenter={presenter.timezoneFooterPresenter}\n            timezones={timezones}\n            onTimezoneChange={onTimezoneChange}\n          />\n        </VStack>\n      </ElementPopper>\n    </>\n  );\n}\n"],"names":["TimeSelector","onChange","onTimezoneChange","startDateMin","startDateMax","endDateMin","endDateMax","timezones","presenter","useState","TimeSelectorPresenter","anchorRef","useRef","isOpen","useSignalValue","selectedPreset","displayValue","displayAbbreviation","jsxs","Fragment","jsx","styles","HStack","BodyText","ElementPopper","VStack","e","DateRangePanel","PresetPanel","item","TimezoneFooter"],"mappings":";;;;;;;;;;;AAuBO,SAASA,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,CAAS,IAAIC,EAAS,MAAM,IAAIC,GAAuB,GACxDC,IAAYC,EAAuB,IAAI,GAEvCC,IAASC,EAAeN,EAAU,WAAW,MAAM,GACnDO,IAAiBD,EAAeN,EAAU,WAAW,cAAc,GACnEQ,IAAeF,EAAeN,EAAU,WAAW,YAAY,GAC/DS,IAAsBH;AAAA,IAC1BN,EAAU,wBAAwB,WAAW;AAAA,EAAA;AAG/C,SACE,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWU,EAAO;AAAA,QAClB,SAAS,MAAMb,EAAU,WAAA;AAAA,QAEzB,4BAACc,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,KAAI,OACrC,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAS,YAAY,IAAQ,UAAA;AAAA,YAAAP;AAAA,YAAa;AAAA,UAAA,GAAC;AAAA,UAC5C,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,OAAO,EAAE,YAAY,IAAA;AAAA,cACrB,WAAWF,EAAO,sBAAsB;AAAA,cAEvC,UAAAJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAeb;AAAA,QACf,MAAME;AAAA,QACN,aAAa,MAAML,EAAU,MAAA;AAAA,QAC7B,YAAY,CAAA;AAAA,QAEZ,UAAA,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,WAAWJ,EAAO,gBAAgB;AAAA,YAClC,QAAO;AAAA,YACP,WAAW,CAAAK,MAAK;AACd,cAAIA,EAAE,QAAQ,YAAUlB,EAAU,MAAA;AAAA,YACpC;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAU,EAACI,KAAO,QAAO,QAAO,OAAM,QAAO,QAAO,SACxC,UAAA;AAAA,gBAAA,gBAAAF;AAAA,kBAACO;AAAA,kBAAA;AAAA,oBACC,WAAWnB,EAAU;AAAA,oBACrB,SAASK,KAAUE,KAAkB;AAAA,oBACrC,cAAAZ;AAAA,oBACA,cAAAC;AAAA,oBACA,YAAAC;AAAA,oBACA,YAAAC;AAAA,oBACA,SAAS,MAAME,EAAU,eAAeP,CAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAElD,gBAAAmB;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,WAAWpB,EAAU;AAAA,oBACrB,gBAAAO;AAAA,oBACA,SAASF,KAAUE,KAAkB;AAAA,oBACrC,UAAU,CAAAc,MAAQrB,EAAU,mBAAmBqB,GAAM5B,CAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC/D,GACF;AAAA,cACA,gBAAAmB;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACC,WAAWtB,EAAU;AAAA,kBACrB,WAAAD;AAAA,kBACA,kBAAAL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"time_selector.js","sources":["../../../src/components/time_selector/time_selector.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { ElementPopper } from '@tcn/ui/overlay';\nimport { HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { ChevronDownIcon } from '@tcn/icons/chevron_down_icon.js';\nimport { ChevronUpIcon } from '@tcn/icons/chevron_up_icon.js';\nimport { useEffect, useRef, useState } from 'react';\nimport { TimeSelectorPresenter } from './time_selector_presenter.js';\nimport { PresetPanel } from '../preset_panel/preset_panel.js';\nimport { DateRangePanel } from '../date_range_panel/date_range_panel.js';\nimport { TimezoneFooter } from '../timezone_footer/timezone_footer.js';\nimport styles from './time_selector.module.css';\n\nexport interface TimeSelectorOwnProps {\n  onChange?: (start: Date, end: Date) => void;\n  onTimezoneChange?: (timezone: string) => void;\n  startDate?: Date | null;\n  endDate?: Date | null;\n  startDateMin?: Date | null;\n  startDateMax?: Date | null;\n  endDateMin?: Date | null;\n  endDateMax?: Date | null;\n  timezones?: string[];\n}\n\nexport type TimeSelectorProps = TimeSelectorOwnProps;\n\nexport function TimeSelector({\n  onChange,\n  onTimezoneChange,\n  startDate,\n  endDate,\n  startDateMin,\n  startDateMax,\n  endDateMin,\n  endDateMax,\n  timezones,\n}: TimeSelectorProps) {\n  const [presenter] = useState(() => new TimeSelectorPresenter());\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (startDate != null && endDate != null) {\n      presenter.setExternalDates(startDate, endDate);\n    }\n  }, [startDate, endDate, presenter]);\n\n  const isOpen = useSignalValue(presenter.broadcasts.isOpen);\n  const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);\n  const displayValue = useSignalValue(presenter.broadcasts.displayValue);\n  const displayAbbreviation = useSignalValue(\n    presenter.timezoneFooterPresenter.broadcasts.timezoneAbbreviation\n  );\n\n  return (\n    <>\n      <div\n        ref={anchorRef}\n        className={styles.trigger}\n        onClick={() => presenter.toggleOpen()}\n      >\n        <HStack height=\"auto\" width=\"auto\" gap=\"4px\">\n          <BodyText selectable={false}>{displayValue},</BodyText>\n          <BodyText\n            selectable={false}\n            style={{ fontWeight: 700 }}\n            className={styles['trigger-abbreviation']}\n          >\n            {displayAbbreviation}\n          </BodyText>\n          {isOpen ? <ChevronUpIcon size=\"sm\" /> : <ChevronDownIcon size=\"sm\" />}\n        </HStack>\n      </div>\n      <ElementPopper\n        anchorElement={anchorRef}\n        open={isOpen}\n        onDismissal={() => presenter.close()}\n        dismissals={[]}\n      >\n        <VStack\n          className={styles['popper-content']}\n          height=\"auto\"\n          onKeyDown={e => {\n            if (e.key === 'Escape') presenter.close();\n          }}\n        >\n          <HStack height=\"auto\" width=\"100%\" vAlign=\"start\">\n            <DateRangePanel\n              presenter={presenter.dateRangePanelPresenter}\n              focused={isOpen && selectedPreset == null}\n              startDateMin={startDateMin}\n              startDateMax={startDateMax}\n              endDateMin={endDateMin}\n              endDateMax={endDateMax}\n              onApply={() => presenter.applyTimeRange(onChange)}\n            />\n            <PresetPanel\n              presenter={presenter.presetPanelPresenter}\n              selectedPreset={selectedPreset}\n              focused={isOpen && selectedPreset != null}\n              onSelect={item => presenter.handlePresetSelect(item, onChange)}\n            />\n          </HStack>\n          <TimezoneFooter\n            presenter={presenter.timezoneFooterPresenter}\n            timezones={timezones}\n            onTimezoneChange={onTimezoneChange}\n          />\n        </VStack>\n      </ElementPopper>\n    </>\n  );\n}\n"],"names":["TimeSelector","onChange","onTimezoneChange","startDate","endDate","startDateMin","startDateMax","endDateMin","endDateMax","timezones","presenter","useState","TimeSelectorPresenter","anchorRef","useRef","useEffect","isOpen","useSignalValue","selectedPreset","displayValue","displayAbbreviation","jsxs","Fragment","jsx","styles","HStack","BodyText","ChevronUpIcon","ChevronDownIcon","ElementPopper","VStack","e","DateRangePanel","PresetPanel","item","TimezoneFooter"],"mappings":"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"}

package/dist/components/time_selector/time_selector_presenter.d.ts

@@ -23,6 +23,7 @@ export declare class TimeSelectorPresenter {
     handlePresetSelect(item: PresetItem, onChange?: (start: Date, end: Date) => void): void;
     applyTimeRange(onChange?: (start: Date, end: Date) => void): void;
     toggleOpen(): void;
+    setExternalDates(start: Date, end: Date): void;
     close(): void;
 }
 //# sourceMappingURL=time_selector_presenter.d.ts.map

package/dist/components/time_selector/time_selector_presenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time_selector_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,uBAAuB,EAAE,MAAM,mDAAmD,CAAC;AAC5F,OAAO,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAE1F,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,eAAO,MAAM,YAAY,EAAE,UAAU,EAYpC,CAAC;AAEF,qBAAa,qBAAqB;IAChC,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,eAAe,CAAkD;IACzE,OAAO,CAAC,aAAa,CAAiB;IACtC,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,QAAQ,CAAsB;IAEtC,QAAQ,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;IACpD,QAAQ,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IAC1D,QAAQ,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IAE1D,QAAQ,CAAC,UAAU,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;QACrC,cAAc,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;QACvD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;KAC3C,CAAC;;IA4BF,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI;IAchF,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI;IAkB1D,UAAU;IAQV,KAAK;CAIN"}
+{"version":3,"file":"time_selector_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,uBAAuB,EAAE,MAAM,mDAAmD,CAAC;AAC5F,OAAO,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAE1F,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,eAAO,MAAM,YAAY,EAAE,UAAU,EAYpC,CAAC;AAEF,qBAAa,qBAAqB;IAChC,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,eAAe,CAAkD;IACzE,OAAO,CAAC,aAAa,CAAiB;IACtC,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,QAAQ,CAAsB;IAEtC,QAAQ,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;IACpD,QAAQ,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IAC1D,QAAQ,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;IAE1D,QAAQ,CAAC,UAAU,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;QACrC,cAAc,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;QACvD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;KAC3C,CAAC;;IA4BF,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI;IAchF,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI;IAkB1D,UAAU;IAQV,gBAAgB,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI;IAWvC,KAAK;CAIN"}

package/dist/components/time_selector/time_selector_presenter.js

@@ -1,9 +1,9 @@
-import { Signal as n } from "@tcn/state";
-import { datesFromPreset as o, shiftForDisplay as i, unshiftFromDisplay as h, formatDate as m } from "../utils.js";
+import { Signal as i } from "@tcn/state";
+import { datesFromPreset as h, shiftForDisplay as r, unshiftFromDisplay as d, formatDate as l } from "../utils.js";
 import { PresetPanelPresenter as c } from "../preset_panel/preset_panel_presenter.js";
 import { DateRangePanelPresenter as p } from "../date_range_panel/date_range_panel_presenter.js";
 import { TimezoneFooterPresenter as P } from "../timezone_footer/timezone_footer_presenter.js";
-const l = [
+const o = [
   { label: "Last 5 mins", minutes: 5 },
   { label: "Last 15 mins", minutes: 15 },
   { label: "Last 30 mins", minutes: 30 },
@@ -16,9 +16,9 @@ const l = [
   { label: "Last 7 days", minutes: 10080 },
   { label: "Last 30 days", minutes: 43200 }
 ];
-class g {
-  _isOpen = new n(!1);
-  _selectedPreset = new n(l[0]);
+class z {
+  _isOpen = new i(!1);
+  _selectedPreset = new i(o[0]);
   _displayValue;
   _startDate;
   _endDate;
@@ -27,40 +27,44 @@ class g {
   timezoneFooterPresenter;
   broadcasts;
   constructor() {
-    const e = Intl.DateTimeFormat().resolvedOptions().timeZone, { start: s, end: t } = o(l[0]);
-    this._startDate = new n(i(s, e)), this._endDate = new n(i(t, e)), this.presetPanelPresenter = new c(l), this.dateRangePanelPresenter = new p(
+    const t = Intl.DateTimeFormat().resolvedOptions().timeZone, { start: s, end: e } = h(o[0]);
+    this._startDate = new i(r(s, t)), this._endDate = new i(r(e, t)), this.presetPanelPresenter = new c(o), this.dateRangePanelPresenter = new p(
       this._startDate,
       this._endDate
     ), this.timezoneFooterPresenter = new P(
       this._startDate,
       this._endDate
-    ), this._displayValue = new n(l[0].label), this.broadcasts = {
+    ), this._displayValue = new i(o[0].label), this.broadcasts = {
       isOpen: this._isOpen.broadcast,
       selectedPreset: this._selectedPreset.broadcast,
       displayValue: this._displayValue.broadcast
     };
   }
-  handlePresetSelect(e, s) {
-    this._selectedPreset.set(e);
-    const { start: t, end: a } = o(e), r = this.timezoneFooterPresenter.getTimezone();
-    this._startDate.set(i(t, r)), this._endDate.set(i(a, r)), this._displayValue.set(e.label), s?.(t, a), this.close();
+  handlePresetSelect(t, s) {
+    this._selectedPreset.set(t);
+    const { start: e, end: a } = h(t), n = this.timezoneFooterPresenter.getTimezone();
+    this._startDate.set(r(e, n)), this._endDate.set(r(a, n)), this._displayValue.set(t.label), s?.(e, a), this.close();
   }
-  applyTimeRange(e) {
-    const s = this._startDate.get(), t = this._endDate.get();
-    if (s != null && t != null) {
-      const a = this.timezoneFooterPresenter.getTimezone(), r = h(s, a), d = h(t, a);
-      this._selectedPreset.set(null), this._displayValue.set(`${m(s)} to ${m(t)}`), e?.(r, d), this.close();
+  applyTimeRange(t) {
+    const s = this._startDate.get(), e = this._endDate.get();
+    if (s != null && e != null) {
+      const a = this.timezoneFooterPresenter.getTimezone(), n = d(s, a), m = d(e, a);
+      this._selectedPreset.set(null), this._displayValue.set(`${l(s)} to ${l(e)}`), t?.(n, m), this.close();
     }
   }
   toggleOpen() {
     this._isOpen.get() ? this.close() : this._isOpen.set(!0);
   }
+  setExternalDates(t, s) {
+    const e = this.timezoneFooterPresenter.getTimezone(), a = r(t, e), n = r(s, e);
+    this._selectedPreset.set(null), this._startDate.set(a), this._endDate.set(n), this._displayValue.set(`${l(a)} to ${l(n)}`);
+  }
   close() {
     this._isOpen.set(!1), this.presetPanelPresenter.reset();
   }
 }
 export {
-  l as PRESET_ITEMS,
-  g as TimeSelectorPresenter
+  o as PRESET_ITEMS,
+  z as TimeSelectorPresenter
 };
 //# sourceMappingURL=time_selector_presenter.js.map

package/dist/components/time_selector/time_selector_presenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"time_selector_presenter.js","sources":["../../../src/components/time_selector/time_selector_presenter.ts"],"sourcesContent":["import { Signal } from '@tcn/state';\nimport {\n  formatDate,\n  datesFromPreset,\n  shiftForDisplay,\n  unshiftFromDisplay,\n  type PresetItem,\n} from '../utils.js';\nimport { PresetPanelPresenter } from '../preset_panel/preset_panel_presenter.js';\nimport { DateRangePanelPresenter } from '../date_range_panel/date_range_panel_presenter.js';\nimport { TimezoneFooterPresenter } from '../timezone_footer/timezone_footer_presenter.js';\n\nexport type { PresetItem };\n\nexport const PRESET_ITEMS: PresetItem[] = [\n  { label: 'Last 5 mins', minutes: 5 },\n  { label: 'Last 15 mins', minutes: 15 },\n  { label: 'Last 30 mins', minutes: 30 },\n  { label: 'Last 1 hour', minutes: 60 },\n  { label: 'Last 3 hours', minutes: 180 },\n  { label: 'Last 6 hours', minutes: 360 },\n  { label: 'Last 12 hours', minutes: 720 },\n  { label: 'Last 24 hours', minutes: 1440 },\n  { label: 'Last 2 days', minutes: 2880 },\n  { label: 'Last 7 days', minutes: 10080 },\n  { label: 'Last 30 days', minutes: 43200 },\n];\n\nexport class TimeSelectorPresenter {\n  private _isOpen = new Signal<boolean>(false);\n  private _selectedPreset = new Signal<PresetItem | null>(PRESET_ITEMS[0]);\n  private _displayValue: Signal<string>;\n  private _startDate: Signal<Date | null>;\n  private _endDate: Signal<Date | null>;\n\n  readonly presetPanelPresenter: PresetPanelPresenter;\n  readonly dateRangePanelPresenter: DateRangePanelPresenter;\n  readonly timezoneFooterPresenter: TimezoneFooterPresenter;\n\n  readonly broadcasts: {\n    isOpen: Signal<boolean>['broadcast'];\n    selectedPreset: Signal<PresetItem | null>['broadcast'];\n    displayValue: Signal<string>['broadcast'];\n  };\n\n  constructor() {\n    const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    const { start, end } = datesFromPreset(PRESET_ITEMS[0]);\n\n    this._startDate = new Signal<Date | null>(shiftForDisplay(start, browserTz));\n    this._endDate = new Signal<Date | null>(shiftForDisplay(end, browserTz));\n\n    this.presetPanelPresenter = new PresetPanelPresenter(PRESET_ITEMS);\n    this.dateRangePanelPresenter = new DateRangePanelPresenter(\n      this._startDate,\n      this._endDate\n    );\n    this.timezoneFooterPresenter = new TimezoneFooterPresenter(\n      this._startDate,\n      this._endDate\n    );\n\n    this._displayValue = new Signal<string>(PRESET_ITEMS[0].label);\n\n    this.broadcasts = {\n      isOpen: this._isOpen.broadcast,\n      selectedPreset: this._selectedPreset.broadcast,\n      displayValue: this._displayValue.broadcast,\n    };\n  }\n\n  handlePresetSelect(item: PresetItem, onChange?: (start: Date, end: Date) => void) {\n    this._selectedPreset.set(item);\n\n    const { start, end } = datesFromPreset(item);\n    const tz = this.timezoneFooterPresenter.getTimezone();\n\n    this._startDate.set(shiftForDisplay(start, tz));\n    this._endDate.set(shiftForDisplay(end, tz));\n\n    this._displayValue.set(item.label);\n    onChange?.(start, end);\n    this.close();\n  }\n\n  applyTimeRange(onChange?: (start: Date, end: Date) => void) {\n    const displayStart = this._startDate.get();\n    const displayEnd = this._endDate.get();\n\n    if (displayStart != null && displayEnd != null) {\n      const tz = this.timezoneFooterPresenter.getTimezone();\n      const realStart = unshiftFromDisplay(displayStart, tz);\n      const realEnd = unshiftFromDisplay(displayEnd, tz);\n\n      this._selectedPreset.set(null);\n      this._displayValue.set(`${formatDate(displayStart)} to ${formatDate(displayEnd)}`);\n\n      onChange?.(realStart, realEnd);\n\n      this.close();\n    }\n  }\n\n  toggleOpen() {\n    if (this._isOpen.get()) {\n      this.close();\n    } else {\n      this._isOpen.set(true);\n    }\n  }\n\n  close() {\n    this._isOpen.set(false);\n    this.presetPanelPresenter.reset();\n  }\n}\n"],"names":["PRESET_ITEMS","TimeSelectorPresenter","Signal","browserTz","start","end","datesFromPreset","shiftForDisplay","PresetPanelPresenter","DateRangePanelPresenter","TimezoneFooterPresenter","item","onChange","tz","displayStart","displayEnd","realStart","unshiftFromDisplay","realEnd","formatDate"],"mappings":"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"}
+{"version":3,"file":"time_selector_presenter.js","sources":["../../../src/components/time_selector/time_selector_presenter.ts"],"sourcesContent":["import { Signal } from '@tcn/state';\nimport {\n  formatDate,\n  datesFromPreset,\n  shiftForDisplay,\n  unshiftFromDisplay,\n  type PresetItem,\n} from '../utils.js';\nimport { PresetPanelPresenter } from '../preset_panel/preset_panel_presenter.js';\nimport { DateRangePanelPresenter } from '../date_range_panel/date_range_panel_presenter.js';\nimport { TimezoneFooterPresenter } from '../timezone_footer/timezone_footer_presenter.js';\n\nexport type { PresetItem };\n\nexport const PRESET_ITEMS: PresetItem[] = [\n  { label: 'Last 5 mins', minutes: 5 },\n  { label: 'Last 15 mins', minutes: 15 },\n  { label: 'Last 30 mins', minutes: 30 },\n  { label: 'Last 1 hour', minutes: 60 },\n  { label: 'Last 3 hours', minutes: 180 },\n  { label: 'Last 6 hours', minutes: 360 },\n  { label: 'Last 12 hours', minutes: 720 },\n  { label: 'Last 24 hours', minutes: 1440 },\n  { label: 'Last 2 days', minutes: 2880 },\n  { label: 'Last 7 days', minutes: 10080 },\n  { label: 'Last 30 days', minutes: 43200 },\n];\n\nexport class TimeSelectorPresenter {\n  private _isOpen = new Signal<boolean>(false);\n  private _selectedPreset = new Signal<PresetItem | null>(PRESET_ITEMS[0]);\n  private _displayValue: Signal<string>;\n  private _startDate: Signal<Date | null>;\n  private _endDate: Signal<Date | null>;\n\n  readonly presetPanelPresenter: PresetPanelPresenter;\n  readonly dateRangePanelPresenter: DateRangePanelPresenter;\n  readonly timezoneFooterPresenter: TimezoneFooterPresenter;\n\n  readonly broadcasts: {\n    isOpen: Signal<boolean>['broadcast'];\n    selectedPreset: Signal<PresetItem | null>['broadcast'];\n    displayValue: Signal<string>['broadcast'];\n  };\n\n  constructor() {\n    const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    const { start, end } = datesFromPreset(PRESET_ITEMS[0]);\n\n    this._startDate = new Signal<Date | null>(shiftForDisplay(start, browserTz));\n    this._endDate = new Signal<Date | null>(shiftForDisplay(end, browserTz));\n\n    this.presetPanelPresenter = new PresetPanelPresenter(PRESET_ITEMS);\n    this.dateRangePanelPresenter = new DateRangePanelPresenter(\n      this._startDate,\n      this._endDate\n    );\n    this.timezoneFooterPresenter = new TimezoneFooterPresenter(\n      this._startDate,\n      this._endDate\n    );\n\n    this._displayValue = new Signal<string>(PRESET_ITEMS[0].label);\n\n    this.broadcasts = {\n      isOpen: this._isOpen.broadcast,\n      selectedPreset: this._selectedPreset.broadcast,\n      displayValue: this._displayValue.broadcast,\n    };\n  }\n\n  handlePresetSelect(item: PresetItem, onChange?: (start: Date, end: Date) => void) {\n    this._selectedPreset.set(item);\n\n    const { start, end } = datesFromPreset(item);\n    const tz = this.timezoneFooterPresenter.getTimezone();\n\n    this._startDate.set(shiftForDisplay(start, tz));\n    this._endDate.set(shiftForDisplay(end, tz));\n\n    this._displayValue.set(item.label);\n    onChange?.(start, end);\n    this.close();\n  }\n\n  applyTimeRange(onChange?: (start: Date, end: Date) => void) {\n    const displayStart = this._startDate.get();\n    const displayEnd = this._endDate.get();\n\n    if (displayStart != null && displayEnd != null) {\n      const tz = this.timezoneFooterPresenter.getTimezone();\n      const realStart = unshiftFromDisplay(displayStart, tz);\n      const realEnd = unshiftFromDisplay(displayEnd, tz);\n\n      this._selectedPreset.set(null);\n      this._displayValue.set(`${formatDate(displayStart)} to ${formatDate(displayEnd)}`);\n\n      onChange?.(realStart, realEnd);\n\n      this.close();\n    }\n  }\n\n  toggleOpen() {\n    if (this._isOpen.get()) {\n      this.close();\n    } else {\n      this._isOpen.set(true);\n    }\n  }\n\n  setExternalDates(start: Date, end: Date) {\n    const tz = this.timezoneFooterPresenter.getTimezone();\n    const displayStart = shiftForDisplay(start, tz);\n    const displayEnd = shiftForDisplay(end, tz);\n\n    this._selectedPreset.set(null);\n    this._startDate.set(displayStart);\n    this._endDate.set(displayEnd);\n    this._displayValue.set(`${formatDate(displayStart)} to ${formatDate(displayEnd)}`);\n  }\n\n  close() {\n    this._isOpen.set(false);\n    this.presetPanelPresenter.reset();\n  }\n}\n"],"names":["PRESET_ITEMS","TimeSelectorPresenter","Signal","browserTz","start","end","datesFromPreset","shiftForDisplay","PresetPanelPresenter","DateRangePanelPresenter","TimezoneFooterPresenter","item","onChange","tz","displayStart","displayEnd","realStart","unshiftFromDisplay","realEnd","formatDate"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-time-selector",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "type": "module",
   "description": "React time selector component",
   "author": "TCN",
@@ -43,11 +43,11 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tcn/ui": "^0.18.1"
+    "@tcn/ui": "^0.19.0"
   },
   "devDependencies": {
     "@types/react-color": "^3.0.13",
-    "@tcn/ui": "0.18.1"
+    "@tcn/ui": "0.19.0"
   },
   "scripts": {
     "start": "pnpm storybook",

package/src/__stories__/time_selector.stories.tsx

@@ -1,6 +1,13 @@
 import type { Meta } from '@storybook/react-vite';
 import { useState } from 'react';
 import { TimeSelector } from '../components/time_selector/time_selector.js';
+import { Button } from '@tcn/ui/actions';
+
+function makeRange(hoursAgo: number): { start: Date; end: Date } {
+  const end = new Date();
+  const start = new Date(end.getTime() - hoursAgo * 60 * 60 * 1000);
+  return { start, end };
+}
 
 const meta: Meta<typeof TimeSelector> = {
   title: 'TimeSelector',
@@ -57,6 +64,72 @@ export function WithTwoWeekStartLimit() {
   );
 }
 
+export function WithControlledDates() {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+  const [reported, setReported] = useState<{ start: Date; end: Date } | null>(null);
+
+  function applyRange(hoursAgo: number) {
+    const { start, end } = makeRange(hoursAgo);
+    setStartDate(start);
+    setEndDate(end);
+  }
+
+  return (
+    <div
+      style={{ position: 'relative', minHeight: '100vh', padding: '16px', width: '100%' }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <TimeSelector
+          startDate={startDate}
+          endDate={endDate}
+          onChange={(s, e) => setReported({ start: s, end: e })}
+        />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+          marginTop: '12px',
+          justifyContent: 'center',
+        }}
+      >
+        <Button onClick={() => applyRange(1)}>Set last 1h (UTC)</Button>
+        <Button onClick={() => applyRange(6)}>Set last 6h (UTC)</Button>
+        <Button onClick={() => applyRange(24)}>Set last 24h (UTC)</Button>
+        <Button
+          onClick={() => {
+            setStartDate(null);
+            setEndDate(null);
+          }}
+        >
+          Clear
+        </Button>
+      </div>
+      <div
+        style={{
+          fontSize: '13px',
+          lineHeight: '1.6',
+          marginTop: '12px',
+        }}
+      >
+        <div>
+          <strong>Passed startDate:</strong> {startDate?.toISOString() ?? '—'}
+        </div>
+        <div>
+          <strong>Passed endDate:</strong> {endDate?.toISOString() ?? '—'}
+        </div>
+        <div>
+          <strong>onChange start:</strong> {reported?.start.toISOString() ?? '—'}
+        </div>
+        <div>
+          <strong>onChange end:</strong> {reported?.end.toISOString() ?? '—'}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function Basic() {
   const [start, setStart] = useState<Date | null>(null);
   const [end, setEnd] = useState<Date | null>(null);

package/src/components/time_selector/time_selector.tsx

@@ -2,7 +2,9 @@ import { useSignalValue } from '@tcn/state';
 import { ElementPopper } from '@tcn/ui/overlay';
 import { HStack, VStack } from '@tcn/ui/stacks';
 import { BodyText } from '@tcn/ui/typography';
-import { useRef, useState } from 'react';
+import { ChevronDownIcon } from '@tcn/icons/chevron_down_icon.js';
+import { ChevronUpIcon } from '@tcn/icons/chevron_up_icon.js';
+import { useEffect, useRef, useState } from 'react';
 import { TimeSelectorPresenter } from './time_selector_presenter.js';
 import { PresetPanel } from '../preset_panel/preset_panel.js';
 import { DateRangePanel } from '../date_range_panel/date_range_panel.js';
@@ -12,6 +14,8 @@ import styles from './time_selector.module.css';
 export interface TimeSelectorOwnProps {
   onChange?: (start: Date, end: Date) => void;
   onTimezoneChange?: (timezone: string) => void;
+  startDate?: Date | null;
+  endDate?: Date | null;
   startDateMin?: Date | null;
   startDateMax?: Date | null;
   endDateMin?: Date | null;
@@ -24,6 +28,8 @@ export type TimeSelectorProps = TimeSelectorOwnProps;
 export function TimeSelector({
   onChange,
   onTimezoneChange,
+  startDate,
+  endDate,
   startDateMin,
   startDateMax,
   endDateMin,
@@ -33,6 +39,12 @@ export function TimeSelector({
   const [presenter] = useState(() => new TimeSelectorPresenter());
   const anchorRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (startDate != null && endDate != null) {
+      presenter.setExternalDates(startDate, endDate);
+    }
+  }, [startDate, endDate, presenter]);
+
   const isOpen = useSignalValue(presenter.broadcasts.isOpen);
   const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);
   const displayValue = useSignalValue(presenter.broadcasts.displayValue);
@@ -56,6 +68,7 @@ export function TimeSelector({
           >
             {displayAbbreviation}
           </BodyText>
+          {isOpen ? <ChevronUpIcon size="sm" /> : <ChevronDownIcon size="sm" />}
         </HStack>
       </div>
       <ElementPopper

package/src/components/time_selector/time_selector_presenter.ts

@@ -109,6 +109,17 @@ export class TimeSelectorPresenter {
     }
   }
 
+  setExternalDates(start: Date, end: Date) {
+    const tz = this.timezoneFooterPresenter.getTimezone();
+    const displayStart = shiftForDisplay(start, tz);
+    const displayEnd = shiftForDisplay(end, tz);
+
+    this._selectedPreset.set(null);
+    this._startDate.set(displayStart);
+    this._endDate.set(displayEnd);
+    this._displayValue.set(`${formatDate(displayStart)} to ${formatDate(displayEnd)}`);
+  }
+
   close() {
     this._isOpen.set(false);
     this.presetPanelPresenter.reset();