@marimo-team/islands 0.23.7-dev48 → 0.23.7-dev50

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 (12) hide show
  1. package/dist/{code-visibility-An0P9cL_.js → code-visibility-DjsEQuRb.js} +220 -215
  2. package/dist/main.js +126 -120
  3. package/dist/{reveal-component-B23qYh6r.js → reveal-component-pQBz0vEK.js} +1 -1
  4. package/package.json +1 -1
  5. package/src/components/data-table/charts/components/form-fields.tsx +1 -0
  6. package/src/components/ui/combobox.tsx +21 -3
  7. package/src/plugins/core/__test__/sanitize.test.ts +30 -0
  8. package/src/plugins/impl/DropdownPlugin.tsx +12 -1
  9. package/src/plugins/impl/MultiselectPlugin.tsx +4 -0
  10. package/src/plugins/impl/SearchableSelect.tsx +11 -1
  11. package/src/plugins/impl/__tests__/DropdownPlugin.test.tsx +56 -0
  12. package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap +24 -12
package/src/plugins/impl/__tests__/DropdownPlugin.test.tsx CHANGED
@@ -36,6 +36,7 @@ describe("DropdownPlugin", () => {
36
36
  fullWidth: false,
37
37
  searchable: true,
38
38
  initialValue: [],
39
+ disabled: false,
39
40
  },
40
41
  value: [],
41
42
  setValue: vi.fn(),
@@ -48,6 +49,58 @@ describe("DropdownPlugin", () => {
48
49
  ).toBeInTheDocument();
49
50
  });
50
51
 
52
+ it("renders disabled native select when disabled is true", () => {
53
+ const plugin = new DropdownPlugin();
54
+ const host = document.createElement("div");
55
+ const props: IPluginProps<
56
+ string[],
57
+ z.infer<(typeof plugin)["validator"]>
58
+ > = {
59
+ data: {
60
+ label: "Test Label",
61
+ options: ["Option 1", "Option 2"],
62
+ allowSelectNone: false,
63
+ fullWidth: false,
64
+ searchable: false,
65
+ disabled: true,
66
+ initialValue: [],
67
+ },
68
+ value: [],
69
+ setValue: vi.fn(),
70
+ host,
71
+ functions: {},
72
+ };
73
+ render(plugin.render(props));
74
+ expect(screen.getByTestId("marimo-plugin-dropdown")).toBeDisabled();
75
+ });
76
+
77
+ it("renders disabled searchable combobox with aria-disabled", () => {
78
+ const plugin = new DropdownPlugin();
79
+ const host = document.createElement("div");
80
+ const props: IPluginProps<
81
+ string[],
82
+ z.infer<(typeof plugin)["validator"]>
83
+ > = {
84
+ data: {
85
+ label: "Test Label",
86
+ options: ["Option 1", "Option 2"],
87
+ allowSelectNone: false,
88
+ fullWidth: false,
89
+ searchable: true,
90
+ disabled: true,
91
+ initialValue: [],
92
+ },
93
+ value: [],
94
+ setValue: vi.fn(),
95
+ host,
96
+ functions: {},
97
+ };
98
+ render(plugin.render(props));
99
+ const trigger = screen.getByTestId("marimo-plugin-searchable-dropdown")
100
+ .firstChild as HTMLElement;
101
+ expect(trigger).toHaveAttribute("aria-disabled", "true");
102
+ });
103
+
51
104
  it("renders default dropdown when searchable is false", () => {
52
105
  const plugin = new DropdownPlugin();
53
106
  const host = document.createElement("div");
@@ -62,6 +115,7 @@ describe("DropdownPlugin", () => {
62
115
  fullWidth: false,
63
116
  searchable: false,
64
117
  initialValue: [],
118
+ disabled: false,
65
119
  },
66
120
  value: [],
67
121
  setValue: vi.fn(),
@@ -87,6 +141,7 @@ describe("DropdownPlugin", () => {
87
141
  fullWidth: false,
88
142
  searchable: true,
89
143
  initialValue: [],
144
+ disabled: false,
90
145
  },
91
146
  value: [],
92
147
  setValue,
@@ -129,6 +184,7 @@ describe("DropdownPlugin", () => {
129
184
  fullWidth: false,
130
185
  searchable: true,
131
186
  initialValue: [],
187
+ disabled: false,
132
188
  },
133
189
  value: ["Apple"],
134
190
  setValue,
package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap CHANGED
@@ -29,9 +29,10 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
29
29
  >
30
30
  <button
31
31
  aria-controls="radix-_r_27_"
32
+ aria-disabled="false"
32
33
  aria-expanded="false"
33
34
  aria-haspopup="dialog"
34
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
35
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
35
36
  data-state="closed"
36
37
  id="_r_26_-form-item"
37
38
  type="button"
@@ -84,9 +85,10 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
84
85
  >
85
86
  <button
86
87
  aria-controls="radix-_r_29_"
88
+ aria-disabled="false"
87
89
  aria-expanded="false"
88
90
  aria-haspopup="dialog"
89
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
91
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
90
92
  data-state="closed"
91
93
  id="_r_28_-form-item"
92
94
  type="button"
@@ -401,9 +403,10 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
401
403
  >
402
404
  <button
403
405
  aria-controls="radix-_r_2p_"
406
+ aria-disabled="false"
404
407
  aria-expanded="false"
405
408
  aria-haspopup="dialog"
406
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
409
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
407
410
  data-state="closed"
408
411
  id="_r_2o_-form-item"
409
412
  type="button"
@@ -598,9 +601,10 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
598
601
  >
599
602
  <button
600
603
  aria-controls="radix-_r_1p_"
604
+ aria-disabled="false"
601
605
  aria-expanded="false"
602
606
  aria-haspopup="dialog"
603
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
607
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
604
608
  data-state="closed"
605
609
  id="_r_1o_-form-item"
606
610
  type="button"
@@ -653,9 +657,10 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
653
657
  >
654
658
  <button
655
659
  aria-controls="radix-_r_1r_"
660
+ aria-disabled="false"
656
661
  aria-expanded="false"
657
662
  aria-haspopup="dialog"
658
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
663
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
659
664
  data-state="closed"
660
665
  id="_r_1q_-form-item"
661
666
  type="button"
@@ -800,9 +805,10 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
800
805
  >
801
806
  <button
802
807
  aria-controls="radix-_r_3b_"
808
+ aria-disabled="false"
803
809
  aria-expanded="false"
804
810
  aria-haspopup="dialog"
805
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
811
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
806
812
  data-state="closed"
807
813
  id="_r_3a_-form-item"
808
814
  type="button"
@@ -855,9 +861,10 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
855
861
  >
856
862
  <button
857
863
  aria-controls="radix-_r_3d_"
864
+ aria-disabled="false"
858
865
  aria-expanded="false"
859
866
  aria-haspopup="dialog"
860
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
867
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
861
868
  data-state="closed"
862
869
  id="_r_3c_-form-item"
863
870
  type="button"
@@ -910,9 +917,10 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
910
917
  >
911
918
  <button
912
919
  aria-controls="radix-_r_3f_"
920
+ aria-disabled="false"
913
921
  aria-expanded="false"
914
922
  aria-haspopup="dialog"
915
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
923
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
916
924
  data-state="closed"
917
925
  id="_r_3e_-form-item"
918
926
  type="button"
@@ -1300,9 +1308,10 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
1300
1308
  >
1301
1309
  <button
1302
1310
  aria-controls="radix-_r_4_"
1311
+ aria-disabled="false"
1303
1312
  aria-expanded="false"
1304
1313
  aria-haspopup="dialog"
1305
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
1314
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
1306
1315
  data-state="closed"
1307
1316
  id="_r_3_-form-item"
1308
1317
  type="button"
@@ -1583,9 +1592,10 @@ exports[`renderZodSchema > should render a form unique 1`] = `
1583
1592
  >
1584
1593
  <button
1585
1594
  aria-controls="radix-_r_32_"
1595
+ aria-disabled="false"
1586
1596
  aria-expanded="false"
1587
1597
  aria-haspopup="dialog"
1588
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
1598
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
1589
1599
  data-state="closed"
1590
1600
  id="_r_31_-form-item"
1591
1601
  type="button"
@@ -1742,9 +1752,10 @@ exports[`renders custom forms column_id_array 1`] = `
1742
1752
  >
1743
1753
  <button
1744
1754
  aria-controls="radix-_r_41_"
1755
+ aria-disabled="false"
1745
1756
  aria-expanded="false"
1746
1757
  aria-haspopup="dialog"
1747
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
1758
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
1748
1759
  data-state="closed"
1749
1760
  id="_r_40_-form-item"
1750
1761
  type="button"
@@ -1792,9 +1803,10 @@ exports[`renders custom forms column_id_dot_array 1`] = `
1792
1803
  >
1793
1804
  <button
1794
1805
  aria-controls="radix-_r_43_"
1806
+ aria-disabled="false"
1795
1807
  aria-expanded="false"
1796
1808
  aria-haspopup="dialog"
1797
- class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
1809
+ class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
1798
1810
  data-state="closed"
1799
1811
  id="_r_42_-form-item"
1800
1812
  type="button"