Add pointer-events and place-items to styles.

demo/dialog.py

@@ -71,10 +71,9 @@ def dialog(is_open: bool):
   ):
     with me.box(
       style=me.Style(
-        align_items="center",
+        place_items="center",
         display="grid",
         height="100vh",
-        justify_items="center",
       )
     ):
       with me.box(

demo/snackbar.py

@@ -125,9 +125,9 @@ def snackbar(
   The on_click_action should typically close the snackbar as part of its actions. If no
   click event is included, you'll need to manually hide the snackbar.
 
-  Note that there is one issue with this snackbar example. No actions are possible until
-  the snackbar is dismissed or closed. This is due to the fixed box that gets created when
-  the snackbar is visible.
+  Note that there is one issue with this snackbar example. No actions are possible when
+  using "time.sleep and yield" to imitate a status message that fades away after a
+  period of time.
 
   Args:
     is_visible: Whether the snackbar is currently visible or not.
@@ -144,6 +144,7 @@ def snackbar(
       overflow_x="auto",
       overflow_y="auto",
       position="fixed",
+      pointer_events="none",
       width="100%",
       z_index=1000,
     )
@@ -171,6 +172,7 @@ def snackbar(
           padding=me.Padding(top=5, bottom=5, right=5, left=15)
           if action_label
           else me.Padding.all(15),
+          pointer_events="auto",
           width=300,
         )
       ):

mesop/component_helpers/style.py

@@ -61,6 +61,26 @@
 ]
 OverflowValues = Literal["visible", "hidden", "clip", "scroll", "auto"]
 OverflowWrapValues = Literal["normal", "break-word", "anywhere"]
+PointerEventsValues = Literal[
+  "auto",
+  "none",
+  # SVG only (experimental for HTML)
+  "bounding-box",
+  "visiblePainted",
+  "visibleFill",
+  "visibleStroke",
+  "visible",
+  "painted",
+  "fill",
+  "stroke",
+  "all",
+  # Global values
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+]
 
 
 @dataclass(kw_only=True)
@@ -312,6 +332,8 @@ class Style:
       overflow_x: Specifies the handling of overflow in the horizontal direction. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x).
       overflow_y: Specifies the handling of overflow in the vertical direction. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y).
       padding: Sets the padding space required on each side of an element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
+      place_items: The CSS place-items shorthand property allows you to align items along both the block and inline directions at once. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items).
+      pointer_events: Sets under what circumstances (if any) a particular graphic element can become the target of pointer events. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
       position: Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
       right: Helps set horizontal position of a positioned element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/right).
       rotate: Allows you to specify rotation transforms individually and independently of the transform property. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate).
@@ -424,6 +446,8 @@ class Style:
   overflow_x: OverflowValues | None = None
   overflow_y: OverflowValues | None = None
   padding: Padding | None = None
+  place_items: str | None = None
+  pointer_events: PointerEventsValues | None = None
   position: (
     Literal[
       "static",
@@ -537,6 +561,8 @@ def to_style_proto(s: Style) -> pb.Style:
     overflow_x=s.overflow_x,
     overflow_y=s.overflow_y,
     padding=_map_edge_insets(s.padding),
+    place_items=s.place_items,
+    pointer_events=s.pointer_events,
     position=s.position,
     right=_px_str(s.right),
     rotate=s.rotate,

mesop/protos/ui.proto

@@ -303,7 +303,7 @@ message UserDefinedType {
     repeated Arg args = 1;
 }
 
-// Next id: 71
+// Next id: 73
 message Style {
     optional string align_content = 32;
     optional string align_items = 1;
@@ -361,6 +361,8 @@ message Style {
     optional string overflow_x = 19;
     optional string overflow_y = 20;
     optional EdgeInsets padding = 21;
+    optional string place_items = 72;
+    optional string pointer_events = 71;
     optional string position = 22;
     optional string right = 55;
     optional string rotate = 66;

mesop/web/src/utils/styles.ts

@@ -198,6 +198,12 @@ export function formatStyle(styleObj: Style): string {
       padding.getBottom() || 0
     } ${padding.getLeft() || 0};`;
   }
+  if (styleObj.getPlaceItems()) {
+    style += `place-items: ${styleObj.getPlaceItems()};`;
+  }
+  if (styleObj.getPointerEvents()) {
+    style += `pointer-events: ${styleObj.getPointerEvents()};`;
+  }
   if (styleObj.getPosition()) {
     style += `position: ${styleObj.getPosition()};`;
   }