@pathscale/ui 2.11.7 → 2.11.9

package/dist/components/panel-toggle/PanelToggle.generated.d.ts

@@ -0,0 +1,18 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./PanelToggle.css";
+import type { JSX } from "@solidjs/web";
+import type { UIBaseProps } from "../vocabulary";
+export type PanelToggleSide = "left" | "right";
+export type PanelToggleProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "aria-label" | "aria-expanded" | "type"> & UIBaseProps & {
+    /** Required so inspection and QA can address this control without its copy. */
+    id: string;
+    /** Whether the panel controlled by this gutter tab is visible. */
+    expanded: boolean;
+    /** The side of the content on which the controlled panel lives. */
+    side?: PanelToggleSide;
+    /** Names the action in the current state, for example “Hide details”. */
+    "aria-label": string;
+    /** The id of the panel this button expands and collapses. */
+    "aria-controls"?: string;
+};
+export declare const PanelToggleLayout: __LayoutComponent<PanelToggleProps>;

package/dist/components/panel-toggle/PanelToggle.generated.js

@@ -0,0 +1,41 @@
+import { mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./PanelToggle.css";
+import { omit } from "solid-js";
+import { panelToggle } from "./PanelToggle.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<button><span>");
+const __solidLayoutPanelToggleLayout = (_stable, p)=>{
+    const rest = omit(p, "id", "expanded", "side", "aria-label", "aria-controls", "children", "class", "style");
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps(rest, ()=>_stable.slot.root, {
+        get id () {
+            return p.id;
+        },
+        type: "button",
+        get ["aria-label"] () {
+            return p["aria-label"];
+        },
+        get ["aria-controls"] () {
+            return p["aria-controls"];
+        },
+        get ["aria-expanded"] () {
+            return p.expanded ? "true" : "false";
+        },
+        get ["data-expanded"] () {
+            return p.expanded ? "true" : "false";
+        },
+        get ["data-side"] () {
+            return p.side ?? "right";
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>_stable.slot.indicator, {
+        "aria-hidden": "true"
+    }), false);
+    return _el$;
+};
+const PanelToggleLayout = defineComponent({
+    recipe: panelToggle,
+    layout: __solidLayoutPanelToggleLayout,
+    embedded: true
+});
+export { PanelToggleLayout };

package/dist/components/panel-toggle/PanelToggle.recipe.d.ts

@@ -0,0 +1,21 @@
+export declare const panelToggle: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "panel-toggle";
+    readonly element: "button";
+    readonly slots: {
+        readonly root: {
+            readonly base: "panel-toggle";
+        };
+        readonly indicator: {
+            readonly base: "panel-toggle__indicator";
+        };
+    };
+    readonly props: {
+        readonly side: {
+            readonly left: "panel-toggle--left";
+            readonly right: "panel-toggle--right";
+        };
+    };
+    readonly defaults: {
+        readonly side: "right";
+    };
+}>;

package/dist/components/panel-toggle/PanelToggle.recipe.js

@@ -0,0 +1,45 @@
+import { recipe } from "../../lib/layouts/index.js";
+const panelToggle = recipe({
+    component: "panel-toggle",
+    element: "button",
+    slots: {
+        root: {
+            base: "panel-toggle"
+        },
+        indicator: {
+            base: "panel-toggle__indicator"
+        }
+    },
+    props: {
+        side: {
+            left: "panel-toggle--left",
+            right: "panel-toggle--right"
+        }
+    },
+    defaults: {
+        side: "right"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "panel-toggle",
+                axes: {
+                    side: {
+                        left: "panel-toggle--left",
+                        right: "panel-toggle--right"
+                    }
+                }
+            },
+            indicator: {
+                base: "panel-toggle__indicator",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 1,
+            indicator: 0
+        }
+    }
+});
+export { panelToggle };

package/dist/components/panel-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelToggleLayout as default, PanelToggleLayout as PanelToggle, type PanelToggleProps, type PanelToggleSide, } from "./PanelToggle.generated";
+export { panelToggle } from "./PanelToggle.recipe";

package/dist/components/panel-toggle/index.js

@@ -0,0 +1,2 @@
+export { PanelToggleLayout as PanelToggle, PanelToggleLayout as default } from "./PanelToggle.generated.js";
+export { panelToggle } from "./PanelToggle.recipe.js";

package/dist/components/select/Select.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Select.css";
-import { createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Select.recipe.js";
@@ -36,7 +36,8 @@ const sortOptionsByDomOrder = (options)=>[
     });
 const __solidLayoutSelectRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "placeholder", "value", "defaultValue", "selectedKeys", "defaultSelectedKeys", "onChange", "onSelectionChange", "state", "disabled", "fullWidth", "variant", "selectionMode", "placement", "autoFlip", "open", "defaultOpen", "onOpenChange", "ref");
-    const baseId = createUniqueId();
+    const generatedId = createUniqueId();
+    const baseId = p.id || generatedId;
     const triggerId = `${baseId}-trigger`;
     const listboxId = `${baseId}-listbox`;
     const selectionMode = ()=>p.selectionMode ?? "single";
@@ -47,7 +48,8 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const [internalSelectedKeys, setInternalSelectedKeys] = createSignal(initialSelected);
     const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
     const [options, setOptions] = createSignal([]);
-    const [optionTextByKey, setOptionTextByKey] = createSignal(new Map());
+    const optionTextByKey = new Map();
+    const [optionTextRevision, setOptionTextRevision] = createSignal(0);
     const [focusedKey, setFocusedKey] = createSignal();
     const [focusRequest, setFocusRequest] = createSignal(null);
     const [triggerRef, setTriggerRefSignal] = createSignal();
@@ -63,8 +65,9 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     });
     const selectedSet = createMemo(()=>new Set(selectedKeys()));
     const selectedText = createMemo(()=>{
+        optionTextRevision();
         if (!selectedKeys().length) return "";
-        return selectedKeys().map((key)=>optionTextByKey().get(key) ?? key).join("multiple" === selectionMode() ? ", " : "");
+        return selectedKeys().map((key)=>optionTextByKey.get(key) ?? key).join("multiple" === selectionMode() ? ", " : "");
     });
     const getEnabledOptions = ()=>options().filter((option)=>!option.disabled);
     const focusOption = (option)=>{
@@ -130,13 +133,17 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
             focusTrigger: true
         });
     };
+    const registerOptionText = (key, textValue)=>{
+        if (optionTextByKey.get(key) === textValue) return;
+        optionTextByKey.set(key, textValue);
+        if (untrack(selectedKeys).includes(key)) setOptionTextRevision((revision)=>revision + 1);
+    };
+    const unregisterOptionText = (key)=>{
+        if (!optionTextByKey.delete(key)) return;
+        if (untrack(selectedKeys).includes(key)) setOptionTextRevision((revision)=>revision + 1);
+    };
     const registerOption = (option)=>{
-        setOptionTextByKey((current)=>{
-            if (current.get(option.key) === option.textValue) return current;
-            const next = new Map(current);
-            next.set(option.key, option.textValue);
-            return next;
-        });
+        registerOptionText(option.key, option.textValue);
         setOptions((current)=>sortOptionsByDomOrder([
                 ...current.filter((entry)=>entry.key !== option.key),
                 option
@@ -211,6 +218,8 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
             focusNext,
             requestFocus: setFocusRequest,
             selectKey,
+            registerOptionText,
+            unregisterOptionText,
             registerOption,
             unregisterOption,
             setTriggerRef,
@@ -614,6 +623,7 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         return _el$21;
     }
     const key = ()=>String(p.value);
+    const textValue = ()=>p.textValue ?? ("string" == typeof p.children ? p.children : key());
     const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled) || ctx.disabled();
     const isSelected = ()=>ctx.isSelected(key());
     const isFocused = ()=>ctx.focusedKey() === key();
@@ -622,17 +632,21 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         optionRef = el;
         ctx.registerOption({
             key: key(),
-            textValue: p.textValue ?? ("string" == typeof p.children ? p.children : key()),
+            textValue: textValue(),
             disabled: isDisabled(),
             ref: el
         });
         if ("function" == typeof p.ref) p.ref(el);
     };
+    onSettled(()=>{
+        ctx.registerOptionText(key(), textValue());
+        return ()=>ctx.unregisterOptionText(key());
+    });
     createTrackedEffect(()=>{
         if (!optionRef) return;
         ctx.registerOption({
             key: key(),
-            textValue: p.textValue ?? ("string" == typeof p.children ? p.children : key()),
+            textValue: textValue(),
             disabled: isDisabled(),
             ref: optionRef
         });
@@ -690,83 +704,97 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         }
         if ("Tab" === event.key) ctx.setOpen(false);
     };
-    var _el$28 = _tmpl$6(), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling;
-    ref(()=>setRef, _el$28);
-    spread(_el$28, mergeProps(others, {
-        get type () {
-            return p.type ?? "button";
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.option, p.class)
-        }), {
-        get ["data-theme"] () {
-            return p.dataTheme;
-        },
-        "data-slot": "ui-select-option",
-        get ["data-selected"] () {
-            return isSelected() ? "true" : "false";
-        },
-        get ["data-focused"] () {
-            return isFocused() ? "true" : "false";
-        },
-        get ["data-disabled"] () {
-            return isDisabled() ? "true" : "false";
-        },
-        role: "option",
-        get ["aria-selected"] () {
-            return isSelected() ? "true" : "false";
-        },
-        get ["aria-disabled"] () {
-            return isDisabled() ? "true" : "false";
-        },
-        get disabled () {
-            return isDisabled();
+    const MountedOption = ()=>{
+        onCleanup(()=>{
+            optionRef = void 0;
+            ctx.unregisterOption(key());
+        });
+        var _el$28 = _tmpl$6(), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling;
+        ref(()=>setRef, _el$28);
+        spread(_el$28, mergeProps(others, {
+            get type () {
+                return p.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.option, p.class)
+            }), {
+            get ["data-theme"] () {
+                return p.dataTheme;
+            },
+            "data-slot": "ui-select-option",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-focused"] () {
+                return isFocused() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            role: "option",
+            get ["aria-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            tabindex: -1,
+            onClick: handleClick,
+            onMouseEnter: handleMouseEnter,
+            onFocus: ()=>ctx.setFocusedKey(key()),
+            onKeyDown: handleKeyDown
+        }), true);
+        insert(_el$28, (()=>{
+            var _c$9 = memo(()=>!!p.startIcon);
+            return ()=>_c$9() ? (()=>{
+                    var _el$31 = _tmpl$3();
+                    spread(_el$31, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), true);
+                    insert(_el$31, ()=>p.startIcon);
+                    return _el$31;
+                })() : null;
+        })(), _el$29);
+        spread(_el$29, mergeProps(()=>({
+                class: CLASSES.slot.optionLabel
+            }), {
+            "data-slot": "ui-select-option-label"
+        }), true);
+        insert(_el$29, ()=>p.children);
+        insert(_el$28, (()=>{
+            var _c$0 = memo(()=>!!p.endIcon);
+            return ()=>_c$0() ? (()=>{
+                    var _el$32 = _tmpl$5(), _el$33 = _el$32.firstChild;
+                    spread(_el$32, mergeProps(()=>({
+                            class: CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), true);
+                    spread(_el$33, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), true);
+                    insert(_el$33, ()=>p.endIcon);
+                    return _el$32;
+                })() : null;
+        })(), _el$30);
+        return _el$28;
+    };
+    return createComponent(Show, {
+        get when () {
+            return ctx.open();
         },
-        tabindex: -1,
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onFocus: ()=>ctx.setFocusedKey(key()),
-        onKeyDown: handleKeyDown
-    }), true);
-    insert(_el$28, (()=>{
-        var _c$9 = memo(()=>!!p.startIcon);
-        return ()=>_c$9() ? (()=>{
-                var _el$31 = _tmpl$3();
-                spread(_el$31, mergeProps(()=>({
-                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                    }), {
-                    "data-slot": "ui-select-option-start-icon"
-                }), true);
-                insert(_el$31, ()=>p.startIcon);
-                return _el$31;
-            })() : null;
-    })(), _el$29);
-    spread(_el$29, mergeProps(()=>({
-            class: CLASSES.slot.optionLabel
-        }), {
-        "data-slot": "ui-select-option-label"
-    }), true);
-    insert(_el$29, ()=>p.children);
-    insert(_el$28, (()=>{
-        var _c$0 = memo(()=>!!p.endIcon);
-        return ()=>_c$0() ? (()=>{
-                var _el$32 = _tmpl$5(), _el$33 = _el$32.firstChild;
-                spread(_el$32, mergeProps(()=>({
-                        class: CLASSES.slot.optionIndicator
-                    }), {
-                    "data-slot": "ui-select-option-indicator",
-                    "aria-hidden": "true"
-                }), true);
-                spread(_el$33, mergeProps(()=>({
-                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                    }), {
-                    "data-slot": "ui-select-option-end-icon"
-                }), true);
-                insert(_el$33, ()=>p.endIcon);
-                return _el$32;
-            })() : null;
-    })(), _el$30);
-    return _el$28;
+        get children () {
+            return createComponent(MountedOption, {});
+        }
+    });
 };
 const SelectOption = defineComponent({
     recipe: componentRecipe,

package/dist/components/slider/Slider.generated.js

@@ -21,7 +21,8 @@ const __solidLayoutSlider = (_stable, p)=>{
     const step = ()=>p.step ?? 1;
     const size = ()=>p.size ?? "md";
     const isDisabled = ()=>Boolean(p.disabled);
-    const labelId = createUniqueId();
+    const generatedLabelId = createUniqueId();
+    const labelId = ()=>p.id ? `${p.id}-label` : generatedLabelId;
     const [dragging, setDragging] = createSignal(false);
     const [focusVisible, setFocusVisible] = createSignal(false);
     const fraction = ()=>{
@@ -132,7 +133,9 @@ const __solidLayoutSlider = (_stable, p)=>{
                 (()=>{
                     var _el$2 = _tmpl$();
                     spread(_el$2, mergeProps({
-                        id: labelId
+                        get id () {
+                            return labelId();
+                        }
                     }, ()=>({
                             class: CLASSES.label
                         }), {
@@ -186,7 +189,11 @@ const __solidLayoutSlider = (_stable, p)=>{
     }), false);
     var _ref$2 = thumbRef;
     "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$6) : thumbRef = _el$6;
-    spread(_el$6, mergeProps(()=>({
+    spread(_el$6, mergeProps({
+        get id () {
+            return p.id;
+        }
+    }, ()=>({
             class: CLASSES.thumb
         }), {
         "data-slot": "slider-thumb",
@@ -224,7 +231,7 @@ const __solidLayoutSlider = (_stable, p)=>{
             return p["aria-label"] ?? p.label;
         },
         get ["aria-labelledby"] () {
-            return p.label ? labelId : void 0;
+            return p.label ? labelId() : void 0;
         },
         get ["aria-disabled"] () {
             return isDisabled() ? "true" : void 0;

package/dist/components/tabs/Tabs.css

@@ -29,12 +29,17 @@
     width: 100%;
   }
 
+  .tabs__list[data-orientation="horizontal"] .tabs__tab {
+    width: auto;
+  }
+
   .tabs__list[data-orientation="vertical"] {
     flex-direction: column;
     gap: 0.25rem;
   }
 
   .tabs__list[data-orientation="vertical"] .tabs__tab {
+    width: 100%;
     min-width: 5rem;
   }
 

package/dist/components/tabs/Tabs.generated.js

@@ -13,7 +13,8 @@ const invokeEventHandler = (handler, event)=>{
 };
 const __solidLayoutTabsRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "orientation", "variant", "selectedKey", "defaultSelectedKey", "onSelectionChange");
-    const baseId = createUniqueId();
+    const generatedId = createUniqueId();
+    const baseId = ()=>p.id || generatedId;
     const [internalSelectedKey, setInternalSelectedKey] = createSignal(p.defaultSelectedKey);
     const [tabs, setTabs] = createSignal([]);
     const isControlled = ()=>void 0 !== p.selectedKey;
@@ -34,8 +35,8 @@ const __solidLayoutTabsRoot = (_stable, p)=>{
     const unregisterTab = (key)=>{
         setTabs((prev)=>prev.filter((item)=>item.key !== key));
     };
-    const getTabId = (key)=>`${baseId}-tab-${String(key)}`;
-    const getPanelId = (key)=>`${baseId}-panel-${String(key)}`;
+    const getTabId = (key)=>`${baseId()}-tab-${String(key)}`;
+    const getPanelId = (key)=>`${baseId()}-panel-${String(key)}`;
     const classes = ()=>twMerge(CLASSES.base, "secondary" === p.variant && CLASSES.variant.secondary, p.class);
     const context = createMemo(()=>({
             orientation: p.orientation ?? "horizontal",

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export type { BreadcrumbItemProps, BreadcrumbRootProps, } from "./components/bre
 export { Breadcrumb, BreadcrumbItem, } from "./components/breadcrumb";
 export type { ButtonProps } from "./components/button";
 export { default as Button } from "./components/button";
+export { PanelToggle, type PanelToggleProps, type PanelToggleSide, } from "./components/panel-toggle";
 export { type CalendarDayHoverHandler, type CalendarDaySelectHandler, type CalendarProps, type CalendarSelectionMode, type CalendarWeekdayFormat, default as Calendar, } from "./components/calendar";
 export type { CardElevation, CardMaterial, CardProps, CardSectionProps, } from "./components/card";
 export { Card as CardRoot, CardBody, CardFooter, CardHeader, default as Card, } from "./components/card";

package/dist/index.js

@@ -13,6 +13,7 @@ export { AvatarFallback, AvatarImage, default as Avatar } from "./components/ava
 export { default as Badge } from "./components/badge/index.js";
 export { Breadcrumb, BreadcrumbItem } from "./components/breadcrumb/index.js";
 export { default as Button } from "./components/button/index.js";
+export { PanelToggle } from "./components/panel-toggle/index.js";
 export { default as Calendar } from "./components/calendar/index.js";
 export { Card as CardRoot, CardBody, CardFooter, CardHeader, default as Card } from "./components/card/index.js";
 export { default as ChatBubble } from "./components/chatbubble/index.js";

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.11.7",
+  "version": "2.11.9",
   "components": {
     "Accordion": {
       "kind": "embedded"
@@ -423,6 +423,9 @@
     "Pagination": {
       "kind": "embedded"
     },
+    "PanelToggle": {
+      "kind": "embedded"
+    },
     "PasswordField": {
       "kind": "embedded"
     },

package/dist/motion/engine.js

@@ -25,7 +25,13 @@ const runMotion = (el, from, to, transition, onComplete)=>{
     };
     if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
     applyTransform();
-    const animationTargets = Object.keys(to);
+    const valueFor = (key, state)=>{
+        if ("opacity" === key) return state.opacity ?? readOpacity(el);
+        if ("scale" === key) return state.scale ?? 1;
+        if ("x" === key) return state.x ?? 0;
+        return state.y ?? 0;
+    };
+    const animationTargets = Object.keys(to).filter((key)=>valueFor(key, from) !== valueFor(key, to));
     if (0 === animationTargets.length) {
         onComplete?.();
         return {
@@ -40,10 +46,10 @@ const runMotion = (el, from, to, transition, onComplete)=>{
     const start = ()=>{
         animationTargets.forEach((key)=>{
             if ("opacity" === key) {
-                const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
+                const fromValue = valueFor(key, from);
                 const control = driver({
                     from: fromValue,
-                    to: to.opacity ?? fromValue,
+                    to: valueFor(key, to),
                     duration,
                     ease,
                     onUpdate: (latest)=>{
@@ -54,8 +60,8 @@ const runMotion = (el, from, to, transition, onComplete)=>{
                 controls.push(control);
                 return;
             }
-            const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
-            const toValue = to[key] ?? fromValue;
+            const fromValue = valueFor(key, from);
+            const toValue = valueFor(key, to);
             const control = driver({
                 from: fromValue,
                 to: toValue,