bestax-mcp 1.14.7 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/catalog.json +62 -50
- package/data/components/Buttons.json +150 -3
- package/data/components/Dropdown.json +3 -3
- package/data/components/LinkButton.json +2 -1
- package/data/components/SegmentedControl.json +272 -0
- package/data/components/ToggleButton.json +22 -299
- package/data/components/Tooltip.json +9 -9
- package/data/skills/bestax-custom-component/SKILL.md +13 -3
- package/data/skills/bestax-custom-component/references/component-catalog.md +2 -1
- package/data/skills/bestax-layout-scaffold/SKILL.md +8 -2
- package/data/skills/bestax-migrate/references/bloomer/prop-map.md +4 -3
- package/data/skills/bestax-migrate/references/rbx/prop-map.md +4 -3
- package/data/skills/bestax-migrate/references/react-bulma-components/unmappables.md +5 -4
- package/data/skills/bestax-theming/references/themeable-components.md +1 -0
- package/data/skills.json +5 -5
- package/dist/data.d.ts +6 -0
- package/dist/data.d.ts.map +1 -1
- package/dist/format.d.ts +11 -0
- package/dist/format.d.ts.map +1 -1
- package/dist/format.js +57 -1
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +2 -5
- package/package.json +2 -2
package/data/catalog.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"schemaVersion": 2,
|
|
3
3
|
"generatedFrom": {
|
|
4
4
|
"package": "@allxsmith/bestax-bulma",
|
|
5
|
-
"version": "5.
|
|
5
|
+
"version": "5.32.0"
|
|
6
6
|
},
|
|
7
7
|
"docsBase": "https://bestax.io/docs",
|
|
8
8
|
"categories": [
|
|
@@ -69,6 +69,7 @@
|
|
|
69
69
|
"Panel",
|
|
70
70
|
"Popover",
|
|
71
71
|
"Reveal",
|
|
72
|
+
"SegmentedControl",
|
|
72
73
|
"Sidebar",
|
|
73
74
|
"Steps",
|
|
74
75
|
"Tabs",
|
|
@@ -226,7 +227,7 @@
|
|
|
226
227
|
"slug": "elements/buttons",
|
|
227
228
|
"import": "import { Buttons } from '@allxsmith/bestax-bulma';",
|
|
228
229
|
"compound": true,
|
|
229
|
-
"propCount":
|
|
230
|
+
"propCount": 59,
|
|
230
231
|
"exampleCount": 8
|
|
231
232
|
},
|
|
232
233
|
{
|
|
@@ -900,6 +901,17 @@
|
|
|
900
901
|
"propCount": 6,
|
|
901
902
|
"exampleCount": 4
|
|
902
903
|
},
|
|
904
|
+
{
|
|
905
|
+
"name": "SegmentedControl",
|
|
906
|
+
"kind": "component",
|
|
907
|
+
"category": "components",
|
|
908
|
+
"purpose": "The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.",
|
|
909
|
+
"slug": "components/segmentedcontrol",
|
|
910
|
+
"import": "import { SegmentedControl } from '@allxsmith/bestax-bulma';",
|
|
911
|
+
"compound": true,
|
|
912
|
+
"propCount": 16,
|
|
913
|
+
"exampleCount": 11
|
|
914
|
+
},
|
|
903
915
|
{
|
|
904
916
|
"name": "Select",
|
|
905
917
|
"kind": "component",
|
|
@@ -1118,7 +1130,7 @@
|
|
|
1118
1130
|
"import": "import { ToggleButton } from '@allxsmith/bestax-bulma';",
|
|
1119
1131
|
"compound": false,
|
|
1120
1132
|
"propCount": 14,
|
|
1121
|
-
"exampleCount":
|
|
1133
|
+
"exampleCount": 12
|
|
1122
1134
|
},
|
|
1123
1135
|
{
|
|
1124
1136
|
"name": "Tooltip",
|
|
@@ -1260,52 +1272,52 @@
|
|
|
1260
1272
|
"--bulma-breadcrumb-item-padding-horizontal": ["Breadcrumb"],
|
|
1261
1273
|
"--bulma-breadcrumb-item-padding-vertical": ["Breadcrumb"],
|
|
1262
1274
|
"--bulma-breadcrumb-item-separator-color": ["Breadcrumb"],
|
|
1263
|
-
"--bulma-button-active-background-l-delta": ["Button"
|
|
1264
|
-
"--bulma-button-active-border-color": ["Button"
|
|
1265
|
-
"--bulma-button-active-border-l-delta": ["Button"
|
|
1266
|
-
"--bulma-button-active-color": ["Button"
|
|
1267
|
-
"--bulma-button-background-l": ["Button"
|
|
1268
|
-
"--bulma-button-background-l-delta": ["Button"
|
|
1269
|
-
"--bulma-button-border-color": ["Button"
|
|
1270
|
-
"--bulma-button-border-l": ["Button"
|
|
1271
|
-
"--bulma-button-border-l-delta": ["Button"
|
|
1272
|
-
"--bulma-button-border-style": ["Button"
|
|
1273
|
-
"--bulma-button-border-width": ["Button"
|
|
1274
|
-
"--bulma-button-color-l": ["Button"
|
|
1275
|
-
"--bulma-button-disabled-background-color": ["Button"
|
|
1276
|
-
"--bulma-button-disabled-border-color": ["Button"
|
|
1277
|
-
"--bulma-button-disabled-opacity": ["Button"
|
|
1278
|
-
"--bulma-button-disabled-shadow": ["Button"
|
|
1279
|
-
"--bulma-button-family": ["Button"
|
|
1280
|
-
"--bulma-button-focus-border-color": ["Button"
|
|
1281
|
-
"--bulma-button-focus-border-l-delta": ["Button"
|
|
1282
|
-
"--bulma-button-focus-box-shadow-color": ["Button"
|
|
1283
|
-
"--bulma-button-focus-box-shadow-size": ["Button"
|
|
1284
|
-
"--bulma-button-ghost-background": ["Button"
|
|
1285
|
-
"--bulma-button-ghost-border-color": ["Button"
|
|
1286
|
-
"--bulma-button-ghost-color": ["Button"
|
|
1287
|
-
"--bulma-button-ghost-decoration": ["Button"
|
|
1288
|
-
"--bulma-button-ghost-hover-color": ["Button"
|
|
1289
|
-
"--bulma-button-ghost-hover-decoration": ["Button"
|
|
1290
|
-
"--bulma-button-h": ["Button"
|
|
1291
|
-
"--bulma-button-hover-background-l-delta": ["Button"
|
|
1292
|
-
"--bulma-button-hover-border-l-delta": ["Button"
|
|
1293
|
-
"--bulma-button-l": ["Button"
|
|
1294
|
-
"--bulma-button-outer-shadow-a": ["Button"
|
|
1295
|
-
"--bulma-button-outer-shadow-h": ["Button"
|
|
1296
|
-
"--bulma-button-outer-shadow-l": ["Button"
|
|
1297
|
-
"--bulma-button-outer-shadow-s": ["Button"
|
|
1298
|
-
"--bulma-button-padding-horizontal": ["Button"
|
|
1299
|
-
"--bulma-button-padding-vertical": ["Button"
|
|
1300
|
-
"--bulma-button-s": ["Button"
|
|
1301
|
-
"--bulma-button-static-background-color": ["Button"
|
|
1302
|
-
"--bulma-button-static-border-color": ["Button"
|
|
1303
|
-
"--bulma-button-static-color": ["Button"
|
|
1304
|
-
"--bulma-button-text-color": ["Button"
|
|
1305
|
-
"--bulma-button-text-decoration": ["Button"
|
|
1306
|
-
"--bulma-button-text-hover-background-color": ["Button"
|
|
1307
|
-
"--bulma-button-text-hover-color": ["Button"
|
|
1308
|
-
"--bulma-button-weight": ["Button"
|
|
1275
|
+
"--bulma-button-active-background-l-delta": ["Button"],
|
|
1276
|
+
"--bulma-button-active-border-color": ["Button"],
|
|
1277
|
+
"--bulma-button-active-border-l-delta": ["Button"],
|
|
1278
|
+
"--bulma-button-active-color": ["Button"],
|
|
1279
|
+
"--bulma-button-background-l": ["Button"],
|
|
1280
|
+
"--bulma-button-background-l-delta": ["Button"],
|
|
1281
|
+
"--bulma-button-border-color": ["Button"],
|
|
1282
|
+
"--bulma-button-border-l": ["Button"],
|
|
1283
|
+
"--bulma-button-border-l-delta": ["Button"],
|
|
1284
|
+
"--bulma-button-border-style": ["Button"],
|
|
1285
|
+
"--bulma-button-border-width": ["Button"],
|
|
1286
|
+
"--bulma-button-color-l": ["Button"],
|
|
1287
|
+
"--bulma-button-disabled-background-color": ["Button"],
|
|
1288
|
+
"--bulma-button-disabled-border-color": ["Button"],
|
|
1289
|
+
"--bulma-button-disabled-opacity": ["Button"],
|
|
1290
|
+
"--bulma-button-disabled-shadow": ["Button"],
|
|
1291
|
+
"--bulma-button-family": ["Button"],
|
|
1292
|
+
"--bulma-button-focus-border-color": ["Button"],
|
|
1293
|
+
"--bulma-button-focus-border-l-delta": ["Button"],
|
|
1294
|
+
"--bulma-button-focus-box-shadow-color": ["Button"],
|
|
1295
|
+
"--bulma-button-focus-box-shadow-size": ["Button"],
|
|
1296
|
+
"--bulma-button-ghost-background": ["Button"],
|
|
1297
|
+
"--bulma-button-ghost-border-color": ["Button"],
|
|
1298
|
+
"--bulma-button-ghost-color": ["Button"],
|
|
1299
|
+
"--bulma-button-ghost-decoration": ["Button"],
|
|
1300
|
+
"--bulma-button-ghost-hover-color": ["Button"],
|
|
1301
|
+
"--bulma-button-ghost-hover-decoration": ["Button"],
|
|
1302
|
+
"--bulma-button-h": ["Button"],
|
|
1303
|
+
"--bulma-button-hover-background-l-delta": ["Button"],
|
|
1304
|
+
"--bulma-button-hover-border-l-delta": ["Button"],
|
|
1305
|
+
"--bulma-button-l": ["Button"],
|
|
1306
|
+
"--bulma-button-outer-shadow-a": ["Button"],
|
|
1307
|
+
"--bulma-button-outer-shadow-h": ["Button"],
|
|
1308
|
+
"--bulma-button-outer-shadow-l": ["Button"],
|
|
1309
|
+
"--bulma-button-outer-shadow-s": ["Button"],
|
|
1310
|
+
"--bulma-button-padding-horizontal": ["Button"],
|
|
1311
|
+
"--bulma-button-padding-vertical": ["Button"],
|
|
1312
|
+
"--bulma-button-s": ["Button"],
|
|
1313
|
+
"--bulma-button-static-background-color": ["Button"],
|
|
1314
|
+
"--bulma-button-static-border-color": ["Button"],
|
|
1315
|
+
"--bulma-button-static-color": ["Button"],
|
|
1316
|
+
"--bulma-button-text-color": ["Button"],
|
|
1317
|
+
"--bulma-button-text-decoration": ["Button"],
|
|
1318
|
+
"--bulma-button-text-hover-background-color": ["Button"],
|
|
1319
|
+
"--bulma-button-text-hover-color": ["Button"],
|
|
1320
|
+
"--bulma-button-weight": ["Button"],
|
|
1309
1321
|
"--bulma-card-background-color": ["Card"],
|
|
1310
1322
|
"--bulma-card-color": ["Card"],
|
|
1311
1323
|
"--bulma-card-content-background-color": ["Card"],
|
|
@@ -1912,7 +1924,7 @@
|
|
|
1912
1924
|
"--bulma-loading-cancel-hover-color": ["Loading"],
|
|
1913
1925
|
"--bulma-loading-cancel-radius": ["Loading"],
|
|
1914
1926
|
"--bulma-loading-cancel-size": ["Loading"],
|
|
1915
|
-
"--bulma-loading-color": ["Button"
|
|
1927
|
+
"--bulma-loading-color": ["Button"],
|
|
1916
1928
|
"--bulma-loading-content-gap": ["Loading"],
|
|
1917
1929
|
"--bulma-loading-icon-border-width": ["Loading"],
|
|
1918
1930
|
"--bulma-loading-icon-border-width-large": ["Loading"],
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"title": "Compound (dot-notation) usage",
|
|
38
|
-
"code": "<Buttons>\n
|
|
38
|
+
"code": "<>\n <Buttons>\n <Buttons.Button color=\"primary\">Save</Buttons.Button>\n <Buttons.Button>Cancel</Buttons.Button>\n <Buttons.LinkButton>Learn more</Buttons.LinkButton>\n </Buttons>\n <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n <Buttons.ToggleButton defaultPressed>Bold</Buttons.ToggleButton>\n <Buttons.ToggleButton>Italic</Buttons.ToggleButton>\n <Buttons.ToggleButton>Underline</Buttons.ToggleButton>\n </Buttons>\n</>"
|
|
39
39
|
}
|
|
40
40
|
],
|
|
41
|
-
"accessibility": "- Grouping buttons in a `<div class=\"buttons\">` has no negative impact on accessibility.\n- Ensure each `Button` has a clear label (text or `aria-label`).\n- For a set of toggles that each turn on and off on their own, use [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton) in `Buttons hasAddons`, and give the `Buttons` `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group, so use [`Radios`](https://bestax.io/docs/api/form/radios)
|
|
42
|
-
"related": ["Button", "ToggleButton", "useBulmaClasses"],
|
|
41
|
+
"accessibility": "- Grouping buttons in a `<div class=\"buttons\">` has no negative impact on accessibility.\n- Ensure each `Button` has a clear label (text or `aria-label`).\n- For a set of toggles that each turn on and off on their own, use [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton) in `Buttons hasAddons`, and give the `Buttons` `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group, so use [`SegmentedControl`](https://bestax.io/docs/api/components/segmentedcontrol) for it, which draws the same `has-addons` row, or [`Radios`](https://bestax.io/docs/api/form/radios) when the choice is sent with a form.\n\n:::tip\nYou can use all Bulma helper props (spacing, color, alignment) with `Buttons` for even more control.\n:::",
|
|
42
|
+
"related": ["Button", "SegmentedControl", "ToggleButton", "useBulmaClasses"],
|
|
43
43
|
"storybook": "https://bestax.io/storybook/?path=/story/elements-button--default",
|
|
44
44
|
"summary": "The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.",
|
|
45
45
|
"import": "import { Buttons } from '@allxsmith/bestax-bulma';",
|
|
@@ -508,6 +508,153 @@
|
|
|
508
508
|
],
|
|
509
509
|
"catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
|
|
510
510
|
"types": []
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"path": "Buttons.ToggleButton",
|
|
514
|
+
"summary": "The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`. It's always a `<button type=\"button\">`, so it never submits a form and carries no form value: a setting saved with a form is a `Checkbox` or a `Switch`. A set of toggles that each turn on and off on their own goes in `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group rather than a row of these: use `SegmentedControl`, or `Radios` for a choice that's sent with a form.",
|
|
515
|
+
"component": "ToggleButton",
|
|
516
|
+
"props": [
|
|
517
|
+
{
|
|
518
|
+
"name": "pressed",
|
|
519
|
+
"type": "boolean",
|
|
520
|
+
"default": null,
|
|
521
|
+
"description": "Whether it's pressed, when you hold the state. Setting it makes the toggle controlled: a click only calls `onPressedChange`, and nothing changes until you pass the new value. Pick this or `defaultPressed` for the button's lifetime.",
|
|
522
|
+
"required": false,
|
|
523
|
+
"inherited": false,
|
|
524
|
+
"deprecated": false
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "defaultPressed",
|
|
528
|
+
"type": "boolean",
|
|
529
|
+
"default": "false",
|
|
530
|
+
"description": "Whether it starts pressed, when it holds its own state.",
|
|
531
|
+
"required": false,
|
|
532
|
+
"inherited": false,
|
|
533
|
+
"deprecated": false
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
"name": "onPressedChange",
|
|
537
|
+
"type": "(pressed: boolean) => void",
|
|
538
|
+
"default": null,
|
|
539
|
+
"description": "Called with the new state each time it's toggled, whether or not `pressed` is set. An `onClick` that calls `preventDefault()` stops the toggle, and this doesn't fire.",
|
|
540
|
+
"required": false,
|
|
541
|
+
"inherited": false,
|
|
542
|
+
"deprecated": false
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
"name": "color",
|
|
546
|
+
"type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
|
|
547
|
+
"default": "'link'",
|
|
548
|
+
"description": "The fill while it's pressed. Not pressed, it's a plain button, so the fill is the difference people see. `white`, `light`, `dark` and `black` aren't offered, since in one theme or the other each fills about as light or dark as a plain button already is. Of the rest, a pale one such as `warning` changes less than the default `link`.",
|
|
549
|
+
"required": false,
|
|
550
|
+
"inherited": false,
|
|
551
|
+
"deprecated": false
|
|
552
|
+
},
|
|
553
|
+
{
|
|
554
|
+
"name": "children",
|
|
555
|
+
"type": "React.ReactNode",
|
|
556
|
+
"default": null,
|
|
557
|
+
"description": "The label, which stays the same in both states: a screen reader announces whether it's pressed, so \"Mute\" stays \"Mute\". An icon can swap, but an icon-only toggle needs an `aria-label` that doesn't. A label that changes (\"Play\", then \"Pause\") belongs on a plain `Button`.",
|
|
558
|
+
"required": false,
|
|
559
|
+
"inherited": false,
|
|
560
|
+
"deprecated": false
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"name": "isLoading",
|
|
564
|
+
"type": "boolean",
|
|
565
|
+
"default": "false",
|
|
566
|
+
"description": "Shows Bulma's spinner in place of the label and holds the toggle where it is: a click, Enter or Space does nothing, so neither `onClick` nor `onPressedChange` fires, until it's cleared. Set it while a change is saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and stays focusable, so focus isn't lost mid-save. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with bestax's CSS loaded).",
|
|
567
|
+
"required": false,
|
|
568
|
+
"inherited": false,
|
|
569
|
+
"deprecated": false
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"name": "size",
|
|
573
|
+
"type": "'small' | 'normal' | 'medium' | 'large'",
|
|
574
|
+
"default": null,
|
|
575
|
+
"description": "Size of the button.",
|
|
576
|
+
"required": false,
|
|
577
|
+
"inherited": true,
|
|
578
|
+
"deprecated": false
|
|
579
|
+
},
|
|
580
|
+
{
|
|
581
|
+
"name": "isRounded",
|
|
582
|
+
"type": "boolean",
|
|
583
|
+
"default": "false",
|
|
584
|
+
"description": "Makes the button rounded.",
|
|
585
|
+
"required": false,
|
|
586
|
+
"inherited": true,
|
|
587
|
+
"deprecated": false
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
"name": "isFullwidth",
|
|
591
|
+
"type": "boolean",
|
|
592
|
+
"default": "false",
|
|
593
|
+
"description": "Makes the button full-width.",
|
|
594
|
+
"required": false,
|
|
595
|
+
"inherited": true,
|
|
596
|
+
"deprecated": false
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"name": "isFullWidth",
|
|
600
|
+
"type": "boolean",
|
|
601
|
+
"default": "false",
|
|
602
|
+
"description": "Makes the button full-width.",
|
|
603
|
+
"required": false,
|
|
604
|
+
"inherited": true,
|
|
605
|
+
"deprecated": true,
|
|
606
|
+
"deprecationNote": "Use `isFullwidth` instead — `isFullwidth` wins if both are set."
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
"name": "isFocused",
|
|
610
|
+
"type": "boolean",
|
|
611
|
+
"default": "false",
|
|
612
|
+
"description": "Applies focused styling (visual only).",
|
|
613
|
+
"required": false,
|
|
614
|
+
"inherited": true,
|
|
615
|
+
"deprecated": false
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "isHovered",
|
|
619
|
+
"type": "boolean",
|
|
620
|
+
"default": "false",
|
|
621
|
+
"description": "Applies hovered styling (visual only).",
|
|
622
|
+
"required": false,
|
|
623
|
+
"inherited": true,
|
|
624
|
+
"deprecated": false
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"name": "isDisabled",
|
|
628
|
+
"type": "boolean",
|
|
629
|
+
"default": "false",
|
|
630
|
+
"description": "Applies disabled styling.",
|
|
631
|
+
"required": false,
|
|
632
|
+
"inherited": true,
|
|
633
|
+
"deprecated": false
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"name": "className",
|
|
637
|
+
"type": "string",
|
|
638
|
+
"default": null,
|
|
639
|
+
"description": "Custom class name.",
|
|
640
|
+
"required": false,
|
|
641
|
+
"inherited": true,
|
|
642
|
+
"deprecated": false
|
|
643
|
+
}
|
|
644
|
+
],
|
|
645
|
+
"extraProps": [
|
|
646
|
+
{
|
|
647
|
+
"name": "ref",
|
|
648
|
+
"type": "React.Ref<HTMLButtonElement>",
|
|
649
|
+
"default": null,
|
|
650
|
+
"description": "Ref forwarded to the `<button>`.",
|
|
651
|
+
"required": false,
|
|
652
|
+
"inherited": false,
|
|
653
|
+
"deprecated": false
|
|
654
|
+
}
|
|
655
|
+
],
|
|
656
|
+
"catchAll": "All standard <button> attributes and Bulma helper props",
|
|
657
|
+
"types": []
|
|
511
658
|
}
|
|
512
659
|
],
|
|
513
660
|
"cssVars": []
|
|
@@ -42,17 +42,17 @@
|
|
|
42
42
|
"code": "<Dropdown label=\"Dropdown Menu\" active>\n <Dropdown.Item>First Item</Dropdown.Item>\n <Dropdown.Item>Second Item</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item>Third Item</Dropdown.Item>\n</Dropdown>"
|
|
43
43
|
}
|
|
44
44
|
],
|
|
45
|
-
"accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- The items are the only focusable things inside `role=\"menu\"`. A click between them, on a divider say, focuses the menu itself, so the arrow keys still reach the items from there.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n <kbd>Escape</kbd> closes an open menu.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n naturally.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n its own.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n `aria-disabled=\"true\"`) and dividers are skipped
|
|
45
|
+
"accessibility": "- The dropdown root is a `<div class=\"dropdown\">` with ARIA roles/attributes for menu and trigger.\n- The trigger button uses `aria-haspopup`, `aria-controls`, and `aria-expanded`.\n- Menu items are focusable and use `role=\"menuitem\"`. An item given `role=\"menuitemcheckbox\"` or `role=\"menuitemradio\"` stays in the arrow-key order.\n- The items are the only focusable things inside `role=\"menu\"`. A click between them, on a divider say, focuses the menu itself, so the arrow keys still reach the items from there.\n- `Dropdown.Item as=\"button\"` defaults to `type=\"button\"`, so a menu item inside a form doesn't\n submit it. Pass `type=\"submit\"` or `type=\"reset\"` and yours is used instead; any other value\n renders `type=\"button\"`.\n- Clicking outside closes the dropdown in most cases.\n\n`Dropdown` implements the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)\nout of the box:\n\n- On the trigger: <kbd>ArrowDown</kbd> or <kbd>Enter</kbd>/<kbd>Space</kbd> open the menu and\n focus the first item; <kbd>ArrowUp</kbd> opens the menu and focuses the last item;\n <kbd>Escape</kbd> closes an open menu. On the trigger of a menu that's already open,\n <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> focus the first/last item and\n <kbd>Enter</kbd>/<kbd>Space</kbd> close it.\n- Inside the menu: <kbd>ArrowDown</kbd>/<kbd>ArrowUp</kbd> move between items and wrap around;\n <kbd>Home</kbd>/<kbd>End</kbd> jump to the first/last item; <kbd>Escape</kbd> closes the menu\n and returns focus to the trigger; <kbd>Tab</kbd> closes the menu and lets focus continue\n naturally.\n- Typing a letter moves to the next item whose text starts with it, and typing it again cycles\n through the items that do. Letters typed in quick succession add up to one search, so\n <kbd>d</kbd> then <kbd>u</kbd> lands on \"Duplicate\" past \"Download\". Text hidden with\n `aria-hidden`, such as an icon's ligature name, doesn't count, and a new search starts each\n time the menu opens. Typing searches once focus is in the menu, where the trigger's keys\n above put it. A letter typed on the trigger itself does nothing.\n- On an item: <kbd>Enter</kbd> or <kbd>Space</kbd> activates it the way a click does, so its\n `onClick` runs and the menu closes unless `closeOnClick` is `false`. That includes the\n default anchor without an `href` and `as=\"div\"`, which the browser would not activate on\n its own. Holding the key down runs it once.\n- When running an item closes the menu, by click or by key, focus goes back to the trigger,\n as it does for <kbd>Escape</kbd>. An item whose `onClick` moves focus somewhere else keeps\n it there.\n- Disabled items (a `Dropdown.Item` rendered with a native `disabled` attribute or\n `aria-disabled=\"true\"`) and dividers are skipped by the arrow keys and by typing.\n- For a panel built around fields, [`Popover`](https://bestax.io/docs/api/components/popover) fits better: `role=\"menu\"` owns\n menu items, and the default `closeOnClick` shuts the menu on a click anywhere in it, a field\n included. Anything focusable you put in the menu anyway that isn't an item (a field, a\n button, a checkbox, a link without a menu-item role) keeps its own keys, so its arrows,\n <kbd>Home</kbd>, <kbd>End</kbd> and letters don't move to the items. A field needs\n `closeOnClick={false}`, or a click into it closes the menu. <kbd>Escape</kbd> and\n <kbd>Tab</kbd> still close the menu from any of them.",
|
|
46
46
|
"related": ["Button", "ContextMenu", "Popover", "useBulmaClasses"],
|
|
47
47
|
"storybook": "https://bestax.io/storybook/?path=/story/components-dropdown--default",
|
|
48
|
-
"summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",
|
|
48
|
+
"summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI. Down, Enter and Space on the trigger open the menu on its first enabled item, and Up opens it on its last. On the trigger of a menu that's already open, Down and Up move focus to its first and last item. In the menu, the arrow keys, Home and End move between the items, and Enter and Space run the focused one the way a click does. Typing a letter moves to the next item whose text starts with it, skipping disabled ones, and letters typed in quick succession add up to one search. Typing searches once focus is in the menu, so a letter typed on the trigger does nothing. Escape closes the menu and focuses the trigger, and Tab closes it and lets focus move on. Anything focusable in the menu that isn't an item, such as a field, keeps its own keys apart from Escape and Tab. For a panel built around fields, use `Popover`.",
|
|
49
49
|
"import": "import { Dropdown, Button, Field, Control, Span } from '@allxsmith/bestax-bulma';",
|
|
50
50
|
"sourceFile": "bulma-ui/src/components/Dropdown.tsx",
|
|
51
51
|
"rootClass": "dropdown",
|
|
52
52
|
"parts": [
|
|
53
53
|
{
|
|
54
54
|
"path": "Dropdown",
|
|
55
|
-
"summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.",
|
|
55
|
+
"summary": "The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI. Down, Enter and Space on the trigger open the menu on its first enabled item, and Up opens it on its last. On the trigger of a menu that's already open, Down and Up move focus to its first and last item. In the menu, the arrow keys, Home and End move between the items, and Enter and Space run the focused one the way a click does. Typing a letter moves to the next item whose text starts with it, skipping disabled ones, and letters typed in quick succession add up to one search. Typing searches once focus is in the menu, so a letter typed on the trigger does nothing. Escape closes the menu and focuses the trigger, and Tab closes it and lets focus move on. Anything focusable in the menu that isn't an item, such as a field, keeps its own keys apart from Escape and Tab. For a panel built around fields, use `Popover`.",
|
|
56
56
|
"component": null,
|
|
57
57
|
"props": [
|
|
58
58
|
{
|