@workday/canvas-kit-docs 15.1.7 → 15.1.9
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/dist/es6/lib/docs.js +860 -8
- package/dist/es6/lib/specs.js +120 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/react/menu/Menu.mdx +2 -0
- package/dist/mdx/react/menu/examples/NestedSiblings.tsx +60 -0
- package/dist/mdx/styling/mdx/Stencils.mdx +19 -1
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -125297,6 +125297,60 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
125297
125297
|
}
|
|
125298
125298
|
}
|
|
125299
125299
|
},
|
|
125300
|
+
{
|
|
125301
|
+
"name": "isElementDisabled",
|
|
125302
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/isElementDisabled.ts",
|
|
125303
|
+
"description": "Checks whether an element is disabled, either via the native `disabled` DOM property (set, for\nexample, by `useListItemRegister` when an item's id is included in `state.nonInteractiveIds`) or\nvia the `aria-disabled=\"true\"` attribute (set by consumers directly on an item, e.g.\n`<Menu.Item aria-disabled>`).\n\nCollection items should use this check instead of testing `aria-disabled` alone so that items\ndisabled through either mechanism are consistently blocked from activating (click, Enter/Space,\nhover-intent, etc.).",
|
|
125304
|
+
"declarations": [
|
|
125305
|
+
{
|
|
125306
|
+
"name": "isElementDisabled",
|
|
125307
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/isElementDisabled.ts"
|
|
125308
|
+
}
|
|
125309
|
+
],
|
|
125310
|
+
"tags": {},
|
|
125311
|
+
"type": {
|
|
125312
|
+
"kind": "function",
|
|
125313
|
+
"parameters": [
|
|
125314
|
+
{
|
|
125315
|
+
"kind": "parameter",
|
|
125316
|
+
"name": "element",
|
|
125317
|
+
"type": {
|
|
125318
|
+
"kind": "union",
|
|
125319
|
+
"value": [
|
|
125320
|
+
{
|
|
125321
|
+
"kind": "external",
|
|
125322
|
+
"name": "Element",
|
|
125323
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
|
|
125324
|
+
},
|
|
125325
|
+
{
|
|
125326
|
+
"kind": "primitive",
|
|
125327
|
+
"value": "null"
|
|
125328
|
+
},
|
|
125329
|
+
{
|
|
125330
|
+
"kind": "primitive",
|
|
125331
|
+
"value": "undefined"
|
|
125332
|
+
}
|
|
125333
|
+
]
|
|
125334
|
+
},
|
|
125335
|
+
"required": false,
|
|
125336
|
+
"rest": false,
|
|
125337
|
+
"description": "",
|
|
125338
|
+
"declarations": [
|
|
125339
|
+
{
|
|
125340
|
+
"name": "element",
|
|
125341
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/isElementDisabled.ts"
|
|
125342
|
+
}
|
|
125343
|
+
],
|
|
125344
|
+
"tags": {}
|
|
125345
|
+
}
|
|
125346
|
+
],
|
|
125347
|
+
"members": [],
|
|
125348
|
+
"returnType": {
|
|
125349
|
+
"kind": "primitive",
|
|
125350
|
+
"value": "boolean"
|
|
125351
|
+
}
|
|
125352
|
+
}
|
|
125353
|
+
},
|
|
125300
125354
|
{
|
|
125301
125355
|
"name": "orientationKeyMap",
|
|
125302
125356
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/keyUtils.ts",
|
|
@@ -126374,6 +126428,710 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
126374
126428
|
}
|
|
126375
126429
|
}
|
|
126376
126430
|
},
|
|
126431
|
+
{
|
|
126432
|
+
"name": "listBoxContainerStencil",
|
|
126433
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
126434
|
+
"description": "",
|
|
126435
|
+
"declarations": [
|
|
126436
|
+
{
|
|
126437
|
+
"name": "listBoxContainerStencil",
|
|
126438
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
|
|
126439
|
+
}
|
|
126440
|
+
],
|
|
126441
|
+
"tags": {},
|
|
126442
|
+
"type": {
|
|
126443
|
+
"kind": "function",
|
|
126444
|
+
"parameters": [
|
|
126445
|
+
{
|
|
126446
|
+
"kind": "parameter",
|
|
126447
|
+
"name": "options",
|
|
126448
|
+
"type": {
|
|
126449
|
+
"kind": "conditional",
|
|
126450
|
+
"check": {
|
|
126451
|
+
"kind": "tuple",
|
|
126452
|
+
"value": [
|
|
126453
|
+
{
|
|
126454
|
+
"kind": "symbol",
|
|
126455
|
+
"name": "E",
|
|
126456
|
+
"value": "E"
|
|
126457
|
+
}
|
|
126458
|
+
]
|
|
126459
|
+
},
|
|
126460
|
+
"extends": {
|
|
126461
|
+
"kind": "tuple",
|
|
126462
|
+
"value": [
|
|
126463
|
+
{
|
|
126464
|
+
"kind": "primitive",
|
|
126465
|
+
"value": "never"
|
|
126466
|
+
}
|
|
126467
|
+
]
|
|
126468
|
+
},
|
|
126469
|
+
"trueType": {
|
|
126470
|
+
"kind": "intersection",
|
|
126471
|
+
"value": [
|
|
126472
|
+
{
|
|
126473
|
+
"kind": "symbol",
|
|
126474
|
+
"name": "ModifierValuesStencil",
|
|
126475
|
+
"typeParameters": [
|
|
126476
|
+
{
|
|
126477
|
+
"kind": "symbol",
|
|
126478
|
+
"name": "M",
|
|
126479
|
+
"value": "M"
|
|
126480
|
+
},
|
|
126481
|
+
{
|
|
126482
|
+
"kind": "symbol",
|
|
126483
|
+
"name": "V",
|
|
126484
|
+
"value": "V"
|
|
126485
|
+
}
|
|
126486
|
+
],
|
|
126487
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
126488
|
+
},
|
|
126489
|
+
{
|
|
126490
|
+
"kind": "symbol",
|
|
126491
|
+
"name": "VariableValuesStencil",
|
|
126492
|
+
"typeParameters": [
|
|
126493
|
+
{
|
|
126494
|
+
"kind": "symbol",
|
|
126495
|
+
"name": "V",
|
|
126496
|
+
"value": "V"
|
|
126497
|
+
}
|
|
126498
|
+
],
|
|
126499
|
+
"value": "VariableValuesStencil<V>"
|
|
126500
|
+
}
|
|
126501
|
+
]
|
|
126502
|
+
},
|
|
126503
|
+
"falseType": {
|
|
126504
|
+
"kind": "conditional",
|
|
126505
|
+
"check": {
|
|
126506
|
+
"kind": "symbol",
|
|
126507
|
+
"name": "E",
|
|
126508
|
+
"value": "E"
|
|
126509
|
+
},
|
|
126510
|
+
"extends": {
|
|
126511
|
+
"kind": "symbol",
|
|
126512
|
+
"name": "BaseStencil",
|
|
126513
|
+
"typeParameters": [
|
|
126514
|
+
{
|
|
126515
|
+
"kind": "infer",
|
|
126516
|
+
"value": {
|
|
126517
|
+
"kind": "typeParameter",
|
|
126518
|
+
"name": "ME",
|
|
126519
|
+
"required": true
|
|
126520
|
+
}
|
|
126521
|
+
},
|
|
126522
|
+
{
|
|
126523
|
+
"kind": "primitive",
|
|
126524
|
+
"value": "any"
|
|
126525
|
+
},
|
|
126526
|
+
{
|
|
126527
|
+
"kind": "infer",
|
|
126528
|
+
"value": {
|
|
126529
|
+
"kind": "typeParameter",
|
|
126530
|
+
"name": "VE",
|
|
126531
|
+
"required": true
|
|
126532
|
+
}
|
|
126533
|
+
},
|
|
126534
|
+
{
|
|
126535
|
+
"kind": "primitive",
|
|
126536
|
+
"value": "any"
|
|
126537
|
+
},
|
|
126538
|
+
{
|
|
126539
|
+
"kind": "primitive",
|
|
126540
|
+
"value": "any"
|
|
126541
|
+
}
|
|
126542
|
+
],
|
|
126543
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
126544
|
+
},
|
|
126545
|
+
"trueType": {
|
|
126546
|
+
"kind": "intersection",
|
|
126547
|
+
"value": [
|
|
126548
|
+
{
|
|
126549
|
+
"kind": "symbol",
|
|
126550
|
+
"name": "ModifierValuesStencil",
|
|
126551
|
+
"typeParameters": [
|
|
126552
|
+
{
|
|
126553
|
+
"kind": "intersection",
|
|
126554
|
+
"value": [
|
|
126555
|
+
{
|
|
126556
|
+
"kind": "symbol",
|
|
126557
|
+
"name": "ME",
|
|
126558
|
+
"value": "ME"
|
|
126559
|
+
},
|
|
126560
|
+
{
|
|
126561
|
+
"kind": "symbol",
|
|
126562
|
+
"name": "M",
|
|
126563
|
+
"value": "M"
|
|
126564
|
+
}
|
|
126565
|
+
]
|
|
126566
|
+
},
|
|
126567
|
+
{
|
|
126568
|
+
"kind": "intersection",
|
|
126569
|
+
"value": [
|
|
126570
|
+
{
|
|
126571
|
+
"kind": "symbol",
|
|
126572
|
+
"name": "VE",
|
|
126573
|
+
"value": "VE"
|
|
126574
|
+
},
|
|
126575
|
+
{
|
|
126576
|
+
"kind": "symbol",
|
|
126577
|
+
"name": "V",
|
|
126578
|
+
"value": "V"
|
|
126579
|
+
}
|
|
126580
|
+
]
|
|
126581
|
+
}
|
|
126582
|
+
],
|
|
126583
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
126584
|
+
},
|
|
126585
|
+
{
|
|
126586
|
+
"kind": "symbol",
|
|
126587
|
+
"name": "VariableValuesStencil",
|
|
126588
|
+
"typeParameters": [
|
|
126589
|
+
{
|
|
126590
|
+
"kind": "intersection",
|
|
126591
|
+
"value": [
|
|
126592
|
+
{
|
|
126593
|
+
"kind": "symbol",
|
|
126594
|
+
"name": "VE",
|
|
126595
|
+
"value": "VE"
|
|
126596
|
+
},
|
|
126597
|
+
{
|
|
126598
|
+
"kind": "symbol",
|
|
126599
|
+
"name": "V",
|
|
126600
|
+
"value": "V"
|
|
126601
|
+
}
|
|
126602
|
+
]
|
|
126603
|
+
}
|
|
126604
|
+
],
|
|
126605
|
+
"value": "VariableValuesStencil<V>"
|
|
126606
|
+
}
|
|
126607
|
+
]
|
|
126608
|
+
},
|
|
126609
|
+
"falseType": {
|
|
126610
|
+
"kind": "primitive",
|
|
126611
|
+
"value": "never"
|
|
126612
|
+
}
|
|
126613
|
+
}
|
|
126614
|
+
},
|
|
126615
|
+
"required": false,
|
|
126616
|
+
"rest": false,
|
|
126617
|
+
"description": "",
|
|
126618
|
+
"declarations": [
|
|
126619
|
+
{
|
|
126620
|
+
"name": "options",
|
|
126621
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
126622
|
+
}
|
|
126623
|
+
],
|
|
126624
|
+
"tags": {}
|
|
126625
|
+
}
|
|
126626
|
+
],
|
|
126627
|
+
"members": [
|
|
126628
|
+
{
|
|
126629
|
+
"kind": "property",
|
|
126630
|
+
"name": "parts",
|
|
126631
|
+
"required": true,
|
|
126632
|
+
"type": {
|
|
126633
|
+
"kind": "conditional",
|
|
126634
|
+
"check": {
|
|
126635
|
+
"kind": "tuple",
|
|
126636
|
+
"value": [
|
|
126637
|
+
{
|
|
126638
|
+
"kind": "symbol",
|
|
126639
|
+
"name": "E",
|
|
126640
|
+
"value": "E"
|
|
126641
|
+
}
|
|
126642
|
+
]
|
|
126643
|
+
},
|
|
126644
|
+
"extends": {
|
|
126645
|
+
"kind": "tuple",
|
|
126646
|
+
"value": [
|
|
126647
|
+
{
|
|
126648
|
+
"kind": "symbol",
|
|
126649
|
+
"name": "BaseStencil",
|
|
126650
|
+
"typeParameters": [
|
|
126651
|
+
{
|
|
126652
|
+
"kind": "primitive",
|
|
126653
|
+
"value": "any"
|
|
126654
|
+
},
|
|
126655
|
+
{
|
|
126656
|
+
"kind": "infer",
|
|
126657
|
+
"value": {
|
|
126658
|
+
"kind": "typeParameter",
|
|
126659
|
+
"name": "PE",
|
|
126660
|
+
"required": true
|
|
126661
|
+
}
|
|
126662
|
+
},
|
|
126663
|
+
{
|
|
126664
|
+
"kind": "primitive",
|
|
126665
|
+
"value": "any"
|
|
126666
|
+
},
|
|
126667
|
+
{
|
|
126668
|
+
"kind": "primitive",
|
|
126669
|
+
"value": "any"
|
|
126670
|
+
},
|
|
126671
|
+
{
|
|
126672
|
+
"kind": "primitive",
|
|
126673
|
+
"value": "any"
|
|
126674
|
+
}
|
|
126675
|
+
],
|
|
126676
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
126677
|
+
}
|
|
126678
|
+
]
|
|
126679
|
+
},
|
|
126680
|
+
"trueType": {
|
|
126681
|
+
"kind": "symbol",
|
|
126682
|
+
"name": "StencilPartProps",
|
|
126683
|
+
"typeParameters": [
|
|
126684
|
+
{
|
|
126685
|
+
"kind": "intersection",
|
|
126686
|
+
"value": [
|
|
126687
|
+
{
|
|
126688
|
+
"kind": "symbol",
|
|
126689
|
+
"name": "PE",
|
|
126690
|
+
"value": "PE"
|
|
126691
|
+
},
|
|
126692
|
+
{
|
|
126693
|
+
"kind": "symbol",
|
|
126694
|
+
"name": "P",
|
|
126695
|
+
"value": "P"
|
|
126696
|
+
}
|
|
126697
|
+
]
|
|
126698
|
+
}
|
|
126699
|
+
],
|
|
126700
|
+
"value": "StencilPartProps<T>"
|
|
126701
|
+
},
|
|
126702
|
+
"falseType": {
|
|
126703
|
+
"kind": "symbol",
|
|
126704
|
+
"name": "StencilPartProps",
|
|
126705
|
+
"typeParameters": [
|
|
126706
|
+
{
|
|
126707
|
+
"kind": "symbol",
|
|
126708
|
+
"name": "P",
|
|
126709
|
+
"value": "P"
|
|
126710
|
+
}
|
|
126711
|
+
],
|
|
126712
|
+
"value": "StencilPartProps<T>"
|
|
126713
|
+
}
|
|
126714
|
+
},
|
|
126715
|
+
"description": "",
|
|
126716
|
+
"declarations": [
|
|
126717
|
+
{
|
|
126718
|
+
"name": "parts",
|
|
126719
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
126720
|
+
}
|
|
126721
|
+
],
|
|
126722
|
+
"tags": {}
|
|
126723
|
+
},
|
|
126724
|
+
{
|
|
126725
|
+
"kind": "property",
|
|
126726
|
+
"name": "vars",
|
|
126727
|
+
"required": true,
|
|
126728
|
+
"type": {
|
|
126729
|
+
"kind": "symbol",
|
|
126730
|
+
"name": "StencilDefaultVars",
|
|
126731
|
+
"typeParameters": [
|
|
126732
|
+
{
|
|
126733
|
+
"kind": "symbol",
|
|
126734
|
+
"name": "V",
|
|
126735
|
+
"value": "V"
|
|
126736
|
+
},
|
|
126737
|
+
{
|
|
126738
|
+
"kind": "symbol",
|
|
126739
|
+
"name": "E",
|
|
126740
|
+
"value": "E"
|
|
126741
|
+
},
|
|
126742
|
+
{
|
|
126743
|
+
"kind": "symbol",
|
|
126744
|
+
"name": "ID",
|
|
126745
|
+
"value": "ID"
|
|
126746
|
+
}
|
|
126747
|
+
],
|
|
126748
|
+
"value": "StencilDefaultVars<V, E, ID>"
|
|
126749
|
+
},
|
|
126750
|
+
"description": "",
|
|
126751
|
+
"declarations": [
|
|
126752
|
+
{
|
|
126753
|
+
"name": "vars",
|
|
126754
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
126755
|
+
}
|
|
126756
|
+
],
|
|
126757
|
+
"tags": {}
|
|
126758
|
+
},
|
|
126759
|
+
{
|
|
126760
|
+
"kind": "property",
|
|
126761
|
+
"name": "base",
|
|
126762
|
+
"required": true,
|
|
126763
|
+
"type": {
|
|
126764
|
+
"kind": "primitive",
|
|
126765
|
+
"value": "string"
|
|
126766
|
+
},
|
|
126767
|
+
"description": "",
|
|
126768
|
+
"declarations": [
|
|
126769
|
+
{
|
|
126770
|
+
"name": "base",
|
|
126771
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
126772
|
+
}
|
|
126773
|
+
],
|
|
126774
|
+
"tags": {}
|
|
126775
|
+
},
|
|
126776
|
+
{
|
|
126777
|
+
"kind": "property",
|
|
126778
|
+
"name": "modifiers",
|
|
126779
|
+
"required": true,
|
|
126780
|
+
"type": {
|
|
126781
|
+
"kind": "conditional",
|
|
126782
|
+
"check": {
|
|
126783
|
+
"kind": "tuple",
|
|
126784
|
+
"value": [
|
|
126785
|
+
{
|
|
126786
|
+
"kind": "symbol",
|
|
126787
|
+
"name": "E",
|
|
126788
|
+
"value": "E"
|
|
126789
|
+
}
|
|
126790
|
+
]
|
|
126791
|
+
},
|
|
126792
|
+
"extends": {
|
|
126793
|
+
"kind": "tuple",
|
|
126794
|
+
"value": [
|
|
126795
|
+
{
|
|
126796
|
+
"kind": "symbol",
|
|
126797
|
+
"name": "BaseStencil",
|
|
126798
|
+
"typeParameters": [
|
|
126799
|
+
{
|
|
126800
|
+
"kind": "infer",
|
|
126801
|
+
"value": {
|
|
126802
|
+
"kind": "typeParameter",
|
|
126803
|
+
"name": "ME",
|
|
126804
|
+
"required": true
|
|
126805
|
+
}
|
|
126806
|
+
},
|
|
126807
|
+
{
|
|
126808
|
+
"kind": "primitive",
|
|
126809
|
+
"value": "any"
|
|
126810
|
+
},
|
|
126811
|
+
{
|
|
126812
|
+
"kind": "infer",
|
|
126813
|
+
"value": {
|
|
126814
|
+
"kind": "typeParameter",
|
|
126815
|
+
"name": "VE",
|
|
126816
|
+
"required": true
|
|
126817
|
+
}
|
|
126818
|
+
},
|
|
126819
|
+
{
|
|
126820
|
+
"kind": "primitive",
|
|
126821
|
+
"value": "any"
|
|
126822
|
+
},
|
|
126823
|
+
{
|
|
126824
|
+
"kind": "primitive",
|
|
126825
|
+
"value": "any"
|
|
126826
|
+
}
|
|
126827
|
+
],
|
|
126828
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
126829
|
+
}
|
|
126830
|
+
]
|
|
126831
|
+
},
|
|
126832
|
+
"trueType": {
|
|
126833
|
+
"kind": "symbol",
|
|
126834
|
+
"name": "StencilModifierReturn",
|
|
126835
|
+
"typeParameters": [
|
|
126836
|
+
{
|
|
126837
|
+
"kind": "intersection",
|
|
126838
|
+
"value": [
|
|
126839
|
+
{
|
|
126840
|
+
"kind": "symbol",
|
|
126841
|
+
"name": "ME",
|
|
126842
|
+
"value": "ME"
|
|
126843
|
+
},
|
|
126844
|
+
{
|
|
126845
|
+
"kind": "symbol",
|
|
126846
|
+
"name": "M",
|
|
126847
|
+
"value": "M"
|
|
126848
|
+
}
|
|
126849
|
+
]
|
|
126850
|
+
},
|
|
126851
|
+
{
|
|
126852
|
+
"kind": "intersection",
|
|
126853
|
+
"value": [
|
|
126854
|
+
{
|
|
126855
|
+
"kind": "symbol",
|
|
126856
|
+
"name": "VE",
|
|
126857
|
+
"value": "VE"
|
|
126858
|
+
},
|
|
126859
|
+
{
|
|
126860
|
+
"kind": "symbol",
|
|
126861
|
+
"name": "V",
|
|
126862
|
+
"value": "V"
|
|
126863
|
+
}
|
|
126864
|
+
]
|
|
126865
|
+
}
|
|
126866
|
+
],
|
|
126867
|
+
"value": "StencilModifierReturn<M, V>"
|
|
126868
|
+
},
|
|
126869
|
+
"falseType": {
|
|
126870
|
+
"kind": "symbol",
|
|
126871
|
+
"name": "StencilModifierReturn",
|
|
126872
|
+
"typeParameters": [
|
|
126873
|
+
{
|
|
126874
|
+
"kind": "symbol",
|
|
126875
|
+
"name": "M",
|
|
126876
|
+
"value": "M"
|
|
126877
|
+
},
|
|
126878
|
+
{
|
|
126879
|
+
"kind": "symbol",
|
|
126880
|
+
"name": "V",
|
|
126881
|
+
"value": "V"
|
|
126882
|
+
}
|
|
126883
|
+
],
|
|
126884
|
+
"value": "StencilModifierReturn<M, V>"
|
|
126885
|
+
}
|
|
126886
|
+
},
|
|
126887
|
+
"description": "",
|
|
126888
|
+
"declarations": [
|
|
126889
|
+
{
|
|
126890
|
+
"name": "modifiers",
|
|
126891
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
126892
|
+
}
|
|
126893
|
+
],
|
|
126894
|
+
"tags": {}
|
|
126895
|
+
},
|
|
126896
|
+
{
|
|
126897
|
+
"kind": "property",
|
|
126898
|
+
"name": "defaultModifiers",
|
|
126899
|
+
"required": true,
|
|
126900
|
+
"type": {
|
|
126901
|
+
"kind": "conditional",
|
|
126902
|
+
"check": {
|
|
126903
|
+
"kind": "tuple",
|
|
126904
|
+
"value": [
|
|
126905
|
+
{
|
|
126906
|
+
"kind": "symbol",
|
|
126907
|
+
"name": "E",
|
|
126908
|
+
"value": "E"
|
|
126909
|
+
}
|
|
126910
|
+
]
|
|
126911
|
+
},
|
|
126912
|
+
"extends": {
|
|
126913
|
+
"kind": "tuple",
|
|
126914
|
+
"value": [
|
|
126915
|
+
{
|
|
126916
|
+
"kind": "symbol",
|
|
126917
|
+
"name": "BaseStencil",
|
|
126918
|
+
"typeParameters": [
|
|
126919
|
+
{
|
|
126920
|
+
"kind": "infer",
|
|
126921
|
+
"value": {
|
|
126922
|
+
"kind": "typeParameter",
|
|
126923
|
+
"name": "ME",
|
|
126924
|
+
"required": true
|
|
126925
|
+
}
|
|
126926
|
+
},
|
|
126927
|
+
{
|
|
126928
|
+
"kind": "primitive",
|
|
126929
|
+
"value": "any"
|
|
126930
|
+
},
|
|
126931
|
+
{
|
|
126932
|
+
"kind": "primitive",
|
|
126933
|
+
"value": "any"
|
|
126934
|
+
},
|
|
126935
|
+
{
|
|
126936
|
+
"kind": "primitive",
|
|
126937
|
+
"value": "any"
|
|
126938
|
+
},
|
|
126939
|
+
{
|
|
126940
|
+
"kind": "primitive",
|
|
126941
|
+
"value": "any"
|
|
126942
|
+
}
|
|
126943
|
+
],
|
|
126944
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
126945
|
+
}
|
|
126946
|
+
]
|
|
126947
|
+
},
|
|
126948
|
+
"trueType": {
|
|
126949
|
+
"kind": "symbol",
|
|
126950
|
+
"name": "StencilDefaultModifierReturn",
|
|
126951
|
+
"typeParameters": [
|
|
126952
|
+
{
|
|
126953
|
+
"kind": "intersection",
|
|
126954
|
+
"value": [
|
|
126955
|
+
{
|
|
126956
|
+
"kind": "symbol",
|
|
126957
|
+
"name": "ME",
|
|
126958
|
+
"value": "ME"
|
|
126959
|
+
},
|
|
126960
|
+
{
|
|
126961
|
+
"kind": "symbol",
|
|
126962
|
+
"name": "M",
|
|
126963
|
+
"value": "M"
|
|
126964
|
+
}
|
|
126965
|
+
]
|
|
126966
|
+
}
|
|
126967
|
+
],
|
|
126968
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
126969
|
+
},
|
|
126970
|
+
"falseType": {
|
|
126971
|
+
"kind": "symbol",
|
|
126972
|
+
"name": "StencilDefaultModifierReturn",
|
|
126973
|
+
"typeParameters": [
|
|
126974
|
+
{
|
|
126975
|
+
"kind": "symbol",
|
|
126976
|
+
"name": "M",
|
|
126977
|
+
"value": "M"
|
|
126978
|
+
}
|
|
126979
|
+
],
|
|
126980
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
126981
|
+
}
|
|
126982
|
+
},
|
|
126983
|
+
"description": "",
|
|
126984
|
+
"declarations": [
|
|
126985
|
+
{
|
|
126986
|
+
"name": "defaultModifiers",
|
|
126987
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
126988
|
+
}
|
|
126989
|
+
],
|
|
126990
|
+
"tags": {}
|
|
126991
|
+
},
|
|
126992
|
+
{
|
|
126993
|
+
"kind": "property",
|
|
126994
|
+
"name": "__extends",
|
|
126995
|
+
"required": false,
|
|
126996
|
+
"type": {
|
|
126997
|
+
"kind": "symbol",
|
|
126998
|
+
"name": "E",
|
|
126999
|
+
"value": "E"
|
|
127000
|
+
},
|
|
127001
|
+
"description": "",
|
|
127002
|
+
"declarations": [
|
|
127003
|
+
{
|
|
127004
|
+
"name": "__extends",
|
|
127005
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127006
|
+
}
|
|
127007
|
+
],
|
|
127008
|
+
"tags": {}
|
|
127009
|
+
},
|
|
127010
|
+
{
|
|
127011
|
+
"kind": "property",
|
|
127012
|
+
"name": "__vars",
|
|
127013
|
+
"required": true,
|
|
127014
|
+
"type": {
|
|
127015
|
+
"kind": "symbol",
|
|
127016
|
+
"name": "V",
|
|
127017
|
+
"value": "V"
|
|
127018
|
+
},
|
|
127019
|
+
"description": "",
|
|
127020
|
+
"declarations": [
|
|
127021
|
+
{
|
|
127022
|
+
"name": "__vars",
|
|
127023
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127024
|
+
}
|
|
127025
|
+
],
|
|
127026
|
+
"tags": {}
|
|
127027
|
+
},
|
|
127028
|
+
{
|
|
127029
|
+
"kind": "property",
|
|
127030
|
+
"name": "__modifiers",
|
|
127031
|
+
"required": true,
|
|
127032
|
+
"type": {
|
|
127033
|
+
"kind": "symbol",
|
|
127034
|
+
"name": "M",
|
|
127035
|
+
"value": "M"
|
|
127036
|
+
},
|
|
127037
|
+
"description": "",
|
|
127038
|
+
"declarations": [
|
|
127039
|
+
{
|
|
127040
|
+
"name": "__modifiers",
|
|
127041
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127042
|
+
}
|
|
127043
|
+
],
|
|
127044
|
+
"tags": {}
|
|
127045
|
+
},
|
|
127046
|
+
{
|
|
127047
|
+
"kind": "property",
|
|
127048
|
+
"name": "__id",
|
|
127049
|
+
"required": true,
|
|
127050
|
+
"type": {
|
|
127051
|
+
"kind": "symbol",
|
|
127052
|
+
"name": "ID",
|
|
127053
|
+
"value": "ID"
|
|
127054
|
+
},
|
|
127055
|
+
"description": "",
|
|
127056
|
+
"declarations": [
|
|
127057
|
+
{
|
|
127058
|
+
"name": "__id",
|
|
127059
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127060
|
+
}
|
|
127061
|
+
],
|
|
127062
|
+
"tags": {}
|
|
127063
|
+
},
|
|
127064
|
+
{
|
|
127065
|
+
"kind": "property",
|
|
127066
|
+
"name": "__parts",
|
|
127067
|
+
"required": false,
|
|
127068
|
+
"type": {
|
|
127069
|
+
"kind": "symbol",
|
|
127070
|
+
"name": "P",
|
|
127071
|
+
"value": "P"
|
|
127072
|
+
},
|
|
127073
|
+
"description": "",
|
|
127074
|
+
"declarations": [
|
|
127075
|
+
{
|
|
127076
|
+
"name": "__parts",
|
|
127077
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127078
|
+
}
|
|
127079
|
+
],
|
|
127080
|
+
"tags": {}
|
|
127081
|
+
}
|
|
127082
|
+
],
|
|
127083
|
+
"returnType": {
|
|
127084
|
+
"kind": "object",
|
|
127085
|
+
"properties": [
|
|
127086
|
+
{
|
|
127087
|
+
"kind": "property",
|
|
127088
|
+
"name": "className",
|
|
127089
|
+
"required": true,
|
|
127090
|
+
"type": {
|
|
127091
|
+
"kind": "primitive",
|
|
127092
|
+
"value": "string"
|
|
127093
|
+
},
|
|
127094
|
+
"description": "",
|
|
127095
|
+
"declarations": [
|
|
127096
|
+
{
|
|
127097
|
+
"name": "className",
|
|
127098
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127099
|
+
}
|
|
127100
|
+
],
|
|
127101
|
+
"tags": {}
|
|
127102
|
+
},
|
|
127103
|
+
{
|
|
127104
|
+
"kind": "property",
|
|
127105
|
+
"name": "style",
|
|
127106
|
+
"required": false,
|
|
127107
|
+
"type": {
|
|
127108
|
+
"kind": "external",
|
|
127109
|
+
"name": "Record",
|
|
127110
|
+
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type",
|
|
127111
|
+
"typeParameters": [
|
|
127112
|
+
{
|
|
127113
|
+
"kind": "primitive",
|
|
127114
|
+
"value": "string"
|
|
127115
|
+
},
|
|
127116
|
+
{
|
|
127117
|
+
"kind": "primitive",
|
|
127118
|
+
"value": "string"
|
|
127119
|
+
}
|
|
127120
|
+
]
|
|
127121
|
+
},
|
|
127122
|
+
"description": "",
|
|
127123
|
+
"declarations": [
|
|
127124
|
+
{
|
|
127125
|
+
"name": "style",
|
|
127126
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
127127
|
+
}
|
|
127128
|
+
],
|
|
127129
|
+
"tags": {}
|
|
127130
|
+
}
|
|
127131
|
+
]
|
|
127132
|
+
}
|
|
127133
|
+
}
|
|
127134
|
+
},
|
|
126377
127135
|
{
|
|
126378
127136
|
"name": "ListBox",
|
|
126379
127137
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
@@ -145157,8 +145915,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
145157
145915
|
],
|
|
145158
145916
|
"members": [],
|
|
145159
145917
|
"returnType": {
|
|
145160
|
-
"kind": "
|
|
145161
|
-
"value":
|
|
145918
|
+
"kind": "union",
|
|
145919
|
+
"value": [
|
|
145920
|
+
{
|
|
145921
|
+
"kind": "primitive",
|
|
145922
|
+
"value": "null"
|
|
145923
|
+
},
|
|
145924
|
+
{
|
|
145925
|
+
"kind": "primitive",
|
|
145926
|
+
"value": "undefined"
|
|
145927
|
+
}
|
|
145928
|
+
]
|
|
145162
145929
|
}
|
|
145163
145930
|
},
|
|
145164
145931
|
"description": "",
|
|
@@ -267754,8 +268521,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
267754
268521
|
],
|
|
267755
268522
|
"members": [],
|
|
267756
268523
|
"returnType": {
|
|
267757
|
-
"kind": "
|
|
267758
|
-
"value":
|
|
268524
|
+
"kind": "union",
|
|
268525
|
+
"value": [
|
|
268526
|
+
{
|
|
268527
|
+
"kind": "primitive",
|
|
268528
|
+
"value": "null"
|
|
268529
|
+
},
|
|
268530
|
+
{
|
|
268531
|
+
"kind": "primitive",
|
|
268532
|
+
"value": "undefined"
|
|
268533
|
+
}
|
|
268534
|
+
]
|
|
267759
268535
|
}
|
|
267760
268536
|
}
|
|
267761
268537
|
},
|
|
@@ -273327,8 +274103,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
273327
274103
|
],
|
|
273328
274104
|
"members": [],
|
|
273329
274105
|
"returnType": {
|
|
273330
|
-
"kind": "
|
|
273331
|
-
"value":
|
|
274106
|
+
"kind": "union",
|
|
274107
|
+
"value": [
|
|
274108
|
+
{
|
|
274109
|
+
"kind": "primitive",
|
|
274110
|
+
"value": "null"
|
|
274111
|
+
},
|
|
274112
|
+
{
|
|
274113
|
+
"kind": "primitive",
|
|
274114
|
+
"value": "undefined"
|
|
274115
|
+
}
|
|
274116
|
+
]
|
|
273332
274117
|
}
|
|
273333
274118
|
},
|
|
273334
274119
|
"description": "",
|
|
@@ -460939,7 +461724,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
460939
461724
|
"kind": "generic",
|
|
460940
461725
|
"name": "P"
|
|
460941
461726
|
},
|
|
460942
|
-
"description": "A Stencil supports sub-elements called \"parts\". A part is modelled after the\n[::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) specification for shadow\ntrees in web components. A part refers to a sub-element for styling purposes. Compound\ncomponents should allow direct access to each semantic element, but sometimes a semantic\nelement needs to contain sub-elements that are not semantic for styling purposes. A part is a\nstyle hook for these elements. A part allows for an explicit API for styling these elements so\nthat style overriding doesn't need complicated CSS selectors to target them. The part API is a\nconvenient wrapper to avoid magic stings. A part key should be short and descriptive - it\nrepresents the JS name of the part. The value should be more descriptive since it will become\npart of a CSS selector. For example, if the part key is \"separator\", the value should describe\nwhat stencil the separator belongs to. A unique name avoids naming collisions. If a\n`cardStencil` has a `separator` part and an `inputStencil` has a `separator` part, the value of\neach should be `card-separator` and `input-separator` respectively. If you do not uniquely set\nvalues, you can get unwanted CSS selector matching where the `inputStencil`'s part matches the\nCSS of the `cardStencil` if a `Card` component contains an `Input` component.\n\n```ts\nconst myButtonStencil = createStencil({\n parts: {\n icon: 'my-button-icon',\n label: 'my-button-label'\n },\n base: ({iconPart}) => ({\n padding: 10,\n // other base styles\n\n [iconPart]: { // '[data-part=\"my-icon\"]'\n // icon part styles\n },\n ':hover': {\n // hover base styles\n [iconPart]: {\n // hover styles for icon part\n }\n },\n })\n})\n\nThe part can then be used in a component's render function.\nconst MyComponent = ({children, ...elemProps}) => {\n return (\n <button {...handleCsProp(elemProps, myButtonStencil())}>\n <i {...myButtonStencil.parts.icon} />\n <span {...myButtonStencil.parts.label}>{children}</span>\n </button>\n )\n}\n```",
|
|
461727
|
+
"description": "A Stencil supports sub-elements called \"parts\". A part is modelled after the\n[::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) specification for shadow\ntrees in web components. A part refers to a sub-element for styling purposes. Compound\ncomponents should allow direct access to each semantic element, but sometimes a semantic\nelement needs to contain sub-elements that are not semantic for styling purposes. A part is a\nstyle hook for these elements. A part allows for an explicit API for styling these elements so\nthat style overriding doesn't need complicated CSS selectors to target them. The part API is a\nconvenient wrapper to avoid magic stings. A part key should be short and descriptive - it\nrepresents the JS name of the part. The value should be more descriptive since it will become\npart of a CSS selector. For example, if the part key is \"separator\", the value should describe\nwhat stencil the separator belongs to. A unique name avoids naming collisions. If a\n`cardStencil` has a `separator` part and an `inputStencil` has a `separator` part, the value of\neach should be `card-separator` and `input-separator` respectively. If you do not uniquely set\nvalues, you can get unwanted CSS selector matching where the `inputStencil`'s part matches the\nCSS of the `cardStencil` if a `Card` component contains an `Input` component.\n\n```ts\nconst myButtonStencil = createStencil({\n parts: {\n icon: 'my-button-icon',\n label: 'my-button-label'\n },\n base: ({iconPart}) => ({\n padding: 10,\n // other base styles\n\n [iconPart]: { // '[data-part=\"my-icon\"]'\n // icon part styles\n },\n ':hover': {\n // hover base styles\n [iconPart]: {\n // hover styles for icon part\n }\n },\n })\n})\n\nThe part can then be used in a component's render function.\nconst MyComponent = ({children, ...elemProps}) => {\n return (\n <button {...handleCsProp(elemProps, myButtonStencil())}>\n <i {...myButtonStencil.parts.icon} />\n <span {...myButtonStencil.parts.label}>{children}</span>\n </button>\n )\n}\n```\n\nTo target a part from another stencil's style object, use `.selector`. It is non-enumerable, so\nspreading the part onto an element still only applies `data-part`.\n\n```ts\nconst cardStencil = createStencil({\n base: {\n [`&:where(:has(${myButtonStencil.parts.icon.selector}))`]: {\n paddingInlineStart: 0,\n },\n [`& ${myButtonStencil.parts.label.selector}`]: {\n fontWeight: 700,\n },\n },\n})\n```",
|
|
460943
461728
|
"declarations": [
|
|
460944
461729
|
{
|
|
460945
461730
|
"name": "parts",
|
|
@@ -462078,6 +462863,73 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
462078
462863
|
}
|
|
462079
462864
|
}
|
|
462080
462865
|
},
|
|
462866
|
+
{
|
|
462867
|
+
"name": "StencilPart",
|
|
462868
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
462869
|
+
"description": "",
|
|
462870
|
+
"declarations": [
|
|
462871
|
+
{
|
|
462872
|
+
"name": "StencilPart",
|
|
462873
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
462874
|
+
}
|
|
462875
|
+
],
|
|
462876
|
+
"tags": {},
|
|
462877
|
+
"type": {
|
|
462878
|
+
"kind": "object",
|
|
462879
|
+
"properties": [
|
|
462880
|
+
{
|
|
462881
|
+
"kind": "property",
|
|
462882
|
+
"name": "data-part",
|
|
462883
|
+
"required": true,
|
|
462884
|
+
"type": {
|
|
462885
|
+
"kind": "generic",
|
|
462886
|
+
"name": "V"
|
|
462887
|
+
},
|
|
462888
|
+
"description": "",
|
|
462889
|
+
"declarations": [
|
|
462890
|
+
{
|
|
462891
|
+
"name": "data-part",
|
|
462892
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
462893
|
+
}
|
|
462894
|
+
],
|
|
462895
|
+
"tags": {}
|
|
462896
|
+
},
|
|
462897
|
+
{
|
|
462898
|
+
"kind": "property",
|
|
462899
|
+
"name": "selector",
|
|
462900
|
+
"required": true,
|
|
462901
|
+
"type": {
|
|
462902
|
+
"kind": "unknown",
|
|
462903
|
+
"value": "unknown",
|
|
462904
|
+
"text": "`[data-part=\"${V}\"]`"
|
|
462905
|
+
},
|
|
462906
|
+
"description": "CSS selector matching this part (`[data-part=\"...\"]`). Non-enumerable so it is not applied to\nthe DOM when the part is spread onto an element.",
|
|
462907
|
+
"declarations": [
|
|
462908
|
+
{
|
|
462909
|
+
"name": "selector",
|
|
462910
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
462911
|
+
}
|
|
462912
|
+
],
|
|
462913
|
+
"tags": {}
|
|
462914
|
+
}
|
|
462915
|
+
],
|
|
462916
|
+
"typeParameters": [
|
|
462917
|
+
{
|
|
462918
|
+
"kind": "typeParameter",
|
|
462919
|
+
"name": "V",
|
|
462920
|
+
"defaultValue": {
|
|
462921
|
+
"kind": "primitive",
|
|
462922
|
+
"value": "string"
|
|
462923
|
+
},
|
|
462924
|
+
"constraint": {
|
|
462925
|
+
"kind": "primitive",
|
|
462926
|
+
"value": "string"
|
|
462927
|
+
},
|
|
462928
|
+
"required": false
|
|
462929
|
+
}
|
|
462930
|
+
]
|
|
462931
|
+
}
|
|
462932
|
+
},
|
|
462081
462933
|
{
|
|
462082
462934
|
"name": "StencilPartProps",
|
|
462083
462935
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
@@ -462101,7 +462953,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
462101
462953
|
"value": {
|
|
462102
462954
|
"kind": "unknown",
|
|
462103
462955
|
"value": "unknown",
|
|
462104
|
-
"text": "{\n [K in keyof T]:
|
|
462956
|
+
"text": "{\n [K in keyof T]: StencilPart<T[K] & string>;\n}"
|
|
462105
462957
|
}
|
|
462106
462958
|
}
|
|
462107
462959
|
},
|
package/dist/es6/lib/specs.js
CHANGED
|
@@ -1759,6 +1759,20 @@ module.exports = {specifications: [
|
|
|
1759
1759
|
}
|
|
1760
1760
|
]
|
|
1761
1761
|
},
|
|
1762
|
+
{
|
|
1763
|
+
"type": "describe",
|
|
1764
|
+
"name": "when a disabled item has focus and the menu is closed and reopened",
|
|
1765
|
+
"children": [
|
|
1766
|
+
{
|
|
1767
|
+
"type": "it",
|
|
1768
|
+
"name": "should move focus to the first item instead of the disabled item"
|
|
1769
|
+
},
|
|
1770
|
+
{
|
|
1771
|
+
"type": "it",
|
|
1772
|
+
"name": "should not leave focus on the disabled item"
|
|
1773
|
+
}
|
|
1774
|
+
]
|
|
1775
|
+
},
|
|
1762
1776
|
{
|
|
1763
1777
|
"type": "describe",
|
|
1764
1778
|
"name": "when the enter key is pressed",
|
|
@@ -1781,6 +1795,112 @@ module.exports = {specifications: [
|
|
|
1781
1795
|
}
|
|
1782
1796
|
]
|
|
1783
1797
|
},
|
|
1798
|
+
{
|
|
1799
|
+
"type": "describe",
|
|
1800
|
+
"name": "given the [Components/Popups/Menu, NestedSiblings] story is rendered",
|
|
1801
|
+
"children": [
|
|
1802
|
+
{
|
|
1803
|
+
"type": "describe",
|
|
1804
|
+
"name": "when the \"Second Item\" submenu is opened by hovering",
|
|
1805
|
+
"children": [
|
|
1806
|
+
{
|
|
1807
|
+
"type": "it",
|
|
1808
|
+
"name": "should set aria-expanded to true on \"Second Item\""
|
|
1809
|
+
},
|
|
1810
|
+
{
|
|
1811
|
+
"type": "describe",
|
|
1812
|
+
"name": "when the sibling \"Third Item\" is then hovered",
|
|
1813
|
+
"children": [
|
|
1814
|
+
{
|
|
1815
|
+
"type": "it",
|
|
1816
|
+
"name": "should close the \"Second Item\" submenu"
|
|
1817
|
+
},
|
|
1818
|
+
{
|
|
1819
|
+
"type": "it",
|
|
1820
|
+
"name": "should set aria-expanded to false on \"Second Item\""
|
|
1821
|
+
},
|
|
1822
|
+
{
|
|
1823
|
+
"type": "it",
|
|
1824
|
+
"name": "should leave only the root menu and one submenu open"
|
|
1825
|
+
},
|
|
1826
|
+
{
|
|
1827
|
+
"type": "describe",
|
|
1828
|
+
"name": "when the original \"Second Item\" is hovered again",
|
|
1829
|
+
"children": [
|
|
1830
|
+
{
|
|
1831
|
+
"type": "it",
|
|
1832
|
+
"name": "should close the \"Third Item\" submenu"
|
|
1833
|
+
},
|
|
1834
|
+
{
|
|
1835
|
+
"type": "it",
|
|
1836
|
+
"name": "should leave only the root menu and one submenu open"
|
|
1837
|
+
}
|
|
1838
|
+
]
|
|
1839
|
+
}
|
|
1840
|
+
]
|
|
1841
|
+
}
|
|
1842
|
+
]
|
|
1843
|
+
},
|
|
1844
|
+
{
|
|
1845
|
+
"type": "describe",
|
|
1846
|
+
"name": "when a submenu is opened with the right arrow key",
|
|
1847
|
+
"children": [
|
|
1848
|
+
{
|
|
1849
|
+
"type": "it",
|
|
1850
|
+
"name": "should open the submenu"
|
|
1851
|
+
},
|
|
1852
|
+
{
|
|
1853
|
+
"type": "it",
|
|
1854
|
+
"name": "should keep the submenu open and move focus into it"
|
|
1855
|
+
},
|
|
1856
|
+
{
|
|
1857
|
+
"type": "describe",
|
|
1858
|
+
"name": "when the left arrow key is pressed",
|
|
1859
|
+
"children": [
|
|
1860
|
+
{
|
|
1861
|
+
"type": "it",
|
|
1862
|
+
"name": "should close the submenu"
|
|
1863
|
+
},
|
|
1864
|
+
{
|
|
1865
|
+
"type": "it",
|
|
1866
|
+
"name": "should return focus to the \"Second Item\" target"
|
|
1867
|
+
}
|
|
1868
|
+
]
|
|
1869
|
+
}
|
|
1870
|
+
]
|
|
1871
|
+
}
|
|
1872
|
+
]
|
|
1873
|
+
},
|
|
1874
|
+
{
|
|
1875
|
+
"type": "describe",
|
|
1876
|
+
"name": "given the [Components/Popups/Menu, NestedDynamic] story is rendered",
|
|
1877
|
+
"children": [
|
|
1878
|
+
{
|
|
1879
|
+
"type": "describe",
|
|
1880
|
+
"name": "when hovering deeper into a chain of nested submenus",
|
|
1881
|
+
"children": [
|
|
1882
|
+
{
|
|
1883
|
+
"type": "it",
|
|
1884
|
+
"name": "should keep the ancestor submenu open"
|
|
1885
|
+
},
|
|
1886
|
+
{
|
|
1887
|
+
"type": "it",
|
|
1888
|
+
"name": "should keep every menu in the open chain visible"
|
|
1889
|
+
},
|
|
1890
|
+
{
|
|
1891
|
+
"type": "describe",
|
|
1892
|
+
"name": "when hovering back onto the ancestor item in the open trail",
|
|
1893
|
+
"children": [
|
|
1894
|
+
{
|
|
1895
|
+
"type": "it",
|
|
1896
|
+
"name": "should keep the open trail intact"
|
|
1897
|
+
}
|
|
1898
|
+
]
|
|
1899
|
+
}
|
|
1900
|
+
]
|
|
1901
|
+
}
|
|
1902
|
+
]
|
|
1903
|
+
},
|
|
1784
1904
|
{
|
|
1785
1905
|
"type": "describe",
|
|
1786
1906
|
"name": "given the [Testing/Popups/Menu, MenuWithFallbackPlacements] example is rendered",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "15.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "15.1.
|
|
23
|
-
"@workday/canvas-kit-react": "15.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^15.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "15.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "15.1.9",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "15.1.9",
|
|
23
|
+
"@workday/canvas-kit-react": "15.1.9",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^15.1.9",
|
|
25
|
+
"@workday/canvas-kit-styling": "15.1.9",
|
|
26
26
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.2.0"
|
|
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
|
|
|
19
19
|
"@emotion/react": "11.11.4",
|
|
20
20
|
"@types/react": "18.2.60",
|
|
21
21
|
"@types/react-dom": "18.2.19",
|
|
22
|
-
"@workday/canvas-kit-labs-react": "15.1.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "15.1.
|
|
24
|
-
"@workday/canvas-kit-react": "15.1.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^15.1.
|
|
26
|
-
"@workday/canvas-kit-styling": "15.1.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "15.1.9",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "15.1.9",
|
|
24
|
+
"@workday/canvas-kit-react": "15.1.9",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^15.1.9",
|
|
26
|
+
"@workday/canvas-kit-styling": "15.1.9",
|
|
27
27
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.2.0"
|
|
@@ -33,6 +33,8 @@ yarn add @workday/canvas-kit-react
|
|
|
33
33
|
`Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
|
|
34
34
|
model which composes a list model and a popup model and sets up accessibility features for you.
|
|
35
35
|
|
|
36
|
+
> **Note:** When content exceeds `60vh`, the menu content is clipped and the menu becomes scrollable.
|
|
37
|
+
|
|
36
38
|
### Context Menu
|
|
37
39
|
|
|
38
40
|
<ExampleCodeBlock code={ContextMenu} />
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
4
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
6
|
+
|
|
7
|
+
export default () => {
|
|
8
|
+
const [selected, setSelected] = React.useState('');
|
|
9
|
+
return (
|
|
10
|
+
<Menu
|
|
11
|
+
id="first-menu"
|
|
12
|
+
onSelect={data => {
|
|
13
|
+
setSelected(data.id);
|
|
14
|
+
}}
|
|
15
|
+
>
|
|
16
|
+
<Menu.Target>Open Menu</Menu.Target>
|
|
17
|
+
<Menu.Popper>
|
|
18
|
+
<Menu.Card>
|
|
19
|
+
<Menu.List>
|
|
20
|
+
<Menu.Item data-id="first-item">First Item</Menu.Item>
|
|
21
|
+
<Menu.Submenu id="second-menu">
|
|
22
|
+
<Menu.Submenu.TargetItem data-id="second-item">Second Item</Menu.Submenu.TargetItem>
|
|
23
|
+
<Menu.Submenu.Popper>
|
|
24
|
+
<Menu.Submenu.Card>
|
|
25
|
+
<Menu.Submenu.List>
|
|
26
|
+
<Menu.Submenu.Item data-id="second-first-sub-item">
|
|
27
|
+
Second: First Sub Item
|
|
28
|
+
</Menu.Submenu.Item>
|
|
29
|
+
<Menu.Submenu.Item data-id="second-second-sub-item">
|
|
30
|
+
Second: Second Sub Item
|
|
31
|
+
</Menu.Submenu.Item>
|
|
32
|
+
</Menu.Submenu.List>
|
|
33
|
+
</Menu.Submenu.Card>
|
|
34
|
+
</Menu.Submenu.Popper>
|
|
35
|
+
</Menu.Submenu>
|
|
36
|
+
<Menu.Submenu id="third-menu">
|
|
37
|
+
<Menu.Submenu.TargetItem data-id="third-item">Third Item</Menu.Submenu.TargetItem>
|
|
38
|
+
<Menu.Submenu.Popper>
|
|
39
|
+
<Menu.Submenu.Card>
|
|
40
|
+
<Menu.Submenu.List>
|
|
41
|
+
<Menu.Submenu.Item data-id="third-first-sub-item">
|
|
42
|
+
Third: First Sub Item
|
|
43
|
+
</Menu.Submenu.Item>
|
|
44
|
+
<Menu.Submenu.Item data-id="third-second-sub-item">
|
|
45
|
+
Third: Second Sub Item
|
|
46
|
+
</Menu.Submenu.Item>
|
|
47
|
+
</Menu.Submenu.List>
|
|
48
|
+
</Menu.Submenu.Card>
|
|
49
|
+
</Menu.Submenu.Popper>
|
|
50
|
+
</Menu.Submenu>
|
|
51
|
+
<Menu.Item data-id="fourth-item">Fourth Item</Menu.Item>
|
|
52
|
+
</Menu.List>
|
|
53
|
+
</Menu.Card>
|
|
54
|
+
</Menu.Popper>
|
|
55
|
+
<BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
|
|
56
|
+
Selected: <span data-testid="output">{selected}</span>
|
|
57
|
+
</BodyText>
|
|
58
|
+
</Menu>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
@@ -405,7 +405,9 @@ To style elements in the render function, we'll need to choose what elements to
|
|
|
405
405
|
the example below, we're able to spread the parts directly to elements. The Stencil will generate
|
|
406
406
|
the type and value most appropriate for the context the part is used. In the Stencil, the part is
|
|
407
407
|
represented by a string that looks like `[data-part="{partValue}"]` and in the render function, it
|
|
408
|
-
is an object that looks like `{'data-part': partValue}`.
|
|
408
|
+
is an object that looks like `{'data-part': partValue}`. That object also has a non-enumerable
|
|
409
|
+
`selector` property (`[data-part="{partValue}"]`) for targeting the part from another stencil's
|
|
410
|
+
style object without writing the attribute selector by hand.
|
|
409
411
|
|
|
410
412
|
```jsx
|
|
411
413
|
import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
|
|
@@ -444,6 +446,22 @@ const MyButton = ({children, ...elemProps}) => {
|
|
|
444
446
|
};
|
|
445
447
|
```
|
|
446
448
|
|
|
449
|
+
To target a part from another stencil, use `.selector`. Spreading the part onto an element still
|
|
450
|
+
only applies `data-part`.
|
|
451
|
+
|
|
452
|
+
```jsx
|
|
453
|
+
const cardStencil = createStencil({
|
|
454
|
+
base: {
|
|
455
|
+
[`&:where(:has(${myButtonStencil.parts.icon.selector}))`]: {
|
|
456
|
+
paddingInlineStart: 0,
|
|
457
|
+
},
|
|
458
|
+
[`& ${myButtonStencil.parts.label.selector}`]: {
|
|
459
|
+
fontWeight: 700,
|
|
460
|
+
},
|
|
461
|
+
},
|
|
462
|
+
});
|
|
463
|
+
```
|
|
464
|
+
|
|
447
465
|
As a reusable component, you can use component parts to style elements that are not exposed in the
|
|
448
466
|
API. Consumers can also use the type safe Stencil to target that element to style it as well. As a
|
|
449
467
|
general rule, a Stencil maps to a component. Multiple Stencils per component usually means nested
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.9",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^15.1.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^15.1.
|
|
52
|
-
"@workday/canvas-kit-react": "^15.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^15.1.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^15.1.9",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^15.1.9",
|
|
52
|
+
"@workday/canvas-kit-react": "^15.1.9",
|
|
53
|
+
"@workday/canvas-kit-styling": "^15.1.9",
|
|
54
54
|
"@workday/canvas-system-icons-web": "4.2.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "4.4.0",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "1beac223ba75b47655ae919851bd3766e4c1c51f"
|
|
67
67
|
}
|