@workday/canvas-kit-react/dist/es6/pagination/lib/Pagination/PageButton.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { PaginationContext } from './usePaginationModel';
export const paginationPageButtonStencil = createStencil({
    extends: buttonStencil,
    base: { name: "j7uhq", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;font-weight:var(--cnvs-sys-font-weight-normal);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" },
    modifiers: {
        toggled: {
            true: { name: "2st45q", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);@media (prefers-contrast: more){outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-fg-disabled);}" }
        }
    }
}, "pagination-page-button-c731af");
export const PageButton = createComponent('button')({
    displayName: 'Pagination.PageButton',
    Component({ pageNumber, children, ...elemProps }) {
        const model = React.useContext(PaginationContext);
        const isCurrentPage = pageNumber === model.state.currentPage;
        const handleClick = (e) => {
            var _a, _b;
            (_b = (_a = elemProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
            model.events.goTo(pageNumber);
        };
        return (_jsx(BaseButton, { "aria-current": isCurrentPage ? 'page' : undefined, "aria-pressed": undefined, size: "small", onClick: handleClick, ...handleCsProp(elemProps, paginationPageButtonStencil({ toggled: isCurrentPage })), children: children || pageNumber }));
    },
});