@crossed/demo/lib/module/primitive/createDropdown/simple.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { merge } from "@crossed/styled";
import { createDropdown, useDropdownContext } from "@crossed/primitive";
import { UilAngleDown, YBox } from "@crossed/ui";
import {
  forwardRef
} from "react";
import { PortalProvider, Portal } from "@gorhom/portal";
import { composeRefs, createScope } from "@crossed/core";
import {
  autoUpdate,
  flip,
  offset,
  shift,
  useClick,
  useDismiss,
  useFloating,
  useInteractions,
  useRole
} from "@floating-ui/react";
const [FloatingProvider, useFloatingProvider] = createScope(
  {}
);
const Dropdown = createDropdown({
  Root: (props) => {
    const { open, setOpen } = useDropdownContext();
    const floating = useFloating({
      open,
      onOpenChange: setOpen,
      middleware: [offset(10), flip(), shift()],
      whileElementsMounted: autoUpdate
    });
    const { context } = floating;
    const click = useClick(context);
    const dismiss = useDismiss(context);
    const role = useRole(context);
    const interactions = useInteractions([click, dismiss, role]);
    return /* @__PURE__ */ jsx(FloatingProvider, { ...floating, ...interactions, children: /* @__PURE__ */ jsx(PortalProvider, { children: /* @__PURE__ */ jsx("div", { ...props, className: merge(props.className, "flex flex-col") }) }) });
  },
  Trigger: forwardRef((props, ref) => {
    const { getReferenceProps, refs } = useFloatingProvider();
    return /* @__PURE__ */ jsx(
      "button",
      {
        ...getReferenceProps(),
        ...props,
        ref: composeRefs(refs.setReference, ref),
        className: merge(
          "flex flex-col p-2 border border-neutral-800 rounded-md",
          props.className
        )
      }
    );
  }),
  Portal: ({ children }) => {
    const context = useFloatingProvider();
    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(FloatingProvider, { ...context, children }) });
  },
  Content: (props) => {
    const { refs, floatingStyles, getFloatingProps } = useFloatingProvider();
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref: refs.setFloating,
        ...getFloatingProps(),
        ...props,
        style: { ...props.style, ...floatingStyles, zIndex: 30 },
        className: merge(
          "flex flex-col p-2 border bg-neutral-900 border-neutral-800 rounded-md w-auto",
          props.className
        )
      }
    );
  },
  Item: forwardRef((props, ref) => {
    return /* @__PURE__ */ jsx(
      "button",
      {
        ...props,
        ref,
        className: "text-left rounded px-2 py-1 hover:bg-neutral-800"
      }
    );
  }),
  Label: forwardRef((props, ref) => {
    return /* @__PURE__ */ jsx("div", { ...props, ref, className: "text-neutral-500 px-2 py-1" });
  }),
  Divider: forwardRef((props, ref) => {
    return /* @__PURE__ */ jsx("div", { ...props, ref, className: "border-t border-neutral-800 my-1" });
  })
});
const CreateDropdownSimpleDemo = () => {
  return /* @__PURE__ */ jsx(YBox, { space: "md", children: /* @__PURE__ */ jsxs(Dropdown, { children: [
    /* @__PURE__ */ jsxs(
      Dropdown.Trigger,
      {
        "aria-label": "Click for toggle nav",
        className: "flex flex-row gap-2 items-center",
        children: [
          "Hello",
          /* @__PURE__ */ jsx(UilAngleDown, {})
        ]
      }
    ),
    /* @__PURE__ */ jsx(Dropdown.Portal, { children: /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
      /* @__PURE__ */ jsx(Dropdown.Label, { children: "Application" }),
      /* @__PURE__ */ jsx(Dropdown.Item, { "aria-label": "Settings", children: "Settings" }),
      /* @__PURE__ */ jsx(Dropdown.Item, { "aria-label": "Settings", children: "Messages" }),
      /* @__PURE__ */ jsx(Dropdown.Item, { "aria-label": "Settings", children: "Gallery" }),
      /* @__PURE__ */ jsx(Dropdown.Divider, {}),
      /* @__PURE__ */ jsx(Dropdown.Label, { children: "Danger zone" }),
      /* @__PURE__ */ jsx(Dropdown.Item, { "aria-label": "Transfer my data", children: "Transfer my data" }),
      /* @__PURE__ */ jsx(Dropdown.Item, { "aria-label": "Delete my account", children: "Delete my account" }),
      /* @__PURE__ */ jsx(Dropdown.Item, { disabled: true, "aria-label": "Settings", children: "Users (not right)" })
    ] }) })
  ] }) });
};
export {
  CreateDropdownSimpleDemo
};
//# sourceMappingURL=simple.js.map