xmlui 0.11.13 → 0.11.15

package/dist/metadata/{collectedComponentMetadata-vckMPeLq.js → collectedComponentMetadata-Bn_obqca.js}

@@ -17645,20 +17645,22 @@ const checkboxComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$K = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "thickness-ContentSeparator": "var(--xmlui-thickness-ContentSeparator)", "length-ContentSeparator": "var(--xmlui-length-ContentSeparator)", "marginTop-ContentSeparator": "var(--xmlui-marginTop-ContentSeparator)", "marginBottom-ContentSeparator": "var(--xmlui-marginBottom-ContentSeparator)", "marginVertical-ContentSeparator": "var(--xmlui-marginVertical-ContentSeparator)", "marginLeft-ContentSeparator": "var(--xmlui-marginLeft-ContentSeparator)", "marginRight-ContentSeparator": "var(--xmlui-marginRight-ContentSeparator)", "marginHorizontal-ContentSeparator": "var(--xmlui-marginHorizontal-ContentSeparator)", "paddingTop-ContentSeparator": "var(--xmlui-paddingTop-ContentSeparator)", "paddingBottom-ContentSeparator": "var(--xmlui-paddingBottom-ContentSeparator)", "paddingVertical-ContentSeparator": "var(--xmlui-paddingVertical-ContentSeparator)", "paddingLeft-ContentSeparator": "var(--xmlui-paddingLeft-ContentSeparator)", "paddingRight-ContentSeparator": "var(--xmlui-paddingRight-ContentSeparator)", "paddingHorizontal-ContentSeparator": "var(--xmlui-paddingHorizontal-ContentSeparator)"}'`;
-const separator = "_separator_1r9lf_14";
-const horizontal$3 = "_horizontal_1r9lf_27";
-const vertical$3 = "_vertical_1r9lf_31";
+const separator = "_separator_hmp7g_14";
+const horizontal$3 = "_horizontal_hmp7g_27";
+const stretchToFit = "_stretchToFit_hmp7g_31";
+const vertical$3 = "_vertical_hmp7g_35";
 const styles$$ = {
   themeVars: themeVars$K,
   separator,
   horizontal: horizontal$3,
+  stretchToFit,
   vertical: vertical$3
 };
 const defaultProps$W = {
   orientation: "horizontal"
 };
 const ContentSeparator = forwardRef(
-  ({ orientation = defaultProps$W.orientation, thickness, length, style: style2, className, ...rest }, ref) => {
+  ({ orientation = defaultProps$W.orientation, thickness, length, hasExplicitLength = false, style: style2, className, ...rest }, ref) => {
     const inlineStyles = {};
     if (thickness !== void 0) {
       if (orientation === "horizontal") {
@@ -17683,7 +17685,8 @@ const ContentSeparator = forwardRef(
           styles$$.separator,
           {
             [styles$$.horizontal]: orientation === "horizontal",
-            [styles$$.vertical]: orientation === "vertical"
+            [styles$$.vertical]: orientation === "vertical",
+            [styles$$.stretchToFit]: !hasExplicitLength
           },
           className
         ),
@@ -17736,12 +17739,16 @@ const contentSeparatorComponentRenderer = createComponentRenderer(
   COMP$1k,
   ContentSeparatorMd,
   ({ node, className, extractValue }) => {
+    const orientation = extractValue(node.props.orientation);
+    const length = extractValue.asSize(node.props.length);
+    const hasExplicitLength = length !== void 0 || orientation === "vertical" && node.props.height !== void 0 || orientation === "horizontal" && node.props.width !== void 0;
     return /* @__PURE__ */ jsx(
       ContentSeparator,
       {
-        orientation: extractValue(node.props.orientation),
+        orientation,
         thickness: extractValue.asSize(node.props.thickness),
-        length: extractValue.asSize(node.props.length),
+        length,
+        hasExplicitLength,
         className
       }
     );
@@ -18403,17 +18410,19 @@ const datePickerComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$I = `'{"backgroundColor-DropdownMenu": "var(--xmlui-backgroundColor-DropdownMenu)", "borderRadius-DropdownMenu": "var(--xmlui-borderRadius-DropdownMenu)", "boxShadow-DropdownMenu": "var(--xmlui-boxShadow-DropdownMenu)", "borderColor-DropdownMenu-content": "var(--xmlui-borderColor-DropdownMenu-content)", "borderWidth-DropdownMenu-content": "var(--xmlui-borderWidth-DropdownMenu-content)", "borderStyle-DropdownMenu-content": "var(--xmlui-borderStyle-DropdownMenu-content)", "minWidth-DropdownMenu": "var(--xmlui-minWidth-DropdownMenu)", "backgroundColor-MenuItem": "var(--xmlui-backgroundColor-MenuItem)", "color-MenuItem": "var(--xmlui-color-MenuItem)", "fontFamily-MenuItem": "var(--xmlui-fontFamily-MenuItem)", "gap-MenuItem": "var(--xmlui-gap-MenuItem)", "fontSize-MenuItem": "var(--xmlui-fontSize-MenuItem)", "paddingVertical-MenuItem": "var(--xmlui-paddingVertical-MenuItem)", "paddingHorizontal-MenuItem": "var(--xmlui-paddingHorizontal-MenuItem)", "backgroundColor-MenuItem--hover": "var(--xmlui-backgroundColor-MenuItem--hover)", "backgroundColor-MenuItem--active": "var(--xmlui-backgroundColor-MenuItem--active)", "backgroundColor-MenuItem--active--hover": "var(--xmlui-backgroundColor-MenuItem--active--hover)", "color-MenuItem--hover": "var(--xmlui-color-MenuItem--hover)", "color-MenuItem--active": "var(--xmlui-color-MenuItem--active)", "color-MenuItem--active--hover": "var(--xmlui-color-MenuItem--active--hover)", "color-MenuItem--disabled": "var(--xmlui-color-MenuItem--disabled)", "marginTop-MenuSeparator": "var(--xmlui-marginTop-MenuSeparator)", "marginBottom-MenuSeparator": "var(--xmlui-marginBottom-MenuSeparator)", "width-MenuSeparator": "var(--xmlui-width-MenuSeparator)", "height-MenuSeparator": "var(--xmlui-height-MenuSeparator)", "color-MenuSeparator": "var(--xmlui-color-MenuSeparator)"}'`;
-const DropdownMenuContent = "_DropdownMenuContent_19u51_14";
-const DropdownMenuSubContent = "_DropdownMenuSubContent_19u51_19";
-const DropdownMenuItem = "_DropdownMenuItem_19u51_29";
-const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_19u51_30";
-const active$2 = "_active_19u51_53";
-const disabled$8 = "_disabled_19u51_63";
-const wrapper$h = "_wrapper_19u51_74";
-const DropdownMenuSeparator = "_DropdownMenuSeparator_19u51_78";
+const DropdownMenuContent = "_DropdownMenuContent_tklrk_14";
+const compact = "_compact_tklrk_18";
+const DropdownMenuSubContent = "_DropdownMenuSubContent_tklrk_22";
+const DropdownMenuItem = "_DropdownMenuItem_tklrk_32";
+const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_tklrk_33";
+const active$2 = "_active_tklrk_56";
+const disabled$8 = "_disabled_tklrk_66";
+const wrapper$h = "_wrapper_tklrk_81";
+const DropdownMenuSeparator = "_DropdownMenuSeparator_tklrk_85";
 const styles$Z = {
   themeVars: themeVars$I,
   DropdownMenuContent,
+  compact,
   DropdownMenuSubContent,
   DropdownMenuItem,
   DropdownMenuSubTrigger,
@@ -18449,6 +18458,7 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
   triggerButtonThemeColor = defaultDropdownMenuProps.triggerButtonThemeColor,
   triggerButtonIcon = defaultDropdownMenuProps.triggerButtonIcon,
   triggerButtonIconPosition = defaultDropdownMenuProps.triggerButtonIconPosition,
+  compact: compact2 = false,
   ...rest
 }, ref) {
   const { root: root2 } = useTheme();
@@ -18553,7 +18563,7 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
             ref: contentRef,
             align: alignment,
             style: style2,
-            className: classnames(styles$Z.DropdownMenuContent, className),
+            className: classnames(styles$Z.DropdownMenuContent, className, { [styles$Z.compact]: compact2 }),
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               contentRef.current?.focus();
@@ -18581,7 +18591,8 @@ const MenuItem = forwardRef(function MenuItem2({
   icon: icon2,
   iconPosition = defaultMenuItemProps.iconPosition,
   active: active2 = defaultMenuItemProps.active,
-  enabled: enabled2 = true
+  enabled: enabled2 = true,
+  compact: compact2 = false
 }, ref) {
   const iconToStart = iconPosition === "start";
   const context = useDropdownMenuContext();
@@ -18616,7 +18627,8 @@ const MenuItem = forwardRef(function MenuItem2({
       style: style2,
       className: classnames(className, styles$Z.DropdownMenuItem, {
         [styles$Z.active]: active2,
-        [styles$Z.disabled]: !enabled2
+        [styles$Z.disabled]: !enabled2,
+        [styles$Z.compact]: compact2
       }),
       ref,
       onClick: handleClick,
@@ -21316,14 +21328,18 @@ const Form = forwardRef(function({
     dispatch(formSubmitting());
     try {
       const filteredSubject = validationResult.data;
-      const canSubmit = await onWillSubmit?.(filteredSubject);
-      if (canSubmit === false) {
+      const willSubmitResult = await onWillSubmit?.(filteredSubject);
+      if (willSubmitResult === false) {
         dispatch(
           backendValidationArrived({ generalValidationResults: [], fieldValidationResults: {} })
         );
         return;
       }
-      const result = await onSubmit?.(filteredSubject, {
+      let dataToSubmit = filteredSubject;
+      if (willSubmitResult !== null && willSubmitResult !== void 0 && willSubmitResult !== "" && typeof willSubmitResult === "object" && !Array.isArray(willSubmitResult)) {
+        dataToSubmit = willSubmitResult;
+      }
+      const result = await onSubmit?.(dataToSubmit, {
         passAsDefaultBody: true
       });
       dispatch(formSubmitted());
@@ -21652,7 +21668,7 @@ const FormMd = createMetadata({
   },
   events: {
     willSubmit: d(
-      `The form infrastructure fires this event just before the form is submitted. The event argument is the current \`data\` value to be submitted. You can cancel the submission by returning \`false\` from the event handler.`
+      `The form infrastructure fires this event just before the form is submitted. The event argument is the current \`data\` value to be submitted. The return value controls submission behavior: returning \`false\` cancels the submission; returning a plain object submits that object instead; returning \`null\`, \`undefined\`, an empty string, or any non-object value proceeds with normal submission.`
     ),
     submit: d(
       `The form infrastructure fires this event when the form is submitted. The event argument is the current \`data\` value to save.`
@@ -25255,11 +25271,11 @@ function requireClient() {
 var clientExports = /* @__PURE__ */ requireClient();
 const ReactDOM = /* @__PURE__ */ getDefaultExportFromCjs(clientExports);
 const themeVars$p = `'{"backgroundColor-ResponsiveBar": "var(--xmlui-backgroundColor-ResponsiveBar)", "padding-ResponsiveBar": "var(--xmlui-padding-ResponsiveBar)", "margin-ResponsiveBar": "var(--xmlui-margin-ResponsiveBar)"}'`;
-const responsiveBar = "_responsiveBar_9ttfw_14";
-const vertical$2 = "_vertical_9ttfw_26";
-const horizontal$1 = "_horizontal_9ttfw_33";
-const visibleItems = "_visibleItems_9ttfw_39";
-const overflowDropdown = "_overflowDropdown_9ttfw_65";
+const responsiveBar = "_responsiveBar_1euow_14";
+const vertical$2 = "_vertical_1euow_26";
+const horizontal$1 = "_horizontal_1euow_33";
+const visibleItems = "_visibleItems_1euow_39";
+const overflowDropdown = "_overflowDropdown_1euow_65";
 const styles$F = {
   themeVars: themeVars$p,
   responsiveBar,
@@ -25268,26 +25284,55 @@ const styles$F = {
   visibleItems,
   overflowDropdown
 };
+const PART_OVERFLOW = "overflow";
 const ResponsiveBarDropdown = ({
   overflowIcon,
+  dropdownText,
+  dropdownAlignment,
+  triggerTemplate,
   children,
-  className
-}) => /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(DropdownMenu, { label: "More options", triggerButtonIcon: overflowIcon, children }) });
+  className,
+  onWillOpen,
+  registerComponentApi
+}) => /* @__PURE__ */ jsx("div", { className, "data-part-id": PART_OVERFLOW, children: /* @__PURE__ */ jsx(
+  DropdownMenu,
+  {
+    label: dropdownText,
+    triggerButtonIcon: overflowIcon,
+    triggerTemplate,
+    alignment: dropdownAlignment,
+    compact: true,
+    onWillOpen,
+    registerComponentApi,
+    children
+  }
+) });
 const defaultResponsiveBarProps = {
   overflowIcon: "ellipsisHorizontal:ResponsiveBar",
+  dropdownText: "More options",
   gap: 0,
-  orientation: "horizontal"
+  orientation: "horizontal",
+  reverse: false
 };
 const ResponsiveBar = forwardRef(function ResponsiveBar2({
   children,
+  childNodes,
+  renderChildFn,
   overflowIcon = defaultResponsiveBarProps.overflowIcon,
+  dropdownText = defaultResponsiveBarProps.dropdownText,
+  dropdownAlignment,
+  triggerTemplate,
   gap = defaultResponsiveBarProps.gap,
   orientation = defaultResponsiveBarProps.orientation,
+  reverse: reverse2 = defaultResponsiveBarProps.reverse,
   style: style2,
   className,
   onClick,
+  onWillOpen,
+  registerComponentApi,
   ...rest
 }, ref) {
+  const effectiveAlignment = dropdownAlignment ?? (reverse2 ? "start" : "end");
   const containerRef = useRef(null);
   const measurementDropdownRef = useRef(null);
   const isCalculatingRef = useRef(false);
@@ -25295,8 +25340,10 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
   const lastChildrenCount = useRef(0);
   useRef(null);
   const layoutCompletedRef = useRef(false);
+  const dropdownApiRef = useRef(null);
   const [isInMeasurementPhase, setIsInMeasurementPhase] = useState(true);
   const [measuredWidths, setMeasuredWidths] = useState([]);
+  const [measuredDropdownSize, setMeasuredDropdownSize] = useState(0);
   const [layout, setLayout] = useState({
     visibleItems: [],
     overflowItems: []
@@ -25308,6 +25355,21 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     return result;
   }, [children]);
   const childrenCount = childrenArray.length;
+  useEffect(() => {
+    if (registerComponentApi) {
+      registerComponentApi({
+        open: () => {
+          dropdownApiRef.current?.open();
+        },
+        close: () => {
+          dropdownApiRef.current?.close();
+        },
+        hasOverflow: () => {
+          return layout.overflowItems.length > 0;
+        }
+      });
+    }
+  }, [registerComponentApi, layout.overflowItems.length]);
   const measureItems = () => {
     if (!containerRef.current) return;
     const items = [];
@@ -25327,7 +25389,16 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       const rect = item2.getBoundingClientRect();
       return orientation === "horizontal" ? rect.width : rect.height;
     });
+    let dropdownSize = orientation === "horizontal" ? 147 : 47;
+    if (measurementDropdownRef.current) {
+      const dropdownRect = measurementDropdownRef.current.getBoundingClientRect();
+      const measuredSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
+      if (measuredSize > 0) {
+        dropdownSize = measuredSize;
+      }
+    }
     setMeasuredWidths(measurements);
+    setMeasuredDropdownSize(dropdownSize);
     setIsInMeasurementPhase(false);
   };
   const calculateOverflowLayout = () => {
@@ -25341,7 +25412,6 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     if (containerSize === 0 || containerSize === lastSize) {
       return;
     }
-    console.log(`ResponsiveBar ${orientation}: containerSize=${containerSize}, children=${childrenArray.length}`);
     isCalculatingRef.current = true;
     lastContainerSize.current = containerSize;
     const gapValue = gap;
@@ -25352,25 +25422,23 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       const gapSize = i > 0 ? gapValue : 0;
       totalSize += gapSize + childSize;
     }
-    console.log(`Total size needed: ${totalSize}, available: ${containerSize}`);
     let visibleItems2;
     let overflowItems;
     if (totalSize <= containerSize) {
       visibleItems2 = childrenArray;
       overflowItems = [];
     } else {
-      let dropdownSize = orientation === "horizontal" ? 147 : 47;
+      let dropdownSize = measuredDropdownSize > 0 ? measuredDropdownSize : orientation === "horizontal" ? 147 : 47;
       const existingDropdown = container2.querySelector(
         `.${styles$F.overflowDropdown}`
       );
       if (existingDropdown) {
         const dropdownRect = existingDropdown.getBoundingClientRect();
-        dropdownSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
-      } else if (measurementDropdownRef.current) {
-        const dropdownRect = measurementDropdownRef.current.getBoundingClientRect();
-        dropdownSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
+        const currentSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
+        if (currentSize > 0) {
+          dropdownSize = currentSize;
+        }
       }
-      console.log(`Dropdown size: ${dropdownSize}`);
       let accumulatedSize = 0;
       let visibleCount = 0;
       for (let i = 0; i < childrenArray.length; i++) {
@@ -25379,7 +25447,6 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
         const gapSize = i > 0 ? gapValue : 0;
         const proposedSize = accumulatedSize + gapSize + childSize;
         const totalSizeWithDropdown = proposedSize + gapValue + dropdownSize;
-        console.log(`Item ${i}: size=${childSize}, proposed=${proposedSize}, withDropdown=${totalSizeWithDropdown}`);
         if (totalSizeWithDropdown <= containerSize) {
           accumulatedSize = proposedSize;
           visibleCount++;
@@ -25393,18 +25460,14 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       if (visibleCount >= childrenArray.length) {
         visibleItems2 = childrenArray;
         overflowItems = [];
-        console.log(`All items fit, no dropdown needed`);
       } else if (visibleCount === 0) {
         visibleItems2 = childrenArray.slice(0, 1);
         overflowItems = childrenArray.slice(1);
-        console.log(`No items fit, forcing one visible: visible=1, overflow=${overflowItems.length}`);
       } else {
         visibleItems2 = childrenArray.slice(0, visibleCount);
         overflowItems = childrenArray.slice(visibleCount);
-        console.log(`Split items: visible=${visibleItems2.length}, overflow=${overflowItems.length}`);
       }
     }
-    console.log(`Final layout: visible=${visibleItems2.length}, overflow=${overflowItems.length}`);
     if (visibleItems2.length !== layout.visibleItems.length || overflowItems.length !== layout.overflowItems.length) {
       setLayout({
         visibleItems: visibleItems2,
@@ -25426,6 +25489,7 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       lastChildrenCount.current = childrenCount;
       setIsInMeasurementPhase(true);
       setMeasuredWidths([]);
+      setMeasuredDropdownSize(0);
     }
   }, [childrenCount]);
   useEffect(() => {
@@ -25471,7 +25535,7 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
         ...style2,
         gap: `${gap}px`,
         // Gap between visibleItems and overflowDropdown
-        flexDirection: orientation === "horizontal" ? "row" : "column",
+        flexDirection: orientation === "horizontal" ? reverse2 ? "row-reverse" : "row" : reverse2 ? "column-reverse" : "column",
         height: orientation === "vertical" ? "100%" : void 0,
         width: orientation === "horizontal" ? "100%" : void 0
       },
@@ -25493,7 +25557,7 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
                 visibility: "hidden",
                 opacity: 0,
                 pointerEvents: "none",
-                flexDirection: orientation === "horizontal" ? "row" : "column"
+                flexDirection: orientation === "horizontal" ? reverse2 ? "row-reverse" : "row" : reverse2 ? "column-reverse" : "column"
               },
               children: childrenArray.map((child, index) => /* @__PURE__ */ jsx("div", { children: child }, `item-${index}`))
             }
@@ -25511,7 +25575,13 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
                 ResponsiveBarDropdown,
                 {
                   overflowIcon,
+                  dropdownText,
+                  dropdownAlignment: effectiveAlignment,
+                  triggerTemplate,
                   className: styles$F.overflowDropdown,
+                  onWillOpen,
+                  registerComponentApi: (api) => {
+                  },
                   children: childrenArray.length > 0 && /* @__PURE__ */ jsx(MenuItem, { children: childrenArray[0] })
                 }
               )
@@ -25531,11 +25601,11 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
               style: {
                 gap: `${gap}px`,
                 // Gap between visible items
-                flexDirection: orientation === "horizontal" ? "row" : "column"
+                flexDirection: orientation === "horizontal" ? reverse2 ? "row-reverse" : "row" : reverse2 ? "column-reverse" : "column"
               },
               children: childrenArray.map((child, index) => {
                 const isVisible = layout.visibleItems.length > 0 ? index < layout.visibleItems.length : true;
-                return /* @__PURE__ */ jsx("div", { style: { display: isVisible ? "block" : "none" }, children: child }, `item-${index}`);
+                return /* @__PURE__ */ jsx("div", { style: { display: isVisible ? "flex" : "none", alignItems: "stretch" }, children: renderChildFn && childNodes ? renderChildFn(childNodes[index], false) : child }, `item-${index}`);
               })
             }
           ),
@@ -25543,8 +25613,19 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
             ResponsiveBarDropdown,
             {
               overflowIcon,
+              dropdownText,
+              dropdownAlignment: effectiveAlignment,
+              triggerTemplate,
               className: styles$F.overflowDropdown,
-              children: layout.overflowItems.map((item2, index) => /* @__PURE__ */ jsx(MenuItem, { children: item2 }, index))
+              onWillOpen,
+              registerComponentApi: (api) => {
+                dropdownApiRef.current = api;
+              },
+              children: layout.overflowItems.map((item2, index) => {
+                const originalIndex = layout.visibleItems.length + index;
+                const renderedChild = renderChildFn && childNodes ? renderChildFn(childNodes[originalIndex], true) : item2;
+                return /* @__PURE__ */ jsx(MenuItem, { compact: true, children: renderedChild }, index);
+              })
             }
           )
         ] })
@@ -25552,6 +25633,21 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     }
   );
 });
+const ResponsiveBarItem = memo(
+  ({ node, isOverflow, renderChild: renderChild2, layoutContext }) => {
+    const nodeWithContext = useMemo(() => {
+      return {
+        type: "Container",
+        contextVars: {
+          $overflow: isOverflow
+        },
+        children: Array.isArray(node) ? node : [node]
+      };
+    }, [node, isOverflow]);
+    return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithContext, layoutContext) });
+  }
+);
+ResponsiveBarItem.displayName = "ResponsiveBarItem";
 const COMP$1c = "ResponsiveBar";
 const ResponsiveBarMd = createMetadata({
   status: "stable",
@@ -25569,17 +25665,54 @@ const ResponsiveBarMd = createMetadata({
       valueType: "string",
       defaultValue: defaultResponsiveBarProps.overflowIcon
     },
+    dropdownText: {
+      description: "Text to display in the dropdown trigger button label when items overflow. This text is used for accessibility and appears alongside the overflow icon.",
+      valueType: "string",
+      defaultValue: defaultResponsiveBarProps.dropdownText
+    },
+    dropdownAlignment: {
+      description: "Alignment of the dropdown menu relative to the trigger button. By default, uses 'end' when reverse is false (dropdown on the right/bottom) and 'start' when reverse is true (dropdown on the left/top).",
+      valueType: "string",
+      availableValues: alignmentOptionMd
+    },
+    triggerTemplate: dTriggerTemplate(COMP$1c),
     gap: {
       description: "Gap between child elements in pixels. Controls the spacing between items in the responsive bar layout.",
       valueType: "number",
       defaultValue: defaultResponsiveBarProps.gap
+    },
+    reverse: {
+      description: "Reverses the direction of child elements. In horizontal mode, items are arranged from right to left instead of left to right. In vertical mode, items are arranged from bottom to top instead of top to bottom. The dropdown menu position also adjusts to appear at the start (left/top) instead of the end (right/bottom).",
+      valueType: "boolean",
+      defaultValue: defaultResponsiveBarProps.reverse
     }
   },
   events: {
-    click: dClick(COMP$1c)
+    click: dClick(COMP$1c),
+    willOpen: d(
+      `This event fires when the \`${COMP$1c}\` overflow dropdown menu is about to be opened. You can prevent opening the menu by returning \`false\` from the event handler. Otherwise, the menu will open at the end of the event handler like normal.`
+    )
+  },
+  apis: {
+    close: {
+      description: `This method closes the overflow dropdown menu.`,
+      signature: "close(): void"
+    },
+    open: {
+      description: `This method opens the overflow dropdown menu.`,
+      signature: "open(): void"
+    },
+    hasOverflow: {
+      description: `This method returns true if the ResponsiveBar currently has an overflow menu (i.e., some items don't fit and are in the dropdown).`,
+      signature: "hasOverflow(): boolean"
+    }
+  },
+  contextVars: {
+    $overflow: {
+      description: "Boolean indicating whether the child component is displayed in the overflow dropdown menu (true) or visible in the main bar (false).",
+      valueType: "boolean"
+    }
   },
-  apis: {},
-  contextVars: {},
   themeVars: parseScssVar(styles$F.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
@@ -25591,16 +25724,43 @@ const ResponsiveBarMd = createMetadata({
 const responsiveBarComponentRenderer = createComponentRenderer(
   COMP$1c,
   ResponsiveBarMd,
-  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
+  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi, layoutContext }) => {
+    const children = Array.isArray(node.children) ? node.children : node.children ? [node.children] : [];
+    const renderChildWithContext = (childNode, isOverflow) => /* @__PURE__ */ jsx(
+      ResponsiveBarItem,
+      {
+        node: childNode,
+        isOverflow,
+        renderChild: renderChild2,
+        layoutContext
+      }
+    );
     return /* @__PURE__ */ jsx(
       ResponsiveBar,
       {
         orientation: extractValue(node.props?.orientation),
         overflowIcon: extractValue(node.props?.overflowIcon),
+        dropdownText: extractValue(node.props?.dropdownText),
+        dropdownAlignment: extractValue(node.props?.dropdownAlignment),
+        triggerTemplate: renderChild2(node.props?.triggerTemplate),
         gap: extractValue(node.props?.gap),
+        reverse: extractValue.asOptionalBoolean(node.props?.reverse),
         onClick: lookupEventHandler("click"),
+        onWillOpen: lookupEventHandler("willOpen"),
+        registerComponentApi,
         className,
-        children: renderChild2(node.children)
+        childNodes: children,
+        renderChildFn: renderChildWithContext,
+        children: children.map((child, index) => /* @__PURE__ */ jsx(
+          ResponsiveBarItem,
+          {
+            node: child,
+            isOverflow: false,
+            renderChild: renderChild2,
+            layoutContext
+          },
+          index
+        ))
       }
     );
   }
@@ -48088,7 +48248,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.13";
+const version = "0.11.15";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -55738,7 +55898,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-B1fL_SOf.js");
+      const { initMock } = await import("./initMock-DROjRCvI.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -55755,7 +55915,7 @@ function ApiInterceptorProvider({
           if (define_process_env_default.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-Wgm2_zjg.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-B1fL_SOf.js")
+              import("./initMock-DROjRCvI.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -55792,7 +55952,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-Wgm2_zjg.js"),
-            import("./initMock-B1fL_SOf.js")
+            import("./initMock-DROjRCvI.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -58706,6 +58866,7 @@ const collectedComponentMetadata = {
   RadioGroup: RadioGroupMd,
   RealTimeAdapter: RealTimeAdapterMd,
   Redirect: RedirectMd,
+  ResponsiveBar: ResponsiveBarMd,
   Select: SelectMd,
   SelectionStore: SelectionStoreMd,
   Slider: SliderMd,

package/dist/metadata/{initMock-B1fL_SOf.js → initMock-DROjRCvI.js}

@@ -1,6 +1,6 @@
 import { delay as delay$1, HttpResponse, matchRequestUrl } from "msw";
 import { isArray, isObject, mapValues } from "lodash-es";
-import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./collectedComponentMetadata-vckMPeLq.js";
+import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./collectedComponentMetadata-Bn_obqca.js";
 import Dexie from "dexie";
 var HttpStatusCode = /* @__PURE__ */ ((HttpStatusCode2) => {
   HttpStatusCode2[HttpStatusCode2["Continue"] = 100] = "Continue";