playbook_ui 13.15.0.pre.alpha.play1141iconkitusinglibrary1956 → 13.15.0.pre.alpha.play10841940

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +33 -40
  3. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  4. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +30 -44
  5. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
  6. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +2 -3
  7. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +4 -7
  8. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  9. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +9 -10
  10. data/app/pb_kits/playbook/pb_icon/_icon.tsx +5 -21
  11. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +2 -3
  12. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +2 -3
  13. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  14. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  15. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  16. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  18. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  19. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  20. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  21. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  22. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  23. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  24. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  26. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  27. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  28. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  29. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  30. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  32. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  33. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  34. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  35. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +50 -51
  36. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +19 -20
  37. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -4
  38. data/app/pb_kits/playbook/pb_popover/_popover.tsx +4 -6
  39. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  40. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  41. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +17 -19
  42. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  43. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +21 -23
  44. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +10 -18
  45. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +23 -46
  46. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  47. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  48. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +15 -17
  49. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +7 -9
  50. data/app/pb_kits/playbook/pb_select/_select.scss +4 -13
  51. data/app/pb_kits/playbook/pb_select/_select.tsx +4 -7
  52. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -2
  53. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
  54. data/app/pb_kits/playbook/pb_select/select.rb +1 -6
  55. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +24 -25
  56. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +26 -27
  57. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +1 -2
  58. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  59. data/dist/playbook-rails.js +4 -4
  60. data/lib/playbook/version.rb +1 -1
  61. metadata +2 -4
  62. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +0 -24
  63. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +0 -38
@@ -16,7 +16,8 @@ test("render all color variants", () => {
16
16
  testValues.forEach((variant) => {
17
17
  const { getByTestId } = render(
18
18
  <LayoutTest data={{ testid: `test-${variant}` }}
19
- variant={variant} />
19
+ variant={variant}
20
+ />
20
21
  )
21
22
  expect(getByTestId(`test-${variant}`)).toHaveClass(
22
23
  `pb_layout_kit_sidebar_size_md_left_${
@@ -33,7 +34,8 @@ test("render transparent class", () => {
33
34
 
34
35
  const { getByTestId } = render(
35
36
  <LayoutTest data={{ testid: `test-${id}` }}
36
- variant={id} />
37
+ variant={id}
38
+ />
37
39
  )
38
40
  expect(getByTestId(`test-${id}`)).toHaveClass(
39
41
  `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -47,7 +49,8 @@ test("render all sizes variants", () => {
47
49
  testValues.forEach((size) => {
48
50
  const { getByTestId } = render(
49
51
  <LayoutTest data={{ testid: `test-${size}` }}
50
- size={size} />
52
+ size={size}
53
+ />
51
54
  )
52
55
  expect(getByTestId(`test-${size}`)).toHaveClass(
53
56
  `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -84,7 +87,8 @@ test("render all layout variants", () => {
84
87
  testValues.forEach(({ layout, expected }) => {
85
88
  const { getByTestId } = render(
86
89
  <Layout data={{ testid: `test-${layout}` }}
87
- layout={layout}>
90
+ layout={layout}
91
+ >
88
92
  <Layout.Body>
89
93
  <Card>{"Card content"}</Card>
90
94
  </Layout.Body>
@@ -12,7 +12,7 @@ type LegendProps = {
12
12
  className?: string,
13
13
  color?: string,
14
14
  dark?: boolean,
15
- data?: object,
15
+ data?: Record<string, unknown>,
16
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
17
17
  id?: string,
18
18
  prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
64
64
  {
65
65
  prefixText && (
66
66
  <Title
67
- dark={dark}
68
- size={4}
69
- tag="span"
70
- text={` ${prefixText} `}
71
- />
67
+ dark={dark}
68
+ size={4}
69
+ tag="span"
70
+ text={` ${prefixText} `}
71
+ />
72
72
  )
73
73
  }
74
74
  {` ${text} `}
@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
56
56
  return (
57
57
  <div
58
58
  className="Slides"
59
- onTouchStart={onTouchStart}
59
+ onTouchEnd={onTouchEnd}
60
60
  onTouchMove={onTouchMove}
61
- onTouchEnd={onTouchEnd}
61
+ onTouchStart={onTouchStart}
62
62
  >
63
63
  {
64
64
  urls.length > 1 && (
65
65
  <CircleIconButton
66
66
  className='carousel-arrow-left'
67
- dark={true}
67
+ dark
68
68
  icon="chevron-left"
69
69
  onClick={arrowLeft}
70
70
  variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
81
81
  urls.length > 1 && (
82
82
  <CircleIconButton
83
83
  className='carousel-arrow-right'
84
- dark={true}
84
+ dark
85
85
  icon="chevron-right"
86
86
  onClick={arrowRight}
87
87
  variant="link"
@@ -16,7 +16,7 @@ export default function Thumbnail({
16
16
  alt,
17
17
  width,
18
18
  url,
19
- onClick = ()=>{},
19
+ onClick,
20
20
  buttonRef,
21
21
  }: ThumbnailType): React.ReactElement {
22
22
  const activeClasses = classnames('Thumbnail', { active })
@@ -20,8 +20,8 @@ type CarouselType = {
20
20
  export default function Carousel({
21
21
  currentIndex,
22
22
  photos,
23
- onClick = ()=>{},
24
- onChange = ()=>{},
23
+ onClick,
24
+ onChange = () => undefined,
25
25
  setIndex,
26
26
  }: CarouselType): React.ReactElement {
27
27
  useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
39
39
  return (
40
40
  <div className="Lightbox">
41
41
  <Slides
42
- setIndex={setIndex}
43
42
  current={currentIndex}
44
43
  onChange={handleChange}
45
44
  onClick={onClick}
45
+ setIndex={setIndex}
46
46
  urls={photos.map((photo) => photo.url)}
47
47
  />
48
48
  {photos.length > 1 ? (
@@ -61,23 +61,31 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
61
61
 
62
62
  const HeaderBody = () => (
63
63
  <React.Fragment>
64
- <FlexItem flex="1" marginLeft="sm">
64
+ <FlexItem flex="1"
65
+ marginLeft="sm"
66
+ >
65
67
  <CircleIconButton
66
- onClick={handleOnLightboxClose}
67
- dark={true}
68
- variant="link"
69
- icon={icon}
68
+ dark
69
+ icon={icon}
70
+ onClick={handleOnLightboxClose}
71
+ variant="link"
70
72
  />
71
73
  </FlexItem>
72
74
  {title && text && (
73
75
  <FlexItem flex="5">
74
76
  <Flex justify="center">
75
- <Flex align="center" orientation="column">
77
+ <Flex align="center"
78
+ orientation="column"
79
+ >
76
80
  {typeof title === "string" ? (
77
- <Title dark paddingBottom="xxs" size={4} text={title} />
81
+ <Title dark
82
+ paddingBottom="xxs"
83
+ size={4}
84
+ text={title}
85
+ />
78
86
  ) : (
79
- <Flex justify="center"
80
- className="custom-header"
87
+ <Flex className="custom-header"
88
+ justify="center"
81
89
  >
82
90
  {title}
83
91
  </Flex>
@@ -86,8 +94,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
86
94
  {typeof text === "string" ? (
87
95
  <Caption dark>{text}</Caption>
88
96
  ) : (
89
- <Flex justify="center"
90
- className="custom-header"
97
+ <Flex className="custom-header"
98
+ justify="center"
91
99
  >
92
100
  {text}
93
101
  </Flex>
@@ -99,12 +107,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
99
107
  <FlexItem flex="1">
100
108
  <Flex justify="end">
101
109
  <Button
102
- className="nav-right-btn"
103
- htmlType="button"
104
- onClick={onClickRight}
105
- dark
106
- variant="link"
107
- text={navRight}
110
+ className="nav-right-btn"
111
+ dark
112
+ htmlType="button"
113
+ onClick={onClickRight}
114
+ text={navRight}
115
+ variant="link"
108
116
  />
109
117
  </Flex>
110
118
  </FlexItem>
@@ -114,11 +122,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
114
122
  return (
115
123
  <div className="carousel-header">
116
124
  <Flex
117
- {...ariaProps}
118
- {...dataProps}
119
- {...htmlProps}
120
- className={classnames(headerCSS, headerSpacing, className)}
121
- spacing={spacing}
125
+ {...ariaProps}
126
+ {...dataProps}
127
+ {...htmlProps}
128
+ className={classnames(headerCSS, headerSpacing, className)}
129
+ spacing={spacing}
122
130
  >
123
131
  {closeable && <HeaderBody />}
124
132
  {children}
@@ -19,7 +19,7 @@ type LightboxType = {
19
19
  id?: string,
20
20
  photos: [],
21
21
  initialPhoto?: number,
22
- onChange?: (index: number)=> {},
22
+ onChange?: (index: number)=> void,
23
23
  onClickRight?: () => void,
24
24
  onClose?: () => void,
25
25
  icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
40
40
  id = '',
41
41
  initialPhoto = 0,
42
42
  photos,
43
- onChange = ()=>{},
43
+ onChange = () => undefined,
44
44
  onClose,
45
45
  onClickRight,
46
46
  icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
107
107
  <div className="carousel">
108
108
  <Lightbox.Header
109
109
  icon={icon}
110
- onClose={onClose}
110
+ navRight={navRight}
111
111
  onClickRight={onClickRight}
112
+ onClose={onClose}
112
113
  text={description}
113
- navRight={navRight}
114
114
  title={title}
115
115
  />
116
116
  {children}
117
117
  <Carousel
118
- setIndex={setActivePhoto}
119
118
  currentIndex={activePhoto}
120
119
  onChange={handleOnSlide}
121
120
  photos={photosMap}
121
+ setIndex={setActivePhoto}
122
122
  />
123
123
  </div>
124
124
  </div>
@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
12
  type LineGraphProps = {
13
13
  align?: "left" | "right" | "center";
14
14
  axisTitle?: string;
15
- dark?: Boolean;
15
+ dark?: boolean;
16
16
  xAxisCategories: [];
17
17
  yAxisMin: number;
18
18
  yAxisMax: number;
@@ -138,15 +138,15 @@ const LineGraph = ({
138
138
 
139
139
  return (
140
140
  <HighchartsReact
141
- containerProps={{
141
+ containerProps={{
142
142
  className: classnames(globalProps(props), className),
143
143
  id: id,
144
144
  ...ariaProps,
145
145
  ...dataProps,
146
146
  ...htmlProps
147
147
  }}
148
- highcharts={Highcharts}
149
- options={options}
148
+ highcharts={Highcharts}
149
+ options={options}
150
150
  />
151
151
  );
152
152
  };
@@ -9,7 +9,7 @@ type ListProps = {
9
9
  className?: string;
10
10
  children: React.ReactNode[] | React.ReactNode;
11
11
  dark?: boolean;
12
- data?: object;
12
+ data?: Record<string, unknown>;
13
13
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
14
14
  id?: string;
15
15
  layout?: "" | "left" | "right";
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
72
72
  <div className={classes}>
73
73
  {ordered ? (
74
74
  <ol
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={className}
79
- id={id}
80
- role={role}
81
- tabIndex={tabIndex}
75
+ {...ariaProps}
76
+ {...dataProps}
77
+ {...htmlProps}
78
+ className={className}
79
+ id={id}
80
+ role={role}
81
+ tabIndex={tabIndex}
82
82
  >
83
83
  {childrenWithProps}
84
84
  </ol>
85
85
  ) : (
86
86
  <ul
87
- {...ariaProps}
88
- {...dataProps}
89
- {...htmlProps}
90
- className={className}
91
- id={id}
92
- role={role}
93
- tabIndex={tabIndex}
87
+ {...ariaProps}
88
+ {...dataProps}
89
+ {...htmlProps}
90
+ className={className}
91
+ id={id}
92
+ role={role}
93
+ tabIndex={tabIndex}
94
94
  >
95
95
  {childrenWithProps}
96
96
  </ul>
@@ -7,7 +7,7 @@ type ListItemProps = {
7
7
  aria?: { [key: string]: string },
8
8
  children: React.ReactNode[] | React.ReactNode,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  tabIndex?: number,
@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
37
37
 
38
38
  return (
39
39
  <div
40
- {...ariaProps}
41
- {...dataProps}
42
- {...htmlProps}
43
- className={classes}
44
- id={id}
40
+ {...ariaProps}
41
+ {...dataProps}
42
+ {...htmlProps}
43
+ className={classes}
44
+ id={id}
45
45
  >
46
46
  <Body color="light">
47
47
  <Icon
48
- aria={{ label: 'loading icon' }}
49
- fixedWidth
50
- icon="spinner"
51
- pulse
48
+ aria={{ label: 'loading icon' }}
49
+ fixedWidth
50
+ icon="spinner"
51
+ pulse
52
52
  />
53
53
  {' Loading'}
54
54
  </Body>
@@ -14,9 +14,9 @@ type MapProps = {
14
14
  id?: string,
15
15
  zoomBtns?: boolean,
16
16
  flyTo?: boolean,
17
- zoomInClick?: () => {},
18
- zoomOutClick?: () => {},
19
- flyToClick?: () => {},
17
+ zoomInClick?: () => void,
18
+ zoomOutClick?: () => void,
19
+ flyToClick?: () => void,
20
20
  } & GlobalProps
21
21
 
22
22
  const Map = (props: MapProps) => {
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
51
51
  {
52
52
  zoomBtns ? (
53
53
  <Map.Controls
54
- flyTo={flyTo}
55
- flyToClick={flyToClick}
56
- zoomBtns={zoomBtns}
57
- zoomInClick={zoomInClick}
58
- zoomOutClick={zoomOutClick}
54
+ flyTo={flyTo}
55
+ flyToClick={flyToClick}
56
+ zoomBtns={zoomBtns}
57
+ zoomInClick={zoomInClick}
58
+ zoomOutClick={zoomOutClick}
59
59
  />
60
60
  ) : null
61
61
  }
@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
6
6
  type MapControlTypes = {
7
7
  zoomBtns?: boolean,
8
8
  flyTo?: boolean,
9
- zoomInClick?: () => {},
10
- zoomOutClick?: () => {},
11
- flyToClick?: () => {},
9
+ zoomInClick?: () => void,
10
+ zoomOutClick?: () => void,
11
+ flyToClick?: () => void,
12
12
  children?: React.ReactNode | React.ReactNode[]
13
13
  }
14
14
 
@@ -21,19 +21,27 @@ const MapControls = ({
21
21
  children,
22
22
  }: MapControlTypes) => {
23
23
  return (
24
- <Flex className="custom-nav-control" orientation="column">
24
+ <Flex className="custom-nav-control"
25
+ orientation="column"
26
+ >
25
27
  {zoomBtns ? (
26
28
  <>
27
29
  <div className="custom-nav-control-zoom">
28
- <Button className="map-zoom-in-button" onClick={zoomInClick}>
30
+ <Button className="map-zoom-in-button"
31
+ onClick={zoomInClick}
32
+ >
29
33
  <Icon icon="plus" />
30
34
  </Button>
31
- <Button className="map-zoom-out-button" onClick={zoomOutClick}>
35
+ <Button className="map-zoom-out-button"
36
+ onClick={zoomOutClick}
37
+ >
32
38
  <Icon icon="minus" />
33
39
  </Button>
34
40
  </div>
35
41
  {flyTo ? (
36
- <Button className="map-flyto-button" onClick={flyToClick}>
42
+ <Button className="map-flyto-button"
43
+ onClick={flyToClick}
44
+ >
37
45
  <Icon icon="eye" />
38
46
  </Button>
39
47
  ) : null}
@@ -3,13 +3,15 @@ import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
 
5
5
  type MapCustomButtonTypes = {
6
- onClick?: () => {};
6
+ onClick?: () => void;
7
7
  icon?: string;
8
8
  };
9
9
 
10
10
  const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
11
11
  return (
12
- <Button className="pb_map-custom-button" onClick={onClick}>
12
+ <Button className="pb_map-custom-button"
13
+ onClick={onClick}
14
+ >
13
15
  <Icon icon={icon} />
14
16
  </Button>
15
17
  );
@@ -20,7 +20,7 @@ type MessageProps = {
20
20
  avatarUrl?: string,
21
21
  children?: React.ReactChild[] | React.ReactChild,
22
22
  className?: string,
23
- data?: object,
23
+ data?: Record<string, unknown>,
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
25
  id?: string,
26
26
  label?: string,
@@ -7,7 +7,7 @@ type MessageMentionProps = {
7
7
  aria: { [key: string]: string },
8
8
  children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  variant: 'user' | 'self',
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
34
34
 
35
35
  return (
36
36
  <div
37
- {...ariaProps}
38
- {...dataProps}
39
- {...htmlProps}
40
- className={classes}
41
- id={id}
37
+ {...ariaProps}
38
+ {...dataProps}
39
+ {...htmlProps}
40
+ className={classes}
41
+ id={id}
42
42
  >
43
43
  {children}
44
44
  </div>
@@ -86,6 +86,50 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
86
86
  item: []
87
87
  })
88
88
 
89
+ const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
90
+ if (!Array.isArray(tree)) {
91
+ return
92
+ }
93
+ return tree.map((item: { [key: string]: any }) => {
94
+ item.checked = check
95
+ item.children = modifyRecursive(item.children, check)
96
+ return item
97
+ })
98
+ }
99
+
100
+ // Function to map over data and add parent_id + depth property to each item
101
+ const addCheckedAndParentProperty = (
102
+ treeData: { [key: string]: any }[],
103
+ selectedIds: string[],
104
+ parent_id: string = null,
105
+ depth = 0,
106
+ ) => {
107
+ if (!Array.isArray(treeData)) {
108
+ return
109
+ }
110
+ return treeData.map((item: { [key: string]: any } | any) => {
111
+ const newItem = {
112
+ ...item,
113
+ checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
114
+ parent_id,
115
+ depth,
116
+ }
117
+ if (newItem.children && newItem.children.length > 0) {
118
+ const children =
119
+ item.checked && !returnAllSelected
120
+ ? modifyRecursive(item.children, true)
121
+ : item.children
122
+ newItem.children = addCheckedAndParentProperty(
123
+ children,
124
+ selectedIds,
125
+ newItem.id,
126
+ depth + 1
127
+ )
128
+ }
129
+ return newItem
130
+ })
131
+ }
132
+
89
133
  useEffect(() => {
90
134
  const formattedData = addCheckedAndParentProperty(
91
135
  treeData,
@@ -139,16 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
139
183
  }
140
184
  }, [])
141
185
 
142
- const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
143
- if (!Array.isArray(tree)) {
144
- return
145
- }
146
- return tree.map((item: { [key: string]: any }) => {
147
- item.checked = check
148
- item.children = modifyRecursive(item.children, check)
149
- return item
150
- })
151
- }
186
+
152
187
 
153
188
  // Iterate over tree, find item and set checked or unchecked
154
189
  const modifyValue = (
@@ -206,38 +241,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
206
241
  return tree
207
242
  }
208
243
 
209
- // Function to map over data and add parent_id + depth property to each item
210
- const addCheckedAndParentProperty = (
211
- treeData: { [key: string]: any }[],
212
- selectedIds: string[],
213
- parent_id: string = null,
214
- depth = 0,
215
- ) => {
216
- if (!Array.isArray(treeData)) {
217
- return
218
- }
219
- return treeData.map((item: { [key: string]: any } | any) => {
220
- const newItem = {
221
- ...item,
222
- checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
223
- parent_id,
224
- depth,
225
- }
226
- if (newItem.children && newItem.children.length > 0) {
227
- const children =
228
- item.checked && !returnAllSelected
229
- ? modifyRecursive(item.children, true)
230
- : item.children
231
- newItem.children = addCheckedAndParentProperty(
232
- children,
233
- selectedIds,
234
- newItem.id,
235
- depth + 1
236
- )
237
- }
238
- return newItem
239
- })
240
- }
244
+
241
245
 
242
246
  // Click event for x on form pill
243
247
  const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {