Call custom event handlers

[phamduylong]

Linked Issue

Closes #3064

Description

Call zagProps events whenever applicable

NOTE: onPageSizeChange hasn't worked for Pagination yet.

Changsets

Instructions: Changesets automate our changelog. If you modify files in /packages, run pnpm changeset in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be minor while chores and bugfixes should be patch. Please prefix the changeset message with feat:, bugfix: or chore:.

Checklist

Please read and apply all contribution requirements.

• This PR targets the dev branch (NEVER master)
• Documentation reflects all relevant changes
• Branch is prefixed with: docs/, feat/, chore/, bugfix/
• Ensure Svelte and Typescript linting is current - run pnpm ci:check
• Ensure Prettier linting is current - run pnpm format
• All test cases are passing - run pnpm test
• Includes a changeset (if relevant; see above)

[changeset-bot]

🦋 Changeset detected

Latest commit: e3bff26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@skeletonlabs/skeleton-svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
skeleton-docs	❌ Failed (Inspect)		Dec 19, 2024 11:12pm

[vercel]

@phamduylong is attempting to deploy a commit to the Skeleton Labs Team on Vercel.

A member of the Team first needs to authorize it.

[Hugos68]

For the Pagination component, the reason the callback in conjunction with binding doesn't work is because the callbacks need to be defined at the context level. Not the machine level.
This makes it work:

const [snapshot, send] = useMachine(
		pagination.machine({
			id: useId(),
			count: data.length,
-			onPageChange(details) {
-				zagProps.onPageChange?.(details);
-				page = details.page;
-			},
-			onPageSizeChange(details) {
-				zagProps.onPageSizeChange?.(details);
-				pageSize = details.pageSize;
-			}
		}),
		{
			context: {
				...zagProps,
+			        onPageChange(details) {
+				        zagProps.onPageChange?.(details);
+				        page = details.page;
+			        },
+			        onPageSizeChange(details) {
+				        zagProps.onPageSizeChange?.(details);
+				       pageSize = details.pageSize;
+			        },
				get page() {
					return page;
				},
				get pageSize() {
					return pageSize;
				},
				get count() {
					// Use 'count' if specified; required for server-side pagination.
					return zagProps.count ?? data.length;
				}
			}
		}
	);

Apart from that, LGTM!

[phamduylong]

Browsing through Zag's source code for Pagination, it seems like the onPageChange event is only being triggered because they handle an onclick event internally for it. onPageSizeChange on the other hand doesn't have anything similar.
Source

[endigo9740]

@phamduylong @Hugos68 just checking on the status of this guys. Looks like Hugo suggested a change, but no change was made before this was flagged for review again. Hugo can you confirm Long's response and indicate if there's any further action needed here.

[Hugos68]

@endigo9740 Yeah the change is still needed, otherwise it will contain a bug

[phamduylong]

@endigo9740 @Hugos68 See discussion happened on Discord

At least the suggested change doesn't work so there needs to be something else. I tried an effect rune call to make it work but this is not something I'd like to commit, it's just quite ugly.

$effect(() => {
    zagProps.onPageSizeChange?.({ pageSize });
});

Hugo if you meant something else, could you elaborate? I couldn't make this work in any sense.