@kobalte/core/dist/chunk/ZTWDVPNQ.jsx

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import {
  ButtonRoot
} from "./UKTBL2JL.jsx";
import {
  createControllableSignal
} from "./FN6EICGO.jsx";
import {
  Polymorphic
} from "./FLVHQV4A.jsx";
import {
  __export
} from "./5WXHJDCZ.jsx";

// src/pagination/index.tsx
var pagination_exports = {};
__export(pagination_exports, {
  Ellipsis: () => PaginationEllipsis,
  Item: () => PaginationItem,
  Items: () => PaginationItems,
  Next: () => PaginationNext,
  Pagination: () => Pagination,
  Previous: () => PaginationPrevious,
  Root: () => PaginationRoot,
  usePaginationContext: () => usePaginationContext
});

// src/pagination/pagination-ellipsis.tsx
function PaginationEllipsis(props) {
  return <li><Polymorphic
    as="div"
    {...props}
  /></li>;
}

// src/pagination/pagination-item.tsx
import { composeEventHandlers } from "@kobalte/utils";
import {
  splitProps
} from "solid-js";

// src/pagination/pagination-context.tsx
import {
  createContext,
  useContext
} from "solid-js";
var PaginationContext = createContext();
function usePaginationContext() {
  const context = useContext(PaginationContext);
  if (context === void 0) {
    throw new Error(
      "[kobalte]: `usePaginationContext` must be used within a `Pagination` component"
    );
  }
  return context;
}

// src/pagination/pagination-item.tsx
function PaginationItem(props) {
  const context = usePaginationContext();
  const [local, others] = splitProps(props, [
    "page",
    "onClick"
  ]);
  const isCurrent = () => {
    return context.page() === local.page;
  };
  const onClick = () => {
    context.setPage(local.page);
  };
  return <li><ButtonRoot
    aria-current={isCurrent() ? "page" : void 0}
    data-current={isCurrent() ? "" : void 0}
    onClick={composeEventHandlers([local.onClick, onClick])}
    {...others}
  /></li>;
}

// src/pagination/pagination-items.tsx
import { For, Show, createMemo } from "solid-js";
function PaginationItems(props) {
  const context = usePaginationContext();
  const items = createMemo(() => {
    const { count, siblingCount, page, fixedItems, showFirst, showLast } = context;
    const renderItemsDirectly = count() < 2 * siblingCount() + (fixedItems() ? 6 : 4);
    if (renderItemsDirectly)
      return {
        renderItemsDirectly
      };
    const _showFirst = showFirst() && page() - 1 > siblingCount();
    const _showLast = showLast() && count() - page() > siblingCount();
    let showFirstEllipsis = page() - (showFirst() ? 2 : 1) > siblingCount();
    let showLastEllipsis = count() - page() - (showLast() ? 1 : 0) > siblingCount();
    let previousSiblingCount = Math.min(page() - 1, siblingCount());
    let nextSiblingCount = Math.min(count() - page(), siblingCount());
    if (fixedItems() !== false) {
      const previousSiblingCountRef = previousSiblingCount;
      const nextSiblingCountRef = nextSiblingCount;
      previousSiblingCount += Math.max(siblingCount() - nextSiblingCountRef, 0);
      nextSiblingCount += Math.max(siblingCount() - previousSiblingCountRef, 0);
      if (!_showFirst)
        nextSiblingCount++;
      if (!_showLast)
        previousSiblingCount++;
      if (fixedItems() === true) {
        if (!showFirstEllipsis)
          nextSiblingCount++;
        if (!showLastEllipsis)
          previousSiblingCount++;
      }
      if (page() - previousSiblingCount - (showFirst() ? 2 : 1) === 1) {
        showFirstEllipsis = false;
        previousSiblingCount++;
      }
      if (count() - page() - nextSiblingCount - (showLast() ? 1 : 0) === 1) {
        showLastEllipsis = false;
        nextSiblingCount++;
      }
    }
    return {
      showFirst: _showFirst,
      showLast: _showLast,
      showFirstEllipsis,
      showLastEllipsis,
      previousSiblingCount,
      nextSiblingCount,
      renderItemsDirectly
    };
  });
  return <><Show
    when={items().renderItemsDirectly}
    fallback={<>
      <Show when={items().showFirst}>{context.renderItem(1)}</Show>
      <Show when={items().showFirstEllipsis}>{context.renderEllipsis()}</Show>
      <For
        each={[...Array(items().previousSiblingCount).keys()].reverse()}
      >{(offset) => <>{context.renderItem(context.page() - (offset + 1))}</>}</For>
      {context.renderItem(context.page())}
      <For each={[...Array(items().nextSiblingCount).keys()]}>{(offset) => <>{context.renderItem(context.page() + (offset + 1))}</>}</For>
      <Show when={items().showLastEllipsis}>{context.renderEllipsis()}</Show>
      <Show when={items().showLast}>{context.renderItem(context.count())}</Show>
    </>}
  ><For each={[...Array(context.count()).keys()]}>{(page) => <>{context.renderItem(page + 1)}</>}</For></Show></>;
}

// src/pagination/pagination-next.tsx
import { composeEventHandlers as composeEventHandlers2 } from "@kobalte/utils";
import {
  splitProps as splitProps2
} from "solid-js";
function PaginationNext(props) {
  const context = usePaginationContext();
  const [local, others] = splitProps2(props, ["onClick"]);
  const onClick = () => {
    context.setPage(context.page() + 1);
  };
  const isDisabled = () => context.page() === context.count();
  return <li><ButtonRoot
    tabIndex={isDisabled() || context.page() === context.count() ? -1 : void 0}
    disabled={isDisabled()}
    aria-disabled={isDisabled() || void 0}
    data-disabled={isDisabled() ? "" : void 0}
    onClick={composeEventHandlers2([local.onClick, onClick])}
    {...others}
  /></li>;
}

// src/pagination/pagination-previous.tsx
import { composeEventHandlers as composeEventHandlers3 } from "@kobalte/utils";
import {
  splitProps as splitProps3
} from "solid-js";
function PaginationPrevious(props) {
  const context = usePaginationContext();
  const [local, others] = splitProps3(props, [
    "onClick"
  ]);
  const onClick = () => {
    context.setPage(context.page() - 1);
  };
  const isDisabled = () => context.page() === 1;
  return <li><ButtonRoot
    tabIndex={isDisabled() || context.page() === 1 ? -1 : void 0}
    disabled={isDisabled()}
    aria-disabled={isDisabled() || void 0}
    data-disabled={isDisabled() ? "" : void 0}
    onClick={composeEventHandlers3([local.onClick, onClick])}
    {...others}
  /></li>;
}

// src/pagination/pagination-root.tsx
import { mergeDefaultProps } from "@kobalte/utils";
import {
  createUniqueId,
  splitProps as splitProps4
} from "solid-js";
function PaginationRoot(props) {
  const defaultId = `pagination-${createUniqueId()}`;
  const mergedProps = mergeDefaultProps(
    {
      id: defaultId
    },
    props
  );
  const [local, others] = splitProps4(mergedProps, [
    "page",
    "defaultPage",
    "onPageChange",
    "count",
    "siblingCount",
    "showFirst",
    "showLast",
    "fixedItems",
    "itemComponent",
    "ellipsisComponent",
    "disabled",
    "children"
  ]);
  const state = createControllableSignal({
    defaultValue: () => local.defaultPage ?? 1,
    onChange: local.onPageChange,
    value: () => local.page
  });
  const context = {
    count: () => local.count,
    siblingCount: () => local.siblingCount ?? 1,
    showFirst: () => local.showFirst ?? true,
    showLast: () => local.showLast ?? true,
    fixedItems: () => local.fixedItems ?? false,
    isDisabled: () => local.disabled ?? false,
    renderItem: (page) => local.itemComponent({ page }),
    renderEllipsis: local.ellipsisComponent,
    page: () => Math.min(state[0]() ?? 1, local.count),
    setPage: state[1]
  };
  return <PaginationContext.Provider value={context}><Polymorphic
    as="nav"
    data-disabled={local.disabled ? "" : void 0}
    {...others}
  ><ul>{local.children}</ul></Polymorphic></PaginationContext.Provider>;
}

// src/pagination/index.tsx
var Pagination = Object.assign(PaginationRoot, {
  Ellipsis: PaginationEllipsis,
  Item: PaginationItem,
  Items: PaginationItems,
  Next: PaginationNext,
  Previous: PaginationPrevious
});

export {
  PaginationEllipsis,
  usePaginationContext,
  PaginationItem,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
  PaginationRoot,
  Pagination,
  pagination_exports
};