@workday/canvas-kit-docs 16.0.5 → 16.0.8
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 +894 -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/react/tabs/examples/OverflowTabs.tsx +9 -8
- package/dist/mdx/react/tooltip/examples/Ellipsis.tsx +5 -0
- package/dist/mdx/styling/mdx/Stencils.mdx +19 -1
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -160282,6 +160282,60 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
160282
160282
|
}
|
|
160283
160283
|
}
|
|
160284
160284
|
},
|
|
160285
|
+
{
|
|
160286
|
+
"name": "isElementDisabled",
|
|
160287
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/isElementDisabled.ts",
|
|
160288
|
+
"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.).",
|
|
160289
|
+
"declarations": [
|
|
160290
|
+
{
|
|
160291
|
+
"name": "isElementDisabled",
|
|
160292
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/isElementDisabled.ts"
|
|
160293
|
+
}
|
|
160294
|
+
],
|
|
160295
|
+
"tags": {},
|
|
160296
|
+
"type": {
|
|
160297
|
+
"kind": "function",
|
|
160298
|
+
"parameters": [
|
|
160299
|
+
{
|
|
160300
|
+
"kind": "parameter",
|
|
160301
|
+
"name": "element",
|
|
160302
|
+
"type": {
|
|
160303
|
+
"kind": "union",
|
|
160304
|
+
"value": [
|
|
160305
|
+
{
|
|
160306
|
+
"kind": "external",
|
|
160307
|
+
"name": "Element",
|
|
160308
|
+
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
|
|
160309
|
+
},
|
|
160310
|
+
{
|
|
160311
|
+
"kind": "primitive",
|
|
160312
|
+
"value": "null"
|
|
160313
|
+
},
|
|
160314
|
+
{
|
|
160315
|
+
"kind": "primitive",
|
|
160316
|
+
"value": "undefined"
|
|
160317
|
+
}
|
|
160318
|
+
]
|
|
160319
|
+
},
|
|
160320
|
+
"required": false,
|
|
160321
|
+
"rest": false,
|
|
160322
|
+
"description": "",
|
|
160323
|
+
"declarations": [
|
|
160324
|
+
{
|
|
160325
|
+
"name": "element",
|
|
160326
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/isElementDisabled.ts"
|
|
160327
|
+
}
|
|
160328
|
+
],
|
|
160329
|
+
"tags": {}
|
|
160330
|
+
}
|
|
160331
|
+
],
|
|
160332
|
+
"members": [],
|
|
160333
|
+
"returnType": {
|
|
160334
|
+
"kind": "primitive",
|
|
160335
|
+
"value": "boolean"
|
|
160336
|
+
}
|
|
160337
|
+
}
|
|
160338
|
+
},
|
|
160285
160339
|
{
|
|
160286
160340
|
"name": "orientationKeyMap",
|
|
160287
160341
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/keyUtils.ts",
|
|
@@ -161359,6 +161413,710 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
161359
161413
|
}
|
|
161360
161414
|
}
|
|
161361
161415
|
},
|
|
161416
|
+
{
|
|
161417
|
+
"name": "listBoxContainerStencil",
|
|
161418
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
161419
|
+
"description": "",
|
|
161420
|
+
"declarations": [
|
|
161421
|
+
{
|
|
161422
|
+
"name": "listBoxContainerStencil",
|
|
161423
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
|
|
161424
|
+
}
|
|
161425
|
+
],
|
|
161426
|
+
"tags": {},
|
|
161427
|
+
"type": {
|
|
161428
|
+
"kind": "function",
|
|
161429
|
+
"parameters": [
|
|
161430
|
+
{
|
|
161431
|
+
"kind": "parameter",
|
|
161432
|
+
"name": "options",
|
|
161433
|
+
"type": {
|
|
161434
|
+
"kind": "conditional",
|
|
161435
|
+
"check": {
|
|
161436
|
+
"kind": "tuple",
|
|
161437
|
+
"value": [
|
|
161438
|
+
{
|
|
161439
|
+
"kind": "symbol",
|
|
161440
|
+
"name": "E",
|
|
161441
|
+
"value": "E"
|
|
161442
|
+
}
|
|
161443
|
+
]
|
|
161444
|
+
},
|
|
161445
|
+
"extends": {
|
|
161446
|
+
"kind": "tuple",
|
|
161447
|
+
"value": [
|
|
161448
|
+
{
|
|
161449
|
+
"kind": "primitive",
|
|
161450
|
+
"value": "never"
|
|
161451
|
+
}
|
|
161452
|
+
]
|
|
161453
|
+
},
|
|
161454
|
+
"trueType": {
|
|
161455
|
+
"kind": "intersection",
|
|
161456
|
+
"value": [
|
|
161457
|
+
{
|
|
161458
|
+
"kind": "symbol",
|
|
161459
|
+
"name": "ModifierValuesStencil",
|
|
161460
|
+
"typeParameters": [
|
|
161461
|
+
{
|
|
161462
|
+
"kind": "symbol",
|
|
161463
|
+
"name": "M",
|
|
161464
|
+
"value": "M"
|
|
161465
|
+
},
|
|
161466
|
+
{
|
|
161467
|
+
"kind": "symbol",
|
|
161468
|
+
"name": "V",
|
|
161469
|
+
"value": "V"
|
|
161470
|
+
}
|
|
161471
|
+
],
|
|
161472
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
161473
|
+
},
|
|
161474
|
+
{
|
|
161475
|
+
"kind": "symbol",
|
|
161476
|
+
"name": "VariableValuesStencil",
|
|
161477
|
+
"typeParameters": [
|
|
161478
|
+
{
|
|
161479
|
+
"kind": "symbol",
|
|
161480
|
+
"name": "V",
|
|
161481
|
+
"value": "V"
|
|
161482
|
+
}
|
|
161483
|
+
],
|
|
161484
|
+
"value": "VariableValuesStencil<V>"
|
|
161485
|
+
}
|
|
161486
|
+
]
|
|
161487
|
+
},
|
|
161488
|
+
"falseType": {
|
|
161489
|
+
"kind": "conditional",
|
|
161490
|
+
"check": {
|
|
161491
|
+
"kind": "symbol",
|
|
161492
|
+
"name": "E",
|
|
161493
|
+
"value": "E"
|
|
161494
|
+
},
|
|
161495
|
+
"extends": {
|
|
161496
|
+
"kind": "symbol",
|
|
161497
|
+
"name": "BaseStencil",
|
|
161498
|
+
"typeParameters": [
|
|
161499
|
+
{
|
|
161500
|
+
"kind": "infer",
|
|
161501
|
+
"value": {
|
|
161502
|
+
"kind": "typeParameter",
|
|
161503
|
+
"name": "ME",
|
|
161504
|
+
"required": true
|
|
161505
|
+
}
|
|
161506
|
+
},
|
|
161507
|
+
{
|
|
161508
|
+
"kind": "primitive",
|
|
161509
|
+
"value": "any"
|
|
161510
|
+
},
|
|
161511
|
+
{
|
|
161512
|
+
"kind": "infer",
|
|
161513
|
+
"value": {
|
|
161514
|
+
"kind": "typeParameter",
|
|
161515
|
+
"name": "VE",
|
|
161516
|
+
"required": true
|
|
161517
|
+
}
|
|
161518
|
+
},
|
|
161519
|
+
{
|
|
161520
|
+
"kind": "primitive",
|
|
161521
|
+
"value": "any"
|
|
161522
|
+
},
|
|
161523
|
+
{
|
|
161524
|
+
"kind": "primitive",
|
|
161525
|
+
"value": "any"
|
|
161526
|
+
}
|
|
161527
|
+
],
|
|
161528
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
161529
|
+
},
|
|
161530
|
+
"trueType": {
|
|
161531
|
+
"kind": "intersection",
|
|
161532
|
+
"value": [
|
|
161533
|
+
{
|
|
161534
|
+
"kind": "symbol",
|
|
161535
|
+
"name": "ModifierValuesStencil",
|
|
161536
|
+
"typeParameters": [
|
|
161537
|
+
{
|
|
161538
|
+
"kind": "intersection",
|
|
161539
|
+
"value": [
|
|
161540
|
+
{
|
|
161541
|
+
"kind": "symbol",
|
|
161542
|
+
"name": "ME",
|
|
161543
|
+
"value": "ME"
|
|
161544
|
+
},
|
|
161545
|
+
{
|
|
161546
|
+
"kind": "symbol",
|
|
161547
|
+
"name": "M",
|
|
161548
|
+
"value": "M"
|
|
161549
|
+
}
|
|
161550
|
+
]
|
|
161551
|
+
},
|
|
161552
|
+
{
|
|
161553
|
+
"kind": "intersection",
|
|
161554
|
+
"value": [
|
|
161555
|
+
{
|
|
161556
|
+
"kind": "symbol",
|
|
161557
|
+
"name": "VE",
|
|
161558
|
+
"value": "VE"
|
|
161559
|
+
},
|
|
161560
|
+
{
|
|
161561
|
+
"kind": "symbol",
|
|
161562
|
+
"name": "V",
|
|
161563
|
+
"value": "V"
|
|
161564
|
+
}
|
|
161565
|
+
]
|
|
161566
|
+
}
|
|
161567
|
+
],
|
|
161568
|
+
"value": "ModifierValuesStencil<M, V>"
|
|
161569
|
+
},
|
|
161570
|
+
{
|
|
161571
|
+
"kind": "symbol",
|
|
161572
|
+
"name": "VariableValuesStencil",
|
|
161573
|
+
"typeParameters": [
|
|
161574
|
+
{
|
|
161575
|
+
"kind": "intersection",
|
|
161576
|
+
"value": [
|
|
161577
|
+
{
|
|
161578
|
+
"kind": "symbol",
|
|
161579
|
+
"name": "VE",
|
|
161580
|
+
"value": "VE"
|
|
161581
|
+
},
|
|
161582
|
+
{
|
|
161583
|
+
"kind": "symbol",
|
|
161584
|
+
"name": "V",
|
|
161585
|
+
"value": "V"
|
|
161586
|
+
}
|
|
161587
|
+
]
|
|
161588
|
+
}
|
|
161589
|
+
],
|
|
161590
|
+
"value": "VariableValuesStencil<V>"
|
|
161591
|
+
}
|
|
161592
|
+
]
|
|
161593
|
+
},
|
|
161594
|
+
"falseType": {
|
|
161595
|
+
"kind": "primitive",
|
|
161596
|
+
"value": "never"
|
|
161597
|
+
}
|
|
161598
|
+
}
|
|
161599
|
+
},
|
|
161600
|
+
"required": false,
|
|
161601
|
+
"rest": false,
|
|
161602
|
+
"description": "",
|
|
161603
|
+
"declarations": [
|
|
161604
|
+
{
|
|
161605
|
+
"name": "options",
|
|
161606
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161607
|
+
}
|
|
161608
|
+
],
|
|
161609
|
+
"tags": {}
|
|
161610
|
+
}
|
|
161611
|
+
],
|
|
161612
|
+
"members": [
|
|
161613
|
+
{
|
|
161614
|
+
"kind": "property",
|
|
161615
|
+
"name": "parts",
|
|
161616
|
+
"required": true,
|
|
161617
|
+
"type": {
|
|
161618
|
+
"kind": "conditional",
|
|
161619
|
+
"check": {
|
|
161620
|
+
"kind": "tuple",
|
|
161621
|
+
"value": [
|
|
161622
|
+
{
|
|
161623
|
+
"kind": "symbol",
|
|
161624
|
+
"name": "E",
|
|
161625
|
+
"value": "E"
|
|
161626
|
+
}
|
|
161627
|
+
]
|
|
161628
|
+
},
|
|
161629
|
+
"extends": {
|
|
161630
|
+
"kind": "tuple",
|
|
161631
|
+
"value": [
|
|
161632
|
+
{
|
|
161633
|
+
"kind": "symbol",
|
|
161634
|
+
"name": "BaseStencil",
|
|
161635
|
+
"typeParameters": [
|
|
161636
|
+
{
|
|
161637
|
+
"kind": "primitive",
|
|
161638
|
+
"value": "any"
|
|
161639
|
+
},
|
|
161640
|
+
{
|
|
161641
|
+
"kind": "infer",
|
|
161642
|
+
"value": {
|
|
161643
|
+
"kind": "typeParameter",
|
|
161644
|
+
"name": "PE",
|
|
161645
|
+
"required": true
|
|
161646
|
+
}
|
|
161647
|
+
},
|
|
161648
|
+
{
|
|
161649
|
+
"kind": "primitive",
|
|
161650
|
+
"value": "any"
|
|
161651
|
+
},
|
|
161652
|
+
{
|
|
161653
|
+
"kind": "primitive",
|
|
161654
|
+
"value": "any"
|
|
161655
|
+
},
|
|
161656
|
+
{
|
|
161657
|
+
"kind": "primitive",
|
|
161658
|
+
"value": "any"
|
|
161659
|
+
}
|
|
161660
|
+
],
|
|
161661
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
161662
|
+
}
|
|
161663
|
+
]
|
|
161664
|
+
},
|
|
161665
|
+
"trueType": {
|
|
161666
|
+
"kind": "symbol",
|
|
161667
|
+
"name": "StencilPartProps",
|
|
161668
|
+
"typeParameters": [
|
|
161669
|
+
{
|
|
161670
|
+
"kind": "intersection",
|
|
161671
|
+
"value": [
|
|
161672
|
+
{
|
|
161673
|
+
"kind": "symbol",
|
|
161674
|
+
"name": "PE",
|
|
161675
|
+
"value": "PE"
|
|
161676
|
+
},
|
|
161677
|
+
{
|
|
161678
|
+
"kind": "symbol",
|
|
161679
|
+
"name": "P",
|
|
161680
|
+
"value": "P"
|
|
161681
|
+
}
|
|
161682
|
+
]
|
|
161683
|
+
}
|
|
161684
|
+
],
|
|
161685
|
+
"value": "StencilPartProps<T>"
|
|
161686
|
+
},
|
|
161687
|
+
"falseType": {
|
|
161688
|
+
"kind": "symbol",
|
|
161689
|
+
"name": "StencilPartProps",
|
|
161690
|
+
"typeParameters": [
|
|
161691
|
+
{
|
|
161692
|
+
"kind": "symbol",
|
|
161693
|
+
"name": "P",
|
|
161694
|
+
"value": "P"
|
|
161695
|
+
}
|
|
161696
|
+
],
|
|
161697
|
+
"value": "StencilPartProps<T>"
|
|
161698
|
+
}
|
|
161699
|
+
},
|
|
161700
|
+
"description": "",
|
|
161701
|
+
"declarations": [
|
|
161702
|
+
{
|
|
161703
|
+
"name": "parts",
|
|
161704
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161705
|
+
}
|
|
161706
|
+
],
|
|
161707
|
+
"tags": {}
|
|
161708
|
+
},
|
|
161709
|
+
{
|
|
161710
|
+
"kind": "property",
|
|
161711
|
+
"name": "vars",
|
|
161712
|
+
"required": true,
|
|
161713
|
+
"type": {
|
|
161714
|
+
"kind": "symbol",
|
|
161715
|
+
"name": "StencilDefaultVars",
|
|
161716
|
+
"typeParameters": [
|
|
161717
|
+
{
|
|
161718
|
+
"kind": "symbol",
|
|
161719
|
+
"name": "V",
|
|
161720
|
+
"value": "V"
|
|
161721
|
+
},
|
|
161722
|
+
{
|
|
161723
|
+
"kind": "symbol",
|
|
161724
|
+
"name": "E",
|
|
161725
|
+
"value": "E"
|
|
161726
|
+
},
|
|
161727
|
+
{
|
|
161728
|
+
"kind": "symbol",
|
|
161729
|
+
"name": "ID",
|
|
161730
|
+
"value": "ID"
|
|
161731
|
+
}
|
|
161732
|
+
],
|
|
161733
|
+
"value": "StencilDefaultVars<V, E, ID>"
|
|
161734
|
+
},
|
|
161735
|
+
"description": "",
|
|
161736
|
+
"declarations": [
|
|
161737
|
+
{
|
|
161738
|
+
"name": "vars",
|
|
161739
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161740
|
+
}
|
|
161741
|
+
],
|
|
161742
|
+
"tags": {}
|
|
161743
|
+
},
|
|
161744
|
+
{
|
|
161745
|
+
"kind": "property",
|
|
161746
|
+
"name": "base",
|
|
161747
|
+
"required": true,
|
|
161748
|
+
"type": {
|
|
161749
|
+
"kind": "primitive",
|
|
161750
|
+
"value": "string"
|
|
161751
|
+
},
|
|
161752
|
+
"description": "",
|
|
161753
|
+
"declarations": [
|
|
161754
|
+
{
|
|
161755
|
+
"name": "base",
|
|
161756
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161757
|
+
}
|
|
161758
|
+
],
|
|
161759
|
+
"tags": {}
|
|
161760
|
+
},
|
|
161761
|
+
{
|
|
161762
|
+
"kind": "property",
|
|
161763
|
+
"name": "modifiers",
|
|
161764
|
+
"required": true,
|
|
161765
|
+
"type": {
|
|
161766
|
+
"kind": "conditional",
|
|
161767
|
+
"check": {
|
|
161768
|
+
"kind": "tuple",
|
|
161769
|
+
"value": [
|
|
161770
|
+
{
|
|
161771
|
+
"kind": "symbol",
|
|
161772
|
+
"name": "E",
|
|
161773
|
+
"value": "E"
|
|
161774
|
+
}
|
|
161775
|
+
]
|
|
161776
|
+
},
|
|
161777
|
+
"extends": {
|
|
161778
|
+
"kind": "tuple",
|
|
161779
|
+
"value": [
|
|
161780
|
+
{
|
|
161781
|
+
"kind": "symbol",
|
|
161782
|
+
"name": "BaseStencil",
|
|
161783
|
+
"typeParameters": [
|
|
161784
|
+
{
|
|
161785
|
+
"kind": "infer",
|
|
161786
|
+
"value": {
|
|
161787
|
+
"kind": "typeParameter",
|
|
161788
|
+
"name": "ME",
|
|
161789
|
+
"required": true
|
|
161790
|
+
}
|
|
161791
|
+
},
|
|
161792
|
+
{
|
|
161793
|
+
"kind": "primitive",
|
|
161794
|
+
"value": "any"
|
|
161795
|
+
},
|
|
161796
|
+
{
|
|
161797
|
+
"kind": "infer",
|
|
161798
|
+
"value": {
|
|
161799
|
+
"kind": "typeParameter",
|
|
161800
|
+
"name": "VE",
|
|
161801
|
+
"required": true
|
|
161802
|
+
}
|
|
161803
|
+
},
|
|
161804
|
+
{
|
|
161805
|
+
"kind": "primitive",
|
|
161806
|
+
"value": "any"
|
|
161807
|
+
},
|
|
161808
|
+
{
|
|
161809
|
+
"kind": "primitive",
|
|
161810
|
+
"value": "any"
|
|
161811
|
+
}
|
|
161812
|
+
],
|
|
161813
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
161814
|
+
}
|
|
161815
|
+
]
|
|
161816
|
+
},
|
|
161817
|
+
"trueType": {
|
|
161818
|
+
"kind": "symbol",
|
|
161819
|
+
"name": "StencilModifierReturn",
|
|
161820
|
+
"typeParameters": [
|
|
161821
|
+
{
|
|
161822
|
+
"kind": "intersection",
|
|
161823
|
+
"value": [
|
|
161824
|
+
{
|
|
161825
|
+
"kind": "symbol",
|
|
161826
|
+
"name": "ME",
|
|
161827
|
+
"value": "ME"
|
|
161828
|
+
},
|
|
161829
|
+
{
|
|
161830
|
+
"kind": "symbol",
|
|
161831
|
+
"name": "M",
|
|
161832
|
+
"value": "M"
|
|
161833
|
+
}
|
|
161834
|
+
]
|
|
161835
|
+
},
|
|
161836
|
+
{
|
|
161837
|
+
"kind": "intersection",
|
|
161838
|
+
"value": [
|
|
161839
|
+
{
|
|
161840
|
+
"kind": "symbol",
|
|
161841
|
+
"name": "VE",
|
|
161842
|
+
"value": "VE"
|
|
161843
|
+
},
|
|
161844
|
+
{
|
|
161845
|
+
"kind": "symbol",
|
|
161846
|
+
"name": "V",
|
|
161847
|
+
"value": "V"
|
|
161848
|
+
}
|
|
161849
|
+
]
|
|
161850
|
+
}
|
|
161851
|
+
],
|
|
161852
|
+
"value": "StencilModifierReturn<M, V>"
|
|
161853
|
+
},
|
|
161854
|
+
"falseType": {
|
|
161855
|
+
"kind": "symbol",
|
|
161856
|
+
"name": "StencilModifierReturn",
|
|
161857
|
+
"typeParameters": [
|
|
161858
|
+
{
|
|
161859
|
+
"kind": "symbol",
|
|
161860
|
+
"name": "M",
|
|
161861
|
+
"value": "M"
|
|
161862
|
+
},
|
|
161863
|
+
{
|
|
161864
|
+
"kind": "symbol",
|
|
161865
|
+
"name": "V",
|
|
161866
|
+
"value": "V"
|
|
161867
|
+
}
|
|
161868
|
+
],
|
|
161869
|
+
"value": "StencilModifierReturn<M, V>"
|
|
161870
|
+
}
|
|
161871
|
+
},
|
|
161872
|
+
"description": "",
|
|
161873
|
+
"declarations": [
|
|
161874
|
+
{
|
|
161875
|
+
"name": "modifiers",
|
|
161876
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161877
|
+
}
|
|
161878
|
+
],
|
|
161879
|
+
"tags": {}
|
|
161880
|
+
},
|
|
161881
|
+
{
|
|
161882
|
+
"kind": "property",
|
|
161883
|
+
"name": "defaultModifiers",
|
|
161884
|
+
"required": true,
|
|
161885
|
+
"type": {
|
|
161886
|
+
"kind": "conditional",
|
|
161887
|
+
"check": {
|
|
161888
|
+
"kind": "tuple",
|
|
161889
|
+
"value": [
|
|
161890
|
+
{
|
|
161891
|
+
"kind": "symbol",
|
|
161892
|
+
"name": "E",
|
|
161893
|
+
"value": "E"
|
|
161894
|
+
}
|
|
161895
|
+
]
|
|
161896
|
+
},
|
|
161897
|
+
"extends": {
|
|
161898
|
+
"kind": "tuple",
|
|
161899
|
+
"value": [
|
|
161900
|
+
{
|
|
161901
|
+
"kind": "symbol",
|
|
161902
|
+
"name": "BaseStencil",
|
|
161903
|
+
"typeParameters": [
|
|
161904
|
+
{
|
|
161905
|
+
"kind": "infer",
|
|
161906
|
+
"value": {
|
|
161907
|
+
"kind": "typeParameter",
|
|
161908
|
+
"name": "ME",
|
|
161909
|
+
"required": true
|
|
161910
|
+
}
|
|
161911
|
+
},
|
|
161912
|
+
{
|
|
161913
|
+
"kind": "primitive",
|
|
161914
|
+
"value": "any"
|
|
161915
|
+
},
|
|
161916
|
+
{
|
|
161917
|
+
"kind": "primitive",
|
|
161918
|
+
"value": "any"
|
|
161919
|
+
},
|
|
161920
|
+
{
|
|
161921
|
+
"kind": "primitive",
|
|
161922
|
+
"value": "any"
|
|
161923
|
+
},
|
|
161924
|
+
{
|
|
161925
|
+
"kind": "primitive",
|
|
161926
|
+
"value": "any"
|
|
161927
|
+
}
|
|
161928
|
+
],
|
|
161929
|
+
"value": "BaseStencil<M, P, V, E, ID>"
|
|
161930
|
+
}
|
|
161931
|
+
]
|
|
161932
|
+
},
|
|
161933
|
+
"trueType": {
|
|
161934
|
+
"kind": "symbol",
|
|
161935
|
+
"name": "StencilDefaultModifierReturn",
|
|
161936
|
+
"typeParameters": [
|
|
161937
|
+
{
|
|
161938
|
+
"kind": "intersection",
|
|
161939
|
+
"value": [
|
|
161940
|
+
{
|
|
161941
|
+
"kind": "symbol",
|
|
161942
|
+
"name": "ME",
|
|
161943
|
+
"value": "ME"
|
|
161944
|
+
},
|
|
161945
|
+
{
|
|
161946
|
+
"kind": "symbol",
|
|
161947
|
+
"name": "M",
|
|
161948
|
+
"value": "M"
|
|
161949
|
+
}
|
|
161950
|
+
]
|
|
161951
|
+
}
|
|
161952
|
+
],
|
|
161953
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
161954
|
+
},
|
|
161955
|
+
"falseType": {
|
|
161956
|
+
"kind": "symbol",
|
|
161957
|
+
"name": "StencilDefaultModifierReturn",
|
|
161958
|
+
"typeParameters": [
|
|
161959
|
+
{
|
|
161960
|
+
"kind": "symbol",
|
|
161961
|
+
"name": "M",
|
|
161962
|
+
"value": "M"
|
|
161963
|
+
}
|
|
161964
|
+
],
|
|
161965
|
+
"value": "StencilDefaultModifierReturn<M>"
|
|
161966
|
+
}
|
|
161967
|
+
},
|
|
161968
|
+
"description": "",
|
|
161969
|
+
"declarations": [
|
|
161970
|
+
{
|
|
161971
|
+
"name": "defaultModifiers",
|
|
161972
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161973
|
+
}
|
|
161974
|
+
],
|
|
161975
|
+
"tags": {}
|
|
161976
|
+
},
|
|
161977
|
+
{
|
|
161978
|
+
"kind": "property",
|
|
161979
|
+
"name": "__extends",
|
|
161980
|
+
"required": false,
|
|
161981
|
+
"type": {
|
|
161982
|
+
"kind": "symbol",
|
|
161983
|
+
"name": "E",
|
|
161984
|
+
"value": "E"
|
|
161985
|
+
},
|
|
161986
|
+
"description": "",
|
|
161987
|
+
"declarations": [
|
|
161988
|
+
{
|
|
161989
|
+
"name": "__extends",
|
|
161990
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
161991
|
+
}
|
|
161992
|
+
],
|
|
161993
|
+
"tags": {}
|
|
161994
|
+
},
|
|
161995
|
+
{
|
|
161996
|
+
"kind": "property",
|
|
161997
|
+
"name": "__vars",
|
|
161998
|
+
"required": true,
|
|
161999
|
+
"type": {
|
|
162000
|
+
"kind": "symbol",
|
|
162001
|
+
"name": "V",
|
|
162002
|
+
"value": "V"
|
|
162003
|
+
},
|
|
162004
|
+
"description": "",
|
|
162005
|
+
"declarations": [
|
|
162006
|
+
{
|
|
162007
|
+
"name": "__vars",
|
|
162008
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
162009
|
+
}
|
|
162010
|
+
],
|
|
162011
|
+
"tags": {}
|
|
162012
|
+
},
|
|
162013
|
+
{
|
|
162014
|
+
"kind": "property",
|
|
162015
|
+
"name": "__modifiers",
|
|
162016
|
+
"required": true,
|
|
162017
|
+
"type": {
|
|
162018
|
+
"kind": "symbol",
|
|
162019
|
+
"name": "M",
|
|
162020
|
+
"value": "M"
|
|
162021
|
+
},
|
|
162022
|
+
"description": "",
|
|
162023
|
+
"declarations": [
|
|
162024
|
+
{
|
|
162025
|
+
"name": "__modifiers",
|
|
162026
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
162027
|
+
}
|
|
162028
|
+
],
|
|
162029
|
+
"tags": {}
|
|
162030
|
+
},
|
|
162031
|
+
{
|
|
162032
|
+
"kind": "property",
|
|
162033
|
+
"name": "__id",
|
|
162034
|
+
"required": true,
|
|
162035
|
+
"type": {
|
|
162036
|
+
"kind": "symbol",
|
|
162037
|
+
"name": "ID",
|
|
162038
|
+
"value": "ID"
|
|
162039
|
+
},
|
|
162040
|
+
"description": "",
|
|
162041
|
+
"declarations": [
|
|
162042
|
+
{
|
|
162043
|
+
"name": "__id",
|
|
162044
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
162045
|
+
}
|
|
162046
|
+
],
|
|
162047
|
+
"tags": {}
|
|
162048
|
+
},
|
|
162049
|
+
{
|
|
162050
|
+
"kind": "property",
|
|
162051
|
+
"name": "__parts",
|
|
162052
|
+
"required": false,
|
|
162053
|
+
"type": {
|
|
162054
|
+
"kind": "symbol",
|
|
162055
|
+
"name": "P",
|
|
162056
|
+
"value": "P"
|
|
162057
|
+
},
|
|
162058
|
+
"description": "",
|
|
162059
|
+
"declarations": [
|
|
162060
|
+
{
|
|
162061
|
+
"name": "__parts",
|
|
162062
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
162063
|
+
}
|
|
162064
|
+
],
|
|
162065
|
+
"tags": {}
|
|
162066
|
+
}
|
|
162067
|
+
],
|
|
162068
|
+
"returnType": {
|
|
162069
|
+
"kind": "object",
|
|
162070
|
+
"properties": [
|
|
162071
|
+
{
|
|
162072
|
+
"kind": "property",
|
|
162073
|
+
"name": "className",
|
|
162074
|
+
"required": true,
|
|
162075
|
+
"type": {
|
|
162076
|
+
"kind": "primitive",
|
|
162077
|
+
"value": "string"
|
|
162078
|
+
},
|
|
162079
|
+
"description": "",
|
|
162080
|
+
"declarations": [
|
|
162081
|
+
{
|
|
162082
|
+
"name": "className",
|
|
162083
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
162084
|
+
}
|
|
162085
|
+
],
|
|
162086
|
+
"tags": {}
|
|
162087
|
+
},
|
|
162088
|
+
{
|
|
162089
|
+
"kind": "property",
|
|
162090
|
+
"name": "style",
|
|
162091
|
+
"required": false,
|
|
162092
|
+
"type": {
|
|
162093
|
+
"kind": "external",
|
|
162094
|
+
"name": "Record",
|
|
162095
|
+
"url": "https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type",
|
|
162096
|
+
"typeParameters": [
|
|
162097
|
+
{
|
|
162098
|
+
"kind": "primitive",
|
|
162099
|
+
"value": "string"
|
|
162100
|
+
},
|
|
162101
|
+
{
|
|
162102
|
+
"kind": "primitive",
|
|
162103
|
+
"value": "string"
|
|
162104
|
+
}
|
|
162105
|
+
]
|
|
162106
|
+
},
|
|
162107
|
+
"description": "",
|
|
162108
|
+
"declarations": [
|
|
162109
|
+
{
|
|
162110
|
+
"name": "style",
|
|
162111
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
162112
|
+
}
|
|
162113
|
+
],
|
|
162114
|
+
"tags": {}
|
|
162115
|
+
}
|
|
162116
|
+
]
|
|
162117
|
+
}
|
|
162118
|
+
}
|
|
162119
|
+
},
|
|
161362
162120
|
{
|
|
161363
162121
|
"name": "ListBox",
|
|
161364
162122
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
@@ -180142,8 +180900,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
180142
180900
|
],
|
|
180143
180901
|
"members": [],
|
|
180144
180902
|
"returnType": {
|
|
180145
|
-
"kind": "
|
|
180146
|
-
"value":
|
|
180903
|
+
"kind": "union",
|
|
180904
|
+
"value": [
|
|
180905
|
+
{
|
|
180906
|
+
"kind": "primitive",
|
|
180907
|
+
"value": "null"
|
|
180908
|
+
},
|
|
180909
|
+
{
|
|
180910
|
+
"kind": "primitive",
|
|
180911
|
+
"value": "undefined"
|
|
180912
|
+
}
|
|
180913
|
+
]
|
|
180147
180914
|
}
|
|
180148
180915
|
},
|
|
180149
180916
|
"description": "",
|
|
@@ -305439,8 +306206,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
305439
306206
|
],
|
|
305440
306207
|
"members": [],
|
|
305441
306208
|
"returnType": {
|
|
305442
|
-
"kind": "
|
|
305443
|
-
"value":
|
|
306209
|
+
"kind": "union",
|
|
306210
|
+
"value": [
|
|
306211
|
+
{
|
|
306212
|
+
"kind": "primitive",
|
|
306213
|
+
"value": "null"
|
|
306214
|
+
},
|
|
306215
|
+
{
|
|
306216
|
+
"kind": "primitive",
|
|
306217
|
+
"value": "undefined"
|
|
306218
|
+
}
|
|
306219
|
+
]
|
|
305444
306220
|
}
|
|
305445
306221
|
}
|
|
305446
306222
|
},
|
|
@@ -311012,8 +311788,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
311012
311788
|
],
|
|
311013
311789
|
"members": [],
|
|
311014
311790
|
"returnType": {
|
|
311015
|
-
"kind": "
|
|
311016
|
-
"value":
|
|
311791
|
+
"kind": "union",
|
|
311792
|
+
"value": [
|
|
311793
|
+
{
|
|
311794
|
+
"kind": "primitive",
|
|
311795
|
+
"value": "null"
|
|
311796
|
+
},
|
|
311797
|
+
{
|
|
311798
|
+
"kind": "primitive",
|
|
311799
|
+
"value": "undefined"
|
|
311800
|
+
}
|
|
311801
|
+
]
|
|
311017
311802
|
}
|
|
311018
311803
|
},
|
|
311019
311804
|
"description": "",
|
|
@@ -472959,6 +473744,40 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
472959
473744
|
}
|
|
472960
473745
|
],
|
|
472961
473746
|
"tags": {}
|
|
473747
|
+
},
|
|
473748
|
+
{
|
|
473749
|
+
"kind": "property",
|
|
473750
|
+
"name": "showDelay",
|
|
473751
|
+
"required": false,
|
|
473752
|
+
"type": {
|
|
473753
|
+
"kind": "primitive",
|
|
473754
|
+
"value": "number"
|
|
473755
|
+
},
|
|
473756
|
+
"description": "Amount of time (in ms) to delay before showing the Tooltip",
|
|
473757
|
+
"declarations": [
|
|
473758
|
+
{
|
|
473759
|
+
"name": "showDelay",
|
|
473760
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/OverflowTooltip.tsx"
|
|
473761
|
+
}
|
|
473762
|
+
],
|
|
473763
|
+
"tags": {}
|
|
473764
|
+
},
|
|
473765
|
+
{
|
|
473766
|
+
"kind": "property",
|
|
473767
|
+
"name": "hideDelay",
|
|
473768
|
+
"required": false,
|
|
473769
|
+
"type": {
|
|
473770
|
+
"kind": "primitive",
|
|
473771
|
+
"value": "number"
|
|
473772
|
+
},
|
|
473773
|
+
"description": "Amount of time (in ms) to delay before hiding the Tooltip",
|
|
473774
|
+
"declarations": [
|
|
473775
|
+
{
|
|
473776
|
+
"name": "hideDelay",
|
|
473777
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/OverflowTooltip.tsx"
|
|
473778
|
+
}
|
|
473779
|
+
],
|
|
473780
|
+
"tags": {}
|
|
472962
473781
|
}
|
|
472963
473782
|
]
|
|
472964
473783
|
}
|
|
@@ -500884,7 +501703,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
500884
501703
|
"kind": "generic",
|
|
500885
501704
|
"name": "P"
|
|
500886
501705
|
},
|
|
500887
|
-
"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```",
|
|
501706
|
+
"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```",
|
|
500888
501707
|
"declarations": [
|
|
500889
501708
|
{
|
|
500890
501709
|
"name": "parts",
|
|
@@ -502023,6 +502842,73 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
502023
502842
|
}
|
|
502024
502843
|
}
|
|
502025
502844
|
},
|
|
502845
|
+
{
|
|
502846
|
+
"name": "StencilPart",
|
|
502847
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
502848
|
+
"description": "",
|
|
502849
|
+
"declarations": [
|
|
502850
|
+
{
|
|
502851
|
+
"name": "StencilPart",
|
|
502852
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
502853
|
+
}
|
|
502854
|
+
],
|
|
502855
|
+
"tags": {},
|
|
502856
|
+
"type": {
|
|
502857
|
+
"kind": "object",
|
|
502858
|
+
"properties": [
|
|
502859
|
+
{
|
|
502860
|
+
"kind": "property",
|
|
502861
|
+
"name": "data-part",
|
|
502862
|
+
"required": true,
|
|
502863
|
+
"type": {
|
|
502864
|
+
"kind": "generic",
|
|
502865
|
+
"name": "V"
|
|
502866
|
+
},
|
|
502867
|
+
"description": "",
|
|
502868
|
+
"declarations": [
|
|
502869
|
+
{
|
|
502870
|
+
"name": "data-part",
|
|
502871
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
502872
|
+
}
|
|
502873
|
+
],
|
|
502874
|
+
"tags": {}
|
|
502875
|
+
},
|
|
502876
|
+
{
|
|
502877
|
+
"kind": "property",
|
|
502878
|
+
"name": "selector",
|
|
502879
|
+
"required": true,
|
|
502880
|
+
"type": {
|
|
502881
|
+
"kind": "unknown",
|
|
502882
|
+
"value": "unknown",
|
|
502883
|
+
"text": "`[data-part=\"${V}\"]`"
|
|
502884
|
+
},
|
|
502885
|
+
"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.",
|
|
502886
|
+
"declarations": [
|
|
502887
|
+
{
|
|
502888
|
+
"name": "selector",
|
|
502889
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
502890
|
+
}
|
|
502891
|
+
],
|
|
502892
|
+
"tags": {}
|
|
502893
|
+
}
|
|
502894
|
+
],
|
|
502895
|
+
"typeParameters": [
|
|
502896
|
+
{
|
|
502897
|
+
"kind": "typeParameter",
|
|
502898
|
+
"name": "V",
|
|
502899
|
+
"defaultValue": {
|
|
502900
|
+
"kind": "primitive",
|
|
502901
|
+
"value": "string"
|
|
502902
|
+
},
|
|
502903
|
+
"constraint": {
|
|
502904
|
+
"kind": "primitive",
|
|
502905
|
+
"value": "string"
|
|
502906
|
+
},
|
|
502907
|
+
"required": false
|
|
502908
|
+
}
|
|
502909
|
+
]
|
|
502910
|
+
}
|
|
502911
|
+
},
|
|
502026
502912
|
{
|
|
502027
502913
|
"name": "StencilPartProps",
|
|
502028
502914
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
@@ -502046,7 +502932,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
502046
502932
|
"value": {
|
|
502047
502933
|
"kind": "unknown",
|
|
502048
502934
|
"value": "unknown",
|
|
502049
|
-
"text": "{\n [K in keyof T]:
|
|
502935
|
+
"text": "{\n [K in keyof T]: StencilPart<T[K] & string>;\n}"
|
|
502050
502936
|
}
|
|
502051
502937
|
}
|
|
502052
502938
|
},
|
package/dist/es6/lib/specs.js
CHANGED
|
@@ -1895,6 +1895,20 @@ module.exports = {specifications: [
|
|
|
1895
1895
|
}
|
|
1896
1896
|
]
|
|
1897
1897
|
},
|
|
1898
|
+
{
|
|
1899
|
+
"type": "describe",
|
|
1900
|
+
"name": "when a disabled item has focus and the menu is closed and reopened",
|
|
1901
|
+
"children": [
|
|
1902
|
+
{
|
|
1903
|
+
"type": "it",
|
|
1904
|
+
"name": "should move focus to the first item instead of the disabled item"
|
|
1905
|
+
},
|
|
1906
|
+
{
|
|
1907
|
+
"type": "it",
|
|
1908
|
+
"name": "should not leave focus on the disabled item"
|
|
1909
|
+
}
|
|
1910
|
+
]
|
|
1911
|
+
},
|
|
1898
1912
|
{
|
|
1899
1913
|
"type": "describe",
|
|
1900
1914
|
"name": "when the enter key is pressed",
|
|
@@ -1917,6 +1931,112 @@ module.exports = {specifications: [
|
|
|
1917
1931
|
}
|
|
1918
1932
|
]
|
|
1919
1933
|
},
|
|
1934
|
+
{
|
|
1935
|
+
"type": "describe",
|
|
1936
|
+
"name": "given the [Components/Popups/Menu, NestedSiblings] story is rendered",
|
|
1937
|
+
"children": [
|
|
1938
|
+
{
|
|
1939
|
+
"type": "describe",
|
|
1940
|
+
"name": "when the \"Second Item\" submenu is opened by hovering",
|
|
1941
|
+
"children": [
|
|
1942
|
+
{
|
|
1943
|
+
"type": "it",
|
|
1944
|
+
"name": "should set aria-expanded to true on \"Second Item\""
|
|
1945
|
+
},
|
|
1946
|
+
{
|
|
1947
|
+
"type": "describe",
|
|
1948
|
+
"name": "when the sibling \"Third Item\" is then hovered",
|
|
1949
|
+
"children": [
|
|
1950
|
+
{
|
|
1951
|
+
"type": "it",
|
|
1952
|
+
"name": "should close the \"Second Item\" submenu"
|
|
1953
|
+
},
|
|
1954
|
+
{
|
|
1955
|
+
"type": "it",
|
|
1956
|
+
"name": "should set aria-expanded to false on \"Second Item\""
|
|
1957
|
+
},
|
|
1958
|
+
{
|
|
1959
|
+
"type": "it",
|
|
1960
|
+
"name": "should leave only the root menu and one submenu open"
|
|
1961
|
+
},
|
|
1962
|
+
{
|
|
1963
|
+
"type": "describe",
|
|
1964
|
+
"name": "when the original \"Second Item\" is hovered again",
|
|
1965
|
+
"children": [
|
|
1966
|
+
{
|
|
1967
|
+
"type": "it",
|
|
1968
|
+
"name": "should close the \"Third Item\" submenu"
|
|
1969
|
+
},
|
|
1970
|
+
{
|
|
1971
|
+
"type": "it",
|
|
1972
|
+
"name": "should leave only the root menu and one submenu open"
|
|
1973
|
+
}
|
|
1974
|
+
]
|
|
1975
|
+
}
|
|
1976
|
+
]
|
|
1977
|
+
}
|
|
1978
|
+
]
|
|
1979
|
+
},
|
|
1980
|
+
{
|
|
1981
|
+
"type": "describe",
|
|
1982
|
+
"name": "when a submenu is opened with the right arrow key",
|
|
1983
|
+
"children": [
|
|
1984
|
+
{
|
|
1985
|
+
"type": "it",
|
|
1986
|
+
"name": "should open the submenu"
|
|
1987
|
+
},
|
|
1988
|
+
{
|
|
1989
|
+
"type": "it",
|
|
1990
|
+
"name": "should keep the submenu open and move focus into it"
|
|
1991
|
+
},
|
|
1992
|
+
{
|
|
1993
|
+
"type": "describe",
|
|
1994
|
+
"name": "when the left arrow key is pressed",
|
|
1995
|
+
"children": [
|
|
1996
|
+
{
|
|
1997
|
+
"type": "it",
|
|
1998
|
+
"name": "should close the submenu"
|
|
1999
|
+
},
|
|
2000
|
+
{
|
|
2001
|
+
"type": "it",
|
|
2002
|
+
"name": "should return focus to the \"Second Item\" target"
|
|
2003
|
+
}
|
|
2004
|
+
]
|
|
2005
|
+
}
|
|
2006
|
+
]
|
|
2007
|
+
}
|
|
2008
|
+
]
|
|
2009
|
+
},
|
|
2010
|
+
{
|
|
2011
|
+
"type": "describe",
|
|
2012
|
+
"name": "given the [Components/Popups/Menu, NestedDynamic] story is rendered",
|
|
2013
|
+
"children": [
|
|
2014
|
+
{
|
|
2015
|
+
"type": "describe",
|
|
2016
|
+
"name": "when hovering deeper into a chain of nested submenus",
|
|
2017
|
+
"children": [
|
|
2018
|
+
{
|
|
2019
|
+
"type": "it",
|
|
2020
|
+
"name": "should keep the ancestor submenu open"
|
|
2021
|
+
},
|
|
2022
|
+
{
|
|
2023
|
+
"type": "it",
|
|
2024
|
+
"name": "should keep every menu in the open chain visible"
|
|
2025
|
+
},
|
|
2026
|
+
{
|
|
2027
|
+
"type": "describe",
|
|
2028
|
+
"name": "when hovering back onto the ancestor item in the open trail",
|
|
2029
|
+
"children": [
|
|
2030
|
+
{
|
|
2031
|
+
"type": "it",
|
|
2032
|
+
"name": "should keep the open trail intact"
|
|
2033
|
+
}
|
|
2034
|
+
]
|
|
2035
|
+
}
|
|
2036
|
+
]
|
|
2037
|
+
}
|
|
2038
|
+
]
|
|
2039
|
+
},
|
|
1920
2040
|
{
|
|
1921
2041
|
"type": "describe",
|
|
1922
2042
|
"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": "16.0.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.0.
|
|
23
|
-
"@workday/canvas-kit-react": "16.0.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.0.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.0.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.0.8",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.0.8",
|
|
23
|
+
"@workday/canvas-kit-react": "16.0.8",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.0.8",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.0.8",
|
|
26
26
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -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": "16.0.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.0.
|
|
24
|
-
"@workday/canvas-kit-react": "16.0.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.0.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.0.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.0.8",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.0.8",
|
|
24
|
+
"@workday/canvas-kit-react": "16.0.8",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.0.8",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.0.8",
|
|
27
27
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -34,6 +34,8 @@ yarn add @workday/canvas-kit-react
|
|
|
34
34
|
`Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
|
|
35
35
|
model which composes a list model and a popup model and sets up accessibility features for you.
|
|
36
36
|
|
|
37
|
+
> **Note:** When content exceeds `60vh`, the menu content is clipped and the menu becomes scrollable.
|
|
38
|
+
|
|
37
39
|
### Alt Example
|
|
38
40
|
|
|
39
41
|
The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
|
|
@@ -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
|
+
};
|
|
@@ -7,23 +7,24 @@ import {px2rem} from '@workday/canvas-kit-styling';
|
|
|
7
7
|
import {system} from '@workday/canvas-tokens-web';
|
|
8
8
|
|
|
9
9
|
type MyTabItem = {
|
|
10
|
-
|
|
10
|
+
contextId: string;
|
|
11
11
|
text: React.ReactNode;
|
|
12
12
|
contents: string;
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
export default () => {
|
|
16
16
|
const [items] = React.useState<MyTabItem[]>([
|
|
17
|
-
{
|
|
18
|
-
{
|
|
19
|
-
{
|
|
20
|
-
{
|
|
21
|
-
{
|
|
22
|
-
{
|
|
23
|
-
{
|
|
17
|
+
{contextId: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
|
|
18
|
+
{contextId: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
|
|
19
|
+
{contextId: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
|
|
20
|
+
{contextId: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
|
|
21
|
+
{contextId: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
|
|
22
|
+
{contextId: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
|
|
23
|
+
{contextId: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
|
|
24
24
|
]);
|
|
25
25
|
const model = useTabsModel({
|
|
26
26
|
items,
|
|
27
|
+
getId: (item: MyTabItem) => item.contextId,
|
|
27
28
|
});
|
|
28
29
|
const [containerWidth, setContainerWidth] = React.useState('100%');
|
|
29
30
|
return (
|
|
@@ -52,6 +52,11 @@ export default () => {
|
|
|
52
52
|
<OverflowTooltip>
|
|
53
53
|
<CustomContent />
|
|
54
54
|
</OverflowTooltip>
|
|
55
|
+
<OverflowTooltip showDelay={2000} hideDelay={2000}>
|
|
56
|
+
<SecondaryButton cs={{maxWidth: px2rem(200)}}>
|
|
57
|
+
2 second delay on show and hide content
|
|
58
|
+
</SecondaryButton>
|
|
59
|
+
</OverflowTooltip>
|
|
55
60
|
</React.Fragment>
|
|
56
61
|
);
|
|
57
62
|
};
|
|
@@ -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": "16.0.
|
|
3
|
+
"version": "16.0.8",
|
|
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": "^16.0.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.0.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.0.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.0.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.0.8",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.0.8",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.0.8",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.0.8",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
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": "19b3f139f43842cf3d23a14afd175ef177471536"
|
|
67
67
|
}
|