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

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 (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