@asphalt-react/appbar/dist/index.js

Appbar

import "./index.css";
import React, { useState, forwardRef, useRef } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { Button } from '@asphalt-react/button';
import { Cross, Menu } from '@asphalt-react/iconpack';
import { focusUtil, KEYCODES, propsUtil } from '@asphalt-react/helper';
import { SvgNormalizer } from '@asphalt-react/svg-normalizer';

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}

var styles$a = {"Appbar":"Appbar__63dIe","content":"content__nqUsO","toggleBtn":"toggleBtn__0VRqf","head":"head__5-R9i","tail":"tail__Z5pxo","noContent":"noContent__qAw3W","AppbarExpanded":"AppbarExpanded__P514U","headExpanded":"headExpanded__ng5mo","contentExpanded":"contentExpanded__wy0Vn","tailExpanded":"tailExpanded__oa7Rz"};

const useAppbar=({defaultVisible=false}={})=>{const[visible,setVisible]=useState(defaultVisible);const open=()=>{setVisible(true);};const close=()=>{setVisible(false);};return {visible,open,close}};

var styles$9 = {"BaseAppbar":"BaseAppbar__g1OAe","bezelless":"bezelless__nN1uY"};

const BaseAppbar=forwardRef(({children,bezel=true,...props},ref)=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles$9.BaseAppbar,{[styles$9.bezelless]:!bezel}),ref:ref}),children)});BaseAppbar.displayName="BaseAppbar";BaseAppbar.propTypes={children:PropTypes.node.isRequired,bezel:PropTypes.bool};BaseAppbar.defaultProps={bezel:true};

var styles$8 = {"AppbarHead":"AppbarHead__IHqGF","bezelless":"bezelless__9PCnv"};

const AppbarHead=({children,bezel=true,...props})=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles$8.AppbarHead,{[styles$8.bezelless]:!bezel})}),children)};AppbarHead.displayName="AppbarHead";AppbarHead.propTypes={children:PropTypes.node,bezel:PropTypes.bool};AppbarHead.defaultProps={bezel:true};

var styles$7 = {"AppbarBody":"AppbarBody__s9hA8"};

const AppbarBody=({children,...props})=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$7.AppbarBody}),children)};AppbarBody.displayName="AppbarBody";AppbarBody.propTypes={children:PropTypes.node.isRequired};

var styles$6 = {"AppbarTail":"AppbarTail__WZuvH","bezelless":"bezelless__yK8cL"};

const AppbarTail=({children,bezel=true,...props})=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles$6.AppbarTail,{[styles$6.bezelless]:!bezel})}),children)};AppbarTail.displayName="AppbarTail";AppbarTail.propTypes={children:PropTypes.node.isRequired,bezel:PropTypes.bool};AppbarTail.defaultProps={bezel:true};

const{focusTrap}=focusUtil;const Appbar=({children,head=null,tail=null,dismissLabel="close appbar navigation",menuLabel="open appbar navigation",defaultVisible=false,...props})=>{const{style,className,...rest}=props;const hasChildren=Boolean(children);const{visible,open,close}=useAppbar({defaultVisible});const appbarRef=useRef(null);Appbar.close=close;const onKeyDown=event=>{if(visible){const{ESC,TAB}=KEYCODES;if(!(event.keyCode===ESC||event.keyCode===TAB))return;if(event.keyCode===ESC){close();}if(event.keyCode===TAB){focusTrap(appbarRef.current,event);}}};const wrapperClass=cn(styles$a.Appbar,{[styles$a.AppbarExpanded]:visible});const contentClass=cn(styles$a.content,{[styles$a.contentExpanded]:visible});const headClass=cn(styles$a.head,{[styles$a.headExpanded]:visible},{[styles$a.noContent]:!hasChildren});const tailClass=cn(styles$a.tail,{[styles$a.tailExpanded]:visible});return React.createElement("div",{className:wrapperClass},React.createElement(BaseAppbar,_extends({},rest,{onKeyDown:onKeyDown,ref:appbarRef}),React.createElement("div",{className:headClass},React.createElement(AppbarHead,null,hasChildren&&(visible?React.createElement("span",{className:styles$a.toggleBtn},React.createElement(Button,{size:"l",icon:true,system:true,nude:true,compact:true,onClick:close,"aria-haspopup":"menu","aria-expanded":true,"aria-label":dismissLabel,id:"appbar-cross"},React.createElement(Cross,null))):React.createElement("span",{className:styles$a.toggleBtn},React.createElement(Button,{size:"l",icon:true,system:true,nude:true,compact:true,onClick:open,"aria-haspopup":"menu","aria-expanded":false,"aria-label":menuLabel,id:"appbar-hamburger"},React.createElement(Menu,null)))),head)),hasChildren&&React.createElement("div",{className:contentClass},React.createElement(AppbarBody,null,children)),tail&&React.createElement("div",{className:tailClass},React.createElement(AppbarTail,null,tail))))};Appbar.displayName="Appbar";Appbar.propTypes={children:PropTypes.node,head:PropTypes.node,tail:PropTypes.node,dismissLabel:PropTypes.string,menuLabel:PropTypes.string,defaultVisible:PropTypes.bool};Appbar.defaultProps={head:null,tail:null,dismissLabel:"close appbar navigation",menuLabel:"open appbar navigation",defaultVisible:false};

var styles$5 = {"List":"List__Sk5tG"};

const Nav=({children,...props})=>{const{style,className,...rest}=props;return React.createElement("nav",null,React.createElement("ul",_extends({role:"menubar","aria-labelledby":"appbar-hamburger",className:cn(styles$5.List)},rest),children))};Nav.displayName="Nav";Nav.propTypes={children:PropTypes.node.isRequired};

var styles$4 = {"NavItem":"NavItem__QrR3L"};

const NavItem=({children,...props})=>{const{style,className,...rest}=props;return React.createElement("li",_extends({},rest,{role:"none",className:styles$4.NavItem}),children)};NavItem.displayName="NavItem";NavItem.propTypes={children:PropTypes.node.isRequired};

var styles$3 = {"NavItemIcon":"NavItemIcon__-NAaQ"};

const navItemIconSize={height:"16",width:"16"};const activeStyles={prominent:"prominent",highlight:"highlight"};const DEFAULT_ACTIVE_STYLE=activeStyles.prominent;

const NavItemIcon=({children,...props})=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$3.NavItemIcon}),React.createElement(SvgNormalizer,{dimension:navItemIconSize},children))};NavItemIcon.displayName="NavItemIcon";NavItemIcon.propTypes={children:PropTypes.node};

var styles$2 = {"NavItemCaption":"NavItemCaption__3opuI"};

const NavItemCaption=({children,...props})=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$2.NavItemCaption}),children)};NavItemCaption.displayName="NavItemCaption";NavItemCaption.propTypes={children:PropTypes.node};

var styles$1 = {"NavItemAction":"NavItemAction__yHcxq"};

const NavItemAction=({children,propagateEvent=false,...props})=>{const{style,className,...rest}=props;const handleClick=event=>{event.preventDefault();event.stopPropagation();};return React.createElement("div",_extends({},rest,{className:styles$1.NavItemAction,onClick:propagateEvent?null:handleClick}),children)};NavItemAction.displayName="NavItemAction";NavItemAction.propTypes={children:PropTypes.node,propagateEvent:PropTypes.bool};NavItemAction.defaultProps={propagateEvent:false};

var styles = {"NavLink":"NavLink__AztJU","indicatorWrap":"indicatorWrap__kdNqF","indicator":"indicator__-zWqN","NavItemContent":"NavItemContent__JVCbs","prominentContent":"prominentContent__4-Hlf","prominent":"prominent__uo64x","highlight":"highlight__F8mqc","showIndicator":"showIndicator__lcY-8","visible":"visible__OKX7Z","icon":"icon__YsBio","bezelless":"bezelless__ICNkD"};

const showIndicator=style=>{return style===activeStyles.highlight?false:true};

const{resolvePropCollision}=propsUtil;const NavLink=forwardRef(({children,as:Link="a",asProps={},active=false,prominent=false,highlight=false,icon=false,bezel=true,...props},ref)=>{const{style,className,...rest}=props;const{collision,value:activeStyle}=resolvePropCollision({highlight,prominent},DEFAULT_ACTIVE_STYLE);if(collision){console.warn(`NavLink: Multiple active styles detected. Falling back to "${DEFAULT_ACTIVE_STYLE}"`);}const{style:asStyle,className:asClass,...restProps}=asProps;const classes=cn(styles.NavLink,{[styles[activeStyle]]:active},{[styles.bezelless]:!bezel});const contentClasses=cn(styles.NavItemContent,styles[`${activeStyle}Content`],{[styles.bezelless]:!bezel},{[styles.icon]:icon});return React.createElement(Link,_extends({},rest,restProps,{className:classes,ref:ref,role:"menuitem"}),React.createElement("span",{className:contentClasses,"data-testid":"nav-item-content"},children),React.createElement("span",{className:cn(styles.indicatorWrap,{[styles.showIndicator]:showIndicator(activeStyle)})},React.createElement("span",{className:cn(styles.indicator,{[styles.visible]:active})})))});NavLink.displayName="NavLink";NavLink.propTypes={children:PropTypes.node,as:PropTypes.elementType,asProps:PropTypes.object,active:PropTypes.bool,prominent:PropTypes.bool,highlight:PropTypes.bool,icon:PropTypes.bool,bezel:PropTypes.bool};NavLink.defaultProps={as:"a",asProps:{},active:false,prominent:false,highlight:false,bezel:true,icon:false};

export { Appbar, AppbarBody, AppbarHead, AppbarTail, BaseAppbar, Nav, NavItem, NavItemAction, NavItemCaption, NavItemIcon, NavLink, useAppbar };