1.0.610 • Published 4 months ago

pentonville v1.0.610

Weekly downloads
1
License
ISC
Repository
github
Last release
4 months ago

Pentonville

A React component for capturing tab and managing focus events.

<Pentonville>
  <form>
    <input name='one' />
    <input name='two' />
  </form>
</Pentonville>

Once focus enters Pentonville it cannot leave.

On tab flow and focus

Every <form /> 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.

Some other HTML elements can be made to accept focus with an explicit tab index of the same value.

<p tabindex="0">
  This paragraph can accept focus.
</p>

In React the attribute is in camel case but is otherwise the same.

<p tabIndex='0'>
  This paragraph can accept focus.
</p>

(You didn't need a nearly identical second example, but there it is.)

An 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).

Positive 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.

Introducing Pentonville

Sometimes 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.

Tab 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.

Focus 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.

Focus cannot be put onto any other element. Pentonville won't permit it. Focus will be maintained on whichever element within Pentonville currently has it.

Demonstrating Pentonville

Example Storybooks are available on GitHub.

Clone the repository, then:

npm install
npm run storybook

And with your preferred browser visit http://localhost:6006.

(The Storybooks are not meant to be visually pleasing: they are examples only of the component's behaviour.)

PentonvilleReacttabtabindexinputHTMLelementfocus
@infinitebrahmanuniverse/nolb-pen@everything-registry/sub-chunk-2425
1.0.610

4 months ago

1.0.609

4 months ago

1.0.606

6 months ago

1.0.605

6 months ago

1.0.608

5 months ago

1.0.607

5 months ago

1.0.598

8 months ago

1.0.597

9 months ago

1.0.599

8 months ago

1.0.602

7 months ago

1.0.601

7 months ago

1.0.604

6 months ago

1.0.603

6 months ago

1.0.600

7 months ago

1.0.596

9 months ago

1.0.595

9 months ago

1.0.569

11 months ago

1.0.568

11 months ago

1.0.567

11 months ago

1.0.583

10 months ago

1.0.582

10 months ago

1.0.585

10 months ago

1.0.584

10 months ago

1.0.581

10 months ago

1.0.580

10 months ago

1.0.587

10 months ago

1.0.586

10 months ago

1.0.589

10 months ago

1.0.588

10 months ago

1.0.572

11 months ago

1.0.571

11 months ago

1.0.574

11 months ago

1.0.573

11 months ago

1.0.570

11 months ago

1.0.579

10 months ago

1.0.576

10 months ago

1.0.575

10 months ago

1.0.578

10 months ago

1.0.577

10 months ago

1.0.594

9 months ago

1.0.593

10 months ago

1.0.590

10 months ago

1.0.592

10 months ago

1.0.591

10 months ago

1.0.541

12 months ago

1.0.540

12 months ago

1.0.547

11 months ago

1.0.546

12 months ago

1.0.549

11 months ago

1.0.548

11 months ago

1.0.543

12 months ago

1.0.542

12 months ago

1.0.545

12 months ago

1.0.544

12 months ago

1.0.539

12 months ago

1.0.530

1 year ago

1.0.536

12 months ago

1.0.535

12 months ago

1.0.538

12 months ago

1.0.537

12 months ago

1.0.532

1 year ago

1.0.531

1 year ago

1.0.534

12 months ago

1.0.533

1 year ago

1.0.529

1 year ago

1.0.528

1 year ago

1.0.561

11 months ago

1.0.560

11 months ago

1.0.563

11 months ago

1.0.562

11 months ago

1.0.565

11 months ago

1.0.564

11 months ago

1.0.566

11 months ago

1.0.550

11 months ago

1.0.552

11 months ago

1.0.551

11 months ago

1.0.558

11 months ago

1.0.557

11 months ago

1.0.559

11 months ago

1.0.554

11 months ago

1.0.553

11 months ago

1.0.556

11 months ago

1.0.555

11 months ago

1.0.525

1 year ago

1.0.524

1 year ago

1.0.527

1 year ago

1.0.526

1 year ago

1.0.521

1 year ago

1.0.520

1 year ago

1.0.523

1 year ago

1.0.522

1 year ago

1.0.519

1 year ago

1.0.518

1 year ago

1.0.517

1 year ago

1.0.516

1 year ago

1.0.514

1 year ago

1.0.515

1 year ago

1.0.513

1 year ago

1.0.512

1 year ago

1.0.511

1 year ago

1.0.510

1 year ago

1.0.509

1 year ago

1.0.508

1 year ago

1.0.507

1 year ago

1.0.506

1 year ago

1.0.505

1 year ago

1.0.504

1 year ago

1.0.503

1 year ago

1.0.502

1 year ago

1.0.501

1 year ago

1.0.500

1 year ago

1.0.499

1 year ago

1.0.498

1 year ago

1.0.497

1 year ago

1.0.496

1 year ago

1.0.495

1 year ago

1.0.494

2 years ago

1.0.493

2 years ago

1.0.492

2 years ago

1.0.491

2 years ago

1.0.490

2 years ago

1.0.484

2 years ago

1.0.483

2 years ago

1.0.486

2 years ago

1.0.485

2 years ago

1.0.480

2 years ago

1.0.482

2 years ago

1.0.481

2 years ago

1.0.488

2 years ago

1.0.487

2 years ago

1.0.489

2 years ago

1.0.477

2 years ago

1.0.476

2 years ago

1.0.479

2 years ago

1.0.478

2 years ago

1.0.473

2 years ago

1.0.472

2 years ago

1.0.475

2 years ago

1.0.474

2 years ago

1.0.471

2 years ago

1.0.470

2 years ago

1.0.440

2 years ago

1.0.442

2 years ago

1.0.441

2 years ago

1.0.448

2 years ago

1.0.447

2 years ago

1.0.449

2 years ago

1.0.444

2 years ago

1.0.443

2 years ago

1.0.446

2 years ago

1.0.445

2 years ago

1.0.431

2 years ago

1.0.437

2 years ago

1.0.436

2 years ago

1.0.439

2 years ago

1.0.438

2 years ago

1.0.433

2 years ago

1.0.432

2 years ago

1.0.435

2 years ago

1.0.434

2 years ago

1.0.462

2 years ago

1.0.461

2 years ago

1.0.464

2 years ago

1.0.463

2 years ago

1.0.460

2 years ago

1.0.469

2 years ago

1.0.466

2 years ago

1.0.465

2 years ago

1.0.468

2 years ago

1.0.467

2 years ago

1.0.451

2 years ago

1.0.450

2 years ago

1.0.453

2 years ago

1.0.452

2 years ago

1.0.459

2 years ago

1.0.458

2 years ago

1.0.455

2 years ago

1.0.454

2 years ago

1.0.457

2 years ago

1.0.456

2 years ago

1.0.420

2 years ago

1.0.426

2 years ago

1.0.425

2 years ago

1.0.428

2 years ago

1.0.427

2 years ago

1.0.422

2 years ago

1.0.421

2 years ago

1.0.424

2 years ago

1.0.423

2 years ago

1.0.419

2 years ago

1.0.418

2 years ago

1.0.415

2 years ago

1.0.414

2 years ago

1.0.417

2 years ago

1.0.416

2 years ago

1.0.411

2 years ago

1.0.413

2 years ago

1.0.412

2 years ago

1.0.407

2 years ago

1.0.430

2 years ago

1.0.429

2 years ago

1.0.404

2 years ago

1.0.403

2 years ago

1.0.406

2 years ago

1.0.405

2 years ago

1.0.400

2 years ago

1.0.402

2 years ago

1.0.401

2 years ago

1.0.396

2 years ago

1.0.395

2 years ago

1.0.398

2 years ago

1.0.397

2 years ago

1.0.394

2 years ago

1.0.393

2 years ago

1.0.399

2 years ago

1.0.327

3 years ago

1.0.326

3 years ago

1.0.329

3 years ago

1.0.328

3 years ago

1.0.323

3 years ago

1.0.325

3 years ago

1.0.324

3 years ago

1.0.385

2 years ago

1.0.384

2 years ago

1.0.387

2 years ago

1.0.386

2 years ago

1.0.381

2 years ago

1.0.380

2 years ago

1.0.383

2 years ago

1.0.382

2 years ago

1.0.389

2 years ago

1.0.388

2 years ago

1.0.374

2 years ago

1.0.373

2 years ago

1.0.376

2 years ago

1.0.375

2 years ago

1.0.370

2 years ago

1.0.372

2 years ago

1.0.371

2 years ago

1.0.378

2 years ago

1.0.377

2 years ago

1.0.379

2 years ago

1.0.392

2 years ago

1.0.391

2 years ago

1.0.390

2 years ago

1.0.341

2 years ago

1.0.340

2 years ago

1.0.343

2 years ago

1.0.342

2 years ago

1.0.349

2 years ago

1.0.348

2 years ago

1.0.345

2 years ago

1.0.344

2 years ago

1.0.347

2 years ago

1.0.346

2 years ago

1.0.330

2 years ago

1.0.332

2 years ago

1.0.331

2 years ago

1.0.338

2 years ago

1.0.337

2 years ago

1.0.339

2 years ago

1.0.334

2 years ago

1.0.333

2 years ago

1.0.336

2 years ago

1.0.335

2 years ago

1.0.363

2 years ago

1.0.362

2 years ago

1.0.365

2 years ago

1.0.364

2 years ago

1.0.361

2 years ago

1.0.360

2 years ago

1.0.367

2 years ago

1.0.366

2 years ago

1.0.369

2 years ago

1.0.368

2 years ago

1.0.352

2 years ago

1.0.351

2 years ago

1.0.354

2 years ago

1.0.353

2 years ago

1.0.350

2 years ago

1.0.359

2 years ago

1.0.356

2 years ago

1.0.355

2 years ago

1.0.358

2 years ago

1.0.357

2 years ago

1.0.305

3 years ago

1.0.304

3 years ago

1.0.307

3 years ago

1.0.306

3 years ago

1.0.301

3 years ago

1.0.300

3 years ago

1.0.303

3 years ago

1.0.302

3 years ago

1.0.321

3 years ago

1.0.320

3 years ago

1.0.322

3 years ago

1.0.319

3 years ago

1.0.310

3 years ago

1.0.316

3 years ago

1.0.315

3 years ago

1.0.318

3 years ago

1.0.317

3 years ago

1.0.312

3 years ago

1.0.311

3 years ago

1.0.314

3 years ago

1.0.313

3 years ago

1.0.309

3 years ago

1.0.308

3 years ago

1.0.297

3 years ago

1.0.296

3 years ago

1.0.299

3 years ago

1.0.298

3 years ago

1.0.293

3 years ago

1.0.292

3 years ago

1.0.295

3 years ago

1.0.294

3 years ago

1.0.291

3 years ago

1.0.290

3 years ago

1.0.286

3 years ago

1.0.285

3 years ago

1.0.288

3 years ago

1.0.287

3 years ago

1.0.282

3 years ago

1.0.281

3 years ago

1.0.284

3 years ago

1.0.283

3 years ago

1.0.289

3 years ago

1.0.280

3 years ago

1.0.275

3 years ago

1.0.274

3 years ago

1.0.277

3 years ago

1.0.276

3 years ago

1.0.273

3 years ago

1.0.272

3 years ago

1.0.279

3 years ago

1.0.278

3 years ago

1.0.264

3 years ago

1.0.263

3 years ago

1.0.266

3 years ago

1.0.265

3 years ago

1.0.260

3 years ago

1.0.262

3 years ago

1.0.261

3 years ago

1.0.268

3 years ago

1.0.267

3 years ago

1.0.269

3 years ago

1.0.253

3 years ago

1.0.252

3 years ago

1.0.255

3 years ago

1.0.254

3 years ago

1.0.251

3 years ago

1.0.250

3 years ago

1.0.257

3 years ago

1.0.256

3 years ago

1.0.259

3 years ago

1.0.258

3 years ago

1.0.271

3 years ago

1.0.270

3 years ago

1.0.242

3 years ago

1.0.241

3 years ago

1.0.244

3 years ago

1.0.243

3 years ago

1.0.240

3 years ago

1.0.249

3 years ago

1.0.246

3 years ago

1.0.245

3 years ago

1.0.248

3 years ago

1.0.247

3 years ago

1.0.239

3 years ago

1.0.238

3 years ago

1.0.237

3 years ago

1.0.200

3 years ago

1.0.206

3 years ago

1.0.205

3 years ago

1.0.208

3 years ago

1.0.207

3 years ago

1.0.202

3 years ago

1.0.201

3 years ago

1.0.204

3 years ago

1.0.203

3 years ago

1.0.189

3 years ago

1.0.198

3 years ago

1.0.197

3 years ago

1.0.199

3 years ago

1.0.194

3 years ago

1.0.193

3 years ago

1.0.196

3 years ago

1.0.195

3 years ago

1.0.190

3 years ago

1.0.192

3 years ago

1.0.191

3 years ago

1.0.220

3 years ago

1.0.222

3 years ago

1.0.221

3 years ago

1.0.228

3 years ago

1.0.227

3 years ago

1.0.229

3 years ago

1.0.224

3 years ago

1.0.223

3 years ago

1.0.226

3 years ago

1.0.225

3 years ago

1.0.211

3 years ago

1.0.210

3 years ago

1.0.217

3 years ago

1.0.216

3 years ago

1.0.219

3 years ago

1.0.218

3 years ago

1.0.213

3 years ago

1.0.212

3 years ago

1.0.215

3 years ago

1.0.214

3 years ago

1.0.209

3 years ago

1.0.231

3 years ago

1.0.230

3 years ago

1.0.233

3 years ago

1.0.232

3 years ago

1.0.235

3 years ago

1.0.234

3 years ago

1.0.236

3 years ago

1.0.187

3 years ago

1.0.186

3 years ago

1.0.188

3 years ago

1.0.183

3 years ago

1.0.182

3 years ago

1.0.185

3 years ago

1.0.184

3 years ago

1.0.149

3 years ago

1.0.148

3 years ago

1.0.165

3 years ago

1.0.164

3 years ago

1.0.167

3 years ago

1.0.166

3 years ago

1.0.161

3 years ago

1.0.160

3 years ago

1.0.163

3 years ago

1.0.162

3 years ago

1.0.169

3 years ago

1.0.168

3 years ago

1.0.154

3 years ago

1.0.153

3 years ago

1.0.156

3 years ago

1.0.155

3 years ago

1.0.150

3 years ago

1.0.152

3 years ago

1.0.151

3 years ago

1.0.158

3 years ago

1.0.157

3 years ago

1.0.159

3 years ago

1.0.181

3 years ago

1.0.180

3 years ago

1.0.176

3 years ago

1.0.175

3 years ago

1.0.178

3 years ago

1.0.177

3 years ago

1.0.172

3 years ago

1.0.171

3 years ago

1.0.174

3 years ago

1.0.173

3 years ago

1.0.179

3 years ago

1.0.170

3 years ago

1.0.143

3 years ago

1.0.145

3 years ago

1.0.144

3 years ago

1.0.147

3 years ago

1.0.146

3 years ago

1.0.142

3 years ago

1.0.141

3 years ago

1.0.140

3 years ago

1.0.132

3 years ago

1.0.131

3 years ago

1.0.134

3 years ago

1.0.133

3 years ago

1.0.130

3 years ago

1.0.139

3 years ago

1.0.136

3 years ago

1.0.135

3 years ago

1.0.138

3 years ago

1.0.137

3 years ago

1.0.77

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.74

4 years ago

1.0.79

4 years ago

1.0.78

4 years ago

1.0.101

4 years ago

1.0.100

4 years ago

1.0.107

4 years ago

1.0.106

4 years ago

1.0.109

4 years ago

1.0.108

4 years ago

1.0.103

4 years ago

1.0.102

4 years ago

1.0.105

4 years ago

1.0.104

4 years ago

1.0.121

3 years ago

1.0.120

3 years ago

1.0.123

3 years ago

1.0.122

3 years ago

1.0.129

3 years ago

1.0.128

3 years ago

1.0.125

3 years ago

1.0.124

3 years ago

1.0.127

3 years ago

1.0.126

3 years ago

1.0.80

4 years ago

1.0.84

4 years ago

1.0.83

4 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.88

4 years ago

1.0.87

4 years ago

1.0.86

4 years ago

1.0.85

4 years ago

1.0.89

4 years ago

1.0.110

4 years ago

1.0.112

4 years ago

1.0.111

4 years ago

1.0.118

3 years ago

1.0.117

3 years ago

1.0.119

3 years ago

1.0.114

4 years ago

1.0.113

4 years ago

1.0.116

3 years ago

1.0.115

3 years ago

1.0.91

4 years ago

1.0.90

4 years ago

1.0.95

4 years ago

1.0.94

4 years ago

1.0.93

4 years ago

1.0.92

4 years ago

1.0.99

4 years ago

1.0.98

4 years ago

1.0.96

4 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.69

4 years ago

1.0.68

4 years ago

1.0.67

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.71

4 years ago

1.0.70

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.49

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.39

4 years ago

1.0.40

4 years ago

1.0.38

4 years ago

1.0.33

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.19

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.4

6 years ago

1.0.3

7 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago