playbook_ui 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR8335906

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.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +10 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts +26 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +6 -6
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +34 -21
  6. data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +2 -1
  7. data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +15 -0
  8. data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +28 -0
  9. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
  10. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
  11. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
  12. data/app/pb_kits/playbook/pb_copy_button/index.js +47 -0
  13. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +5 -1
  14. data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb +2 -2
  15. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +0 -3
  16. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +0 -2
  17. data/app/pb_kits/playbook/pb_draggable/index.js +16 -88
  18. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +7 -11
  19. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +0 -2
  20. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
  21. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +2 -11
  22. data/app/pb_kits/playbook/pb_link/_link.tsx +18 -0
  23. data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
  24. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
  25. data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
  26. data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
  27. data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_link/link.rb +6 -0
  29. data/app/pb_kits/playbook/pb_link/link.test.jsx +30 -0
  30. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
  31. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  32. data/app/pb_kits/playbook/pb_tooltip/index.js +45 -27
  33. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +5 -1
  34. data/dist/chunks/{_typeahead-W0hatdPs.js → _typeahead-CkemExmL.js} +1 -1
  35. data/dist/chunks/_weekday_stacked-CtSzPEH0.js +45 -0
  36. data/dist/chunks/{lib-kMuhBuU7.js → lib-DjpLC8uO.js} +1 -1
  37. data/dist/chunks/{pb_form_validation-DBJ0wZuS.js → pb_form_validation-S56UaHZl.js} +1 -1
  38. data/dist/chunks/vendor.js +1 -1
  39. data/dist/menu.yml +2 -2
  40. data/dist/playbook-doc.js +1 -1
  41. data/dist/playbook-rails-react-bindings.js +1 -1
  42. data/dist/playbook-rails.js +1 -1
  43. data/dist/playbook.css +1 -1
  44. data/lib/playbook/version.rb +1 -1
  45. metadata +14 -12
  46. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +0 -193
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +0 -1
  48. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +0 -11
  49. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +0 -22
  50. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +0 -1
  51. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +0 -1
  52. data/dist/chunks/_weekday_stacked-C98LOqgG.js +0 -45
@@ -19,7 +19,9 @@ type LinkProps = {
19
19
  icon?: string,
20
20
  iconRight?: string,
21
21
  id?: string,
22
+ tabIndex?: number,
22
23
  tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
24
+ target?: string,
23
25
  text?: string,
24
26
  underline?: boolean,
25
27
  } & GlobalProps
@@ -37,7 +39,9 @@ const Link = (props: LinkProps): React.ReactElement => {
37
39
  icon = '',
38
40
  iconRight = '',
39
41
  id = '',
42
+ tabIndex,
40
43
  tag = 'a',
44
+ target = '',
41
45
  text = '',
42
46
  underline = false,
43
47
  } = props
@@ -52,6 +56,14 @@ const Link = (props: LinkProps): React.ReactElement => {
52
56
  )
53
57
  const Tag = tag as keyof JSX.IntrinsicElements
54
58
 
59
+ const getTargetAttribute = () => {
60
+ if (target && href) {
61
+ return target
62
+ }
63
+
64
+ return undefined
65
+ }
66
+
55
67
  const renderContent = () => (
56
68
  <>
57
69
  {icon && (
@@ -87,6 +99,9 @@ const Link = (props: LinkProps): React.ReactElement => {
87
99
  <a
88
100
  {...commonProps}
89
101
  href={href}
102
+ rel={target !== 'child' ? 'noreferrer' : undefined}
103
+ tabIndex={tabIndex}
104
+ target={getTargetAttribute()}
90
105
  >
91
106
  {renderContent()}
92
107
  </a>
@@ -96,6 +111,9 @@ const Link = (props: LinkProps): React.ReactElement => {
96
111
  <a
97
112
  {...commonProps}
98
113
  href={href}
114
+ rel={target !== 'child' ? 'noreferrer' : undefined}
115
+ tabIndex={tabIndex}
116
+ target={getTargetAttribute()}
99
117
  >
100
118
  <Tag>{renderContent()}</Tag>
101
119
  </a>
@@ -0,0 +1,15 @@
1
+ <div>
2
+ <%= pb_rails("link", props: {
3
+ href: "http://google.com",
4
+ target: "blank",
5
+ text: "Open In New Window"
6
+ }) %>
7
+ </div>
8
+
9
+ <div>
10
+ <%= pb_rails("link", props: {
11
+ href: "https://playbook.powerapp.cloud/",
12
+ target: "child",
13
+ text: "Open In Child Tab",
14
+ }) %>
15
+ </div>
@@ -0,0 +1,29 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkTarget = (props) => (
5
+ <div>
6
+ <div>
7
+ <Link
8
+ aria={{ label: 'Link to Google in new window' }}
9
+ href="https://google.com"
10
+ tabIndex={0}
11
+ target='blank'
12
+ text="Open In New Window"
13
+ {...props}
14
+ />
15
+ </div>
16
+ <div>
17
+ <Link
18
+ aria={{ label: 'Link to Playbook in a child tab' }}
19
+ href="https://playbook.powerapp.cloud/"
20
+ tabIndex={0}
21
+ target='child'
22
+ text="Open In Child Tab"
23
+ {...props}
24
+ />
25
+ </div>
26
+ </div>
27
+ )
28
+
29
+ export default LinkTarget
@@ -1,16 +1,18 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - link_color: Color
5
5
  - link_underline: Underline
6
6
  - link_icon: Icon
7
7
  - link_disabled: Disabled
8
8
  - link_tag: Tag
9
-
10
-
9
+ - link_target: Target
10
+
11
+
11
12
  react:
12
13
  - link_color: Color
13
14
  - link_underline: Underline
14
15
  - link_icon: Icon
15
16
  - link_disabled: Disabled
16
17
  - link_tag: Tag
18
+ - link_target: Target
@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
2
2
  export { default as LinkUnderline } from './_link_underline.jsx'
3
3
  export { default as LinkIcon } from './_link_icon.jsx'
4
4
  export { default as LinkDisabled } from './_link_disabled.jsx'
5
- export { default as LinkTag } from './_link_tag.jsx'
5
+ export { default as LinkTag } from './_link_tag.jsx'
6
+ export { default as LinkTarget } from './_link_target.jsx'
@@ -9,7 +9,7 @@
9
9
  <% end %>
10
10
 
11
11
  <% if object.tag == "a" %>
12
- <%= pb_content_tag(object.tag, { href: object.href }) do %>
12
+ <%= pb_content_tag(object.tag, { href: object.href, target: object.target }) do %>
13
13
  <%= link_content.call %>
14
14
  <% end %>
15
15
  <% else %>
@@ -11,9 +11,11 @@ module Playbook
11
11
  prop :href
12
12
  prop :icon
13
13
  prop :icon_right
14
+ prop :tabindex
14
15
  prop :tag, type: Playbook::Props::Enum,
15
16
  values: %w[a h1 h2 h3 h4 h5 h6 p span div],
16
17
  default: "a"
18
+ prop :target
17
19
  prop :text
18
20
  prop :underline, type: Playbook::Props::Boolean,
19
21
  default: false
@@ -26,6 +28,10 @@ module Playbook
26
28
  text
27
29
  end
28
30
 
31
+ def target_attribute
32
+ target if target && href
33
+ end
34
+
29
35
  private
30
36
 
31
37
  def color_class
@@ -90,3 +90,33 @@ test('adds icon right', () => {
90
90
  const icon = kit.querySelector('.pb_icon_kit')
91
91
  expect(icon).toBeInTheDocument();
92
92
  })
93
+
94
+ test('should render target prop', () => {
95
+ render(
96
+ <Link
97
+ data={{ testid: 'target-test' }}
98
+ href="https://playbook.powerapp.cloud/"
99
+ target="blank"
100
+ />
101
+ )
102
+
103
+ const kit = screen.getByTestId('target-test')
104
+
105
+ expect(kit).toHaveAttribute('target', 'blank')
106
+ })
107
+
108
+
109
+ test('should render child target prop', () => {
110
+ render(
111
+ <Link
112
+ data={{ testid: 'target-test' }}
113
+ href="https://playbook.powerapp.cloud/"
114
+ tabIndex={0}
115
+ target="child"
116
+ />
117
+ )
118
+
119
+ const kit = screen.getByTestId('target-test')
120
+
121
+ expect(kit).toHaveAttribute('target', 'child')
122
+ })
@@ -2,7 +2,7 @@
2
2
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
3
3
  step 1
4
4
  <% end %>
5
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
5
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
6
6
  step 2
7
7
  <% end %>
8
8
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
11
11
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
12
12
  step 4
13
13
  <% end %>
14
- <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
14
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
15
15
  step 5
16
16
  <% end %>
17
17
  <% end %>
@@ -19,7 +19,7 @@
19
19
  <br /><br />
20
20
 
21
21
  <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
22
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
22
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
23
23
  <% end %>
24
24
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
25
25
  <% end %>
@@ -31,10 +31,10 @@
31
31
 
32
32
  <br /><br>
33
33
  <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
34
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
34
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
35
35
  <%= pb_rails("caption", props:{text: "Ordered"})%>
36
36
  <% end %>
37
- <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
37
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
38
38
  <%= pb_rails("caption", props:{text: "Shipped"})%>
39
39
  <% end %>
40
40
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
50
50
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
51
51
  <%= pb_rails("caption", props:{text: "Shipped"})%>
52
52
  <% end %>
53
- <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
53
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
54
54
  <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
55
55
  <% end %>
56
56
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
@@ -43,4 +43,4 @@
43
43
  Whoa. I'm a tooltip.
44
44
  <% end %>
45
45
  <% end %>
46
- <% end %>
46
+ <% end %>
@@ -1,5 +1,4 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
-
3
2
  import {
4
3
  createPopperLite as createPopper,
5
4
  flip,
@@ -17,27 +16,34 @@ export default class PbTooltip extends PbEnhancedElement {
17
16
 
18
17
  connect() {
19
18
  this.triggerElements.forEach((trigger) => {
20
- trigger.addEventListener('mouseenter', () => {
21
- this.mouseenterTimeout = setTimeout(() => {
22
- this.showTooltip(trigger)
23
- this.checkCloseTooltip(trigger)
24
- }, TOOLTIP_TIMEOUT)
19
+ const method = this.triggerMethod
25
20
 
26
- trigger.addEventListener('mouseleave', () => {
21
+ if (method === 'click') {
22
+ trigger.addEventListener('click', () => {
23
+ this.showTooltip(trigger)
24
+ })
25
+ } else {
26
+ trigger.addEventListener('mouseenter', () => {
27
+ this.mouseenterTimeout = setTimeout(() => {
28
+ this.showTooltip(trigger)
29
+ this.checkCloseTooltip(trigger)
30
+ }, TOOLTIP_TIMEOUT)
31
+
32
+ trigger.addEventListener('mouseleave', () => {
33
+ clearTimeout(this.mouseenterTimeout)
34
+ setTimeout(() => {
35
+ this.hideTooltip()
36
+ }, 0)
37
+ }, { once: true })
38
+ })
39
+
40
+ this.tooltip.addEventListener('mouseenter', () => {
27
41
  clearTimeout(this.mouseenterTimeout)
28
-
29
- setTimeout(() => {
30
- this.hideTooltip()
31
- }, 0)
32
- }, { once: true })
33
- })
34
- })
35
-
36
- this.tooltip.addEventListener('mouseenter', () => {
37
- clearTimeout(this.mouseenterTimeout)
38
- })
39
- this.tooltip.addEventListener('mouseleave', () => {
40
- this.hideTooltip()
42
+ })
43
+ this.tooltip.addEventListener('mouseleave', () => {
44
+ this.hideTooltip()
45
+ })
46
+ }
41
47
  })
42
48
  }
43
49
 
@@ -54,7 +60,7 @@ export default class PbTooltip extends PbEnhancedElement {
54
60
  }
55
61
 
56
62
  showTooltip(trigger) {
57
- if (this.shouldShowTooltip === "false") return
63
+ if (this.shouldShowTooltip === 'false') return
58
64
 
59
65
  this.popper = createPopper(trigger, this.tooltip, {
60
66
  placement: this.position,
@@ -78,6 +84,13 @@ export default class PbTooltip extends PbEnhancedElement {
78
84
  ],
79
85
  })
80
86
  this.tooltip.classList.add('show')
87
+
88
+ if (this.triggerMethod === 'click') {
89
+ clearTimeout(this.autoHideTimeout)
90
+ this.autoHideTimeout = setTimeout(() => {
91
+ this.hideTooltip()
92
+ }, 1000)
93
+ }
81
94
  }
82
95
 
83
96
  hideTooltip() {
@@ -94,25 +107,26 @@ export default class PbTooltip extends PbEnhancedElement {
94
107
  let triggerEl
95
108
 
96
109
  if (this.triggerElementId) {
97
- triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
110
+ triggerEl = document.querySelector(`#${this.triggerElementId}`)
98
111
  } else {
99
112
  const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
100
- triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
101
- document.querySelectorAll(`${this.triggerElementSelector}`)
113
+ triggerEl = selectorIsId
114
+ ? document.querySelector(`${this.triggerElementSelector}`)
115
+ : document.querySelectorAll(`${this.triggerElementSelector}`)
102
116
  }
103
117
 
104
118
  if (!triggerEl) {
105
- /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
106
119
  console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
107
120
  return []
108
121
  }
109
122
 
110
123
  if (!triggerEl.length) triggerEl = [triggerEl]
111
- return this._triggerElements = (this._triggerElements || triggerEl)
124
+ return (this._triggerElements = this._triggerElements || triggerEl)
112
125
  }
113
126
 
114
127
  get tooltip() {
115
- return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
128
+ return (this._tooltip =
129
+ this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
116
130
  }
117
131
 
118
132
  get position() {
@@ -134,4 +148,8 @@ export default class PbTooltip extends PbEnhancedElement {
134
148
  get shouldShowTooltip() {
135
149
  return this.element.dataset.pbTooltipShowTooltip
136
150
  }
151
+
152
+ get triggerMethod() {
153
+ return this.element.dataset.pbTooltipTriggerMethod || 'hover'
154
+ }
137
155
  }
@@ -9,6 +9,9 @@ module Playbook
9
9
  prop :tooltip_id
10
10
  prop :dark, type: Playbook::Props::Boolean,
11
11
  default: false
12
+ prop :trigger_method, type: Playbook::Props::Enum,
13
+ values: %w[hover click],
14
+ default: "hover"
12
15
 
13
16
  def classname
14
17
  generate_classname("pb_tooltip_kit", dark_class)
@@ -21,7 +24,8 @@ module Playbook
21
24
  pb_tooltip_trigger_element_selector: trigger_element_selector,
22
25
  pb_tooltip_trigger_element_id: trigger_element_id,
23
26
  pb_tooltip_tooltip_id: tooltip_id,
24
- pb_tooltip_show_tooltip: true
27
+ pb_tooltip_show_tooltip: true,
28
+ pb_tooltip_trigger_method: trigger_method
25
29
  )
26
30
  end
27
31
 
@@ -1,4 +1,4 @@
1
- import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-kMuhBuU7.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
1
+ import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-DjpLC8uO.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
2
2
  /*!
3
3
  Copyright (c) 2018 Jed Watson.
4
4
  Licensed under the MIT License (MIT), see