@stratakit/structures/dist/NavigationRail.js

Medium-sized component structures for the Strata design system

import { c as _c } from "react-compiler-runtime";
import { Fragment, 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, useMergedRefs, useSafeContext, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { createStore, useStore } from "zustand";
import { combine } from "zustand/middleware";
import { useWarnOnInteractiveDescendants } from "./~hooks.js";
import { useInit } from "./~utils.useInit.js";
function createNavigationRailStore(initialState) {
  return createStore(combine(initialState, (set) => ({
    setExpanded: (expanded) => set({
      expanded
    })
  })));
}
const NavigationRailContext = React.createContext(void 0);
function NavigationRailProvider(props) {
  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) => {
  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 expanded = useNavigationRailState((state) => state.expanded);
  const setExpanded = useNavigationRailState((state_0) => state_0.setExpanded);
  return /* @__PURE__ */ jsxs(Button, {
    "aria-pressed": 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
  });
});
function createNavigationRailItemActionStore() {
  return createStore((set) => ({
    label: void 0,
    setLabel: (label) => set({
      label
    }),
    suffix: void 0,
    setSuffix: (suffix) => set({
      suffix
    })
  }));
}
const NavigationRailItemActionContext = React.createContext(void 0);
function NavigationRailItemActionProvider(props) {
  const $ = _c(3);
  const [store] = React.useState(_temp2);
  let t0;
  if ($[0] !== props.children || $[1] !== store) {
    t0 = jsx(NavigationRailItemActionContext.Provider, {
      value: store,
      children: props.children
    });
    $[0] = props.children;
    $[1] = store;
    $[2] = t0;
  } else {
    t0 = $[2];
  }
  return t0;
}
function _temp2() {
  return createNavigationRailItemActionStore();
}
function useNavigationRailItemActionState(selectorFn) {
  const store = useSafeContext(NavigationRailItemActionContext);
  return useStore(store, selectorFn);
}
const NavigationRailItemActionRoot = forwardRef((props, forwardedRef) => {
  return /* @__PURE__ */ jsx(NavigationRailItemActionProvider, {
    children: /* @__PURE__ */ jsx(NavigationRailItemActionRootInner, {
      ...props,
      ref: forwardedRef
    })
  });
});
const NavigationRailItemActionRootInner = forwardRef((props, forwardedRef) => {
  const expanded = useNavigationRailState((state) => state.expanded);
  const label = useNavigationRailItemActionState((state_0) => state_0.label);
  const suffix = useNavigationRailItemActionState((state_1) => state_1.suffix);
  const action = /* @__PURE__ */ jsx(Role, {
    ...props,
    className: cx("\u{1F95D}NavigationRailItemAction", props.className),
    ref: forwardedRef
  });
  if (expanded) return action;
  return /* @__PURE__ */ jsx(Tooltip, {
    content: /* @__PURE__ */ jsxs(Fragment, {
      children: [label, suffix]
    }),
    placement: "right",
    type: "none",
    children: action
  });
});
const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
  const {
    label,
    icon,
    suffix,
    ...rest
  } = props;
  return /* @__PURE__ */ jsxs(NavigationRailItemActionRoot, {
    ...rest,
    ref: forwardedRef,
    children: [/* @__PURE__ */ jsx(NavigationRailItemActionIcon, {
      icon
    }), /* @__PURE__ */ jsx(NavigationRailItemActionLabel, {
      children: label
    }), suffix && /* @__PURE__ */ jsx(NavigationRailItemActionSuffix, {
      children: suffix
    })]
  });
});
const NavigationRailItemActionIcon = forwardRef((props, forwardedRef) => {
  const {
    icon,
    ...rest
  } = props;
  return /* @__PURE__ */ jsx(Icon, {
    size: "large",
    href: typeof icon === "string" ? icon : void 0,
    render: React.isValidElement(icon) ? icon : void 0,
    ...rest,
    ref: forwardedRef
  });
});
const NavigationRailItemActionLabel = forwardRef((props, forwardedRef) => {
  const expanded = useNavigationRailState((state) => state.expanded);
  const setLabel = useNavigationRailItemActionState((state_0) => state_0.setLabel);
  React.useEffect(() => {
    setLabel(props.children);
  }, [props.children, setLabel]);
  return /* @__PURE__ */ jsx(Role.span, {
    ...props,
    className: cx("\u{1F95D}NavigationRailItemActionLabel", props.className),
    render: expanded ? props.render : /* @__PURE__ */ jsx(VisuallyHidden, {
      render: props.render
    }),
    ref: forwardedRef
  });
});
const NavigationRailItemActionSuffix = forwardRef((props, forwardedRef) => {
  const $ = _c(4);
  const expanded = useNavigationRailState(_temp3);
  const setSuffix = useNavigationRailItemActionState(_temp4);
  let t0;
  let t1;
  if ($[0] !== props.children || $[1] !== setSuffix) {
    t0 = () => {
      setSuffix(props.children);
    };
    t1 = [props.children, setSuffix];
    $[0] = props.children;
    $[1] = setSuffix;
    $[2] = t0;
    $[3] = t1;
  } else {
    t0 = $[2];
    t1 = $[3];
  }
  React.useEffect(t0, t1);
  const ref = React.useRef(void 0);
  return jsx(Role.span, {
    ...props,
    className: cx("\u{1F95D}NavigationRailItemActionSuffix", props.className),
    render: expanded ? props.render : jsx(VisuallyHidden, {
      render: props.render
    }),
    ref: useMergedRefs(forwardedRef, ref)
  });
});
const NavigationRailAnchor = forwardRef((props, forwardedRef) => {
  const {
    label,
    icon,
    suffix,
    active,
    ...rest
  } = props;
  return /* @__PURE__ */ jsx(NavigationRailItemAction, {
    label,
    icon,
    suffix,
    "aria-current": active ? "true" : void 0,
    render: /* @__PURE__ */ jsx(Role.a, {
      ...rest,
      ref: forwardedRef
    })
  });
});
const NavigationRailButton = forwardRef((props, forwardedRef) => {
  const {
    label,
    icon,
    suffix,
    ...rest
  } = props;
  return /* @__PURE__ */ jsx(NavigationRailItemAction, {
    label,
    icon,
    suffix,
    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
  });
});
function _temp3(state) {
  return state.expanded;
}
function _temp4(state_0) {
  return state_0.setSuffix;
}
export {
  NavigationRailAnchor as Anchor,
  NavigationRailButton as Button,
  NavigationRailContent as Content,
  NavigationRailFooter as Footer,
  NavigationRailHeader as Header,
  NavigationRailList as List,
  NavigationRailListItem as ListItem,
  NavigationRailRoot as Root,
  NavigationRailToggleButton as ToggleButton
};