@stratakit/structures/dist/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
    }))
  });
});
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
  });
});
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
    })]
  });
});
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
          })
        })
      })]
    })
  });
});
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"
    })]
  });
});
export {
  NavigationListAnchor as Anchor,
  NavigationListRoot as Root,
  NavigationListSubgroup as Subgroup
};