@sia-ui/react-web 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -296,7 +296,8 @@ var Drawer = React.forwardRef(
       isOpen,
       phase: state,
       open: doOpen,
-      close: doClose
+      close: doClose,
+      toggle
     } = headless.useDisclosureState({
       ...open !== void 0 ? { open } : {},
       defaultOpen,
@@ -305,15 +306,17 @@ var Drawer = React.forwardRef(
     });
     const drawerRef = React.useRef(null);
     const zIndexRef = React.useRef(null);
+    const fermer = React.useRef(doClose);
+    fermer.current = doClose;
     React.useImperativeHandle(
       ref,
       () => ({
         open: doOpen,
         close: doClose,
-        toggle: () => isOpen ? doClose() : doOpen(),
+        toggle,
         isOpen: () => isOpen
       }),
-      [isOpen, open]
+      [isOpen, doOpen, doClose, toggle]
     );
     React.useEffect(() => {
       if (!isOpen) return;
@@ -330,7 +333,7 @@ var Drawer = React.forwardRef(
       const onKeyDown = (e) => {
         if (!closeOnEsc || e.key !== "Escape") return;
         if (headless.overlayStack.isTop(zIndexRef.current)) {
-          doClose();
+          fermer.current();
         }
       };
       window.addEventListener("keydown", onKeyDown);
@@ -2040,9 +2043,9 @@ function Calendar({
     if (mode === void 0) setPanelMode(next);
     onPanelChange?.(monthIso(controlledMonth), next);
   };
-  const isDisabled = (date) => Boolean(
+  const isDisabled = React.useCallback((date) => Boolean(
     disabledDate?.(date) || validRange && (date < validRange[0] || date > validRange[1])
-  );
+  ), [disabledDate, validRange]);
   const selectDate = (date) => {
     if (isDisabled(date)) return;
     if (selectionMode === "range") {
@@ -2076,7 +2079,7 @@ function Calendar({
         ...rangeEdge ? { rangeEdge } : {}
       };
     });
-  }, [year, monthIndex, firstDayOfWeek, disabledDate, validRange, currentValue, currentRange.start, currentRange.end]);
+  }, [year, monthIndex, firstDayOfWeek, isDisabled, currentValue, currentRange.start, currentRange.end]);
   const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + firstDayOfWeek + index)));
   const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(controlledMonth);
   const updateFromString = (next) => setMonth(parseMonth(next));
@@ -2723,6 +2726,8 @@ function Timer({ duration = 6e4, initialValue = 0, direction = "down", running =
   const initial = direction === "down" ? duration : initialValue;
   const [value, setValue] = React.useState(initial);
   const finishCalled = React.useRef(false);
+  const latest = React.useRef({ value, onChange, onFinish });
+  latest.current = { value, onChange, onFinish };
   React.useEffect(() => {
     setValue(direction === "down" ? duration : initialValue);
     finishCalled.current = false;
@@ -2730,15 +2735,15 @@ function Timer({ duration = 6e4, initialValue = 0, direction = "down", running =
   React.useEffect(() => {
     if (!running) return;
     const startedAt = Date.now();
-    const base = value;
+    const base = latest.current.value;
     const update = () => {
       const elapsed = Date.now() - startedAt;
       const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed;
       setValue(next);
-      onChange?.(next);
+      latest.current.onChange?.(next);
       if (direction === "down" && next === 0 && !finishCalled.current) {
         finishCalled.current = true;
-        onFinish?.();
+        latest.current.onFinish?.();
       }
     };
     update();
@@ -2760,6 +2765,270 @@ function PageHeader({ title, description, eyebrow, actions, className }) {
     actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-page-header__actions", children: actions })
   ] });
 }
+function optionsFromChildren(children) {
+  return React.Children.toArray(children).flatMap((child) => {
+    if (!React.isValidElement(child))
+      return [];
+    const value = child.props.value;
+    if (value === void 0) return [];
+    return [{
+      value: String(value),
+      label: child.props.children,
+      ...child.props.disabled !== void 0 ? { disabled: child.props.disabled } : {}
+    }];
+  });
+}
+function optionText(option) {
+  return [option.label, option.description, ...option.keywords ?? []].map((value) => typeof value === "string" || typeof value === "number" ? String(value) : "").join(" ");
+}
+var Select = React.forwardRef(function Select2({
+  id,
+  name,
+  options,
+  children,
+  value,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "S\xE9lectionner",
+  searchable = false,
+  searchPlaceholder = "Rechercher...",
+  fetcher,
+  debounce = 250,
+  loadingText = "Chargement des options...",
+  emptyText = "Aucun r\xE9sultat",
+  errorText = "Impossible de charger les options",
+  clearable = false,
+  disabled = false,
+  invalid = false,
+  required = false,
+  placement = "bottom-start",
+  renderValue,
+  variant = "default",
+  className,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...ariaProps
+}, forwardedRef) {
+  const generatedId = React.useId();
+  const controlId = id ?? `sia-select-${generatedId.replace(/:/g, "")}`;
+  const listboxId = `${controlId}-listbox`;
+  const triggerRef = React.useRef(null);
+  const searchRef = React.useRef(null);
+  const staticOptions = React.useMemo(
+    () => options ?? optionsFromChildren(children),
+    [children, options]
+  );
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [remoteOptions, setRemoteOptions] = React.useState([]);
+  const [selectedRemoteOption, setSelectedRemoteOption] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+  const [loadError, setLoadError] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const currentValue = value ?? internalValue;
+  const sourceOptions = fetcher ? remoteOptions : staticOptions;
+  const visibleOptions = React.useMemo(() => {
+    if (fetcher) return sourceOptions;
+    const needle = query.trim();
+    return needle ? sourceOptions.filter((option) => utils.looseIncludes(optionText(option), needle)) : sourceOptions;
+  }, [fetcher, query, sourceOptions]);
+  const selectedOption = [...staticOptions, ...remoteOptions].find(
+    (option) => option.value === currentValue
+  ) ?? (selectedRemoteOption?.value === currentValue ? selectedRemoteOption : void 0);
+  React.useEffect(() => {
+    if (!open || !fetcher) return;
+    const controller = new AbortController();
+    const timeout = window.setTimeout(async () => {
+      setLoading(true);
+      setLoadError(false);
+      try {
+        const nextOptions = await fetcher(query, controller.signal);
+        if (!controller.signal.aborted) setRemoteOptions(nextOptions);
+      } catch {
+        if (!controller.signal.aborted) setLoadError(true);
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    }, debounce);
+    return () => {
+      window.clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [debounce, fetcher, open, query]);
+  React.useEffect(() => {
+    if (!open) return;
+    const selected = visibleOptions.findIndex((option) => option.value === currentValue);
+    setActiveIndex(selected >= 0 ? selected : visibleOptions.findIndex((option) => !option.disabled));
+    if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
+  }, [currentValue, fetcher, open, searchable, visibleOptions]);
+  const setTriggerRef = (node) => {
+    triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const changeValue = (nextValue, option) => {
+    if (value === void 0) setInternalValue(nextValue);
+    onValueChange?.(nextValue, option);
+  };
+  const choose = (option) => {
+    if (option.disabled) return;
+    if (fetcher) setSelectedRemoteOption(option);
+    changeValue(option.value, option);
+    setOpen(false);
+    setQuery("");
+    window.setTimeout(() => triggerRef.current?.focus(), 0);
+  };
+  const moveActive = (direction) => {
+    if (!visibleOptions.length) return;
+    let next = activeIndex;
+    for (let count = 0; count < visibleOptions.length; count += 1) {
+      next = (next + direction + visibleOptions.length) % visibleOptions.length;
+      if (!visibleOptions[next]?.disabled) break;
+    }
+    setActiveIndex(next);
+  };
+  const handleKeyDown = (event) => {
+    if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else moveActive(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Home" && open) {
+      event.preventDefault();
+      setActiveIndex(visibleOptions.findIndex((option) => !option.disabled));
+    } else if (event.key === "End" && open) {
+      event.preventDefault();
+      for (let index = visibleOptions.length - 1; index >= 0; index -= 1) {
+        if (!visibleOptions[index]?.disabled) {
+          setActiveIndex(index);
+          break;
+        }
+      }
+    } else if (event.key === "Enter" && open && activeIndex >= 0) {
+      event.preventDefault();
+      const active = visibleOptions[activeIndex];
+      if (active) choose(active);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    } else if (!open && clearable && currentValue && ["Backspace", "Delete"].includes(event.key)) {
+      event.preventDefault();
+      changeValue("");
+    }
+  };
+  const showSearch = searchable || Boolean(fetcher);
+  const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "sia-select",
+        variant === "embedded" && "sia-select--embedded",
+        disabled && "sia-select--disabled",
+        className
+      ),
+      children: [
+        name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: currentValue }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: setTriggerRef,
+            id: controlId,
+            type: "button",
+            className: utils.cn("sia-select__trigger", invalid && "sia-select__trigger--invalid"),
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
+            "aria-invalid": ariaInvalid ?? (invalid || void 0),
+            "aria-required": ariaRequired ?? (required || void 0),
+            disabled,
+            onClick: () => setOpen((current) => !current),
+            onKeyDown: handleKeyDown,
+            ...ariaProps,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("sia-select__value", !selectedOption && "sia-select__placeholder"), children: renderValue ? renderValue(selectedOption) : selectedOption?.label ?? placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-select__actions", children: [
+                clearable && currentValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "sia-select__clear",
+                    "aria-hidden": "true",
+                    title: "Effacer la s\xE9lection",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      changeValue("");
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "sia-select__chevron", "aria-hidden": "true" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Overlay,
+          {
+            open,
+            anchorRef: triggerRef,
+            onOpenChange: setOpen,
+            placement,
+            matchAnchorWidth: true,
+            className: "sia-select__overlay",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-select__panel", onKeyDown: handleKeyDown, children: [
+              showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-select__search-wrap", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: searchRef,
+                    className: "sia-select__search",
+                    value: query,
+                    placeholder: searchPlaceholder,
+                    "aria-label": searchPlaceholder,
+                    onChange: (event) => setQuery(event.target.value)
+                  }
+                ),
+                loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "xs", label: "Chargement" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-busy": loading || void 0, className: "sia-select__options", children: loading && !visibleOptions.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-select__status", children: loadingText }) : loadError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-select__status sia-select__status--error", children: errorText }) : !visibleOptions.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-select__status", children: emptyText }) : visibleOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  id: `${listboxId}-${index}`,
+                  type: "button",
+                  role: "option",
+                  "aria-selected": currentValue === option.value,
+                  disabled: option.disabled,
+                  className: utils.cn(
+                    "sia-select__option",
+                    index === activeIndex && "sia-select__option--active"
+                  ),
+                  onMouseEnter: () => setActiveIndex(index),
+                  onClick: () => choose(option),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-select__option-content", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
+                      option.description && /* @__PURE__ */ jsxRuntime.jsx("small", { children: option.description })
+                    ] }),
+                    currentValue === option.value && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { "aria-hidden": "true" })
+                  ]
+                },
+                option.value
+              )) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+Select.displayName = "Select";
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
 function Pagination({
   page,
   totalPages,
@@ -2770,6 +3039,11 @@ function Pagination({
   jumpTo = false,
   showTotal = false,
   compact = false,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  pageSizeLabel,
+  renderPageSize,
   ariaLabel,
   className
 }) {
@@ -2780,8 +3054,17 @@ function Pagination({
   const current = Math.min(Math.max(page, 1), Math.max(totalPages, 1));
   const [draft, setDraft] = React.useState(String(current));
   React.useEffect(() => setDraft(String(current)), [current]);
-  if (totalPages <= 1) return null;
-  const items = headless.paginationItems(current, totalPages, siblingCount);
+  const tailles = React.useMemo(() => {
+    if (pageSize === void 0 || pageSizeOptions.includes(pageSize)) {
+      return pageSizeOptions;
+    }
+    return [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+  }, [pageSize, pageSizeOptions]);
+  const choixTaille = pageSize !== void 0 && onPageSizeChange && tailles.length > 0;
+  const plusieursPages = totalPages > 1;
+  const tailleLibelle = pageSizeLabel ?? locale.perPage;
+  if (!plusieursPages && !choixTaille) return null;
+  const items = plusieursPages ? headless.paginationItems(current, totalPages, siblingCount) : [];
   const jump = (event) => {
     event.preventDefault();
     const asked = Number(draft);
@@ -2801,71 +3084,97 @@ function Pagination({
       ),
       "aria-label": ariaLabel ?? "Pagination",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: "sia-pagination__step",
-            disabled: current === 1,
-            "aria-label": previousLabel,
-            onClick: () => onPageChange(current - 1),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}),
-              !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { children: previousLabel })
-            ]
-          }
-        ),
-        items.map(
-          (item) => typeof item === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+        plusieursPages && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-pagination__pages", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
-              className: "sia-pagination__page",
-              "aria-current": item === current ? "page" : void 0,
-              onClick: () => onPageChange(item),
-              children: item
-            },
-            item
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: "sia-pagination__step",
-            disabled: current === totalPages,
-            "aria-label": nextLabel,
-            onClick: () => onPageChange(current + 1),
-            children: [
-              !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { children: nextLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
-            ]
-          }
-        ),
-        showTotal && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-pagination__total", children: [
-          locale.page,
-          " ",
-          current,
-          " / ",
-          totalPages
-        ] }),
-        jumpTo && /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "sia-pagination__jump", onSubmit: jump, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: jumpId, children: locale.goToPage }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: jumpId,
-              type: "text",
-              inputMode: "numeric",
-              value: draft,
-              "aria-label": locale.goToPage,
-              onChange: (event) => setDraft(event.target.value.replace(/\D/g, "")),
-              onBlur: jump
+              className: "sia-pagination__step",
+              disabled: current === 1,
+              "aria-label": previousLabel,
+              onClick: () => onPageChange(current - 1),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}),
+                !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { children: previousLabel })
+              ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-pagination__jump-total", "aria-hidden": "true", children: [
-            "/ ",
+          items.map(
+            (item) => typeof item === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "sia-pagination__page",
+                "aria-current": item === current ? "page" : void 0,
+                onClick: () => onPageChange(item),
+                children: item
+              },
+              item
+            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "sia-pagination__step",
+              disabled: current === totalPages,
+              "aria-label": nextLabel,
+              onClick: () => onPageChange(current + 1),
+              children: [
+                !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { children: nextLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+              ]
+            }
+          )
+        ] }),
+        (choixTaille || plusieursPages && (showTotal || jumpTo)) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-pagination__settings", children: [
+          plusieursPages && showTotal && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-pagination__total", children: [
+            locale.page,
+            " ",
+            current,
+            " / ",
             totalPages
+          ] }),
+          choixTaille && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-pagination__size", children: renderPageSize ? renderPageSize({
+            pageSize,
+            options: tailles,
+            onChange: onPageSizeChange,
+            label: tailleLibelle
+          }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: tailleLibelle }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select,
+              {
+                variant: "embedded",
+                "aria-label": tailleLibelle,
+                placement: "top-end",
+                value: String(pageSize),
+                options: tailles.map((taille) => ({
+                  value: String(taille),
+                  label: String(taille)
+                })),
+                onValueChange: (valeur) => onPageSizeChange(Number(valeur))
+              }
+            )
+          ] }) }),
+          plusieursPages && jumpTo && /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "sia-pagination__jump", onSubmit: jump, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: jumpId, children: locale.goToPage }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: jumpId,
+                type: "text",
+                inputMode: "numeric",
+                value: draft,
+                "aria-label": locale.goToPage,
+                onChange: (event) => setDraft(event.target.value.replace(/\D/g, "")),
+                onBlur: jump
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-pagination__jump-total", "aria-hidden": "true", children: [
+              "/ ",
+              totalPages
+            ] })
           ] })
         ] })
       ]
@@ -3151,6 +3460,7 @@ function DataTable({
   searchKeys,
   searchPlaceholder,
   onSearch,
+  searchDelay = 0,
   layout = "auto",
   maxHeight,
   stickyHeader = false,
@@ -3269,9 +3579,10 @@ function DataTable({
           {
             value: recherche,
             placeholder: searchPlaceholder ?? locale.search,
+            ...onSearch && searchDelay > 0 ? { onSearch, searchDelay } : {},
             onValueChange: (v) => {
               setRecherche(v);
-              onSearch?.(v);
+              if (searchDelay <= 0) onSearch?.(v);
             }
           }
         ),
@@ -4064,255 +4375,6 @@ function DateTimePicker({ value, defaultValue = { date: "", time: "" }, onValueC
     /* @__PURE__ */ jsxRuntime.jsx(TimePicker, { ...timeProps, value: current.time, minuteStep, secondStep, showSeconds, hourFormat, needConfirm, tone, ...stateProps, "aria-label": "Heure", onValueChange: (time) => update({ ...current, time }) })
   ] });
 }
-function optionsFromChildren(children) {
-  return React.Children.toArray(children).flatMap((child) => {
-    if (!React.isValidElement(child))
-      return [];
-    const value = child.props.value;
-    if (value === void 0) return [];
-    return [{
-      value: String(value),
-      label: child.props.children,
-      ...child.props.disabled !== void 0 ? { disabled: child.props.disabled } : {}
-    }];
-  });
-}
-function optionText(option) {
-  return [option.label, option.description, ...option.keywords ?? []].map((value) => typeof value === "string" || typeof value === "number" ? String(value) : "").join(" ").toLocaleLowerCase();
-}
-var Select = React.forwardRef(function Select2({
-  id,
-  name,
-  options,
-  children,
-  value,
-  defaultValue = "",
-  onValueChange,
-  placeholder = "S\xE9lectionner",
-  searchable = false,
-  searchPlaceholder = "Rechercher...",
-  fetcher,
-  debounce = 250,
-  loadingText = "Chargement des options...",
-  emptyText = "Aucun r\xE9sultat",
-  errorText = "Impossible de charger les options",
-  clearable = false,
-  disabled = false,
-  invalid = false,
-  required = false,
-  placement = "bottom-start",
-  className,
-  "aria-invalid": ariaInvalid,
-  "aria-required": ariaRequired,
-  ...ariaProps
-}, forwardedRef) {
-  const generatedId = React.useId();
-  const controlId = id ?? `sia-select-${generatedId.replace(/:/g, "")}`;
-  const listboxId = `${controlId}-listbox`;
-  const triggerRef = React.useRef(null);
-  const searchRef = React.useRef(null);
-  const staticOptions = React.useMemo(
-    () => options ?? optionsFromChildren(children),
-    [children, options]
-  );
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
-  const [open, setOpen] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const [remoteOptions, setRemoteOptions] = React.useState([]);
-  const [selectedRemoteOption, setSelectedRemoteOption] = React.useState();
-  const [loading, setLoading] = React.useState(false);
-  const [loadError, setLoadError] = React.useState(false);
-  const [activeIndex, setActiveIndex] = React.useState(-1);
-  const currentValue = value ?? internalValue;
-  const sourceOptions = fetcher ? remoteOptions : staticOptions;
-  const visibleOptions = React.useMemo(() => {
-    if (fetcher) return sourceOptions;
-    const needle = query.trim().toLocaleLowerCase();
-    return needle ? sourceOptions.filter((option) => optionText(option).includes(needle)) : sourceOptions;
-  }, [fetcher, query, sourceOptions]);
-  const selectedOption = [...staticOptions, ...remoteOptions].find(
-    (option) => option.value === currentValue
-  ) ?? (selectedRemoteOption?.value === currentValue ? selectedRemoteOption : void 0);
-  React.useEffect(() => {
-    if (!open || !fetcher) return;
-    const controller = new AbortController();
-    const timeout = window.setTimeout(async () => {
-      setLoading(true);
-      setLoadError(false);
-      try {
-        const nextOptions = await fetcher(query, controller.signal);
-        if (!controller.signal.aborted) setRemoteOptions(nextOptions);
-      } catch {
-        if (!controller.signal.aborted) setLoadError(true);
-      } finally {
-        if (!controller.signal.aborted) setLoading(false);
-      }
-    }, debounce);
-    return () => {
-      window.clearTimeout(timeout);
-      controller.abort();
-    };
-  }, [debounce, fetcher, open, query]);
-  React.useEffect(() => {
-    if (!open) return;
-    setActiveIndex(visibleOptions.findIndex((option) => option.value === currentValue));
-    if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
-  }, [currentValue, fetcher, open, searchable, visibleOptions]);
-  const setTriggerRef = (node) => {
-    triggerRef.current = node;
-    if (typeof forwardedRef === "function") forwardedRef(node);
-    else if (forwardedRef) forwardedRef.current = node;
-  };
-  const changeValue = (nextValue, option) => {
-    if (value === void 0) setInternalValue(nextValue);
-    onValueChange?.(nextValue, option);
-  };
-  const choose = (option) => {
-    if (option.disabled) return;
-    if (fetcher) setSelectedRemoteOption(option);
-    changeValue(option.value, option);
-    setOpen(false);
-    setQuery("");
-    window.setTimeout(() => triggerRef.current?.focus(), 0);
-  };
-  const moveActive = (direction) => {
-    if (!visibleOptions.length) return;
-    let next = activeIndex;
-    for (let count = 0; count < visibleOptions.length; count += 1) {
-      next = (next + direction + visibleOptions.length) % visibleOptions.length;
-      if (!visibleOptions[next]?.disabled) break;
-    }
-    setActiveIndex(next);
-  };
-  const handleKeyDown = (event) => {
-    if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-      event.preventDefault();
-      if (!open) setOpen(true);
-      else moveActive(event.key === "ArrowDown" ? 1 : -1);
-      return;
-    }
-    if (event.key === "Home" && open) {
-      event.preventDefault();
-      setActiveIndex(visibleOptions.findIndex((option) => !option.disabled));
-    } else if (event.key === "End" && open) {
-      event.preventDefault();
-      for (let index = visibleOptions.length - 1; index >= 0; index -= 1) {
-        if (!visibleOptions[index]?.disabled) {
-          setActiveIndex(index);
-          break;
-        }
-      }
-    } else if (event.key === "Enter" && open && activeIndex >= 0) {
-      event.preventDefault();
-      const active = visibleOptions[activeIndex];
-      if (active) choose(active);
-    } else if (event.key === "Escape" && open) {
-      event.preventDefault();
-      setOpen(false);
-      triggerRef.current?.focus();
-    } else if (!open && clearable && currentValue && ["Backspace", "Delete"].includes(event.key)) {
-      event.preventDefault();
-      changeValue("");
-    }
-  };
-  const showSearch = searchable || Boolean(fetcher);
-  const activeOption = activeIndex >= 0 ? visibleOptions[activeIndex] : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("sia-select", disabled && "sia-select--disabled", className), children: [
-    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: currentValue }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        ref: setTriggerRef,
-        id: controlId,
-        type: "button",
-        className: utils.cn("sia-select__trigger", invalid && "sia-select__trigger--invalid"),
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-controls": listboxId,
-        "aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
-        "aria-invalid": ariaInvalid ?? (invalid || void 0),
-        "aria-required": ariaRequired ?? (required || void 0),
-        disabled,
-        onClick: () => setOpen((current) => !current),
-        onKeyDown: handleKeyDown,
-        ...ariaProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("sia-select__value", !selectedOption && "sia-select__placeholder"), children: selectedOption?.label ?? placeholder }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-select__actions", children: [
-            clearable && currentValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "sia-select__clear",
-                "aria-hidden": "true",
-                title: "Effacer la s\xE9lection",
-                onClick: (event) => {
-                  event.stopPropagation();
-                  changeValue("");
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "sia-select__chevron", "aria-hidden": "true" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Overlay,
-      {
-        open,
-        anchorRef: triggerRef,
-        onOpenChange: setOpen,
-        placement,
-        matchAnchorWidth: true,
-        className: "sia-select__overlay",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-select__panel", onKeyDown: handleKeyDown, children: [
-          showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-select__search-wrap", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref: searchRef,
-                className: "sia-select__search",
-                value: query,
-                placeholder: searchPlaceholder,
-                "aria-label": searchPlaceholder,
-                onChange: (event) => setQuery(event.target.value)
-              }
-            ),
-            loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "xs", label: "Chargement" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-busy": loading || void 0, className: "sia-select__options", children: loading && !visibleOptions.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-select__status", children: loadingText }) : loadError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-select__status sia-select__status--error", children: errorText }) : !visibleOptions.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-select__status", children: emptyText }) : visibleOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              id: `${listboxId}-${index}`,
-              type: "button",
-              role: "option",
-              "aria-selected": currentValue === option.value,
-              disabled: option.disabled,
-              className: utils.cn(
-                "sia-select__option",
-                index === activeIndex && "sia-select__option--active"
-              ),
-              onMouseEnter: () => setActiveIndex(index),
-              onClick: () => choose(option),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-select__option-content", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
-                  option.description && /* @__PURE__ */ jsxRuntime.jsx("small", { children: option.description })
-                ] }),
-                currentValue === option.value && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { "aria-hidden": "true" })
-              ]
-            },
-            option.value
-          )) })
-        ] })
-      }
-    )
-  ] });
-});
-Select.displayName = "Select";
 function MultiSelect({
   id,
   options,
@@ -5299,6 +5361,14 @@ function Field(rawProps) {
 function isGroup(entry) {
   return "group" in entry;
 }
+function formFieldNames(fields) {
+  const noms = [];
+  for (const entree of fields) {
+    if (isGroup(entree)) noms.push(...entree.fields.map((f) => f.name));
+    else noms.push(entree.name);
+  }
+  return noms;
+}
 var VIDE = {};
 function Form({
   fields,
@@ -5323,6 +5393,26 @@ function Form({
     ...onSubmit ? { onSubmit } : {}
   });
   const form = adapter ?? interne;
+  const locale = headless.useSiaLocale();
+  const [echec, setEchec] = React.useState(null);
+  const envoyer = () => {
+    setEchec(null);
+    form.submit().catch((error) => {
+      const { fields: erreurs, message } = headless.readSubmitError(error);
+      const connus = new Set(formFieldNames(fields));
+      const sousLesChamps = {};
+      const ailleurs = [];
+      for (const [nom, texte] of Object.entries(erreurs)) {
+        if (connus.has(nom)) sousLesChamps[nom] = texte;
+        else ailleurs.push(texte);
+      }
+      form.setErrors(sousLesChamps);
+      if (ailleurs.length > 0) setEchec(ailleurs.join(" "));
+      else if (Object.keys(sousLesChamps).length === 0) {
+        setEchec(message ?? locale.submitError);
+      }
+    });
+  };
   const busy = loading || form.state.isSubmitting;
   const submitDisabled = busy || requireDirty && !form.state.isDirty || requireValid && !form.state.isValid;
   const grille = (nombre) => ({
@@ -5358,7 +5448,7 @@ function Form({
       noValidate: true,
       onSubmit: (event) => {
         event.preventDefault();
-        void form.submit();
+        envoyer();
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-form-grid", style: grille(columns), children: fields.map(
@@ -5377,6 +5467,15 @@ function Form({
             )
           ] }, entry.group) : rendre(entry)
         ) }),
+        echec && /* @__PURE__ */ jsxRuntime.jsx(
+          Alert,
+          {
+            tone: "danger",
+            className: "sia-form-error",
+            onDismiss: () => setEchec(null),
+            children: echec
+          }
+        ),
         actions ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-form-actions", children: [
           showClear && /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -5412,23 +5511,15 @@ function Descriptions({ items, title, columns = 2, bordered = false, className }
     ] }, item.key)) })
   ] });
 }
-function nomsDeChamps(fields) {
-  const noms = [];
-  for (const entree of fields) {
-    if ("group" in entree) noms.push(...entree.fields.map((f) => f.name));
-    else noms.push(entree.name);
-  }
-  return noms;
-}
 function valeursVides(fields) {
   const valeurs = {};
-  for (const nom of nomsDeChamps(fields)) valeurs[nom] = "";
+  for (const nom of formFieldNames(fields)) valeurs[nom] = "";
   return valeurs;
 }
 function valeursDeLigne(row, fields) {
   const source = row;
   const valeurs = {};
-  for (const nom of nomsDeChamps(fields)) {
+  for (const nom of formFieldNames(fields)) {
     const valeur = source[nom];
     valeurs[nom] = typeof valeur === "string" || typeof valeur === "number" || typeof valeur === "boolean" || Array.isArray(valeur) ? valeur : "";
   }
@@ -5473,11 +5564,12 @@ function CrudDialogs({
             submitText: dialog?.submitText ?? (creation ? "Cr\xE9er" : "Enregistrer"),
             requireDirty: modification,
             onSubmit: async (values) => {
-              await onSubmit?.(values, {
+              const resultat = await onSubmit?.(values, {
                 mode: creation ? "create" : "edit",
                 ...state?.row !== void 0 ? { row: state.row } : {},
                 ...state?.index !== void 0 ? { index: state.index } : {}
               });
+              if (headless.hasFormErrors(resultat)) return resultat;
               onClose();
             }
           },
@@ -5561,6 +5653,7 @@ function CrudPage({
   searchKeys: clesDeRecherche,
   searchPlaceholder,
   onSearch,
+  searchDelay,
   loading = false,
   error,
   onRetry,
@@ -5568,6 +5661,9 @@ function CrudPage({
   page,
   totalPages,
   onPageChange,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions,
   table,
   children,
   className
@@ -5647,9 +5743,12 @@ function CrudPage({
     if (!extraRowActions) {
       return actionsDeLigne.length > 0 ? actionsDeLigne : void 0;
     }
+    const suppression = actionsDeLigne.filter((a) => a.key === "delete");
+    const autres = actionsDeLigne.filter((a) => a.key !== "delete");
     return (row, index) => [
-      ...actionsDeLigne,
-      ...typeof extraRowActions === "function" ? extraRowActions(row, index) : extraRowActions
+      ...autres,
+      ...typeof extraRowActions === "function" ? extraRowActions(row, index) : extraRowActions,
+      ...suppression
     ];
   }, [actionsDeLigne, extraRowActions]);
   const creation = operations?.create === false ? null : operations?.create ?? {};
@@ -5683,6 +5782,7 @@ function CrudPage({
         ...searchKeys ? { searchKeys } : {},
         ...searchPlaceholder ? { searchPlaceholder } : {},
         ...onSearch ? { onSearch } : {},
+        ...searchDelay !== void 0 ? { searchDelay } : {},
         ...toutesLesActions ? { rowActions: toutesLesActions } : {},
         ...can ? { can } : {},
         loading,
@@ -5745,7 +5845,10 @@ function CrudPage({
         page,
         totalPages,
         onPageChange,
-        showTotal: true
+        showTotal: true,
+        ...pageSize !== void 0 ? { pageSize } : {},
+        ...onPageSizeChange ? { onPageSizeChange } : {},
+        ...pageSizeOptions ? { pageSizeOptions } : {}
       }
     )
   ] });
@@ -6208,6 +6311,14 @@ var PhoneInput = React.forwardRef(
       [countries, initial, picked, value]
     );
     const national = value.startsWith(country.dial) ? value.slice(country.dial.length) : digitsOnly(value);
+    const options = React.useMemo(
+      () => countries.map((entry) => ({
+        value: entry.code,
+        label: `${entry.flag} ${entry.label} (${entry.dial})`,
+        keywords: [entry.code]
+      })),
+      [countries]
+    );
     const commit = (next) => {
       if (!controlled) setInternal(next);
       onValueChange?.(next);
@@ -6229,35 +6340,31 @@ var PhoneInput = React.forwardRef(
           if (country.digits) next = next.slice(0, country.digits);
           commit(next ? `${country.dial}${next}` : "");
         },
-        left: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-phone__country", children: [
+        left: lockCountry ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-phone__country", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-phone__flag", "aria-hidden": "true", children: country.flag }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-phone__dial", children: country.dial }),
-          !lockCountry && /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
-            {
-              className: "sia-phone__select",
-              "aria-label": locale.countryCode,
-              value: country.code,
-              disabled,
-              onChange: (event) => {
-                const next = countries.find(
-                  (entry) => entry.code === event.target.value
-                );
-                if (!next) return;
-                setPicked(next.code);
-                commit(national ? `${next.dial}${national}` : "");
-              },
-              children: countries.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: entry.code, children: [
-                entry.flag,
-                " ",
-                entry.label,
-                " (",
-                entry.dial,
-                ")"
-              ] }, entry.code))
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-phone__dial", children: country.dial })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            variant: "embedded",
+            searchable: true,
+            className: "sia-phone__country",
+            "aria-label": locale.countryCode,
+            options,
+            value: country.code,
+            disabled: disabled ?? false,
+            renderValue: () => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-phone__value", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-phone__flag", "aria-hidden": "true", children: country.flag }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-phone__dial", children: country.dial })
+            ] }),
+            onValueChange: (code) => {
+              const next = countries.find((entry) => entry.code === code);
+              if (!next) return;
+              setPicked(next.code);
+              commit(national ? `${next.dial}${national}` : "");
             }
-          )
-        ] })
+          }
+        )
       }
     );
   }
@@ -7263,6 +7370,7 @@ exports.CrudDialogs = CrudDialogs;
 exports.CrudPage = CrudPage;
 exports.CurrencyInput = CurrencyInput;
 exports.DEFAULT_COUNTRIES = DEFAULT_COUNTRIES;
+exports.DEFAULT_PAGE_SIZE_OPTIONS = DEFAULT_PAGE_SIZE_OPTIONS;
 exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
 exports.DateRangeFilter = DateRangeFilter;
@@ -7373,6 +7481,7 @@ exports.YearPicker = YearPicker;
 exports.confirmUnsavedNavigation = confirmUnsavedNavigation;
 exports.createUrlTableStorage = createUrlTableStorage;
 exports.defineResource = defineResource;
+exports.formFieldNames = formFieldNames;
 exports.formatDuration = formatDuration;
 exports.formatTimeValue = formatTimeValue;
 exports.initialsOf = initialsOf;