@solid-aria/focus/dist/source/createFocusRing.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, createFocusVisibleListener, createFocusWithin, isKeyboardFocusVisible } from "@solid-aria/interactions";
import { access } from "@solid-primitives/utils";
import { createMemo, createSignal, mergeProps } from "solid-js";
/**
 * Determines whether a focus ring should be shown to indicate keyboard focus.
 * Focus rings are visible only when the user is interacting with a keyboard,
 * not with a mouse, touch, or other input methods.
 */
export function createFocusRing(props = {}) {
    const [isFocused, setFocused] = createSignal(false);
    const [isFocusVisibleState, setFocusVisibleState] = createSignal(access(props.autofocus) || isKeyboardFocusVisible());
    const isFocusVisible = () => isFocused() && isFocusVisibleState();
    createFocusVisibleListener(setFocusVisibleState, () => null, // hack for passing a dep that never changes
    { isTextInput: !!access(props.isTextInput) });
    const { focusProps } = createFocus({
        isDisabled: () => access(props.within),
        onFocusChange: setFocused
    });
    const { focusWithinProps } = createFocusWithin({
        isDisabled: () => !access(props.within),
        onFocusWithinChange: setFocused
    });
    const focusRingProps = createMemo(() => (access(props.within) ? focusWithinProps : focusProps));
    return {
        isFocused,
        isFocusVisible,
        focusProps: mergeProps(focusRingProps)
    };
}