@stratakit/structures 0.4.5 → 0.5.1

package/dist/NavigationRail.js

@@ -1,218 +1,241 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "@ariakit/react/button";
 import { Role } from "@ariakit/react/role";
 import { Tooltip, VisuallyHidden } from "@stratakit/bricks";
 import { Icon } from "@stratakit/foundations";
-import {
-  forwardRef,
-  useEventHandlers,
-  useSafeContext,
-  useUnreactiveCallback
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useEventHandlers, useSafeContext, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
+import { useInit } from "./~utils.useInit.js";
 function createNavigationRailStore(initialState) {
-  return createStore(
-    combine(initialState, (set) => ({
-      setExpanded: (expanded) => set({ expanded })
-    }))
-  );
+  return createStore(combine(initialState, (set) => ({
+    setExpanded: (expanded) => set({
+      expanded
+    })
+  })));
 }
 const NavigationRailContext = React.createContext(void 0);
 function NavigationRailProvider(props) {
-  const { defaultExpanded, expanded, setExpanded: setExpandedProp } = props;
-  const [store] = React.useState(
-    () => createNavigationRailStore({ expanded: expanded ?? defaultExpanded })
-  );
-  const setExpanded = useUnreactiveCallback(setExpandedProp ?? (() => {
-  }));
-  React.useEffect(
-    function synchronizeWithProps() {
-      if (expanded === void 0) return;
-      store.setState({ expanded, setExpanded });
-    },
-    [store, expanded, setExpanded]
-  );
-  return /* @__PURE__ */ jsx(NavigationRailContext.Provider, { value: store, children: props.children });
+  const $ = _c(11);
+  const {
+    defaultExpanded,
+    expanded,
+    setExpanded: setExpandedProp
+  } = props;
+  let t0;
+  if ($[0] !== defaultExpanded || $[1] !== expanded) {
+    t0 = () => createNavigationRailStore({
+      expanded: expanded ?? defaultExpanded
+    });
+    $[0] = defaultExpanded;
+    $[1] = expanded;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const [store] = React.useState(t0);
+  const setExpanded = useUnreactiveCallback(setExpandedProp ?? _temp);
+  let t1;
+  let t2;
+  if ($[3] !== expanded || $[4] !== setExpanded || $[5] !== store) {
+    t1 = function synchronizeWithProps() {
+      if (expanded === void 0) {
+        return;
+      }
+      store.setState({
+        expanded,
+        setExpanded
+      });
+    };
+    t2 = [store, expanded, setExpanded];
+    $[3] = expanded;
+    $[4] = setExpanded;
+    $[5] = store;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  React.useEffect(t1, t2);
+  let t3;
+  if ($[8] !== props.children || $[9] !== store) {
+    t3 = jsx(NavigationRailContext.Provider, {
+      value: store,
+      children: props.children
+    });
+    $[8] = props.children;
+    $[9] = store;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}
+function _temp() {
 }
 function useNavigationRailState(selectorFn) {
   const store = useSafeContext(NavigationRailContext);
   return useStore(store, selectorFn);
 }
-const NavigationRailRoot = forwardRef(
-  (props, forwardedRef) => {
-    const { defaultExpanded = false, expanded, setExpanded, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      NavigationRailProvider,
-      {
-        defaultExpanded,
-        expanded,
-        setExpanded,
-        children: /* @__PURE__ */ jsx(NavigationRailRootInner, { ...rest, ref: forwardedRef })
-      }
-    );
-  }
-);
-const NavigationRailRootInner = forwardRef(
-  (props, forwardedRef) => {
-    const expanded = useNavigationRailState((state) => state.expanded);
-    return /* @__PURE__ */ jsx(
-      Role.nav,
-      {
-        ...props,
-        className: cx("\u{1F95D}NavigationRail", props.className),
-        "data-_sk-expanded": expanded ? "true" : void 0,
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailHeader = forwardRef(
-  (props, forwardedRef) => {
-    const expanded = useNavigationRailState((state) => state.expanded);
-    return /* @__PURE__ */ jsx(
-      Role.header,
-      {
-        ...props,
-        className: cx("\u{1F95D}NavigationRailHeader", props.className),
-        "data-_sk-expanded": expanded ? "true" : void 0,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+const NavigationRailRoot = forwardRef((props, forwardedRef) => {
+  useInit();
+  const {
+    defaultExpanded = false,
+    expanded,
+    setExpanded,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(NavigationRailProvider, {
+    defaultExpanded,
+    expanded,
+    setExpanded,
+    children: /* @__PURE__ */ jsx(NavigationRailRootInner, {
+      ...rest,
+      ref: forwardedRef
+    })
+  });
+});
+const NavigationRailRootInner = forwardRef((props, forwardedRef) => {
+  const expanded = useNavigationRailState((state) => state.expanded);
+  return /* @__PURE__ */ jsx(Role.nav, {
+    ...props,
+    className: cx("\u{1F95D}NavigationRail", props.className),
+    "data-_sk-expanded": expanded ? "true" : void 0,
+    ref: forwardedRef
+  });
+});
+const NavigationRailHeader = forwardRef((props, forwardedRef) => {
+  const expanded = useNavigationRailState((state) => state.expanded);
+  return /* @__PURE__ */ jsx(Role.header, {
+    ...props,
+    className: cx("\u{1F95D}NavigationRailHeader", props.className),
+    "data-_sk-expanded": expanded ? "true" : void 0,
+    ref: forwardedRef
+  });
+});
 const NavigationRailToggleButton = forwardRef((props, forwardedRef) => {
-  const { label = "Expand navigation", ...rest } = props;
+  const {
+    label = "Expand navigation",
+    ...rest
+  } = props;
   const expanded = useNavigationRailState((state) => state.expanded);
-  const setExpanded = useNavigationRailState((state) => state.setExpanded);
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      "aria-expanded": expanded ? "true" : "false",
-      ...rest,
-      className: cx("\u{1F95D}NavigationRailToggleButton", props.className),
-      ref: forwardedRef,
-      onClick: useEventHandlers(props.onClick, () => setExpanded(!expanded)),
-      children: [
-        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M5.405 2.845a.75.75 0 1 0-1.06 1.06L6.439 6 4.345 8.095a.75.75 0 0 0 1.06 1.06L8.03 6.53a.75.75 0 0 0 0-1.06L5.405 2.845Z"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
-      ]
-    }
-  );
+  const setExpanded = useNavigationRailState((state_0) => state_0.setExpanded);
+  return /* @__PURE__ */ jsxs(Button, {
+    "aria-expanded": expanded ? "true" : "false",
+    ...rest,
+    className: cx("\u{1F95D}NavigationRailToggleButton", props.className),
+    ref: forwardedRef,
+    onClick: useEventHandlers(props.onClick, () => setExpanded(!expanded)),
+    children: [/* @__PURE__ */ jsx("svg", {
+      width: "12",
+      height: "12",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", {
+        fill: "currentColor",
+        d: "M5.405 2.845a.75.75 0 1 0-1.06 1.06L6.439 6 4.345 8.095a.75.75 0 0 0 1.06 1.06L8.03 6.53a.75.75 0 0 0 0-1.06L5.405 2.845Z"
+      })
+    }), /* @__PURE__ */ jsx(VisuallyHidden, {
+      children: label
+    })]
+  });
+});
+const NavigationRailContent = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role.div, {
+    ...props,
+    className: cx("\u{1F95D}NavigationRailContent", props.className),
+    ref: forwardedRef
+  });
+});
+const NavigationRailList = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    role: "list",
+    ...props,
+    className: cx("\u{1F95D}NavigationRailList", props.className),
+    ref: forwardedRef
+  });
+});
+const NavigationRailListItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role.div, {
+    role: "listitem",
+    ...props,
+    className: cx("\u{1F95D}NavigationRailListItem", props.className),
+    ref: forwardedRef
+  });
 });
-const NavigationRailContent = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        ...props,
-        className: cx("\u{1F95D}NavigationRailContent", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailList = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        role: "list",
-        ...props,
-        className: cx("\u{1F95D}NavigationRailList", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailListItem = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        role: "listitem",
-        ...props,
-        className: cx("\u{1F95D}NavigationRailListItem", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
 const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
   const expanded = useNavigationRailState((state) => state.expanded);
-  const { label, icon, ...rest } = props;
-  const action = /* @__PURE__ */ jsxs(
-    Role,
-    {
-      ...rest,
-      className: cx("\u{1F95D}NavigationRailItemAction", props.className),
-      ref: forwardedRef,
-      children: [
-        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-        /* @__PURE__ */ jsx(
-          Role.span,
-          {
-            className: "\u{1F95D}NavigationRailItemActionLabel",
-            render: !expanded ? /* @__PURE__ */ jsx(VisuallyHidden, {}) : void 0,
-            children: label
-          }
-        )
-      ]
-    }
-  );
+  const {
+    label,
+    icon,
+    ...rest
+  } = props;
+  const action = /* @__PURE__ */ jsxs(Role, {
+    ...rest,
+    className: cx("\u{1F95D}NavigationRailItemAction", props.className),
+    ref: forwardedRef,
+    children: [typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+      href: icon
+    }) : icon, /* @__PURE__ */ jsx(Role.span, {
+      className: "\u{1F95D}NavigationRailItemActionLabel",
+      render: !expanded ? /* @__PURE__ */ jsx(VisuallyHidden, {}) : void 0,
+      children: label
+    })]
+  });
   if (!expanded) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: label, placement: "right", type: "none", children: action });
+    return /* @__PURE__ */ jsx(Tooltip, {
+      content: label,
+      placement: "right",
+      type: "none",
+      children: action
+    });
   }
   return action;
 });
-const NavigationRailAnchor = forwardRef(
-  (props, forwardedRef) => {
-    const { label, icon, active, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      NavigationRailItemAction,
-      {
-        label,
-        icon,
-        "aria-current": active ? "page" : void 0,
-        render: /* @__PURE__ */ jsx(Role.a, { ...rest, ref: forwardedRef })
-      }
-    );
-  }
-);
-const NavigationRailButton = forwardRef(
-  (props, forwardedRef) => {
-    const { label, icon, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      NavigationRailItemAction,
-      {
-        label,
-        icon,
-        render: /* @__PURE__ */ jsx(Role.button, { ...rest, ref: forwardedRef })
-      }
-    );
-  }
-);
-const NavigationRailFooter = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        render: /* @__PURE__ */ jsx("footer", {}),
-        ...props,
-        className: cx("\u{1F95D}NavigationRailFooter", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
+const NavigationRailAnchor = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    active,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(NavigationRailItemAction, {
+    label,
+    icon,
+    "aria-current": active ? "true" : void 0,
+    render: /* @__PURE__ */ jsx(Role.a, {
+      ...rest,
+      ref: forwardedRef
+    })
+  });
+});
+const NavigationRailButton = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(NavigationRailItemAction, {
+    label,
+    icon,
+    render: /* @__PURE__ */ jsx(Role.button, {
+      ...rest,
+      ref: forwardedRef
+    })
+  });
+});
+const NavigationRailFooter = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    render: /* @__PURE__ */ jsx("footer", {}),
+    ...props,
+    className: cx("\u{1F95D}NavigationRailFooter", props.className),
+    ref: forwardedRef
+  });
+});
 export {
   NavigationRailAnchor as Anchor,
   NavigationRailButton as Button,

package/dist/Popover.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as AkPopover from "@ariakit/react/popover";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface PopoverProviderProps extends Pick<AkPopover.PopoverProviderProps, "children" | "open" | "setOpen" | "placement"> {
+}
+interface PopoverRootProps extends BaseProps, Pick<AkPopover.PopoverProps, "unmountOnHide"> {
+}
+interface PopoverProps extends Omit<BaseProps, "content">, Pick<PopoverProviderProps, "open" | "setOpen" | "placement">, Pick<PopoverRootProps, "unmountOnHide"> {
+    /**
+     * The element that will trigger the popover when clicked.
+     * Common examples include buttons, links, or form controls.
+     *
+     * **Note**: The trigger must be a single interactive element. Do not add a
+     * popover to a non-interactive static element (such as a `<div>` or `<svg>`). Also,
+     * the trigger element must forward its ref and spread its props.
+     */
+    children: React.ReactElement;
+    /**
+     * The content to be displayed inside the popover when the trigger element is hovered or focused.
+     */
+    content: React.ReactNode;
+}
+/**
+ * A component used to display content in a non-modal window overlay that is placed relative to a trigger element.
+ *
+ * Example:
+ * ```tsx
+ * <Popover
+ *   content={<>Content</>}
+ * >
+ *   <Button>Open</Button>
+ * </Popover>
+ * ```
+ */
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+export default Popover;

package/dist/Popover.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AkPopover from "@ariakit/react/popover";
+import { PortalContext } from "@ariakit/react/portal";
+import { useStoreState } from "@ariakit/react/store";
+import { Button } from "@stratakit/bricks";
+import { forwardRef, usePopoverApi } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
+function PopoverProvider(props) {
+  const {
+    children,
+    open,
+    setOpen,
+    placement = "bottom-start"
+  } = props;
+  return /* @__PURE__ */ jsx(AkPopover.PopoverProvider, {
+    open,
+    setOpen,
+    placement,
+    children
+  });
+}
+const PopoverDisclosure = forwardRef((props, forwardedRef) => {
+  const store = AkPopover.usePopoverContext();
+  const open = useStoreState(store, "open");
+  const defaultId = React.useId();
+  return /* @__PURE__ */ jsx(AkPopover.PopoverDisclosure, {
+    id: defaultId,
+    render: /* @__PURE__ */ jsx(Button, {}),
+    ...props,
+    "data-has-popover-open": open || void 0,
+    ref: forwardedRef
+  });
+});
+const PopoverRoot = forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    unmountOnHide,
+    ...rest
+  } = props;
+  const store = AkPopover.usePopoverContext();
+  const popoverElement = useStoreState(store, "popoverElement");
+  const open = useStoreState(store, "open");
+  const popoverProps = usePopoverApi({
+    element: popoverElement,
+    open
+  });
+  const contentElement = useStoreState(store, "contentElement");
+  const triggerId = useStoreState(store, (state) => state?.disclosureElement?.id);
+  const labelledBy = props["aria-label"] ? void 0 : triggerId;
+  return /* @__PURE__ */ jsx(AkPopover.Popover, {
+    "aria-labelledby": labelledBy,
+    portal: true,
+    unmountOnHide,
+    ...rest,
+    gutter: 8,
+    style: {
+      ...popoverProps.style,
+      ...props.style
+    },
+    wrapperProps: {
+      popover: popoverProps.popover
+    },
+    className: cx("\u{1F95D}Popover", props.className),
+    ref: forwardedRef,
+    children: /* @__PURE__ */ jsx(PortalContext.Provider, {
+      value: contentElement ?? null,
+      children
+    })
+  });
+});
+const Popover = forwardRef((props, forwardedRef) => {
+  useInit();
+  const {
+    children,
+    content,
+    open,
+    setOpen,
+    placement,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(PopoverProvider, {
+    open,
+    setOpen,
+    placement,
+    children: [/* @__PURE__ */ jsx(PopoverDisclosure, {
+      render: children
+    }), /* @__PURE__ */ jsx(PopoverRoot, {
+      ...rest,
+      ref: forwardedRef,
+      children: content
+    })]
+  });
+});
+var Popover_default = Popover;
+export {
+  Popover_default as default
+};