@stratakit/structures/dist/DEV/NavigationList.js

Medium-sized component structures for the Strata design system

import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Button as AriaButton } from "@ariakit/react/button";
import * as AriaDisclosure from "@ariakit/react/disclosure";
import { Focusable } from "@ariakit/react/focusable";
import { Role } from "@ariakit/react/role";
import { Text } from "@stratakit/bricks";
import { Icon } from "@stratakit/foundations";
import { forwardRef } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { ChevronDown } from "./~utils.icons.js";
import { useInit } from "./~utils.useInit.js";
const NavigationListRoot = forwardRef(
  (props, forwardedRef) => {
    useInit();
    const { items, role = "list", ...rest } = props;
    const itemRole = role === "list" ? "listitem" : void 0;
    const { indented } = React.useContext(NavigationListRootContext);
    return /* @__PURE__ */ jsx(
      Role,
      {
        ...rest,
        role,
        className: cx("\u{1F95D}NavigationListRoot", props.className),
        "data-_sk-indented": indented ? "true" : void 0,
        ref: forwardedRef,
        children: React.Children.map(items, (item) => /* @__PURE__ */ jsx(
          Role,
          {
            role: itemRole,
            className: "\u{1F95D}NavigationListItem",
            "data-_sk-indented": indented ? "true" : void 0,
            children: item
          }
        ))
      }
    );
  }
);
DEV: NavigationListRoot.displayName = "NavigationList.Root";
const NavigationListRootContext = React.createContext({
  indented: false
});
const NavigationListItemAction = forwardRef((props, forwardedRef) => {
  return /* @__PURE__ */ jsx(
    Focusable,
    {
      accessibleWhenDisabled: true,
      ...props,
      className: cx("\u{1F95D}NavigationListItemAction", props.className),
      ref: forwardedRef
    }
  );
});
DEV: NavigationListItemAction.displayName = "NavigationListItemAction";
const NavigationListAnchor = forwardRef(
  (props, forwardedRef) => {
    const { active, label, icon, ...rest } = props;
    return /* @__PURE__ */ jsxs(
      NavigationListItemAction,
      {
        ...rest,
        render: /* @__PURE__ */ jsx(
          Role.a,
          {
            "aria-current": active ? "true" : void 0,
            render: props.render
          }
        ),
        ref: forwardedRef,
        children: [
          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
          /* @__PURE__ */ jsx(Text, { variant: "body-sm", render: /* @__PURE__ */ jsx("span", {}), children: label })
        ]
      }
    );
  }
);
DEV: NavigationListAnchor.displayName = "NavigationList.Anchor";
const NavigationListSubgroup = forwardRef(
  (props, forwardedRef) => {
    const { label, icon, items, defaultOpen, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Role,
      {
        ...rest,
        className: cx("\u{1F95D}NavigationListSubgroup", props.className),
        ref: forwardedRef,
        children: /* @__PURE__ */ jsxs(AriaDisclosure.DisclosureProvider, { defaultOpen, children: [
          /* @__PURE__ */ jsx(
            AriaDisclosure.Disclosure,
            {
              render: /* @__PURE__ */ jsx(NavigationListSubgroupButton, { label, icon })
            }
          ),
          /* @__PURE__ */ jsx(NavigationListRootContext.Provider, { value: { indented: true }, children: /* @__PURE__ */ jsx(
            AriaDisclosure.DisclosureContent,
            {
              render: /* @__PURE__ */ jsx(NavigationListRoot, { items })
            }
          ) })
        ] })
      }
    );
  }
);
DEV: NavigationListSubgroup.displayName = "NavigationList.Subgroup";
const NavigationListSubgroupButton = forwardRef((props, forwardedRef) => {
  const { label, icon, ...rest } = props;
  return /* @__PURE__ */ jsxs(
    NavigationListItemAction,
    {
      render: /* @__PURE__ */ jsx(AriaButton, {}),
      ...rest,
      className: cx("\u{1F95D}NavigationListSubgroupButton", props.className),
      ref: forwardedRef,
      children: [
        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
        /* @__PURE__ */ jsx(Text, { variant: "body-sm", render: /* @__PURE__ */ jsx("span", {}), children: label }),
        /* @__PURE__ */ jsx(ChevronDown, { className: "\u{1F95D}NavigationListSubgroupChevron" })
      ]
    }
  );
});
DEV: NavigationListSubgroupButton.displayName = "NavigationListSubgroupButton";
export {
  NavigationListAnchor as Anchor,
  NavigationListRoot as Root,
  NavigationListSubgroup as Subgroup
};