@innovaccer/design-system 2.24.0 → 2.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/css/dist/index.css +129 -1
- package/css/dist/index.css.map +1 -1
- package/css/src/components/card.css +0 -1
- package/css/src/components/listbox.css +115 -0
- package/css/src/core/animation.css +11 -0
- package/dist/.lib/tsconfig.type.tsbuildinfo +209 -4
- package/dist/core/components/organisms/listbox/Listbox.d.ts +33 -0
- package/dist/core/components/organisms/listbox/index.d.ts +3 -0
- package/dist/core/components/organisms/listbox/listboxItem/ListBody.d.ts +3 -0
- package/dist/core/components/organisms/listbox/listboxItem/ListboxItem.d.ts +23 -0
- package/dist/core/components/organisms/listbox/listboxItem/index.d.ts +1 -0
- package/dist/core/components/organisms/listbox/nestedList/Animation.d.ts +2 -0
- package/dist/core/components/organisms/listbox/nestedList/NestedList.d.ts +7 -0
- package/dist/core/components/organisms/listbox/nestedList/index.d.ts +1 -0
- package/dist/core/components/organisms/listbox/reorderList/Draggable.d.ts +71 -0
- package/dist/core/components/organisms/listbox/reorderList/DraggableList.d.ts +2 -0
- package/dist/core/components/organisms/listbox/reorderList/index.d.ts +1 -0
- package/dist/core/components/organisms/listbox/reorderList/types.d.ts +46 -0
- package/dist/core/components/organisms/listbox/reorderList/utils.d.ts +10 -0
- package/dist/core/components/organisms/listbox/utils.d.ts +1 -0
- package/dist/core/index.d.ts +1 -0
- package/dist/core/index.type.d.ts +1 -0
- package/dist/index.esm.js +1043 -86
- package/dist/index.js +925 -3
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.br +0 -0
- package/dist/index.umd.js.gz +0 -0
- package/package.json +1 -1
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
.Listbox {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
display: flex;
|
|
5
|
+
list-style-type: none;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.Listbox-item {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
padding-left: var(--spacing-2);
|
|
13
|
+
padding-right: var(--spacing-2);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.Listbox-item-wrapper:last-child > .Listbox-divider,
|
|
17
|
+
.Listbox-item--draggable:last-child .Listbox-divider {
|
|
18
|
+
background: transparent;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Sizes */
|
|
22
|
+
|
|
23
|
+
.Listbox-item--tight {
|
|
24
|
+
padding-top: var(--spacing-m);
|
|
25
|
+
padding-bottom: var(--spacing-m);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.Listbox-item--compressed {
|
|
29
|
+
padding-top: var(--spacing);
|
|
30
|
+
padding-bottom: var(--spacing);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.Listbox-item--standard {
|
|
34
|
+
padding-top: var(--spacing-l);
|
|
35
|
+
padding-bottom: var(--spacing-l);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Listbox type - option */
|
|
39
|
+
|
|
40
|
+
.Listbox-item--option {
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.Listbox-item--option:hover {
|
|
45
|
+
background-color: var(--secondary-lightest);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.Listbox-item--option:focus,
|
|
49
|
+
.Listbox-item--option:focus-visible {
|
|
50
|
+
outline: 3px auto var(--secondary-shadow);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.Listbox-item--option:active {
|
|
54
|
+
background: rgba(255, 245, 199, 0.6);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.Listbox-item--selected {
|
|
58
|
+
background: rgba(255, 245, 199, 0.6);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Listbox type - resource */
|
|
62
|
+
|
|
63
|
+
.Listbox-item--resource {
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.Listbox-item--resource:hover {
|
|
68
|
+
background-color: var(--secondary-lightest);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.Listbox-item--resource:focus,
|
|
72
|
+
.Listbox-item--resource:focus-visible {
|
|
73
|
+
outline: 3px auto var(--secondary-shadow);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.Listbox-item--resource:active {
|
|
77
|
+
background: rgba(255, 245, 199, 0.6);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.Listbox-item--activated {
|
|
81
|
+
background: rgba(255, 245, 199, 0.6);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Listbox type - description */
|
|
85
|
+
|
|
86
|
+
.Listbox-item--description:focus,
|
|
87
|
+
.Listbox-item--description:focus-visible {
|
|
88
|
+
outline: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Listbox type - disabled */
|
|
92
|
+
|
|
93
|
+
.Listbox-item--disabled {
|
|
94
|
+
opacity: 0.4;
|
|
95
|
+
pointer-events: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Listbox type - draggable */
|
|
99
|
+
|
|
100
|
+
.Listbox-item--draggable:focus {
|
|
101
|
+
outline: 3px auto var(--secondary-shadow);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.Listbox-item--drag-icon {
|
|
105
|
+
cursor: grab;
|
|
106
|
+
margin-right: var(--spacing);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.Listbox-item--drag-icon:hover {
|
|
110
|
+
color: var(--inverse);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.Listbox-item--drag-icon:active {
|
|
114
|
+
color: var(--primary);
|
|
115
|
+
}
|
|
@@ -97,3 +97,14 @@
|
|
|
97
97
|
animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
|
|
98
98
|
entryRightCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
|
|
99
99
|
}
|
|
100
|
+
|
|
101
|
+
.rotate-clockwise {
|
|
102
|
+
transform: rotateZ(360deg);
|
|
103
|
+
transition: var(--duration--moderate-02) var(--standard-productive-curve);
|
|
104
|
+
animation-fill-mode: forwards;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.rotate-anticlockwise {
|
|
108
|
+
transform: rotateZ(180deg);
|
|
109
|
+
transition: var(--duration--moderate-02) var(--standard-productive-curve);
|
|
110
|
+
}
|
|
@@ -1586,9 +1586,79 @@
|
|
|
1586
1586
|
"signature": "d72eb45fc521763fbb81b3846b3ab55e0d821d3312122e8bcdb8cb7f01ab13cf",
|
|
1587
1587
|
"affectsGlobalScope": false
|
|
1588
1588
|
},
|
|
1589
|
+
"../../core/components/organisms/listbox/reorderList/utils.ts": {
|
|
1590
|
+
"version": "5a0c604beb4196a58431791b1e7d0d7ea929bd0f88bc84a9c4b64149b5ba1e95",
|
|
1591
|
+
"signature": "981353ef92d19a5e2e6aab957773352051a34e66502aa32315769b024797a582",
|
|
1592
|
+
"affectsGlobalScope": false
|
|
1593
|
+
},
|
|
1594
|
+
"../../core/components/organisms/listbox/reorderList/types.ts": {
|
|
1595
|
+
"version": "600e7f202337b68d8bafbdf32676eb705361ab845d2d169f30665bfaa93bdb3a",
|
|
1596
|
+
"signature": "a478b071566af399be3a7deab70562cf2385bc2ec2d812f49c80dca4ed954190",
|
|
1597
|
+
"affectsGlobalScope": false
|
|
1598
|
+
},
|
|
1599
|
+
"../../core/components/organisms/listbox/reorderList/Draggable.tsx": {
|
|
1600
|
+
"version": "83ba7407ce3bbaab0acd624cefb3a4b4021a4e1b3d4838ac006bb92359a84b0a",
|
|
1601
|
+
"signature": "da41053af5069e4348360ce08db6335e1f69c6a00ab9381335652715556965de",
|
|
1602
|
+
"affectsGlobalScope": false
|
|
1603
|
+
},
|
|
1604
|
+
"../../core/components/organisms/listbox/reorderList/DraggableList.tsx": {
|
|
1605
|
+
"version": "afc81db0fc919cf1f24b7b915c13eeedb00cc8548f3afe5978f087eda6f54f2c",
|
|
1606
|
+
"signature": "a59f7dbadeb83c7cc0c3317823ee66b0d0813d7cb6ba99f39d77589aaba66c1d",
|
|
1607
|
+
"affectsGlobalScope": false
|
|
1608
|
+
},
|
|
1609
|
+
"../../core/components/organisms/listbox/reorderList/index.tsx": {
|
|
1610
|
+
"version": "b5e5d9517fc8839988bf5394fc5240f178f21a420d19f52043628e8d43b3420f",
|
|
1611
|
+
"signature": "b4b536e94d137e66abf824e56e08c5eaa9fc60cd7e2f7d0c2c39c5ef46a8b7af",
|
|
1612
|
+
"affectsGlobalScope": false
|
|
1613
|
+
},
|
|
1614
|
+
"../../core/components/organisms/listbox/utils.ts": {
|
|
1615
|
+
"version": "ced04433bfe040b2d3fadc89ec16355468b46175ac18ce334080490394f53a63",
|
|
1616
|
+
"signature": "519a5e5fe08cdde24939a8bb795a6975b12af9e7870504860fab16c45e5468bc",
|
|
1617
|
+
"affectsGlobalScope": false
|
|
1618
|
+
},
|
|
1619
|
+
"../../core/components/organisms/listbox/listboxItem/ListBody.tsx": {
|
|
1620
|
+
"version": "2fa5b28691cd663e9985ad75418b8fdab2c4ad5512b2f29c9b376bb61ffeb871",
|
|
1621
|
+
"signature": "afb9c434bfe68c0d0f31cece64f801009c305e6c5176d6b4caf14c82801484a4",
|
|
1622
|
+
"affectsGlobalScope": false
|
|
1623
|
+
},
|
|
1624
|
+
"../../core/components/organisms/listbox/nestedList/Animation.tsx": {
|
|
1625
|
+
"version": "052cec5de1810318e3c0c4c8af4a6cda585632e82755ec91faa05cc970c2fe9d",
|
|
1626
|
+
"signature": "0f37c45be6bb63c733478ca83424e8a38d04368a8cb7ef7d749b01e547071dc5",
|
|
1627
|
+
"affectsGlobalScope": false
|
|
1628
|
+
},
|
|
1629
|
+
"../../core/components/organisms/listbox/nestedList/NestedList.tsx": {
|
|
1630
|
+
"version": "99eb0f81c0d214751222ecd65a495ee76a7e3bdedc8cbb97711cb9916ca7af69",
|
|
1631
|
+
"signature": "73919875d9c99fd05fa070cdbcc8d633c82e73a706ab931b4e53c06ca410cddd",
|
|
1632
|
+
"affectsGlobalScope": false
|
|
1633
|
+
},
|
|
1634
|
+
"../../core/components/organisms/listbox/nestedList/index.tsx": {
|
|
1635
|
+
"version": "82532705abcd3a6e90162f8b6698de1426d45d1c254b7f27b5a928de6418b844",
|
|
1636
|
+
"signature": "560a461a265202d9deceb5ad4a2db497e73ffd77738a5709f52cf276d29cc0e3",
|
|
1637
|
+
"affectsGlobalScope": false
|
|
1638
|
+
},
|
|
1639
|
+
"../../core/components/organisms/listbox/listboxItem/ListboxItem.tsx": {
|
|
1640
|
+
"version": "3bc342c637a7ab189c0ff3de00fe697a5c8d2f3a8d9cf59175e40b84f4e6985e",
|
|
1641
|
+
"signature": "174c0e10235dba75b5117b7bf8ddb148b2a9aa508771f7a2c5c108eede0c9584",
|
|
1642
|
+
"affectsGlobalScope": false
|
|
1643
|
+
},
|
|
1644
|
+
"../../core/components/organisms/listbox/listboxItem/index.tsx": {
|
|
1645
|
+
"version": "a77d725408716310a5893214dc825a27d3bdfb7264f9051861dc628b05e8dc08",
|
|
1646
|
+
"signature": "a8d10af1ebe69abcc8d871fc707dc26bbcd2cd5fb964321513a55be00aaf5f3e",
|
|
1647
|
+
"affectsGlobalScope": false
|
|
1648
|
+
},
|
|
1649
|
+
"../../core/components/organisms/listbox/Listbox.tsx": {
|
|
1650
|
+
"version": "b36aaa382a63adc0b8672f55eab42069939b62daf3d5aff63c1d47b363410100",
|
|
1651
|
+
"signature": "81b1adae8427e6b6d849c8bf96b9f0d3cf2ae1f2f005e0efd5a68ef63b068a98",
|
|
1652
|
+
"affectsGlobalScope": false
|
|
1653
|
+
},
|
|
1654
|
+
"../../core/components/organisms/listbox/index.tsx": {
|
|
1655
|
+
"version": "c1346be115cda2b9920016f518e60e3c9c017351d95832fcfb48f612a6b17c17",
|
|
1656
|
+
"signature": "3bb4a23f58cd62ce1d5981ff283a526de5b393ae45f435d6ed37922c9a444bed",
|
|
1657
|
+
"affectsGlobalScope": false
|
|
1658
|
+
},
|
|
1589
1659
|
"../../core/index.type.tsx": {
|
|
1590
|
-
"version": "
|
|
1591
|
-
"signature": "
|
|
1660
|
+
"version": "621fc43b3b6c8571ab534e9a552ea4c4bfae0f958e8cae0fccad663ac8c9577d",
|
|
1661
|
+
"signature": "a23ba325232022da8128a4aab94464210bf69f76f490038f42e0d492a886fbe6",
|
|
1592
1662
|
"affectsGlobalScope": false
|
|
1593
1663
|
},
|
|
1594
1664
|
"../../core/components/organisms/timePicker/TimePickerWithInput.tsx": {
|
|
@@ -1617,8 +1687,8 @@
|
|
|
1617
1687
|
"affectsGlobalScope": false
|
|
1618
1688
|
},
|
|
1619
1689
|
"../../core/index.tsx": {
|
|
1620
|
-
"version": "
|
|
1621
|
-
"signature": "
|
|
1690
|
+
"version": "32438d2c42cc763b598e3c990b5c03254398f54e098fed3fc058bb3c768f3043",
|
|
1691
|
+
"signature": "e303db3213ba59f45d86fcd510bddccf4d25f4057e11ec33e7f04444539857e9",
|
|
1622
1692
|
"affectsGlobalScope": false
|
|
1623
1693
|
},
|
|
1624
1694
|
"../../core/components/molecules/overlayFooter/OverlayFooter.tsx": {
|
|
@@ -4663,6 +4733,48 @@
|
|
|
4663
4733
|
"*",
|
|
4664
4734
|
"*",
|
|
4665
4735
|
"*",
|
|
4736
|
+
"*",
|
|
4737
|
+
"*",
|
|
4738
|
+
"*",
|
|
4739
|
+
"*",
|
|
4740
|
+
"*",
|
|
4741
|
+
"*",
|
|
4742
|
+
"*",
|
|
4743
|
+
"*",
|
|
4744
|
+
"*",
|
|
4745
|
+
"*",
|
|
4746
|
+
"*",
|
|
4747
|
+
"*",
|
|
4748
|
+
"*",
|
|
4749
|
+
"*",
|
|
4750
|
+
"*",
|
|
4751
|
+
"*",
|
|
4752
|
+
"*",
|
|
4753
|
+
"*",
|
|
4754
|
+
"*",
|
|
4755
|
+
"*",
|
|
4756
|
+
"*",
|
|
4757
|
+
"*",
|
|
4758
|
+
"*",
|
|
4759
|
+
"*",
|
|
4760
|
+
"*",
|
|
4761
|
+
"*",
|
|
4762
|
+
"*",
|
|
4763
|
+
"*",
|
|
4764
|
+
"*",
|
|
4765
|
+
"*",
|
|
4766
|
+
"*",
|
|
4767
|
+
"*",
|
|
4768
|
+
"*",
|
|
4769
|
+
"*",
|
|
4770
|
+
"*",
|
|
4771
|
+
"*",
|
|
4772
|
+
"*",
|
|
4773
|
+
"*",
|
|
4774
|
+
"*",
|
|
4775
|
+
"*",
|
|
4776
|
+
"*",
|
|
4777
|
+
"*",
|
|
4666
4778
|
"*"
|
|
4667
4779
|
]
|
|
4668
4780
|
},
|
|
@@ -6233,6 +6345,83 @@
|
|
|
6233
6345
|
"../../core/components/organisms/list/List.tsx",
|
|
6234
6346
|
"../../node_modules/@types/node/util.d.ts"
|
|
6235
6347
|
],
|
|
6348
|
+
"../../core/components/organisms/listbox/Listbox.tsx": [
|
|
6349
|
+
"../../core/components/organisms/listbox/listboxItem/index.tsx",
|
|
6350
|
+
"../../core/components/organisms/listbox/reorderList/index.tsx",
|
|
6351
|
+
"../../core/utils/types.tsx",
|
|
6352
|
+
"../../node_modules/@types/node/util.d.ts",
|
|
6353
|
+
"../../node_modules/@types/react/index.d.ts",
|
|
6354
|
+
"../../node_modules/classnames/index.d.ts"
|
|
6355
|
+
],
|
|
6356
|
+
"../../core/components/organisms/listbox/index.tsx": [
|
|
6357
|
+
"../../core/components/organisms/listbox/Listbox.tsx",
|
|
6358
|
+
"../../core/components/organisms/listbox/listboxItem/index.tsx",
|
|
6359
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6360
|
+
],
|
|
6361
|
+
"../../core/components/organisms/listbox/listboxItem/ListBody.tsx": [
|
|
6362
|
+
"../../core/components/organisms/listbox/Listbox.tsx",
|
|
6363
|
+
"../../core/components/organisms/listbox/listboxItem/ListboxItem.tsx",
|
|
6364
|
+
"../../core/components/organisms/listbox/utils.ts",
|
|
6365
|
+
"../../core/index.tsx",
|
|
6366
|
+
"../../node_modules/@types/node/util.d.ts",
|
|
6367
|
+
"../../node_modules/@types/react/index.d.ts",
|
|
6368
|
+
"../../node_modules/classnames/index.d.ts"
|
|
6369
|
+
],
|
|
6370
|
+
"../../core/components/organisms/listbox/listboxItem/ListboxItem.tsx": [
|
|
6371
|
+
"../../core/components/organisms/listbox/Listbox.tsx",
|
|
6372
|
+
"../../core/components/organisms/listbox/listboxItem/ListBody.tsx",
|
|
6373
|
+
"../../core/components/organisms/listbox/nestedList/index.tsx",
|
|
6374
|
+
"../../core/index.tsx",
|
|
6375
|
+
"../../core/utils/types.tsx",
|
|
6376
|
+
"../../node_modules/@types/node/util.d.ts",
|
|
6377
|
+
"../../node_modules/@types/react/index.d.ts",
|
|
6378
|
+
"../../node_modules/classnames/index.d.ts"
|
|
6379
|
+
],
|
|
6380
|
+
"../../core/components/organisms/listbox/listboxItem/index.tsx": [
|
|
6381
|
+
"../../core/components/organisms/listbox/listboxItem/ListboxItem.tsx",
|
|
6382
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6383
|
+
],
|
|
6384
|
+
"../../core/components/organisms/listbox/nestedList/Animation.tsx": [
|
|
6385
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6386
|
+
],
|
|
6387
|
+
"../../core/components/organisms/listbox/nestedList/NestedList.tsx": [
|
|
6388
|
+
"../../core/components/organisms/listbox/nestedList/Animation.tsx",
|
|
6389
|
+
"../../node_modules/@types/node/util.d.ts",
|
|
6390
|
+
"../../node_modules/@types/react/index.d.ts"
|
|
6391
|
+
],
|
|
6392
|
+
"../../core/components/organisms/listbox/nestedList/index.tsx": [
|
|
6393
|
+
"../../core/components/organisms/listbox/nestedList/NestedList.tsx",
|
|
6394
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6395
|
+
],
|
|
6396
|
+
"../../core/components/organisms/listbox/reorderList/Draggable.tsx": [
|
|
6397
|
+
"../../core/components/organisms/listbox/reorderList/types.ts",
|
|
6398
|
+
"../../core/components/organisms/listbox/reorderList/utils.ts",
|
|
6399
|
+
"../../node_modules/@types/node/util.d.ts",
|
|
6400
|
+
"../../node_modules/@types/react-dom/index.d.ts",
|
|
6401
|
+
"../../node_modules/@types/react/index.d.ts"
|
|
6402
|
+
],
|
|
6403
|
+
"../../core/components/organisms/listbox/reorderList/DraggableList.tsx": [
|
|
6404
|
+
"../../core/components/organisms/listbox/reorderList/Draggable.tsx",
|
|
6405
|
+
"../../core/components/organisms/listbox/reorderList/utils.ts",
|
|
6406
|
+
"../../core/index.type.tsx",
|
|
6407
|
+
"../../core/utils/types.tsx",
|
|
6408
|
+
"../../node_modules/@types/node/util.d.ts",
|
|
6409
|
+
"../../node_modules/@types/react/index.d.ts",
|
|
6410
|
+
"../../node_modules/classnames/index.d.ts"
|
|
6411
|
+
],
|
|
6412
|
+
"../../core/components/organisms/listbox/reorderList/index.tsx": [
|
|
6413
|
+
"../../core/components/organisms/listbox/reorderList/DraggableList.tsx",
|
|
6414
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6415
|
+
],
|
|
6416
|
+
"../../core/components/organisms/listbox/reorderList/types.ts": [
|
|
6417
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6418
|
+
],
|
|
6419
|
+
"../../core/components/organisms/listbox/reorderList/utils.ts": [
|
|
6420
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6421
|
+
],
|
|
6422
|
+
"../../core/components/organisms/listbox/utils.ts": [
|
|
6423
|
+
"../../node_modules/@types/node/util.d.ts"
|
|
6424
|
+
],
|
|
6236
6425
|
"../../core/components/organisms/navigation/Navigation.tsx": [
|
|
6237
6426
|
"../../core/components/organisms/navigation/VerticalNavigation.tsx",
|
|
6238
6427
|
"../../core/index.tsx",
|
|
@@ -6455,6 +6644,7 @@
|
|
|
6455
6644
|
"../../core/components/organisms/horizontalNav/index.tsx",
|
|
6456
6645
|
"../../core/components/organisms/inlineMessage/index.tsx",
|
|
6457
6646
|
"../../core/components/organisms/list/index.tsx",
|
|
6647
|
+
"../../core/components/organisms/listbox/index.tsx",
|
|
6458
6648
|
"../../core/components/organisms/navigation/index.tsx",
|
|
6459
6649
|
"../../core/components/organisms/pageHeader/index.tsx",
|
|
6460
6650
|
"../../core/components/organisms/table/index.tsx",
|
|
@@ -6545,6 +6735,7 @@
|
|
|
6545
6735
|
"../../core/components/organisms/horizontalNav/index.tsx",
|
|
6546
6736
|
"../../core/components/organisms/inlineMessage/index.tsx",
|
|
6547
6737
|
"../../core/components/organisms/list/index.tsx",
|
|
6738
|
+
"../../core/components/organisms/listbox/index.tsx",
|
|
6548
6739
|
"../../core/components/organisms/navigation/index.tsx",
|
|
6549
6740
|
"../../core/components/organisms/pageHeader/index.tsx",
|
|
6550
6741
|
"../../core/components/organisms/table/index.tsx",
|
|
@@ -11967,6 +12158,20 @@
|
|
|
11967
12158
|
"../../core/components/organisms/inlineMessage/index.tsx",
|
|
11968
12159
|
"../../core/components/organisms/list/List.tsx",
|
|
11969
12160
|
"../../core/components/organisms/list/index.tsx",
|
|
12161
|
+
"../../core/components/organisms/listbox/Listbox.tsx",
|
|
12162
|
+
"../../core/components/organisms/listbox/index.tsx",
|
|
12163
|
+
"../../core/components/organisms/listbox/listboxItem/ListBody.tsx",
|
|
12164
|
+
"../../core/components/organisms/listbox/listboxItem/ListboxItem.tsx",
|
|
12165
|
+
"../../core/components/organisms/listbox/listboxItem/index.tsx",
|
|
12166
|
+
"../../core/components/organisms/listbox/nestedList/Animation.tsx",
|
|
12167
|
+
"../../core/components/organisms/listbox/nestedList/NestedList.tsx",
|
|
12168
|
+
"../../core/components/organisms/listbox/nestedList/index.tsx",
|
|
12169
|
+
"../../core/components/organisms/listbox/reorderList/Draggable.tsx",
|
|
12170
|
+
"../../core/components/organisms/listbox/reorderList/DraggableList.tsx",
|
|
12171
|
+
"../../core/components/organisms/listbox/reorderList/index.tsx",
|
|
12172
|
+
"../../core/components/organisms/listbox/reorderList/types.ts",
|
|
12173
|
+
"../../core/components/organisms/listbox/reorderList/utils.ts",
|
|
12174
|
+
"../../core/components/organisms/listbox/utils.ts",
|
|
11970
12175
|
"../../core/components/organisms/navigation/Navigation.tsx",
|
|
11971
12176
|
"../../core/components/organisms/navigation/VerticalNavigation.tsx",
|
|
11972
12177
|
"../../core/components/organisms/navigation/index.tsx",
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { BaseProps, BaseHtmlProps } from "../../../utils/types";
|
|
3
|
+
declare type ListboxType = 'option' | 'description' | 'resource';
|
|
4
|
+
declare type ListboxSize = 'standard' | 'compressed' | 'tight';
|
|
5
|
+
export declare type TagType = 'ul' | 'ol' | 'div' | 'nav';
|
|
6
|
+
export interface ListboxProps extends BaseProps, BaseHtmlProps<HTMLUListElement | HTMLDivElement> {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
size: ListboxSize;
|
|
9
|
+
type: ListboxType;
|
|
10
|
+
draggable?: boolean;
|
|
11
|
+
tagName: TagType;
|
|
12
|
+
showDivider: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const ListboxContext: React.Context<Pick<ListboxProps, "size" | "className" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "data-test" | "showDivider">>;
|
|
15
|
+
export declare const Listbox: {
|
|
16
|
+
(props: ListboxProps): JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
defaultProps: {
|
|
19
|
+
tagName: string;
|
|
20
|
+
size: string;
|
|
21
|
+
type: string;
|
|
22
|
+
draggable: boolean;
|
|
23
|
+
showDivider: boolean;
|
|
24
|
+
};
|
|
25
|
+
Item: {
|
|
26
|
+
(props: import("./listboxItem").ListboxItemProps): JSX.Element;
|
|
27
|
+
displayName: string;
|
|
28
|
+
defaultProps: {
|
|
29
|
+
tagName: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export default Listbox;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { BaseProps, BaseHtmlProps } from "../../../../utils/types";
|
|
3
|
+
export declare type ItemTagType = 'li' | 'div';
|
|
4
|
+
export interface ListboxItemProps extends BaseProps, BaseHtmlProps<HTMLLIElement | HTMLDivElement> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
nestedBody?: React.ReactNode;
|
|
7
|
+
expanded?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
selected?: boolean;
|
|
10
|
+
activated?: boolean;
|
|
11
|
+
id?: string;
|
|
12
|
+
value?: string;
|
|
13
|
+
tagName: ItemTagType;
|
|
14
|
+
onClick?: (e: React.MouseEvent, id?: string, value?: string) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const ListboxItem: {
|
|
17
|
+
(props: ListboxItemProps): JSX.Element;
|
|
18
|
+
displayName: string;
|
|
19
|
+
defaultProps: {
|
|
20
|
+
tagName: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export default ListboxItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./ListboxItem";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./NestedList";
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { IProps, TEvent } from "./types";
|
|
3
|
+
declare class Draggable<Value = string> extends React.Component<IProps<Value>> {
|
|
4
|
+
listRef: React.RefObject<HTMLElement>;
|
|
5
|
+
ghostRef: React.RefObject<HTMLElement>;
|
|
6
|
+
topOffsets: number[];
|
|
7
|
+
itemTranslateOffsets: number[];
|
|
8
|
+
initialYOffset: number;
|
|
9
|
+
lastScroll: number;
|
|
10
|
+
lastYOffset: number;
|
|
11
|
+
lastListYOffset: number;
|
|
12
|
+
dropTimeout?: number;
|
|
13
|
+
needle: number;
|
|
14
|
+
afterIndex: number;
|
|
15
|
+
state: {
|
|
16
|
+
itemDragged: number;
|
|
17
|
+
itemDraggedOutOfBounds: number;
|
|
18
|
+
selectedItem: number;
|
|
19
|
+
initialX: number;
|
|
20
|
+
initialY: number;
|
|
21
|
+
targetX: number;
|
|
22
|
+
targetY: number;
|
|
23
|
+
targetHeight: number;
|
|
24
|
+
targetWidth: number;
|
|
25
|
+
scrollingSpeed: number;
|
|
26
|
+
scrollWindow: boolean;
|
|
27
|
+
};
|
|
28
|
+
schdOnMouseMove: {
|
|
29
|
+
(e: MouseEvent): void;
|
|
30
|
+
cancel(): void;
|
|
31
|
+
};
|
|
32
|
+
schdOnTouchMove: {
|
|
33
|
+
(e: TouchEvent): void;
|
|
34
|
+
cancel(): void;
|
|
35
|
+
};
|
|
36
|
+
schdOnEnd: {
|
|
37
|
+
(e: Event): void;
|
|
38
|
+
cancel(): void;
|
|
39
|
+
};
|
|
40
|
+
constructor(props: IProps<Value>);
|
|
41
|
+
componentDidMount(): void;
|
|
42
|
+
componentDidUpdate(_prevProps: any, prevState: {
|
|
43
|
+
scrollingSpeed: number;
|
|
44
|
+
}): void;
|
|
45
|
+
componentWillUnmount(): void;
|
|
46
|
+
doScrolling: () => void;
|
|
47
|
+
getChildren: () => Element[];
|
|
48
|
+
static defaultProps: {
|
|
49
|
+
transitionDuration: number;
|
|
50
|
+
lockVertically: boolean;
|
|
51
|
+
removableByMove: boolean;
|
|
52
|
+
};
|
|
53
|
+
calculateOffsets: () => void;
|
|
54
|
+
getTargetIndex: (e: TEvent) => number;
|
|
55
|
+
onMouseOrTouchStart: (e: MouseEvent & TouchEvent) => void;
|
|
56
|
+
getYOffset: () => number;
|
|
57
|
+
onStart: (target: HTMLElement, clientX: number, clientY: number, index: number) => void;
|
|
58
|
+
onMouseMove: (e: MouseEvent) => void;
|
|
59
|
+
onTouchMove: (e: TouchEvent) => void;
|
|
60
|
+
onWheel: (e: React.WheelEvent) => void;
|
|
61
|
+
onMove: (clientX: number, clientY: number) => null | undefined;
|
|
62
|
+
moveOtherItems: () => void;
|
|
63
|
+
autoScrolling: (clientY: number) => void;
|
|
64
|
+
animateItems: (needle: number, movedItem: number, offset: number, animateMovedItem?: boolean) => void;
|
|
65
|
+
isDraggedItemOutOfBounds: () => boolean;
|
|
66
|
+
onEnd: (e: TouchEvent & MouseEvent) => void;
|
|
67
|
+
finishDrop: () => void;
|
|
68
|
+
onKeyDown: (e: React.KeyboardEvent) => void;
|
|
69
|
+
render(): JSX.Element;
|
|
70
|
+
}
|
|
71
|
+
export default Draggable;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./DraggableList";
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface IItemProps {
|
|
3
|
+
key?: number;
|
|
4
|
+
tabIndex?: number;
|
|
5
|
+
'aria-roledescription'?: string;
|
|
6
|
+
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
7
|
+
onWheel?: (e: React.WheelEvent) => void;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
ref?: React.RefObject<any>;
|
|
10
|
+
}
|
|
11
|
+
export interface RenderItemParams<Value> {
|
|
12
|
+
value: Value;
|
|
13
|
+
props: IItemProps;
|
|
14
|
+
index?: number;
|
|
15
|
+
isDragged: boolean;
|
|
16
|
+
isSelected: boolean;
|
|
17
|
+
isOutOfBounds: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface RenderListParams {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
isDragged: boolean;
|
|
22
|
+
props: {
|
|
23
|
+
ref: React.RefObject<any>;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
export interface BeforeDragParams {
|
|
27
|
+
elements: Element[];
|
|
28
|
+
index: number;
|
|
29
|
+
}
|
|
30
|
+
export interface OnChangeMeta {
|
|
31
|
+
oldIndex: number;
|
|
32
|
+
newIndex: number;
|
|
33
|
+
targetRect: ClientRect;
|
|
34
|
+
}
|
|
35
|
+
export interface IProps<Value> {
|
|
36
|
+
beforeDrag?: (params: BeforeDragParams) => void;
|
|
37
|
+
renderItem: (params: RenderItemParams<Value>) => React.ReactNode;
|
|
38
|
+
renderList: (props: RenderListParams) => React.ReactNode;
|
|
39
|
+
values: any;
|
|
40
|
+
onChange: (meta: OnChangeMeta) => void;
|
|
41
|
+
transitionDuration: number;
|
|
42
|
+
removableByMove: boolean;
|
|
43
|
+
lockVertically: boolean;
|
|
44
|
+
container?: Element | null;
|
|
45
|
+
}
|
|
46
|
+
export declare type TEvent = React.MouseEvent | React.TouchEvent | React.KeyboardEvent;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare function arrayMove<T>(array: T[], from: number, to: number): T[];
|
|
2
|
+
export declare function getTranslateOffset(element: Element): number;
|
|
3
|
+
export declare function isTouchEvent(event: TouchEvent & MouseEvent): number;
|
|
4
|
+
export declare function transformItem(element: Element, offsetY?: number | null, offsetX?: number | null): void;
|
|
5
|
+
export declare function setItemTransition(element: Element, duration: number, timing?: string): void;
|
|
6
|
+
export declare function binarySearch(array: number[], targetValue: number): number;
|
|
7
|
+
export declare const schd: (fn: any) => {
|
|
8
|
+
(...args: any[]): void;
|
|
9
|
+
cancel(): void;
|
|
10
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const onKeyDown: (event: React.KeyboardEvent) => void;
|
package/dist/core/index.d.ts
CHANGED
|
@@ -86,4 +86,5 @@ export { HelpText } from "./components/atoms/helpText";
|
|
|
86
86
|
export { LinkButton } from "./components/atoms/linkButton";
|
|
87
87
|
export { ActionCard } from "./components/atoms/actionCard";
|
|
88
88
|
export { SelectionCard } from "./components/atoms/selectionCard";
|
|
89
|
+
export { Listbox } from "./components/organisms/listbox";
|
|
89
90
|
export { version } from "../package.json";
|