playbook_ui_docs 13.23.0 → 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -0
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +53 -0
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +69 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +78 -0
  16. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -0
  17. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +4 -0
  18. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
  19. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  21. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  22. data/dist/menu.yml +5 -1
  23. data/dist/playbook-doc.js +10 -10
  24. metadata +20 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2551238e0e39b464ae21f0564d14852da929defe1f380520ae00449c116a886d
4
- data.tar.gz: 56c99772990210d2cab93af23ce4138a55f2ada2034d97abb26f54ce854e7085
3
+ metadata.gz: 79081e0d41e5fa37b50efa3c504e4ad9e548b08c891720eeaecf7c396307e7e4
4
+ data.tar.gz: c93ddb1b84cd4338f185ef1e3d502a1ce275a40d54f8fba1310ea39eae839f37
5
5
  SHA512:
6
- metadata.gz: 991d70d46030520c81bcd566d7841c57d06b3374d2eeabd0c2020f2ef62f78685925e0d5dc8de17a989a0630a64f54eff6cfa6d316f3df9a999ba6b707be29c9
7
- data.tar.gz: f8e3874aad138721909b1ee9de0f26ba1aa9bfe3a78e25645203b8d62c2d8548f89795494d0f6148c65e42f6199d0592402d8d5aa8d7de48447206a9a2419115
6
+ metadata.gz: 853eb93e0050e17154bc08c52487704a1acf84ca616414b1f6fd47f93fec9d16210e7b5d743a0905f4f5ba1f64a65bec3f71ece8a2eaa1c26530314a3c7193c7
7
+ data.tar.gz: 84588547fe0e9d5cd60cc8ba3c3f1a86c3869caa83b7a426f4095ff8119c36e5031557ef0bcd811771f56bf5750925d2c85b1c8e2dd1fc3689fe070e9cda91bb
@@ -0,0 +1,23 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [-475, 400, -1000, 354, -856],
4
+ threshold: 0
5
+ }, {
6
+ name: 'Manufacturing',
7
+ data: [1475, 200, 1000, 654, -656],
8
+ threshold: 0
9
+ },
10
+ {
11
+ name: 'Sales & Distribution',
12
+ data: [1270, 100, -1200, 554, 756],
13
+ threshold: 0
14
+ }] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_title: 'Number of Employees',
18
+ chart_data: data,
19
+ id: "bar-default",
20
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
21
+ title: 'Bar Graph with Negative Numbers',
22
+ legend: true,
23
+ }) %>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [-475, 400, -1000, 354, -856],
8
+ threshold: 0
9
+ }, {
10
+ name: 'Manufacturing',
11
+ data: [1475, 200, 1000, 654, -656],
12
+ threshold: 0
13
+ },
14
+ {
15
+ name: 'Sales & Distribution',
16
+ data: [1270, 100, -1200, 554, 756],
17
+ threshold: 0
18
+ }]
19
+
20
+
21
+ const BarGraphStacked = (props) => (
22
+ <div>
23
+ <BarGraph
24
+ axisTitle="Number of Employees"
25
+ chartData={chartData}
26
+ id="bar-default"
27
+ legend
28
+ title="Bar Graph with Negative Numbers"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ {...props}
31
+ />
32
+ </div>
33
+ )
34
+
35
+ export default BarGraphStacked
@@ -0,0 +1,26 @@
1
+ <% data = [{
2
+ name: 'Number of Installations',
3
+ data: [1475,200,3000,654,656]
4
+ }, {
5
+ type: 'spline',
6
+ name: 'Percentage',
7
+ data: [48, 70, 25, 55, 72],
8
+ color: '#F9BB00',
9
+ yAxis: 1
10
+ }] %>
11
+
12
+ <% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
13
+
14
+ <% axis_formats = [{format: ""}, {format: "{value}%"}] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_format: axis_formats,
18
+ axis_title: axis_titles,
19
+ chart_data: data,
20
+ id: "bar-spline",
21
+ y_axis_min: 0,
22
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
23
+ subtitle: 'Source: thesolarfoundation.com',
24
+ title: 'Bar Graph with Secondary Y-axis',
25
+ legend: true,
26
+ }) %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Number of Installations',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ }, {
9
+ type: 'spline',
10
+ name: 'Percentage',
11
+ data: [48, 70, 25, 55, 72],
12
+ color: '#F9BB00',
13
+ yAxis: 1
14
+ }]
15
+
16
+ const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
17
+
18
+ const axisFormats = [{format: ""}, {format: "{value}%"}]
19
+
20
+ const BarGraphSecondaryYAxis= (props) => (
21
+ <div>
22
+ <BarGraph
23
+ axisFormat={axisFormats}
24
+ axisTitle={axisTitles}
25
+ chartData={chartData}
26
+ id="bar-spline"
27
+ legend
28
+ title="Bar Graph with Secondary Y-axis"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ yAxisMin={0}
31
+ {...props}
32
+ />
33
+ </div>
34
+ )
35
+
36
+ export default BarGraphSecondaryYAxis
@@ -0,0 +1,3 @@
1
+ Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array.
2
+
3
+ To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.
@@ -0,0 +1,22 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [1475, 200, 3000, 654, 656],
4
+ },
5
+ {
6
+ name: 'Manufacturing',
7
+ data: [1270, 800, 200, 454, 956],
8
+ }, {
9
+ name: 'Sales & Distribution',
10
+ data: [975, 1600, 1500, 924, 500],
11
+ }] %>
12
+
13
+ <%= pb_rails("bar_graph", props: {
14
+ axis_title: 'Number of Employees',
15
+ chart_data: data,
16
+ id: "bar-default",
17
+ y_axis_min: 0,
18
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
19
+ stacking: "normal",
20
+ title: 'Bar Graph with Stacked Columns',
21
+ legend: true,
22
+ }) %>
@@ -0,0 +1,34 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ },
9
+ {
10
+ name: 'Manufacturing',
11
+ data: [1270, 800, 200, 454, 956],
12
+ }, {
13
+ name: 'Sales & Distribution',
14
+ data: [975, 1600, 1500, 924, 500],
15
+ }]
16
+
17
+
18
+ const BarGraphStacked = (props) => (
19
+ <div>
20
+ <BarGraph
21
+ axisTitle="Number Of Employees"
22
+ chartData={chartData}
23
+ id="bar-default"
24
+ legend
25
+ stacking="normal"
26
+ title="Bar Graph with Stacked Columns"
27
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
28
+ yAxisMin={0}
29
+ {...props}
30
+ />
31
+ </div>
32
+ )
33
+
34
+ export default BarGraphStacked
@@ -0,0 +1 @@
1
+ The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options.
@@ -9,6 +9,9 @@ examples:
9
9
  - bar_graph_spline: Spline
10
10
  - bar_graph_colors: Color Overrides
11
11
  - bar_graph_custom: Custom Overrides
12
+ - bar_graph_stacked: Stacked
13
+ - bar_graph_negative_numbers: Negative Numbers
14
+ - bar_graph_secondary_y_axis: Secondary Y-Axis
12
15
 
13
16
 
14
17
  react:
@@ -20,3 +23,6 @@ examples:
20
23
  - bar_graph_spline: Spline
21
24
  - bar_graph_colors: Color Overrides
22
25
  - bar_graph_custom: Custom Overrides
26
+ - bar_graph_stacked: Stacked
27
+ - bar_graph_negative_numbers: Negative Numbers
28
+ - bar_graph_secondary_y_axis: Secondary Y-Axis
@@ -6,3 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
6
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
7
7
  export { default as BarGraphColors } from './_bar_graph_colors.jsx'
8
8
  export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
+ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
+ export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
+ export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
@@ -0,0 +1,53 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown } from '../../'
3
+
4
+ const DropdownDefault = (props) => {
5
+ // eslint-disable-next-line no-unused-vars
6
+ const [selectedOption, setSelectedOption] = useState();
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ areaCode: "+1",
13
+ icon: "🇺🇸",
14
+ id: "United-states"
15
+ },
16
+ {
17
+ label: "Ukraine",
18
+ value: "Ukraine",
19
+ areaCode: "+380",
20
+ icon: "🇺🇦",
21
+ id: "ukraine"
22
+ },
23
+ {
24
+ label: "Pakistan",
25
+ value: "Pakistan",
26
+ areaCode: "+92",
27
+ icon: "🇵🇰",
28
+ id: "pakistan"
29
+ }
30
+ ];
31
+
32
+
33
+ return (
34
+ <div>
35
+ <Dropdown
36
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
+ options={options}
38
+ {...props}
39
+ >
40
+ <Dropdown.Trigger/>
41
+ <Dropdown.Container>
42
+ {options.map((option) => (
43
+ <Dropdown.Option key={option.id}
44
+ option={option}
45
+ />
46
+ ))}
47
+ </Dropdown.Container>
48
+ </Dropdown>
49
+ </div>
50
+ )
51
+ }
52
+
53
+ export default DropdownDefault
@@ -0,0 +1,104 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
3
+
4
+ const DropdownWithCustomDisplay = (props) => {
5
+ const [selectedOption, setSelectedOption] = useState();
6
+
7
+ const options = [
8
+ {
9
+ label: "Jasper Furniss",
10
+ value: "Jasper Furniss",
11
+ territory: "PHL",
12
+ title: "Senior UX Engineer",
13
+ id: "jasper-furniss",
14
+ status: "Offline"
15
+ },
16
+ {
17
+ label: "Ramon Ruiz",
18
+ value: "Ramon Ruiz",
19
+ territory: "PHL",
20
+ title: "Senior UX Desinger",
21
+ id: "ramon-ruiz",
22
+ status: "Away"
23
+ },
24
+ {
25
+ label: "Jason Cypret",
26
+ value: "Jason Cypret",
27
+ territory: "PHL",
28
+ title: "VP of User Experience",
29
+ id: "jason-cypret",
30
+ status: "Online"
31
+ },
32
+ {
33
+ label: "Courtney Long",
34
+ value: "Courtney Long",
35
+ territory: "PHL",
36
+ title: "UX Design Mentor",
37
+ id: "courtney-long",
38
+ status: "Online"
39
+ }
40
+ ];
41
+
42
+ const customDisplay = () => {
43
+ return (
44
+ <>
45
+ {
46
+ selectedOption && (
47
+ <Avatar
48
+ name={selectedOption.label}
49
+ size="sm"
50
+ />
51
+ )
52
+ }
53
+ </>
54
+ )
55
+ };
56
+
57
+
58
+ return (
59
+ <div>
60
+ <Dropdown
61
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
62
+ options={options}
63
+ {...props}
64
+ >
65
+ <Dropdown.Trigger customDisplay={customDisplay()}/>
66
+ <Dropdown.Container>
67
+ {options.map((option) => (
68
+ <Dropdown.Option key={option.id}
69
+ option={option}
70
+ >
71
+ <>
72
+ <FlexItem>
73
+ <User
74
+ align="left"
75
+ avatar
76
+ name={option.label}
77
+ orientation="horizontal"
78
+ territory={option.territory}
79
+ title={option.title}
80
+ />
81
+ </FlexItem>
82
+ <FlexItem>
83
+ <Badge
84
+ rounded
85
+ text={option.status}
86
+ variant={`${
87
+ option.status === "Offline"
88
+ ? "neutral"
89
+ : option.status === "Online"
90
+ ? "success"
91
+ : "warning"
92
+ }`}
93
+ />
94
+ </FlexItem>
95
+ </>
96
+ </Dropdown.Option>
97
+ ))}
98
+ </Dropdown.Container>
99
+ </Dropdown>
100
+ </div>
101
+ )
102
+ }
103
+
104
+ export default DropdownWithCustomDisplay
@@ -0,0 +1,69 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
3
+
4
+ const DropdownWithCustomOptions = (props) => {
5
+ // eslint-disable-next-line no-unused-vars
6
+ const [selectedOption, setSelectedOption] = useState();
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ areaCode: "+1",
13
+ icon: "🇺🇸",
14
+ id: "United-states"
15
+ },
16
+ {
17
+ label: "Ukraine",
18
+ value: "Ukraine",
19
+ areaCode: "+380",
20
+ icon: "🇺🇦",
21
+ id: "ukraine"
22
+ },
23
+ {
24
+ label: "Pakistan",
25
+ value: "Pakistan",
26
+ areaCode: "+92",
27
+ icon: "🇵🇰",
28
+ id: "pakistan"
29
+ }
30
+ ];
31
+
32
+
33
+ return (
34
+ <div>
35
+ <Dropdown
36
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
+ options={options}
38
+ {...props}
39
+ >
40
+ <Dropdown.Trigger/>
41
+ <Dropdown.Container>
42
+ {options.map((option) => (
43
+ <Dropdown.Option key={option.id}
44
+ option={option}
45
+ >
46
+ <>
47
+ <FlexItem>
48
+ <Flex>
49
+ <Icon icon={option.icon}
50
+ paddingRight="xs"
51
+ />
52
+ <Body text={option.label} />
53
+ </Flex>
54
+ </FlexItem>
55
+ <FlexItem>
56
+ <Body color="light"
57
+ text={option.areaCode}
58
+ />
59
+ </FlexItem>
60
+ </>
61
+ </Dropdown.Option>
62
+ ))}
63
+ </Dropdown.Container>
64
+ </Dropdown>
65
+ </div>
66
+ )
67
+ }
68
+
69
+ export default DropdownWithCustomOptions
@@ -0,0 +1,78 @@
1
+ import React, { useState } from 'react'
2
+ import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
3
+
4
+ const DropdownWithCustomTrigger = (props) => {
5
+
6
+ const [selectedOption, setSelectedOption] = useState();
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ areaCode: "+1",
13
+ icon: "🇺🇸",
14
+ id: "United-states"
15
+ },
16
+ {
17
+ label: "Ukraine",
18
+ value: "Ukraine",
19
+ areaCode: "+380",
20
+ icon: "🇺🇦",
21
+ id: "ukraine"
22
+ },
23
+ {
24
+ label: "Pakistan",
25
+ value: "Pakistan",
26
+ areaCode: "+92",
27
+ icon: "🇵🇰",
28
+ id: "pakistan"
29
+ }
30
+ ];
31
+
32
+
33
+ return (
34
+ <div>
35
+ <Dropdown
36
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
+ options={options}
38
+ {...props}
39
+ >
40
+ <Dropdown.Trigger>
41
+ <div key={selectedOption ? selectedOption.icon : "flag"}>
42
+ <IconCircle
43
+ cursor="pointer"
44
+ icon={selectedOption ? selectedOption.icon : "flag"}
45
+ variant="royal"
46
+ />
47
+ </div>
48
+ </Dropdown.Trigger>
49
+
50
+ <Dropdown.Container>
51
+ {options.map((option) => (
52
+ <Dropdown.Option key={option.id}
53
+ option={option}
54
+ >
55
+ <>
56
+ <FlexItem>
57
+ <Flex>
58
+ <Icon icon={option.icon}
59
+ paddingRight="xs"
60
+ />
61
+ <Body text={option.label} />
62
+ </Flex>
63
+ </FlexItem>
64
+ <FlexItem>
65
+ <Body color="light"
66
+ text={option.areaCode}
67
+ />
68
+ </FlexItem>
69
+ </>
70
+ </Dropdown.Option>
71
+ ))}
72
+ </Dropdown.Container>
73
+ </Dropdown>
74
+ </div>
75
+ )
76
+ }
77
+
78
+ export default DropdownWithCustomTrigger
@@ -0,0 +1,9 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - dropdown_default: Default
6
+ - dropdown_with_custom_options: Custom Options
7
+ - dropdown_with_custom_display: Custom Display
8
+ - dropdown_with_custom_trigger: Custom Trigger
9
+
@@ -0,0 +1,4 @@
1
+ export { default as DropdownDefault } from './_dropdown_default.jsx'
2
+ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
3
+ export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
4
+ export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
@@ -0,0 +1,51 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import {
4
+ Button,
5
+ } from '../..'
6
+
7
+ import Typeahead from '../_typeahead'
8
+
9
+ const options = [
10
+ { label: 'Orange', value: '#FFA500' },
11
+ { label: 'Red', value: '#FF0000' },
12
+ { label: 'Green', value: '#00FF00' },
13
+ { label: 'Blue', value: '#0000FF' },
14
+ { label: 'Amaranth', value: '#9F2B68' },
15
+ { label: 'Key Lime', value: '#DAF7A6' },
16
+ { label: 'Turquois', value: '#00FFD0' },
17
+ ]
18
+
19
+ const TypeaheadCustomMenuList = (props) => {
20
+ const defaultColorOptions = options.slice(0, 3)
21
+ const [colorOptions, setColorOptions] = useState(defaultColorOptions)
22
+
23
+ const moreToLoad = colorOptions.length == defaultColorOptions.length
24
+ const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
25
+
26
+ const menuListProps = {
27
+ footer: (<Button
28
+ margin="sm"
29
+ onClick={loadColors}
30
+ text={`Load ${moreToLoad ? "More" : "Less"}`}
31
+ />)
32
+ }
33
+
34
+ const MenuList = (props) => (
35
+ <Typeahead.MenuList
36
+ {...menuListProps}
37
+ {...props}
38
+ />
39
+ )
40
+
41
+ return (
42
+ <Typeahead
43
+ components={{ MenuList }}
44
+ label="Colors"
45
+ options={colorOptions}
46
+ {...props}
47
+ />
48
+ )
49
+ }
50
+
51
+ export default TypeaheadCustomMenuList
@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
46
46
  if (!inputValue.length) return text
47
47
  return text.replace(
48
48
  new RegExp(inputValue, 'gi'),
49
- highlighted => `<mark>${highlighted}</mark>`
49
+ (highlighted) => `<mark>${highlighted}</mark>`
50
50
  )
51
51
  }
52
52
  return (
@@ -22,3 +22,4 @@ examples:
22
22
  - typeahead_createable: Createable
23
23
  - typeahead_async_createable: Createable (+ Async Data)
24
24
  - typeahead_error_state: Error State
25
+ - typeahead_custom_menu_list: Custom MenuList
@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
9
9
  export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
10
10
  export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
11
11
  export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
12
+ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
data/dist/menu.yml CHANGED
@@ -254,6 +254,10 @@ kits:
254
254
  platforms: *web
255
255
  description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
256
256
  status: "stable"
257
+ - name: dropdown
258
+ platforms: *react_only
259
+ description: ""
260
+ status: "beta"
257
261
  - name: "multi_level_select"
258
262
  platforms: *web
259
263
  description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
@@ -460,4 +464,4 @@ kits:
460
464
  - name: "user"
461
465
  platforms: *web
462
466
  description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
463
- status: "stable"
467
+ status: "stable"