playbook_ui 12.6.0 → 12.7.1.pre.alpha.alpharubyrelease281

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +9 -6
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +61 -44
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -0
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +1 -0
  6. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +14 -0
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  8. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -1
  9. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +68 -0
  11. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +21 -4
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +72 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +3 -1
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -1
  16. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +3 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +21 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -2
  19. data/app/pb_kits/playbook/pb_nav/_nav.jsx +3 -0
  20. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +52 -16
  22. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +22 -20
  23. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +16 -24
  24. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -1
  25. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +0 -7
  26. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +0 -2
  27. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +0 -1
  28. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +3 -1
  29. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +19 -0
  30. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +0 -2
  31. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +3 -0
  32. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +40 -34
  33. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +56 -0
  34. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md +5 -0
  35. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  36. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
  38. data/lib/playbook/version.rb +2 -2
  39. metadata +16 -9
  40. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb +0 -1
  41. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx +0 -14
@@ -1,16 +1,46 @@
1
1
  @import "../tokens/colors";
2
2
 
3
+ $transform-rotate-deg: 135deg;
4
+ $input-max-width: 284px;
5
+ $dropdown-min-width: 340px;
6
+ $flag-min-resolution: 192dpi;
7
+
3
8
  .pb_phone_number_input {
4
9
  input::placeholder {
5
10
  color: $focus_input_light;
6
11
  }
7
12
 
13
+ .text_input {
14
+ max-width: $input-max-width;
15
+ }
16
+
17
+ .dropdown_open {
18
+ .text_input {
19
+ border-color: $primary !important;
20
+ }
21
+
22
+ .iti__selected-flag:focus-visible {
23
+ outline-style: none;
24
+ }
25
+ }
26
+
8
27
  .iti__country {
9
28
  padding: 5px 10px 5px 16px;
29
+ transition: $transition_default;
10
30
  }
11
31
 
12
32
  .iti__selected-flag {
13
- padding: 0 6px 0 16px;
33
+ padding: 0 $space_xxs 0 $space_sm;
34
+
35
+ &[aria-expanded="true"] {
36
+ color: $primary_action;
37
+ }
38
+
39
+ &:focus-visible {
40
+ outline-style: solid;
41
+ border-radius: $space_xxs 0px 0px $space_xxs;
42
+ outline-color: $primary;
43
+ }
14
44
  }
15
45
 
16
46
  .iti__country.iti__highlight {
@@ -31,6 +61,11 @@
31
61
 
32
62
  .iti__flag {
33
63
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
64
+ border-radius: 1px;
65
+ }
66
+
67
+ .iti--separate-dial-code {
68
+ width: 100%;
34
69
  }
35
70
 
36
71
  .iti--separate-dial-code .iti__selected-flag {
@@ -52,49 +87,50 @@
52
87
 
53
88
  .iti__arrow::before {
54
89
  border-style: solid;
55
- border-width: 0.1em 0.1em 0 0;
90
+ border-width: 1px 1px 0 0;
56
91
  content: '';
57
92
  display: inline-block;
58
- height: 0.6em;
59
- left: 0.1em;
93
+ height: $space_xxs + 1px;
94
+ left: 1px;
60
95
  position: relative;
61
96
  vertical-align: top;
62
- width: 0.6em;
63
- top: 10px;
64
- transform: rotate(135deg);
65
- font-size: 0.5em;
97
+ width: $space_xxs + 1px;
98
+ top: $space_xs + 2px;
99
+ transform: rotate($transform-rotate-deg);
66
100
  color: $slate;
67
101
  }
68
102
 
69
103
  .iti__arrow.iti__arrow--up::before {
70
- transform: rotate(-45deg);
71
- top: 12px;
104
+ transform: rotate(-($transform-rotate-deg/3));
105
+ top: $space_xs + 4px;
106
+ color: $primary_action;
72
107
  }
73
108
 
74
109
  .iti__active::after {
75
110
  float: right;
76
111
  content: "";
77
- margin-top: 5px;
78
- transform: rotate(45deg);
79
- height: 12px;
80
- width: 6px;
112
+ margin-top: $space_xxs + 1px;
113
+ transform: rotate($transform-rotate-deg/3);
114
+ height: $space_xs + 4px;
115
+ width: $space_xxs + 2px;
81
116
  border-bottom: 2px solid;
82
117
  border-right: 2px solid;
83
118
  border-radius: 1px;
84
119
  }
85
120
 
86
121
  .iti__country-list {
87
- min-width: 340px;
122
+ min-width: $dropdown-min-width;
88
123
  border-radius: $border_radius_md;
89
124
  border: 1px solid $border_light;
90
125
  box-shadow: $shadow_deep;
126
+ margin-top: 1px;
91
127
  }
92
128
 
93
129
  .iti__divider {
94
130
  border-bottom: 1px solid $border_light;
95
131
  }
96
132
 
97
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
133
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
98
134
  .iti__flag {
99
135
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
100
136
  }
@@ -1,11 +1,12 @@
1
1
  /* @flow */
2
- import React, { useEffect, useRef, useState } from "react"
3
- import classnames from "classnames"
4
- import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
5
- import { globalProps } from "../utilities/globalProps"
6
- import intlTelInput from "intl-tel-input"
7
- import "intl-tel-input/build/css/intlTelInput.css"
8
- import TextInput from "../pb_text_input/_text_input"
2
+ import React, { useEffect, useRef, useState } from 'react'
3
+ import classnames from 'classnames'
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+ import intlTelInput from 'intl-tel-input'
7
+ import 'intl-tel-input/build/css/intlTelInput.css'
8
+ import TextInput from '../pb_text_input/_text_input'
9
+ import 'intl-tel-input/build/js/utils.js'
9
10
 
10
11
  declare global {
11
12
  interface Window {
@@ -50,7 +51,7 @@ const formatAllCountries = () => {
50
51
  formatAllCountries()
51
52
 
52
53
  const containOnlyNumbers = (value: string) => {
53
- return /^(\++)*(\d+)$/.test(value)
54
+ return /^[()+\-\ .\d]*$/g.test(value)
54
55
  }
55
56
 
56
57
  const PhoneNumberInput = (props: PhoneNumberInputProps) => {
@@ -85,7 +86,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
85
86
  const inputRef = useRef<HTMLInputElement>()
86
87
  const [inputValue, setInputValue] = useState(value)
87
88
  const [itiInit, setItiInit] = useState<any>()
88
- const [error, setError] = useState("")
89
+ const [error, setError] = useState('')
90
+ const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
89
91
 
90
92
  const validateTooLongNumber = (itiInit: any) => {
91
93
  const error = itiInit.getValidationError()
@@ -133,18 +135,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
133
135
 
134
136
  useEffect(() => {
135
137
  const telInputInit = new intlTelInput(inputRef.current, {
136
- utilsScript:
137
- "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
138
- separateDialCode: true,
139
- preferredCountries,
140
- allowDropdown: !disabled,
141
- initialCountry,
142
- onlyCountries,
143
- })
144
-
145
- inputRef.current.addEventListener("countrychange", () =>
146
- validateTooLongNumber(telInputInit)
138
+ separateDialCode: true,
139
+ preferredCountries,
140
+ allowDropdown: !disabled,
141
+ initialCountry,
142
+ onlyCountries,
143
+ }
147
144
  )
145
+
146
+ inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
147
+ inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
148
+ inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
148
149
 
149
150
  setItiInit(telInputInit)
150
151
  }, [])
@@ -152,6 +153,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
152
153
  return (
153
154
  <div {...ariaProps} {...dataProps} className={classes}>
154
155
  <TextInput
156
+ className={dropDownIsOpen ? 'dropdown_open' : ''}
155
157
  disabled={disabled}
156
158
  error={error}
157
159
  id={id}
@@ -18,19 +18,21 @@ $section_colors_dark: (
18
18
  justify-content: center;
19
19
  align-items: center;
20
20
  position: relative;
21
- @each $color_name, $color_value in $section_colors_light {
22
- &[class*=_#{$color_name}] {
23
- span {
24
- display: inline-block;
25
- padding: 0 $space_xs;
26
- background: #{$color_value};
27
- position: relative;
28
- z-index: 1;
29
- }
30
- }
21
+ span {
22
+ padding: 0 $space_xs;
23
+ display: flex;
24
+ }
25
+ &::before {
26
+ content: "";
27
+ height: 1px;
28
+ flex: 1;
29
+ @include section_separator_horizontal;
31
30
  }
32
31
  &::after {
33
- @include section_separator_horizontal(false);
32
+ content: "";
33
+ height: 1px;
34
+ flex: 1;
35
+ @include section_separator_horizontal;
34
36
  }
35
37
  &[class*=_horizontal] {
36
38
  justify-content: center;
@@ -46,23 +48,13 @@ $section_colors_dark: (
46
48
  // Dark =========================
47
49
 
48
50
  &.dark {
49
- &::after {
51
+ &::before {
50
52
  @include section_separator_horizontal(true);
51
53
  }
52
- @each $color_name, $color_value in $section_colors_dark {
53
- &[class*=_#{$color_name}] {
54
- span {
55
- display: inline-block;
56
- padding: 0 $space_xs;
57
- background: #{$color_value};
58
- position: relative;
59
- z-index: 1;
60
- }
61
- }
54
+ &::after {
55
+ @include section_separator_horizontal(true);
62
56
  }
63
57
  &[class*=_vertical] {
64
- margin-left: $space_xs;
65
- margin-right: $space_xs;
66
58
  &::after {
67
59
  @include section_separator_vertical(true);
68
60
  }
@@ -25,6 +25,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
25
25
  id,
26
26
  orientation = 'horizontal',
27
27
  text,
28
+ dark = false,
28
29
  variant = 'card',
29
30
  } = props
30
31
  const ariaProps = buildAriaProps(aria)
@@ -42,7 +43,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
42
43
  {
43
44
  text && (
44
45
  <span>
45
- <Caption text={text} />
46
+ <Caption text={text} dark={dark}/>
46
47
  </span>
47
48
  )
48
49
  }
@@ -20,11 +20,4 @@
20
20
  } @else {
21
21
  background: $border_dark;
22
22
  }
23
- content: "";
24
- height: 1px;
25
- width: 100%;
26
- position: absolute;
27
- top: 50%;
28
- left: 0;
29
- z-index: 0;
30
23
  }
@@ -3,12 +3,10 @@ examples:
3
3
  rails:
4
4
  - section_separator_text: Text Separator
5
5
  - section_separator_line: Line Separator
6
- - section_separator_text_background: Background Variant
7
6
  - section_separator_vertical: Vertical
8
7
 
9
8
 
10
9
  react:
11
10
  - section_separator_text: Text Separator
12
11
  - section_separator_line: Line Separator
13
- - section_separator_text_background: Background Variant
14
12
  - section_separator_vertical: Vertical
@@ -1,4 +1,3 @@
1
1
  export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
2
2
  export { default as SectionSeparatorText } from './_section_separator_text.jsx'
3
- export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
4
3
  export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
@@ -4,7 +4,9 @@
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
6
  <% if object.orientation === 'horizontal' %>
7
- <span><%= pb_rails("caption", props: { text: object.text }) %></span>
7
+ <% if object.text %>
8
+ <span><%= pb_rails("caption", props: { text: object.text }) %></span>
9
+ <%end%>
8
10
  <% end %>
9
11
  <% if object.orientation === 'vertical' %>
10
12
  <%= pb_rails("flex", props: { orientation: "column"}) do %>
@@ -3,6 +3,25 @@
3
3
  text-align: center;
4
4
  user-select: none;
5
5
 
6
+ .buffer > [class*=pb_selectable_icon_kit]::before {
7
+ content: '';
8
+ position: absolute;
9
+ width: 100%;
10
+ height: 100%;
11
+ top: 0;
12
+ left: 0;
13
+ }
14
+
15
+ .buffer > [class*=pb_selectable_icon_kit] {
16
+ @media (hover:hover) {
17
+ &:hover * {
18
+ transition: transform $transition_short ease;
19
+ transform: translateY(-2px);
20
+ }
21
+ }
22
+ }
23
+
24
+
6
25
  input[type="checkbox"],
7
26
  input[type="radio"] {
8
27
 
@@ -13,7 +13,6 @@
13
13
  dark: object.dark,
14
14
  input_options: object.input_options
15
15
  }) do %>
16
-
17
16
  <%= pb_rails("selectable_icon", props: {
18
17
  icon: object.icon,
19
18
  inputs: "disabled",
@@ -26,6 +25,5 @@
26
25
  color: "light",
27
26
  dark: object.dark
28
27
  }) %>
29
-
30
28
  <% end %>
31
29
  <% end %>
@@ -5,6 +5,7 @@
5
5
  text-align: center;
6
6
  cursor: pointer;
7
7
  transition: all $transition_short ease;
8
+
8
9
  @media (hover:hover) {
9
10
  &:hover * {
10
11
  transition: transform $transition_short ease;
@@ -81,3 +82,5 @@
81
82
  }
82
83
  }
83
84
  }
85
+
86
+
@@ -1,16 +1,18 @@
1
1
  import React, { useRef, useState } from "react"
2
- import classnames from "classnames"
2
+
3
3
  import {
4
- Placement,
5
- offset,
6
- arrow,
7
- shift,
8
- useFloating,
4
+ arrow,
5
+ flip,
6
+ offset,
7
+ Placement,
8
+ safePolygon,
9
+ shift,
10
+ useFloating,
11
+ useHover,
9
12
  useInteractions,
10
- useHover,
11
- flip,
12
- safePolygon,
13
13
  } from "@floating-ui/react-dom-interactions"
14
+
15
+ import classnames from "classnames"
14
16
  import { GlobalProps, globalProps } from "../utilities/globalProps"
15
17
  import { buildAriaProps, buildDataProps } from "../utilities/props"
16
18
  import Flex from "../pb_flex/_flex"
@@ -18,12 +20,13 @@ import Flex from "../pb_flex/_flex"
18
20
  type TooltipProps = {
19
21
  aria?: { [key: string]: string },
20
22
  className?: string | string[],
23
+ children: JSX.Element,
21
24
  data?: { [key: string]: string },
22
- text: string,
25
+ delay?: number | Partial<{open: number; close: number}>,
23
26
  icon?: string,
24
27
  interaction?: boolean,
25
28
  placement?: Placement,
26
- children: JSX.Element,
29
+ text: string,
27
30
  zIndex?: Pick<GlobalProps, "ZIndex">,
28
31
  } & GlobalProps
29
32
 
@@ -33,10 +36,11 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
33
36
  className,
34
37
  children,
35
38
  data = {},
39
+ delay = 0,
36
40
  icon = null,
37
41
  interaction = false,
38
- text,
39
42
  placement: preferredPlacement = "top",
43
+ text,
40
44
  zIndex,
41
45
  ...rest
42
46
  } = props
@@ -46,52 +50,54 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
46
50
 
47
51
  const css = classnames(
48
52
  globalProps({...rest}),
49
- className
53
+ className,
50
54
  )
51
55
  const [open, setOpen] = useState(false)
52
56
  const arrowRef = useRef(null)
53
57
  const {
54
- x,
55
- y,
56
- reference,
57
- floating,
58
- strategy,
58
+
59
59
  context,
60
- placement,
60
+ floating,
61
61
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
62
+ placement,
63
+ reference,
64
+ strategy,
65
+ x,
66
+ y,
62
67
  } = useFloating({
63
- placement: preferredPlacement,
64
- open,
65
- onOpenChange(open) {
66
- setOpen(open)
67
- },
68
68
  middleware: [
69
- offset(10),
70
- shift(),
69
+ arrow({
70
+ element: arrowRef,
71
+ }),
71
72
  flip({
72
73
  fallbackPlacements: ["top", "right", "bottom", "left"],
73
74
  fallbackStrategy: "initialPlacement",
74
75
  flipAlignment: false,
75
76
  }),
76
- arrow({
77
- element: arrowRef,
78
- }),
77
+ offset(10),
78
+ shift()
79
79
  ],
80
+ open,
81
+ onOpenChange(open) {
82
+ setOpen(open)
83
+ },
84
+ placement: preferredPlacement
80
85
  })
81
86
 
82
87
  const { getFloatingProps } = useInteractions([
83
88
  useHover(context, {
89
+ delay,
84
90
  handleClose: interaction ? safePolygon({
85
91
  blockPointerEvents: false
86
- }) : null,
92
+ }) : null
87
93
  })
88
94
  ])
89
95
 
90
96
  const staticSide = {
91
- top: "bottom",
92
- right: "left",
93
97
  bottom: "top",
94
98
  left: "right",
99
+ right: "left",
100
+ top: "bottom",
95
101
  }[placement.split("-")[0]]
96
102
 
97
103
  return (
@@ -109,9 +115,9 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
109
115
  {open && (
110
116
  <div
111
117
  {...getFloatingProps({
112
- role: "tooltip",
113
- ref: floating,
114
118
  className: `tooltip_tooltip ${placement} visible`,
119
+ ref: floating,
120
+ role: "tooltip",
115
121
  style: {
116
122
  position: strategy,
117
123
  top: y ?? 0,
@@ -0,0 +1,56 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Button, Tooltip, Flex, FlexItem } from '../..';
5
+
6
+ const TooltipDelay = (props) => {
7
+
8
+ return (
9
+ <Flex
10
+ flexDirection='row'
11
+ gap='md'
12
+ justifyContent='center'
13
+ wrap
14
+ >
15
+ <FlexItem>
16
+ <Tooltip
17
+ delay={1000}
18
+ placement='top'
19
+ text="1s open/close delay"
20
+ zIndex={10}
21
+ {...props}
22
+ >
23
+ <Button text="1s delay"/>
24
+ </Tooltip>
25
+ </FlexItem>
26
+ <FlexItem>
27
+ <Tooltip
28
+ delay={{
29
+ open: 1000
30
+ }}
31
+ placement='top'
32
+ text="1s open delay"
33
+ zIndex={10}
34
+ {...props}
35
+ >
36
+ <Button text="Open only"/>
37
+ </Tooltip>
38
+ </FlexItem>
39
+ <FlexItem>
40
+ <Tooltip
41
+ delay={{
42
+ close: 1000
43
+ }}
44
+ placement='top'
45
+ text="1s close delay"
46
+ zIndex={10}
47
+ {...props}
48
+ >
49
+ <Button text="Close only"/>
50
+ </Tooltip>
51
+ </FlexItem>
52
+ </Flex>
53
+ )
54
+ }
55
+
56
+ export default TooltipDelay
@@ -0,0 +1,5 @@
1
+ Waits for the specified time when the event listener runs before triggering the tooltip.
2
+
3
+ The `delay` accepts `number` in `ms` or an `object` with `open` and `close` properties.
4
+
5
+ The `default` is `0`.
@@ -11,3 +11,4 @@ examples:
11
11
  - tooltip_interaction: Content Interaction
12
12
  - tooltip_margin: Margin
13
13
  - tooltip_icon: Tooltip with Icon
14
+ - tooltip_delay: Delay
@@ -2,3 +2,4 @@ export { default as TooltipDefaultReact } from './_tooltip_default_react'
2
2
  export { default as TooltipInteraction } from './_tooltip_interaction'
3
3
  export { default as TooltipMargin } from './_tooltip_margin'
4
4
  export { default as TooltipIcon } from './_tooltip_icon'
5
+ export { default as TooltipDelay } from './_tooltip_delay'
@@ -13,6 +13,7 @@ import DistributionBar from './pb_distribution_bar/_distribution_bar'
13
13
  import Gauge from './pb_gauge/_gauge'
14
14
  import Legend from './pb_legend/_legend'
15
15
  import LineGraph from './pb_line_graph/_line_graph'
16
+ import MultiLevelSelect from './pb_multi_level_select/_multi_level_select'
16
17
  import Passphrase from './pb_passphrase/_passphrase'
17
18
  import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
18
19
  import TreemapChart from './pb_treemap_chart/_treemap_chart'
@@ -27,6 +28,7 @@ WebpackerReact.registerComponents({
27
28
  DialogFooter,
28
29
  DialogHeader,
29
30
  DistributionBar,
31
+ MultiLevelSelect,
30
32
  Legend,
31
33
  LineGraph,
32
34
  Passphrase,
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.5.0"
5
- VERSION = "12.6.0"
4
+ PREVIOUS_VERSION = "12.7.1"
5
+ VERSION = "12.7.1.pre.alpha.alpharubyrelease281"
6
6
  end