@solid-aria/focus/dist/source/createFocusable.js

Primitives for dealing with focus rings and focus management.

/*
 * Copyright 2022 Solid Aria Working Group.
 * MIT License
 *
 * Portions of this file are based on code from react-spectrum.
 * Copyright 2020 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
import { createFocus, createKeyboard } from "@solid-aria/interactions";
import { combineProps } from "@solid-primitives/props";
import { access } from "@solid-primitives/utils";
import { createSignal, onMount } from "solid-js";
// TODO: add all the focus provider stuff when needed
/**
 * Make an element focusable, capable of auto focus and excludable from tab order.
 */
export function createFocusable(props, ref) {
    const [autofocus, setAutofocus] = createSignal(!!access(props.autofocus));
    const { focusProps } = createFocus(props);
    const { keyboardProps } = createKeyboard(props);
    const focusableProps = {
        ...combineProps(focusProps, keyboardProps),
        get tabIndex() {
            return access(props.excludeFromTabOrder) && !access(props.isDisabled) ? -1 : undefined;
        }
    };
    onMount(() => {
        autofocus() && access(ref)?.focus();
        setAutofocus(false);
    });
    return { focusableProps };
}