Merge branch 'main' into clarasb-132-update_VegaChart

Author: clarasb

chartlets.js/CHANGES.md

@@ -9,11 +9,16 @@
 	- `vitest: ^3.2.4`
 
 * Added icon support for `Button`, `IconButton` and `Tabs` components.
+ (#124).
+ 
+* Added (MUI) component `Accordion`. (#41, #134)
  (#124)
 
 * Adjusted `VegaChart` component, due to `react-vega` upgrade
   from v7 to v8. (#132)
 
+* Fixed handling of `style` prop in `Tabs` component and added prop 
+  `iconPosition`. (#135, #136)
 
 ## Version 0.1.7 (from 2025/12/03)
 

chartlets.js/packages/lib/src/plugins/mui/Accordion.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Accordion } from "./Accordion";
+import { createChangeHandler } from "@/plugins/mui/common.test";
+
+describe("Accordion", () => {
+  it("should render the Accordion component", () => {
+    render(
+      <Accordion
+        id="acc"
+        type="Accordion"
+        label="My Accordion"
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("My Accordion")).not.toBeUndefined();
+  });
+
+  it("should fire 'expanded' property", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+
+    render(
+      <Accordion
+        id="acc"
+        type="Accordion"
+        expanded={false}
+        label="My Accordion"
+        onChange={onChange}
+      ></Accordion>,
+    );
+
+    // MUI Summary renders a button element
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(recordedEvents.length).toEqual(1);
+    expect(recordedEvents[0]).toEqual({
+      componentType: "Accordion",
+      id: "acc",
+      property: "expanded",
+      value: true,
+    });
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/Accordion.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import MuiAccordion from "@mui/material/Accordion";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import MuiTypography from "@mui/material/Typography";
+
+import type { ComponentState, ComponentProps } from "@/index";
+import { Children } from "@/index";
+import { Icon } from "./Icon";
+import type { SyntheticEvent } from "react";
+
+interface AccordionState extends ComponentState {
+  label?: string;
+  icon?: string;
+  expanded?: boolean;
+  disabled?: boolean;
+}
+
+interface AccordionProps extends ComponentProps, AccordionState {}
+
+export const Accordion = ({
+  id,
+  style,
+  label,
+  icon,
+  expanded,
+  disabled,
+  children: nodes,
+  onChange,
+}: AccordionProps) => {
+  const handleChange = (_event: SyntheticEvent, isExpanded: boolean) => {
+    if (id) {
+      onChange?.({
+        componentType: "Accordion",
+        id,
+        property: "expanded",
+        value: isExpanded,
+      });
+    }
+  };
+  return (
+    <div>
+      <MuiAccordion
+        id={id}
+        style={style}
+        expanded={expanded}
+        disabled={disabled}
+        onChange={handleChange}
+      >
+        <MuiAccordionSummary
+          expandIcon={icon ? <Icon iconName={icon} /> : undefined}
+        >
+          {label ? (
+            <MuiTypography component="span">{label}</MuiTypography>
+          ) : null}
+        </MuiAccordionSummary>
+
+        {nodes && (
+          <MuiAccordionDetails>
+            <Children nodes={nodes} onChange={onChange} />
+          </MuiAccordionDetails>
+        )}
+      </MuiAccordion>
+    </div>
+  );
+};

chartlets.js/packages/lib/src/plugins/mui/Tabs.tsx

@@ -15,10 +15,11 @@ import { Icon } from "./Icon";
 import { isString } from "@/utils/isString";
 import { isComponentState } from "@/types/state/component";
 
-interface TabState {
+interface TabState extends ComponentState {
   type: "Tab";
   label?: string;
   icon?: string;
+  iconPosition?: "bottom" | "end" | "start" | "top";
   disabled?: boolean;
   children?: ComponentProps[];
 }
@@ -50,20 +51,22 @@ export function Tabs({
     }
   };
   return (
-    <MuiBox sx={{ width: "100%" }}>
+    <MuiBox sx={{ width: "100%" }} style={style}>
       <MuiBox sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <MuiTabs id={id} style={style} value={value} onChange={handleChange}>
+        <MuiTabs id={id} value={value} onChange={handleChange}>
           {tabItems?.map((tab, index) => {
             const tabState = isComponentState(tab)
               ? (tab as TabState)
               : undefined;
             return (
               <MuiTab
                 key={index}
+                style={tabState?.style}
                 label={tabState ? tabState.label : isString(tab) ? tab : ""}
                 icon={
                   tabState && tabState.icon && <Icon iconName={tabState.icon} />
                 }
+                iconPosition={tabState?.iconPosition}
                 disabled={disabled || (tabState && tabState.disabled)}
               />
             );
@@ -78,7 +81,7 @@ export function Tabs({
               key={index}
               type={type}
               onChange={onChange}
-              children={tabState?.children ?? undefined}
+              children={tabState?.children}
             />
           )
         );

chartlets.js/packages/lib/src/plugins/mui/index.ts

@@ -5,6 +5,7 @@
  */
 
 import type { Plugin } from "@/index";
+import { Accordion } from "./Accordion";
 import { Box } from "./Box";
 import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
@@ -25,6 +26,7 @@ import { Table } from "@/plugins/mui/Table";
 export default function mui(): Plugin {
   return {
     components: [
+      ["Accordion", Accordion],
       ["Box", Box],
       ["Button", Button],
       ["Checkbox", Checkbox],

chartlets.py/CHANGES.md

@@ -3,8 +3,12 @@
 * Added `size` and removed `variant` property from `IconButton`
   component to align with component in chartlets.js. (#124)
 
+* Added (MUI) component `Accordion`. (#41, #134)
+
+* Added `iconPosition` to `Tabs` Component. (#135, #136)
+
 * Updated dependencies
-	- `altair>=6.0.0,<7.0.0` (#132)
+    - `altair>=6.0.0,<7.0.0` (#132)
 
 ## Version 0.1.7 (from 2025/12/03)
 
@@ -17,10 +21,10 @@
 
 ## Version 0.1.5 (from 2025/03/21)
 
-* Add `multiple` property for `Select` component to enable the
+* Added `multiple` property for `Select` component to enable the selection
   of multiple elements.
 
-* Add support for `Python 3.13`
+* Added support for `Python 3.13`
 
 
 ## Version 0.1.4 (from 2025/03/06)

chartlets.py/chartlets/components/__init__.py

@@ -2,6 +2,7 @@
 #  Permissions are hereby granted under the terms of the MIT License:
 #  https://opensource.org/licenses/MIT.
 
+from .accordion import Accordion
 from .box import Box
 from .button import Button
 from .button import IconButton

chartlets.py/chartlets/components/accordion.py

@@ -0,0 +1,27 @@
+#  Copyright (c) 2019-2026 by Brockmann Consult Development team
+#  Permissions are hereby granted under the terms of the MIT License:
+#  https://opensource.org/licenses/MIT.
+
+
+from dataclasses import dataclass, field
+
+from chartlets import Component
+
+@dataclass(frozen=True)
+class Accordion(Component):
+    """Accordion container."""
+
+    label: str | None = None
+    """Header of the accordion."""
+
+    icon: str | None = None
+    """Material icon name for the expand icon (e.g. 'expand_more')."""
+
+    expanded: bool = field(default=False)
+    """If set, controls whether the accordion is expanded."""
+
+    disabled: bool | None = None
+    """If set, controls whether the accordion is disabled."""
+
+    children: list[Component] = field(default_factory=list)
+    """Accordion content."""

chartlets.py/chartlets/components/tabs.py

@@ -16,6 +16,12 @@ class Tab(Component):
     icon: str | None = None
     """The tab icon's name."""
 
+    iconPosition: str | None = None
+    """	The position of the icon relative to the label.
+    One of "bottom" | "end" | "start" | "top". 
+    Defaults to "top".
+    """
+
     label: str | None = None
     """The tab label."""
 

chartlets.py/demo/my_extension/__init__.py

@@ -11,6 +11,7 @@
 from .my_panel_6 import panel as my_panel_6
 from .my_panel_7 import panel as my_panel_7
 from .my_panel_8 import panel as my_panel_8
+from .my_panel_9 import panel as my_panel_9
 
 
 ext = Extension(__name__)
@@ -22,3 +23,4 @@
 ext.add(my_panel_6)
 ext.add(my_panel_7)
 ext.add(my_panel_8)
+ext.add(my_panel_9)