silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-VUCMGGU5.js → chunk-4JJFQZVY.js}

@@ -1,23 +1,102 @@
-import { VStack, HStack } from './chunk-2XAA3CM5.js';
-import { TagsInput } from './chunk-J5IRFGUP.js';
-import { Select } from './chunk-LQIZSE3O.js';
-import { NumberInput } from './chunk-DWUEPOYH.js';
-import { TextInput } from './chunk-G2U2W422.js';
-import { TimeInput } from './chunk-S7INL5NI.js';
-import { DateInput } from './chunk-BSAZRW6T.js';
-import { plainDateFromUnixSeconds, plainDateToUnixSeconds } from './chunk-QSEDH7T2.js';
-import { AutocompleteInputItem, createStaticSearchSource, AutocompleteInput } from './chunk-SBOXHIES.js';
-import { Tag } from './chunk-AFI4V7LI.js';
-import { Popover } from './chunk-ZAX2UJBC.js';
+import { HStack, VStack } from './chunk-5ZU7FY4O.js';
+import { TagsInput } from './chunk-M64WMYYV.js';
+import { Select } from './chunk-UYZQGHFI.js';
+import { NumberInput } from './chunk-WM7NEOME.js';
+import { TextInput } from './chunk-JR353MN5.js';
+import { TimeInput } from './chunk-FQN22DO5.js';
+import { DateInput } from './chunk-UT45YVPI.js';
+import { plainDateFromUnixSeconds, plainDateToUnixSeconds } from './chunk-5HPXUDX6.js';
 import { getBrowserTimezoneID, nowEpochMilliseconds } from './chunk-OX4ZMUF4.js';
-import { Button } from './chunk-2LABTS4P.js';
-import { Text } from './chunk-QRFDPG34.js';
+import { AutocompleteInputItem, createStaticSearchSource, AutocompleteInput } from './chunk-KCI4I42U.js';
+import { Tag } from './chunk-EIJSWHG7.js';
+import { Popover } from './chunk-JHMUMJF3.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { Text } from './chunk-NXTDP6AX.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { css } from './chunk-OD4DHHZH.js';
+import { cx } from './chunk-PPNETWIP.js';
 import { Search, X } from 'lucide-react';
 import { useState, useRef, useEffect, useMemo, useImperativeHandle, useCallback } from 'react';
 import { Temporal } from '@js-temporal/polyfill';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/components/SearchFilterInput/SearchFilterInputEditPopover.recipe.ts
+var searchFilterInputEditPopoverRecipe = sva({
+  slots: [
+    "root",
+    "content",
+    "footer",
+    "fieldSelector",
+    "operatorSelector",
+    "valueEditor",
+    "nestedList",
+    "nestedNode",
+    "nestedRow",
+    "nestedCell",
+    "nestedField",
+    "nestedOperator",
+    "nestedValue"
+  ],
+  base: {
+    root: {
+      overflow: "hidden",
+      minW: "100"
+    },
+    content: {
+      p: "4"
+    },
+    footer: {
+      px: "3",
+      pb: "3"
+    },
+    fieldSelector: {
+      flexShrink: 0
+    },
+    operatorSelector: {
+      flex: "1 0 auto"
+    },
+    valueEditor: {
+      flex: "2 1 0",
+      minW: 0
+    },
+    nestedList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      w: "full",
+      listStyleType: "none",
+      m: 0,
+      p: 0
+    },
+    nestedNode: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      ps: "3",
+      borderInlineStartWidth: "default",
+      borderInlineStartStyle: "solid",
+      borderColor: "border"
+    },
+    nestedRow: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      w: "full"
+    },
+    nestedCell: {
+      minW: 0
+    },
+    nestedField: {
+      flex: "0 0 200px"
+    },
+    nestedOperator: {
+      flex: "0 0 180px"
+    },
+    nestedValue: {
+      flex: "2 1 0"
+    }
+  }
+});
 function enumItemsToSearchableItems(values) {
   return values.map((item) => ({ id: item.value, label: item.label }));
 }
@@ -146,7 +225,7 @@ function TimeEditor({
           onChange({ type: "time", value: value.toString() });
         }
       },
-      value: filterValue?.type === "time" ? Temporal.PlainTime.from(filterValue.value) : void 0
+      value: filterValue?.type === "time" ? Temporal.PlainTime.from(filterValue.value) : null
     }
   );
 }
@@ -168,7 +247,7 @@ function DateAbsoluteEditor({
           });
         }
       },
-      value: filterValue?.type === "date_absolute" ? plainDateFromUnixSeconds(filterValue.unixSeconds, timezoneID) : void 0
+      value: filterValue?.type === "date_absolute" ? plainDateFromUnixSeconds(filterValue.unixSeconds, timezoneID) : null
     }
   );
 }
@@ -226,8 +305,8 @@ function DateRangeEditor({
   const startValue = filterValue?.type === "date_range" && filterValue.value.start.type === "ABSOLUTE" ? plainDateFromUnixSeconds(
     filterValue.value.start.unixSeconds,
     timezoneID
-  ) : void 0;
-  const endValue = filterValue?.type === "date_range" && filterValue.value.end.type === "ABSOLUTE" ? plainDateFromUnixSeconds(filterValue.value.end.unixSeconds, timezoneID) : void 0;
+  ) : null;
+  const endValue = filterValue?.type === "date_range" && filterValue.value.end.type === "ABSOLUTE" ? plainDateFromUnixSeconds(filterValue.value.end.unixSeconds, timezoneID) : null;
   const handleStartChange = useCallback(
     (value) => {
       const existingEnd = filterValue?.type === "date_range" ? filterValue.value.end : { type: "NOW" };
@@ -404,7 +483,6 @@ function SearchFilterInputValueEditor({
   filterValue,
   isDisabled,
   onChange,
-  onEnter,
   operatorValue,
   timezoneID
 }) {
@@ -524,65 +602,7 @@ function SearchFilterInputValueEditor({
       );
   }
 }
-var styles = {
-  root: css({
-    overflow: "hidden",
-    minW: "100"
-  }),
-  content: css({
-    p: "4"
-  }),
-  footer: css({
-    px: "3",
-    pb: "3"
-  }),
-  fieldSelector: css({
-    flexShrink: 0
-  }),
-  operatorSelector: css({
-    flex: "1 0 auto"
-  }),
-  valueEditor: css({
-    flex: "2 1 0",
-    minW: 0
-  }),
-  nestedList: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "2",
-    w: "full",
-    listStyleType: "none",
-    m: 0,
-    p: 0
-  }),
-  nestedNode: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "2",
-    ps: "3",
-    borderInlineStartWidth: "default",
-    borderInlineStartStyle: "solid",
-    borderColor: "border"
-  }),
-  nestedRow: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    w: "full"
-  }),
-  nestedCell: css({
-    minW: 0
-  }),
-  nestedField: css({
-    flex: "0 0 200px"
-  }),
-  nestedOperator: css({
-    flex: "0 0 180px"
-  }),
-  nestedValue: css({
-    flex: "2 1 0"
-  })
-};
+var styles = searchFilterInputEditPopoverRecipe();
 function initEditableFilter(config, filter) {
   const operator = config.getOperator(filter.field, filter.operator);
   if (operator?.value.type === "nested" && filter.value.type === "nested") {
@@ -654,7 +674,7 @@ function NestedSubFilterRow({
   const isNested = operatorValue?.type === "nested";
   const isEmpty = operatorValue?.type === "empty";
   return /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
-    /* @__PURE__ */ jsx("div", { className: `${styles.nestedCell} ${styles.nestedField}`, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cx(styles.nestedCell, styles.nestedField), children: /* @__PURE__ */ jsx(
       Select,
       {
         isDisabled: isReadOnly,
@@ -677,7 +697,7 @@ function NestedSubFilterRow({
         value: subFilter.field
       }
     ) }),
-    operatorOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: `${styles.nestedCell} ${styles.nestedOperator}`, children: /* @__PURE__ */ jsx(
+    operatorOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: cx(styles.nestedCell, styles.nestedOperator), children: /* @__PURE__ */ jsx(
       Select,
       {
         isDisabled: isReadOnly,
@@ -703,7 +723,7 @@ function NestedSubFilterRow({
         value: subFilter.operator ?? null
       }
     ) }) : null,
-    operatorValue != null && !isEmpty && !isNested ? /* @__PURE__ */ jsx("div", { className: `${styles.nestedCell} ${styles.nestedValue}`, children: /* @__PURE__ */ jsx(
+    operatorValue != null && !isEmpty && !isNested ? /* @__PURE__ */ jsx("div", { className: cx(styles.nestedCell, styles.nestedValue), children: /* @__PURE__ */ jsx(
       SearchFilterInputValueEditor,
       {
         config,
@@ -744,21 +764,20 @@ function NestedEditor({
   });
   const syncToParent = useCallback(
     (nextSubFilters) => {
-      if (nextSubFilters.length > 0 && nextSubFilters.every((filter) => isEditableFilterComplete(config, filter))) {
-        onPartialFilterChange({
-          ...partialFilter,
-          value: {
-            type: "nested",
-            value: nextSubFilters.map((filter) => editableToCompleteFilter(config, filter)).filter(
-              (filter) => filter != null
-            )
-          }
-        });
-      } else {
-        onPartialFilterChange({ ...partialFilter, value: void 0 });
-      }
+      const isComplete = nextSubFilters.length > 0 && nextSubFilters.every(
+        (filter) => isEditableFilterComplete(config, filter)
+      );
+      onPartialFilterChange((previous) => ({
+        ...previous,
+        value: isComplete ? {
+          type: "nested",
+          value: nextSubFilters.map((filter) => editableToCompleteFilter(config, filter)).filter(
+            (filter) => filter != null
+          )
+        } : void 0
+      }));
     },
-    [config, onPartialFilterChange, partialFilter]
+    [config, onPartialFilterChange]
   );
   const addSubFilter = () => {
     const fields = config.getVisibleFields();
@@ -773,26 +792,21 @@ function NestedEditor({
       value: void 0,
       _subFilters: operator?.value.type === "nested" ? [] : void 0
     };
-    setSubFilters((previous) => {
-      const updated = [...previous, next];
-      syncToParent(updated);
-      return updated;
-    });
+    const updated = [...subFilters, next];
+    setSubFilters(updated);
+    syncToParent(updated);
   };
   const updateSubFilter = (index, nextSubFilter) => {
-    setSubFilters((previous) => {
-      const updated = [...previous];
-      updated[index] = nextSubFilter;
-      syncToParent(updated);
-      return updated;
-    });
+    const updated = subFilters.map(
+      (subFilter, i) => i === index ? nextSubFilter : subFilter
+    );
+    setSubFilters(updated);
+    syncToParent(updated);
   };
   const removeSubFilter = (index) => {
-    setSubFilters((previous) => {
-      const updated = previous.filter((_, i) => i !== index);
-      syncToParent(updated);
-      return updated;
-    });
+    const updated = subFilters.filter((_, i) => i !== index);
+    setSubFilters(updated);
+    syncToParent(updated);
   };
   return /* @__PURE__ */ jsxs(VStack, { gap: 2, children: [
     operatorOptions.length > 1 ? /* @__PURE__ */ jsx(
@@ -996,7 +1010,6 @@ function SearchFilterInputEditPopover({
                     });
                   }
                 },
-                onEnter: handleSave,
                 operatorValue
               }
             ) }) : null
@@ -1034,7 +1047,7 @@ function numberValue(value, units) {
   const formatted = new Intl.NumberFormat().format(value);
   return units == null ? formatted : `${formatted} ${units}`;
 }
-function formatFilterValue(_config, operatorValue, filterValue, maxLength, timezoneID) {
+function formatFilterValue(operatorValue, filterValue, maxLength, timezoneID) {
   switch (filterValue.type) {
     case "empty":
       return "";
@@ -1385,7 +1398,6 @@ function SearchFilterInput({
       const operator = config.getOperator(filter.field, filter.operator);
       const operatorLabel = operator?.label ? ` ${operator.label}` : "";
       const value = operator == null ? "" : formatFilterValue(
-        config,
         operator.value,
         filter.value,
         maxTagLength,
@@ -1523,7 +1535,6 @@ function SearchFilterInput({
       );
     }
     const value = operator != null && filter != null ? formatFilterValue(
-      config,
       operator.value,
       filter.value,
       Math.max(
@@ -1664,7 +1675,7 @@ function SearchFilterInput({
         content: editorContent,
         hasAutoFocus: false,
         hasCloseButton: false,
-        hasLightDismiss: false,
+        isDismissable: false,
         isOpen: popoverState.type !== "idle",
         onOpenChange: (isOpen) => {
           if (!isOpen) {
@@ -1723,7 +1734,6 @@ function getSingleEntityPhoto(value) {
   return void 0;
 }
 function SearchFilterInputTag({
-  config: configFromProps,
   field,
   filter,
   isDisabled,
@@ -1732,14 +1742,12 @@ function SearchFilterInputTag({
   onRemove,
   operator
 }) {
-  const config = useInternalSearchFilterInputConfig(configFromProps);
   const tagLabel = `${field.label}${operator.label ? ` ${operator.label}` : ""}`;
   const adjustedMaxLength = Math.max(
     maxLength - field.label.length - operator.label.length,
     10
   );
   const value = formatFilterValue(
-    config,
     operator.value,
     filter.value,
     adjustedMaxLength
@@ -2101,5 +2109,5 @@ function useSearchFilterInputConfig(definitions, configName) {
 }
 
 export { SearchFilterInput, SearchFilterInputEditPopover, SearchFilterInputFilterEditor, SearchFilterInputTag, createSearchFilterInputConfig, formatFilterValue, useSearchFilterInputConfig, useSearchFilterInputSource };
-//# sourceMappingURL=chunk-VUCMGGU5.js.map
-//# sourceMappingURL=chunk-VUCMGGU5.js.map
+//# sourceMappingURL=chunk-4JJFQZVY.js.map
+//# sourceMappingURL=chunk-4JJFQZVY.js.map