@ducor/react/dist/components/composite.js

admin template ui interface

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createContext, useContext, useRef, useState, } from "react";
// Context to manage Composite state
const CompositeContext = createContext(null);
// Hook to use Composite context
export const useComposite = () => {
    const context = useContext(CompositeContext);
    if (!context) {
        throw new Error("useComposite must be used within a CompositeProvider");
    }
    return context;
};
// Composite component definition
export const Composite = (_a) => {
    var { children, direction = "both", // Set default direction to 'both'
    render = _jsx("div", {}), // Default render to a <div>
    loop = true, disabledIndices = [], activeIndex, onNavigate, itemSizes = [], dense = false } = _a, props = __rest(_a, ["children", "direction", "render", "loop", "disabledIndices", "activeIndex", "onNavigate", "itemSizes", "dense"]);
    const [focusedIndex, setFocusedIndex] = useState(activeIndex !== null && activeIndex !== void 0 ? activeIndex : 0);
    const itemsRef = useRef([]); // Create a ref to store item refs
    // Handle keyboard navigation
    const handleKeyDown = (event) => {
        let newIndex = focusedIndex;
        switch (event.key) {
            case "ArrowRight":
                if (direction === "horizontal" || direction === "both") {
                    newIndex = (focusedIndex + 1) % itemsRef.current.length;
                }
                break;
            case "ArrowLeft":
                if (direction === "horizontal" || direction === "both") {
                    newIndex =
                        (focusedIndex - 1 + itemsRef.current.length) %
                            itemsRef.current.length;
                }
                break;
            case "ArrowDown":
                if (direction === "vertical" || direction === "both") {
                    newIndex = (focusedIndex + 1) % itemsRef.current.length;
                }
                break;
            case "ArrowUp":
                if (direction === "vertical" || direction === "both") {
                    newIndex =
                        (focusedIndex - 1 + itemsRef.current.length) %
                            itemsRef.current.length;
                }
                break;
            default:
                return; // Exit if the key is not relevant
        }
        if (disabledIndices.includes(newIndex)) {
            return; // Prevent navigation to disabled items
        }
        setFocusedIndex(newIndex);
        if (onNavigate)
            onNavigate(newIndex); // Notify parent of the navigation
    };
    return (_jsx(CompositeContext.Provider, { value: { focusedIndex, setFocusedIndex, itemsRef }, children: _jsxs("div", Object.assign({ role: 'group', onKeyDown: handleKeyDown, tabIndex: 0 }, props, { children: [typeof render === "function"
                    ? render({}) // Render using the function
                    : React.isValidElement(render)
                        ? React.cloneElement(render, Object.assign({}, props))
                        : render, children] })) }));
};
// CompositeItem component definition
export const CompositeItem = ({ render, index, children, }) => {
    const { focusedIndex, itemsRef } = useComposite();
    const isActive = focusedIndex === index;
    // HTML props for the item
    const htmlProps = {
        ref: (el) => {
            if (itemsRef.current) {
                itemsRef.current[index] = el;
            }
        },
        "aria-selected": isActive,
        tabIndex: isActive ? 0 : -1, // Only the active item is focusable
    };
    return (_jsx("div", Object.assign({}, htmlProps, { children: typeof render === "function"
            ? render(htmlProps) // Render using the function
            : children || render // Fallback to children if no render prop
     })));
};