@measured/puck 0.9.1-canary.efa4f45 → 0.10.0-canary.2a12826

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.
package/dist/index.css CHANGED
@@ -382,6 +382,222 @@
382
382
  cursor: pointer;
383
383
  }
384
384
 
385
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
386
+ ._Input_nkpu6_1 {
387
+ color: var(--puck-color-grey-3);
388
+ padding: 16px;
389
+ padding-bottom: 12px;
390
+ display: block;
391
+ font-family: var(--puck-font-stack);
392
+ }
393
+ ._Input_nkpu6_1 ._Input_nkpu6_1 {
394
+ padding: 0px;
395
+ }
396
+ ._Input_nkpu6_1 * {
397
+ box-sizing: border-box;
398
+ }
399
+ ._Input_nkpu6_1 + ._Input_nkpu6_1 {
400
+ border-top: 1px solid var(--puck-color-grey-8);
401
+ margin-top: 8px;
402
+ }
403
+ ._Input_nkpu6_1 ._Input_nkpu6_1 + ._Input_nkpu6_1 {
404
+ border-top: 0px;
405
+ margin-top: 12px;
406
+ }
407
+ ._Input-label_nkpu6_27 {
408
+ display: flex;
409
+ padding-bottom: 12px;
410
+ font-size: var(--puck-font-size-xxs);
411
+ font-weight: 600;
412
+ }
413
+ ._Input-labelIcon_nkpu6_34 {
414
+ color: var(--puck-color-grey-6);
415
+ margin-right: 4px;
416
+ }
417
+ ._Input-input_nkpu6_39 {
418
+ border-width: 1px;
419
+ border-style: solid;
420
+ border-color: var(--puck-color-grey-8);
421
+ border-radius: 4px;
422
+ font-family: inherit;
423
+ padding: 12px 16px;
424
+ width: 100%;
425
+ }
426
+ ._Input_nkpu6_1 select._Input-input_nkpu6_39 {
427
+ appearance: none;
428
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
429
+ background-size: 12px;
430
+ background-position: calc(100% - 12px) calc(50% + 3px);
431
+ background-repeat: no-repeat;
432
+ background-color: white;
433
+ }
434
+ ._Input--readOnly_nkpu6_60 ._Input-input_nkpu6_39 {
435
+ background-color: var(--puck-color-grey-10);
436
+ border-color: var(--puck-color-grey-8);
437
+ }
438
+ ._Input-input_nkpu6_39:hover {
439
+ border-color: var(--puck-color-neutral-3);
440
+ }
441
+ ._Input-radioGroupItems_nkpu6_69 {
442
+ display: flex;
443
+ border: 1px solid var(--puck-color-grey-7);
444
+ border-radius: 4px;
445
+ flex-wrap: wrap;
446
+ overflow: hidden;
447
+ }
448
+ ._Input-radio_nkpu6_69 {
449
+ border-right: 1px solid var(--puck-color-grey-7);
450
+ flex-grow: 1;
451
+ }
452
+ ._Input-radio_nkpu6_69:last-of-type {
453
+ border-right: none;
454
+ }
455
+ ._Input-radioInner_nkpu6_86 {
456
+ color: var(--puck-color-grey-4);
457
+ font-size: var(--puck-font-size-xxxs);
458
+ padding: 8px 12px;
459
+ text-align: center;
460
+ }
461
+ ._Input-radioInner_nkpu6_86:hover {
462
+ background-color: var(--puck-color-azure-9);
463
+ cursor: pointer;
464
+ }
465
+ ._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98:checked ~ ._Input-radioInner_nkpu6_86 {
466
+ background-color: var(--puck-color-azure-9);
467
+ color: var(--puck-color-grey-2);
468
+ font-weight: 500;
469
+ }
470
+ ._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98 {
471
+ display: none;
472
+ }
473
+ ._Input_nkpu6_1 textarea._Input-input_nkpu6_39 {
474
+ margin-bottom: -4px;
475
+ }
476
+
477
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
478
+ ._ArrayField_zp334_5 {
479
+ display: flex;
480
+ flex-direction: column;
481
+ background-color: var(--puck-color-grey-8);
482
+ border: 1px solid var(--puck-color-grey-8);
483
+ border-radius: 4px;
484
+ }
485
+ ._ArrayField--isDraggingFrom_zp334_13 {
486
+ background-color: var(--puck-color-azure-9);
487
+ }
488
+ ._ArrayField-addButton_zp334_17 {
489
+ background-color: white;
490
+ border: none;
491
+ border-radius: 4px;
492
+ display: flex;
493
+ color: var(--puck-color-azure-4);
494
+ justify-content: center;
495
+ cursor: pointer;
496
+ width: 100%;
497
+ margin: 0;
498
+ padding: 16px;
499
+ text-align: left;
500
+ }
501
+ ._ArrayField--hasItems_zp334_31 > ._ArrayField-addButton_zp334_17 {
502
+ border-top-left-radius: 0;
503
+ border-top-right-radius: 0;
504
+ }
505
+ ._ArrayField_zp334_5:not(._ArrayField--isDraggingFrom_zp334_13) > ._ArrayField-addButton_zp334_17:hover {
506
+ background: var(--puck-color-azure-9);
507
+ color: var(--puck-color-azure-4);
508
+ }
509
+ ._ArrayFieldItem_zp334_45 {
510
+ background: white;
511
+ border-top-left-radius: 4px;
512
+ border-top-right-radius: 4px;
513
+ display: block;
514
+ margin-bottom: 1px;
515
+ }
516
+ ._ArrayField--isDraggingFrom_zp334_13 > ._ArrayFieldItem_zp334_45:not(._ArrayFieldItem--isDragging_zp334_53) {
517
+ border-bottom: 1px solid var(--puck-color-grey-8);
518
+ margin-bottom: 0;
519
+ }
520
+ ._ArrayFieldItem--isExpanded_zp334_58 {
521
+ border-bottom: 0;
522
+ outline: 1px solid var(--puck-color-azure-6);
523
+ }
524
+ ._ArrayFieldItem--isDragging_zp334_53 {
525
+ box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
526
+ }
527
+ ._ArrayFieldItem_zp334_45 + ._ArrayFieldItem_zp334_45 {
528
+ border-top-left-radius: 0;
529
+ border-top-right-radius: 0;
530
+ }
531
+ ._ArrayFieldItem-summary_zp334_72 {
532
+ color: var(--puck-color-grey-3);
533
+ display: flex;
534
+ align-items: center;
535
+ justify-content: space-between;
536
+ font-size: var(--puck-font-size-xxs);
537
+ list-style: none;
538
+ padding: 12px 16px;
539
+ position: relative;
540
+ overflow: hidden;
541
+ }
542
+ ._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
543
+ font-weight: 600;
544
+ }
545
+ ._ArrayFieldItem_zp334_45:first-of-type > ._ArrayFieldItem-summary_zp334_72 {
546
+ border-top-left-radius: 4px;
547
+ border-top-right-radius: 4px;
548
+ }
549
+ ._ArrayFieldItem-summary_zp334_72:hover,
550
+ ._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
551
+ background: var(--puck-color-azure-9);
552
+ cursor: pointer;
553
+ color: var(--puck-color-azure-4);
554
+ }
555
+ ._ArrayFieldItem-summary_zp334_72::-webkit-details-marker {
556
+ display: none;
557
+ }
558
+ ._ArrayFieldItem-body_zp334_104 {
559
+ display: none;
560
+ }
561
+ ._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-body_zp334_104 {
562
+ display: block;
563
+ }
564
+ ._ArrayFieldItem-fieldset_zp334_112 {
565
+ border: none;
566
+ border-top: 1px solid var(--puck-color-grey-8);
567
+ margin: 0;
568
+ padding: 16px;
569
+ }
570
+ ._ArrayFieldItem-rhs_zp334_119 {
571
+ display: flex;
572
+ gap: 8px;
573
+ align-items: center;
574
+ }
575
+ ._ArrayFieldItem-actions_zp334_125 {
576
+ display: flex;
577
+ gap: 8px;
578
+ opacity: 0;
579
+ }
580
+ ._ArrayFieldItem-summary_zp334_72:hover > ._ArrayFieldItem-rhs_zp334_119 > ._ArrayFieldItem-actions_zp334_125 {
581
+ opacity: 1;
582
+ }
583
+ ._ArrayFieldItem-action_zp334_125:hover {
584
+ background: var(--puck-color-grey-9);
585
+ border-radius: 4px;
586
+ color: var(--puck-color-blue);
587
+ cursor: pointer;
588
+ }
589
+
590
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
591
+ ._DragIcon_o29on_1 {
592
+ color: var(--puck-color-grey-4);
593
+ padding: 4px;
594
+ border-radius: 4px;
595
+ }
596
+ ._DragIcon_o29on_1:hover {
597
+ cursor: grab;
598
+ background: var(--puck-color-grey-9);
599
+ }
600
+
385
601
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
386
602
  ._ExternalInput_l4bks_1 {
387
603
  font-family: var(--puck-font-stack);
@@ -506,196 +722,33 @@
506
722
  padding-left: 20px;
507
723
  }
508
724
 
509
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
510
- ._Input_izwhv_1 {
511
- color: var(--puck-color-grey-3);
512
- padding: 16px;
513
- padding-bottom: 12px;
514
- display: block;
515
- font-family: var(--puck-font-stack);
516
- }
517
- ._Input_izwhv_1 ._Input_izwhv_1 {
518
- padding: 0px;
519
- }
520
- ._Input_izwhv_1 * {
521
- box-sizing: border-box;
522
- }
523
- ._Input_izwhv_1 + ._Input_izwhv_1 {
524
- border-top: 1px solid var(--puck-color-grey-8);
525
- margin-top: 8px;
526
- }
527
- ._Input_izwhv_1 ._Input_izwhv_1 + ._Input_izwhv_1 {
528
- border-top: 0px;
529
- margin-top: 12px;
530
- }
531
- ._Input-label_izwhv_27 {
532
- display: flex;
533
- padding-bottom: 12px;
534
- font-size: var(--puck-font-size-xxs);
535
- font-weight: 600;
536
- }
537
- ._Input-labelIcon_izwhv_34 {
538
- color: var(--puck-color-grey-6);
539
- margin-right: 4px;
540
- }
541
- ._Input-input_izwhv_39 {
542
- border-width: 1px;
543
- border-style: solid;
544
- border-color: var(--puck-color-grey-8);
545
- border-radius: 4px;
546
- font-family: inherit;
547
- padding: 12px 16px;
548
- width: 100%;
549
- }
550
- ._Input_izwhv_1 select {
551
- appearance: none;
552
- background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
553
- background-size: 12px;
554
- background-position: calc(100% - 12px) calc(50% + 3px);
555
- background-repeat: no-repeat;
556
- background-color: white;
557
- }
558
- ._Input--readOnly_izwhv_60 ._Input-input_izwhv_39 {
559
- background-color: var(--puck-color-grey-10);
560
- border-color: var(--puck-color-grey-8);
561
- }
562
- ._Input-input_izwhv_39:hover {
563
- border-color: var(--puck-color-neutral-3);
564
- }
565
- ._Input-arrayItem_izwhv_69 {
566
- background: white;
567
- border: 1px solid var(--puck-color-grey-8);
568
- border-radius: 4px;
569
- }
570
- ._Input-arrayItem_izwhv_69 > summary {
571
- color: var(--puck-color-grey-3);
572
- display: flex;
573
- align-items: center;
574
- justify-content: space-between;
575
- font-size: var(--puck-font-size-xxs);
576
- list-style: none;
577
- padding: 12px 16px;
578
- position: relative;
579
- }
580
- ._Input-arrayItem_izwhv_69 > summary:hover {
581
- cursor: pointer;
582
- color: var(--puck-color-blue);
583
- }
584
- ._Input-arrayItem_izwhv_69 > summary::-webkit-details-marker {
585
- display: none;
586
- }
587
- ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 {
588
- background-color: var(--puck-color-grey-11);
589
- border: none;
590
- border-top: 1px solid var(--puck-color-grey-8);
591
- margin: 0;
592
- padding: 16px;
593
- }
594
- ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 + ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 {
595
- margin-top: 16px;
596
- }
597
- ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input-label_izwhv_27 {
598
- padding-bottom: 4px;
599
- }
600
- ._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116 {
601
- border-radius: 4px;
602
- opacity: 0;
603
- }
604
- ._Input-arrayItem_izwhv_69 summary:hover ._Input-arrayItemAction_izwhv_116 {
605
- opacity: 1;
606
- }
607
- ._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116:hover {
608
- background: var(--puck-color-grey-9);
609
- color: var(--puck-color-blue);
610
- cursor: pointer;
611
- }
612
- ._Input-arrayItem_izwhv_69 + ._Input-arrayItem_izwhv_69 {
613
- margin-top: 12px;
614
- }
615
- ._Input-addButton_izwhv_135 {
616
- background-color: white;
617
- border: none;
618
- border-radius: 4px;
619
- color: var(--puck-color-blue);
620
- cursor: pointer;
621
- width: 100%;
622
- margin: 0;
623
- margin-top: 12px;
624
- padding: 12px 16px;
625
- text-align: left;
626
- }
627
- ._Input-addButton_izwhv_135:hover {
628
- background: var(--puck-color-grey-10);
629
- }
630
- ._Input-array_izwhv_69 {
631
- overflow: hidden;
632
- }
633
- ._Input-radioGroupItems_izwhv_156 {
634
- display: flex;
635
- border: 1px solid var(--puck-color-grey-7);
636
- border-radius: 4px;
637
- flex-wrap: wrap;
638
- overflow: hidden;
639
- }
640
- ._Input-radio_izwhv_156 {
641
- border-right: 1px solid var(--puck-color-grey-7);
642
- flex-grow: 1;
643
- }
644
- ._Input-radio_izwhv_156:last-of-type {
645
- border-right: none;
646
- }
647
- ._Input-radioInner_izwhv_173 {
648
- color: var(--puck-color-grey-4);
649
- font-size: var(--puck-font-size-xxxs);
650
- padding: 8px 12px;
651
- text-align: center;
652
- }
653
- ._Input-radioInner_izwhv_173:hover {
654
- background-color: var(--puck-color-azure-9);
655
- cursor: pointer;
656
- }
657
- ._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185:checked ~ ._Input-radioInner_izwhv_173 {
658
- background-color: var(--puck-color-azure-9);
659
- color: var(--puck-color-grey-2);
660
- font-weight: 500;
661
- }
662
- ._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185 {
663
- display: none;
664
- }
665
- ._Input_izwhv_1 textarea._Input-input_izwhv_39 {
666
- margin-bottom: -4px;
667
- }
668
-
669
725
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
670
- ._ComponentList_1ybn0_1 {
671
- display: grid;
726
+ ._ComponentList_bvy0z_1 {
672
727
  font-family: var(--puck-font-stack);
673
- grid-template-columns: 1fr;
674
728
  max-width: 100%;
675
- grid-gap: 12px;
676
729
  }
677
- ._ComponentList-item_1ybn0_9,
678
- ._ComponentList-itemShadow_1ybn0_10 {
730
+ ._ComponentList-item_bvy0z_6 {
679
731
  background: white;
680
732
  padding: 12px;
681
733
  display: flex;
682
734
  border: 1px var(--puck-color-grey-8) solid;
683
- border-radius: 8px;
735
+ border-radius: 4px;
684
736
  font-size: var(--puck-font-size-xxs);
685
737
  justify-content: space-between;
686
738
  align-items: center;
687
739
  gap: 12px;
688
740
  cursor: grab;
741
+ margin-bottom: 12px;
689
742
  }
690
- ._ComponentList-item_1ybn0_9:last-of-type,
691
- ._ComponentList-itemShadow_1ybn0_10:last-of-type {
743
+ ._ComponentList-item_bvy0z_6:last-of-type {
692
744
  margin-bottom: 0px;
693
745
  }
694
- ._ComponentList-itemIcon_1ybn0_28 {
746
+ ._ComponentList-itemIcon_bvy0z_24 {
695
747
  color: var(--puck-color-grey-4);
696
748
  }
697
- ._ComponentList-item_1ybn0_9:hover {
749
+ ._ComponentList_bvy0z_1:not(._ComponentList--isDraggingFrom_bvy0z_28) ._ComponentList-item_bvy0z_6:hover {
698
750
  background-color: var(--puck-color-azure-9);
751
+ color: var(--puck-color-azure-4);
699
752
  }
700
753
 
701
754
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
package/dist/index.d.ts CHANGED
@@ -3,6 +3,11 @@ import { ReactElement, ReactNode, CSSProperties } from 'react';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import { DragStart, DragUpdate } from 'react-beautiful-dnd';
5
5
 
6
+ type ItemSelector = {
7
+ index: number;
8
+ zone?: string;
9
+ };
10
+
6
11
  type Adaptor<AdaptorParams = {}> = {
7
12
  name: string;
8
13
  fetchList: (adaptorParams?: AdaptorParams) => Promise<Record<string, any>[] | null>;
@@ -98,6 +103,23 @@ type Data<Props extends {
98
103
  content: Content<Props>;
99
104
  zones?: Record<string, Content<Props>>;
100
105
  };
106
+ type ItemWithId = {
107
+ _arrayId: string;
108
+ data: any;
109
+ };
110
+ type ArrayState = {
111
+ items: ItemWithId[];
112
+ openId: string;
113
+ };
114
+ type AppState = {
115
+ leftSideBarVisible: boolean;
116
+ itemSelector?: ItemSelector | null;
117
+ arrayState: Record<string, ArrayState | undefined>;
118
+ };
119
+ type AppData = {
120
+ data: Data;
121
+ state: AppState;
122
+ };
101
123
 
102
124
  declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
103
125
  children: ReactNode;
@@ -113,11 +135,6 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
113
135
  size?: "medium" | "large" | undefined;
114
136
  }) => react_jsx_runtime.JSX.Element;
115
137
 
116
- type ItemSelector = {
117
- index: number;
118
- zone?: string;
119
- };
120
-
121
138
  type InsertAction = {
122
139
  type: "insert";
123
140
  componentType: string;
@@ -153,10 +170,18 @@ type RemoveAction = {
153
170
  index: number;
154
171
  zone: string;
155
172
  };
173
+ type SetStateAction = {
174
+ type: "setState";
175
+ state: Partial<AppState>;
176
+ };
156
177
  type SetDataAction = {
157
- type: "set";
178
+ type: "setData";
158
179
  data: Partial<Data>;
159
180
  };
181
+ type SetAction = {
182
+ type: "set";
183
+ appData: Partial<AppData>;
184
+ };
160
185
  type RegisterZoneAction = {
161
186
  type: "registerZone";
162
187
  zone: string;
@@ -165,7 +190,9 @@ type UnregisterZoneAction = {
165
190
  type: "unregisterZone";
166
191
  zone: string;
167
192
  };
168
- type PuckAction = ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetDataAction | RegisterZoneAction | UnregisterZoneAction;
193
+ type PuckAction = {
194
+ recordHistory?: boolean;
195
+ } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
169
196
 
170
197
  type PathData = Record<string, {
171
198
  selector: ItemSelector | null;
@@ -265,4 +292,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
265
292
  label: string;
266
293
  }) => react_jsx_runtime.JSX.Element;
267
294
 
268
- export { Adaptor, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };
295
+ export { Adaptor, AppData, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, Puck, Render, dropZoneContext };