@yahoo/uds-mobile 2.17.0 → 2.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/generateTheme.mjs +7 -2
- package/dist/bin/mobile/scripts/utils/configToRNMappings.mjs +4 -0
- package/dist/components/Pagination/Pagination.cjs +75 -0
- package/dist/components/Pagination/Pagination.d.cts +40 -0
- package/dist/components/Pagination/Pagination.d.cts.map +1 -0
- package/dist/components/Pagination/Pagination.d.ts +40 -0
- package/dist/components/Pagination/Pagination.d.ts.map +1 -0
- package/dist/components/Pagination/Pagination.js +75 -0
- package/dist/components/Pagination/Pagination.js.map +1 -0
- package/dist/components/Pagination/PaginationEllipsis.cjs +64 -0
- package/dist/components/Pagination/PaginationEllipsis.d.cts +21 -0
- package/dist/components/Pagination/PaginationEllipsis.d.cts.map +1 -0
- package/dist/components/Pagination/PaginationEllipsis.d.ts +21 -0
- package/dist/components/Pagination/PaginationEllipsis.d.ts.map +1 -0
- package/dist/components/Pagination/PaginationEllipsis.js +64 -0
- package/dist/components/Pagination/PaginationEllipsis.js.map +1 -0
- package/dist/components/Pagination/PaginationItem.cjs +68 -0
- package/dist/components/Pagination/PaginationItem.d.cts +24 -0
- package/dist/components/Pagination/PaginationItem.d.cts.map +1 -0
- package/dist/components/Pagination/PaginationItem.d.ts +24 -0
- package/dist/components/Pagination/PaginationItem.d.ts.map +1 -0
- package/dist/components/Pagination/PaginationItem.js +68 -0
- package/dist/components/Pagination/PaginationItem.js.map +1 -0
- package/dist/components/Pagination/PaginationLink.cjs +68 -0
- package/dist/components/Pagination/PaginationLink.d.cts +25 -0
- package/dist/components/Pagination/PaginationLink.d.cts.map +1 -0
- package/dist/components/Pagination/PaginationLink.d.ts +25 -0
- package/dist/components/Pagination/PaginationLink.d.ts.map +1 -0
- package/dist/components/Pagination/PaginationLink.js +68 -0
- package/dist/components/Pagination/PaginationLink.js.map +1 -0
- package/dist/components/Pagination/PaginationNext.cjs +72 -0
- package/dist/components/Pagination/PaginationNext.d.cts +24 -0
- package/dist/components/Pagination/PaginationNext.d.cts.map +1 -0
- package/dist/components/Pagination/PaginationNext.d.ts +24 -0
- package/dist/components/Pagination/PaginationNext.d.ts.map +1 -0
- package/dist/components/Pagination/PaginationNext.js +72 -0
- package/dist/components/Pagination/PaginationNext.js.map +1 -0
- package/dist/components/Pagination/PaginationNumbers.cjs +50 -0
- package/dist/components/Pagination/PaginationNumbers.d.cts +23 -0
- package/dist/components/Pagination/PaginationNumbers.d.cts.map +1 -0
- package/dist/components/Pagination/PaginationNumbers.d.ts +23 -0
- package/dist/components/Pagination/PaginationNumbers.d.ts.map +1 -0
- package/dist/components/Pagination/PaginationNumbers.js +50 -0
- package/dist/components/Pagination/PaginationNumbers.js.map +1 -0
- package/dist/components/Pagination/PaginationPrev.cjs +72 -0
- package/dist/components/Pagination/PaginationPrev.d.cts +24 -0
- package/dist/components/Pagination/PaginationPrev.d.cts.map +1 -0
- package/dist/components/Pagination/PaginationPrev.d.ts +24 -0
- package/dist/components/Pagination/PaginationPrev.d.ts.map +1 -0
- package/dist/components/Pagination/PaginationPrev.js +72 -0
- package/dist/components/Pagination/PaginationPrev.js.map +1 -0
- package/dist/components/Pagination/computeVisiblePages.cjs +21 -0
- package/dist/components/Pagination/computeVisiblePages.d.cts +19 -0
- package/dist/components/Pagination/computeVisiblePages.d.cts.map +1 -0
- package/dist/components/Pagination/computeVisiblePages.d.ts +19 -0
- package/dist/components/Pagination/computeVisiblePages.d.ts.map +1 -0
- package/dist/components/Pagination/computeVisiblePages.js +22 -0
- package/dist/components/Pagination/computeVisiblePages.js.map +1 -0
- package/dist/components/Pagination/ellipsisDefault.cjs +28 -0
- package/dist/components/Pagination/ellipsisDefault.d.cts +11 -0
- package/dist/components/Pagination/ellipsisDefault.d.cts.map +1 -0
- package/dist/components/Pagination/ellipsisDefault.d.ts +11 -0
- package/dist/components/Pagination/ellipsisDefault.d.ts.map +1 -0
- package/dist/components/Pagination/ellipsisDefault.js +29 -0
- package/dist/components/Pagination/ellipsisDefault.js.map +1 -0
- package/dist/components/Pagination/ellipsisNone.cjs +24 -0
- package/dist/components/Pagination/ellipsisNone.d.cts +11 -0
- package/dist/components/Pagination/ellipsisNone.d.cts.map +1 -0
- package/dist/components/Pagination/ellipsisNone.d.ts +11 -0
- package/dist/components/Pagination/ellipsisNone.d.ts.map +1 -0
- package/dist/components/Pagination/ellipsisNone.js +25 -0
- package/dist/components/Pagination/ellipsisNone.js.map +1 -0
- package/dist/components/Pagination/index.cjs +18 -0
- package/dist/components/Pagination/index.d.cts +10 -0
- package/dist/components/Pagination/index.d.ts +10 -0
- package/dist/components/Pagination/index.js +10 -0
- package/dist/components/Pagination/paginationContext.cjs +42 -0
- package/dist/components/Pagination/paginationContext.d.cts +34 -0
- package/dist/components/Pagination/paginationContext.d.cts.map +1 -0
- package/dist/components/Pagination/paginationContext.d.ts +34 -0
- package/dist/components/Pagination/paginationContext.d.ts.map +1 -0
- package/dist/components/Pagination/paginationContext.js +38 -0
- package/dist/components/Pagination/paginationContext.js.map +1 -0
- package/dist/components/Pagination/paginationDefaultComponents.cjs +68 -0
- package/dist/components/Pagination/paginationDefaultComponents.d.cts +17 -0
- package/dist/components/Pagination/paginationDefaultComponents.d.cts.map +1 -0
- package/dist/components/Pagination/paginationDefaultComponents.d.ts +17 -0
- package/dist/components/Pagination/paginationDefaultComponents.d.ts.map +1 -0
- package/dist/components/Pagination/paginationDefaultComponents.js +69 -0
- package/dist/components/Pagination/paginationDefaultComponents.js.map +1 -0
- package/dist/components/Pagination/paginationTheme.cjs +67 -0
- package/dist/components/Pagination/paginationTheme.d.cts +28 -0
- package/dist/components/Pagination/paginationTheme.d.cts.map +1 -0
- package/dist/components/Pagination/paginationTheme.d.ts +28 -0
- package/dist/components/Pagination/paginationTheme.d.ts.map +1 -0
- package/dist/components/Pagination/paginationTheme.js +62 -0
- package/dist/components/Pagination/paginationTheme.js.map +1 -0
- package/dist/components/Pagination/range.cjs +10 -0
- package/dist/components/Pagination/range.d.cts +6 -0
- package/dist/components/Pagination/range.d.cts.map +1 -0
- package/dist/components/Pagination/range.d.ts +6 -0
- package/dist/components/Pagination/range.d.ts.map +1 -0
- package/dist/components/Pagination/range.js +11 -0
- package/dist/components/Pagination/range.js.map +1 -0
- package/dist/components/Pagination/usePaginationControlStyles.cjs +78 -0
- package/dist/components/Pagination/usePaginationControlStyles.d.cts +26 -0
- package/dist/components/Pagination/usePaginationControlStyles.d.cts.map +1 -0
- package/dist/components/Pagination/usePaginationControlStyles.d.ts +26 -0
- package/dist/components/Pagination/usePaginationControlStyles.d.ts.map +1 -0
- package/dist/components/Pagination/usePaginationControlStyles.js +78 -0
- package/dist/components/Pagination/usePaginationControlStyles.js.map +1 -0
- package/dist/components/Popover/Popover.cjs +92 -0
- package/dist/components/Popover/Popover.d.cts +26 -0
- package/dist/components/Popover/Popover.d.cts.map +1 -0
- package/dist/components/Popover/Popover.d.ts +26 -0
- package/dist/components/Popover/Popover.d.ts.map +1 -0
- package/dist/components/Popover/Popover.js +92 -0
- package/dist/components/Popover/Popover.js.map +1 -0
- package/dist/components/Popover/PopoverContent.cjs +124 -0
- package/dist/components/Popover/PopoverContent.d.cts +15 -0
- package/dist/components/Popover/PopoverContent.d.cts.map +1 -0
- package/dist/components/Popover/PopoverContent.d.ts +15 -0
- package/dist/components/Popover/PopoverContent.d.ts.map +1 -0
- package/dist/components/Popover/PopoverContent.js +124 -0
- package/dist/components/Popover/PopoverContent.js.map +1 -0
- package/dist/components/Popover/PopoverContext.cjs +14 -0
- package/dist/components/Popover/PopoverContext.d.cts +10 -0
- package/dist/components/Popover/PopoverContext.d.cts.map +1 -0
- package/dist/components/Popover/PopoverContext.d.ts +10 -0
- package/dist/components/Popover/PopoverContext.d.ts.map +1 -0
- package/dist/components/Popover/PopoverContext.js +13 -0
- package/dist/components/Popover/PopoverContext.js.map +1 -0
- package/dist/components/Popover/PopoverDescription.cjs +23 -0
- package/dist/components/Popover/PopoverDescription.d.cts +15 -0
- package/dist/components/Popover/PopoverDescription.d.cts.map +1 -0
- package/dist/components/Popover/PopoverDescription.d.ts +15 -0
- package/dist/components/Popover/PopoverDescription.d.ts.map +1 -0
- package/dist/components/Popover/PopoverDescription.js +23 -0
- package/dist/components/Popover/PopoverDescription.js.map +1 -0
- package/dist/components/Popover/PopoverDismiss.cjs +22 -0
- package/dist/components/Popover/PopoverDismiss.d.cts +15 -0
- package/dist/components/Popover/PopoverDismiss.d.cts.map +1 -0
- package/dist/components/Popover/PopoverDismiss.d.ts +15 -0
- package/dist/components/Popover/PopoverDismiss.d.ts.map +1 -0
- package/dist/components/Popover/PopoverDismiss.js +22 -0
- package/dist/components/Popover/PopoverDismiss.js.map +1 -0
- package/dist/components/Popover/PopoverFrame.cjs +56 -0
- package/dist/components/Popover/PopoverFrame.d.cts +23 -0
- package/dist/components/Popover/PopoverFrame.d.cts.map +1 -0
- package/dist/components/Popover/PopoverFrame.d.ts +23 -0
- package/dist/components/Popover/PopoverFrame.d.ts.map +1 -0
- package/dist/components/Popover/PopoverFrame.js +55 -0
- package/dist/components/Popover/PopoverFrame.js.map +1 -0
- package/dist/components/Popover/PopoverPortalLayer.cjs +45 -0
- package/dist/components/Popover/PopoverPortalLayer.d.cts +15 -0
- package/dist/components/Popover/PopoverPortalLayer.d.cts.map +1 -0
- package/dist/components/Popover/PopoverPortalLayer.d.ts +15 -0
- package/dist/components/Popover/PopoverPortalLayer.d.ts.map +1 -0
- package/dist/components/Popover/PopoverPortalLayer.js +45 -0
- package/dist/components/Popover/PopoverPortalLayer.js.map +1 -0
- package/dist/components/Popover/PopoverSurface.cjs +228 -0
- package/dist/components/Popover/PopoverSurface.d.cts +26 -0
- package/dist/components/Popover/PopoverSurface.d.cts.map +1 -0
- package/dist/components/Popover/PopoverSurface.d.ts +26 -0
- package/dist/components/Popover/PopoverSurface.d.ts.map +1 -0
- package/dist/components/Popover/PopoverSurface.js +227 -0
- package/dist/components/Popover/PopoverSurface.js.map +1 -0
- package/dist/components/Popover/PopoverTitle.cjs +23 -0
- package/dist/components/Popover/PopoverTitle.d.cts +15 -0
- package/dist/components/Popover/PopoverTitle.d.cts.map +1 -0
- package/dist/components/Popover/PopoverTitle.d.ts +15 -0
- package/dist/components/Popover/PopoverTitle.d.ts.map +1 -0
- package/dist/components/Popover/PopoverTitle.js +23 -0
- package/dist/components/Popover/PopoverTitle.js.map +1 -0
- package/dist/components/Popover/PopoverTrigger.cjs +88 -0
- package/dist/components/Popover/PopoverTrigger.d.cts +15 -0
- package/dist/components/Popover/PopoverTrigger.d.cts.map +1 -0
- package/dist/components/Popover/PopoverTrigger.d.ts +15 -0
- package/dist/components/Popover/PopoverTrigger.d.ts.map +1 -0
- package/dist/components/Popover/PopoverTrigger.js +88 -0
- package/dist/components/Popover/PopoverTrigger.js.map +1 -0
- package/dist/components/Popover/index.cjs +14 -0
- package/dist/components/Popover/index.d.cts +9 -0
- package/dist/components/Popover/index.d.ts +9 -0
- package/dist/components/Popover/index.js +8 -0
- package/dist/components/Popover/popoverFrameGeometry.cjs +177 -0
- package/dist/components/Popover/popoverFrameGeometry.d.cts +48 -0
- package/dist/components/Popover/popoverFrameGeometry.d.cts.map +1 -0
- package/dist/components/Popover/popoverFrameGeometry.d.ts +48 -0
- package/dist/components/Popover/popoverFrameGeometry.d.ts.map +1 -0
- package/dist/components/Popover/popoverFrameGeometry.js +177 -0
- package/dist/components/Popover/popoverFrameGeometry.js.map +1 -0
- package/dist/components/Popover/popoverLayer.cjs +16 -0
- package/dist/components/Popover/popoverLayer.d.cts +8 -0
- package/dist/components/Popover/popoverLayer.d.cts.map +1 -0
- package/dist/components/Popover/popoverLayer.d.ts +8 -0
- package/dist/components/Popover/popoverLayer.d.ts.map +1 -0
- package/dist/components/Popover/popoverLayer.js +16 -0
- package/dist/components/Popover/popoverLayer.js.map +1 -0
- package/dist/components/Popover/types.cjs +1 -0
- package/dist/components/Popover/types.d.cts +170 -0
- package/dist/components/Popover/types.d.cts.map +1 -0
- package/dist/components/Popover/types.d.ts +170 -0
- package/dist/components/Popover/types.d.ts.map +1 -0
- package/dist/components/Popover/types.js +1 -0
- package/dist/components/Toast/ToastProvider.cjs +1 -1
- package/dist/components/Toast/ToastProvider.js +1 -1
- package/dist/components/internal/Overlay/index.cjs +4 -0
- package/dist/components/internal/Overlay/index.d.cts +4 -2
- package/dist/components/internal/Overlay/index.d.ts +4 -2
- package/dist/components/internal/Overlay/index.js +3 -1
- package/dist/components/internal/Overlay/types.d.cts +47 -1
- package/dist/components/internal/Overlay/types.d.cts.map +1 -1
- package/dist/components/internal/Overlay/types.d.ts +47 -1
- package/dist/components/internal/Overlay/types.d.ts.map +1 -1
- package/dist/components/internal/Overlay/useAnchoredPosition.cjs +225 -0
- package/dist/components/internal/Overlay/useAnchoredPosition.d.cts +22 -0
- package/dist/components/internal/Overlay/useAnchoredPosition.d.cts.map +1 -0
- package/dist/components/internal/Overlay/useAnchoredPosition.d.ts +22 -0
- package/dist/components/internal/Overlay/useAnchoredPosition.d.ts.map +1 -0
- package/dist/components/internal/Overlay/useAnchoredPosition.js +225 -0
- package/dist/components/internal/Overlay/useAnchoredPosition.js.map +1 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.cjs +22 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.d.cts +12 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.d.cts.map +1 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.d.ts +12 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.d.ts.map +1 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.js +22 -0
- package/dist/components/internal/Overlay/useOverlayDismiss.js.map +1 -0
- package/dist/jest/bun-test-guard.cjs +8 -0
- package/dist/jest/bun-test-guard.d.cts +2 -0
- package/dist/jest/bun-test-guard.d.ts +2 -0
- package/dist/jest/bun-test-guard.js +10 -0
- package/dist/jest/bun-test-guard.js.map +1 -0
- package/dist/jest/mocks/react-native.cjs +14 -0
- package/dist/jest/mocks/react-native.d.cts +29 -1
- package/dist/jest/mocks/react-native.d.cts.map +1 -1
- package/dist/jest/mocks/react-native.d.ts +29 -1
- package/dist/jest/mocks/react-native.d.ts.map +1 -1
- package/dist/jest/mocks/react-native.js +13 -1
- package/dist/jest/mocks/react-native.js.map +1 -1
- package/dist/jest/mocks/styles.cjs +83 -0
- package/dist/jest/mocks/styles.d.cts +6 -2
- package/dist/jest/mocks/styles.d.cts.map +1 -1
- package/dist/jest/mocks/styles.d.ts +6 -2
- package/dist/jest/mocks/styles.d.ts.map +1 -1
- package/dist/jest/mocks/styles.js +80 -1
- package/dist/jest/mocks/styles.js.map +1 -1
- package/dist/jest/setup.cjs +46 -3
- package/dist/jest/setup.d.cts.map +1 -1
- package/dist/jest/setup.d.ts.map +1 -1
- package/dist/jest/setup.js +46 -3
- package/dist/jest/setup.js.map +1 -1
- package/dist/types/dist/index.d.cts +83 -1
- package/dist/types/dist/index.d.cts.map +1 -1
- package/dist/types/dist/index.d.ts +83 -1
- package/dist/types/dist/index.d.ts.map +1 -1
- package/generated/styles.cjs +81 -0
- package/generated/styles.d.ts +42 -1
- package/generated/styles.mjs +81 -0
- package/generated/unistyles.d.ts +82 -0
- package/package.json +21 -1
|
@@ -414,7 +414,12 @@ function resolveValue(variable, config, colorMode, propName) {
|
|
|
414
414
|
}
|
|
415
415
|
return "transparent";
|
|
416
416
|
}
|
|
417
|
-
if (propName === "
|
|
417
|
+
if (propName === "blurBackgroundColorFallback") {
|
|
418
|
+
const fbv = preset.fallbackBlurredBackgroundValue ?? preset.finalBackgroundValue;
|
|
419
|
+
if (fbv) return `rgb(${fbv.r}, ${fbv.g}, ${fbv.b})`;
|
|
420
|
+
return "transparent";
|
|
421
|
+
}
|
|
422
|
+
if (propName === "borderColor" || propName === "stroke") {
|
|
418
423
|
const borderColorDef = preset.borderColor;
|
|
419
424
|
if (borderColorDef.type === "line") {
|
|
420
425
|
const colorDef = palette.line?.[borderColorDef.value];
|
|
@@ -434,7 +439,7 @@ function resolveValue(variable, config, colorMode, propName) {
|
|
|
434
439
|
}
|
|
435
440
|
return "transparent";
|
|
436
441
|
}
|
|
437
|
-
if (propName === "borderWidth") {
|
|
442
|
+
if (propName === "borderWidth" || propName === "strokeWidth") {
|
|
438
443
|
const borderWidthKey = preset.borderWidth;
|
|
439
444
|
return scaleConfig.borderWidth[borderWidthKey] ?? 0;
|
|
440
445
|
}
|
|
@@ -12,11 +12,13 @@ const PROPERTY_TO_RN_PROPS = {
|
|
|
12
12
|
height: ["height"],
|
|
13
13
|
width: ["width"],
|
|
14
14
|
backgroundColor: ["backgroundColor"],
|
|
15
|
+
blurBackgroundColorFallback: ["backgroundBlurFallbackColor"],
|
|
15
16
|
color: ["color"],
|
|
16
17
|
labelColor: ["color"],
|
|
17
18
|
borderColor: ["borderColor"],
|
|
18
19
|
borderWidth: ["borderWidth"],
|
|
19
20
|
borderRadius: ["borderRadius"],
|
|
21
|
+
fillOpacity: ["backgroundOpacity"],
|
|
20
22
|
iconSize: ["fontSize", "lineHeight"],
|
|
21
23
|
opacity: ["opacity"],
|
|
22
24
|
horizontalMargin: ["marginHorizontal"],
|
|
@@ -25,6 +27,8 @@ const PROPERTY_TO_RN_PROPS = {
|
|
|
25
27
|
shadow: ["boxShadow"],
|
|
26
28
|
insetShadow: ["boxShadow"],
|
|
27
29
|
bannerInnerShadow: ["boxShadow"],
|
|
30
|
+
stroke: ["borderColor"],
|
|
31
|
+
strokeWidth: ["borderWidth"],
|
|
28
32
|
textDecorationLine: ["textDecorationLine"],
|
|
29
33
|
textVariant: [
|
|
30
34
|
"fontFamily",
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_components_HStack = require("../HStack.cjs");
|
|
5
|
+
const require_components_Pagination_paginationContext = require("./paginationContext.cjs");
|
|
6
|
+
const require_components_Pagination_paginationTheme = require("./paginationTheme.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
let react_native_unistyles = require("react-native-unistyles");
|
|
10
|
+
//#region src/components/Pagination/Pagination.tsx
|
|
11
|
+
/**
|
|
12
|
+
* **Pagination — numbered page navigation component**
|
|
13
|
+
*
|
|
14
|
+
* @description
|
|
15
|
+
* Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
|
|
16
|
+
* The consumer owns `activePage` state.
|
|
17
|
+
*
|
|
18
|
+
* @category Navigation
|
|
19
|
+
* @platform mobile
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import {
|
|
24
|
+
* Pagination,
|
|
25
|
+
* PaginationNext,
|
|
26
|
+
* PaginationNumbers,
|
|
27
|
+
* PaginationPrev,
|
|
28
|
+
* } from '@yahoo/uds-mobile/Pagination';
|
|
29
|
+
*
|
|
30
|
+
* <Pagination activePage={page} totalPages={10} onPageChange={setPage} accessibilityLabel="Results">
|
|
31
|
+
* <PaginationPrev />
|
|
32
|
+
* <PaginationNumbers />
|
|
33
|
+
* <PaginationNext />
|
|
34
|
+
* </Pagination>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
const Pagination = (0, react.memo)(function Pagination({ activePage, totalPages, maxVisiblePageNumbers = 7, ellipsisPlacement = "none", size = "md", variant = "default", getPageHref, getItemAriaLabel = require_components_Pagination_paginationContext.defaultGetItemAriaLabel, onPageChange, children, accessibilityLabel = "Pagination", ...rest }) {
|
|
38
|
+
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
39
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Pagination_paginationContext.PaginationProvider, {
|
|
40
|
+
value: (0, react.useMemo)(() => ({
|
|
41
|
+
activePage,
|
|
42
|
+
totalPages,
|
|
43
|
+
maxVisiblePageNumbers,
|
|
44
|
+
ellipsisPlacement,
|
|
45
|
+
size,
|
|
46
|
+
variant,
|
|
47
|
+
getPageHref,
|
|
48
|
+
getItemAriaLabel,
|
|
49
|
+
onPageChange
|
|
50
|
+
}), [
|
|
51
|
+
activePage,
|
|
52
|
+
totalPages,
|
|
53
|
+
maxVisiblePageNumbers,
|
|
54
|
+
ellipsisPlacement,
|
|
55
|
+
size,
|
|
56
|
+
variant,
|
|
57
|
+
getPageHref,
|
|
58
|
+
getItemAriaLabel,
|
|
59
|
+
onPageChange
|
|
60
|
+
]),
|
|
61
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
accessibilityLabel,
|
|
65
|
+
accessibilityRole: "none",
|
|
66
|
+
gap: (0, react.useMemo)(() => require_components_Pagination_paginationTheme.getPaginationRootGapStyle(theme, size), [size, theme]).gap,
|
|
67
|
+
alignSelf: "stretch",
|
|
68
|
+
...rest,
|
|
69
|
+
children
|
|
70
|
+
})
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
Pagination.displayName = "Pagination";
|
|
74
|
+
//#endregion
|
|
75
|
+
exports.Pagination = Pagination;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
|
|
2
|
+
import { UniversalPaginationProps } from "../../types/dist/index.cjs";
|
|
3
|
+
import * as _$react from "react";
|
|
4
|
+
import { ViewProps } from "react-native";
|
|
5
|
+
|
|
6
|
+
//#region src/components/Pagination/Pagination.d.ts
|
|
7
|
+
interface PaginationProps extends Omit<UniversalPaginationProps, 'className' | 'children'>, Pick<ViewProps, 'children'> {
|
|
8
|
+
/** Accessible label for the pagination control group. @default 'Pagination' */
|
|
9
|
+
accessibilityLabel?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* **Pagination — numbered page navigation component**
|
|
13
|
+
*
|
|
14
|
+
* @description
|
|
15
|
+
* Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
|
|
16
|
+
* The consumer owns `activePage` state.
|
|
17
|
+
*
|
|
18
|
+
* @category Navigation
|
|
19
|
+
* @platform mobile
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import {
|
|
24
|
+
* Pagination,
|
|
25
|
+
* PaginationNext,
|
|
26
|
+
* PaginationNumbers,
|
|
27
|
+
* PaginationPrev,
|
|
28
|
+
* } from '@yahoo/uds-mobile/Pagination';
|
|
29
|
+
*
|
|
30
|
+
* <Pagination activePage={page} totalPages={10} onPageChange={setPage} accessibilityLabel="Results">
|
|
31
|
+
* <PaginationPrev />
|
|
32
|
+
* <PaginationNumbers />
|
|
33
|
+
* <PaginationNext />
|
|
34
|
+
* </Pagination>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
declare const Pagination: _$react.NamedExoticComponent<PaginationProps>;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { Pagination, type PaginationProps };
|
|
40
|
+
//# sourceMappingURL=Pagination.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.d.cts","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"mappings":";;;;;;UAWU,eAAA,SACA,IAAA,CAAK,wBAAA,6BAAqD,IAAA,CAAK,SAAA;;EAEvE,kBAAA;AAAA;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;cA6Bd,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
|
|
2
|
+
import { UniversalPaginationProps } from "../../types/dist/index.js";
|
|
3
|
+
import * as _$react from "react";
|
|
4
|
+
import { ViewProps } from "react-native";
|
|
5
|
+
|
|
6
|
+
//#region src/components/Pagination/Pagination.d.ts
|
|
7
|
+
interface PaginationProps extends Omit<UniversalPaginationProps, 'className' | 'children'>, Pick<ViewProps, 'children'> {
|
|
8
|
+
/** Accessible label for the pagination control group. @default 'Pagination' */
|
|
9
|
+
accessibilityLabel?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* **Pagination — numbered page navigation component**
|
|
13
|
+
*
|
|
14
|
+
* @description
|
|
15
|
+
* Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
|
|
16
|
+
* The consumer owns `activePage` state.
|
|
17
|
+
*
|
|
18
|
+
* @category Navigation
|
|
19
|
+
* @platform mobile
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import {
|
|
24
|
+
* Pagination,
|
|
25
|
+
* PaginationNext,
|
|
26
|
+
* PaginationNumbers,
|
|
27
|
+
* PaginationPrev,
|
|
28
|
+
* } from '@yahoo/uds-mobile/Pagination';
|
|
29
|
+
*
|
|
30
|
+
* <Pagination activePage={page} totalPages={10} onPageChange={setPage} accessibilityLabel="Results">
|
|
31
|
+
* <PaginationPrev />
|
|
32
|
+
* <PaginationNumbers />
|
|
33
|
+
* <PaginationNext />
|
|
34
|
+
* </Pagination>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
declare const Pagination: _$react.NamedExoticComponent<PaginationProps>;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { Pagination, type PaginationProps };
|
|
40
|
+
//# sourceMappingURL=Pagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"mappings":";;;;;;UAWU,eAAA,SACA,IAAA,CAAK,wBAAA,6BAAqD,IAAA,CAAK,SAAA;;EAEvE,kBAAA;AAAA;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;cA6Bd,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
import { HStack } from "../HStack.js";
|
|
3
|
+
import { PaginationProvider, defaultGetItemAriaLabel } from "./paginationContext.js";
|
|
4
|
+
import { getPaginationRootGapStyle } from "./paginationTheme.js";
|
|
5
|
+
import { memo, useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { useUnistyles } from "react-native-unistyles";
|
|
8
|
+
//#region src/components/Pagination/Pagination.tsx
|
|
9
|
+
/**
|
|
10
|
+
* **Pagination — numbered page navigation component**
|
|
11
|
+
*
|
|
12
|
+
* @description
|
|
13
|
+
* Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
|
|
14
|
+
* The consumer owns `activePage` state.
|
|
15
|
+
*
|
|
16
|
+
* @category Navigation
|
|
17
|
+
* @platform mobile
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* import {
|
|
22
|
+
* Pagination,
|
|
23
|
+
* PaginationNext,
|
|
24
|
+
* PaginationNumbers,
|
|
25
|
+
* PaginationPrev,
|
|
26
|
+
* } from '@yahoo/uds-mobile/Pagination';
|
|
27
|
+
*
|
|
28
|
+
* <Pagination activePage={page} totalPages={10} onPageChange={setPage} accessibilityLabel="Results">
|
|
29
|
+
* <PaginationPrev />
|
|
30
|
+
* <PaginationNumbers />
|
|
31
|
+
* <PaginationNext />
|
|
32
|
+
* </Pagination>
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
const Pagination = memo(function Pagination({ activePage, totalPages, maxVisiblePageNumbers = 7, ellipsisPlacement = "none", size = "md", variant = "default", getPageHref, getItemAriaLabel = defaultGetItemAriaLabel, onPageChange, children, accessibilityLabel = "Pagination", ...rest }) {
|
|
36
|
+
const { theme } = useUnistyles();
|
|
37
|
+
return /* @__PURE__ */ jsx(PaginationProvider, {
|
|
38
|
+
value: useMemo(() => ({
|
|
39
|
+
activePage,
|
|
40
|
+
totalPages,
|
|
41
|
+
maxVisiblePageNumbers,
|
|
42
|
+
ellipsisPlacement,
|
|
43
|
+
size,
|
|
44
|
+
variant,
|
|
45
|
+
getPageHref,
|
|
46
|
+
getItemAriaLabel,
|
|
47
|
+
onPageChange
|
|
48
|
+
}), [
|
|
49
|
+
activePage,
|
|
50
|
+
totalPages,
|
|
51
|
+
maxVisiblePageNumbers,
|
|
52
|
+
ellipsisPlacement,
|
|
53
|
+
size,
|
|
54
|
+
variant,
|
|
55
|
+
getPageHref,
|
|
56
|
+
getItemAriaLabel,
|
|
57
|
+
onPageChange
|
|
58
|
+
]),
|
|
59
|
+
children: /* @__PURE__ */ jsx(HStack, {
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
justifyContent: "center",
|
|
62
|
+
accessibilityLabel,
|
|
63
|
+
accessibilityRole: "none",
|
|
64
|
+
gap: useMemo(() => getPaginationRootGapStyle(theme, size), [size, theme]).gap,
|
|
65
|
+
alignSelf: "stretch",
|
|
66
|
+
...rest,
|
|
67
|
+
children
|
|
68
|
+
})
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
Pagination.displayName = "Pagination";
|
|
72
|
+
//#endregion
|
|
73
|
+
export { Pagination };
|
|
74
|
+
|
|
75
|
+
//# sourceMappingURL=Pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { UniversalPaginationProps } from '@yahoo/uds-types';\nimport { memo, useMemo } from 'react';\nimport type { ViewProps } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- root gap from pagination size tokens\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { HStack } from '../HStack';\nimport { defaultGetItemAriaLabel, PaginationProvider } from './paginationContext';\nimport { getPaginationRootGapStyle } from './paginationTheme';\n\ninterface PaginationProps\n extends Omit<UniversalPaginationProps, 'className' | 'children'>, Pick<ViewProps, 'children'> {\n /** Accessible label for the pagination control group. @default 'Pagination' */\n accessibilityLabel?: string;\n}\n\n/**\n * **Pagination — numbered page navigation component**\n *\n * @description\n * Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.\n * The consumer owns `activePage` state.\n *\n * @category Navigation\n * @platform mobile\n *\n * @example\n * ```tsx\n * import {\n * Pagination,\n * PaginationNext,\n * PaginationNumbers,\n * PaginationPrev,\n * } from '@yahoo/uds-mobile/Pagination';\n *\n * <Pagination activePage={page} totalPages={10} onPageChange={setPage} accessibilityLabel=\"Results\">\n * <PaginationPrev />\n * <PaginationNumbers />\n * <PaginationNext />\n * </Pagination>\n * ```\n */\nconst Pagination = memo(function Pagination({\n activePage,\n totalPages,\n maxVisiblePageNumbers = 7,\n ellipsisPlacement = 'none',\n size = 'md',\n variant = 'default',\n getPageHref,\n getItemAriaLabel = defaultGetItemAriaLabel,\n onPageChange,\n children,\n accessibilityLabel = 'Pagination',\n ...rest\n}: PaginationProps) {\n const { theme } = useUnistyles();\n\n const contextValue = useMemo(\n () => ({\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n size,\n variant,\n getPageHref,\n getItemAriaLabel,\n onPageChange,\n }),\n [\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n size,\n variant,\n getPageHref,\n getItemAriaLabel,\n onPageChange,\n ],\n );\n\n const rootGapStyle = useMemo(() => getPaginationRootGapStyle(theme, size), [size, theme]);\n\n return (\n <PaginationProvider value={contextValue}>\n <HStack\n alignItems=\"center\"\n justifyContent=\"center\"\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"none\"\n gap={rootGapStyle.gap as StyleProps['columnGap'] | undefined}\n alignSelf=\"stretch\"\n {...rest}\n >\n {children}\n </HStack>\n </PaginationProvider>\n );\n});\n\nPagination.displayName = 'Pagination';\n\nexport { Pagination, type PaginationProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,YACA,YACA,wBAAwB,GACxB,oBAAoB,QACpB,OAAO,MACP,UAAU,WACV,aACA,mBAAmB,yBACnB,cACA,UACA,qBAAqB,cACrB,GAAG,QACe;CAClB,MAAM,EAAE,UAAU,cAAc;CA6BhC,OACE,oBAAC,oBAAD;EAAoB,OA5BD,eACZ;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAMsC;YACrC,oBAAC,QAAD;GACE,YAAW;GACX,gBAAe;GACK;GACpB,mBAAkB;GAClB,KATe,cAAc,0BAA0B,OAAO,KAAK,EAAE,CAAC,MAAM,MAAM,CASjE,CAAC;GAClB,WAAU;GACV,GAAI;GAEH;GACM,CAAA;EACU,CAAA;EAEvB;AAEF,WAAW,cAAc"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_components_Text = require("../Text.cjs");
|
|
5
|
+
const require_components_Pagination_paginationContext = require("./paginationContext.cjs");
|
|
6
|
+
const require_components_Pagination_paginationTheme = require("./paginationTheme.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let react_native = require("react-native");
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
let react_native_unistyles = require("react-native-unistyles");
|
|
11
|
+
//#region src/components/Pagination/PaginationEllipsis.tsx
|
|
12
|
+
/**
|
|
13
|
+
* **PaginationEllipsis — truncated page range indicator**
|
|
14
|
+
*
|
|
15
|
+
* @description
|
|
16
|
+
* Non-interactive ellipsis shown when page numbers are collapsed.
|
|
17
|
+
*
|
|
18
|
+
* @category Navigation
|
|
19
|
+
* @platform mobile
|
|
20
|
+
*/
|
|
21
|
+
const PaginationEllipsis = (0, react.memo)(function PaginationEllipsis({ style }) {
|
|
22
|
+
const { size, variant } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
23
|
+
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
24
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
|
|
25
|
+
accessibilityElementsHidden: true,
|
|
26
|
+
importantForAccessibility: "no-hide-descendants",
|
|
27
|
+
style: (0, react.useMemo)(() => {
|
|
28
|
+
const { controlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
|
|
29
|
+
return [
|
|
30
|
+
paginationStaticStyles.root,
|
|
31
|
+
require_components_Pagination_paginationTheme.getMergedPaginationControlRootStyle(theme, size, variant, "off", "rest"),
|
|
32
|
+
{
|
|
33
|
+
borderRadius,
|
|
34
|
+
height: controlSize,
|
|
35
|
+
width: controlSize
|
|
36
|
+
},
|
|
37
|
+
style
|
|
38
|
+
];
|
|
39
|
+
}, [
|
|
40
|
+
size,
|
|
41
|
+
style,
|
|
42
|
+
theme,
|
|
43
|
+
variant
|
|
44
|
+
]),
|
|
45
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
46
|
+
color: "inherit",
|
|
47
|
+
variant: "inherit",
|
|
48
|
+
style: (0, react.useMemo)(() => require_components_Pagination_paginationTheme.getMergedPaginationTextStyle(theme, size, variant, "off", "rest"), [
|
|
49
|
+
size,
|
|
50
|
+
theme,
|
|
51
|
+
variant
|
|
52
|
+
]),
|
|
53
|
+
children: "…"
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
PaginationEllipsis.displayName = "PaginationEllipsis";
|
|
58
|
+
const paginationStaticStyles = react_native.StyleSheet.create({ root: {
|
|
59
|
+
alignItems: "center",
|
|
60
|
+
justifyContent: "center",
|
|
61
|
+
flexShrink: 0
|
|
62
|
+
} });
|
|
63
|
+
//#endregion
|
|
64
|
+
exports.PaginationEllipsis = PaginationEllipsis;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
import * as _$react from "react";
|
|
3
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
4
|
+
|
|
5
|
+
//#region src/components/Pagination/PaginationEllipsis.d.ts
|
|
6
|
+
interface PaginationEllipsisProps {
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* **PaginationEllipsis — truncated page range indicator**
|
|
11
|
+
*
|
|
12
|
+
* @description
|
|
13
|
+
* Non-interactive ellipsis shown when page numbers are collapsed.
|
|
14
|
+
*
|
|
15
|
+
* @category Navigation
|
|
16
|
+
* @platform mobile
|
|
17
|
+
*/
|
|
18
|
+
declare const PaginationEllipsis: _$react.NamedExoticComponent<PaginationEllipsisProps>;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { PaginationEllipsis, type PaginationEllipsisProps };
|
|
21
|
+
//# sourceMappingURL=PaginationEllipsis.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationEllipsis.d.cts","names":[],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"mappings":";;;;;UAcU,uBAAA;EACR,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAdqC;;;;;;;;;AAAA,cA0BnD,kBAAA,EAAkB,OAAA,CAAA,oBAAA,CAAA,uBAAA"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
import * as _$react from "react";
|
|
3
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
4
|
+
|
|
5
|
+
//#region src/components/Pagination/PaginationEllipsis.d.ts
|
|
6
|
+
interface PaginationEllipsisProps {
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* **PaginationEllipsis — truncated page range indicator**
|
|
11
|
+
*
|
|
12
|
+
* @description
|
|
13
|
+
* Non-interactive ellipsis shown when page numbers are collapsed.
|
|
14
|
+
*
|
|
15
|
+
* @category Navigation
|
|
16
|
+
* @platform mobile
|
|
17
|
+
*/
|
|
18
|
+
declare const PaginationEllipsis: _$react.NamedExoticComponent<PaginationEllipsisProps>;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { PaginationEllipsis, type PaginationEllipsisProps };
|
|
21
|
+
//# sourceMappingURL=PaginationEllipsis.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationEllipsis.d.ts","names":[],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"mappings":";;;;;UAcU,uBAAA;EACR,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAdqC;;;;;;;;;AAAA,cA0BnD,kBAAA,EAAkB,OAAA,CAAA,oBAAA,CAAA,uBAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
import { Text as Text$1 } from "../Text.js";
|
|
3
|
+
import { usePaginationContext } from "./paginationContext.js";
|
|
4
|
+
import { getMergedPaginationControlRootStyle, getMergedPaginationTextStyle, getPaginationControlMetrics } from "./paginationTheme.js";
|
|
5
|
+
import { memo, useMemo } from "react";
|
|
6
|
+
import { StyleSheet, View } from "react-native";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
import { useUnistyles } from "react-native-unistyles";
|
|
9
|
+
//#region src/components/Pagination/PaginationEllipsis.tsx
|
|
10
|
+
/**
|
|
11
|
+
* **PaginationEllipsis — truncated page range indicator**
|
|
12
|
+
*
|
|
13
|
+
* @description
|
|
14
|
+
* Non-interactive ellipsis shown when page numbers are collapsed.
|
|
15
|
+
*
|
|
16
|
+
* @category Navigation
|
|
17
|
+
* @platform mobile
|
|
18
|
+
*/
|
|
19
|
+
const PaginationEllipsis = memo(function PaginationEllipsis({ style }) {
|
|
20
|
+
const { size, variant } = usePaginationContext();
|
|
21
|
+
const { theme } = useUnistyles();
|
|
22
|
+
return /* @__PURE__ */ jsx(View, {
|
|
23
|
+
accessibilityElementsHidden: true,
|
|
24
|
+
importantForAccessibility: "no-hide-descendants",
|
|
25
|
+
style: useMemo(() => {
|
|
26
|
+
const { controlSize, borderRadius } = getPaginationControlMetrics(theme, size);
|
|
27
|
+
return [
|
|
28
|
+
paginationStaticStyles.root,
|
|
29
|
+
getMergedPaginationControlRootStyle(theme, size, variant, "off", "rest"),
|
|
30
|
+
{
|
|
31
|
+
borderRadius,
|
|
32
|
+
height: controlSize,
|
|
33
|
+
width: controlSize
|
|
34
|
+
},
|
|
35
|
+
style
|
|
36
|
+
];
|
|
37
|
+
}, [
|
|
38
|
+
size,
|
|
39
|
+
style,
|
|
40
|
+
theme,
|
|
41
|
+
variant
|
|
42
|
+
]),
|
|
43
|
+
children: /* @__PURE__ */ jsx(Text$1, {
|
|
44
|
+
color: "inherit",
|
|
45
|
+
variant: "inherit",
|
|
46
|
+
style: useMemo(() => getMergedPaginationTextStyle(theme, size, variant, "off", "rest"), [
|
|
47
|
+
size,
|
|
48
|
+
theme,
|
|
49
|
+
variant
|
|
50
|
+
]),
|
|
51
|
+
children: "…"
|
|
52
|
+
})
|
|
53
|
+
});
|
|
54
|
+
});
|
|
55
|
+
PaginationEllipsis.displayName = "PaginationEllipsis";
|
|
56
|
+
const paginationStaticStyles = StyleSheet.create({ root: {
|
|
57
|
+
alignItems: "center",
|
|
58
|
+
justifyContent: "center",
|
|
59
|
+
flexShrink: 0
|
|
60
|
+
} });
|
|
61
|
+
//#endregion
|
|
62
|
+
export { PaginationEllipsis };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=PaginationEllipsis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationEllipsis.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- pagination token lookups\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport {\n getMergedPaginationControlRootStyle,\n getMergedPaginationTextStyle,\n getPaginationControlMetrics,\n} from './paginationTheme';\n\ninterface PaginationEllipsisProps {\n style?: StyleProp<ViewStyle>;\n}\n\n/**\n * **PaginationEllipsis — truncated page range indicator**\n *\n * @description\n * Non-interactive ellipsis shown when page numbers are collapsed.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationEllipsis = memo(function PaginationEllipsis({ style }: PaginationEllipsisProps) {\n const { size, variant } = usePaginationContext();\n const { theme } = useUnistyles();\n\n const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n const { controlSize, borderRadius } = getPaginationControlMetrics(theme, size);\n\n return [\n paginationStaticStyles.root,\n getMergedPaginationControlRootStyle(theme, size, variant, 'off', 'rest'),\n {\n borderRadius,\n height: controlSize,\n width: controlSize,\n },\n style,\n ];\n }, [size, style, theme, variant]);\n\n const textStyle = useMemo(\n () => getMergedPaginationTextStyle(theme, size, variant, 'off', 'rest'),\n [size, theme, variant],\n );\n\n return (\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n style={rootStyle}\n >\n <Text color=\"inherit\" variant=\"inherit\" style={textStyle}>\n …\n </Text>\n </View>\n );\n});\n\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nconst paginationStaticStyles = StyleSheet.create({\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n});\n\nexport { PaginationEllipsis, type PaginationEllipsisProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,KAAK,SAAS,mBAAmB,EAAE,SAAkC;CAC9F,MAAM,EAAE,MAAM,YAAY,sBAAsB;CAChD,MAAM,EAAE,UAAU,cAAc;CAsBhC,OACE,oBAAC,MAAD;EACE,6BAAA;EACA,2BAA0B;EAC1B,OAxBc,cAAoC;GACpD,MAAM,EAAE,aAAa,iBAAiB,4BAA4B,OAAO,KAAK;GAE9E,OAAO;IACL,uBAAuB;IACvB,oCAAoC,OAAO,MAAM,SAAS,OAAO,OAAO;IACxE;KACE;KACA,QAAQ;KACR,OAAO;KACR;IACD;IACD;KACA;GAAC;GAAM;GAAO;GAAO;GAAQ,CAWZ;YAEhB,oBAACA,QAAD;GAAM,OAAM;GAAU,SAAQ;GAAU,OAX1B,cACV,6BAA6B,OAAO,MAAM,SAAS,OAAO,OAAO,EACvE;IAAC;IAAM;IAAO;IAAQ,CASoC;aAAE;GAEnD,CAAA;EACF,CAAA;EAET;AAEF,mBAAmB,cAAc;AAEjC,MAAM,yBAAyB,WAAW,OAAO,EAC/C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACb,EACF,CAAC"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_components_Text = require("../Text.cjs");
|
|
5
|
+
const require_components_Pagination_paginationContext = require("./paginationContext.cjs");
|
|
6
|
+
const require_components_Pagination_usePaginationControlStyles = require("./usePaginationControlStyles.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let react_native = require("react-native");
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
//#region src/components/Pagination/PaginationItem.tsx
|
|
11
|
+
/**
|
|
12
|
+
* **PaginationItem — single page control**
|
|
13
|
+
*
|
|
14
|
+
* @description
|
|
15
|
+
* Renders a page number control. Usually composed via {@link PaginationNumbers}.
|
|
16
|
+
*
|
|
17
|
+
* @category Navigation
|
|
18
|
+
* @platform mobile
|
|
19
|
+
*/
|
|
20
|
+
const PaginationItem = (0, react.memo)(function PaginationItem({ page, children, onPress, ...rest }) {
|
|
21
|
+
const { activePage, size, variant, getItemAriaLabel, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
22
|
+
const isActive = page === activePage;
|
|
23
|
+
const [pressed, setPressed] = (0, react.useState)(false);
|
|
24
|
+
const { rootStyle, textStyle } = require_components_Pagination_usePaginationControlStyles.usePaginationControlStyles({
|
|
25
|
+
size,
|
|
26
|
+
variant,
|
|
27
|
+
isActive,
|
|
28
|
+
pressed
|
|
29
|
+
});
|
|
30
|
+
const handlePress = (0, react.useCallback)((event) => {
|
|
31
|
+
onPress?.(event);
|
|
32
|
+
if (!isActive) onPageChange?.(page);
|
|
33
|
+
}, [
|
|
34
|
+
isActive,
|
|
35
|
+
onPageChange,
|
|
36
|
+
onPress,
|
|
37
|
+
page
|
|
38
|
+
]);
|
|
39
|
+
const label = children ?? page;
|
|
40
|
+
const resolvedTextColor = (0, react.useMemo)(() => {
|
|
41
|
+
const flat = react_native.StyleSheet.flatten(textStyle);
|
|
42
|
+
return typeof flat?.color === "string" ? flat.color : void 0;
|
|
43
|
+
}, [textStyle]);
|
|
44
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
|
|
45
|
+
accessibilityLabel: getItemAriaLabel(page, isActive),
|
|
46
|
+
accessibilityRole: "button",
|
|
47
|
+
accessibilityState: {
|
|
48
|
+
disabled: isActive,
|
|
49
|
+
selected: isActive
|
|
50
|
+
},
|
|
51
|
+
disabled: isActive,
|
|
52
|
+
onPress: isActive ? void 0 : handlePress,
|
|
53
|
+
onPressIn: () => setPressed(true),
|
|
54
|
+
onPressOut: () => setPressed(false),
|
|
55
|
+
style: rootStyle,
|
|
56
|
+
...rest,
|
|
57
|
+
children: typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
58
|
+
color: "inherit",
|
|
59
|
+
variant: "inherit",
|
|
60
|
+
style: textStyle,
|
|
61
|
+
dangerouslySetColor: resolvedTextColor,
|
|
62
|
+
children: label
|
|
63
|
+
}) : label
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
PaginationItem.displayName = "PaginationItem";
|
|
67
|
+
//#endregion
|
|
68
|
+
exports.PaginationItem = PaginationItem;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
import { UniversalPaginationItemProps } from "../../types/dist/index.cjs";
|
|
3
|
+
import * as _$react from "react";
|
|
4
|
+
import { PressableProps } from "react-native";
|
|
5
|
+
|
|
6
|
+
//#region src/components/Pagination/PaginationItem.d.ts
|
|
7
|
+
/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */
|
|
8
|
+
interface PaginationItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {
|
|
9
|
+
page: UniversalPaginationItemProps['page'];
|
|
10
|
+
children?: UniversalPaginationItemProps['children'];
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* **PaginationItem — single page control**
|
|
14
|
+
*
|
|
15
|
+
* @description
|
|
16
|
+
* Renders a page number control. Usually composed via {@link PaginationNumbers}.
|
|
17
|
+
*
|
|
18
|
+
* @category Navigation
|
|
19
|
+
* @platform mobile
|
|
20
|
+
*/
|
|
21
|
+
declare const PaginationItem: _$react.NamedExoticComponent<PaginationItemProps>;
|
|
22
|
+
//#endregion
|
|
23
|
+
export { PaginationItem, type PaginationItemProps };
|
|
24
|
+
//# sourceMappingURL=PaginationItem.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationItem.d.cts","names":[],"sources":["../../../src/components/Pagination/PaginationItem.tsx"],"mappings":";;;;;;;UAUU,mBAAA,SAA4B,IAAA,CAAK,cAAA;EACzC,IAAA,EAAM,4BAAA;EACN,QAAA,GAAW,4BAAA;AAAA;;;;;;;;;;cAYP,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
import { UniversalPaginationItemProps } from "../../types/dist/index.js";
|
|
3
|
+
import * as _$react from "react";
|
|
4
|
+
import { PressableProps } from "react-native";
|
|
5
|
+
|
|
6
|
+
//#region src/components/Pagination/PaginationItem.d.ts
|
|
7
|
+
/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */
|
|
8
|
+
interface PaginationItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {
|
|
9
|
+
page: UniversalPaginationItemProps['page'];
|
|
10
|
+
children?: UniversalPaginationItemProps['children'];
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* **PaginationItem — single page control**
|
|
14
|
+
*
|
|
15
|
+
* @description
|
|
16
|
+
* Renders a page number control. Usually composed via {@link PaginationNumbers}.
|
|
17
|
+
*
|
|
18
|
+
* @category Navigation
|
|
19
|
+
* @platform mobile
|
|
20
|
+
*/
|
|
21
|
+
declare const PaginationItem: _$react.NamedExoticComponent<PaginationItemProps>;
|
|
22
|
+
//#endregion
|
|
23
|
+
export { PaginationItem, type PaginationItemProps };
|
|
24
|
+
//# sourceMappingURL=PaginationItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationItem.d.ts","names":[],"sources":["../../../src/components/Pagination/PaginationItem.tsx"],"mappings":";;;;;;;UAUU,mBAAA,SAA4B,IAAA,CAAK,cAAA;EACzC,IAAA,EAAM,4BAAA;EACN,QAAA,GAAW,4BAAA;AAAA;;;;;;;;;;cAYP,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}
|