@measured/puck 0.13.0-canary.28f24f9 → 0.13.0-canary.b95050d

Sign up to get free protection for your applications and to get access to all the features.
@@ -42,6 +42,16 @@ type ArrayField<Props extends {
42
42
  defaultItemProps?: Props[0];
43
43
  getItemSummary?: (item: Props[0], index?: number) => string;
44
44
  };
45
+ type ObjectField<Props extends {
46
+ [key: string]: any;
47
+ } = {
48
+ [key: string]: any;
49
+ }> = BaseField & {
50
+ type: "object";
51
+ objectFields: {
52
+ [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
53
+ };
54
+ };
45
55
  type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
46
56
  name: string;
47
57
  fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
@@ -65,9 +75,13 @@ type ExternalField<Props extends {
65
75
  }> = BaseField & {
66
76
  type: "external";
67
77
  placeholder?: string;
68
- fetchList: () => Promise<any[] | null>;
78
+ fetchList: (params: {
79
+ query: string;
80
+ }) => Promise<any[] | null>;
69
81
  mapProp?: (value: any) => Props;
70
82
  getItemSummary: (item: Props, index?: number) => string;
83
+ showSearch?: boolean;
84
+ initialQuery?: string;
71
85
  };
72
86
  type CustomField<Props extends {
73
87
  [key: string]: any;
@@ -87,7 +101,7 @@ type Field<Props extends {
87
101
  [key: string]: any;
88
102
  } = {
89
103
  [key: string]: any;
90
- }> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
104
+ }> = TextField | SelectField | ArrayField<Props> | ObjectField<Props> | ExternalField<Props> | ExternalFieldWithAdaptor<Props> | CustomField;
91
105
  type DefaultRootProps = {
92
106
  title?: string;
93
107
  [key: string]: any;
@@ -195,4 +209,4 @@ type AppState = {
195
209
  ui: UiState;
196
210
  };
197
211
 
198
- export { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, DefaultRootProps as a, RootData as b, ArrayField as c, Adaptor as d, ExternalField as e, CustomField as f, DefaultComponentProps as g, Fields as h, Content as i, PuckContext as j, ComponentConfig as k, BaseData as l, ComponentData as m, RootDataWithoutProps as n, ItemWithId as o, ArrayState as p, DropZone as q };
212
+ export { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, ObjectField as O, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, DefaultRootProps as a, RootData as b, ArrayField as c, Adaptor as d, ExternalField as e, CustomField as f, DefaultComponentProps as g, Fields as h, Content as i, PuckContext as j, ComponentConfig as k, BaseData as l, ComponentData as m, RootDataWithoutProps as n, ItemWithId as o, ArrayState as p, DropZone as q };
package/dist/index.css CHANGED
@@ -656,13 +656,13 @@
656
656
  }
657
657
 
658
658
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
659
- ._ExternalInput_157li_1 {
659
+ ._ExternalInput_s6fxy_1 {
660
660
  font-family: var(--puck-font-stack);
661
661
  }
662
- ._ExternalInput-actions_157li_5 {
662
+ ._ExternalInput-actions_s6fxy_5 {
663
663
  display: flex;
664
664
  }
665
- ._ExternalInput-button_157li_9 {
665
+ ._ExternalInput-button_s6fxy_9 {
666
666
  display: flex;
667
667
  gap: 8px;
668
668
  align-items: center;
@@ -679,20 +679,20 @@
679
679
  overflow: hidden;
680
680
  flex-grow: 1;
681
681
  }
682
- ._ExternalInput-button_157li_9:hover,
683
- ._ExternalInput-detachButton_157li_28:hover {
682
+ ._ExternalInput-button_s6fxy_9:hover,
683
+ ._ExternalInput-detachButton_s6fxy_28:hover {
684
684
  cursor: pointer;
685
685
  background: var(--puck-color-azure-9);
686
686
  color: var(--puck-color-azure-4);
687
687
  z-index: 1;
688
688
  }
689
- ._ExternalInput--dataSelected_157li_35 ._ExternalInput-button_157li_9 {
689
+ ._ExternalInput--dataSelected_s6fxy_35 ._ExternalInput-button_s6fxy_9 {
690
690
  color: var(--puck-color-grey-2);
691
691
  display: block;
692
692
  border-top-right-radius: 0px;
693
693
  border-bottom-right-radius: 0px;
694
694
  }
695
- ._ExternalInput-detachButton_157li_28 {
695
+ ._ExternalInput-detachButton_s6fxy_28 {
696
696
  border: 1px solid var(--puck-color-grey-8);
697
697
  border-top-right-radius: 4px;
698
698
  border-bottom-right-radius: 4px;
@@ -705,22 +705,27 @@
705
705
  padding: 8px 12px;
706
706
  margin-left: -1px;
707
707
  }
708
- ._ExternalInputModal_157li_56 {
708
+ ._ExternalInputModal_s6fxy_56 {
709
+ color: black;
709
710
  display: flex;
710
711
  flex-direction: column;
711
712
  position: relative;
712
713
  max-height: 90vh;
713
714
  }
714
- ._ExternalInputModal-masthead_157li_63 {
715
+ ._ExternalInputModal-masthead_s6fxy_64 {
715
716
  background-color: white;
717
+ display: flex;
718
+ flex-wrap: wrap;
719
+ gap: 24px;
716
720
  padding: 32px 24px;
717
721
  }
718
- ._ExternalInputModal-tableWrapper_157li_68 {
722
+ ._ExternalInputModal-tableWrapper_s6fxy_72 {
723
+ position: relative;
719
724
  overflow-x: auto;
720
725
  overflow-y: auto;
721
726
  flex-grow: 1;
722
727
  }
723
- ._ExternalInputModal-table_157li_68 {
728
+ ._ExternalInputModal-table_s6fxy_72 {
724
729
  border-collapse: unset;
725
730
  border-spacing: 0px;
726
731
  color: var(--puck-color-neutral-4);
@@ -728,64 +733,125 @@
728
733
  z-index: 0;
729
734
  min-width: 100%;
730
735
  }
731
- ._ExternalInputModal-thead_157li_83 {
736
+ ._ExternalInputModal-thead_s6fxy_88 {
732
737
  position: sticky;
733
738
  top: 0;
734
739
  z-index: 1;
735
740
  }
736
- ._ExternalInputModal-th_157li_83 {
741
+ ._ExternalInputModal-th_s6fxy_88 {
737
742
  border-bottom: 1px solid var(--puck-color-grey-8);
738
743
  border-top: 1px solid var(--puck-color-grey-8);
739
744
  font-weight: 700;
740
745
  padding: 16px 24px;
741
746
  opacity: 0.9;
742
747
  }
743
- ._ExternalInputModal-td_157li_97 {
748
+ ._ExternalInputModal-td_s6fxy_102 {
744
749
  font-family: var(--puck-font-stack);
745
750
  padding: 16px 24px;
746
751
  }
747
- ._ExternalInputModal-tr_157li_102:nth-of-type(n) {
752
+ ._ExternalInputModal-tr_s6fxy_107:nth-of-type(n) {
748
753
  background-color: white;
749
754
  }
750
- ._ExternalInputModal-tr_157li_102:nth-of-type(2n) {
755
+ ._ExternalInputModal-tr_s6fxy_107:nth-of-type(2n) {
751
756
  background-color: var(--puck-color-grey-10);
752
757
  }
753
- ._ExternalInputModal-tr_157li_102 ._ExternalInputModal-td_157li_97:first-of-type {
758
+ ._ExternalInputModal-tr_s6fxy_107 ._ExternalInputModal-td_s6fxy_102:first-of-type {
754
759
  font-weight: 500;
755
760
  }
756
- ._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover {
761
+ ._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover {
757
762
  background: var(--puck-color-grey-11);
758
763
  color: var(--puck-color-azure-4);
759
764
  cursor: pointer;
760
765
  position: relative;
761
766
  margin-left: -5px;
762
767
  }
763
- ._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover ._ExternalInputModal-td_157li_97:first-of-type {
768
+ ._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover ._ExternalInputModal-td_s6fxy_102:first-of-type {
764
769
  border-left: 4px solid var(--puck-color-azure-4);
765
770
  padding-left: 20px;
766
771
  }
767
- ._ExternalInputModal-tableWrapper_157li_68 {
772
+ ._ExternalInputModal-tableWrapper_s6fxy_72 {
768
773
  display: none;
769
774
  }
770
- ._ExternalInputModal--hasData_157li_133 ._ExternalInputModal-tableWrapper_157li_68 {
775
+ ._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
771
776
  display: block;
772
777
  }
773
- ._ExternalInputModal-loadingBanner_157li_137 {
778
+ ._ExternalInputModal-loadingBanner_s6fxy_142 {
774
779
  display: none;
775
- background-color: white;
780
+ background-color: #ffffff90;
776
781
  padding: 64px;
777
782
  align-items: center;
778
783
  justify-content: center;
784
+ position: absolute;
785
+ top: 0;
786
+ left: 0;
787
+ right: 0;
788
+ bottom: 0;
779
789
  }
780
- ._ExternalInputModal--isLoading_157li_145 ._ExternalInputModal-loadingBanner_157li_137 {
790
+ ._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
781
791
  display: flex;
782
792
  }
783
- ._ExternalInputModal-noContentBanner_157li_149 {
793
+ ._ExternalInputModal-noContentBanner_s6fxy_159 {
784
794
  display: none;
795
+ border-top: 1px solid var(--puck-color-grey-8);
796
+ padding: 24px;
797
+ text-align: center;
785
798
  }
786
- ._ExternalInputModal--loaded_157li_153:not(._ExternalInputModal--hasData_157li_133) ._ExternalInputModal-noContentBanner_157li_149 {
799
+ ._ExternalInputModal--loaded_s6fxy_166:not(._ExternalInputModal--hasData_s6fxy_138) ._ExternalInputModal-noContentBanner_s6fxy_159 {
787
800
  display: block;
788
- padding: 24px;
801
+ }
802
+ ._ExternalInputModal-searchForm_s6fxy_171 {
803
+ display: flex;
804
+ margin-left: auto;
805
+ height: 43px;
806
+ gap: 12px;
807
+ }
808
+ ._ExternalInputModal-search_s6fxy_171 {
809
+ display: flex;
810
+ background: white;
811
+ border-width: 1px;
812
+ border-style: solid;
813
+ border-color: var(--puck-color-grey-8);
814
+ border-radius: 4px;
815
+ width: 100%;
816
+ }
817
+ ._ExternalInputModal-search_s6fxy_171:focus-within {
818
+ border-color: var(--puck-color-azure-4);
819
+ outline: var(--puck-color-azure-8) 4px solid;
820
+ outline-offset: 0;
821
+ }
822
+ ._ExternalInputModal-searchIcon_s6fxy_194 {
823
+ align-items: center;
824
+ background: var(--puck-color-grey-11);
825
+ border-bottom-left-radius: 4px;
826
+ border-top-left-radius: 4px;
827
+ border-right: 1px solid var(--puck-color-grey-8);
828
+ color: var(--puck-color-grey-6);
829
+ display: flex;
830
+ justify-content: center;
831
+ padding: 12px 15px;
832
+ }
833
+ ._ExternalInputModal-searchIconText_s6fxy_206 {
834
+ clip: rect(0 0 0 0);
835
+ clip-path: inset(100%);
836
+ height: 1px;
837
+ overflow: hidden;
838
+ position: absolute;
839
+ white-space: nowrap;
840
+ width: 1px;
841
+ }
842
+ ._ExternalInputModal-searchInput_s6fxy_216 {
843
+ border: none;
844
+ border-radius: 4px;
845
+ background: white;
846
+ font-family: inherit;
847
+ font-size: 14px;
848
+ padding: 12px 15px;
849
+ width: 100%;
850
+ }
851
+ ._ExternalInputModal-searchInput_s6fxy_216:focus {
852
+ border: none;
853
+ outline: none;
854
+ box-shadow: none;
789
855
  }
790
856
 
791
857
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
@@ -854,6 +920,20 @@
854
920
  font-size: var(--puck-font-size-xs);
855
921
  }
856
922
 
923
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
924
+ ._ObjectField_56z4t_5 {
925
+ display: flex;
926
+ flex-direction: column;
927
+ background-color: white;
928
+ border: 1px solid var(--puck-color-grey-8);
929
+ border-radius: 4px;
930
+ }
931
+ ._ObjectField-fieldset_56z4t_13 {
932
+ border: none;
933
+ margin: 0;
934
+ padding: 16px 15px;
935
+ }
936
+
857
937
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
858
938
  ._ComponentList_1m8r5_1 {
859
939
  font-family: var(--puck-font-stack);
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { D as Data, C as Config, I as ItemSelector, U as UiState, A as AppState, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-ff244704.js';
2
- export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-ff244704.js';
1
+ import { D as Data, C as Config, I as ItemSelector, U as UiState, A as AppState, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-b8c102e9.js';
2
+ export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, O as ObjectField, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-b8c102e9.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import { ReactNode, CSSProperties, SyntheticEvent, ReactElement } from 'react';
@@ -99,7 +99,7 @@ type PuckAction = {
99
99
  recordHistory?: boolean;
100
100
  } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
101
101
 
102
- declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
102
+ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, loading: loadingProp, }: {
103
103
  children: ReactNode;
104
104
  href?: string | undefined;
105
105
  onClick?: ((e: any) => void | Promise<void>) | undefined;
@@ -111,6 +111,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
111
111
  fullWidth?: boolean | undefined;
112
112
  icon?: ReactNode;
113
113
  size?: "medium" | "large" | undefined;
114
+ loading?: boolean | undefined;
114
115
  }) => react_jsx_runtime.JSX.Element;
115
116
 
116
117
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {