{"id":20804408,"url":"https://github.com/sequencemedia/pentonville","last_synced_at":"2025-10-25T16:03:01.319Z","repository":{"id":23171705,"uuid":"98339702","full_name":"sequencemedia/pentonville","owner":"sequencemedia","description":"A React component for capturing tab and managing focus events","archived":false,"fork":false,"pushed_at":"2024-05-23T04:21:03.000Z","size":3837,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T05:29:53.699Z","etag":null,"topics":["boundary","capture","component","focus","react","tab"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sequencemedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-25T18:52:57.000Z","updated_at":"2024-05-23T05:30:00.509Z","dependencies_parsed_at":"2024-05-21T04:52:56.188Z","dependency_job_id":null,"html_url":"https://github.com/sequencemedia/pentonville","commit_stats":{"total_commits":888,"total_committers":5,"mean_commits":177.6,"dds":"0.059684684684684686","last_synced_commit":"17415b8adc524ce015511d945d026b32afa67f21"},"previous_names":[],"tags_count":138,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Fpentonville","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Fpentonville/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Fpentonville/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Fpentonville/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sequencemedia","download_url":"https://codeload.github.com/sequencemedia/pentonville/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225078670,"owners_count":17417461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boundary","capture","component","focus","react","tab"],"created_at":"2024-11-17T19:09:15.738Z","updated_at":"2025-10-25T16:02:56.288Z","avatar_url":"https://github.com/sequencemedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pentonville\n\nA `React` component for capturing tab and managing focus events.\n\n```JSX\n\u003cPentonville\u003e\n  \u003cform\u003e\n    \u003cinput name='one' /\u003e\n    \u003cinput name='two' /\u003e\n  \u003c/form\u003e\n\u003c/Pentonville\u003e\n```\n\nOnce focus enters _Pentonville_ it cannot leave.\n\n## On tab flow and focus\n\nEvery `\u003cform /\u003e` input element has an implicit tab index which enables them to accept focus, and be tabbed between, from one to another, in the order they appear in the document. The value of the implicit tab index is `0`.\n\nSome other `HTML` elements can be made to accept focus with an explicit tab index of the same value.\n\n```HTML\n\u003cp tabindex=\"0\"\u003e\n  This paragraph can accept focus.\n\u003c/p\u003e\n```\n\nIn `React` the attribute is in camel case but is otherwise the same.\n\n```JSX\n\u003cp tabIndex='0'\u003e\n  This paragraph can accept focus.\n\u003c/p\u003e\n```\n\n(You didn't need a nearly identical second example, but there it is.)\n\nAn element can also be given an explicit negative tab index of `-1` (to remove it from the tab flow), or an explicit positive tab index of `1` or more (to change its position in the tab flow).\n\nPositive tab indexes are tabbed to in sequence, from the lowest to the highest value, regardless of their order in the document. After reaching the highest value, flow returns to the elements with a zero index, whether implicit and explicit, such that they are tabbed to in sequence, according to their order in the document.\n\n## Introducing _Pentonville_\n\nSometimes it is desirable to prevent tab flow and focus from moving beyond the boundary of a set of `HTML` elements. _Pentonville_ is that boundary: once focus has entered, it won't escape.\n\nTab flow is maintained by moving focus through the order of each element's tab index, from the first to the last, when tab flow is returned to the first element again.\n\nFocus can be put on any element in the sequence, in which case it will proceed according to the tab index. In other words: focus can be put onto an element with a tab index value of `3` and have the next element in the tab flow be the element with a tab index of `4`, then `5` and so on, until the positive tab index values have been exhausted and flow proceeds through each element with a tab index of `0`, then onto `1` and `2` and back to `3` again.\n\nFocus cannot be put onto any other element. _Pentonville_ won't permit it. Focus will be maintained on whichever element within _Pentonville_ currently has it.\n\n## Demonstrating _Pentonville_\n\n[Example `Storybooks` are available on GitHub](https://github.com/sequencemedia/pentonville).\n\nClone the repository, then:\n\n```bash\nnpm install\nnpm run storybook\n```\n\nAnd with your preferred browser visit `http://localhost:6006`.\n\n(The `Storybooks` are not meant to be visually pleasing: they are examples only of the component's behaviour.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Fpentonville","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsequencemedia%2Fpentonville","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Fpentonville/lists"}