@agilant/toga-blox 1.0.210 → 1.0.212

package/dist/components/DropdownContainer/DropdownContainer.d.ts

@@ -3,7 +3,6 @@ interface DropdownContainerProps {
     isOpen: boolean;
     toggleOpen: () => void;
     title?: string;
-    /** Now strictly just the icon (no text here!) */
     toggleIcon?: ReactNode;
     children?: ReactNode;
     expandAllLabel?: string;

package/dist/components/DropdownContainer/DropdownContainer.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 const DropdownContainer = ({ isOpen, toggleOpen, title, toggleIcon, children, expandAllLabel = "Expand All", collapseAllLabel = "Collapse All", onGlobalToggle, globalOpen = false, showGlobalToggle = false, additionalContainerClassNames = "", additionalContentClassNames = "", }) => {
-    const [isHeaderHovered, setIsHeaderHovered] = useState(false);
     const globalLabel = globalOpen ? collapseAllLabel : expandAllLabel;
     // Only the arrow wrapper gets this style
     const iconStyle = {
@@ -11,8 +9,11 @@ const DropdownContainer = ({ isOpen, toggleOpen, title, toggleIcon, children, ex
         fontSize: "18px",
         display: "flex",
         alignItems: "center",
+        cursor: "pointer",
     };
-    return (_jsxs("div", { className: additionalContainerClassNames, children: [_jsxs("div", { onMouseEnter: () => setIsHeaderHovered(true), onMouseLeave: () => setIsHeaderHovered(false), style: {
+    return (
+    // 1) Add `group` so children can react to container hover
+    _jsxs("div", { className: `group ${additionalContainerClassNames}`, children: [_jsxs("div", { onClick: toggleOpen, style: {
                     display: "flex",
                     alignItems: "center",
                     padding: "8px",
@@ -21,9 +22,9 @@ const DropdownContainer = ({ isOpen, toggleOpen, title, toggleIcon, children, ex
                             display: "flex",
                             alignItems: "center",
                             gap: "8px",
-                        }, children: [showGlobalToggle && onGlobalToggle && isHeaderHovered && (_jsxs("span", { onClick: (e) => {
+                        }, children: [showGlobalToggle && onGlobalToggle && (_jsx("span", { onClick: (e) => {
                                     e.stopPropagation();
                                     onGlobalToggle();
-                                }, style: { cursor: "pointer", userSelect: "none" }, children: [globalLabel, "test"] })), toggleIcon && (_jsx("div", { onClick: toggleOpen, style: iconStyle, children: toggleIcon }))] })] }), _jsx(AnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, style: { overflow: "hidden" }, children: _jsx("div", { className: additionalContentClassNames, children: children }) }, "content")) })] }));
+                                }, className: "\n                opacity-0\n                group-hover:opacity-100\n                transition-opacity duration-200\n                cursor-pointer select-none\n                text-sm\n              ", children: globalLabel })), toggleIcon && _jsx("div", { style: iconStyle, children: toggleIcon })] })] }), _jsx(AnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, style: { overflow: "hidden" }, children: _jsx("div", { className: additionalContentClassNames, children: children }) }, "content")) })] }));
 };
 export default DropdownContainer;

package/dist/components/DropdownContainer/DropdownContainer.stories.d.ts

@@ -10,6 +10,5 @@ export declare const SingleDropdown: StoryObj<typeof DropdownContainer>;
 /**
  * 2) Multiple Dropdowns Example
  * Renders multiple DropdownContainer components with a shared global toggle.
- * The global toggle text ("Expand All" / "Collapse All") appears only when the header is hovered over.
  */
 export declare const MultipleDropdowns: StoryObj<typeof DropdownContainer>;

package/dist/components/DropdownContainer/DropdownContainer.stories.js

@@ -11,7 +11,6 @@ export default {
     argTypes: {
         title: { control: "text" },
         toggleIcon: { control: false },
-        // The open and toggle handler props are managed internally via stories.
         isOpen: { table: { disable: true } },
         toggleOpen: { table: { disable: true } },
         color: { control: "color" },
@@ -19,7 +18,7 @@ export default {
     tags: ["autodocs"],
     parameters: {
         docs: {
-            page: () => (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Description, { markdown: `
+            page: () => (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Description, { children: `
 The **DropdownContainer** component provides:
 
 - **Individual Toggle:** Click the header to open/close the container.
@@ -40,6 +39,15 @@ export const SingleDropdown = {
         title: "Sales",
         toggleIcon: _jsx("span", { style: { fontSize: "18px" }, children: "\uD83D\uDD3D" }),
         children: defaultContent,
+        // ⬇️ ADDED: make this a hover group + border highlight
+        additionalContainerClassNames: "group bg-white rounded border border-transparent hover:border-navy-350",
+        additionalContentClassNames: "p-2",
+        // ⬇️ ADDED: enable the global toggle label on hover
+        showGlobalToggle: true,
+        expandAllLabel: "Expand All",
+        collapseAllLabel: "Collapse All",
+        onGlobalToggle: () => { }, // no-op for single
+        globalOpen: false,
     },
     render: (args) => {
         const [isOpen, setIsOpen] = useState(false);
@@ -49,7 +57,6 @@ export const SingleDropdown = {
 /**
  * 2) Multiple Dropdowns Example
  * Renders multiple DropdownContainer components with a shared global toggle.
- * The global toggle text ("Expand All" / "Collapse All") appears only when the header is hovered over.
  */
 export const MultipleDropdowns = {
     name: "Multiple Dropdowns",
@@ -58,9 +65,7 @@ export const MultipleDropdowns = {
     },
     render: (args) => {
         const titles = ["Sales", "Marketing", "Development"];
-        // Maintain an array of booleans for the open state of each dropdown.
         const [openStates, setOpenStates] = useState(titles.map(() => false));
-        // Toggle an individual dropdown.
         const toggleContainer = (index) => {
             setOpenStates((prev) => {
                 const newStates = [...prev];
@@ -68,14 +73,13 @@ export const MultipleDropdowns = {
                 return newStates;
             });
         };
-        // Determine if every dropdown is open.
         const allOpen = openStates.every(Boolean);
-        // Global toggle: toggle all dropdowns open/closed.
-        const globalToggle = () => {
-            setOpenStates(openStates.map(() => !allOpen));
-        };
-        // Show the global toggle text only if at least one dropdown is open.
+        const globalToggle = () => setOpenStates(openStates.map(() => !allOpen));
         const showGlobalToggle = openStates.some(Boolean);
-        return (_jsx("div", { children: titles.map((title, index) => (_jsx(DropdownContainer, { title: title, isOpen: openStates[index], toggleOpen: () => toggleContainer(index), toggleIcon: _jsx("span", { style: { fontSize: "18px" }, children: "\uD83D\uDD3D" }), expandAllLabel: "Expand All", collapseAllLabel: "Collapse All", onGlobalToggle: globalToggle, globalOpen: allOpen, showGlobalToggle: showGlobalToggle, additionalContainerClassNames: "", additionalContentClassNames: undefined, children: args.children }, index))) }));
+        return (_jsx("div", { children: titles.map((title, index) => (_jsx(DropdownContainer, { title: title, isOpen: openStates[index], toggleOpen: () => toggleContainer(index), toggleIcon: _jsx("span", { style: { fontSize: "18px" }, children: "\uD83D\uDD3D" }), 
+                // ⬇️ ADDED: same hover‑group + border for each
+                additionalContainerClassNames: "group bg-white rounded border border-transparent hover:border-navy-350", additionalContentClassNames: "p-2", 
+                // ⬇️ ADDED: global toggle props
+                showGlobalToggle: showGlobalToggle, expandAllLabel: "Expand All", collapseAllLabel: "Collapse All", onGlobalToggle: globalToggle, globalOpen: allOpen, children: args.children }, index))) }));
     },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.210",
+	"version": "1.0.212",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",