@solidpb/ui-kit 0.1.1 → 0.2.0

package/dist/components/FilterBar/FilterBar.jsx

@@ -0,0 +1,234 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { TextField } from "@kobalte/core/text-field";
+import { tv } from "tailwind-variants";
+import Search from "lucide-solid/icons/search";
+import ListFilter from "lucide-solid/icons/list-filter";
+import ArrowDown from "lucide-solid/icons/arrow-down-narrow-wide";
+import invariant from "tiny-invariant";
+import { FilterChip, FilterGroupChip } from "./FilterChip";
+import AddFilter from "./AddFilter";
+import AddSortingDropdown from "./AddSortingDropdown";
+import EditFilters from "./EditFilters";
+import { DropdownMenu } from "../DropdownMenu";
+import { Modal } from "../Modal";
+import { Button } from "../Button";
+export const filterDefaults = {
+    text: "loose_contains",
+    bool: "is",
+    number: "is",
+    select: "is",
+    date: "greater_than",
+};
+export const filterLabels = {
+    text: {
+        loose_contains: "Contains",
+        in: "Contains (strict)",
+        not_in: "Doesn't contain",
+        fuzzy_match: "Fuzzy contains",
+        is: "Is",
+        is_not: "Is not",
+        is_set: "Is set",
+        is_not_set: "Is not set",
+    },
+    bool: {
+        is: "Is",
+    },
+    number: {
+        is: "Is",
+        greater_than: "Is greater than",
+        less_than: "Is less than",
+        between: "Is between",
+        is_not: "Is not",
+    },
+    select: {
+        is: "Is",
+        is_not: "Is not",
+        in: "Contains",
+        not_in: "Doesn't contain",
+        is_set: "Is set",
+        is_not_set: "Is not set",
+    },
+    date: {
+        greater_than: "Is after",
+        less_than: "Is before",
+        between: "Is between",
+        is: "Is",
+        is_not: "Is not",
+        is_set: "Is set",
+        is_not_set: "Is not set",
+    },
+};
+const filterBarBase = tv({
+    base: "relative flex flex-col not-sm:w-screen",
+});
+const filterBar = tv({
+    base: "input outline-offset-0 join-item flex-1",
+    variants: {
+        size: {
+            xs: "input-xs",
+            sm: "input-sm",
+            md: "input-md",
+            lg: "input-lg",
+            xl: "input-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+const suggestions = tv({
+    base: "menu w-full",
+    variants: {
+        size: {
+            xs: "menu-xs",
+            sm: "menu-sm",
+            md: "menu-md",
+            lg: "menu-lg",
+            xl: "menu-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+export const FilterBar = (props) => {
+    let ref;
+    const [dragging, setDragging] = createSignal("idle");
+    const [filterDropdownOpen, setFilterDropdownOpen] = createSignal(false);
+    const [showFieldDropdown, setShowFieldDropdown] = createSignal(false);
+    const textFields = createMemo(() => props.availableFields?.filter((f) => f.type === "text"));
+    const handleTextValueChange = (val) => {
+        setFocusedIndex(-1); // reset on type
+        props.onChangeValue?.(val);
+        setShowFieldDropdown(!!val);
+    };
+    const createTextFilter = (field) => {
+        const newFilter = {
+            field,
+            operator: "loose_contains",
+            value: props.value,
+        };
+        props.onAddFilterGroup([newFilter]);
+        handleTextValueChange("");
+    };
+    const isFilterGroup = (item) => {
+        return "filters" in item;
+    };
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = dropTargetForElements({
+            element,
+            canDrop({ source }) {
+                if (source.element === element) {
+                    return false;
+                }
+                return !!source.data.isFilterChip || !!source.data.isFilterGroupChip;
+            },
+            onDragEnter() {
+                setDragging("dragging-over");
+            },
+            onDrag() {
+                if (dragging() !== "dragging-over") {
+                    setDragging("dragging-over");
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+            },
+            onDrop({ source, location }) {
+                setDragging("idle");
+                if (location.current.dropTargets[0].element !== ref)
+                    return;
+                props.onGroupDrag(source.data.index, -1, source.data.groupIndex);
+            },
+        });
+        onCleanup(dispose);
+    });
+    const [focusedIndex, setFocusedIndex] = createSignal(-1);
+    const handleKeyDown = (e) => {
+        const fields = textFields() ?? [];
+        if (!showFieldDropdown() || fields.length === 0)
+            return;
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setFocusedIndex((i) => Math.min(i + 1, fields.length - 1));
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setFocusedIndex((i) => Math.max(i - 1, 0));
+        }
+        else if (e.key === "Enter" && focusedIndex() >= 0) {
+            e.preventDefault();
+            createTextFilter(fields[focusedIndex()]);
+            setFocusedIndex(-1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setShowFieldDropdown(false);
+            setFocusedIndex(-1);
+        }
+    };
+    return (<div class={filterBarBase({ class: props.class })}>
+      <div class="flex w-full gap-1">
+        <Show when={props.leftAction}>{props.leftAction}</Show>
+        <div class="join flex flex-1 relative">
+          <TextField value={props.value} onChange={handleTextValueChange} class={filterBar({ size: props.size })} onKeyDown={handleKeyDown}>
+            <Search class="w-[1em] h-[1em] opacity-90"/>
+            <TextField.Input placeholder={props.placeholder || "Search"} class="grow focus:outline-none" onFocusIn={() => setShowFieldDropdown(!!props.value)} onFocusOut={() => setShowFieldDropdown(false)}/>
+          </TextField>
+          <Modal title="Add filters" open={filterDropdownOpen()} onOpenChange={setFilterDropdownOpen}>
+            <Modal.Trigger as={Button} modifier="square" class="join-item">
+              <ListFilter class="w-[1em] h-[1em]"/>
+            </Modal.Trigger>
+            <Modal.Modal class="bg-base-200">
+              <AddFilter size={props.size} availableFields={props.availableFields ?? []} onAddFilters={props.onAddFilterGroup} setOpen={setFilterDropdownOpen}/>
+            </Modal.Modal>
+          </Modal>
+          <Show when={props.setSortBy}>
+            <DropdownMenu>
+              <div class="indicator">
+                {props.sortBy && <span class="indicator-item status status-neutral"></span>}
+                <DropdownMenu.Trigger size={props.size} modifier="square" class="join-item">
+                  <ArrowDown class="w-[1em] h-[1em]"/>
+                </DropdownMenu.Trigger>
+              </div>
+              <AddSortingDropdown size={props.size} availableFields={props.availableFields ?? []} sortBy={props.sortBy} setSortBy={props.setSortBy}/>
+            </DropdownMenu>
+          </Show>
+          {showFieldDropdown() && (<div class="absolute top-full left-0 mt-1 w-full dropdown-content rounded-box bg-base-100 shadow-md z-20">
+              <ul class={suggestions({ size: props.size })}>
+                <For each={textFields()}>
+                  {(item, index) => (<li class="menu-item" classList={{ "bg-base-300 rounded-sm": focusedIndex() === index() }} onMouseDown={(e) => {
+                    e.preventDefault(); // prevent input blur
+                    createTextFilter(item);
+                }} onMouseEnter={() => setFocusedIndex(index())}>
+                      <p class="flex gap-1">
+                        <span class="font-bold">{item.label}</span>
+                        <span class="italic">Contains</span>
+                        <span>'{props.value}'</span>
+                      </p>
+                    </li>)}
+                </For>
+              </ul>
+            </div>)}
+        </div>
+      </div>
+      <div ref={ref} class="w-full flex flex-wrap gap-0.5 mt-1">
+        <For each={props.items}>
+          {(item, i) => {
+            const [itemOpen, setItemOpen] = createSignal(false);
+            return (<Modal title="Edit filters" open={itemOpen()} onOpenChange={setItemOpen}>
+                <Show when={isFilterGroup(item)} fallback={<Modal.Trigger as={FilterChip} onDelete={() => props.onFilterRemove(i(), item)} filter={item} size={props.size} onGroupDrag={(sourceInd, sourceFilterGroupInd) => props.onGroupDrag(sourceInd, i(), sourceFilterGroupInd)} index={i()} setOpen={setItemOpen}/>}>
+                  <Modal.Trigger as={FilterGroupChip} filterGroup={item} size={props.size} onGroupDrag={(sourceInd, sourceFilterGroupInd) => props.onGroupDrag(sourceInd, i(), sourceFilterGroupInd)} index={i()} setOpen={setItemOpen}/>
+                </Show>
+                <Modal.Modal class="bg-base-200">
+                  <EditFilters size={props.size} availableFields={props.availableFields ?? []} onSaveFilters={(filters) => props.onUpdateFilterGroup(i(), filters)} currentFilters={isFilterGroup(item) ? item.filters : [item]} setOpen={setItemOpen}/>
+                </Modal.Modal>
+              </Modal>);
+        }}
+        </For>
+      </div>
+    </div>);
+};

package/dist/components/FilterBar/FilterChip.d.ts

@@ -0,0 +1,23 @@
+import { Setter } from "solid-js";
+import { Filter, FilterGroup } from "./FilterBar";
+interface FilterChipOrGroupProps {
+    onGroupDrag: (sourceInd: number, sourceFilterGroupInd?: number) => void;
+    onDelete?: () => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    class?: string;
+    index: number;
+    setOpen?: Setter<boolean>;
+}
+interface FilterChipProps<T> extends FilterChipOrGroupProps {
+    onClick?: (filter: Filter<T>) => void;
+    filter: Filter<T>;
+    isInGroup?: boolean;
+    groupIndex?: number;
+}
+export declare const FilterChip: <T>(props: FilterChipProps<T>) => import("solid-js").JSX.Element;
+interface FilterGroupProps<T> extends FilterChipOrGroupProps {
+    filterGroup: FilterGroup<T>;
+    onClick?: (filterGroup: FilterGroup<T>) => void;
+}
+export declare const FilterGroupChip: <T>(props: FilterGroupProps<T>) => import("solid-js").JSX.Element;
+export default FilterChip;

package/dist/components/FilterBar/FilterChip.jsx

@@ -0,0 +1,220 @@
+import { createEffect, createMemo, createSignal, For, onCleanup } from "solid-js";
+import { dropTargetForElements, draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import invariant from "tiny-invariant";
+import CloseIcon from "lucide-solid/icons/x";
+import { tv } from "tailwind-variants";
+import { filterLabels } from "./FilterBar";
+import { Button } from "../Button";
+const filterChip = tv({
+    base: "badge badge-soft cursor-pointer",
+    variants: {
+        size: {
+            xs: "badge-xs",
+            sm: "badge-sm",
+            md: "badge-md",
+            lg: "badge-lg",
+            xl: "badge-xl",
+        },
+    },
+});
+export const FilterChip = (props) => {
+    let ref;
+    const [dragging, setDragging] = createSignal("idle");
+    const filterOperator = createMemo(() => {
+        return filterLabels[props.filter.field.type][props.filter.operator] || "has";
+    });
+    const valueLabel = createMemo(() => {
+        let val = props.filter.value;
+        if (val === null)
+            return "";
+        switch (typeof val) {
+            case "boolean":
+                return val ? "True" : "False";
+            case "number":
+                return String(val);
+            case "string":
+                return val;
+            case "object":
+                if ("label" in val) {
+                    return val.label;
+                }
+                else {
+                    let valText = val.startDate ? String(val.startDate.toLocaleDateString("en-GB")) : "";
+                    if (val.endDate)
+                        valText += ` - ${val.endDate.toLocaleDateString("en-GB")}`;
+                    return valText;
+                }
+        }
+    });
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = dropTargetForElements({
+            element,
+            canDrop({ source }) {
+                // not allowing dropping on yourself
+                if (source.element === element) {
+                    return false;
+                }
+                return !!source.data.isFilterChip || !!source.data.isFilterGroupChip;
+            },
+            onDragEnter() {
+                setDragging("dragging-over");
+            },
+            onDrag() {
+                if (dragging() !== "dragging-over") {
+                    setDragging("dragging-over");
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+            },
+            onDrop({ source }) {
+                setDragging("idle");
+                if (source.data.index === props.index)
+                    return;
+                // add the target ind and group source ind if it exists
+                props.onGroupDrag(source.data.index, source.data.groupIndex);
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = draggable({
+            element,
+            getInitialData() {
+                return {
+                    isFilterChip: true,
+                    index: props.index,
+                    isInGroup: props.isInGroup || false,
+                    groupIndex: props.groupIndex,
+                };
+            },
+            onDragStart() {
+                setDragging("dragging");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(() => dispose());
+    });
+    const bgStyle = createMemo(() => {
+        if (dragging() === "dragging-over") {
+            return { "background-color": "color-mix(in srgb, var(--color-primary) 10%, transparent)" };
+        }
+        return {};
+    });
+    return (<div class={filterChip({ size: props.size, class: props.class })} ref={ref} style={{ opacity: dragging() === "dragging" ? 0.2 : 1, ...bgStyle() }} onClick={() => props.setOpen?.((prev) => !prev)}>
+      <div class="not-sm:tooltip not-sm:tooltip-bottom not-sm:tooltip-neutral">
+        <span class="font-bold">{String(props.filter.field.label)}</span>
+        <span class="mx-1 hidden sm:inline">{filterOperator()}</span>
+        {valueLabel() && <span class="hidden sm:inline">{valueLabel()}</span>}
+        <div class="inline sm:hidden tooltip-content">
+          <span class="font-bold">{String(props.filter.field.label)}</span>
+          <span class="mx-1 inline sm:hidden">{filterOperator()}</span>
+          {valueLabel() && <span class="inline sm:hidden">{valueLabel()}</span>}
+        </div>
+      </div>
+      {props.onDelete && (<Button onClick={props.onDelete} size="xs" variant="ghost" class="p-0.5 m-0 h-min">
+          <CloseIcon class="w-[1em] h-[1em]" stroke-width={4}/>
+        </Button>)}
+    </div>);
+};
+const filterGroupChip = tv({
+    base: "badge badge-soft cursor-pointer pl-0 pr-1 gap-0.5",
+    variants: {
+        size: {
+            xs: "badge-xs",
+            sm: "badge-sm",
+            md: "badge-md",
+            lg: "badge-lg",
+            xl: "badge-xl",
+        },
+    },
+});
+export const FilterGroupChip = (props) => {
+    let ref;
+    const [dragging, setDragging] = createSignal("idle");
+    const extraCount = () => props.filterGroup.filters.length - 1;
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = dropTargetForElements({
+            element,
+            canDrop({ source }) {
+                // not allowing dropping on yourself
+                if (source.element === element) {
+                    return false;
+                }
+                return !!source.data.isFilterChip || !!source.data.isFilterGroupChip;
+            },
+            onDragEnter() {
+                setDragging("dragging-over");
+            },
+            onDrag() {
+                if (dragging() !== "dragging-over") {
+                    setDragging("dragging-over");
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+            },
+            onDrop({ source, location }) {
+                setDragging("idle");
+                if (location.current.dropTargets[0].element !== ref)
+                    return;
+                // add the target ind and group source ind if it exists
+                props.onGroupDrag(source.data.index, source.data.groupIndex);
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        const element = ref;
+        invariant(element);
+        const dispose = draggable({
+            element,
+            getInitialData() {
+                return {
+                    isFilterGroupChip: true,
+                    isInGroup: false,
+                    index: props.index,
+                };
+            },
+            onDragStart() {
+                setDragging("dragging");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(dispose);
+    });
+    const bgStyle = createMemo(() => {
+        if (dragging() === "dragging-over") {
+            return { "background-color": "color-mix(in srgb, var(--color-primary) 10%, transparent)" };
+        }
+        return {};
+    });
+    return (<div ref={ref} class={filterGroupChip({ size: props.size })} style={{ opacity: dragging() === "dragging" ? 0.2 : 1, ...bgStyle() }} onClick={() => props.setOpen?.((prev) => !prev)}>
+      <FilterChip filter={props.filterGroup.filters[0]} onGroupDrag={props.onGroupDrag} isInGroup={true} groupIndex={0} index={props.index}/>
+      <For each={props.filterGroup.filters.slice(1)}>
+        {(filter, ind) => (<>
+            <span class="italic mx-0.5 hidden sm:inline">Or</span>
+            <div class="hidden sm:contents">
+              <FilterChip filter={filter} onGroupDrag={props.onGroupDrag} isInGroup={true} groupIndex={ind()} index={props.index}/>
+            </div>
+          </>)}
+      </For>
+
+      <span class="sm:hidden badge badge-ghost badge-xs">+{extraCount()} more</span>
+
+      <Button onClick={props.onDelete} size="xs" variant="ghost" class="p-0.5 m-0 h-min">
+        <CloseIcon class="w-[1em] h-[1em]" stroke-width={4}/>
+      </Button>
+    </div>);
+};
+export default FilterChip;

package/dist/components/FilterBar/FilterEdit.d.ts

@@ -0,0 +1,13 @@
+import { Filter, FilterField, FilterOperator, FilterValue } from "./FilterBar";
+interface FilterEditProps<T> {
+    availableFields: FilterField<T>[];
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    filter: Partial<Filter<T>>;
+    setField: (field?: FilterField<T>) => void;
+    setOperator: (operator?: FilterOperator) => void;
+    setValue: (value?: FilterValue) => void;
+    setCanConfirm: (v: boolean) => void;
+    onDelete?: () => void;
+}
+export declare const FilterEdit: <T>(props: FilterEditProps<T>) => import("solid-js").JSX.Element;
+export default FilterEdit;

package/dist/components/FilterBar/FilterEdit.jsx

@@ -0,0 +1,159 @@
+import { createMemo, createSignal, Match, Show, Switch } from "solid-js";
+import { createStore } from "solid-js/store";
+import X from "lucide-solid/icons/x";
+import { filterDefaults, filterLabels, } from "./FilterBar";
+import { Select } from "../Select";
+import { Input } from "../Input";
+import { NumberInput } from "../NumberInput";
+import { DateInput } from "../DateInput";
+import { Button } from "../Button";
+export const FilterEdit = (props) => {
+    const [selectedBoolValue, setSelectedBoolValue] = createSignal(props.filter.field?.type === "bool"
+        ? {
+            label: props.filter.value ? "Is True" : "Is False",
+            value: props.filter.value,
+        }
+        : null);
+    const [selectedTextValue, setSelectedTextValue] = createSignal(props.filter.field?.type === "text" ? props.filter.value : "");
+    const [selectedNumberValue, setSelectedNumberValue] = createSignal(props.filter.field?.type === "number" ? props.filter.value : 0);
+    const [selectedSelectValue, setSelectedSelectValue] = createSignal(props.filter.field?.type === "select" ? props.filter.value : null);
+    const [selectedDateValues, setSelectedDateValues] = createStore(props.filter.field?.type === "date"
+        ? props.filter.value
+        : { startDate: null, endDate: null });
+    const availableOperators = createMemo(() => props.filter.field
+        ? Object.entries(filterLabels[props.filter.field.type]).map(([value, label]) => ({
+            label,
+            value: value,
+        }))
+        : []);
+    const handleOperatorChange = (operator) => {
+        props.setOperator(operator);
+        if (["is_set", "is_not_set"].includes(operator ?? "")) {
+            props.setValue(null);
+            props.setCanConfirm(true);
+        }
+        else {
+            switch (props.filter.field?.type) {
+                case "number":
+                    props.setValue(0);
+                    props.setCanConfirm(true);
+                    return;
+                case "text":
+                    props.setValue("");
+                default:
+                    props.setValue(undefined);
+            }
+            props.setCanConfirm(false);
+            // hmm, for ux I don't want to clear too much when switching operator. will see how this feels.
+            // need to do this for canConfirm behaviour atm
+            setSelectedDateValues("endDate", null);
+        }
+    };
+    const handleFieldChange = (f) => {
+        props.setField(f);
+        const newOperator = f ? filterDefaults[f.type] : undefined;
+        handleOperatorChange(newOperator);
+    };
+    const canConfirm = (val) => {
+        if (!props.filter.field || !props.filter.operator || val === undefined || val === "")
+            return false;
+        if (props.filter.field?.type === "date" &&
+            props.filter.operator === "between" &&
+            (selectedDateValues.endDate === null || selectedDateValues.startDate === null)) {
+            return false;
+        }
+        return true;
+    };
+    const handleValueChange = (val) => {
+        if (Number.isNaN(val)) {
+            props.setValue(0);
+        }
+        else {
+            props.setValue(val);
+        }
+        props.setCanConfirm(canConfirm(val));
+    };
+    const selectValue = createMemo(() => {
+        if (!props.filter.operator || !props.filter.field)
+            return null;
+        return {
+            value: props.filter.operator,
+            label: filterLabels[props.filter.field.type][props.filter.operator] || "",
+        };
+    });
+    return (<div class="bg-base-100 p-2 rounded-box">
+      <div class="flex justify-end mb-1">
+        <Show when={props.onDelete}>
+          <Button variant="ghost" size="xs" appearance="error" modifier="circle" onClick={props.onDelete}>
+            <X size={12}/>
+          </Button>
+        </Show>
+      </div>
+      <div class="flex flex-col lg:flex-row gap-3">
+        <Select label="Field" value={props.filter.field ?? null} labelKey="label" valueKey="name" onChange={(f) => handleFieldChange(f ?? undefined)} options={props.availableFields} size={props.size} class="min-w-50"/>
+        <Show when={props.filter.field?.type !== "bool"}>
+          <Select value={selectValue()} label="Operator" labelKey="label" valueKey="value" onChange={(v) => handleOperatorChange(v?.value)} options={availableOperators()} disabled={!props.filter.field} size={props.size} class="min-w-50"/>
+        </Show>
+        <Switch>
+          <Match when={props.filter.field?.type === "bool"}>
+            <Select label="Value" labelKey="label" valueKey="value" value={selectedBoolValue()} onChange={(val) => {
+            setSelectedBoolValue(val);
+            handleValueChange(val?.value);
+        }} options={[
+            { label: "Is True", value: true },
+            { label: "Is False", value: false },
+        ]} size={props.size} class="min-w-50"/>
+          </Match>
+          <Match when={props.filter.field?.type === "text" &&
+            !["is_set", "is_not_set"].includes(props.filter.operator ?? "")}>
+            <Input label="Value" value={selectedTextValue()} onChange={(val) => {
+            setSelectedTextValue(val);
+            handleValueChange(val);
+        }} size={props.size} class="min-w-50"/>
+          </Match>
+          <Match when={props.filter.field?.type === "number"}>
+            <NumberInput label="Value" rawValue={selectedNumberValue()} onRawValueChange={(val) => {
+            setSelectedNumberValue(val);
+            handleValueChange(val);
+        }} inputProps={{ class: "w-full" }} size={props.size} class="min-w-50"/>
+          </Match>
+          <Match when={props.filter.field?.type === "select" &&
+            !["is_set", "is_not_set"].includes(props.filter.operator ?? "")}>
+            <Show when={["in", "not_in"].includes(props.filter.operator ?? "")} fallback={<Select value={selectedSelectValue()} label="Value" labelKey="label" valueKey="value" onChange={(val) => {
+                setSelectedSelectValue(val);
+                handleValueChange(val);
+            }} options={props.filter.field?.options ?? []} disabled={!props.filter.operator || !props.filter.field?.options?.length} size={props.size} class="min-w-50"/>}>
+              <Input label="Value" value={selectedTextValue()} onChange={(val) => {
+            setSelectedTextValue(val);
+            handleValueChange(val);
+        }} size={props.size} class="min-w-50"/>
+            </Show>
+          </Match>
+          <Match when={props.filter.field?.type === "date" &&
+            !["is_set", "is_not_set"].includes(props.filter.operator ?? "")}>
+            <DateInput value={selectedDateValues.startDate} onChange={(val) => {
+            setSelectedDateValues("startDate", val);
+            let newVal = undefined;
+            if (val && !(props.filter.operator === "between" && selectedDateValues.endDate !== null)) {
+                newVal = { ...selectedDateValues };
+            }
+            handleValueChange(newVal);
+        }} max={selectedDateValues.endDate ? selectedDateValues.endDate.toISOString().slice(0, 10) : undefined} label={props.filter.operator === "between" ? "Start" : ""} size={props.size} class="min-w-50"/>
+            <Show when={props.filter.operator === "between"}>
+              <DateInput value={selectedDateValues.endDate} label="End" min={selectedDateValues.startDate
+            ? selectedDateValues.startDate.toISOString().slice(0, 10)
+            : undefined} onChange={(val) => {
+            setSelectedDateValues("endDate", val);
+            let newVal = undefined;
+            if (val && selectedDateValues.startDate !== null) {
+                newVal = { ...selectedDateValues };
+            }
+            handleValueChange(newVal);
+        }} size={props.size} class="min-w-50"/>
+            </Show>
+          </Match>
+        </Switch>
+      </div>
+    </div>);
+};
+export default FilterEdit;

package/dist/components/FilterBar/FiltersEdit.d.ts

@@ -0,0 +1,13 @@
+import { JSXElement } from "solid-js";
+import { Filter, FilterField } from "./FilterBar";
+interface FiltersEditProps<T> {
+    availableFields: FilterField<T>[];
+    filters: Partial<Filter<T>>[];
+    onSaveFilters: (filters: Filter<T>[]) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    saveTrigger: JSXElement;
+    addConditionTrigger?: JSXElement;
+    filtersReady?: boolean;
+}
+export declare const FiltersEdit: <T>(props: FiltersEditProps<T>) => import("solid-js").JSX.Element;
+export default FiltersEdit;