playbook_ui 14.18.0.pre.alpha.PLAY20787400 → 14.18.0.pre.alpha.play2034zonesandcolors7407

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 (40) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +0 -12
  3. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -12
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -50
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  6. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -4
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +1 -5
  9. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -10
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  13. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  15. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -1
  16. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  17. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  20. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  21. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  22. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  23. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  24. data/dist/chunks/{_typeahead-BX8IifKY.js → _typeahead-CvkGr9xV.js} +1 -1
  25. data/dist/chunks/_weekday_stacked-B-ran-L1.js +45 -0
  26. data/dist/chunks/{lib-96_ZmvAo.js → lib-yWHJ_8mm.js} +1 -1
  27. data/dist/chunks/{pb_form_validation-Vv2TqXVC.js → pb_form_validation-CFPfX89U.js} +1 -1
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/playbook-doc.js +2 -2
  30. data/dist/playbook-rails-react-bindings.js +1 -1
  31. data/dist/playbook-rails.js +1 -1
  32. data/lib/playbook/version.rb +1 -1
  33. metadata +10 -11
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +0 -34
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +0 -14
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +0 -20
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +0 -14
  38. data/dist/chunks/_weekday_stacked-DfMD7HJz.js +0 -45
  39. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
  40. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
@@ -1,24 +1,26 @@
1
1
  import PbEnhancedElement from "../pb_enhanced_element";
2
2
 
3
- const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
3
+ const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
4
4
  const DRAGGABLE_CONTAINER = ".pb_draggable_container";
5
+ const NEEDS_CLONE = ["shadow", "outline"]; // clone only for these types
5
6
 
6
7
  export default class PbDraggable extends PbEnhancedElement {
7
- static get selector() {
8
- return DRAGGABLE_SELECTOR;
9
- }
8
+ static get selector() { return DRAGGABLE_SELECTOR; }
10
9
 
11
10
  connect() {
12
11
  this.state = {
13
- items: [],
14
- dragData: { id: "", initialGroup: "" },
15
- isDragging: "",
16
- activeContainer: ""
12
+ items: [],
13
+ dragData: { id: "", initialGroup: "" },
14
+ isDragging: "",
15
+ activeContainer: "",
17
16
  };
18
17
 
19
- this.draggedItem = null;
18
+ this.draggedItem = null;
20
19
  this.draggedItemId = null;
20
+ this.dragGhost = null;
21
21
  this.hasMultipleContainers = false;
22
+ this.dragZoneType = "";
23
+ this.dragZoneColor = "";
22
24
 
23
25
  document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
24
26
  }
@@ -26,13 +28,12 @@ export default class PbDraggable extends PbEnhancedElement {
26
28
  setState(newState) {
27
29
  this.state = { ...this.state, ...newState };
28
30
  if (newState.items) {
29
- const customEvent = new CustomEvent('pb-draggable-reorder', {
31
+ this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
30
32
  detail: {
31
33
  reorderedItems: this.state.items,
32
- containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
33
- }
34
- });
35
- this.element.dispatchEvent(customEvent);
34
+ containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id,
35
+ },
36
+ }));
36
37
  }
37
38
  }
38
39
 
@@ -43,71 +44,100 @@ export default class PbDraggable extends PbEnhancedElement {
43
44
 
44
45
  // Needed to prevent images within draggable items from being independently draggable
45
46
  // Needed if using Image kit in draggable items
46
- this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
47
- img.setAttribute("draggable", "false");
48
- });
49
-
50
- this.element.querySelectorAll(".pb_draggable_item").forEach(item => {
51
- item.addEventListener("dragstart", this.handleDragStart.bind(this));
52
- item.addEventListener("dragend", this.handleDragEnd.bind(this));
53
- item.addEventListener("dragenter", this.handleDragEnter.bind(this));
54
- });
47
+ this.element.querySelectorAll(".pb_draggable_item img")
48
+ .forEach(img => img.setAttribute("draggable", "false"));
49
+
50
+ this.element.querySelectorAll(".pb_draggable_item")
51
+ .forEach(item => {
52
+ item.addEventListener("dragstart", this.handleDragStart.bind(this));
53
+ item.addEventListener("dragend", this.handleDragEnd.bind(this));
54
+ item.addEventListener("dragenter", this.handleDragEnter.bind(this));
55
+ });
55
56
 
56
- containers.forEach(container => {
57
- container.addEventListener("dragover", this.handleDragOver.bind(this));
58
- container.addEventListener("drop", this.handleDrop.bind(this));
57
+ containers.forEach(c => {
58
+ c.addEventListener("dragover", this.handleDragOver.bind(this));
59
+ c.addEventListener("drop", this.handleDrop.bind(this));
59
60
  });
60
61
  }
61
62
 
63
+ /* ---------------- DRAG START ---------------- */
62
64
  handleDragStart(event) {
63
65
  // Needed to prevent images within draggable items from being independently draggable
64
66
  // Needed if using Image kit in draggable items
65
- if (event.target.tagName.toLowerCase() === 'img') {
67
+ if (event.target.tagName.toLowerCase() === "img") {
66
68
  event.preventDefault();
67
69
  return;
68
70
  }
69
71
 
70
- const container = event.target.closest(DRAGGABLE_CONTAINER);
71
- this.draggedItem = event.target;
72
+ const container = event.target.closest(DRAGGABLE_CONTAINER);
73
+ this.draggedItem = event.target;
72
74
  this.draggedItemId = event.target.id;
75
+ this.dragZoneType = this.element.dataset.dropZoneType || "";
76
+ this.dragZoneColor = this.element.dataset.dropZoneColor || "";
73
77
 
74
78
  this.setState({
75
- dragData: { id: this.draggedItemId, initialGroup: container.id },
76
- isDragging: this.draggedItemId
79
+ dragData: { id: this.draggedItemId, initialGroup: container.id },
80
+ isDragging: this.draggedItemId,
77
81
  });
78
82
 
79
- event.target.classList.add("is_dragging");
83
+ this.draggedItem.classList.add(
84
+ "is_dragging",
85
+ `drop_zone_${this.dragZoneType}`,
86
+ `drop_zone_color_${this.dragZoneColor}`,
87
+ );
88
+
80
89
  if (event.dataTransfer) {
81
- event.dataTransfer.effectAllowed = 'move';
82
- event.dataTransfer.setData('text/plain', this.draggedItemId);
90
+ event.dataTransfer.effectAllowed = "move";
91
+ event.dataTransfer.setData("text/plain", this.draggedItemId);
92
+
93
+ /* ---------- custom ghost clone (shadow + outline only) ---------- */
94
+ if (NEEDS_CLONE.includes(this.dragZoneType)) {
95
+ const ghost = this.draggedItem.cloneNode(true);
96
+ ghost.classList.remove(
97
+ "is_dragging",
98
+ `drop_zone_${this.dragZoneType}`,
99
+ `drop_zone_color_${this.dragZoneColor}`,
100
+ );
101
+ const { width, height } = this.draggedItem.getBoundingClientRect();
102
+ Object.assign(ghost.style, {
103
+ border: "none",
104
+ width: `${width}px`,
105
+ height: `${height}px`,
106
+ position: "absolute",
107
+ top: "-9999px",
108
+ left: "-9999px",
109
+ boxSizing: "border-box",
110
+ zIndex: "9999",
111
+ });
112
+ document.body.appendChild(ghost);
113
+ this.dragGhost = ghost;
114
+ event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
115
+ }
116
+ /* ---------------------------------------------------------------- */
83
117
  }
84
118
 
85
- setTimeout(() => {
86
- event.target.style.opacity = '0.5';
87
- }, 0);
119
+ requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
88
120
  }
89
121
 
122
+ /* ---------------- DRAG ENTER ---------------- */
90
123
  handleDragEnter(event) {
91
124
  if (!this.draggedItem || event.target === this.draggedItem) return;
92
-
93
- if (this.hasMultipleContainers) {
94
- this.handleMultiContainerDragEnter(event);
95
- } else {
96
- this.handleSingleContainerDragEnter(event);
97
- }
125
+ this.hasMultipleContainers
126
+ ? this.handleMultiContainerDragEnter(event)
127
+ : this.handleSingleContainerDragEnter(event);
98
128
  }
99
129
 
100
130
  handleSingleContainerDragEnter(event) {
101
- const targetItem = event.target.closest('.pb_draggable_item');
131
+ const targetItem = event.target.closest(".pb_draggable_item");
132
+ // If we're entering a container directly or there's no target item
102
133
  if (!targetItem) return;
103
134
 
104
135
  const container = targetItem.parentNode;
105
- const items = Array.from(container.children);
136
+ const items = Array.from(container.children);
137
+ const fromIdx = items.indexOf(this.draggedItem);
138
+ const toIdx = items.indexOf(targetItem);
106
139
 
107
- const draggedIndex = items.indexOf(this.draggedItem);
108
- const targetIndex = items.indexOf(targetItem);
109
-
110
- if (draggedIndex > targetIndex) {
140
+ if (fromIdx > toIdx) {
111
141
  container.insertBefore(this.draggedItem, targetItem);
112
142
  } else {
113
143
  container.insertBefore(this.draggedItem, targetItem.nextSibling);
@@ -116,146 +146,113 @@ export default class PbDraggable extends PbEnhancedElement {
116
146
 
117
147
  handleMultiContainerDragEnter(event) {
118
148
  const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
119
- const targetItem = event.target.closest('.pb_draggable_item');
120
-
149
+ const targetItem = event.target.closest(".pb_draggable_item");
121
150
  if (!targetContainer) return;
122
151
 
123
- // If we're entering a container directly or there's no target item
124
152
  if (!targetItem) {
125
- const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
126
- if (lastItem) {
127
- targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
128
- } else {
129
- targetContainer.appendChild(this.draggedItem);
130
- }
153
+ const last = targetContainer.querySelector(".pb_draggable_item:last-child");
154
+ last
155
+ ? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
156
+ : targetContainer.appendChild(this.draggedItem);
131
157
  return;
132
158
  }
133
159
 
134
- const container = targetItem.parentNode;
135
- const items = Array.from(container.children);
136
-
137
- const newItems = [...items].map(item => ({
138
- id: item.id,
139
- container: container.id
140
- }));
141
-
142
- this.setState({ items: newItems });
160
+ const items = Array.from(targetContainer.children);
161
+ this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
143
162
 
144
- const rect = targetItem.getBoundingClientRect();
145
- const middleY = rect.top + rect.height / 2;
163
+ const midY = targetItem.getBoundingClientRect().top +
164
+ targetItem.getBoundingClientRect().height / 2;
146
165
 
147
- if (event.clientY < middleY) {
148
- container.insertBefore(this.draggedItem, targetItem);
166
+ if (event.clientY < midY) {
167
+ targetContainer.insertBefore(this.draggedItem, targetItem);
149
168
  } else {
150
- container.insertBefore(this.draggedItem, targetItem.nextSibling);
169
+ targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
151
170
  }
152
171
  }
153
172
 
173
+ /* ---------------- DRAG OVER ---------------- */
154
174
  handleDragOver(event) {
155
175
  event.preventDefault();
156
176
  event.stopPropagation();
157
-
158
- if (this.hasMultipleContainers) {
159
- this.handleMultiContainerDragOver(event);
160
- } else {
161
- this.handleSingleContainerDragOver(event);
162
- }
177
+ this.hasMultipleContainers
178
+ ? this.handleMultiContainerDragOver(event)
179
+ : this.handleSingleContainerDragOver(event);
163
180
  }
164
181
 
165
182
  handleSingleContainerDragOver(event) {
166
183
  const container = event.target.closest(DRAGGABLE_CONTAINER);
167
- if (container) {
168
- container.classList.add("active_container");
169
- }
184
+ if (container) container.classList.add("active_container");
170
185
  }
171
186
 
172
187
  handleMultiContainerDragOver(event) {
173
- let container;
174
- if (event.target.matches(DRAGGABLE_CONTAINER)) {
175
- container = event.target;
176
- } else {
177
- container = event.target.closest(DRAGGABLE_CONTAINER);
178
- }
179
-
180
- if (container) {
181
- this.setState({ activeContainer: container.id });
182
- container.classList.add("active_container");
183
-
184
- // If dragging over empty container or below last item
185
- const lastItem = container.querySelector('.pb_draggable_item:last-child');
186
- if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
187
- if (this.draggedItem && this.draggedItem.parentNode !== container) {
188
- container.appendChild(this.draggedItem);
189
- }
188
+ const container = event.target.matches(DRAGGABLE_CONTAINER)
189
+ ? event.target
190
+ : event.target.closest(DRAGGABLE_CONTAINER);
191
+ if (!container) return;
192
+
193
+ this.setState({ activeContainer: container.id });
194
+ container.classList.add("active_container");
195
+
196
+ const last = container.querySelector(".pb_draggable_item:last-child");
197
+ if (!last || event.clientY > last.getBoundingClientRect().bottom) {
198
+ if (this.draggedItem && this.draggedItem.parentNode !== container) {
199
+ container.appendChild(this.draggedItem);
190
200
  }
191
201
  }
192
202
  }
193
203
 
204
+ /* ---------------- DROP ---------------- */
194
205
  handleDrop(event) {
195
206
  event.preventDefault();
196
207
  event.stopPropagation();
197
208
 
198
- let container;
199
- if (event.target.matches(DRAGGABLE_CONTAINER)) {
200
- container = event.target;
201
- } else {
202
- container = event.target.closest(DRAGGABLE_CONTAINER);
203
- }
204
-
209
+ const container = event.target.matches(DRAGGABLE_CONTAINER)
210
+ ? event.target
211
+ : event.target.closest(DRAGGABLE_CONTAINER);
205
212
  if (!container || !this.draggedItem) return;
206
213
 
207
214
  container.classList.remove("active_container");
208
- this.draggedItem.style.opacity = '1';
215
+ this.draggedItem.style.opacity = "1";
209
216
 
210
217
  // Handle empty containers
211
- if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
218
+ if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
212
219
  container.appendChild(this.draggedItem);
213
220
  }
214
221
 
215
222
  // Updated order of items as an array of item IDs
216
- const reorderedItems = Array.from(
217
- this.element.querySelectorAll('.pb_draggable_item')
218
- ).map(item => ({
219
- id: item.id,
220
- container: item.closest(DRAGGABLE_CONTAINER).id
221
- }));
222
-
223
- // Store reordered items in a data attribute on the container
224
- container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
225
-
226
- const customEvent = new CustomEvent('pb-draggable-reorder', {
227
- detail: {
228
- reorderedItems,
229
- containerId: container.id,
230
- }
231
- });
232
-
233
- this.element.dispatchEvent(customEvent);
223
+ const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
224
+ .map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
234
225
 
235
- this.setState({
236
- items: reorderedItems,
237
- isDragging: "",
238
- activeContainer: ""
239
- });
226
+ container.dataset.reorderedItems = JSON.stringify(reorderedItems);
227
+ this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
228
+ detail: { reorderedItems, containerId: container.id },
229
+ }));
240
230
 
241
- this.draggedItem = null;
231
+ this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
232
+ this.draggedItem = null;
242
233
  this.draggedItemId = null;
243
234
  }
244
235
 
236
+ /* ---------------- DRAG END ---------------- */
245
237
  handleDragEnd(event) {
246
- event.target.classList.remove("is_dragging");
247
- event.target.style.opacity = '1';
238
+ event.target.classList.remove(
239
+ "is_dragging",
240
+ `drop_zone_${this.dragZoneType}`,
241
+ `drop_zone_color_${this.dragZoneColor}`,
242
+ );
243
+ event.target.style.opacity = "1";
244
+
245
+ if (this.dragGhost) {
246
+ document.body.removeChild(this.dragGhost);
247
+ this.dragGhost = null;
248
+ }
248
249
 
249
- this.setState({
250
- isDragging: "",
251
- activeContainer: ""
252
- });
250
+ this.setState({ isDragging: "", activeContainer: "" });
253
251
 
254
- this.draggedItem = null;
255
- this.draggedItemId = null;
252
+ this.element.querySelectorAll(DRAGGABLE_CONTAINER)
253
+ .forEach(c => c.classList.remove("active_container"));
256
254
 
257
- this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
258
- container.classList.remove("active_container");
259
- });
255
+ this.draggedItem = null;
256
+ this.draggedItemId = null;
260
257
  }
261
258
  }
@@ -1,9 +1,12 @@
1
1
  import React, { useState } from 'react'
2
2
  import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const DropdownError = (props) => {
5
6
  const [selectedOption, setSelectedOption] = useState()
6
- const error = selectedOption?.value ? null : "Please make a valid selection"
7
+ const error = selectedOption?.value ? null : (<>
8
+ <Icon icon="warning" /> Please make a valid selection
9
+ </>)
7
10
  const options = [
8
11
  {
9
12
  label: "United States",
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
3
3
  import Button from '../../pb_button/_button'
4
4
  import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
5
5
  import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
6
+ import Icon from '../../pb_icon/_icon'
6
7
 
7
8
  const PhoneNumberInputValidation = (props) => {
8
9
  const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
29
30
  setShowFormErrors(formErrors.length > 0);
30
31
  }, [formErrors]);
31
32
 
33
+ const error = (
34
+ <>
35
+ <Icon icon="warning" /> Missing phone number.
36
+ </>
37
+ )
38
+
32
39
  return (
33
40
  <form
34
41
  action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
43
50
  />
44
51
  )}
45
52
  <PhoneNumberInput
46
- error="Missing phone number."
53
+ error={error}
47
54
  id="validation"
48
55
  initialCountry={countryCode}
49
56
  onChange={handleOnChange}
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
  import Body from '../../pb_body/_body'
3
3
  import Select from '../../pb_select/_select'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const SelectError = (props) => {
6
7
  const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
18
19
  },
19
20
  ]
20
21
 
22
+ const error = (<>
23
+ <Icon icon="warning" /> Please make a valid selection
24
+ </>)
25
+
21
26
  return (
22
27
  <div>
23
28
  <Select
24
- error="Please make a valid selection"
29
+ error={error}
25
30
  label="Favorite Food"
26
31
  name="food"
27
32
  options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
29
34
  {...props}
30
35
  />
31
36
  <Body
32
- error="Please make a valid selection"
37
+ error={error}
33
38
  status="negative"
34
39
  {...props}
35
40
  />
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
3
  import TextInput from '../_text_input'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const TextInputError = (props) => {
6
7
  const [email, setEmail] = useState('')
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
8
9
  const handleUpdateEmail = ({ target }) => {
9
10
  setEmail(target.value)
10
11
  }
12
+
13
+ const error = (
14
+ <>
15
+ <Icon icon="warning" /> Please enter a valid email address
16
+ </>
17
+ )
18
+
11
19
  return (
12
20
  <div>
13
21
  <TextInput
14
22
  addOn={{ icon: 'user', alignment: 'left', border: true }}
15
- error="Please enter a valid email address"
23
+ error={error}
16
24
  label="Email Address"
17
25
  onChange={handleUpdateEmail}
18
26
  placeholder="Enter email address"
@@ -1,15 +1,21 @@
1
1
  import React, {useState} from 'react'
2
2
  import Textarea from '../../pb_textarea/_textarea'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const TextareaError = (props) => {
5
6
  const [value, setValue] = useState('default value text')
6
7
  const handleChange = (event) => {
7
8
  setValue(event.target.value)
8
9
  }
10
+ const error = (
11
+ <>
12
+ <Icon icon="warning" /> This field has an error!
13
+ </>
14
+ )
9
15
  return (
10
16
  <div>
11
17
  <Textarea
12
- error="This field has an error!"
18
+ error={error}
13
19
  label="Label"
14
20
  name="comment"
15
21
  onChange={(e)=> handleChange(e)}
@@ -1,6 +1,7 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
 
3
3
  import Typeahead from '../_typeahead'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const options = [
6
7
  { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
10
11
  ]
11
12
 
12
13
  const TypeaheadErrorState = (props) => {
13
- const [errorState, setErrorState] = useState("Please make a valid selection");
14
+ const error = (<>
15
+ <Icon icon="warning" /> Please make a valid selection
16
+ </>)
17
+ const [errorState, setErrorState] = useState(error);
14
18
  const [searchValue, setSearchValue] = useState(null);
15
19
 
16
20
  const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
19
23
  if(searchValue) {
20
24
  setErrorState("")
21
25
  } else {
22
- setErrorState("Please make a valid selection")
26
+ setErrorState(error)
23
27
  }
24
28
  }, [searchValue])
25
29
 
@@ -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,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-96_ZmvAo.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{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...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 targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();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,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};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,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-yWHJ_8mm.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{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...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 targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();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,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
2
2
  /*!
3
3
  Copyright (c) 2018 Jed Watson.
4
4
  Licensed under the MIT License (MIT), see