@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/organisms/views/FormViews.js

@@ -0,0 +1,96 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { getComponent as i } from "../../registries/components.js";
+import { FormAccess as v } from "../form/access/FormAccess.js";
+import { FormEdit as f } from "../form/builder/FormEdit.js";
+import { FormExport as g } from "../form/exports/FormExport.js";
+import { FormPreview as w } from "../form/preview/FormPreview.js";
+import { FormSettings as y } from "../form/settings/FormSettings.js";
+import { ActionsTable as E } from "../table/actions/ActionsTable.js";
+import { SubmissionsTable as F } from "../table/submissions/SubmissionsTable.js";
+function N(t) {
+  return [
+    {
+      title: "Edit",
+      action: "submission:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver: t
+    },
+    {
+      action: "submission:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver: t
+    }
+  ];
+}
+function x(t) {
+  return [
+    {
+      title: "Edit",
+      action: "action:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver: t
+    },
+    {
+      action: "action:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver: t
+    }
+  ];
+}
+function D({
+  form: t,
+  roles: l,
+  availableActions: d,
+  actions: b,
+  permissionsResolver: s,
+  submissions: p,
+  i18n: e = (n) => n
+}) {
+  const n = i("Tabs"), u = i("TabList"), r = i("Tab"), m = i("TabsBody"), a = i("TabPanel"), h = N(s), T = x(s);
+  return /* @__PURE__ */ c(n, { children: [
+    /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ o(r, { value: 0, icon: "edit", children: e("Edit") }),
+      /* @__PURE__ */ o(r, { value: 1, icon: "data", children: e("Data") }),
+      /* @__PURE__ */ o(r, { value: 2, icon: "test-tube", children: e("Preview") }),
+      /* @__PURE__ */ o(r, { value: 3, icon: "paper-plane", children: e("Actions") }),
+      /* @__PURE__ */ o(r, { value: 4, icon: "lock", children: e("Access") }),
+      /* @__PURE__ */ o(r, { value: 5, icon: "download", children: e("Export") }),
+      /* @__PURE__ */ o(r, { value: 6, icon: "cog", children: e("Settings") })
+    ] }),
+    /* @__PURE__ */ c(m, { children: [
+      /* @__PURE__ */ o(a, { value: 0, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(f, { form: t, options: { i18n: e } }) }),
+      /* @__PURE__ */ o(a, { value: 1, children: /* @__PURE__ */ o(
+        F,
+        {
+          className: "border-top-0",
+          form: t,
+          data: p,
+          i18n: e,
+          operations: h
+        }
+      ) }),
+      /* @__PURE__ */ o(a, { value: 2, children: /* @__PURE__ */ o(w, { form: t, i18n: e }) }),
+      /* @__PURE__ */ o(a, { value: 3, children: /* @__PURE__ */ o(
+        E,
+        {
+          className: "border-top-0",
+          availableActions: d,
+          data: b,
+          operations: T,
+          i18n: e
+        }
+      ) }),
+      /* @__PURE__ */ o(a, { value: 4, className: "pt-3", children: /* @__PURE__ */ o(v, { form: t, roles: l, options: { i18n: e } }) }),
+      /* @__PURE__ */ o(a, { value: 5, className: "pt-3", children: /* @__PURE__ */ o(g, { i18n: e }) }),
+      /* @__PURE__ */ o(a, { value: 6, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(y, { form: t, options: {} }) })
+    ] })
+  ] });
+}
+export {
+  D as FormViews
+};
+//# sourceMappingURL=FormViews.js.map

package/dist/organisms/views/FormViews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormViews.js","sources":["../../../src/organisms/views/FormViews.tsx"],"sourcesContent":["import type { FormType, JSON, PermissionsResolver } from \"../../interfaces/index.js\";\nimport type { Tab as DefaultTab } from \"../../molecules/tabs/Tab.js\";\nimport type { TabList as DefaultTabList } from \"../../molecules/tabs/TabList.js\";\nimport type { TabPanel as DefaultTabPanel } from \"../../molecules/tabs/TabPanel.js\";\nimport type { Tabs as DefaultTabs } from \"../../molecules/tabs/Tabs.js\";\nimport type { TabsBody as DefaultTabsBody } from \"../../molecules/tabs/TabsBody.js\";\nimport { getComponent } from \"../../registries/components.js\";\nimport { FormAccess, type FormAccessProps } from \"../form/access/FormAccess.js\";\nimport { FormEdit, type FormEditProps } from \"../form/builder/FormEdit.js\";\nimport { FormExport } from \"../form/exports/FormExport.js\";\nimport { FormPreview } from \"../form/preview/FormPreview.js\";\nimport { FormSettings } from \"../form/settings/FormSettings.js\";\nimport { ActionsTable, type ActionsTableProps } from \"../table/actions/ActionsTable.js\";\nimport { SubmissionsTable, type SubmissionsTableProps } from \"../table/submissions/SubmissionsTable.js\";\n\nexport type FormViewsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = {\n  form: FormEditProps[\"form\"];\n  submissions: SubmissionsTableProps<Data>[\"data\"];\n  availableActions: ActionsTableProps[\"availableActions\"];\n  actions: ActionsTableProps[\"data\"];\n  roles?: FormAccessProps[\"roles\"];\n  i18n?: (key: string) => string;\n  onAction: () => void;\n  permissionsResolver?: PermissionsResolver<Data>;\n};\n\nfunction useSubmissionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"submission:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"submission:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nfunction useActionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"action:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"action:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nexport function FormViews<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  roles,\n  availableActions,\n  actions,\n  permissionsResolver,\n  submissions,\n  i18n = (f) => f\n}: FormViewsProps<Data>) {\n  const Tabs = getComponent<typeof DefaultTabs>(\"Tabs\");\n  const TabList = getComponent<typeof DefaultTabList>(\"TabList\");\n  const Tab = getComponent<typeof DefaultTab>(\"Tab\");\n  const TabsBody = getComponent<typeof DefaultTabsBody>(\"TabsBody\");\n  const TabPanel = getComponent<typeof DefaultTabPanel>(\"TabPanel\");\n  const submissionsOperations = useSubmissionsOperations<Data>(permissionsResolver);\n  const actionsOperations = useActionsOperations<any>(permissionsResolver);\n\n  return (\n    <Tabs>\n      <TabList>\n        <Tab value={0} icon='edit'>\n          {i18n(\"Edit\")}\n        </Tab>\n        <Tab value={1} icon='data'>\n          {i18n(\"Data\")}\n        </Tab>\n        <Tab value={2} icon='test-tube'>\n          {i18n(\"Preview\")}\n        </Tab>\n        <Tab value={3} icon='paper-plane'>\n          {i18n(\"Actions\")}\n        </Tab>\n        <Tab value={4} icon='lock'>\n          {i18n(\"Access\")}\n        </Tab>\n        <Tab value={5} icon='download'>\n          {i18n(\"Export\")}\n        </Tab>\n        <Tab value={6} icon='cog'>\n          {i18n(\"Settings\")}\n        </Tab>\n      </TabList>\n      <TabsBody>\n        <TabPanel value={0} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormEdit form={form} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={1}>\n          <SubmissionsTable<Data>\n            className={\"border-top-0\"}\n            form={form as FormType}\n            data={submissions}\n            i18n={i18n}\n            operations={submissionsOperations}\n          />\n        </TabPanel>\n        <TabPanel value={2}>\n          <FormPreview form={form as FormType} i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={3}>\n          <ActionsTable\n            className={\"border-top-0\"}\n            availableActions={availableActions}\n            data={actions}\n            operations={actionsOperations as any}\n            i18n={i18n}\n          />\n        </TabPanel>\n        <TabPanel value={4} className='pt-3'>\n          <FormAccess form={form as FormType} roles={roles} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={5} className='pt-3'>\n          <FormExport i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={6} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormSettings form={form as FormType} options={{}} />\n        </TabPanel>\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"names":["useSubmissionsOperations","permissionsResolver","useActionsOperations","FormViews","form","roles","availableActions","actions","submissions","i18n","f","Tabs","getComponent","TabList","Tab","TabsBody","TabPanel","submissionsOperations","actionsOperations","jsxs","jsx","FormEdit","SubmissionsTable","FormPreview","ActionsTable","FormAccess","FormExport","FormSettings"],"mappings":"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"}

package/dist/registries/components.d.ts

@@ -0,0 +1,3 @@
+export declare const components: Map<string, unknown>;
+export declare function registerComponent(type: string, component: unknown): void;
+export declare function getComponent<Cmp>(type: string | string[]): Cmp;

package/dist/registries/components.js

@@ -0,0 +1,19 @@
+const t = /* @__PURE__ */ new Map();
+function e(n, o) {
+  t.set(n, o);
+}
+function s(n) {
+  if (Array.isArray(n)) {
+    for (const r of n)
+      if (t.has(r))
+        return t.get(r);
+  }
+  const o = t.get(n);
+  return o || console.warn(`Missing component for ${n}`), o;
+}
+export {
+  t as components,
+  s as getComponent,
+  e as registerComponent
+};
+//# sourceMappingURL=components.js.map

package/dist/registries/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../../src/registries/components.ts"],"sourcesContent":["export const components = new Map<string, unknown>();\n\nexport function registerComponent(type: string, component: unknown) {\n  components.set(type, component);\n}\n\nexport function getComponent<Cmp>(type: string | string[]): Cmp {\n  if (Array.isArray(type)) {\n    for (const t of type) {\n      if (components.has(t)) {\n        return components.get(t) as unknown as Cmp;\n      }\n    }\n  }\n\n  const result = components.get(type as string) as unknown as Cmp;\n\n  if (!result) {\n    console.warn(`Missing component for ${type}`);\n  }\n\n  return result;\n}\n"],"names":["components","registerComponent","type","component","getComponent","t","result"],"mappings":"AAAa,MAAAA,wBAAiB,IAAqB;AAEnC,SAAAC,EAAkBC,GAAcC,GAAoB;AACvD,EAAAH,EAAA,IAAIE,GAAMC,CAAS;AAChC;AAEO,SAASC,EAAkBF,GAA8B;AAC1D,MAAA,MAAM,QAAQA,CAAI;AACpB,eAAWG,KAAKH;AACV,UAAAF,EAAW,IAAIK,CAAC;AACX,eAAAL,EAAW,IAAIK,CAAC;AAAA;AAKvB,QAAAC,IAASN,EAAW,IAAIE,CAAc;AAE5C,SAAKI,KACK,QAAA,KAAK,yBAAyBJ,CAAI,EAAE,GAGvCI;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,33 +26,35 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "eventemitter2": "^6.4.3",
-    "prop-types": "15.8.1"
+    "use-debounce": "^10.0.4"
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",
+    "@tanstack/react-table": ">=8.20.6",
     "formiojs": ">=4.0.0",
     "lodash": ">=4.17.20",
     "moment": ">=2.30.1",
-    "prop-types": ">=15.7.2",
     "react": ">=16.14.0",
     "react-dnd": ">=16.0.1",
     "react-dnd-html5-backend": ">=16.0.1",
     "react-dom": ">=16.14.0",
+    "react-select": ">=5.9.0",
     "react-table": ">=7.6.3",
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind-formio": "3.0.0-alpha.1",
-    "@tsed/typescript": "3.0.0-alpha.1",
+    "@tanstack/react-table": ">=8.20.6",
+    "@tsed/tailwind-formio": "3.0.0-alpha.11",
+    "@tsed/typescript": "3.0.0-alpha.11",
     "microbundle": "0.13.0",
     "vite": "5.4.11",
     "vitest": "2.1.8"
   },
-  "repository": "https://github.com/TypedProject/tsed-formio",
+  "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio/tree/master/packages/react-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/react-formio",
   "author": "Romain Lenzotti",
   "publishConfig": {
     "tag": "alpha"

package/readme.md

@@ -37,24 +37,24 @@ See our [storybook](https://formio.tsed.io/?path=/docs/getting-started--docs) to
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](https://formio.tsed.io/?path=story/reactformio-actionstable--sandbox),
-- [FormAccess](https://formio.tsed.io/?path=story/reactformio-formaccess--sandbox),
-- [FormAction](https://formio.tsed.io/?path=story/reactformio-formaction--sandbox),
-- [Form](https://formio.tsed.io/?path=docs/documentation-form--docs),
-- [FormBuilder](https://formio.tsed.io/?path=docs/documentation-formbuilder--docs),
-- [FormEdit](https://formio.tsed.io/?path=docs/documentation-formedit--docs),
-- [FormsTable](https://formio.tsed.io/?path=docs/documentation-formstable--docs),
-- [InputTags](https://formio.tsed.io/?path=story/reactformio-inputtags--sandbox),
-- [InputText](https://formio.tsed.io/?path=story/reactformio-inputtext--sandbox),
-- [Pagination](https://formio.tsed.io/?path=story/reactformio-pagination--sandbox),
-- [Select](https://formio.tsed.io/?path=/story/reactformio-select--sandbox),
-- [SubmissionsTable](https://formio.tsed.io/?path=/docs/documentation-submissionstable--docs).
-- [Table](https://formio.tsed.io/?path=/story/reactformio-table--sandbox),
+- ActionsTable,
+- FormAccess,
+- FormAction,
+- Form,
+- FormBuilder,
+- FormEdit,
+- FormsTable,
+- InputTags,
+- InputText,
+- Pagination,
+- Select,
+- SubmissionsTable.
+- Table,
 - Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
 - TypeScript support.
 - Tailwind support.
 
-## Migrate from v1
+## Migrate to v2
 
 If you use redux actions from v1, you have to install `@tsed/redux-formio-stores` and remplace your imports:
 
@@ -63,6 +63,19 @@ If you use redux actions from v1, you have to install `@tsed/redux-formio-stores
 + import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";
 ```
 
+## Migrate to v3
+
+- `@tsed/react-formio` is now build only for ESM environment.
+- `@tsed/react-formio` use tree-shaking to reduce the bundle size, you have to import only what you need from the library.
+- `@tsed/react-formio` drop the support of TailwindCSS v2.
+
+Example:
+
+```diff
+- import { Form } from "@tsed/react-formio";
++ import { Form } from "@tsed/react-formio/organisms/form/Form";
+```
+
 ## Install
 
 `@tsed/react-formio` can be used on the server, or bundled for the client using an

package/src/atoms/icon/Icon.stories.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Template from "@tsed/tailwind-formio";
+
+import { Icon } from "./Icon";
+
+/**
+ * Icon component to display icons based on [BxIcons](https://boxicons.com/).
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import {Icon} from "@tsed/react-formio/atoms/icon/Icon";
+ * ```
+ *
+ * ## Override Icon
+ *
+ * This component is registered with the name `Icon` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("Icon", MyIconComponent);
+ * ```
+ */
+export default {
+  title: "Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      control: "text"
+    }
+  },
+  parameters: {
+    children: "Text",
+    variant: "primary"
+  }
+} satisfies Meta<typeof Icon>;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Usage: Story = {
+  args: {
+    name: "save"
+  }
+};
+
+export const Size: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm", "text-large", "text-xl", "text-3xl", "text-8xl"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Colors: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm text-red-600", "text-large text-primary", "text-xl text-secondary", "text-3xl text-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Rounded: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm bg-red-600", "text-large bg-primary", "text-xl bg-secondary", "text-3xl bg-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className + " rounded-full text-white p-3"} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+/**
+ * Formio needs theses icons to be displayed in the form builder and other places.
+ */
+export const PresetsForFormio: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {Object.entries(Template.templates.tailwind.ICONS).map(([icon]) => (
+          <div key={icon} className={"flex gap-3 flex-wrap"}>
+            <div
+              className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
+              style={{
+                width: "100px",
+                height: "100px"
+              }}
+            >
+              <div>
+                <Icon name={icon} />
+              </div>
+              <span className='text-sm'>{icon}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};

package/src/atoms/icon/Icon.tsx

@@ -0,0 +1,16 @@
+import cx from "classnames";
+import type { HTMLAttributes } from "react";
+
+import { registerComponent } from "../../registries/components";
+import { iconClass } from "../../utils/iconClass";
+
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+  iconset?: string;
+  name: string;
+}
+
+export function Icon({ iconset, name, className, ...props }: IconProps) {
+  return <i {...props} className={cx(iconClass(iconset, name), className)} />;
+}
+
+registerComponent("Icon", Icon);

package/src/hooks/keyboard.constants.ts

@@ -0,0 +1,40 @@
+export const enum CODE {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  SPACE = "Space",
+  END = "End",
+  HOME = "Home"
+}
+
+export const enum KEY {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  END = "End",
+  HOME = "Home",
+  SPACE = " ",
+  /**
+   * @deprecated
+   * Used by old browers, see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
+   */
+  SPACEBAR = "Spacebar"
+}
+
+export const enum KEY_CODE {
+  ENTER = 13,
+  ESCAPE = 27,
+  ARROW_LEFT = 37,
+  ARROW_UP = 38,
+  ARROW_RIGHT = 39,
+  ARROW_DOWN = 40,
+  SPACE = 32,
+  END = 35,
+  HOME = 36
+}

package/src/hooks/useKeyboardControls.spec.tsx

@@ -0,0 +1,208 @@
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { useKeyboardControls } from "./useKeyboardControls";
+
+describe("useKeyboardControls()", () => {
+  const activate = vi.fn();
+  const start = vi.fn();
+  const end = vi.fn();
+  const up = vi.fn();
+  const down = vi.fn();
+  const left = vi.fn();
+  const right = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  const Test = () => {
+    const handle = useKeyboardControls({ activate, start, end, up, down, left, right });
+
+    return (
+      <div tabIndex={0} role='button' onKeyDown={handle}>
+        Test
+      </div>
+    );
+  };
+
+  describe("on Enter", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Enter]{Enter}");
+
+      expect(activate).toHaveBeenCalledTimes(2);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Spacebar", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Space]{ }{Spacebar}");
+
+      expect(activate).toHaveBeenCalledTimes(3);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Home", () => {
+    it('call the "start" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Home]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).toHaveBeenCalledTimes(1);
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on End", () => {
+    it('call the "end" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[End]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).toHaveBeenCalledTimes(1);
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Up", () => {
+    it('call the "up" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).toHaveBeenCalledTimes(1);
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Down", () => {
+    it('call the "down" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowDown]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).toHaveBeenCalledTimes(1);
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Left", () => {
+    it('call the "left" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowLeft]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).toHaveBeenCalledTimes(1);
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Right", () => {
+    it('call the "right" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowRight]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("without any callback", () => {
+    it("does nothing", async () => {
+      const Test = () => {
+        const handle = useKeyboardControls({ activate });
+
+        return (
+          <div tabIndex={0} role='button' onKeyDown={handle}>
+            Test
+          </div>
+        );
+      };
+
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp][ArrowUp][ArrowDown][ArrowDown][ArrowLeft][ArrowRight][ArrowLeft][ArrowRight]{b}{a}[Enter]");
+
+      expect(activate).toHaveBeenCalledTimes(1);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalledTimes(1);
+    });
+  });
+});