@yahoo/uds-mobile 2.24.0-beta.4 → 2.24.0-beta.6
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/components/Avatar/AvatarIcon.cjs +8 -2
- package/dist/components/Avatar/AvatarIcon.d.cts.map +1 -1
- package/dist/components/Avatar/AvatarIcon.d.ts.map +1 -1
- package/dist/components/Avatar/AvatarIcon.js +9 -3
- package/dist/components/Avatar/AvatarIcon.js.map +1 -1
- package/dist/components/Avatar/AvatarImage.cjs +9 -2
- package/dist/components/Avatar/AvatarImage.d.cts.map +1 -1
- package/dist/components/Avatar/AvatarImage.d.ts.map +1 -1
- package/dist/components/Avatar/AvatarImage.js +10 -3
- package/dist/components/Avatar/AvatarImage.js.map +1 -1
- package/dist/components/Avatar/AvatarText.cjs +8 -2
- package/dist/components/Avatar/AvatarText.d.cts.map +1 -1
- package/dist/components/Avatar/AvatarText.d.ts.map +1 -1
- package/dist/components/Avatar/AvatarText.js +9 -3
- package/dist/components/Avatar/AvatarText.js.map +1 -1
- package/dist/components/Avatar/types.d.cts +7 -3
- package/dist/components/Avatar/types.d.cts.map +1 -1
- package/dist/components/Avatar/types.d.ts +7 -3
- package/dist/components/Avatar/types.d.ts.map +1 -1
- package/dist/components/Avatar/useAvatarFontScale.cjs +16 -0
- package/dist/components/Avatar/useAvatarFontScale.d.cts +7 -0
- package/dist/components/Avatar/useAvatarFontScale.d.cts.map +1 -0
- package/dist/components/Avatar/useAvatarFontScale.d.ts +7 -0
- package/dist/components/Avatar/useAvatarFontScale.d.ts.map +1 -0
- package/dist/components/Avatar/useAvatarFontScale.js +16 -0
- package/dist/components/Avatar/useAvatarFontScale.js.map +1 -0
- package/dist/components/Avatar/utils.cjs +9 -6
- package/dist/components/Avatar/utils.d.cts +2 -2
- package/dist/components/Avatar/utils.d.cts.map +1 -1
- package/dist/components/Avatar/utils.d.ts +2 -2
- package/dist/components/Avatar/utils.d.ts.map +1 -1
- package/dist/components/Avatar/utils.js +9 -6
- package/dist/components/Avatar/utils.js.map +1 -1
- package/dist/components/Button/buttonTheme.cjs +10 -6
- package/dist/components/Button/buttonTheme.d.cts +10 -5
- package/dist/components/Button/buttonTheme.d.cts.map +1 -1
- package/dist/components/Button/buttonTheme.d.ts +10 -5
- package/dist/components/Button/buttonTheme.d.ts.map +1 -1
- package/dist/components/Button/buttonTheme.js +10 -6
- package/dist/components/Button/buttonTheme.js.map +1 -1
- package/dist/components/Button.cjs +22 -9
- package/dist/components/Button.d.cts.map +1 -1
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +22 -9
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Checkbox.cjs +7 -3
- package/dist/components/Checkbox.js +7 -3
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Chip/ChipBase.cjs +22 -19
- package/dist/components/Chip/ChipBase.js +22 -19
- package/dist/components/Chip/ChipBase.js.map +1 -1
- package/dist/components/Icon.cjs +5 -4
- package/dist/components/Icon.d.cts.map +1 -1
- package/dist/components/Icon.d.ts.map +1 -1
- package/dist/components/Icon.js +5 -4
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/Input.cjs +54 -18
- package/dist/components/Input.d.cts +5 -0
- package/dist/components/Input.d.cts.map +1 -1
- package/dist/components/Input.d.ts +5 -0
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +54 -18
- package/dist/components/Input.js.map +1 -1
- package/dist/components/InputHelpText.cjs +6 -1
- package/dist/components/InputHelpText.d.cts +2 -0
- package/dist/components/InputHelpText.d.cts.map +1 -1
- package/dist/components/InputHelpText.d.ts +2 -0
- package/dist/components/InputHelpText.d.ts.map +1 -1
- package/dist/components/InputHelpText.js +6 -1
- package/dist/components/InputHelpText.js.map +1 -1
- package/dist/components/Link.cjs +10 -1
- package/dist/components/Link.d.cts +6 -0
- package/dist/components/Link.d.cts.map +1 -1
- package/dist/components/Link.d.ts +6 -0
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +10 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Pagination/Pagination.cjs +18 -10
- package/dist/components/Pagination/Pagination.d.cts +2 -0
- package/dist/components/Pagination/Pagination.d.cts.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts +2 -0
- package/dist/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.js +18 -10
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/PaginationEllipsis.cjs +8 -2
- package/dist/components/Pagination/PaginationEllipsis.d.cts.map +1 -1
- package/dist/components/Pagination/PaginationEllipsis.d.ts.map +1 -1
- package/dist/components/Pagination/PaginationEllipsis.js +9 -3
- package/dist/components/Pagination/PaginationEllipsis.js.map +1 -1
- package/dist/components/Pagination/PaginationItem.cjs +2 -1
- package/dist/components/Pagination/PaginationItem.js +2 -1
- package/dist/components/Pagination/PaginationItem.js.map +1 -1
- package/dist/components/Pagination/PaginationLink.cjs +2 -1
- package/dist/components/Pagination/PaginationLink.js +2 -1
- package/dist/components/Pagination/PaginationLink.js.map +1 -1
- package/dist/components/Pagination/PaginationNext.cjs +3 -1
- package/dist/components/Pagination/PaginationNext.js +3 -1
- package/dist/components/Pagination/PaginationNext.js.map +1 -1
- package/dist/components/Pagination/PaginationPrev.cjs +3 -1
- package/dist/components/Pagination/PaginationPrev.js +3 -1
- package/dist/components/Pagination/PaginationPrev.js.map +1 -1
- package/dist/components/Pagination/paginationContext.d.cts +2 -0
- package/dist/components/Pagination/paginationContext.d.cts.map +1 -1
- package/dist/components/Pagination/paginationContext.d.ts +2 -0
- package/dist/components/Pagination/paginationContext.d.ts.map +1 -1
- package/dist/components/Pagination/paginationContext.js.map +1 -1
- package/dist/components/Pagination/usePaginationControlStyles.cjs +8 -1
- package/dist/components/Pagination/usePaginationControlStyles.d.cts.map +1 -1
- package/dist/components/Pagination/usePaginationControlStyles.d.ts.map +1 -1
- package/dist/components/Pagination/usePaginationControlStyles.js +9 -2
- package/dist/components/Pagination/usePaginationControlStyles.js.map +1 -1
- package/dist/components/Radio/Radio.cjs +2 -1
- package/dist/components/Radio/Radio.js +2 -1
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Select/Select.cjs +11 -2
- package/dist/components/Select/Select.d.cts +2 -0
- package/dist/components/Select/Select.d.cts.map +1 -1
- package/dist/components/Select/Select.d.ts +2 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +11 -2
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/SelectItem.cjs +26 -15
- package/dist/components/Select/SelectItem.d.cts.map +1 -1
- package/dist/components/Select/SelectItem.d.ts.map +1 -1
- package/dist/components/Select/SelectItem.js +26 -15
- package/dist/components/Select/SelectItem.js.map +1 -1
- package/dist/components/Select/SelectTrigger.cjs +28 -13
- package/dist/components/Select/SelectTrigger.d.cts.map +1 -1
- package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
- package/dist/components/Select/SelectTrigger.js +28 -13
- package/dist/components/Select/SelectTrigger.js.map +1 -1
- package/dist/components/Select/types.d.cts +2 -0
- package/dist/components/Select/types.d.cts.map +1 -1
- package/dist/components/Select/types.d.ts +2 -0
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Switch.cjs +5 -3
- package/dist/components/Switch.d.cts.map +1 -1
- package/dist/components/Switch.d.ts.map +1 -1
- package/dist/components/Switch.js +5 -3
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs/Tab.cjs +6 -2
- package/dist/components/Tabs/Tab.d.cts.map +1 -1
- package/dist/components/Tabs/Tab.d.ts.map +1 -1
- package/dist/components/Tabs/Tab.js +6 -2
- package/dist/components/Tabs/Tab.js.map +1 -1
- package/dist/components/Text.cjs +4 -0
- package/dist/components/Text.d.cts.map +1 -1
- package/dist/components/Text.d.ts.map +1 -1
- package/dist/components/Text.js +4 -0
- package/dist/components/Text.js.map +1 -1
- package/dist/components/UDSProvider.cjs +1 -1
- package/dist/components/UDSProvider.js +1 -1
- package/dist/fontScaling/FontScalingContext.cjs +14 -0
- package/dist/fontScaling/FontScalingContext.d.cts +7 -1
- package/dist/fontScaling/FontScalingContext.d.cts.map +1 -1
- package/dist/fontScaling/FontScalingContext.d.ts +7 -1
- package/dist/fontScaling/FontScalingContext.d.ts.map +1 -1
- package/dist/fontScaling/FontScalingContext.js +15 -2
- package/dist/fontScaling/FontScalingContext.js.map +1 -1
- package/dist/fontScaling/androidNonlinearFontScaling.cjs +174 -0
- package/dist/fontScaling/androidNonlinearFontScaling.d.cts +7 -0
- package/dist/fontScaling/androidNonlinearFontScaling.d.cts.map +1 -0
- package/dist/fontScaling/androidNonlinearFontScaling.d.ts +7 -0
- package/dist/fontScaling/androidNonlinearFontScaling.d.ts.map +1 -0
- package/dist/fontScaling/androidNonlinearFontScaling.js +175 -0
- package/dist/fontScaling/androidNonlinearFontScaling.js.map +1 -0
- package/dist/fontScaling/constants.cjs +33 -0
- package/dist/fontScaling/constants.d.cts +11 -1
- package/dist/fontScaling/constants.d.cts.map +1 -1
- package/dist/fontScaling/constants.d.ts +11 -1
- package/dist/fontScaling/constants.d.ts.map +1 -1
- package/dist/fontScaling/constants.js +33 -1
- package/dist/fontScaling/constants.js.map +1 -1
- package/dist/fontScaling/index.cjs +2 -1
- package/dist/fontScaling/index.d.cts +2 -2
- package/dist/fontScaling/index.d.ts +2 -2
- package/dist/fontScaling/index.js +3 -3
- package/dist/fontScaling/useFontScale.cjs +13 -4
- package/dist/fontScaling/useFontScale.d.cts +8 -3
- package/dist/fontScaling/useFontScale.d.cts.map +1 -1
- package/dist/fontScaling/useFontScale.d.ts +8 -3
- package/dist/fontScaling/useFontScale.d.ts.map +1 -1
- package/dist/fontScaling/useFontScale.js +14 -5
- package/dist/fontScaling/useFontScale.js.map +1 -1
- package/dist/jest/mocks/styles.cjs +13 -1
- package/dist/jest/mocks/styles.d.cts.map +1 -1
- package/dist/jest/mocks/styles.d.ts.map +1 -1
- package/dist/jest/mocks/styles.js +13 -1
- package/dist/jest/mocks/styles.js.map +1 -1
- package/dist/portal.cjs +8 -2
- package/dist/portal.d.cts.map +1 -1
- package/dist/portal.d.ts.map +1 -1
- package/dist/portal.js +8 -2
- package/dist/portal.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
import { ResolvedControlFontScalingProvider } from "../../fontScaling/FontScalingContext.js";
|
|
2
3
|
import { HStack } from "../HStack.js";
|
|
4
|
+
import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
|
|
3
5
|
import { PaginationProvider, defaultGetItemAriaLabel } from "./paginationContext.js";
|
|
4
6
|
import { getPaginationRootGapStyle } from "./paginationTheme.js";
|
|
5
7
|
import { memo, useMemo } from "react";
|
|
@@ -32,8 +34,9 @@ import { useUnistyles } from "react-native-unistyles";
|
|
|
32
34
|
* </Pagination>
|
|
33
35
|
* ```
|
|
34
36
|
*/
|
|
35
|
-
const Pagination = memo(function Pagination({ activePage, totalPages, maxVisiblePageNumbers = 7, ellipsisPlacement = "none", size = "md", variant = "default", getPageHref, getItemAriaLabel = defaultGetItemAriaLabel, onPageChange, children, accessibilityLabel = "Pagination", ...rest }) {
|
|
37
|
+
const Pagination = memo(function Pagination({ activePage, totalPages, maxVisiblePageNumbers = 7, ellipsisPlacement = "none", size = "md", variant = "default", getPageHref, getItemAriaLabel = defaultGetItemAriaLabel, onPageChange, children, accessibilityLabel = "Pagination", maxFontSizeMultiplier, ...rest }) {
|
|
36
38
|
const { theme } = useUnistyles();
|
|
39
|
+
const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
|
|
37
40
|
return /* @__PURE__ */ jsx(PaginationProvider, {
|
|
38
41
|
value: useMemo(() => ({
|
|
39
42
|
activePage,
|
|
@@ -42,6 +45,7 @@ const Pagination = memo(function Pagination({ activePage, totalPages, maxVisible
|
|
|
42
45
|
ellipsisPlacement,
|
|
43
46
|
size,
|
|
44
47
|
variant,
|
|
48
|
+
maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
|
|
45
49
|
getPageHref,
|
|
46
50
|
getItemAriaLabel,
|
|
47
51
|
onPageChange
|
|
@@ -52,19 +56,23 @@ const Pagination = memo(function Pagination({ activePage, totalPages, maxVisible
|
|
|
52
56
|
ellipsisPlacement,
|
|
53
57
|
size,
|
|
54
58
|
variant,
|
|
59
|
+
resolvedMaxFontSizeMultiplier,
|
|
55
60
|
getPageHref,
|
|
56
61
|
getItemAriaLabel,
|
|
57
62
|
onPageChange
|
|
58
63
|
]),
|
|
59
|
-
children: /* @__PURE__ */ jsx(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
children: /* @__PURE__ */ jsx(ResolvedControlFontScalingProvider, {
|
|
65
|
+
maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
|
|
66
|
+
children: /* @__PURE__ */ jsx(HStack, {
|
|
67
|
+
alignItems: "center",
|
|
68
|
+
justifyContent: "center",
|
|
69
|
+
accessibilityLabel,
|
|
70
|
+
accessibilityRole: "none",
|
|
71
|
+
gap: useMemo(() => getPaginationRootGapStyle(theme, size), [size, theme]).gap,
|
|
72
|
+
alignSelf: "stretch",
|
|
73
|
+
...rest,
|
|
74
|
+
children
|
|
75
|
+
})
|
|
68
76
|
})
|
|
69
77
|
});
|
|
70
78
|
});
|
|
@@ -1 +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
|
|
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 { ResolvedControlFontScalingProvider } from '../../fontScaling/FontScalingContext';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\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 /** Caps page labels, icons, and control geometry. Set null to remove the cap. @default 2 */\n maxFontSizeMultiplier?: number | null;\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 maxFontSizeMultiplier,\n ...rest\n}: PaginationProps) {\n const { theme } = useUnistyles();\n const resolvedMaxFontSizeMultiplier =\n useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n\n const contextValue = useMemo(\n () => ({\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n size,\n variant,\n maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,\n getPageHref,\n getItemAriaLabel,\n onPageChange,\n }),\n [\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n size,\n variant,\n resolvedMaxFontSizeMultiplier,\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 <ResolvedControlFontScalingProvider maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\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 </ResolvedControlFontScalingProvider>\n </PaginationProvider>\n );\n});\n\nPagination.displayName = 'Pagination';\n\nexport { Pagination, type PaginationProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,YACA,YACA,wBAAwB,GACxB,oBAAoB,QACpB,OAAO,MACP,UAAU,WACV,aACA,mBAAmB,yBACnB,cACA,UACA,qBAAqB,cACrB,uBACA,GAAG,QACe;CAClB,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,gCACJ,yBAAyB,WAAW,sBAAsB,IAAI;CA+BhE,OACE,oBAAC,oBAAD;EAAoB,OA9BD,eACZ;GACL;GACA;GACA;GACA;GACA;GACA;GACA,uBAAuB;GACvB;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAMsC;YACrC,oBAAC,oCAAD;GAAoC,uBAAuB;aACzD,oBAAC,QAAD;IACE,YAAW;IACX,gBAAe;IACK;IACpB,mBAAkB;IAClB,KAVa,cAAc,0BAA0B,OAAO,KAAK,EAAE,CAAC,MAAM,MAAM,CAU/D,CAAC;IAClB,WAAU;IACV,GAAI;IAEH;IACM,CAAA;GAC0B,CAAA;EAClB,CAAA;EAEvB;AAEF,WAAW,cAAc"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
|
|
4
5
|
const require_components_Text = require("../Text.cjs");
|
|
5
6
|
const require_components_Pagination_paginationContext = require("./paginationContext.cjs");
|
|
6
7
|
const require_components_Pagination_paginationTheme = require("./paginationTheme.cjs");
|
|
@@ -19,13 +20,16 @@ let react_native_unistyles = require("react-native-unistyles");
|
|
|
19
20
|
* @platform mobile
|
|
20
21
|
*/
|
|
21
22
|
const PaginationEllipsis = (0, react.memo)(function PaginationEllipsis({ style }) {
|
|
22
|
-
const { size, variant } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
23
|
+
const { size, variant, maxFontSizeMultiplier } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
23
24
|
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
25
|
+
const sizeTextStyle = require_components_Pagination_paginationTheme.getPaginationSizeLayerStyle(theme, size, "text");
|
|
26
|
+
const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
|
|
24
27
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
|
|
25
28
|
accessibilityElementsHidden: true,
|
|
26
29
|
importantForAccessibility: "no-hide-descendants",
|
|
27
30
|
style: (0, react.useMemo)(() => {
|
|
28
|
-
const { controlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
|
|
31
|
+
const { controlSize: baseControlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
|
|
32
|
+
const controlSize = Math.round(baseControlSize * fontScaleFactor);
|
|
29
33
|
return [
|
|
30
34
|
paginationStaticStyles.root,
|
|
31
35
|
require_components_Pagination_paginationTheme.getMergedPaginationControlRootStyle(theme, size, variant, "off", "rest"),
|
|
@@ -37,6 +41,7 @@ const PaginationEllipsis = (0, react.memo)(function PaginationEllipsis({ style }
|
|
|
37
41
|
style
|
|
38
42
|
];
|
|
39
43
|
}, [
|
|
44
|
+
fontScaleFactor,
|
|
40
45
|
size,
|
|
41
46
|
style,
|
|
42
47
|
theme,
|
|
@@ -45,6 +50,7 @@ const PaginationEllipsis = (0, react.memo)(function PaginationEllipsis({ style }
|
|
|
45
50
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
46
51
|
color: "inherit",
|
|
47
52
|
variant: "inherit",
|
|
53
|
+
maxFontSizeMultiplier,
|
|
48
54
|
style: (0, react.useMemo)(() => require_components_Pagination_paginationTheme.getMergedPaginationTextStyle(theme, size, variant, "off", "rest"), [
|
|
49
55
|
size,
|
|
50
56
|
theme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationEllipsis.d.cts","names":[],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"PaginationEllipsis.d.cts","names":[],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"mappings":";;;;;UAgBU,uBAAA;EACR,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAhBgD;;;;;;;;;AAAA,cA4B9D,kBAAA,EAAkB,OAAA,CAAA,oBAAA,CAAA,uBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationEllipsis.d.ts","names":[],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"PaginationEllipsis.d.ts","names":[],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"mappings":";;;;;UAgBU,uBAAA;EACR,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAhBgD;;;;;;;;;AAAA,cA4B9D,kBAAA,EAAkB,OAAA,CAAA,oBAAA,CAAA,uBAAA"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
import { useFontScale } from "../../fontScaling/useFontScale.js";
|
|
2
3
|
import { Text as Text$1 } from "../Text.js";
|
|
3
4
|
import { usePaginationContext } from "./paginationContext.js";
|
|
4
|
-
import { getMergedPaginationControlRootStyle, getMergedPaginationTextStyle, getPaginationControlMetrics } from "./paginationTheme.js";
|
|
5
|
+
import { getMergedPaginationControlRootStyle, getMergedPaginationTextStyle, getPaginationControlMetrics, getPaginationSizeLayerStyle } from "./paginationTheme.js";
|
|
5
6
|
import { memo, useMemo } from "react";
|
|
6
7
|
import { StyleSheet, View } from "react-native";
|
|
7
8
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -17,13 +18,16 @@ import { useUnistyles } from "react-native-unistyles";
|
|
|
17
18
|
* @platform mobile
|
|
18
19
|
*/
|
|
19
20
|
const PaginationEllipsis = memo(function PaginationEllipsis({ style }) {
|
|
20
|
-
const { size, variant } = usePaginationContext();
|
|
21
|
+
const { size, variant, maxFontSizeMultiplier } = usePaginationContext();
|
|
21
22
|
const { theme } = useUnistyles();
|
|
23
|
+
const sizeTextStyle = getPaginationSizeLayerStyle(theme, size, "text");
|
|
24
|
+
const fontScaleFactor = useFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
|
|
22
25
|
return /* @__PURE__ */ jsx(View, {
|
|
23
26
|
accessibilityElementsHidden: true,
|
|
24
27
|
importantForAccessibility: "no-hide-descendants",
|
|
25
28
|
style: useMemo(() => {
|
|
26
|
-
const { controlSize, borderRadius } = getPaginationControlMetrics(theme, size);
|
|
29
|
+
const { controlSize: baseControlSize, borderRadius } = getPaginationControlMetrics(theme, size);
|
|
30
|
+
const controlSize = Math.round(baseControlSize * fontScaleFactor);
|
|
27
31
|
return [
|
|
28
32
|
paginationStaticStyles.root,
|
|
29
33
|
getMergedPaginationControlRootStyle(theme, size, variant, "off", "rest"),
|
|
@@ -35,6 +39,7 @@ const PaginationEllipsis = memo(function PaginationEllipsis({ style }) {
|
|
|
35
39
|
style
|
|
36
40
|
];
|
|
37
41
|
}, [
|
|
42
|
+
fontScaleFactor,
|
|
38
43
|
size,
|
|
39
44
|
style,
|
|
40
45
|
theme,
|
|
@@ -43,6 +48,7 @@ const PaginationEllipsis = memo(function PaginationEllipsis({ style }) {
|
|
|
43
48
|
children: /* @__PURE__ */ jsx(Text$1, {
|
|
44
49
|
color: "inherit",
|
|
45
50
|
variant: "inherit",
|
|
51
|
+
maxFontSizeMultiplier,
|
|
46
52
|
style: useMemo(() => getMergedPaginationTextStyle(theme, size, variant, "off", "rest"), [
|
|
47
53
|
size,
|
|
48
54
|
theme,
|
|
@@ -1 +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
|
|
1
|
+
{"version":3,"file":"PaginationEllipsis.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationEllipsis.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport type { StyleProp, TextStyle, 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 { useFontScale } from '../../fontScaling/useFontScale';\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport {\n getMergedPaginationControlRootStyle,\n getMergedPaginationTextStyle,\n getPaginationControlMetrics,\n getPaginationSizeLayerStyle,\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, maxFontSizeMultiplier } = usePaginationContext();\n const { theme } = useUnistyles();\n const sizeTextStyle = getPaginationSizeLayerStyle(theme, size, 'text') as TextStyle;\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n typeof sizeTextStyle.lineHeight === 'number'\n ? sizeTextStyle.lineHeight\n : sizeTextStyle.fontSize,\n );\n\n const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n const { controlSize: baseControlSize, borderRadius } = getPaginationControlMetrics(theme, size);\n const controlSize = Math.round(baseControlSize * fontScaleFactor);\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 }, [fontScaleFactor, 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\n color=\"inherit\"\n variant=\"inherit\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={textStyle}\n >\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":";;;;;;;;;;;;;;;;;;;AA6BA,MAAM,qBAAqB,KAAK,SAAS,mBAAmB,EAAE,SAAkC;CAC9F,MAAM,EAAE,MAAM,SAAS,0BAA0B,sBAAsB;CACvE,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,gBAAgB,4BAA4B,OAAO,MAAM,OAAO;CACtE,MAAM,kBAAkB,aACtB,uBACA,OAAO,cAAc,eAAe,WAChC,cAAc,aACd,cAAc,SACnB;CAuBD,OACE,oBAAC,MAAD;EACE,6BAAA;EACA,2BAA0B;EAC1B,OAzBc,cAAoC;GACpD,MAAM,EAAE,aAAa,iBAAiB,iBAAiB,4BAA4B,OAAO,KAAK;GAC/F,MAAM,cAAc,KAAK,MAAM,kBAAkB,gBAAgB;GAEjE,OAAO;IACL,uBAAuB;IACvB,oCAAoC,OAAO,MAAM,SAAS,OAAO,OAAO;IACxE;KACE;KACA,QAAQ;KACR,OAAO;KACR;IACD;IACD;KACA;GAAC;GAAiB;GAAM;GAAO;GAAO;GAAQ,CAW7B;YAEhB,oBAACA,QAAD;GACE,OAAM;GACN,SAAQ;GACe;GACvB,OAfY,cACV,6BAA6B,OAAO,MAAM,SAAS,OAAO,OAAO,EACvE;IAAC;IAAM;IAAO;IAAQ,CAaF;aACjB;GAEM,CAAA;EACF,CAAA;EAET;AAEF,mBAAmB,cAAc;AAEjC,MAAM,yBAAyB,WAAW,OAAO,EAC/C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACb,EACF,CAAC"}
|
|
@@ -18,7 +18,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
18
18
|
* @platform mobile
|
|
19
19
|
*/
|
|
20
20
|
const PaginationItem = (0, react.memo)(function PaginationItem({ page, children, onPress, ...rest }) {
|
|
21
|
-
const { activePage, size, variant, getItemAriaLabel, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
21
|
+
const { activePage, size, variant, maxFontSizeMultiplier, getItemAriaLabel, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
22
22
|
const isActive = page === activePage;
|
|
23
23
|
const [pressed, setPressed] = (0, react.useState)(false);
|
|
24
24
|
const { rootStyle, textStyle } = require_components_Pagination_usePaginationControlStyles.usePaginationControlStyles({
|
|
@@ -57,6 +57,7 @@ const PaginationItem = (0, react.memo)(function PaginationItem({ page, children,
|
|
|
57
57
|
children: typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
58
58
|
color: "inherit",
|
|
59
59
|
variant: "inherit",
|
|
60
|
+
maxFontSizeMultiplier,
|
|
60
61
|
style: textStyle,
|
|
61
62
|
dangerouslySetColor: resolvedTextColor,
|
|
62
63
|
children: label
|
|
@@ -16,7 +16,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
16
16
|
* @platform mobile
|
|
17
17
|
*/
|
|
18
18
|
const PaginationItem = memo(function PaginationItem({ page, children, onPress, ...rest }) {
|
|
19
|
-
const { activePage, size, variant, getItemAriaLabel, onPageChange } = usePaginationContext();
|
|
19
|
+
const { activePage, size, variant, maxFontSizeMultiplier, getItemAriaLabel, onPageChange } = usePaginationContext();
|
|
20
20
|
const isActive = page === activePage;
|
|
21
21
|
const [pressed, setPressed] = useState(false);
|
|
22
22
|
const { rootStyle, textStyle } = usePaginationControlStyles({
|
|
@@ -55,6 +55,7 @@ const PaginationItem = memo(function PaginationItem({ page, children, onPress, .
|
|
|
55
55
|
children: typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsx(Text$1, {
|
|
56
56
|
color: "inherit",
|
|
57
57
|
variant: "inherit",
|
|
58
|
+
maxFontSizeMultiplier,
|
|
58
59
|
style: textStyle,
|
|
59
60
|
dangerouslySetColor: resolvedTextColor,
|
|
60
61
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationItem.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationItem.tsx"],"sourcesContent":["import type { UniversalPaginationItemProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { PressableProps } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */\ninterface PaginationItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {\n page: UniversalPaginationItemProps['page'];\n children?: UniversalPaginationItemProps['children'];\n}\n\n/**\n * **PaginationItem — single page control**\n *\n * @description\n * Renders a page number control. Usually composed via {@link PaginationNumbers}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationItem = memo(function PaginationItem({\n page,\n children,\n onPress,\n ...rest\n}: PaginationItemProps) {\n const { activePage, size, variant, getItemAriaLabel, onPageChange }
|
|
1
|
+
{"version":3,"file":"PaginationItem.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationItem.tsx"],"sourcesContent":["import type { UniversalPaginationItemProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { PressableProps } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */\ninterface PaginationItemProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {\n page: UniversalPaginationItemProps['page'];\n children?: UniversalPaginationItemProps['children'];\n}\n\n/**\n * **PaginationItem — single page control**\n *\n * @description\n * Renders a page number control. Usually composed via {@link PaginationNumbers}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationItem = memo(function PaginationItem({\n page,\n children,\n onPress,\n ...rest\n}: PaginationItemProps) {\n const { activePage, size, variant, maxFontSizeMultiplier, getItemAriaLabel, onPageChange } =\n usePaginationContext();\n const isActive = page === activePage;\n const [pressed, setPressed] = useState(false);\n const { rootStyle, textStyle } = usePaginationControlStyles({\n size,\n variant,\n isActive,\n pressed,\n });\n\n const handlePress = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {\n onPress?.(event);\n if (!isActive) {\n onPageChange?.(page);\n }\n },\n [isActive, onPageChange, onPress, page],\n );\n\n const label = children ?? page;\n const resolvedTextColor = useMemo(() => {\n const flat = StyleSheet.flatten(textStyle);\n return typeof flat?.color === 'string' ? flat.color : undefined;\n }, [textStyle]);\n\n return (\n <Pressable\n accessibilityLabel={getItemAriaLabel(page, isActive)}\n accessibilityRole=\"button\"\n accessibilityState={{ disabled: isActive, selected: isActive }}\n disabled={isActive}\n onPress={isActive ? undefined : handlePress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={rootStyle}\n {...rest}\n >\n {typeof label === 'string' || typeof label === 'number' ? (\n <Text\n color=\"inherit\"\n variant=\"inherit\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={textStyle}\n dangerouslySetColor={resolvedTextColor}\n >\n {label}\n </Text>\n ) : (\n label\n )}\n </Pressable>\n );\n});\n\nPaginationItem.displayName = 'PaginationItem';\n\nexport { PaginationItem, type PaginationItemProps };\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,UACA,SACA,GAAG,QACmB;CACtB,MAAM,EAAE,YAAY,MAAM,SAAS,uBAAuB,kBAAkB,iBAC1E,sBAAsB;CACxB,MAAM,WAAW,SAAS;CAC1B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,EAAE,WAAW,cAAc,2BAA2B;EAC1D;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,aACjB,UAAiE;EAChE,UAAU,MAAM;EAChB,IAAI,CAAC,UACH,eAAe,KAAK;IAGxB;EAAC;EAAU;EAAc;EAAS;EAAK,CACxC;CAED,MAAM,QAAQ,YAAY;CAC1B,MAAM,oBAAoB,cAAc;EACtC,MAAM,OAAO,WAAW,QAAQ,UAAU;EAC1C,OAAO,OAAO,MAAM,UAAU,WAAW,KAAK,QAAQ,KAAA;IACrD,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,WAAD;EACE,oBAAoB,iBAAiB,MAAM,SAAS;EACpD,mBAAkB;EAClB,oBAAoB;GAAE,UAAU;GAAU,UAAU;GAAU;EAC9D,UAAU;EACV,SAAS,WAAW,KAAA,IAAY;EAChC,iBAAiB,WAAW,KAAK;EACjC,kBAAkB,WAAW,MAAM;EACnC,OAAO;EACP,GAAI;YAEH,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7C,oBAACA,QAAD;GACE,OAAM;GACN,SAAQ;GACe;GACvB,OAAO;GACP,qBAAqB;aAEpB;GACI,CAAA,GAEP;EAEQ,CAAA;EAEd;AAEF,eAAe,cAAc"}
|
|
@@ -18,7 +18,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
18
18
|
* @platform mobile
|
|
19
19
|
*/
|
|
20
20
|
const PaginationLink = (0, react.memo)(function PaginationLink({ page, href: _href, children, onPress, ...rest }) {
|
|
21
|
-
const { activePage, size, variant, getItemAriaLabel, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
21
|
+
const { activePage, size, variant, maxFontSizeMultiplier, getItemAriaLabel, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
22
22
|
const isActive = page === activePage;
|
|
23
23
|
const [pressed, setPressed] = (0, react.useState)(false);
|
|
24
24
|
const { rootStyle, textStyle } = require_components_Pagination_usePaginationControlStyles.usePaginationControlStyles({
|
|
@@ -57,6 +57,7 @@ const PaginationLink = (0, react.memo)(function PaginationLink({ page, href: _hr
|
|
|
57
57
|
children: typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
58
58
|
color: "inherit",
|
|
59
59
|
variant: "inherit",
|
|
60
|
+
maxFontSizeMultiplier,
|
|
60
61
|
style: textStyle,
|
|
61
62
|
dangerouslySetColor: resolvedTextColor,
|
|
62
63
|
children: label
|
|
@@ -16,7 +16,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
16
16
|
* @platform mobile
|
|
17
17
|
*/
|
|
18
18
|
const PaginationLink = memo(function PaginationLink({ page, href: _href, children, onPress, ...rest }) {
|
|
19
|
-
const { activePage, size, variant, getItemAriaLabel, onPageChange } = usePaginationContext();
|
|
19
|
+
const { activePage, size, variant, maxFontSizeMultiplier, getItemAriaLabel, onPageChange } = usePaginationContext();
|
|
20
20
|
const isActive = page === activePage;
|
|
21
21
|
const [pressed, setPressed] = useState(false);
|
|
22
22
|
const { rootStyle, textStyle } = usePaginationControlStyles({
|
|
@@ -55,6 +55,7 @@ const PaginationLink = memo(function PaginationLink({ page, href: _href, childre
|
|
|
55
55
|
children: typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsx(Text$1, {
|
|
56
56
|
color: "inherit",
|
|
57
57
|
variant: "inherit",
|
|
58
|
+
maxFontSizeMultiplier,
|
|
58
59
|
style: textStyle,
|
|
59
60
|
dangerouslySetColor: resolvedTextColor,
|
|
60
61
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationLink.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationLink.tsx"],"sourcesContent":["import type { UniversalPaginationLinkProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { PressableProps } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web anchor HTML attributes; keep parity fields only. */\ninterface PaginationLinkProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {\n page: UniversalPaginationLinkProps['page'];\n href: UniversalPaginationLinkProps['href'];\n children?: UniversalPaginationLinkProps['children'];\n}\n\n/**\n * **PaginationLink — link-style page control**\n *\n * @description\n * Used when `getPageHref` is provided on {@link Pagination}. Invokes `onPageChange` on press.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationLink = memo(function PaginationLink({\n page,\n href: _href,\n children,\n onPress,\n ...rest\n}: PaginationLinkProps) {\n const { activePage, size, variant, getItemAriaLabel, onPageChange }
|
|
1
|
+
{"version":3,"file":"PaginationLink.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationLink.tsx"],"sourcesContent":["import type { UniversalPaginationLinkProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { PressableProps } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web anchor HTML attributes; keep parity fields only. */\ninterface PaginationLinkProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {\n page: UniversalPaginationLinkProps['page'];\n href: UniversalPaginationLinkProps['href'];\n children?: UniversalPaginationLinkProps['children'];\n}\n\n/**\n * **PaginationLink — link-style page control**\n *\n * @description\n * Used when `getPageHref` is provided on {@link Pagination}. Invokes `onPageChange` on press.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationLink = memo(function PaginationLink({\n page,\n href: _href,\n children,\n onPress,\n ...rest\n}: PaginationLinkProps) {\n const { activePage, size, variant, maxFontSizeMultiplier, getItemAriaLabel, onPageChange } =\n usePaginationContext();\n const isActive = page === activePage;\n const [pressed, setPressed] = useState(false);\n const { rootStyle, textStyle } = usePaginationControlStyles({\n size,\n variant,\n isActive,\n pressed,\n });\n\n const handlePress = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {\n onPress?.(event);\n if (!isActive) {\n onPageChange?.(page);\n }\n },\n [isActive, onPageChange, onPress, page],\n );\n\n const label = children ?? page;\n const resolvedTextColor = useMemo(() => {\n const flat = StyleSheet.flatten(textStyle);\n return typeof flat?.color === 'string' ? flat.color : undefined;\n }, [textStyle]);\n\n return (\n <Pressable\n accessibilityLabel={getItemAriaLabel(page, isActive)}\n accessibilityRole=\"link\"\n accessibilityState={{ disabled: isActive, selected: isActive }}\n disabled={isActive}\n onPress={isActive ? undefined : handlePress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={rootStyle}\n {...rest}\n >\n {typeof label === 'string' || typeof label === 'number' ? (\n <Text\n color=\"inherit\"\n variant=\"inherit\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={textStyle}\n dangerouslySetColor={resolvedTextColor}\n >\n {label}\n </Text>\n ) : (\n label\n )}\n </Pressable>\n );\n});\n\nPaginationLink.displayName = 'PaginationLink';\n\nexport { PaginationLink, type PaginationLinkProps };\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,MAAM,OACN,UACA,SACA,GAAG,QACmB;CACtB,MAAM,EAAE,YAAY,MAAM,SAAS,uBAAuB,kBAAkB,iBAC1E,sBAAsB;CACxB,MAAM,WAAW,SAAS;CAC1B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,EAAE,WAAW,cAAc,2BAA2B;EAC1D;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,aACjB,UAAiE;EAChE,UAAU,MAAM;EAChB,IAAI,CAAC,UACH,eAAe,KAAK;IAGxB;EAAC;EAAU;EAAc;EAAS;EAAK,CACxC;CAED,MAAM,QAAQ,YAAY;CAC1B,MAAM,oBAAoB,cAAc;EACtC,MAAM,OAAO,WAAW,QAAQ,UAAU;EAC1C,OAAO,OAAO,MAAM,UAAU,WAAW,KAAK,QAAQ,KAAA;IACrD,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,WAAD;EACE,oBAAoB,iBAAiB,MAAM,SAAS;EACpD,mBAAkB;EAClB,oBAAoB;GAAE,UAAU;GAAU,UAAU;GAAU;EAC9D,UAAU;EACV,SAAS,WAAW,KAAA,IAAY;EAChC,iBAAiB,WAAW,KAAK;EACjC,kBAAkB,WAAW,MAAM;EACnC,OAAO;EACP,GAAI;YAEH,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7C,oBAACA,QAAD;GACE,OAAM;GACN,SAAQ;GACe;GACvB,OAAO;GACP,qBAAqB;aAEpB;GACI,CAAA,GAEP;EAEQ,CAAA;EAEd;AAEF,eAAe,cAAc"}
|
|
@@ -19,7 +19,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
19
19
|
* @platform mobile
|
|
20
20
|
*/
|
|
21
21
|
const PaginationNext = (0, react.memo)(function PaginationNext({ label = "Next", children, onPress, ...rest }) {
|
|
22
|
-
const { activePage, totalPages, size, variant, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
22
|
+
const { activePage, totalPages, size, variant, maxFontSizeMultiplier, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
23
23
|
const [pressed, setPressed] = (0, react.useState)(false);
|
|
24
24
|
(0, react.useEffect)(() => {
|
|
25
25
|
setPressed(false);
|
|
@@ -47,6 +47,7 @@ const PaginationNext = (0, react.memo)(function PaginationNext({ label = "Next",
|
|
|
47
47
|
const content = children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
48
48
|
color: "inherit",
|
|
49
49
|
variant: "inherit",
|
|
50
|
+
maxFontSizeMultiplier,
|
|
50
51
|
style: textStyle,
|
|
51
52
|
dangerouslySetColor: resolvedTextColor,
|
|
52
53
|
children: label
|
|
@@ -54,6 +55,7 @@ const PaginationNext = (0, react.memo)(function PaginationNext({ label = "Next",
|
|
|
54
55
|
name: "ChevronRight",
|
|
55
56
|
size: "sm",
|
|
56
57
|
color: iconStyle?.color,
|
|
58
|
+
maxFontSizeMultiplier,
|
|
57
59
|
style: iconStyle
|
|
58
60
|
})] });
|
|
59
61
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
|
|
@@ -17,7 +17,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
17
17
|
* @platform mobile
|
|
18
18
|
*/
|
|
19
19
|
const PaginationNext = memo(function PaginationNext({ label = "Next", children, onPress, ...rest }) {
|
|
20
|
-
const { activePage, totalPages, size, variant, onPageChange } = usePaginationContext();
|
|
20
|
+
const { activePage, totalPages, size, variant, maxFontSizeMultiplier, onPageChange } = usePaginationContext();
|
|
21
21
|
const [pressed, setPressed] = useState(false);
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
setPressed(false);
|
|
@@ -45,6 +45,7 @@ const PaginationNext = memo(function PaginationNext({ label = "Next", children,
|
|
|
45
45
|
const content = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text$1, {
|
|
46
46
|
color: "inherit",
|
|
47
47
|
variant: "inherit",
|
|
48
|
+
maxFontSizeMultiplier,
|
|
48
49
|
style: textStyle,
|
|
49
50
|
dangerouslySetColor: resolvedTextColor,
|
|
50
51
|
children: label
|
|
@@ -52,6 +53,7 @@ const PaginationNext = memo(function PaginationNext({ label = "Next", children,
|
|
|
52
53
|
name: "ChevronRight",
|
|
53
54
|
size: "sm",
|
|
54
55
|
color: iconStyle?.color,
|
|
56
|
+
maxFontSizeMultiplier,
|
|
55
57
|
style: iconStyle
|
|
56
58
|
})] });
|
|
57
59
|
return /* @__PURE__ */ jsx(Pressable, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationNext.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationNext.tsx"],"sourcesContent":["import type { UniversalPaginationNextProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { PressableProps, TextStyle } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */\ninterface PaginationNextProps extends Omit<PressableProps, 'children' | 'style'> {\n label?: UniversalPaginationNextProps['label'];\n children?: UniversalPaginationNextProps['children'];\n}\n\n/**\n * **PaginationNext — next page control**\n *\n * @description\n * Hidden on the last page. Moves to the next page when pressed.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationNext = memo(function PaginationNext({\n label = 'Next',\n children,\n onPress,\n ...rest\n}: PaginationNextProps) {\n const { activePage, totalPages, size, variant, onPageChange }
|
|
1
|
+
{"version":3,"file":"PaginationNext.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationNext.tsx"],"sourcesContent":["import type { UniversalPaginationNextProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { PressableProps, TextStyle } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */\ninterface PaginationNextProps extends Omit<PressableProps, 'children' | 'style'> {\n label?: UniversalPaginationNextProps['label'];\n children?: UniversalPaginationNextProps['children'];\n}\n\n/**\n * **PaginationNext — next page control**\n *\n * @description\n * Hidden on the last page. Moves to the next page when pressed.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationNext = memo(function PaginationNext({\n label = 'Next',\n children,\n onPress,\n ...rest\n}: PaginationNextProps) {\n const { activePage, totalPages, size, variant, maxFontSizeMultiplier, onPageChange } =\n usePaginationContext();\n const [pressed, setPressed] = useState(false);\n\n // Pressable unmounts when we return null before onPressOut runs; reset on page change.\n useEffect(() => {\n setPressed(false);\n }, [activePage]);\n const { rootStyle, textStyle, iconStyle } = usePaginationControlStyles({\n size,\n variant,\n isActive: false,\n pressed,\n layout: 'prevNext',\n });\n\n const handlePress = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {\n onPress?.(event);\n onPageChange?.(activePage + 1);\n },\n [activePage, onPageChange, onPress],\n );\n\n const resolvedTextColor = useMemo(() => {\n const flat = StyleSheet.flatten(textStyle);\n return typeof flat?.color === 'string' ? flat.color : undefined;\n }, [textStyle]);\n\n if (activePage >= totalPages) {\n return null;\n }\n\n const content = children ?? (\n <>\n <Text\n color=\"inherit\"\n variant=\"inherit\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={textStyle}\n dangerouslySetColor={resolvedTextColor}\n >\n {label}\n </Text>\n <Icon\n name=\"ChevronRight\"\n size=\"sm\"\n color={(iconStyle as TextStyle)?.color as StyleProps['color'] | undefined}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={iconStyle}\n />\n </>\n );\n\n return (\n <Pressable\n accessibilityLabel=\"Go to next page\"\n accessibilityRole=\"button\"\n onPress={handlePress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={rootStyle}\n {...rest}\n >\n {content}\n </Pressable>\n );\n});\n\nPaginationNext.displayName = 'PaginationNext';\n\nexport { PaginationNext, type PaginationNextProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,QAAQ,QACR,UACA,SACA,GAAG,QACmB;CACtB,MAAM,EAAE,YAAY,YAAY,MAAM,SAAS,uBAAuB,iBACpE,sBAAsB;CACxB,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAG7C,gBAAgB;EACd,WAAW,MAAM;IAChB,CAAC,WAAW,CAAC;CAChB,MAAM,EAAE,WAAW,WAAW,cAAc,2BAA2B;EACrE;EACA;EACA,UAAU;EACV;EACA,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,aACjB,UAAiE;EAChE,UAAU,MAAM;EAChB,eAAe,aAAa,EAAE;IAEhC;EAAC;EAAY;EAAc;EAAQ,CACpC;CAED,MAAM,oBAAoB,cAAc;EACtC,MAAM,OAAO,WAAW,QAAQ,UAAU;EAC1C,OAAO,OAAO,MAAM,UAAU,WAAW,KAAK,QAAQ,KAAA;IACrD,CAAC,UAAU,CAAC;CAEf,IAAI,cAAc,YAChB,OAAO;CAGT,MAAM,UAAU,YACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAACA,QAAD;EACE,OAAM;EACN,SAAQ;EACe;EACvB,OAAO;EACP,qBAAqB;YAEpB;EACI,CAAA,EACP,oBAAC,MAAD;EACE,MAAK;EACL,MAAK;EACL,OAAQ,WAAyB;EACV;EACvB,OAAO;EACP,CAAA,CACD,EAAA,CAAA;CAGL,OACE,oBAAC,WAAD;EACE,oBAAmB;EACnB,mBAAkB;EAClB,SAAS;EACT,iBAAiB,WAAW,KAAK;EACjC,kBAAkB,WAAW,MAAM;EACnC,OAAO;EACP,GAAI;YAEH;EACS,CAAA;EAEd;AAEF,eAAe,cAAc"}
|
|
@@ -19,7 +19,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
19
19
|
* @platform mobile
|
|
20
20
|
*/
|
|
21
21
|
const PaginationPrev = (0, react.memo)(function PaginationPrev({ label = "Prev", children, onPress, ...rest }) {
|
|
22
|
-
const { activePage, size, variant, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
22
|
+
const { activePage, size, variant, maxFontSizeMultiplier, onPageChange } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
23
23
|
const [pressed, setPressed] = (0, react.useState)(false);
|
|
24
24
|
(0, react.useEffect)(() => {
|
|
25
25
|
setPressed(false);
|
|
@@ -48,10 +48,12 @@ const PaginationPrev = (0, react.memo)(function PaginationPrev({ label = "Prev",
|
|
|
48
48
|
name: "ChevronLeft",
|
|
49
49
|
size: "sm",
|
|
50
50
|
color: iconStyle?.color,
|
|
51
|
+
maxFontSizeMultiplier,
|
|
51
52
|
style: iconStyle
|
|
52
53
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
|
|
53
54
|
color: "inherit",
|
|
54
55
|
variant: "inherit",
|
|
56
|
+
maxFontSizeMultiplier,
|
|
55
57
|
style: textStyle,
|
|
56
58
|
dangerouslySetColor: resolvedTextColor,
|
|
57
59
|
children: label
|
|
@@ -17,7 +17,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
17
17
|
* @platform mobile
|
|
18
18
|
*/
|
|
19
19
|
const PaginationPrev = memo(function PaginationPrev({ label = "Prev", children, onPress, ...rest }) {
|
|
20
|
-
const { activePage, size, variant, onPageChange } = usePaginationContext();
|
|
20
|
+
const { activePage, size, variant, maxFontSizeMultiplier, onPageChange } = usePaginationContext();
|
|
21
21
|
const [pressed, setPressed] = useState(false);
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
setPressed(false);
|
|
@@ -46,10 +46,12 @@ const PaginationPrev = memo(function PaginationPrev({ label = "Prev", children,
|
|
|
46
46
|
name: "ChevronLeft",
|
|
47
47
|
size: "sm",
|
|
48
48
|
color: iconStyle?.color,
|
|
49
|
+
maxFontSizeMultiplier,
|
|
49
50
|
style: iconStyle
|
|
50
51
|
}), /* @__PURE__ */ jsx(Text$1, {
|
|
51
52
|
color: "inherit",
|
|
52
53
|
variant: "inherit",
|
|
54
|
+
maxFontSizeMultiplier,
|
|
53
55
|
style: textStyle,
|
|
54
56
|
dangerouslySetColor: resolvedTextColor,
|
|
55
57
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPrev.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationPrev.tsx"],"sourcesContent":["import type { UniversalPaginationPrevProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { PressableProps, TextStyle } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */\ninterface PaginationPrevProps extends Omit<PressableProps, 'children' | 'style'> {\n label?: UniversalPaginationPrevProps['label'];\n children?: UniversalPaginationPrevProps['children'];\n}\n\n/**\n * **PaginationPrev — previous page control**\n *\n * @description\n * Hidden on the first page. Moves to the previous page when pressed.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationPrev = memo(function PaginationPrev({\n label = 'Prev',\n children,\n onPress,\n ...rest\n}: PaginationPrevProps) {\n const { activePage, size, variant, onPageChange } = usePaginationContext();\n const [pressed, setPressed] = useState(false);\n\n // Pressable unmounts when we return null before onPressOut runs; reset on page change.\n useEffect(() => {\n setPressed(false);\n }, [activePage]);\n const { rootStyle, textStyle, iconStyle } = usePaginationControlStyles({\n size,\n variant,\n isActive: false,\n pressed,\n layout: 'prevNext',\n });\n\n const handlePress = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {\n onPress?.(event);\n onPageChange?.(activePage - 1);\n },\n [activePage, onPageChange, onPress],\n );\n\n const resolvedTextColor = useMemo(() => {\n const flat = StyleSheet.flatten(textStyle);\n return typeof flat?.color === 'string' ? flat.color : undefined;\n }, [textStyle]);\n\n if (activePage <= 1) {\n return null;\n }\n\n const content = children ?? (\n <>\n <Icon\n name=\"ChevronLeft\"\n size=\"sm\"\n color={(iconStyle as TextStyle)?.color as StyleProps['color'] | undefined}\n style={iconStyle}\n />\n <Text\n color=\"inherit\"\n variant=\"inherit\"\n style={textStyle}\n dangerouslySetColor={resolvedTextColor}\n >\n {label}\n </Text>\n </>\n );\n\n return (\n <Pressable\n accessibilityLabel=\"Go to previous page\"\n accessibilityRole=\"button\"\n onPress={handlePress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={rootStyle}\n {...rest}\n >\n {content}\n </Pressable>\n );\n});\n\nPaginationPrev.displayName = 'PaginationPrev';\n\nexport { PaginationPrev, type PaginationPrevProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,QAAQ,QACR,UACA,SACA,GAAG,QACmB;CACtB,MAAM,EAAE,YAAY,MAAM,SAAS,iBAAiB,sBAAsB;
|
|
1
|
+
{"version":3,"file":"PaginationPrev.js","names":["Text"],"sources":["../../../src/components/Pagination/PaginationPrev.tsx"],"sourcesContent":["import type { UniversalPaginationPrevProps } from '@yahoo/uds-types';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { PressableProps, TextStyle } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport { usePaginationContext } from './paginationContext';\nimport { usePaginationControlStyles } from './usePaginationControlStyles';\n\n/** RN Pressable types differ from web button HTML attributes; keep parity fields only. */\ninterface PaginationPrevProps extends Omit<PressableProps, 'children' | 'style'> {\n label?: UniversalPaginationPrevProps['label'];\n children?: UniversalPaginationPrevProps['children'];\n}\n\n/**\n * **PaginationPrev — previous page control**\n *\n * @description\n * Hidden on the first page. Moves to the previous page when pressed.\n *\n * @category Navigation\n * @platform mobile\n */\nconst PaginationPrev = memo(function PaginationPrev({\n label = 'Prev',\n children,\n onPress,\n ...rest\n}: PaginationPrevProps) {\n const { activePage, size, variant, maxFontSizeMultiplier, onPageChange } = usePaginationContext();\n const [pressed, setPressed] = useState(false);\n\n // Pressable unmounts when we return null before onPressOut runs; reset on page change.\n useEffect(() => {\n setPressed(false);\n }, [activePage]);\n const { rootStyle, textStyle, iconStyle } = usePaginationControlStyles({\n size,\n variant,\n isActive: false,\n pressed,\n layout: 'prevNext',\n });\n\n const handlePress = useCallback(\n (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {\n onPress?.(event);\n onPageChange?.(activePage - 1);\n },\n [activePage, onPageChange, onPress],\n );\n\n const resolvedTextColor = useMemo(() => {\n const flat = StyleSheet.flatten(textStyle);\n return typeof flat?.color === 'string' ? flat.color : undefined;\n }, [textStyle]);\n\n if (activePage <= 1) {\n return null;\n }\n\n const content = children ?? (\n <>\n <Icon\n name=\"ChevronLeft\"\n size=\"sm\"\n color={(iconStyle as TextStyle)?.color as StyleProps['color'] | undefined}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={iconStyle}\n />\n <Text\n color=\"inherit\"\n variant=\"inherit\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={textStyle}\n dangerouslySetColor={resolvedTextColor}\n >\n {label}\n </Text>\n </>\n );\n\n return (\n <Pressable\n accessibilityLabel=\"Go to previous page\"\n accessibilityRole=\"button\"\n onPress={handlePress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n style={rootStyle}\n {...rest}\n >\n {content}\n </Pressable>\n );\n});\n\nPaginationPrev.displayName = 'PaginationPrev';\n\nexport { PaginationPrev, type PaginationPrevProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,QAAQ,QACR,UACA,SACA,GAAG,QACmB;CACtB,MAAM,EAAE,YAAY,MAAM,SAAS,uBAAuB,iBAAiB,sBAAsB;CACjG,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAG7C,gBAAgB;EACd,WAAW,MAAM;IAChB,CAAC,WAAW,CAAC;CAChB,MAAM,EAAE,WAAW,WAAW,cAAc,2BAA2B;EACrE;EACA;EACA,UAAU;EACV;EACA,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,aACjB,UAAiE;EAChE,UAAU,MAAM;EAChB,eAAe,aAAa,EAAE;IAEhC;EAAC;EAAY;EAAc;EAAQ,CACpC;CAED,MAAM,oBAAoB,cAAc;EACtC,MAAM,OAAO,WAAW,QAAQ,UAAU;EAC1C,OAAO,OAAO,MAAM,UAAU,WAAW,KAAK,QAAQ,KAAA;IACrD,CAAC,UAAU,CAAC;CAEf,IAAI,cAAc,GAChB,OAAO;CAGT,MAAM,UAAU,YACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EACE,MAAK;EACL,MAAK;EACL,OAAQ,WAAyB;EACV;EACvB,OAAO;EACP,CAAA,EACF,oBAACA,QAAD;EACE,OAAM;EACN,SAAQ;EACe;EACvB,OAAO;EACP,qBAAqB;YAEpB;EACI,CAAA,CACN,EAAA,CAAA;CAGL,OACE,oBAAC,WAAD;EACE,oBAAmB;EACnB,mBAAkB;EAClB,SAAS;EACT,iBAAiB,WAAW,KAAK;EACjC,kBAAkB,WAAW,MAAM;EACnC,OAAO;EACP,GAAI;YAEH;EACS,CAAA;EAEd;AAEF,eAAe,cAAc"}
|
|
@@ -10,6 +10,8 @@ interface PaginationContextValue {
|
|
|
10
10
|
ellipsisPlacement: PaginationEllipsisPlacement;
|
|
11
11
|
size: PaginationSize;
|
|
12
12
|
variant: PaginationVariant;
|
|
13
|
+
/** Resolved React Native control cap (0 means explicitly uncapped). */
|
|
14
|
+
maxFontSizeMultiplier: number;
|
|
13
15
|
getPageHref?: (page: number) => string;
|
|
14
16
|
getItemAriaLabel: (page: number, isActive: boolean) => string;
|
|
15
17
|
onPageChange?: (page: number) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginationContext.d.cts","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"mappings":";;;;;UASU,sBAAA;EACR,UAAA;EACA,UAAA;EACA,qBAAA;EACA,iBAAA,EAAmB,2BAAA;EACnB,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;
|
|
1
|
+
{"version":3,"file":"paginationContext.d.cts","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"mappings":";;;;;UASU,sBAAA;EACR,UAAA;EACA,UAAA;EACA,qBAAA;EACA,iBAAA,EAAmB,2BAAA;EACnB,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;EADH;EAGN,qBAAA;EACA,WAAA,IAAe,IAAA;EACf,gBAAA,GAAmB,IAAA,UAAc,QAAA;EACjC,YAAA,IAAgB,IAAA;AAAA;AAAA,cAGZ,uBAAA,GAA2B,IAAA,UAAc,QAAA;AAAA,cAGzC,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,UAEb,uBAAA;EACR,KAAA,EAAO,sBAAA;EACP,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,kBAAA;EAAA;;;KAA2C,uBAAA,GAAuB,OAAA,CAAA,GAAA,CAAA,OAAA;;;iBAO/D,oBAAA,CAAA,GAAwB,sBAAA;AAAA,iBAQxB,eAAA,CAAA,GAAe,qBAAA"}
|
|
@@ -10,6 +10,8 @@ interface PaginationContextValue {
|
|
|
10
10
|
ellipsisPlacement: PaginationEllipsisPlacement;
|
|
11
11
|
size: PaginationSize;
|
|
12
12
|
variant: PaginationVariant;
|
|
13
|
+
/** Resolved React Native control cap (0 means explicitly uncapped). */
|
|
14
|
+
maxFontSizeMultiplier: number;
|
|
13
15
|
getPageHref?: (page: number) => string;
|
|
14
16
|
getItemAriaLabel: (page: number, isActive: boolean) => string;
|
|
15
17
|
onPageChange?: (page: number) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginationContext.d.ts","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"mappings":";;;;;UASU,sBAAA;EACR,UAAA;EACA,UAAA;EACA,qBAAA;EACA,iBAAA,EAAmB,2BAAA;EACnB,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;
|
|
1
|
+
{"version":3,"file":"paginationContext.d.ts","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"mappings":";;;;;UASU,sBAAA;EACR,UAAA;EACA,UAAA;EACA,qBAAA;EACA,iBAAA,EAAmB,2BAAA;EACnB,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;EADH;EAGN,qBAAA;EACA,WAAA,IAAe,IAAA;EACf,gBAAA,GAAmB,IAAA,UAAc,QAAA;EACjC,YAAA,IAAgB,IAAA;AAAA;AAAA,cAGZ,uBAAA,GAA2B,IAAA,UAAc,QAAA;AAAA,cAGzC,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,UAEb,uBAAA;EACR,KAAA,EAAO,sBAAA;EACP,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,kBAAA;EAAA;;;KAA2C,uBAAA,GAAuB,OAAA,CAAA,GAAA,CAAA,OAAA;;;iBAO/D,oBAAA,CAAA,GAAwB,sBAAA;AAAA,iBAQxB,eAAA,CAAA,GAAe,qBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginationContext.js","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"sourcesContent":["import type {\n PaginationEllipsisPlacement,\n PaginationSize,\n PaginationVariant,\n} from '@yahoo/uds-types';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport { computeVisiblePages } from './computeVisiblePages';\n\ninterface PaginationContextValue {\n activePage: number;\n totalPages: number;\n maxVisiblePageNumbers: number;\n ellipsisPlacement: PaginationEllipsisPlacement;\n size: PaginationSize;\n variant: PaginationVariant;\n getPageHref?: (page: number) => string;\n getItemAriaLabel: (page: number, isActive: boolean) => string;\n onPageChange?: (page: number) => void;\n}\n\nconst defaultGetItemAriaLabel = (page: number, isActive: boolean) =>\n isActive ? `Page ${page}, current page` : `Go to page ${page}`;\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\ninterface PaginationProviderProps {\n value: PaginationContextValue;\n children: React.ReactNode;\n}\n\nconst PaginationProvider = ({ value, children }: PaginationProviderProps) => {\n const contextValue = useMemo(() => value, [value]);\n return <PaginationContext.Provider value={contextValue}>{children}</PaginationContext.Provider>;\n};\n\nPaginationProvider.displayName = 'PaginationProvider';\n\nfunction usePaginationContext(): PaginationContextValue {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error('Pagination components must be used within a Pagination provider.');\n }\n return context;\n}\n\nfunction useVisiblePages() {\n const { activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement } =\n usePaginationContext();\n return useMemo(\n () =>\n computeVisiblePages({\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n }),\n [activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement],\n );\n}\n\nexport {\n defaultGetItemAriaLabel,\n PaginationContext,\n PaginationProvider,\n usePaginationContext,\n useVisiblePages,\n};\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"paginationContext.js","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"sourcesContent":["import type {\n PaginationEllipsisPlacement,\n PaginationSize,\n PaginationVariant,\n} from '@yahoo/uds-types';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport { computeVisiblePages } from './computeVisiblePages';\n\ninterface PaginationContextValue {\n activePage: number;\n totalPages: number;\n maxVisiblePageNumbers: number;\n ellipsisPlacement: PaginationEllipsisPlacement;\n size: PaginationSize;\n variant: PaginationVariant;\n /** Resolved React Native control cap (0 means explicitly uncapped). */\n maxFontSizeMultiplier: number;\n getPageHref?: (page: number) => string;\n getItemAriaLabel: (page: number, isActive: boolean) => string;\n onPageChange?: (page: number) => void;\n}\n\nconst defaultGetItemAriaLabel = (page: number, isActive: boolean) =>\n isActive ? `Page ${page}, current page` : `Go to page ${page}`;\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\ninterface PaginationProviderProps {\n value: PaginationContextValue;\n children: React.ReactNode;\n}\n\nconst PaginationProvider = ({ value, children }: PaginationProviderProps) => {\n const contextValue = useMemo(() => value, [value]);\n return <PaginationContext.Provider value={contextValue}>{children}</PaginationContext.Provider>;\n};\n\nPaginationProvider.displayName = 'PaginationProvider';\n\nfunction usePaginationContext(): PaginationContextValue {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error('Pagination components must be used within a Pagination provider.');\n }\n return context;\n}\n\nfunction useVisiblePages() {\n const { activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement } =\n usePaginationContext();\n return useMemo(\n () =>\n computeVisiblePages({\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n }),\n [activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement],\n );\n}\n\nexport {\n defaultGetItemAriaLabel,\n PaginationContext,\n PaginationProvider,\n usePaginationContext,\n useVisiblePages,\n};\n"],"mappings":";;;;;AAuBA,MAAM,2BAA2B,MAAc,aAC7C,WAAW,QAAQ,KAAK,kBAAkB,cAAc;AAE1D,MAAM,oBAAoB,cAA6C,KAAK;AAO5E,MAAM,sBAAsB,EAAE,OAAO,eAAwC;CAC3E,MAAM,eAAe,cAAc,OAAO,CAAC,MAAM,CAAC;CAClD,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAe;EAAsC,CAAA;;AAGjG,mBAAmB,cAAc;AAEjC,SAAS,uBAA+C;CACtD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,mEAAmE;CAErF,OAAO;;AAGT,SAAS,kBAAkB;CACzB,MAAM,EAAE,YAAY,YAAY,uBAAuB,sBACrD,sBAAsB;CACxB,OAAO,cAEH,oBAAoB;EAClB;EACA;EACA;EACA;EACD,CAAC,EACJ;EAAC;EAAY;EAAY;EAAuB;EAAkB,CACnE"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
|
|
5
|
+
const require_components_Pagination_paginationContext = require("./paginationContext.cjs");
|
|
4
6
|
const require_components_Pagination_paginationTheme = require("./paginationTheme.cjs");
|
|
5
7
|
let react = require("react");
|
|
6
8
|
let react_native = require("react-native");
|
|
@@ -8,12 +10,16 @@ let react_native_unistyles = require("react-native-unistyles");
|
|
|
8
10
|
//#region src/components/Pagination/usePaginationControlStyles.ts
|
|
9
11
|
function usePaginationControlStyles({ size, variant, isActive, pressed, layout = "page" }) {
|
|
10
12
|
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
13
|
+
const { maxFontSizeMultiplier } = require_components_Pagination_paginationContext.usePaginationContext();
|
|
11
14
|
const active = isActive ? "on" : "off";
|
|
12
15
|
const interaction = pressed ? "pressed" : "rest";
|
|
13
16
|
const prevNextActive = "off";
|
|
17
|
+
const sizeTextStyle = require_components_Pagination_paginationTheme.getPaginationSizeLayerStyle(theme, size, "text");
|
|
18
|
+
const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
|
|
14
19
|
return {
|
|
15
20
|
rootStyle: (0, react.useMemo)(() => {
|
|
16
|
-
const { controlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
|
|
21
|
+
const { controlSize: baseControlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
|
|
22
|
+
const controlSize = Math.round(baseControlSize * fontScaleFactor);
|
|
17
23
|
const variantActive = layout === "prevNext" ? prevNextActive : active;
|
|
18
24
|
return [
|
|
19
25
|
layout === "page" ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,
|
|
@@ -28,6 +34,7 @@ function usePaginationControlStyles({ size, variant, isActive, pressed, layout =
|
|
|
28
34
|
];
|
|
29
35
|
}, [
|
|
30
36
|
active,
|
|
37
|
+
fontScaleFactor,
|
|
31
38
|
interaction,
|
|
32
39
|
layout,
|
|
33
40
|
size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePaginationControlStyles.d.cts","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"usePaginationControlStyles.d.cts","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"mappings":";;;;;UAiBU,iCAAA;EACR,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;EACT,QAAA;EACA,OAAA;EACA,MAAA;AAAA;AAAA,iBAGO,0BAAA,CAAA;EACP,IAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA;AAAA,GACC,iCAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePaginationControlStyles.d.ts","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"usePaginationControlStyles.d.ts","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"mappings":";;;;;UAiBU,iCAAA;EACR,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;EACT,QAAA;EACA,OAAA;EACA,MAAA;AAAA;AAAA,iBAGO,0BAAA,CAAA;EACP,IAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA;AAAA,GACC,iCAAA"}
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
-
import {
|
|
2
|
+
import { useFontScale } from "../../fontScaling/useFontScale.js";
|
|
3
|
+
import { usePaginationContext } from "./paginationContext.js";
|
|
4
|
+
import { getMergedPaginationControlRootStyle, getMergedPaginationIconStyle, getMergedPaginationTextStyle, getPaginationControlMetrics, getPaginationSizeLayerStyle } from "./paginationTheme.js";
|
|
3
5
|
import { useMemo } from "react";
|
|
4
6
|
import { StyleSheet } from "react-native";
|
|
5
7
|
import { useUnistyles } from "react-native-unistyles";
|
|
6
8
|
//#region src/components/Pagination/usePaginationControlStyles.ts
|
|
7
9
|
function usePaginationControlStyles({ size, variant, isActive, pressed, layout = "page" }) {
|
|
8
10
|
const { theme } = useUnistyles();
|
|
11
|
+
const { maxFontSizeMultiplier } = usePaginationContext();
|
|
9
12
|
const active = isActive ? "on" : "off";
|
|
10
13
|
const interaction = pressed ? "pressed" : "rest";
|
|
11
14
|
const prevNextActive = "off";
|
|
15
|
+
const sizeTextStyle = getPaginationSizeLayerStyle(theme, size, "text");
|
|
16
|
+
const fontScaleFactor = useFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
|
|
12
17
|
return {
|
|
13
18
|
rootStyle: useMemo(() => {
|
|
14
|
-
const { controlSize, borderRadius } = getPaginationControlMetrics(theme, size);
|
|
19
|
+
const { controlSize: baseControlSize, borderRadius } = getPaginationControlMetrics(theme, size);
|
|
20
|
+
const controlSize = Math.round(baseControlSize * fontScaleFactor);
|
|
15
21
|
const variantActive = layout === "prevNext" ? prevNextActive : active;
|
|
16
22
|
return [
|
|
17
23
|
layout === "page" ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,
|
|
@@ -26,6 +32,7 @@ function usePaginationControlStyles({ size, variant, isActive, pressed, layout =
|
|
|
26
32
|
];
|
|
27
33
|
}, [
|
|
28
34
|
active,
|
|
35
|
+
fontScaleFactor,
|
|
29
36
|
interaction,
|
|
30
37
|
layout,
|
|
31
38
|
size,
|