@flanksource/clicky-ui 0.3.18 → 0.3.20

package/dist/components/FilterBar.cjs

@@ -230,9 +230,28 @@ function FilterBarFilterPanelContent({
     filter.kind === "enum" && /* @__PURE__ */ jsxRuntime.jsx(EnumFilterField, { filter, grow: true }),
     filter.kind === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterField, { filter }),
     filter.kind === "tristate" && /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterField, { filter }),
+    filter.kind === "date-range" && /* @__PURE__ */ jsxRuntime.jsx(
+      FilterBarRangePanel,
+      {
+        kind: filter.timeEnabled === false ? "date" : "time",
+        label: filter.label,
+        ...dateRangeFilterProps(filter)
+      }
+    ),
     filter.kind === "text" && /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow: true })
   ] });
 }
+function dateRangeFilterProps(filter) {
+  const {
+    key: _key,
+    kind: _kind,
+    label: _label,
+    icon: _icon,
+    description: _description,
+    ...range
+  } = filter;
+  return range;
+}
 function renderFilterField(filter, grow) {
   if (filter.kind === "lookup") {
     return /* @__PURE__ */ jsxRuntime.jsx(LookupFilterField, { filter, grow });
@@ -261,6 +280,16 @@ function renderFilterField(filter, grow) {
   if (filter.kind === "tristate") {
     return /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterField, { filter });
   }
+  if (filter.kind === "date-range") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RangeControlButton,
+      {
+        kind: filter.timeEnabled === false ? "date" : "time",
+        label: filter.label,
+        ...dateRangeFilterProps(filter)
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow });
 }
 function OverflowFiltersMenu({
@@ -452,6 +481,16 @@ function OverflowFiltersMenu({
   );
 }
 function FilterBarKeyValueControl({ filter }) {
+  if (filter.kind === "date-range") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RangeControlButton,
+      {
+        kind: filter.timeEnabled === false ? "date" : "time",
+        label: filter.label,
+        ...dateRangeFilterProps(filter)
+      }
+    );
+  }
   if (filter.kind === "text") {
     return /* @__PURE__ */ jsxRuntime.jsx(TextFilterValueControl, { filter });
   }
@@ -656,7 +695,8 @@ function FilterBarRangePanel({
   timeZones,
   fromPlaceholder,
   toPlaceholder,
-  emptyLabel
+  emptyLabel,
+  disabled
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-72 p-3 text-popover-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
     TimeRange.TimeRange,
@@ -667,6 +707,7 @@ function FilterBarRangePanel({
       from,
       to,
       onApply,
+      ...disabled !== void 0 ? { disabled } : {},
       ...presets ? { presets } : {},
       ...timeEnabled !== void 0 ? { timeEnabled } : {},
       ...timeZone ? { timeZone } : {},
@@ -1577,7 +1618,8 @@ function RangeControlButton({
   fromPlaceholder,
   toPlaceholder,
   emptyLabel,
-  className
+  className,
+  disabled
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TimeRange.TimeRange,
@@ -1587,6 +1629,7 @@ function RangeControlButton({
       from,
       to,
       onApply,
+      ...disabled !== void 0 ? { disabled } : {},
       ...presets ? { presets } : {},
       ...timeEnabled !== void 0 ? { timeEnabled } : {},
       ...timeZone ? { timeZone } : {},
@@ -1762,10 +1805,15 @@ function formatRawNumber(value) {
 function createFilterValueMap(filters) {
   return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
 }
+function isStageableFilter(filter) {
+  return filter.kind !== "date-range";
+}
 function filterBarFilterValue(filter) {
+  if (!isStageableFilter(filter)) return void 0;
   return filter.value;
 }
 function filterWithStagedValue(filter, value, onChange) {
+  if (!isStageableFilter(filter)) return filter;
   if (filter.kind === "text") {
     return {
       ...filter,
@@ -1837,12 +1885,14 @@ function filterWithStagedValue(filter, value, onChange) {
 }
 function applyStagedFilterValues(filters, stagedValues) {
   for (const filter of filters) {
+    if (!isStageableFilter(filter)) continue;
     const next = Object.hasOwn(stagedValues, filter.key) ? stagedValues[filter.key] : filterBarFilterValue(filter);
     if (sameFilterBarValue(filterBarFilterValue(filter), next)) continue;
     applyFilterBarValue(filter, next);
   }
 }
 function applyFilterBarValue(filter, value) {
+  if (!isStageableFilter(filter)) return;
   if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
     filter.onChange(String(value ?? ""));
     return;