@floegence/floe-webapp-core 0.86.76 → 0.87.1

package/dist/components/ui/DataTable.js

@@ -0,0 +1,269 @@
+import { insert as a, createComponent as r, memo as d, effect as B, className as D, setAttribute as w, template as m, use as H } from "solid-js/web";
+import { createMemo as K, Show as o, For as y } from "solid-js";
+import { useFloeLocale as j } from "../../context/LocaleContext.js";
+import { Button as C } from "./Button.js";
+import { FeedbackIndicator as z } from "./FeedbackIndicator.js";
+import { Checkbox as L } from "./Checkbox.js";
+import { Table as E, TableCaption as I, TableHeader as M, TableRow as x, TableHead as F, TableBody as N, TableCell as S } from "./Table.js";
+var q = /* @__PURE__ */ m('<div role=alert class="flex flex-wrap items-center gap-2 py-2 text-error">'), G = /* @__PURE__ */ m('<span role=status class="text-caption text-muted-foreground">'), J = /* @__PURE__ */ m('<section><div class="max-w-full overflow-x-auto rounded-panel border border-border"tabindex=0 role=region data-floe-local-interaction-surface=true></div><div class="mt-2 flex min-h-[var(--floe-control-height-md)] flex-wrap items-center justify-between gap-2"><span role=status class=sr-only>'), O = /* @__PURE__ */ m("<span aria-hidden=true>");
+function Z(e) {
+  const l = j();
+  let f;
+  const v = K(() => e.columns.filter((n) => !e.hiddenColumns?.includes(n.id))), u = K(() => e.rows.filter((n) => e.isRowSelectable?.(n) !== !1).map(e.rowKey)), h = () => new Set(e.selectedKeys ?? []), _ = () => u().length > 0 && u().every((n) => h().has(n)), A = () => !_() && u().some((n) => h().has(n)), $ = (n, c) => {
+    const g = h();
+    n.forEach((s) => c ? g.add(s) : g.delete(s)), e.onSelectionChange?.([...g]);
+  };
+  return (() => {
+    var n = J(), c = n.firstChild, g = c.nextSibling, s = g.firstChild;
+    a(n, () => e.toolbar, c), a(n, r(o, {
+      get when() {
+        return d(() => !!e.error)() && !e.rows.length;
+      },
+      get children() {
+        var t = q();
+        return a(t, () => e.error, null), a(t, r(o, {
+          get when() {
+            return e.onRetry;
+          },
+          get children() {
+            return r(C, {
+              variant: "outline",
+              onClick: () => e.onRetry?.(),
+              get children() {
+                return l.t("retry");
+              }
+            });
+          }
+        }), null), t;
+      }
+    }), c);
+    var T = f;
+    return typeof T == "function" ? H(T, c) : f = c, a(c, r(E, {
+      get "aria-label"() {
+        return e.ariaLabel;
+      },
+      get "aria-busy"() {
+        return e.loading || void 0;
+      },
+      get children() {
+        return [r(o, {
+          get when() {
+            return e.caption;
+          },
+          get children() {
+            return r(I, {
+              get children() {
+                return e.caption;
+              }
+            });
+          }
+        }), r(M, {
+          get children() {
+            return r(x, {
+              get children() {
+                return [r(o, {
+                  get when() {
+                    return e.onSelectionChange;
+                  },
+                  get children() {
+                    return r(F, {
+                      class: "w-10",
+                      get children() {
+                        return r(L, {
+                          get "aria-label"() {
+                            return l.t("selectAll");
+                          },
+                          get checked() {
+                            return _();
+                          },
+                          get indeterminate() {
+                            return A();
+                          },
+                          get disabled() {
+                            return !u().length;
+                          },
+                          onChange: (t) => $(u(), t)
+                        });
+                      }
+                    });
+                  }
+                }), r(y, {
+                  get each() {
+                    return v();
+                  },
+                  children: (t) => r(F, {
+                    get class() {
+                      return t.class;
+                    },
+                    get "aria-sort"() {
+                      return d(() => e.sort?.column === t.id)() ? e.sort.direction === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0;
+                    },
+                    get children() {
+                      return r(o, {
+                        get when() {
+                          return d(() => !!t.sortable)() && e.onSortChange;
+                        },
+                        get fallback() {
+                          return t.header;
+                        },
+                        get children() {
+                          return r(C, {
+                            variant: "ghost",
+                            size: "sm",
+                            class: "-ms-2",
+                            get "aria-label"() {
+                              return l.t(e.sort?.column === t.id && e.sort.direction === "asc" ? "sortDescending" : "sortAscending", {
+                                column: t.header
+                              });
+                            },
+                            onClick: () => e.onSortChange?.({
+                              column: t.id,
+                              direction: e.sort?.column === t.id && e.sort.direction === "asc" ? "desc" : "asc"
+                            }),
+                            get children() {
+                              return [d(() => t.header), (() => {
+                                var i = O();
+                                return a(i, (() => {
+                                  var b = d(() => e.sort?.column === t.id);
+                                  return () => b() ? e.sort.direction === "asc" ? "↑" : "↓" : "↕";
+                                })()), i;
+                              })()];
+                            }
+                          });
+                        }
+                      });
+                    }
+                  })
+                })];
+              }
+            });
+          }
+        }), r(N, {
+          get children() {
+            return [r(y, {
+              get each() {
+                return e.rows;
+              },
+              children: (t) => r(x, {
+                get "data-selected"() {
+                  return h().has(e.rowKey(t)) ? "true" : void 0;
+                },
+                get children() {
+                  return [r(o, {
+                    get when() {
+                      return e.onSelectionChange;
+                    },
+                    get children() {
+                      return r(S, {
+                        get children() {
+                          return r(L, {
+                            get "aria-label"() {
+                              return l.t("selectRow", {
+                                row: e.rowLabel?.(t) ?? e.rowKey(t)
+                              });
+                            },
+                            get checked() {
+                              return h().has(e.rowKey(t));
+                            },
+                            get disabled() {
+                              return e.isRowSelectable?.(t) === !1;
+                            },
+                            onChange: (i) => $([e.rowKey(t)], i)
+                          });
+                        }
+                      });
+                    }
+                  }), r(y, {
+                    get each() {
+                      return v();
+                    },
+                    children: (i) => r(S, {
+                      get class() {
+                        return i.class;
+                      },
+                      get children() {
+                        return i.cell(t);
+                      }
+                    })
+                  })];
+                }
+              })
+            }), r(o, {
+              get when() {
+                return !e.rows.length;
+              },
+              get children() {
+                return r(x, {
+                  get children() {
+                    return r(S, {
+                      get colSpan() {
+                        return v().length + (e.onSelectionChange ? 1 : 0);
+                      },
+                      class: "py-8 text-center text-muted-foreground",
+                      get children() {
+                        return d(() => !!e.loading)() ? l.t("loading") : d(() => !!e.error)() ? "" : e.empty ?? l.t("emptyTable");
+                      }
+                    });
+                  }
+                });
+              }
+            })];
+          }
+        })];
+      }
+    })), a(g, r(o, {
+      get when() {
+        return d(() => !!e.error)() && e.rows.length;
+      },
+      get children() {
+        return r(z, {
+          get label() {
+            return e.error;
+          },
+          get closeLabel() {
+            return l.t("close");
+          },
+          restoreFocus: () => f,
+          get entries() {
+            return [{
+              id: "refresh",
+              severity: "error",
+              summary: e.error,
+              actions: e.onRetry ? r(C, {
+                variant: "outline",
+                onClick: () => e.onRetry?.(),
+                get children() {
+                  return l.t("retry");
+                }
+              }) : void 0
+            }];
+          }
+        });
+      }
+    }), s), a(s, (() => {
+      var t = d(() => !!e.loading);
+      return () => t() ? l.t("loading") : "";
+    })()), a(g, r(o, {
+      get when() {
+        return e.onSelectionChange;
+      },
+      get children() {
+        var t = G();
+        return a(t, () => l.t("selectedCount", {
+          count: e.selectedKeys?.length ?? 0
+        })), t;
+      }
+    }), null), a(g, () => e.pagination, null), B((t) => {
+      var i = e.class, b = l.direction, R = e.ariaLabel, k = e.ariaLabel;
+      return i !== t.e && D(n, t.e = i), b !== t.t && w(n, "dir", t.t = b), R !== t.a && w(n, "aria-label", t.a = R), k !== t.o && w(c, "aria-label", t.o = k), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), n;
+  })();
+}
+export {
+  Z as DataTable
+};

package/dist/components/ui/DatePicker.d.ts

@@ -0,0 +1,35 @@
+export interface DatePickerProps {
+    id?: string;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    ariaLabel?: string;
+    class?: string;
+    clearable?: boolean;
+    weekStartsOn?: number;
+}
+/** YYYY-MM-DD civil date. Hosts explicitly convert it to instants when needed. */
+export declare function DatePicker(props: DatePickerProps): import("solid-js").JSX.Element;
+export interface DateRange {
+    start: string;
+    end: string;
+}
+export interface DateRangePickerProps {
+    value: DateRange;
+    onChange: (value: DateRange) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    startName?: string;
+    endName?: string;
+    startLabel?: string;
+    endLabel?: string;
+    class?: string;
+}
+export declare function DateRangePicker(props: DateRangePickerProps): import("solid-js").JSX.Element;

package/dist/components/ui/DatePicker.js

@@ -0,0 +1,198 @@
+import { insert as g, createComponent as d, mergeProps as w, memo as f, effect as L, className as y, setAttribute as s, template as h } from "solid-js/web";
+import { createUniqueId as O, createSignal as _, onMount as k, onCleanup as P, Show as S } from "solid-js";
+import { useFloeLocale as D } from "../../context/LocaleContext.js";
+import { useFormControl as T } from "./formFieldContext.js";
+import { createControllableValue as V } from "./controllable.js";
+import { Calendar as $ } from "./Calendar.js";
+import { Popover as q } from "./Popover.js";
+import { Button as x } from "./Button.js";
+import { Input as F } from "./Input.js";
+var I = /* @__PURE__ */ h("<div>"), N = /* @__PURE__ */ h("<span aria-hidden=true>▦"), z = /* @__PURE__ */ h('<div><div class="space-y-1 text-caption"><label></label></div><div class="space-y-1 text-caption"><label>');
+function C(e) {
+  const l = D(), n = T(), c = O(), [i, m] = V({
+    value: () => e.value,
+    defaultValue: e.defaultValue ?? "",
+    onChange: (r) => e.onChange?.(r)
+  }), [o, v] = _(!1);
+  let a;
+  return k(() => {
+    const r = a?.form;
+    let t;
+    const u = (b) => {
+      clearTimeout(t), t = setTimeout(() => {
+        b.defaultPrevented || (m(e.defaultValue ?? ""), v(!1), a && (a.value = i()));
+      });
+    };
+    r?.addEventListener("reset", u), P(() => {
+      clearTimeout(t), r?.removeEventListener("reset", u);
+    });
+  }), (() => {
+    var r = I();
+    return g(r, d(F, {
+      ref(t) {
+        var u = a;
+        typeof u == "function" ? u(t) : a = t;
+      },
+      get id() {
+        return e.id ?? n.id ?? "date-" + c;
+      },
+      get name() {
+        return e.name ?? n.name;
+      },
+      type: "date",
+      get value() {
+        return i();
+      },
+      get min() {
+        return e.min;
+      },
+      get max() {
+        return e.max;
+      },
+      get disabled() {
+        return e.disabled ?? n.disabled;
+      },
+      get readOnly() {
+        return e.readOnly ?? n.readOnly;
+      },
+      get required() {
+        return e.required ?? n.required;
+      },
+      get "aria-label"() {
+        return e.ariaLabel;
+      },
+      onInput: (t) => m(t.currentTarget.value)
+    }), null), g(r, d(q, {
+      get open() {
+        return o();
+      },
+      onOpenChange: v,
+      get ariaLabel() {
+        return e.ariaLabel ?? l.t("chooseDate");
+      },
+      trigger: (t) => d(x, w(t, {
+        variant: "outline",
+        size: "icon",
+        get "aria-label"() {
+          return l.t("chooseDate");
+        },
+        get disabled() {
+          return (e.disabled ?? n.disabled) || (e.readOnly ?? n.readOnly);
+        },
+        get children() {
+          return N();
+        }
+      })),
+      get children() {
+        return d($, {
+          autoFocus: !0,
+          get value() {
+            return i();
+          },
+          onChange: (t) => {
+            m(t), v(!1), a?.focus();
+          },
+          get min() {
+            return e.min;
+          },
+          get max() {
+            return e.max;
+          },
+          get weekStartsOn() {
+            return e.weekStartsOn;
+          }
+        });
+      }
+    }), null), g(r, d(S, {
+      get when() {
+        return f(() => !!e.clearable)() && i();
+      },
+      get children() {
+        return d(x, {
+          variant: "ghost",
+          size: "sm",
+          get disabled() {
+            return (e.disabled ?? n.disabled) || (e.readOnly ?? n.readOnly);
+          },
+          onClick: () => {
+            m(""), a?.focus();
+          },
+          get children() {
+            return l.t("clear");
+          }
+        });
+      }
+    }), null), L((t) => {
+      var u = "flex min-w-0 items-center gap-1 " + (e.class ?? ""), b = l.direction;
+      return u !== t.e && y(r, t.e = u), b !== t.t && s(r, "dir", t.t = b), t;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+function J(e) {
+  const l = D(), n = O();
+  return (() => {
+    var c = z(), i = c.firstChild, m = i.firstChild, o = i.nextSibling, v = o.firstChild;
+    return s(m, "for", n + "-start"), g(m, () => e.startLabel ?? l.t("startDate")), g(i, d(C, {
+      id: n + "-start",
+      get name() {
+        return e.startName;
+      },
+      get ariaLabel() {
+        return e.startLabel ?? l.t("startDate");
+      },
+      get value() {
+        return e.value.start;
+      },
+      get min() {
+        return e.min;
+      },
+      get max() {
+        return f(() => !!(e.value.end && e.max))() ? f(() => e.value.end < e.max)() ? e.value.end : e.max : e.value.end || e.max;
+      },
+      get disabled() {
+        return e.disabled;
+      },
+      onChange: (a) => e.onChange({
+        ...e.value,
+        start: a
+      })
+    }), null), s(v, "for", n + "-end"), g(v, () => e.endLabel ?? l.t("endDate")), g(o, d(C, {
+      id: n + "-end",
+      get name() {
+        return e.endName;
+      },
+      get ariaLabel() {
+        return e.endLabel ?? l.t("endDate");
+      },
+      get value() {
+        return e.value.end;
+      },
+      get min() {
+        return f(() => !!(e.value.start && e.min))() ? f(() => e.value.start > e.min)() ? e.value.start : e.min : e.value.start || e.min;
+      },
+      get max() {
+        return e.max;
+      },
+      get disabled() {
+        return e.disabled;
+      },
+      onChange: (a) => e.onChange({
+        ...e.value,
+        end: a
+      })
+    }), null), L((a) => {
+      var r = "flex flex-wrap items-end gap-3 " + (e.class ?? ""), t = l.direction;
+      return r !== a.e && y(c, a.e = r), t !== a.t && s(c, "dir", a.t = t), a;
+    }, {
+      e: void 0,
+      t: void 0
+    }), c;
+  })();
+}
+export {
+  C as DatePicker,
+  J as DateRangePicker
+};

package/dist/components/ui/Dropdown.d.ts

@@ -15,6 +15,9 @@ export interface DropdownItem {
     keepOpen?: boolean;
 }
 export interface DropdownProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
     trigger: JSX.Element;
     triggerClass?: string;
     triggerAriaLabel?: string;
@@ -42,23 +45,4 @@ export declare function resolveDropdownTriggerKeyAction(key: string, options: {
  * Dropdown menu component with cascade submenu support
  */
 export declare function Dropdown(props: DropdownProps): JSX.Element;
-/**
- * Simple select dropdown
- */
-export interface SelectProps {
-    /** Localized field name, independent of the currently selected value. */
-    ariaLabel?: string;
-    /** Prefer a visible field label when one is available. */
-    ariaLabelledBy?: string;
-    ariaDescribedBy?: string;
-    value: string;
-    onChange: (value: string) => void;
-    options: {
-        value: string;
-        label: string;
-    }[];
-    placeholder?: string;
-    disabled?: boolean;
-    class?: string;
-}
-export declare function Select(props: SelectProps): JSX.Element;
+export { Select, type SelectProps } from './Select';