@ostack.tech/ui 0.6.0 → 0.6.2

package/dist/ostack-ui.js

@@ -866,6 +866,9 @@ function useFieldControlFocused() {
 function useFieldControlRequired() {
   return useFieldStore((state) => state.controlRequired);
 }
+function useFieldLabel() {
+  return useFieldStore((state) => state.label);
+}
 function useFieldLabelId() {
   return useFieldStore((state) => state.labelId);
 }
@@ -984,11 +987,7 @@ function useCreateTableContext(editable, status, layout, defaultColumnWidth, onT
       subscribeWithSelector((_set) => ({
         scrollPosition: void 0,
         numberOfColumns: void 0,
-        columnWidths: void 0,
-        actions: {
-          setTableMinWidth: onTableMinWidthChange,
-          setTableMaxWidth: onTableMaxWidthChange
-        }
+        columnWidths: void 0
       }))
     )
   );
@@ -998,9 +997,19 @@ function useCreateTableContext(editable, status, layout, defaultColumnWidth, onT
       status,
       layout,
       defaultColumnWidth,
+      onTableMinWidthChange,
+      onTableMaxWidthChange,
       store
     }),
-    [defaultColumnWidth, editable, layout, status, store]
+    [
+      defaultColumnWidth,
+      editable,
+      layout,
+      onTableMaxWidthChange,
+      onTableMinWidthChange,
+      status,
+      store
+    ]
   );
 }
 function useTableContext() {
@@ -1480,9 +1489,10 @@ const IconButton = forwardRef(
   }
 );
 const CloseButton = forwardRef(
-  function CloseIconButton({ icon, label = null, className, ...otherProps }, forwardedRef) {
+  function CloseIconButton({ icon, label, disableTooltip = true, className, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
     const [locale7] = useLocale();
+    label ??= locale7.CloseButton.label;
     return /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -1491,7 +1501,7 @@ const CloseButton = forwardRef(
         circle: true,
         icon: icon ?? faClose,
         label,
-        "aria-label": locale7.CloseButton["aria-label"],
+        disableTooltip,
         ...otherProps,
         ref: forwardedRef
       }
@@ -3098,28 +3108,27 @@ function Printer({
   });
   const handlePrint = useCallback(
     async (options) => {
-      const { printInProgress: printInProgress2, reactToPrintFn: reactToPrintFn2, documentTitle: documentTitle2, onBeforePrint: onBeforePrint2 } = latest;
-      if (printInProgress2) {
+      if (latest.printInProgress) {
         throw new Error("Printing is already in progress.");
       }
       flushSync(() => {
         setPrintInProgress(true);
-        const documentTitleToUse = options?.documentTitle ?? documentTitle2;
+        const documentTitleToUse = options?.documentTitle ?? latest.documentTitle;
         setPrintOptions({
           ...options,
           documentTitle: typeof documentTitleToUse === "function" ? documentTitleToUse() : documentTitleToUse
         });
       });
       await pendingPromiseRef.current;
-      if (onBeforePrint2) {
+      if (latest.onBeforePrint) {
         const event = new Event("ostack-ui.print");
-        await onBeforePrint2?.(event);
+        await latest.onBeforePrint?.(event);
         if (event.defaultPrevented) {
           return finishPrint();
         }
       }
       return new Promise((res, rej) => {
-        reactToPrintFn2(() => contentRef.current);
+        latest.reactToPrintFn(() => contentRef.current);
         resolvePrintRef.current = res;
         rejectPrintRef.current = rej;
       });
@@ -3296,6 +3305,9 @@ const Field = forwardRef(function Field2({ asChild, className, ...otherProps },
 const DEFAULT_TABLE_COLUMN_WIDTH = 150;
 const Table = forwardRef(
   function Table2({
+    caption,
+    captionSide = "bottom",
+    visuallyHiddenCaption = caption,
     editable = false,
     variant = editable ? "control" : "default",
     status,
@@ -3304,14 +3316,17 @@ const Table = forwardRef(
     defaultColumnWidth = DEFAULT_TABLE_COLUMN_WIDTH,
     maxHeight,
     containerProps,
+    scrollableProps,
+    captionProps,
+    visuallyHiddenCaptionProps,
     className,
     children,
-    "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
-    const labelId = useFieldLabelId();
+    const label = useFieldLabel();
+    visuallyHiddenCaption ??= label;
     const descriptionIds = useFieldDescriptionIds();
     const errorMessageIds = useFieldErrorMessageIds();
     const { controlId, codeId } = useSetFieldControl(
@@ -3322,20 +3337,25 @@ const Table = forwardRef(
       required
     );
     const tableRef = useRef(null);
-    const [containerEl, setContainerEl] = useState(null);
-    const handleMinWidthChange = (minWidth) => {
+    const [scrollableEl, setScrollableEl] = useState(
+      null
+    );
+    const handleMinWidthChange = useCallback((minWidth) => {
       if (tableRef.current) {
         tableRef.current.style.minWidth = minWidth ?? "";
       }
-    };
-    const handleMaxWidthChange = (maxWidth) => {
-      if (tableRef.current) {
-        tableRef.current.style.maxWidth = maxWidth ?? "";
-      }
-      if (containerEl) {
-        containerEl.style.maxWidth = maxWidth ?? "";
-      }
-    };
+    }, []);
+    const handleMaxWidthChange = useCallback(
+      (maxWidth) => {
+        if (tableRef.current) {
+          tableRef.current.style.maxWidth = maxWidth ?? "";
+        }
+        if (scrollableEl) {
+          scrollableEl.style.maxWidth = maxWidth ? `min(100%, ${maxWidth})` : "";
+        }
+      },
+      [scrollableEl]
+    );
     const tableContextValue = useCreateTableContext(
       editable,
       status,
@@ -3345,63 +3365,89 @@ const Table = forwardRef(
       handleMaxWidthChange
     );
     useScrollPosition(
-      containerEl,
+      scrollableEl,
       useCallback(
         (scrollPosition) => tableContextValue.store.setState({ scrollPosition }),
         [tableContextValue.store]
       )
     );
-    const combinedContainerRef = useCombinedRef(
-      setContainerEl,
-      containerProps?.ref
+    const captionEl = caption && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...captionProps,
+        className: cx(
+          prefix("table__caption"),
+          prefix(`table__caption--${captionSide}`),
+          captionProps?.className
+        ),
+        children: caption
+      }
+    );
+    const combinedScrollableRef = useCombinedRef(
+      setScrollableEl,
+      scrollableProps?.ref
     );
     const combinedTableRef = useCombinedRef(tableRef, forwardedRef);
-    return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        "data-status": status,
-        "data-accent": controlStatusToAccent(status),
-        tabIndex: 0,
         ...containerProps,
-        id: controlId,
         className: cx(
           prefix("table__container"),
-          prefix(`table__container--${variant}`),
           containerProps?.className
         ),
-        style: {
-          maxHeight,
-          // XXX: Disable Y overflow when a `max-height` isn't specified.
-          // TODO: Investigate why we get a 1px Y overflow sometimes.
-          overflowY: maxHeight != null || containerProps?.style?.maxHeight != null ? void 0 : "hidden",
-          ...containerProps?.style
-        },
-        ref: combinedContainerRef,
-        children: /* @__PURE__ */ jsxs(
-          "table",
-          {
-            className: cx(
-              prefix("table"),
-              prefix(`table--${variant}`),
-              layout === "fixed" && prefix("table--fixed"),
-              className
-            ),
-            "data-status": status,
-            "aria-labelledby": mergeAriaIds(labelId, ariaLabelledBy),
-            "aria-describedby": mergeAriaIds(
-              codeId,
-              descriptionIds,
-              errorMessageIds,
-              ariaDescribedBy
-            ),
-            ...otherProps,
-            ref: combinedTableRef,
-            children: [
-              /* @__PURE__ */ jsx(ColumnWidths, {}),
-              children
-            ]
-          }
-        )
+        children: [
+          captionSide === "top" && captionEl,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-status": status,
+              "data-accent": controlStatusToAccent(status),
+              tabIndex: 0,
+              ...scrollableProps,
+              id: controlId,
+              className: cx(
+                prefix("table__scrollable"),
+                prefix(`table__scrollable--${variant}`),
+                scrollableProps?.className
+              ),
+              style: {
+                maxHeight,
+                // XXX: Disable Y overflow when a `max-height` isn't specified.
+                // TODO: Investigate why we get a 1px Y overflow sometimes.
+                overflowY: maxHeight != null || scrollableProps?.style?.maxHeight != null ? void 0 : "hidden",
+                ...scrollableProps?.style
+              },
+              ref: combinedScrollableRef,
+              children: /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  className: cx(
+                    prefix("table"),
+                    prefix(`table--${variant}`),
+                    layout === "fixed" && prefix("table--fixed"),
+                    className
+                  ),
+                  "data-status": status,
+                  "aria-describedby": mergeAriaIds(
+                    codeId,
+                    descriptionIds,
+                    errorMessageIds,
+                    ariaDescribedBy
+                  ),
+                  ...otherProps,
+                  ref: combinedTableRef,
+                  children: [
+                    visuallyHiddenCaption && /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("caption", { ...visuallyHiddenCaptionProps, children: visuallyHiddenCaption }) }),
+                    /* @__PURE__ */ jsx(ColumnWidths, {}),
+                    children
+                  ]
+                }
+              )
+            }
+          ),
+          captionSide === "bottom" && captionEl
+        ]
       }
     ) }) });
   }
@@ -3670,6 +3716,8 @@ const TableHead = forwardRef(
       status: tableStatus,
       layout,
       defaultColumnWidth,
+      onTableMinWidthChange,
+      onTableMaxWidthChange,
       store
     } = useTableContext();
     const columns = useMemo(() => columnsFromChildren(children), [children]);
@@ -3696,12 +3744,18 @@ const TableHead = forwardRef(
         store.setState({
           columnWidths: columnWidths(leaves, defaultColumnWidth)
         });
-        const { setTableMinWidth, setTableMaxWidth } = store.getState().actions;
-        setTableMinWidth(tableMinWidth(leaves, defaultColumnWidth));
-        setTableMaxWidth(tableMaxWidth(leaves, defaultColumnWidth));
+        onTableMinWidthChange(tableMinWidth(leaves, defaultColumnWidth));
+        onTableMaxWidthChange(tableMaxWidth(leaves, defaultColumnWidth));
         return () => store.setState({ columnWidths: void 0 });
       }
-    }, [columns, defaultColumnWidth, layout, store]);
+    }, [
+      columns,
+      defaultColumnWidth,
+      layout,
+      onTableMaxWidthChange,
+      onTableMinWidthChange,
+      store
+    ]);
     const leftMost = useMemo(() => leftMostColumns(columns), [columns]);
     const rightMost = useMemo(() => rightMostColumns(columns), [columns]);
     const combinedTableHeadRef = useCombinedRef(tableHeadRef, forwardedRef);
@@ -5727,7 +5781,7 @@ const Input = forwardRef(
                       CloseButton,
                       {
                         size: "sm",
-                        "aria-label": clearButtonLabel,
+                        label: clearButtonLabel,
                         tabIndex: -1,
                         ...clearButtonProps,
                         className: cx(
@@ -6496,6 +6550,7 @@ const Tag = forwardRef(function Tag2({
                 showCloseButton && /* @__PURE__ */ jsx(CollapsibleTrigger, { children: /* @__PURE__ */ jsx(
                   CloseButton,
                   {
+                    size: "sm",
                     color: variant === "solid" ? "neutral" : color,
                     ...closeButtonProps,
                     className: cx(
@@ -8582,7 +8637,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         CloseButton,
                         {
                           size: "sm",
-                          "aria-label": clearButtonsLabel,
+                          label: clearButtonsLabel,
                           tabIndex: -1,
                           ...startClearButtonProps,
                           className: cx(
@@ -8696,7 +8751,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         CloseButton,
                         {
                           size: "sm",
-                          "aria-label": clearButtonsLabel,
+                          label: clearButtonsLabel,
                           tabIndex: -1,
                           ...endClearButtonProps,
                           className: cx(
@@ -10325,7 +10380,8 @@ const RadioGroup = forwardRef(function RadioGroup2({
               hasClearButton && /* @__PURE__ */ jsx(
                 CloseButton,
                 {
-                  "aria-label": clearButtonLabel,
+                  size: "sm",
+                  label: clearButtonLabel,
                   tabIndex: -1,
                   circle: true,
                   ...clearButtonProps,
@@ -11350,6 +11406,7 @@ export {
   useFieldControlTagName,
   useFieldDescriptionIds,
   useFieldErrorMessageIds,
+  useFieldLabel,
   useFieldLabelId,
   useIntersectionObserver,
   useIsInFeedbackList,