@pathscale/ui 0.0.67 → 0.0.68

package/dist/index.js

@@ -6796,29 +6796,50 @@ const Details = (props)=>{
 const DropdownDetails = Object.assign(Details, {
     Toggle: DropdownToggle_Summary
 });
-var DropdownItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li role=menuitem>"), DropdownItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>");
-const DropdownItem = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+var DropdownItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li role=menuitem>"), DropdownItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), DropdownItem_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+const DropdownItem_DropdownItem = (props)=>{
+    const dropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
+    const defaultProps = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        closeOnClick: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(defaultProps, [
         "anchor",
         "children",
-        "aria-selected"
+        "aria-selected",
+        "closeOnClick"
     ]);
+    const handleClick = (e)=>{
+        e.stopPropagation();
+        const originalOnClick = others.onClick;
+        if ("function" == typeof originalOnClick) originalOnClick(e);
+        if (dropdownContext && local.closeOnClick) dropdownContext.setOpen(false);
+    };
     return (()=>{
         var _el$ = DropdownItem_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
-            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(local.anchor ?? true));
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.anchor);
             return ()=>_c$() ? (()=>{
                     var _el$2 = DropdownItem_tmpl$2();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, others, false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        onClick: handleClick
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
                     return _el$2;
-                })() : local.children;
+                })() : (()=>{
+                    var _el$3 = DropdownItem_tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        onClick: handleClick,
+                        type: "button"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+                    return _el$3;
+                })();
         })());
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-selected", local["aria-selected"]));
         return _el$;
     })();
 };
-const dropdown_DropdownItem = DropdownItem;
+const DropdownItem = DropdownItem_DropdownItem;
 var DropdownMenu_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
 const DropdownMenu = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -6855,6 +6876,46 @@ const DropdownMenu = (props)=>{
     })();
 };
 const dropdown_DropdownMenu = DropdownMenu;
+function useDropdown(trigger, disabled = false) {
+    const [open, setOpenState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let ref;
+    const toggle = ()=>{
+        if (!disabled && "click" === trigger) setOpen(!open());
+    };
+    const onEnter = ()=>{
+        if (!disabled && "hover" === trigger) setOpen(true);
+    };
+    const onLeave = ()=>{
+        if (!disabled && "hover" === trigger) setOpen(false);
+    };
+    const onClickOutside = (e)=>{
+        if ("click" === trigger && ref && !ref.contains(e.target)) setOpen(false);
+    };
+    const setOpen = (value)=>{
+        if (false === value) {
+            if (ref) {
+                const focusableElements = ref.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                focusableElements.forEach((el)=>{
+                    el.blur();
+                });
+                ref.blur();
+            }
+            setOpenState(false);
+        } else setOpenState(true);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("click", onClickOutside);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>document.removeEventListener("click", onClickOutside));
+    });
+    return {
+        setOpen,
+        open,
+        ref: (el)=>ref = el,
+        toggle,
+        onEnter,
+        onLeave
+    };
+}
 var Dropdown_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label tabindex=0>"), Dropdown_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul class=dropdown-content role=listbox>"), Dropdown_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Dropdown_classesFn = ({ className, horizontal, vertical, end, hover, open })=>twMerge("dropdown", className, clsx({
         "dropdown-left": "left" === horizontal,
@@ -6865,6 +6926,7 @@ const Dropdown_classesFn = ({ className, horizontal, vertical, end, hover, open
         "dropdown-hover": hover,
         "dropdown-open": open
     }));
+const DropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)(void 0);
 const Dropdown = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -6884,77 +6946,99 @@ const Dropdown = (props)=>{
         "aria-haspopup",
         "aria-labelledby"
     ]);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("dropdown", local.class, local.className, clsx({
+    const dropdownCtx = useDropdown(local.hover ? "hover" : "click");
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        console.log("Dropdown open state:", dropdownCtx.open());
+    });
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const isOpen = local.open ?? dropdownCtx.open();
+        console.log("Computing dropdown classes, open:", isOpen);
+        return twMerge("dropdown", local.class, local.className, clsx({
             "dropdown-left": "left" === local.horizontal,
             "dropdown-right": "right" === local.horizontal,
             "dropdown-top": "top" === local.vertical,
             "dropdown-bottom": "bottom" === local.vertical,
             "dropdown-end": local.end,
             "dropdown-hover": local.hover,
-            "dropdown-open": local.open
-        })));
-    return (()=>{
-        var _el$ = Dropdown_tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get role () {
-                return local.item ? "combobox" : "listbox";
-            }
-        }, others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-label"] () {
-                return local["aria-label"];
-            },
-            get ["aria-describedby"] () {
-                return local["aria-describedby"];
-            },
-            get ["aria-expanded"] () {
-                return local["aria-expanded"] ?? local.open;
-            },
-            get ["aria-haspopup"] () {
-                return true === local["aria-haspopup"] ? "true" : false === local["aria-haspopup"] ? "false" : local["aria-haspopup"] || (local.item ? "listbox" : "true");
-            },
-            get ["aria-labelledby"] () {
-                return local["aria-labelledby"];
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return local.item;
-            },
-            get fallback () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.children);
-            },
-            get children () {
-                return [
-                    (()=>{
-                        var _el$2 = Dropdown_tmpl$();
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
-                        return _el$2;
-                    })(),
-                    (()=>{
-                        var _el$3 = Dropdown_tmpl$2();
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.item);
-                        return _el$3;
-                    })()
-                ];
-            }
+            "dropdown-open": isOpen
         }));
-        return _el$;
-    })();
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DropdownContext.Provider, {
+        value: dropdownCtx,
+        get children () {
+            var _el$ = Dropdown_tmpl$3();
+            var _ref$ = dropdownCtx.ref;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : dropdownCtx.ref = _el$;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get role () {
+                    return local.item ? "combobox" : "listbox";
+                }
+            }, others, {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get ["class"] () {
+                    return classes();
+                },
+                get style () {
+                    return local.style;
+                },
+                get onClick () {
+                    return dropdownCtx.toggle;
+                },
+                get onMouseEnter () {
+                    return dropdownCtx.onEnter;
+                },
+                get onMouseLeave () {
+                    return dropdownCtx.onLeave;
+                },
+                get ["aria-label"] () {
+                    return local["aria-label"];
+                },
+                get ["aria-describedby"] () {
+                    return local["aria-describedby"];
+                },
+                get ["aria-expanded"] () {
+                    return local["aria-expanded"] ?? dropdownCtx.open();
+                },
+                get ["aria-haspopup"] () {
+                    return true === local["aria-haspopup"] ? "true" : false === local["aria-haspopup"] ? "false" : local["aria-haspopup"] || (local.item ? "listbox" : "true");
+                },
+                get ["aria-labelledby"] () {
+                    return local["aria-labelledby"];
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return local.item;
+                },
+                get fallback () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.children);
+                },
+                get children () {
+                    return [
+                        (()=>{
+                            var _el$2 = Dropdown_tmpl$();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+                            return _el$2;
+                        })(),
+                        (()=>{
+                            var _el$3 = Dropdown_tmpl$2();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.item);
+                            return _el$3;
+                        })()
+                    ];
+                }
+            }));
+            return _el$;
+        }
+    });
 };
 const dropdown_Dropdown = Object.assign(Dropdown, {
     Details: DropdownDetails,
     Toggle: dropdown_DropdownToggle,
     Menu: dropdown_DropdownMenu,
-    Item: dropdown_DropdownItem
+    Item: DropdownItem
 });
 const dropdown = dropdown_Dropdown;
 var FileInput_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
@@ -10031,7 +10115,7 @@ const TableHeadCell = (props)=>{
 };
 const table_TableHeadCell = TableHeadCell;
 var TableHead_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<thead><tr>");
-const TableHead = (props)=>{
+const TableHead_TableHead = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "noCell",
@@ -10064,7 +10148,7 @@ const TableHead = (props)=>{
         return _el$;
     })();
 };
-const table_TableHead = TableHead;
+const TableHead = TableHead_TableHead;
 var TableBody_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<tbody>");
 const TableBody = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -10371,7 +10455,7 @@ const Table = (props)=>{
     })();
 };
 const table_Table = Object.assign(Table, {
-    Head: table_TableHead,
+    Head: TableHead,
     Body: table_TableBody,
     Row: table_TableRow,
     Footer: table_TableFooter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "author": "pathscale",
   "repository": {
     "type": "git",