@ffsm/compositor/dist/as-array.js

A collection of declarative React utility components for simplified component composition, conditional rendering, and prop management - making React UI development more maintainable and expressive.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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, Fragment as _Fragment } from "react/jsx-runtime";
import { Children } from 'react';
import { AsInstance } from './as-instance';
/**
 * Renders children as an array, with optional filtering and mapping transformations.
 *
 * @param {PropsWithChildren<AsArrayProps>} props - Component properties
 * @param {React.ReactNode} props.children - Child elements to process
 * @param {(child: ReactNode, index: number) => boolean} [props.filter] - Optional function to filter children
 * @param {(child: ReactNode, index: number) => ReactNode} [props.map] - Optional function to transform children
 * @param {...unknown} props.rest - Additional props to pass to each child element
 * @returns {JSX.Element} React Fragment containing the processed children
 *
 * @example
 * // Basic usage - pass className to all child buttons
 * <AsArray className="btn-primary">
 *   <button>Save</button>
 *   <button>Cancel</button>
 * </AsArray>
 *
 * @example
 * // Filter only button elements
 * <AsArray
 *   filter={(child) => React.isValidElement(child) && child.type === 'button'}
 *   className="btn-primary"
 * >
 *   <button>Save</button>
 *   <div>Not a button</div>
 *   <button>Cancel</button>
 * </AsArray>
 *
 * @example
 * // Transform children
 * <AsArray
 *   map={(child) => React.isValidElement(child)
 *     ? React.cloneElement(child, { disabled: true })
 *     : child
 *   }
 * >
 *   <button>Save</button>
 *   <button>Cancel</button>
 * </AsArray>
 */
export function AsArray(props) {
    var children = props.children, filter = props.filter, map = props.map, rest = __rest(props, ["children", "filter", "map"]);
    var items = Children.toArray(children);
    var filtered = filter ? items.filter(filter) : items;
    return (_jsx(_Fragment, { children: filtered.map(function (child, index) { return (_jsx(AsInstance, __assign({}, rest, { children: map ? map(child, index) : child }), index)); }) }));
}