@ariakit/solid-components 0.1.0

package/src/as/as.tsx

@@ -0,0 +1,62 @@
+import { mergeProps } from "@ariakit/solid-utils";
+import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+type AsElements = {
+  [K in keyof JSX.IntrinsicElements]: Component<ComponentProps<K>>;
+};
+
+type AsComponent = <T extends Component<any>, P = ComponentProps<T>>(
+  props: AsProps<T, P>,
+) => JSX.Element;
+
+const cache = new Map<string, Component<any>>();
+
+/**
+ * Allows a component to be rendered as a different HTML element or Solid
+ * component. Must be passed to the `render` prop of a component that
+ * supports it.
+ *
+ * To render as an HTML element, use `<As.element />` (e.g. `<As.button />`).
+ *
+ * To render as a component, use `<As component={Component} />` (e.g. `<As
+ * component={MyButton} />`).
+ *
+ * Check out the [Composition](https://solid.ariakit.com/guide/composition)
+ * guide for more details.
+ * @example
+ * ```jsx
+ * <Role render={<As component={MyButton} variant="primary" />} />
+ * <Role render={<As.button type="button" />} />
+ * ```
+ */
+export const As = new Proxy(
+  function As(props: any) {
+    return ((parentProps: unknown) => (
+      // TODO: replace with LazyDynamic
+      <Dynamic
+        {...mergeProps(parentProps, props)}
+        component={props.component}
+      />
+    )) as unknown as JSX.Element;
+  } as AsComponent & AsElements,
+  {
+    get: (_, key: keyof JSX.IntrinsicElements) => {
+      let component = cache.get(key);
+      if (!component) {
+        component = function AsElement(props: any): JSX.Element {
+          return ((parentProps: unknown) => (
+            // TODO: replace with LazyDynamic
+            <Dynamic {...mergeProps(parentProps, props)} component={key} />
+          )) as unknown as JSX.Element;
+        };
+        cache.set(key, component);
+      }
+      return component;
+    },
+  },
+);
+
+export type AsProps<T extends ValidComponent, P = ComponentProps<T>> = {
+  [K in keyof P]: P[K];
+} & { component: T };

package/src/focus-trap/focus-trap-region.tsx

@@ -0,0 +1,108 @@
+import {
+  createRef,
+  mergeProps,
+  createHook,
+  createInstance,
+  withOptions,
+  wrapInstance,
+} from "@ariakit/solid-utils";
+import type { Options, Props } from "@ariakit/solid-utils";
+import { getAllTabbableIn } from "@ariakit/utils";
+import type { ValidComponent } from "solid-js";
+import { Show } from "solid-js";
+import { FocusTrap } from "./focus-trap.tsx";
+
+const TagName = "div" satisfies ValidComponent;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://solid.ariakit.com/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+export const useFocusTrapRegion = createHook<TagName, FocusTrapRegionOptions>(
+  withOptions({ enabled: false }, function useFocusTrapRegion(props, options) {
+    const ref = createRef<HTMLType>();
+
+    props = wrapInstance(props, (wrapperProps) => {
+      const renderFocusTrap = () => {
+        return (
+          <Show when={options.enabled}>
+            <FocusTrap
+              onFocus={(event) => {
+                // TODO: (react) opportunity to extract into @ariakit/components?
+                const container = ref.current;
+                if (!container) return;
+                const tabbables = getAllTabbableIn(container, true);
+                const first = tabbables[0];
+                const last = tabbables[tabbables.length - 1];
+                // Fallbacks to the container element
+                if (!tabbables.length) {
+                  container.focus();
+                  return;
+                }
+                if (event.relatedTarget === first) {
+                  last?.focus();
+                } else {
+                  first?.focus();
+                }
+              }}
+            />
+          </Show>
+        );
+      };
+      return (
+        <>
+          {renderFocusTrap()}
+          {wrapperProps.children}
+          {renderFocusTrap()}
+        </>
+      );
+    });
+
+    props = mergeProps({ ref: ref.set }, props);
+
+    return props;
+  }),
+);
+
+/**
+ * Renders a wrapper element that traps the focus inside it when the
+ * [`enabled`](https://solid.ariakit.com/reference/focus-trap-region#enabled)
+ * prop is `true`.
+ * @see https://solid.ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrapRegion>
+ *  <Button>click me</Button>
+ *  <Button>trap focus</Button>
+ *  <Button disabled>disabled Button</Button>
+ * </FocusTrapRegion>
+ * ```
+ */
+export const FocusTrapRegion = function FocusTrapRegion(
+  props: FocusTrapRegionProps,
+) {
+  const htmlProps = useFocusTrapRegion(props);
+  return createInstance(TagName, htmlProps);
+};
+
+export interface FocusTrapRegionOptions<
+  _T extends ValidComponent = TagName,
+> extends Options {
+  /**
+   * If true, it will trap the focus in the region.
+   * @default false
+   */
+  enabled?: boolean;
+}
+
+export type FocusTrapRegionProps<T extends ValidComponent = TagName> = Props<
+  T,
+  FocusTrapRegionOptions<T>
+>;

package/src/focus-trap/focus-trap.tsx

@@ -0,0 +1,61 @@
+import { mergeProps, createHook, createInstance } from "@ariakit/solid-utils";
+import type { Props } from "@ariakit/solid-utils";
+import type { ValidComponent } from "solid-js";
+import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.tsx";
+import { useVisuallyHidden } from "../visually-hidden/visually-hidden.tsx";
+
+const TagName = "span" satisfies ValidComponent;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `FocusTrap` component.
+ * @see https://solid.ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * const props = useFocusTrap();
+ * <Role {...props} />
+ * ```
+ */
+export const useFocusTrap = createHook<TagName, FocusTrapOptions>(
+  function useFocusTrap(props) {
+    props = mergeProps(
+      {
+        "data-focus-trap": "",
+        tabIndex: 0,
+        "aria-hidden": true,
+        style: {
+          // Prevents unintended scroll jumps.
+          position: "fixed",
+          top: 0,
+          left: 0,
+        },
+      },
+      props,
+    );
+
+    props = useVisuallyHidden(props);
+
+    return props;
+  },
+);
+
+/**
+ * Renders a focus trap element.
+ * @see https://solid.ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrap onFocus={focusSomethingElse} />
+ * ```
+ */
+export function FocusTrap(props: FocusTrapProps) {
+  const htmlProps = useFocusTrap(props);
+  return createInstance(TagName, htmlProps);
+}
+
+export type FocusTrapOptions<T extends ValidComponent = TagName> =
+  VisuallyHiddenOptions<T>;
+
+export type FocusTrapProps<T extends ValidComponent = TagName> = Props<
+  T,
+  FocusTrapOptions<T>
+>;

package/src/group/group-label-context.tsx

@@ -0,0 +1,4 @@
+import type { Setter } from "solid-js";
+import { createContext } from "solid-js";
+
+export const GroupLabelContext = createContext<Setter<string | undefined>>();

package/src/group/group-label.tsx

@@ -0,0 +1,76 @@
+import {
+  createId,
+  mergeProps,
+  stableAccessor,
+  createHook,
+  createInstance,
+} from "@ariakit/solid-utils";
+import type { Options, Props } from "@ariakit/solid-utils";
+import type { ValidComponent } from "solid-js";
+import { createEffect, onCleanup, useContext } from "solid-js";
+import { GroupLabelContext } from "./group-label-context.tsx";
+
+const TagName = "div" satisfies ValidComponent;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `GroupLabel` component. This hook must be used in a
+ * component that's wrapped with `Group` so the `aria-labelledby` prop is
+ * properly set on the group element.
+ * @see https://solid.ariakit.com/components/group
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Group
+ * const props = useGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export const useGroupLabel = createHook<TagName, GroupLabelOptions>(
+  function useGroupLabel(props) {
+    const setLabelId = useContext(GroupLabelContext);
+    const id = createId(stableAccessor(props, (p) => p.id));
+
+    createEffect(() => {
+      setLabelId?.(id());
+      onCleanup(() => setLabelId?.(undefined));
+    });
+
+    props = mergeProps(
+      {
+        get id() {
+          return id();
+        },
+        "aria-hidden": true,
+      },
+      props,
+    );
+
+    return props;
+  },
+);
+
+/**
+ * Renders a label in a group. This component should be wrapped with a
+ * [`Group`](https://solid.ariakit.com/reference/group) so the `aria-labelledby`
+ * prop is correctly set on the group element.
+ * @see https://solid.ariakit.com/components/group
+ * @example
+ * ```jsx
+ * <Group>
+ *   <GroupLabel>Label</GroupLabel>
+ * </Group>
+ * ```
+ */
+export const GroupLabel = function GroupLabel(props: GroupLabelProps) {
+  const htmlProps = useGroupLabel(props);
+  return createInstance(TagName, htmlProps);
+};
+
+export interface GroupLabelOptions<
+  _T extends ValidComponent = TagName,
+> extends Options {}
+
+export type GroupLabelProps<T extends ValidComponent = TagName> = Props<
+  T,
+  GroupLabelOptions<T>
+>;

package/src/group/group.tsx

@@ -0,0 +1,68 @@
+import {
+  mergeProps,
+  createHook,
+  createInstance,
+  wrapInstance,
+} from "@ariakit/solid-utils";
+import type { Options, Props } from "@ariakit/solid-utils";
+import type { ValidComponent } from "solid-js";
+import { createSignal } from "solid-js";
+import { As } from "../as/as.tsx";
+import { GroupLabelContext } from "./group-label-context.tsx";
+
+const TagName = "div" satisfies ValidComponent;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `Group` component.
+ * @see https://solid.ariakit.com/components/group
+ * @example
+ * ```jsx
+ * const props = useGroup();
+ * <Role {...props}>Group</Role>
+ * ```
+ */
+export const useGroup = createHook<TagName, GroupOptions>(
+  function useGroup(props) {
+    const [labelId, setLabelId] = createSignal<string>();
+
+    props = wrapInstance(
+      props,
+      <As component={GroupLabelContext.Provider} value={setLabelId} />,
+    );
+
+    props = mergeProps(
+      {
+        role: "group" as const,
+        get "aria-labelledby"() {
+          return labelId();
+        },
+      },
+      props,
+    );
+
+    return props;
+  },
+);
+
+/**
+ * Renders a group element. Optionally, a
+ * [`GroupLabel`](https://solid.ariakit.com/reference/group-label) can be rendered as
+ * a child to provide a label for the group.
+ * @see https://solid.ariakit.com/components/group
+ * @example
+ * ```jsx
+ * <Group>Group</Group>
+ * ```
+ */
+export const Group = function Group(props: GroupProps) {
+  const htmlProps = useGroup(props);
+  return createInstance(TagName, htmlProps);
+};
+
+export type GroupOptions<_T extends ValidComponent = TagName> = Options;
+
+export type GroupProps<T extends ValidComponent = TagName> = Props<
+  T,
+  GroupOptions<T>
+>;

package/src/heading/heading-context.tsx

@@ -0,0 +1,5 @@
+import type { Accessor } from "solid-js";
+import { createContext } from "solid-js";
+import type { HeadingLevels } from "./utils.ts";
+
+export const HeadingContext = createContext<Accessor<HeadingLevels>>();

package/src/heading/heading-level.tsx

@@ -0,0 +1,43 @@
+import type { JSX } from "solid-js";
+import { useContext } from "solid-js";
+import { HeadingContext } from "./heading-context.tsx";
+import type { HeadingLevels } from "./utils.ts";
+
+/**
+ * A component that sets the heading level for its children. It doesn't render
+ * any HTML element, just sets the
+ * [`level`](https://solid.ariakit.com/reference/heading-level#level) prop on the
+ * context.
+ * @see https://solid.ariakit.com/components/heading
+ * @example
+ * ```jsx
+ * <HeadingLevel>
+ *   <Heading>Heading 1</Heading>
+ *   <HeadingLevel>
+ *     <Heading>Heading 2</Heading>
+ *   </HeadingLevel>
+ * </HeadingLevel>
+ * ```
+ */
+export function HeadingLevel(props: HeadingLevelProps) {
+  const contextLevel = useContext(HeadingContext);
+  const nextLevel = () =>
+    Math.max(
+      Math.min(props.level || (contextLevel?.() ?? 0) + 1, 6),
+      1,
+    ) as HeadingLevels;
+  return (
+    <HeadingContext.Provider value={nextLevel}>
+      {props.children}
+    </HeadingContext.Provider>
+  );
+}
+
+export interface HeadingLevelProps {
+  /**
+   * The heading level. By default, it'll increase the level by 1 based on the
+   * context.
+   */
+  level?: HeadingLevels;
+  children?: JSX.Element;
+}

package/src/heading/heading.tsx

@@ -0,0 +1,87 @@
+import {
+  extractTagName,
+  createRef,
+  mergeProps,
+  createHook,
+  createInstance,
+} from "@ariakit/solid-utils";
+import type { Options, Props } from "@ariakit/solid-utils";
+import type { ValidComponent } from "solid-js";
+import { createMemo, useContext } from "solid-js";
+import { HeadingContext } from "./heading-context.tsx";
+import type { HeadingLevels } from "./utils.ts";
+
+type HeadingElements = `h${HeadingLevels}`;
+const TagName = "h1" satisfies ValidComponent;
+type TagName = HeadingElements;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+/**
+ * Returns props to create a `Heading` component. The element type (or the
+ * `aria-level` prop, if the element type is not a native heading) is determined
+ * by the context level provided by the parent `HeadingLevel` component.
+ * @see https://solid.ariakit.com/components/heading
+ * @example
+ * ```jsx
+ * const props = useHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export const useHeading = createHook<TagName, HeadingOptions>(
+  function useHeading(props) {
+    const ref = createRef<HTMLType>();
+    const level = useContext(HeadingContext) || (() => 1);
+    const Element = () => `h${level()}` as const;
+    const tagName = extractTagName(ref.get);
+    const isNativeHeading = createMemo(
+      () => !!tagName() && /^h\d$/.test(tagName()!),
+    );
+
+    props = mergeProps(
+      {
+        // TODO: replace with LazyDynamic
+        render: Element(),
+        get role() {
+          return !isNativeHeading() ? "heading" : undefined;
+        },
+        get "aria-level"() {
+          return !isNativeHeading() ? level() : undefined;
+        },
+        ref: ref.set,
+      },
+      props,
+    );
+
+    return props;
+  },
+);
+
+/**
+ * Renders a heading element. The element type (or the `aria-level` attribute,
+ * if the element type is not a native heading) is determined by the context
+ * level provided by the closest
+ * [`HeadingLevel`](https://solid.ariakit.com/reference/heading-level) ancestor.
+ * @see https://solid.ariakit.com/components/heading
+ * @example
+ * ```jsx
+ * <HeadingLevel>
+ *   <Heading>Heading 1</Heading>
+ *   <HeadingLevel>
+ *     <Heading>Heading 2</Heading>
+ *   </HeadingLevel>
+ * </HeadingLevel>
+ * ```
+ */
+export const Heading = function Heading(props: HeadingProps) {
+  const htmlProps = useHeading(props);
+  return createInstance(TagName, htmlProps);
+};
+
+export interface HeadingOptions<
+  _T extends ValidComponent = TagName,
+> extends Options {}
+
+export type HeadingProps<T extends ValidComponent = TagName> = Props<
+  T,
+  HeadingOptions<T>
+>;

package/src/heading/utils.ts

@@ -0,0 +1 @@
+export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;

package/src/role/role.tsx

@@ -0,0 +1,91 @@
+import { createHook, createInstance } from "@ariakit/solid-utils";
+import type { Options, Props } from "@ariakit/solid-utils";
+import type { Component, JSX, ValidComponent } from "solid-js";
+
+const TagName = "div" satisfies ValidComponent;
+type TagName = typeof TagName;
+
+export const elements = [
+  "a",
+  "button",
+  "details",
+  "dialog",
+  "div",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "section",
+  "select",
+  "span",
+  "summary",
+  "textarea",
+  "ul",
+  "svg",
+] as const;
+
+type RoleElements = {
+  [K in (typeof elements)[number]]: Component<RoleProps<K>>;
+};
+
+/**
+ * Returns props to create a `Role` component.
+ * @see https://solid.ariakit.com/components/role
+ * @example
+ * ```jsx
+ * const props = useRole();
+ * <Role {...props} />
+ * ```
+ */
+export const useRole = createHook<TagName, RoleOptions>(
+  function useRole(props) {
+    return props;
+  },
+);
+
+// TODO: adapt docs wording to be more accurate for Solid
+/**
+ * Renders an abstract element that supports the `render` prop and a
+ * `wrapInstance` prop that can be used to wrap the underlying component
+ * instance with Solid Portal, Context or other component types.
+ * @see https://solid.ariakit.com/components/role
+ * @example
+ * ```jsx
+ * <Role render={<As.div />} />
+ * ```
+ */
+export const Role = function Role(props: RoleProps): JSX.Element {
+  return createInstance(TagName, props);
+} as Component<RoleProps> & RoleElements;
+
+Object.assign(
+  Role,
+  elements.reduce((acc, element) => {
+    acc[element] = function Role(
+      props: RoleProps<typeof element>,
+    ): JSX.Element {
+      return createInstance(element, props);
+    };
+    return acc;
+  }, {} as RoleElements),
+);
+
+export interface RoleOptions<
+  _T extends ValidComponent = TagName,
+> extends Options {}
+
+export type RoleProps<T extends ValidComponent = TagName> = Props<
+  T,
+  RoleOptions
+>;

package/src/separator/separator.tsx

@@ -0,0 +1,66 @@
+import {
+  mergeProps,
+  createHook,
+  createInstance,
+  withOptions,
+} from "@ariakit/solid-utils";
+import type { Options, Props } from "@ariakit/solid-utils";
+import type { ValidComponent } from "solid-js";
+
+const TagName = "hr" satisfies ValidComponent;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `Separator` component.
+ * @see https://solid.ariakit.com/components/separator
+ * @example
+ * ```jsx
+ * const props = useSeparator({ orientation: "horizontal" });
+ * <Role {...props} />
+ * ```
+ */
+export const useSeparator = createHook<TagName, SeparatorOptions>(
+  withOptions(
+    { orientation: "horizontal" },
+    function useSeparator(props, options) {
+      props = mergeProps(
+        {
+          role: "separator" as const,
+          get "aria-orientation"() {
+            return options.orientation;
+          },
+        },
+        props,
+      );
+      return props;
+    },
+  ),
+);
+
+/**
+ * Renders a separator element.
+ * @see https://solid.ariakit.com/components/separator
+ * @example
+ * ```jsx
+ * <Separator orientation="horizontal" />
+ * ```
+ */
+export const Separator = function Separator(props: SeparatorProps) {
+  const htmlProps = useSeparator(props);
+  return createInstance(TagName, htmlProps);
+};
+
+export interface SeparatorOptions<
+  _T extends ValidComponent = TagName,
+> extends Options {
+  /**
+   * The orientation of the separator.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+
+export type SeparatorProps<T extends ValidComponent = TagName> = Props<
+  T,
+  SeparatorOptions<T>
+>;