@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
57 lines (56 loc) • 1.85 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as o from "react";
import t from "prop-types";
import { focusFirstFocusableChild as M, useId as h, classNames as y } from "@progress/kendo-react-common";
const l = o.forwardRef((e, m) => {
const { children: d, className: c, style: u, id: f } = e, i = o.useRef(null), p = o.useCallback(() => {
i.current && M(i.current);
}, []), b = o.useCallback(
() => ({
element: i.current,
focus: p
}),
[p]
);
o.useImperativeHandle(m, b);
const k = h(), a = o.useMemo(() => e.themeColor || r.themeColor, [e.themeColor]), n = o.useMemo(() => e.position || r.position, [e.position]), s = o.useMemo(() => e.positionMode || r.positionMode, [e.positionMode]), C = o.useMemo(
() => y(
"k-appbar",
{
"k-appbar-top": n === "top",
"k-appbar-bottom": n === "bottom",
"k-appbar-static": s === "static",
"k-appbar-sticky": s === "sticky",
"k-appbar-fixed": s === "fixed",
[`k-appbar-${a}`]: !!a
},
c
),
[n, s, a, c]
);
return /* @__PURE__ */ o.createElement("div", { className: C, style: u, id: f || k }, d);
});
l.propTypes = {
children: t.any,
className: t.string,
style: t.object,
id: t.string,
themeColor: t.string,
position: t.oneOf(["top", "bottom"]),
positionMode: t.oneOf(["static", "sticky", "fixed"])
};
const r = {
themeColor: void 0,
position: "top",
positionMode: "static"
};
l.displayName = "KendoAppBar";
export {
l as AppBar
};