@aspprev/versi-ds 0.5.4 → 0.5.5

package/dist/{chunk-YT6ZM6WC.js → chunk-VUXHE4S6.js}

@@ -3122,6 +3122,9 @@ function SelectMultiView(props) {
   const containerRef = useRef6(null);
   const triggerRef = useRef6(null);
   const groupRef = useRef6(null);
+  const valueRef = useRef6(null);
+  const measurementRef = useRef6(null);
+  const [visibleCount, setVisibleCount] = useState6(null);
   const baseId = useId4();
   const triggerId = `${baseId}-trigger`;
   const labelId = `${baseId}-label`;
@@ -3129,7 +3132,18 @@ function SelectMultiView(props) {
   const summaryId = `${baseId}-summary`;
   const errorId = `${baseId}-error`;
   const selectedCount = checkedList.length;
+  const selectedLabels = checkedList.map(
+    (value) => options.find((option) => option.value === value)?.label ?? value
+  );
+  const selectionKey = JSON.stringify(selectedLabels);
+  const displayedCount = Math.min(selectedCount, visibleCount ?? selectedCount);
+  const hiddenCount = selectedCount - displayedCount;
+  const chipClass = cs(
+    "rounded-full px-1 py-0.5 text-sm",
+    disabled ? "bg-surface-muted text-field-content-disabled" : "bg-action-primary text-action-primary-content"
+  );
   const selectedSummary = selectedCount === 0 ? "Nenhuma op\xE7\xE3o selecionada" : selectedCount === 1 ? "1 op\xE7\xE3o selecionada" : `${selectedCount} op\xE7\xF5es selecionadas`;
+  const accessibleSummary = selectedCount > 0 ? `${selectedSummary}: ${selectedLabels.join(", ")}` : selectedSummary;
   const describedBy = [summaryId, error ? errorId : void 0].filter(Boolean).join(" ");
   const floatingLayerClass = getFloatingLayerClass(
     triggerRef.current,
@@ -3140,6 +3154,53 @@ function SelectMultiView(props) {
     setIsOpened(false);
     triggerRef.current?.focus({ preventScroll: true });
   };
+  useEffect5(() => {
+    const valueElement = valueRef.current;
+    const measurements = measurementRef.current;
+    if (!valueElement || !measurements || selectedCount === 0) return;
+    let active = true;
+    const update = () => {
+      if (!active) return;
+      const available = valueElement.getBoundingClientRect().width;
+      const labels = Array.from(measurements.querySelectorAll("[data-label-width]"));
+      const partialLabels = Array.from(measurements.querySelectorAll("[data-partial-width]"));
+      const counters = Array.from(measurements.querySelectorAll("[data-counter-width]"));
+      const gap = Number.parseFloat(window.getComputedStyle(valueElement).columnGap) || 0;
+      const totalWidth = labels.reduce((sum, element) => sum + element.getBoundingClientRect().width, 0) + Math.max(0, selectedCount - 1) * gap;
+      if (totalWidth <= available) {
+        setVisibleCount(selectedCount);
+        return;
+      }
+      let used = 0;
+      let fitting = 0;
+      for (let index = 0; index < labels.length; index += 1) {
+        const fullWidth = labels[index].getBoundingClientRect().width;
+        used += fullWidth + (index > 0 ? gap : 0);
+        const remaining = selectedCount - index - 1;
+        const counterWidth = remaining > 0 ? counters[remaining - 1].getBoundingClientRect().width + gap : 0;
+        if (used + counterWidth <= available) fitting = index + 1;
+        else {
+          const partialWidth = Math.min(fullWidth, partialLabels[index].getBoundingClientRect().width);
+          if (used - fullWidth + partialWidth + counterWidth <= available) fitting = index + 1;
+          break;
+        }
+      }
+      setVisibleCount(Math.max(1, fitting));
+    };
+    update();
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : void 0;
+    observer?.observe(valueElement);
+    observer?.observe(measurements);
+    window.addEventListener("resize", update);
+    document.fonts?.addEventListener("loadingdone", update);
+    void document.fonts?.ready.then(update);
+    return () => {
+      active = false;
+      observer?.disconnect();
+      window.removeEventListener("resize", update);
+      document.fonts?.removeEventListener("loadingdone", update);
+    };
+  }, [selectionKey, selectedCount, onClear]);
   useEffect5(() => {
     if (!isOpened) return;
     groupRef.current?.querySelector('input[type="checkbox"]')?.focus({ preventScroll: true });
@@ -3236,26 +3297,46 @@ function SelectMultiView(props) {
                   }
                 },
                 className: cs(
-                  "flex h-control-md w-full cursor-pointer items-center justify-between rounded-sm border border-field-border-default bg-field-surface px-3 text-field-icon focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                  "flex h-control-md w-full cursor-pointer items-center justify-between gap-1 rounded-sm border border-field-border-default bg-field-surface px-3 text-field-icon focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
                   error && "border-2 px-[calc(var(--spacing-xs)-1px)] border-field-border-error text-field-assistive-error",
                   !error && isOpened && "border-field-border-active text-field-content",
                   !error && selectedCount > 0 && "text-field-content",
                   disabled && "cursor-not-allowed border-field-border-default bg-field-surface-disabled text-field-content-disabled"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsxs7(
                     "span",
                     {
+                      ref: valueRef,
+                      title: selectedCount > 0 ? selectedLabels.join(", ") : void 0,
                       className: cs(
-                        "min-w-0 flex-1 truncate text-left text-base font-normal",
+                        "field-value relative flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-left text-base font-normal",
                         {
+                          "mr-[40px]": selectedCount > 0 && Boolean(onClear),
                           "text-field-placeholder": !disabled && selectedCount === 0,
-                          "pr-12 text-field-content": !disabled && selectedCount > 0,
+                          "text-field-content": !disabled && selectedCount > 0,
                           "text-field-content-disabled": disabled && selectedCount > 0,
                           "text-field-placeholder-disabled": disabled && selectedCount === 0
                         }
                       ),
-                      children: "Selecione"
+                      children: [
+                        selectedCount === 0 ? /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", "aria-hidden": "true", children: "Selecione" }) : selectedLabels.slice(0, displayedCount).map((text, index) => /* @__PURE__ */ jsx8("span", { className: cs("min-w-0 truncate", index < displayedCount - 1 && "shrink-0", chipClass), "aria-hidden": "true", children: text }, index)),
+                        hiddenCount > 0 && /* @__PURE__ */ jsxs7("span", { "aria-hidden": "true", className: cs("shrink-0", chipClass), children: [
+                          "+",
+                          hiddenCount
+                        ] }),
+                        selectedCount > 0 && /* @__PURE__ */ jsxs7("span", { ref: measurementRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute left-0 top-0 flex w-max whitespace-pre", style: { font: "inherit" }, children: [
+                          selectedLabels.map((text, index) => /* @__PURE__ */ jsx8("span", { "data-label-width": true, className: chipClass, children: text }, index)),
+                          selectedLabels.map((text, index) => /* @__PURE__ */ jsxs7("span", { "data-partial-width": true, className: chipClass, children: [
+                            Array.from(text).slice(0, 6).join(""),
+                            "\u2026"
+                          ] }, index)),
+                          selectedLabels.map((_, index) => /* @__PURE__ */ jsxs7("span", { "data-counter-width": true, className: chipClass, children: [
+                            "+",
+                            index + 1
+                          ] }, index))
+                        ] })
+                      ]
                     }
                   ),
                   /* @__PURE__ */ jsx8(
@@ -3278,7 +3359,7 @@ function SelectMultiView(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx8("span", { id: summaryId, className: "sr-only", children: selectedSummary }),
+            /* @__PURE__ */ jsx8("span", { id: summaryId, className: "sr-only", children: accessibleSummary }),
             isOpened && /* @__PURE__ */ jsx8(
               "div",
               {
@@ -3329,18 +3410,18 @@ function SelectMultiView(props) {
                 })
               }
             ),
-            selectedCount > 0 && onClear && /* @__PURE__ */ jsxs7(
+            selectedCount > 0 && onClear && /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
                 "aria-label": `Limpar sele\xE7\xE3o de ${label ?? "op\xE7\xF5es"}`,
                 disabled,
-                onClick: onClear,
-                className: "absolute right-9 top-1/2 flex min-h-6 min-w-6 -translate-y-1/2 touch-manipulation items-center justify-center gap-1 rounded-full bg-action-primary px-2 text-xs text-action-primary-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:bg-field-surface-disabled disabled:text-field-content-disabled",
-                children: [
-                  /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "field-value", "data-has-value": "true", children: selectedCount }),
-                  /* @__PURE__ */ jsx8(MdClose, { "aria-hidden": "true", size: 10 })
-                ]
+                onClick: () => {
+                  onClear();
+                  triggerRef.current?.focus({ preventScroll: true });
+                },
+                className: "absolute right-[40px] top-1/2 flex h-6 w-6 -translate-y-1/2 touch-manipulation items-center justify-center rounded-sm text-field-icon focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:text-field-content-disabled",
+                children: /* @__PURE__ */ jsx8(MdClose, { "aria-hidden": "true", size: 16 })
               }
             )
           ]
@@ -3840,4 +3921,4 @@ export {
   RadioCardGroup,
   OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-YT6ZM6WC.js.map
+//# sourceMappingURL=chunk-VUXHE4S6.js.map