chore: changeset v0.10.0

kobaltedev · Aug 12, 2023 · d0e2414 · d0e2414
1 parent 019a205
commit d0e2414
Show file tree

Hide file tree

Showing 13 changed files with 563 additions and 504 deletions.
diff --git a/.changeset/mean-boxes-tease.md b/.changeset/mean-boxes-tease.md
@@ -0,0 +1,7 @@
+---
+"@kobalte/tailwindcss": minor
+"@kobalte/utils": minor
+"@kobalte/core": minor
+---
+
+Add Pagination component + bug fixes
diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -1,4 +1,5 @@
 export const CORE_VERSIONS = [
+  "0.10.x",
   "0.9.x",
   "0.8.x",
   "0.7.x",
@@ -12,4 +13,4 @@ export const CORE_VERSIONS = [
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;
 
-export const LATEST_CORE_VERSION_NAME = "v0.9.8";
+export const LATEST_CORE_VERSION_NAME = "v0.10.0";
diff --git a/apps/docs/src/routes/docs/changelog/0-10-x.mdx b/apps/docs/src/routes/docs/changelog/0-10-x.mdx
@@ -0,0 +1,14 @@
+# v0.10.x
+
+## v0.10.0 (August 12, 2023)
+
+**New features**
+
+- Added `Pagination` component (by [@jer3m01](https://github.com/jer3m01)).
+
+**Bug fixes**
+
+- [#189](https://github.com/kobaltedev/kobalte/pull/189)
+- [#217](https://github.com/kobaltedev/kobalte/pull/217)
+- [#229](https://github.com/kobaltedev/kobalte/pull/229)
+- [#241](https://github.com/kobaltedev/kobalte/pull/241)
diff --git a/apps/docs/src/routes/docs/core.tsx b/apps/docs/src/routes/docs/core.tsx
@@ -92,6 +92,11 @@ const CORE_NAV_SECTIONS: NavSection[] = [
         title: "Link",
         href: "/docs/core/components/link",
       },
+      {
+        title: "Pagination",
+        href: "/docs/core/components/pagination",
+        status: "new",
+      },
       {
         title: "Popover",
         href: "/docs/core/components/popover",

diff --git a/apps/docs/src/routes/docs/core/components/pagination.mdx b/apps/docs/src/routes/docs/core/components/pagination.mdx
@@ -27,7 +27,7 @@ import { Pagination } from "@kobalte/core";
 
 ## Anatomy
 
-The select consists of:
+The pagination consists of:
 
 - **Pagination.Root:** The root container for the pagination component.
 - **Pagination.Item:** An item of the pagination.
@@ -279,21 +279,21 @@ The appearance can be customized by changing the items around the current page i
 | showLast          | `boolean` <br/> Whether to always show the last page item.                                     |
 | itemComponent     | `Component<{page: number}>` <br/> The component to render as an item in the `Pagination.List`. |
 | ellipsisComponent | `Component` <br/> The component to render as an ellipsis item in the `Pagination.List`.        |
-| isDisabled        | `boolean` <br/> Whether the pagination is disabled.                                            |
+| disabled          | `boolean` <br/> Whether the pagination is disabled.                                            |
 
-| Data attribute | Description                          |
-| :------------- | :----------------------------------- |
-| data-disabled  | Present when the select is disabled. |
+| Data attribute | Description                              |
+| :------------- | :--------------------------------------- |
+| data-disabled  | Present when the pagination is disabled. |
 
 ### Pagination.Item
 
 | Prop | Description                               |
 | :--- | :---------------------------------------- |
 | page | `number` <br/> The page number to render. |
 
-| Data attribute      | Description                                |
-| :------------------ | :----------------------------------------- |
-| aria-current="page" | Present when the item is the current page. |
+| Data attribute | Description                                |
+| :------------- | :----------------------------------------- |
+| data-current   | Present when the item is the current page. |
 
 ## Rendered elements
 

diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -27,7 +27,6 @@ export * as HoverCard from "./hover-card";
 export * as Image from "./image";
 export * as Link from "./link";
 export * as Listbox from "./listbox";
-export * as MultiSelect from "./multi-select";
 export * as Pagination from "./pagination";
 export * as Popover from "./popover";
 export * as Progress from "./progress";

diff --git a/packages/core/src/pagination/pagination-ellipsis.tsx b/packages/core/src/pagination/pagination-ellipsis.tsx
@@ -10,7 +10,7 @@ export interface PaginationEllipsisProps
 export function PaginationEllipsis(props: PaginationEllipsisProps) {
   return (
     <li>
-      <Polymorphic fallback="div" {...props} />
+      <Polymorphic as="div" {...props} />
     </li>
   );
 }
diff --git a/packages/core/src/pagination/pagination-item.tsx b/packages/core/src/pagination/pagination-item.tsx
@@ -1,4 +1,4 @@
-import { composeEventHandlers, mergeDefaultProps, OverrideComponentProps } from "@kobalte/utils";
+import { composeEventHandlers, OverrideComponentProps } from "@kobalte/utils";
 import { JSX, splitProps } from "solid-js";
 
 import { AsChildProp, Polymorphic } from "../polymorphic";
@@ -15,24 +15,22 @@ export interface PaginationItemProps
 export function PaginationItem(props: PaginationItemProps) {
   const context = usePaginationContext();
 
-  props = mergeDefaultProps(
-    {
-      type: "button",
-    },
-    props
-  );
-
   const [local, others] = splitProps(props, ["page", "onClick"]);
 
+  const isCurrent = () => {
+    return context.page() === local.page;
+  };
+
   const onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = () => {
     context.setPage(local.page);
   };
 
   return (
     <li>
       <Polymorphic
-        fallback="button"
-        aria-current={context.page() === local.page ? "page" : undefined}
+        as="button"
+        aria-current={isCurrent() ? "page" : undefined}
+        data-current={isCurrent() ? "" : undefined}
         onClick={composeEventHandlers([local.onClick, onClick])}
         {...others}
       />

diff --git a/packages/core/src/pagination/pagination-next.tsx b/packages/core/src/pagination/pagination-next.tsx
@@ -1,4 +1,4 @@
-import { composeEventHandlers, mergeDefaultProps, OverrideComponentProps } from "@kobalte/utils";
+import { composeEventHandlers, OverrideComponentProps } from "@kobalte/utils";
 import { JSX, splitProps } from "solid-js";
 
 import { AsChildProp, Polymorphic } from "../polymorphic";
@@ -12,13 +12,6 @@ export interface PaginationNextProps
 export function PaginationNext(props: PaginationNextProps) {
   const context = usePaginationContext();
 
-  props = mergeDefaultProps(
-    {
-      type: "button",
-    },
-    props
-  );
-
   const [local, others] = splitProps(props, ["onClick"]);
 
   const onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = () => {
@@ -30,10 +23,11 @@ export function PaginationNext(props: PaginationNextProps) {
   return (
     <li>
       <Polymorphic
-        fallback="button"
+        as="button"
         tabIndex={isDisabled() || context.page() === context.count() ? "-1" : undefined}
         disabled={isDisabled()}
         aria-disabled={isDisabled() || undefined}
+        data-disabled={isDisabled() ? "" : undefined}
         onClick={composeEventHandlers([local.onClick, onClick])}
         {...others}
       />

diff --git a/packages/core/src/pagination/pagination-previous.tsx b/packages/core/src/pagination/pagination-previous.tsx
@@ -30,10 +30,11 @@ export function PaginationPrevious(props: PaginationPreviousProps) {
   return (
     <li>
       <Polymorphic
-        fallback="button"
+        as="button"
         tabIndex={isDisabled() || context.page() === 1 ? "-1" : undefined}
         disabled={isDisabled()}
         aria-disabled={isDisabled() || undefined}
+        data-disabled={isDisabled() ? "" : undefined}
         onClick={composeEventHandlers([local.onClick, onClick])}
         {...others}
       />

diff --git a/packages/core/src/pagination/pagination-root.tsx b/packages/core/src/pagination/pagination-root.tsx
@@ -3,8 +3,9 @@ import { Accessor, Component, createUniqueId, JSX, Setter, splitProps } from "so
 
 import { createControllableSignal } from "../primitives";
 import { PaginationContext, PaginationContextValue } from "./pagination-context";
+import { AsChildProp, Polymorphic } from "../polymorphic";
 
-export interface PaginationRootOptions {
+export interface PaginationRootOptions extends AsChildProp {
   /** The controlled page number of the pagination. (1-indexed) */
   page?: number;
 
@@ -36,7 +37,7 @@ export interface PaginationRootOptions {
   ellipsisComponent: () => JSX.Element;
 
   /** Whether the pagination is disabled. */
-  isDisabled?: boolean;
+  disabled?: boolean;
 }
 
 export interface PaginationRootProps extends OverrideComponentProps<"nav", PaginationRootOptions> {}
@@ -64,7 +65,7 @@ export function PaginationRoot(props: PaginationRootProps) {
     "showLast",
     "itemComponent",
     "ellipsisComponent",
-    "isDisabled",
+    "disabled",
     "children",
   ]);
 
@@ -79,7 +80,7 @@ export function PaginationRoot(props: PaginationRootProps) {
     siblingCount: () => local.siblingCount ?? 1,
     showFirst: () => local.showFirst ?? true,
     showLast: () => local.showLast ?? true,
-    isDisabled: () => local.isDisabled ?? false,
+    isDisabled: () => local.disabled ?? false,
     renderItem: page => local.itemComponent({ page }),
     renderEllipsis: local.ellipsisComponent,
     page: state[0] as Accessor<number>,
@@ -88,9 +89,9 @@ export function PaginationRoot(props: PaginationRootProps) {
 
   return (
     <PaginationContext.Provider value={context}>
-      <nav {...others}>
+      <Polymorphic as="nav" data-disabled={local.disabled ? "" : undefined} {...others}>
         <ul>{local.children}</ul>
-      </nav>
+      </Polymorphic>
     </PaginationContext.Provider>
   );
 }
diff --git a/packages/core/src/pagination/pagination.test.tsx b/packages/core/src/pagination/pagination.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, within } from "solid-testing-library";
+import { fireEvent, render, screen } from "@solidjs/testing-library";
 
 import * as Pagination from ".";