@progress/kendo-react-layout/appbar/AppBar.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),o=require("prop-types"),p=require("@progress/kendo-react-common");function C(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const t=C(M),d=t.forwardRef((e,n)=>{const{children:s,className:a,style:f,id:b}=e,c=t.useRef(null),m=t.useCallback(()=>{c.current&&p.focusFirstFocusableChild(c.current)},[]),k=t.useCallback(()=>({element:c.current,focus:m}),[m]);t.useImperativeHandle(n,k);const y=p.useId(),r=t.useMemo(()=>e.themeColor||u.themeColor,[e.themeColor]),l=t.useMemo(()=>e.position||u.position,[e.position]),i=t.useMemo(()=>e.positionMode||u.positionMode,[e.positionMode]),g=t.useMemo(()=>p.classNames("k-appbar",{"k-appbar-top":l==="top","k-appbar-bottom":l==="bottom","k-appbar-static":i==="static","k-appbar-sticky":i==="sticky","k-appbar-fixed":i==="fixed",[`k-appbar-${r}`]:!!r},a),[l,i,r,a]);return t.createElement("div",{className:g,style:f,id:b||y},s)});d.propTypes={children:o.any,className:o.string,style:o.object,id:o.string,themeColor:o.string,position:o.oneOf(["top","bottom"]),positionMode:o.oneOf(["static","sticky","fixed"])};const u={themeColor:"light",position:"top",positionMode:"static"};d.displayName="KendoAppBar";exports.AppBar=d;