@inf-monkeys-tech/monkeys-design 1.0.43 → 1.0.44

package/dist/components/base/index.mjs

@@ -22,7 +22,9 @@ var enUS = {
       page: ({ page, pageCount }) => `Page ${page} of ${pageCount}`,
       currentPage: ({ page, pageCount }) => `Page ${page} of ${pageCount}, current page`,
       emptyResults: "0 results",
-      range: ({ start, end, total }) => `${start}-${end} of ${total}`
+      range: ({ start, end, total }) => `${start}-${end} of ${total}`,
+      selected: ({ count }) => `${count} selected`,
+      pageSize: "Items per page"
     },
     dialog: {
       close: "Close dialog"
@@ -369,6 +371,9 @@ function useMonkeysBaseAppearance(explicit) {
 function useMonkeysStatusStates() {
   return useContext(MonkeysThemeContext).statusStates ?? {};
 }
+function useMonkeysListFooter() {
+  return useContext(MonkeysThemeContext).listFooter ?? {};
+}
 function useMonkeysDirection() {
   return useContext(MonkeysDirectionContext).direction;
 }
@@ -7942,6 +7947,9 @@ var BasePagination = forwardRef(
     defaultPage,
     pageSize = 20,
     total = 0,
+    pageCount: pageCountProp,
+    hasNext,
+    hasPrevious,
     mode = "compact",
     siblingCount = 1,
     boundaryCount = 1,
@@ -7973,6 +7981,7 @@ var BasePagination = forwardRef(
     }
     assertPositiveInteger(pageSize, "pageSize");
     assertNonNegativeInteger(total, "total");
+    if (pageCountProp !== void 0) assertPositiveInteger(pageCountProp, "pageCount");
     assertNonNegativeInteger(siblingCount, "siblingCount");
     assertNonNegativeInteger(boundaryCount, "boundaryCount");
     if (!paginationModes.has(mode)) {
@@ -7994,7 +8003,7 @@ var BasePagination = forwardRef(
     const previousMessage = assertLocaleString(messages.previous, "previous");
     const nextMessage = assertLocaleString(messages.next, "next");
     const lastMessage = assertLocaleString(messages.last, "last");
-    const pageCount = Math.max(Math.ceil(total / pageSize), 1);
+    const pageCount = pageCountProp ?? Math.max(Math.ceil(total / pageSize), 1);
     const isControlled = page !== void 0;
     const isUncontrolled = !isControlled && defaultPage !== void 0;
     const currentPage = clampPage(
@@ -8003,8 +8012,8 @@ var BasePagination = forwardRef(
     );
     const start = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
     const end = Math.min(currentPage * pageSize, total);
-    const canPrevious = currentPage > 1;
-    const canNext = currentPage < pageCount;
+    const canPrevious = hasPrevious ?? currentPage > 1;
+    const canNext = hasNext ?? currentPage < pageCount;
     const pageItems = mode === "pages" ? getPageItems(currentPage, pageCount, boundaryCount, siblingCount) : [];
     const requestPage = (requestedPage) => {
       const nextPage = clampPage(requestedPage, pageCount);
@@ -8157,6 +8166,41 @@ var BasePagination = forwardRef(
     );
   }
 );
+function LoadingIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "ml-1 inline-block h-3 w-3 animate-spin", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25", stroke: "currentColor", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3Z" })
+  ] });
+}
+function BaseListFooter({ total = 0, loadedStart, loadedEnd, selectedCount, page = 1, pageCount, pageSize = 20, pageSizeOptions, showTotal, showPageSize, paginationMode, hasNext, hasPrevious, loading = false, totalLabel, selectedLabel, pageSizeLabel, appearance, className, classNames, onPageChange, onPageSizeChange, onSummaryClick, ...props }) {
+  const config = useMonkeysListFooter();
+  const messages = useMonkeysLocaleMessages().pagination;
+  const options = [...new Set(pageSizeOptions ?? config.pageSizeOptions ?? [10, 20, 50, 100])].filter((value) => Number.isSafeInteger(value) && value > 0);
+  const showTotalValue = showTotal ?? config.showTotal ?? true;
+  const showPageSizeValue = showPageSize ?? config.showPageSize ?? true;
+  const requestedMode = paginationMode ?? config.paginationMode ?? "auto";
+  const mode = requestedMode === "auto" ? total > 0 ? "pages" : "compact" : requestedMode;
+  const hasRange = loadedStart !== void 0 && loadedStart > 0 && loadedEnd !== void 0 && loadedEnd >= loadedStart;
+  const summary = showTotalValue ? totalLabel ?? (hasRange ? messages.range({ start: loadedStart, end: loadedEnd, total }) : messages.range({ start: total > 0 ? (page - 1) * pageSize + 1 : 0, end: loadedEnd ?? 0, total })) : void 0;
+  const showPagination = Boolean(onPageChange) && (hasNext !== void 0 || hasPrevious !== void 0 ? Boolean(hasNext || hasPrevious || total > pageSize) : total > pageSize);
+  const align = config.alignment === "end" ? "justify-end" : config.alignment === "start" ? "justify-start" : "justify-between";
+  return /* @__PURE__ */ jsxs("div", { ...props, className: cn("flex min-w-0 flex-wrap items-center gap-3 py-2 text-sm", align, classNames?.root, className), "data-monkeys-component": "list-footer", "data-density": config.density, children: [
+    /* @__PURE__ */ jsx("div", { className: cn("min-w-0 text-muted-foreground", classNames?.summary), children: (() => {
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        selectedLabel ?? (selectedCount !== void 0 ? messages.selected({ count: selectedCount }) : null),
+        selectedCount !== void 0 && summary ? /* @__PURE__ */ jsx("span", { className: "mx-2", children: "\xB7" }) : null,
+        summary,
+        loading ? /* @__PURE__ */ jsx(LoadingIcon2, {}) : null
+      ] });
+      return onSummaryClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "inline-flex items-center", onClick: onSummaryClick, children: content }) : content;
+    })() }),
+    showPagination ? /* @__PURE__ */ jsx(BasePagination, { page, pageCount, pageSize, total, mode, hasNext, hasPrevious, onPageChange, appearance, className: classNames?.pagination, classNames: { info: "sr-only" } }) : null,
+    showPageSizeValue && onPageSizeChange && options.length > 0 ? /* @__PURE__ */ jsxs("label", { className: cn("inline-flex items-center gap-2 whitespace-nowrap text-muted-foreground", classNames?.pageSize), children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: pageSizeLabel ?? messages.pageSize }),
+      /* @__PURE__ */ jsx("select", { "aria-label": typeof pageSizeLabel === "string" ? pageSizeLabel : messages.pageSize, value: String(pageSize), className: "h-8 rounded-md border border-border bg-background px-2 text-sm text-foreground", onChange: (event) => onPageSizeChange(Number(event.currentTarget.value)), children: options.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size)) })
+    ] }) : null
+  ] });
+}
 function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -12000,6 +12044,6 @@ var BaseVisuallyHidden = forwardRef(function BaseVisuallyHidden2({
   );
 });
 
-export { BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, cn, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, resolveBaseAppearance };
+export { BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListFooter, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, cn, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, resolveBaseAppearance };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map