playbook_ui 14.9.0.pre.alpha.PLAY16264818 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +17 -61
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +5 -0
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +10 -0
  7. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
  8. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
  9. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +2 -2
  10. data/app/pb_kits/playbook/pb_select/_select.tsx +14 -19
  11. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -1
  12. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
  13. data/dist/chunks/{_typeahead-B8fkIeXA.js → _typeahead-DU1QgR52.js} +1 -1
  14. data/dist/chunks/{_weekday_stacked-DxlPBh55.js → _weekday_stacked-BLOmRNnB.js} +3 -3
  15. data/dist/chunks/{lib-SyD3buPZ.js → lib-Ce7MLbJk.js} +1 -1
  16. data/dist/chunks/{pb_form_validation-Dt8UJgrJ.js → pb_form_validation-kPWA1Z2g.js} +1 -1
  17. data/dist/chunks/vendor.js +1 -1
  18. data/dist/playbook-doc.js +1 -1
  19. data/dist/playbook-rails-react-bindings.js +1 -1
  20. data/dist/playbook-rails.js +1 -1
  21. data/lib/playbook/version.rb +1 -1
  22. metadata +6 -13
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +0 -50
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md +0 -1
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +0 -57
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +0 -5
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json +0 -5600
  28. data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx +0 -108
  29. data/app/pb_kits/playbook/utilities/hookFormProps.ts +0 -16
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fd75b9e4b0f7ce117dbd06fd2a726c2c365b6e5bf64cb203f030ba83659ae448
4
- data.tar.gz: 4973b4425fac4133d09a37743f38638af91d63ac3a720555846ca286b0358635
3
+ metadata.gz: ed2801ec0227abe6135982abb6b527499bfd93c6bdb9f60abeb128b177e7b86f
4
+ data.tar.gz: b48246eb5583601ec41ef7ae8fcdb8f3ca8f50b481f634de6b596f5b82ff1692
5
5
  SHA512:
6
- metadata.gz: cdd757f0e267dede1c878c35a04a53cc26fb39568a802ae979477d938c6fc3e23f4e48150ec4d549717febb1daf69ae8d60285582c1ef58cd539b819ac47ab08
7
- data.tar.gz: 9a2776ad808a0e04c2f152e64975d48b02911c3edd4cda0be6d317571fd92553d29cd6e8159444d392d2a48815e4ee1318b4eaabaf5c17bdba9c9c89ff22538b
6
+ metadata.gz: 21ae6b48959d1c92fe17977b28386e1d63db657cfed8b4494ed0dccecce97011918631f336ea06dfc008dca129c41d889b31e6cb0bdd6cf74ffc55285ea4710f
7
+ data.tar.gz: 2944e11aca37b9ff421f1404eec2e91a552bb59a11ff3058bd9ab4e5c1cfdc3d6a5c5c2a74f642591c6c6af5a3a03c247698ef47e05e7fe315b1fc37379ebe07
@@ -7,7 +7,6 @@ import {
7
7
  createColumnHelper,
8
8
  getCoreRowModel,
9
9
  getExpandedRowModel,
10
- getPaginationRowModel,
11
10
  getSortedRowModel,
12
11
  Row,
13
12
  useReactTable,
@@ -26,7 +25,6 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
26
25
  import { CustomCell } from "./Components/CustomCell"
27
26
  import { TableHeader } from "./SubKits/TableHeader"
28
27
  import { TableBody } from "./SubKits/TableBody"
29
- import Pagination from "../pb_pagination/_pagination"
30
28
 
31
29
  type AdvancedTableProps = {
32
30
  aria?: { [key: string]: string }
@@ -44,8 +42,6 @@ type AdvancedTableProps = {
44
42
  loading?: boolean | string
45
43
  onRowToggleClick?: (arg: Row<GenericObject>) => void
46
44
  onToggleExpansionClick?: (arg: Row<GenericObject>) => void
47
- pagination?: boolean,
48
- paginationProps?: GenericObject
49
45
  responsive?: "scroll" | "none",
50
46
  sortControl?: GenericObject
51
47
  tableData: GenericObject[]
@@ -71,8 +67,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
71
67
  loading,
72
68
  onRowToggleClick,
73
69
  onToggleExpansionClick,
74
- pagination = false,
75
- paginationProps,
76
70
  responsive = "scroll",
77
71
  sortControl,
78
72
  tableData,
@@ -183,17 +177,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
183
177
  }
184
178
  }
185
179
 
186
- const paginationInitializer = pagination ? {
187
- getPaginationRowModel: getPaginationRowModel(),
188
- paginateExpandedRows: false,
189
- initialState: {
190
- pagination: {
191
- pageIndex: paginationProps?.pageIndex ?? 0,
192
- pageSize: paginationProps?.pageSize ?? 20,
193
- },
194
- },
195
- } : {}
196
-
197
180
  //initialize table
198
181
  const table = useReactTable({
199
182
  data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
@@ -206,7 +189,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
206
189
  enableSortingRemoval: false,
207
190
  sortDescFirst: true,
208
191
  ...expandAndSortState(),
209
- ... paginationInitializer,
210
192
  ...tableOptions,
211
193
  })
212
194
 
@@ -245,10 +227,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
245
227
  className
246
228
  )
247
229
 
248
- const onPageChange = (page: number) => {
249
- table.setPageIndex(page - 1)
250
- }
251
-
252
230
  return (
253
231
  <div {...ariaProps}
254
232
  {...dataProps}
@@ -272,45 +250,23 @@ const AdvancedTable = (props: AdvancedTableProps) => {
272
250
  toggleExpansionIcon,
273
251
  }}
274
252
  >
275
- <>
276
- {pagination &&
277
- <Pagination
278
- current={table.getState().pagination.pageIndex + 1}
279
- key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
280
- marginBottom="xs"
281
- onChange={onPageChange}
282
- range={paginationProps?.range ? paginationProps?.range : 5}
283
- total={table.getPageCount()}
284
- />
285
- }
286
- <Table
287
- className={`${loading ? "content-loading" : ""}`}
288
- dark={dark}
289
- dataTable
290
- numberSpacing="tabular"
291
- responsive="none"
292
- {...tableProps}
293
- >
294
- {children ? (
295
- children
296
- ) : (
297
- <>
298
- <TableHeader />
299
- <TableBody />
300
- </>
301
- )}
302
- </Table>
303
- {pagination &&
304
- <Pagination
305
- current={table.getState().pagination.pageIndex + 1}
306
- key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
307
- marginTop="xs"
308
- onChange={onPageChange}
309
- range={paginationProps?.range ? paginationProps?.range : 5}
310
- total={table.getPageCount()}
311
- />
312
- }
313
- </>
253
+ <Table
254
+ className={`${loading ? "content-loading" : ""}`}
255
+ dark={dark}
256
+ dataTable
257
+ numberSpacing="tabular"
258
+ responsive="none"
259
+ {...tableProps}
260
+ >
261
+ {children ? (
262
+ children
263
+ ) : (
264
+ <>
265
+ <TableHeader />
266
+ <TableBody />
267
+ </>
268
+ )}
269
+ </Table>
314
270
  </AdvancedTableContext.Provider>
315
271
  </div>
316
272
  )
@@ -18,5 +18,3 @@ examples:
18
18
  - advanced_table_inline_row_loading: Inline Row Loading
19
19
  - advanced_table_responsive: Responsive Tables
20
20
  - advanced_table_custom_cell: Custom Components for Cells
21
- - advanced_table_pagination: Pagination
22
- - advanced_table_pagination_with_props: Pagination Props
@@ -10,5 +10,3 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
10
10
  export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
11
11
  export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
12
12
  export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
13
- export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
14
- export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
@@ -40,6 +40,8 @@ module Playbook
40
40
  default: {}
41
41
  prop :input_data, type: Playbook::Props::HashProp,
42
42
  default: {}
43
+ prop :input_options, type: Playbook::Props::HashProp,
44
+ default: {}
43
45
  prop :max_date, type: Playbook::Props::String
44
46
  prop :min_date, type: Playbook::Props::String
45
47
  prop :name, type: Playbook::Props::String
@@ -55,6 +57,8 @@ module Playbook
55
57
  prop :position, type: Playbook::Props::String,
56
58
  default: "auto"
57
59
  prop :position_element, type: Playbook::Props::String
60
+ prop :reset_to_default, type: Playbook::Props::Boolean,
61
+ default: false
58
62
  prop :scroll_container, type: Playbook::Props::String
59
63
  prop :selection_type, type: Playbook::Props::Enum,
60
64
  values: %w[week month quickpick none],
@@ -98,6 +102,7 @@ module Playbook
98
102
  plugins: plugins,
99
103
  position: position,
100
104
  positionElement: position_element,
105
+ resetToDefault: reset_to_default,
101
106
  required: required,
102
107
  selectionType: selection_type,
103
108
  showTimezone: show_timezone,
@@ -24,9 +24,11 @@ type DatePickerConfig = {
24
24
  required: boolean,
25
25
  hideIcon?: boolean;
26
26
  inLine?: boolean,
27
+ inputValue: string,
27
28
  onChange: (dateStr: string, selectedDates: Date[]) => void,
28
29
  selectionType?: "month" | "week" | "quickpick" | "",
29
30
  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
31
+ resetToDefault?: boolean,
30
32
  showTimezone?: boolean,
31
33
  staticPosition: boolean,
32
34
  thisRangesEndToday?: boolean,
@@ -50,6 +52,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
50
52
  disableWeekdays,
51
53
  enableTime,
52
54
  format,
55
+ inputValue,
53
56
  maxDate,
54
57
  minDate,
55
58
  mode,
@@ -59,6 +62,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
59
62
  plugins,
60
63
  position = "auto",
61
64
  positionElement,
65
+ resetToDefault,
62
66
  required,
63
67
  selectionType,
64
68
  showTimezone,
@@ -242,6 +246,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
242
246
  picker.changeYear(Number(e.target.value))
243
247
  })
244
248
 
249
+ // add data atrribute for reset to default
250
+ const element = document.querySelector(`#${pickerId}`);
251
+ if (resetToDefault && defaultDate && element) {
252
+ element.setAttribute("data-pb-date-picker", defaultDate?.toString());
253
+ }
254
+
245
255
  // Reverse month and year dropdown reset on form.reset()
246
256
  if (picker.input.form) {
247
257
  picker.input.form.addEventListener('reset', () => {
@@ -2,6 +2,7 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_picker_default: Default
5
+ - date_picker_reset_to_default: Reset to Default
5
6
  - date_picker_hide_icon: Hide Input Icon
6
7
  - date_picker_default_date: Default Date
7
8
  - date_picker_allow_input: Allow Input
@@ -45,11 +45,12 @@
45
45
  class: "checkbox-class"
46
46
  %>
47
47
  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
48
+ <%= form.date_picker :example_date_picker_2, props: { label: true, reset_to_default: true, default_date: "06/09/1994" } %>
48
49
  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
49
50
 
50
51
  <%= form.actions do |action| %>
51
52
  <%= action.submit %>
52
- <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
53
+ <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary", onclick: "resetDates()" } %>
53
54
  <% end %>
54
55
  <% end %>
55
56
 
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import classnames from 'classnames'
3
- import { GlobalProps, globalProps } from '../utilities/globalProps'
3
+ import { globalProps } from '../utilities/globalProps'
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import Icon from '../pb_icon/_icon';
6
6
 
@@ -14,7 +14,7 @@ type PaginationProps = {
14
14
  onChange?: (pageNumber: number) => void;
15
15
  range?: number;
16
16
  total?: number;
17
- } & GlobalProps;
17
+ };
18
18
 
19
19
  const Pagination = ( props: PaginationProps) => {
20
20
  const {
@@ -1,10 +1,8 @@
1
1
  import React, { forwardRef } from 'react'
2
2
  import classnames from 'classnames'
3
- import { FieldValues } from 'react-hook-form'
4
3
 
5
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
6
5
  import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
7
- import { HookFormProps, withHookForm } from '../utilities/hookFormProps'
8
6
  import type { InputCallback } from '../types'
9
7
  import { getAllIcons } from "../utilities/icons/allicons"
10
8
 
@@ -18,7 +16,7 @@ type SelectOption = {
18
16
  disabled?: boolean,
19
17
  }
20
18
 
21
- type SelectProps<T extends FieldValues = FieldValues> = {
19
+ type SelectProps = {
22
20
  aria?: { [key: string]: string },
23
21
  blankSelection?: string,
24
22
  children?: Node,
@@ -32,17 +30,16 @@ type SelectProps<T extends FieldValues = FieldValues> = {
32
30
  includeBlank?: string,
33
31
  inline?: boolean,
34
32
  label?: string,
35
- margin?: string,
33
+ margin: string,
36
34
  marginBottom: string,
37
- marginTop: string,
38
35
  multiple?: boolean,
39
36
  name?: string,
40
- onChange?: InputCallback<HTMLSelectElement>,
37
+ onChange: InputCallback<HTMLSelectElement>,
41
38
  options: SelectOption[],
42
39
  required?: boolean,
43
40
  showArrow?: boolean,
44
41
  value?: string,
45
- } & GlobalProps & Partial<HookFormProps<T>>
42
+ } & GlobalProps
46
43
 
47
44
  const createOptions = (options: SelectOption[]) => options.map((option, index) => (
48
45
  <option
@@ -54,7 +51,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
54
51
  </option>
55
52
  ))
56
53
 
57
- const Select = <T extends FieldValues = FieldValues>({
54
+ const Select = ({
58
55
  aria = {},
59
56
  blankSelection,
60
57
  children,
@@ -68,20 +65,17 @@ const Select = <T extends FieldValues = FieldValues>({
68
65
  inline = false,
69
66
  multiple = false,
70
67
  name,
71
- onChange,
68
+ onChange = () => undefined,
72
69
  options = [],
73
- register,
74
70
  required = false,
75
- rules,
76
71
  showArrow = false,
77
72
  value,
78
73
  ...props
79
- }: SelectProps<T>, ref: React.LegacyRef<HTMLSelectElement>) => {
74
+ }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
80
75
  const ariaProps = buildAriaProps(aria)
81
76
  const dataProps = buildDataProps(data)
82
77
  const htmlProps = buildHtmlProps(htmlOptions)
83
78
  const optionsList = createOptions(options)
84
- const hookFormProps = name ? withHookForm({ register, name, rules }) : {}
85
79
 
86
80
  const inlineClass = inline ? 'inline' : null
87
81
  const compactClass = compact ? 'compact' : null
@@ -97,22 +91,21 @@ const Select = <T extends FieldValues = FieldValues>({
97
91
  compactClass
98
92
  );
99
93
 
100
- const icons = getAllIcons()
101
- const angleDown = icons?.angleDown?.icon as { [key: string]: SVGElement }
94
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
102
95
 
103
96
  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
104
97
  const selectBody =(() =>{
105
98
  if (children) return children
106
99
  return (
107
100
  <select
101
+ {...htmlOptions}
108
102
  {...domSafeProps(props)}
109
- {...hookFormProps}
110
103
  disabled={disabled}
111
104
  id={name}
112
105
  multiple={multiple}
113
106
  name={name}
114
- onChange={onChange || hookFormProps.onChange}
115
- ref={ref || hookFormProps.ref}
107
+ onChange={onChange}
108
+ ref={ref}
116
109
  required={required}
117
110
  value={value}
118
111
  >
@@ -142,12 +135,14 @@ const Select = <T extends FieldValues = FieldValues>({
142
135
  htmlFor={name}
143
136
  >
144
137
  {selectBody}
145
- { multiple !== true && angleDown &&
138
+ { multiple !== true ?
146
139
  <Icon
147
140
  className="pb_select_kit_caret svg-inline--fa"
148
141
  customIcon={angleDown}
149
142
  fixedWidth
150
143
  />
144
+ :
145
+ null
151
146
  }
152
147
  {error &&
153
148
  <Body
@@ -30,7 +30,6 @@ examples:
30
30
  - select_inline_show_arrow: Select Inline (Always Show Arrow)
31
31
  - select_inline_compact: Select Inline Compact
32
32
  - select_multiple: Select Multiple
33
- - select_form: Form
34
33
 
35
34
  swift:
36
35
  - select_default_swift: Default
@@ -10,4 +10,3 @@ export { default as SelectInline } from './_select_inline.jsx'
10
10
  export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
11
11
  export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
12
12
  export { default as SelectMultiple } from './_select_multiple.jsx'
13
- export { default as SelectForm } from './_select_form.jsx'
@@ -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,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-SyD3buPZ.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,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-Ce7MLbJk.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