@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 © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import t from "prop-types";
import { focusFirstFocusableChild as C, useId as M, classNames as y } from "@progress/kendo-react-common";
const l = e.forwardRef((o, m) => {
const { children: d, className: c, style: u, id: f } = o, i = e.useRef(null), p = e.useCallback(() => {
i.current && C(i.current);
}, []), b = e.useCallback(
() => ({
element: i.current,
focus: p
}),
[p]
);
e.useImperativeHandle(m, b);
const k = M(), a = e.useMemo(() => o.themeColor || r.themeColor, [o.themeColor]), n = e.useMemo(() => o.position || r.position, [o.position]), s = e.useMemo(() => o.positionMode || r.positionMode, [o.positionMode]), h = e.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__ */ e.createElement("div", { className: h, 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: "light",
position: "top",
positionMode: "static"
};
l.displayName = "KendoAppBar";
export {
l as AppBar
};