fix: allows keys to be set in props (deephaven#810)

- Fixes deephaven#731 
  - Extract and save `key` prop
  - Modify key generation to use the `key` prop if it exists
- Allow `map` to be a valid component
  - Converts directly to a list while checking for unique props

plugins/ui/src/deephaven/ui/components/action_button.py

@@ -91,6 +91,7 @@ def action_button(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> ActionButtonElement:
     """
     ActionButtons allow users to perform an action. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.
@@ -161,6 +162,7 @@ def action_button(
         aria_details: The details for the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The rendered ActionButton element.
@@ -231,4 +233,5 @@ def action_button(
         aria_details=aria_details,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/action_group.py

@@ -84,6 +84,7 @@ def action_group(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     An action grouping of action items that are related to each other.
@@ -152,6 +153,7 @@ def action_group(
         aria-details: Identifies the element (or elements) that provide a detailed, extended description for the object.
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "ActionGroup",
@@ -217,4 +219,5 @@ def action_group(
         aria_details=aria_details,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/action_menu.py

@@ -85,6 +85,7 @@ def action_menu(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
@@ -147,6 +148,7 @@ def action_menu(
         aria-details: Identifies the element (or elements) that provide a detailed, extended description for the object.
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         f"ActionMenu",
@@ -207,4 +209,5 @@ def action_menu(
         aria_details=aria_details,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/button.py

@@ -95,6 +95,7 @@ def button(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
@@ -170,6 +171,7 @@ def button(
         aria_details: The details of the current element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The rendered button component.
@@ -248,4 +250,5 @@ def button(
         aria_details=aria_details,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/button_group.py

@@ -59,6 +59,7 @@ def button_group(
     id: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     A button group is a grouping of button whose actions are related to each other.
@@ -101,6 +102,7 @@ def button_group(
         id: The unique identifier of the element.
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "ButtonGroup",
@@ -147,4 +149,5 @@ def button_group(
         id=id,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/checkbox.py

@@ -84,6 +84,7 @@ def checkbox(
     aria_errormessage: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
@@ -153,6 +154,7 @@ def checkbox(
         aria_errormessage: The id of the element that provides error information for the current element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The rendered checkbox.
@@ -226,4 +228,5 @@ def checkbox(
         aria_errormessage=aria_errormessage,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/column.py

@@ -4,13 +4,14 @@
 from .basic import component_element
 
 
-def column(*children: Any, width: float | None = None, **kwargs: Any):
+def column(*children: Any, width: float | None = None, key: str | None = None):
     """
     A column is a container that can be used to group elements.
     Each element will be placed below its prior sibling.
 
     Args:
         children: Elements to render in the column.
         width: The percent width of the column relative to other children of its parent. If not provided, the column will be sized automatically.
+        key: A unique identifier used by React to render elements in a list.
     """
-    return component_element("Column", *children, width=width, **kwargs)
+    return component_element("Column", *children, width=width, key=key)

plugins/ui/src/deephaven/ui/components/combo_box.py

@@ -126,6 +126,7 @@ def combo_box(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> ComboBoxElement:
     """
     A combo box that can be used to search or select from a list. Children should be one of five types:
@@ -231,6 +232,7 @@ def combo_box(
         aria_details: The details for the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The rendered ComboBox.

plugins/ui/src/deephaven/ui/components/content.py

@@ -54,6 +54,7 @@ def content(
     id: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     Content represents the primary content within a Spectrum container.
@@ -99,6 +100,7 @@ def content(
         id: The unique identifier of the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "Content",
@@ -142,4 +144,5 @@ def content(
         id=id,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/contextual_help.py

@@ -70,6 +70,7 @@ def contextual_help(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     A contextual help is a quiet action button that triggers an informational popover.
@@ -127,6 +128,7 @@ def contextual_help(
         aria-details: Identifies the element (or elements) that provide a detailed, extended description for the object.
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "ContextualHelp",
@@ -183,4 +185,5 @@ def contextual_help(
         aria_details=aria_details,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/date_field.py

@@ -155,6 +155,7 @@ def date_field(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> DateFieldElement:
     """
     A date field allows the user to select a date.
@@ -251,6 +252,7 @@ def date_field(
         aria_details: The details for the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The date field element.

plugins/ui/src/deephaven/ui/components/date_picker.py

@@ -162,6 +162,7 @@ def date_picker(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> DatePickerElement:
     """
     A date picker allows the user to select a date.
@@ -265,6 +266,7 @@ def date_picker(
         aria_details: The details for the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The date picker element.

plugins/ui/src/deephaven/ui/components/date_range_picker.py

@@ -162,6 +162,7 @@ def date_range_picker(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> DatePickerElement:
     """
     A date range picker allows the user to select a range of dates.
@@ -268,6 +269,7 @@ def date_range_picker(
         aria_details: The details for the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
 
     Returns:
         The date range picker element.

plugins/ui/src/deephaven/ui/components/flex.py

@@ -23,7 +23,7 @@ def flex(
     gap: DimensionValue | None = "size-100",
     column_gap: DimensionValue | None = None,
     row_gap: DimensionValue | None = None,
-    **props: Any,
+    key: str | None = None,
 ):
     """
     Base Flex component for laying out children in a flexbox.
@@ -39,6 +39,7 @@ def flex(
         gap: The space to display between both rows and columns of children.
         column_gap: The space to display between columns of children.
         row_gap: The space to display between rows of children.
+        key: A unique identifier used by React to render elements in a list
     """
     return component_element(
         "Flex",
@@ -52,5 +53,5 @@ def flex(
         gap=gap,
         column_gap=column_gap,
         row_gap=row_gap,
-        **props,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/form.py

@@ -88,6 +88,7 @@ def form(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     Forms allow users to enter data that can be submitted while providing alignment and styling for form fields
@@ -158,6 +159,7 @@ def form(
         aria_details: The details for the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "Form",
@@ -226,4 +228,5 @@ def form(
         aria_details=aria_details,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/fragment.py

@@ -4,12 +4,13 @@
 from .basic import component_element
 
 
-def fragment(*children: Any):
+def fragment(*children: Any, key: str | None = None):
     """
     A React.Fragment: https://react.dev/reference/react/Fragment.
     Used to group elements together without a wrapper node.
 
     Args:
         *children: The children in the fragment.
+        key: A unique identifier used by React to render elements in a list.
     """
-    return component_element("Fragment", children=children)
+    return component_element("Fragment", children=children, key=key)

plugins/ui/src/deephaven/ui/components/grid.py

@@ -72,6 +72,7 @@ def grid(
     id: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     A layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing.
@@ -130,6 +131,7 @@ def grid(
         id: The unique identifier of the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "Grid",
@@ -186,4 +188,5 @@ def grid(
         id=id,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/heading.py

@@ -58,6 +58,7 @@ def heading(
     id: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     A layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing.
@@ -105,6 +106,7 @@ def heading(
         id: The unique identifier of the element.
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
     """
     return component_element(
         "Heading",
@@ -150,4 +152,5 @@ def heading(
         id=id,
         UNSAFE_class_name=UNSAFE_class_name,
         UNSAFE_style=UNSAFE_style,
+        key=key,
     )

plugins/ui/src/deephaven/ui/components/icon.py

@@ -65,6 +65,7 @@ def icon(
     aria_details: str | None = None,
     UNSAFE_class_name: str | None = None,
     UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
 ) -> Element:
     """
     Get a Deephaven icon by name.
@@ -113,6 +114,7 @@ def icon(
         id: The unique identifier of the element.
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
+        key: A unique identifier used by React to render elements in a list.
     """
 
     children, props = create_props(locals())