Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@hig/top-nav

Package Overview
Dependencies
Maintainers
6
Versions
221
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hig/top-nav - npm Package Compare versions

Comparing version 4.1.1 to 4.1.2

934

build/index.es.js

@@ -0,16 +1,109 @@

import ProfileFlyout, { AVAILABLE_ANCHOR_POINTS as AVAILABLE_ANCHOR_POINTS$1, anchorPoints as anchorPoints$2, ProfileContent } from '@hig/profile-flyout';
export { ProfileContent } from '@hig/profile-flyout';
import React from 'react';
import PropTypes from 'prop-types';
import { css, cx } from 'emotion';
import Flyout, { Panel, anchorPoints, AVAILABLE_ANCHOR_POINTS, offsetContainerVertical, offsetPanelHorizontal } from '@hig/flyout';
import IconButton from '@hig/icon-button';
import { cx, css } from 'emotion';
import Flyout, { Panel, AVAILABLE_ANCHOR_POINTS, offsetPanelHorizontal, offsetContainerVertical, anchorPoints } from '@hig/flyout';
import { List16, List24, Help16, Help24 } from '@hig/icons';
import ThemeContext from '@hig/theme-context';
import { combineEventHandlers, createCustomClassNames } from '@hig/utils';
import { createCustomClassNames, combineEventHandlers } from '@hig/utils';
import IconButton from '@hig/icon-button';
import Typography from '@hig/typography';
import NotificationsFlyout, { anchorPoints as anchorPoints$1 } from '@hig/notifications-flyout';
import ProfileFlyout, { anchorPoints as anchorPoints$2, AVAILABLE_ANCHOR_POINTS as AVAILABLE_ANCHOR_POINTS$1, ProfileContent } from '@hig/profile-flyout';
export { ProfileContent } from '@hig/profile-flyout';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function getTopNavThemeData(themeData) {

@@ -20,3 +113,3 @@ return {

fontFamily: themeData["basics.fontFamilies.main"],
boxShadow: "0 4px " + themeData["basics.shadows.lowBlur"] + " -4px rgba(0, 0, 0, 0.25)"
boxShadow: `0 4px ${themeData["basics.shadows.lowBlur"]} -4px rgba(0, 0, 0, 0.25)`
};

@@ -26,97 +119,98 @@ }

function stylesheet(props, themeData) {
var customStylesheet = props.stylesheet;
var styles = {
topNav: _extends({
display: "flex",
position: "relative",
height: "56px",
minHeight: "56px",
paddingLeft: "7px",
justifyContent: "space-between",
alignItems: "stretch",
const {
stylesheet: customStylesheet
} = props;
const styles = {
topNav: _objectSpread2({
display: `flex`,
position: `relative`,
height: `56px`,
minHeight: `56px`,
paddingLeft: `7px`,
justifyContent: `space-between`,
alignItems: `stretch`,
zIndex: 9998,
lineHeight: 1.6,
boxSizing: "border-box"
boxSizing: `border-box`
}, themeData ? getTopNavThemeData(themeData) : {}),
topNavSpacer: {
flex: "1 1 0"
flex: `1 1 0`
},
topNavLogoWrapper: {
display: "flex",
padding: "0 12px 0 5px",
alignItems: "center",
lineHeight: 0
display: `flex`,
padding: `0 12px 0 5px`,
alignItems: `center`
},
topNavSeparator: {
width: 0,
height: "32px",
margin: "12px 6px",
borderLeftWidth: "1px",
borderLeftColor: themeData ? themeData["divider.heavyColor"] : "transparent",
borderLeftStyle: "solid"
height: `32px`,
margin: `12px 6px`,
borderLeftWidth: `1px`,
borderLeftColor: themeData ? themeData["divider.heavyColor"] : `transparent`,
borderLeftStyle: `solid`
},
topNavProfileAction: {
display: "flex",
alignItems: "center",
boxSizing: "border-box"
display: `flex`,
alignItems: `center`,
boxSizing: `border-box`
},
topNavProfileActionButtonWrapper: {
display: "flex",
alignItems: "center",
padding: "0 6px"
display: `flex`,
alignItems: `center`,
padding: `0 6px`
},
topNavLogo: {
display: "flex",
textDecoration: "none",
cursor: "pointer"
display: `flex`,
textDecoration: `none`,
cursor: `pointer`
},
topNavLogoTextPresenter: {
display: "inline-block",
display: `inline-block`,
margin: 0,
fontSize: "16px",
lineHeight: "16px",
fontSize: `16px`,
lineHeight: `16px`,
fontWeight: 400
},
topNavInteractions: {
display: "flex",
alignItems: "center",
padding: "0 6px"
display: `flex`,
alignItems: `center`,
padding: `0 6px`
},
topNavAction: {
display: "flex",
height: "56px",
alignItems: "center"
display: `flex`,
height: `56px`,
alignItems: `center`
},
topNavActionFlyoutPanel: {
width: "276px",
maxHeight: "360px",
overflowY: "auto",
msOverflowStyle: "-ms-autohiding-scrollbar"
width: `276px`,
maxHeight: `360px`,
overflowY: `auto`,
msOverflowStyle: `-ms-autohiding-scrollbar`
}
};
return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
}
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$a = ["children", "stylesheet"];
function ActionPresenter(_ref) {
var children = _ref.children,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties(_ref, ["children", "stylesheet"]);
let {
children,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$a);
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
"div",
{ className: cx([className, css(styles.topNavAction)]) },
children
);
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React.createElement("div", {
className: cx([className, css(styles.topNavAction)])
}, children);
}
ActionPresenter.propTypes = {
/** Content to render inside an action */
children: PropTypes.node,
/** Function to modify the component's styles */

@@ -147,22 +241,18 @@ stylesheet: PropTypes.func

function ActionFlyoutPanelPresenter(_ref) {
var children = _ref.children,
handleScroll = _ref.handleScroll,
innerRef = _ref.innerRef,
customStylesheet = _ref.stylesheet;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
Panel,
{ innerRef: innerRef },
React.createElement(
"div",
{
className: css(styles.topNavActionFlyoutPanel),
onScroll: handleScroll
},
children
)
);
let {
children,
handleScroll,
innerRef,
stylesheet: customStylesheet
} = _ref;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React.createElement(Panel, {
innerRef: innerRef
}, /*#__PURE__*/React.createElement("div", {
className: css(styles.topNavActionFlyoutPanel),
onScroll: handleScroll
}, children));
}
ActionFlyoutPanelPresenter.propTypes = {

@@ -174,49 +264,40 @@ children: PropTypes.node,

};
/* eslint-disable-next-line react/prop-types, prettier/prettier */
/* eslint-disable-next-line react/prop-types, prettier/prettier */
function renderActionFlyoutPanel(_ref2) {
var content = _ref2.content,
innerRef = _ref2.innerRef,
customStylesheet = _ref2.stylesheet;
return React.createElement(
ActionFlyoutPanelPresenter,
{
innerRef: innerRef,
stylesheet: customStylesheet
},
content
);
let {
content,
innerRef,
stylesheet: customStylesheet
} = _ref2;
return /*#__PURE__*/React.createElement(ActionFlyoutPanelPresenter, {
innerRef: innerRef,
stylesheet: customStylesheet
}, content);
}
var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$9 = ["icon", "onClick", "title"];
function NavButtonPresenter(_ref) {
var icon = _ref.icon,
onClick = _ref.onClick,
title = _ref.title,
otherProps = _objectWithoutProperties$1(_ref, ["icon", "onClick", "title"]);
let {
icon,
onClick,
title
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$9);
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var metadata = _ref2.metadata;
var NavDefaultIcon = metadata.densityId === "high-density" ? List16 : List24;
return React.createElement(IconButton, _extends$1({
icon: icon || React.createElement(NavDefaultIcon, null),
onClick: onClick,
title: title
}, otherProps));
}
);
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref2 => {
let {
metadata
} = _ref2;
const NavDefaultIcon = metadata.densityId === "high-density" ? List16 : List24;
return /*#__PURE__*/React.createElement(IconButton, _extends({
icon: icon || /*#__PURE__*/React.createElement(NavDefaultIcon, null),
onClick: onClick,
title: title
}, otherProps));
});
}
NavButtonPresenter.defaultProps = {
title: ""
};
NavButtonPresenter.propTypes = {

@@ -259,59 +340,59 @@ icon: PropTypes.element,

function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$8 = ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "icon", "onClick", "stylesheet", "title"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var NavAction = function NavAction(props) {
var alterCoordinates = props.alterCoordinates,
anchorPoint = props.anchorPoint,
children = props.children,
fallbackAnchorPoints = props.fallbackAnchorPoints,
icon = props.icon,
onClick = props.onClick,
stylesheet = props.stylesheet,
title = props.title,
otherProps = _objectWithoutProperties$2(props, ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "icon", "onClick", "stylesheet", "title"]);
const NavAction = props => {
const {
alterCoordinates,
anchorPoint,
children,
fallbackAnchorPoints,
icon,
onClick,
stylesheet,
title
} = props,
otherProps = _objectWithoutProperties(props, _excluded$8);
var className = otherProps.className;
var topNavNavActionFlyoutClassName = createCustomClassNames(className, "top-nav__nav-action-flyout");
var topNavNavActionButtonClassName = createCustomClassNames(className, "top-nav__nav-action-button");
return React.createElement(
ActionPresenter,
{ className: className, stylesheet: stylesheet },
React.createElement(
Flyout,
{
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: topNavNavActionFlyoutClassName,
content: children,
fallbackAnchorPoints: fallbackAnchorPoints,
onClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
},
function (_ref) {
var handleClick = _ref.handleClick;
return React.createElement(NavButtonPresenter, {
className: topNavNavActionButtonClassName,
icon: icon,
onClick: combineEventHandlers(onClick, handleClick),
title: title
});
}
)
);
const {
className
} = otherProps;
const topNavNavActionFlyoutClassName = createCustomClassNames(className, "top-nav__nav-action-flyout");
const topNavNavActionButtonClassName = createCustomClassNames(className, "top-nav__nav-action-button");
return /*#__PURE__*/React.createElement(ActionPresenter, {
className: className,
stylesheet: stylesheet
}, /*#__PURE__*/React.createElement(Flyout, {
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: topNavNavActionFlyoutClassName,
content: children,
fallbackAnchorPoints: fallbackAnchorPoints,
onClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
}, _ref => {
let {
handleClick
} = _ref;
return /*#__PURE__*/React.createElement(NavButtonPresenter, {
className: topNavNavActionButtonClassName,
icon: icon,
onClick: combineEventHandlers(onClick, handleClick),
title: title
});
}));
};
NavAction.displayName = "NavAction";
NavAction.propTypes = {
/** Manipulate flyout coordinates before each render */
alterCoordinates: PropTypes.func,
/** Where the flyout will be anchored relative to target */
anchorPoint: PropTypes.string,
/** Content to render inside the pull down flyout */
children: PropTypes.node,
/**

@@ -323,12 +404,15 @@ * When the flyout overflows the viewport, it'll attempt to

fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)),
/** Icon to be displayed in the top bar for the pull down, default is List */
icon: PropTypes.element,
/** Callback when the flyout is opened */
onClick: PropTypes.func,
/** Title text displayed in the tooltip on button hover */
title: PropTypes.string,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
};
NavAction.defaultProps = {

@@ -339,3 +423,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return offsetPanelHorizontal(offsetContainerVertical(coordinates, 8), 57);

@@ -427,53 +511,49 @@ },

function _objectWithoutProperties$3(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$7 = ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "onClick", "stylesheet"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var HelpAction = function HelpAction(props) {
var alterCoordinates = props.alterCoordinates,
anchorPoint = props.anchorPoint,
children = props.children,
fallbackAnchorPoints = props.fallbackAnchorPoints,
onClick = props.onClick,
stylesheet = props.stylesheet,
otherProps = _objectWithoutProperties$3(props, ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "onClick", "stylesheet"]);
const HelpAction = props => {
const {
alterCoordinates,
anchorPoint,
children,
fallbackAnchorPoints,
onClick,
stylesheet
} = props,
otherProps = _objectWithoutProperties(props, _excluded$7);
var className = otherProps.className;
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var metadata = _ref.metadata;
var title = "View help";
var HelpIcon = metadata.densityId === "high-density" ? Help16 : Help24;
return React.createElement(
NavAction,
{
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: className,
fallbackAnchorPoints: fallbackAnchorPoints,
icon: React.createElement(HelpIcon, null),
onClick: onClick,
stylesheet: stylesheet,
title: title
},
children
);
}
);
const {
className
} = otherProps;
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref => {
let {
metadata
} = _ref;
const title = "View help";
const HelpIcon = metadata.densityId === "high-density" ? Help16 : Help24;
return /*#__PURE__*/React.createElement(NavAction, {
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: className,
fallbackAnchorPoints: fallbackAnchorPoints,
icon: /*#__PURE__*/React.createElement(HelpIcon, null),
onClick: onClick,
stylesheet: stylesheet,
title: title
}, children);
});
};
HelpAction.displayName = "HelpAction";
HelpAction.propTypes = {
/** Manipulate flyout coordinates before each render */
alterCoordinates: PropTypes.func,
/** Where the flyout will be anchored relative to target */
anchorPoint: PropTypes.string,
/** Content to render inside the help flyout */
children: PropTypes.node,
/**

@@ -485,8 +565,9 @@ * When the flyout overflows the viewport, it'll attempt to

fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)),
/** Callback when the flyout is opened */
onClick: PropTypes.func,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
};
HelpAction.defaultProps = {

@@ -497,3 +578,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return offsetPanelHorizontal(offsetContainerVertical(coordinates, 8), 57);

@@ -571,28 +652,29 @@ },

function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$6 = ["children", "innerRef", "stylesheet"];
function InteractionsPresenter(_ref) {
var children = _ref.children,
innerRef = _ref.innerRef,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$4(_ref, ["children", "innerRef", "stylesheet"]);
let {
children,
innerRef,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$6);
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
"div",
{
className: cx([className, css(styles.topNavInteractions)]),
ref: innerRef
},
children
);
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React.createElement("div", {
className: cx([className, css(styles.topNavInteractions)]),
ref: innerRef
}, children);
}
InteractionsPresenter.propTypes = {
/** Actions to be rendered */
children: PropTypes.node,
/** Reference the wrappinf <div /> element */
innerRef: PropTypes.func,
/** Function to modify the component's styles */

@@ -629,14 +711,13 @@ stylesheet: PropTypes.func

var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
const _excluded$5 = ["stylesheet"];
function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var Interactions = function Interactions(props) {
const Interactions = props => {
/**
* @todo Complete render prop implementation with alignment helpers
*/
var renderChildren = function renderChildren() {
var children = props.children;
const renderChildren = () => {
const {
children
} = props;
if (typeof children === "function") {

@@ -649,17 +730,17 @@ return children();

var stylesheet = props.stylesheet,
otherProps = _objectWithoutProperties$5(props, ["stylesheet"]);
const {
stylesheet
} = props,
otherProps = _objectWithoutProperties(props, _excluded$5);
return React.createElement(
InteractionsPresenter,
_extends$2({ stylesheet: stylesheet }, otherProps),
renderChildren()
);
return /*#__PURE__*/React.createElement(InteractionsPresenter, _extends({
stylesheet: stylesheet
}, otherProps), renderChildren());
};
Interactions.displayName = "Interactions";
Interactions.propTypes = {
/** Actions to be rendered */
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/** Function to modify the component's styles */

@@ -695,16 +776,18 @@ stylesheet: PropTypes.func

function LogoTextPresenter(_ref) {
var children = _ref.children,
customStylesheet = _ref.stylesheet;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
Typography,
{ variant: "h1", style: styles.topNavLogoTextPresenter },
children
);
let {
children,
stylesheet: customStylesheet
} = _ref;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React.createElement(Typography, {
variant: "h1",
style: styles.topNavLogoTextPresenter
}, children);
}
LogoTextPresenter.propTypes = {
/** Logo content */
children: PropTypes.node,
/** Function to modify the component's styles */

@@ -734,11 +817,9 @@ stylesheet: PropTypes.func

function _objectWithoutProperties$6(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$4 = ["label", "link", "title", "onClick", "children", "dangerouslySetInnerHTML", "stylesheet"];
function renderChildren(children, customStylesheet) {
if (typeof children === "string") {
return React.createElement(
LogoTextPresenter,
{ stylesheet: customStylesheet },
children
);
return /*#__PURE__*/React.createElement(LogoTextPresenter, {
stylesheet: customStylesheet
}, children);
}

@@ -750,44 +831,49 @@

function LogoPresenter(_ref) {
var label = _ref.label,
link = _ref.link,
title = _ref.title,
onClick = _ref.onClick,
children = _ref.children,
dangerouslySetInnerHTML = _ref.dangerouslySetInnerHTML,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$6(_ref, ["label", "link", "title", "onClick", "children", "dangerouslySetInnerHTML", "stylesheet"]);
let {
label,
link,
title,
onClick,
children,
dangerouslySetInnerHTML,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$4);
var Wrapper = link ? "a" : "div";
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
Wrapper,
{
className: cx([className, css(styles.topNavLogo)]),
href: link,
title: title,
"aria-label": label,
onClick: onClick,
dangerouslySetInnerHTML: dangerouslySetInnerHTML
},
renderChildren(children, customStylesheet)
);
const Wrapper = link ? "a" : "div";
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React.createElement(Wrapper, {
className: cx([className, css(styles.topNavLogo)]),
href: link,
title: title,
"aria-label": label,
onClick: onClick,
dangerouslySetInnerHTML: dangerouslySetInnerHTML
}, renderChildren(children, customStylesheet));
}
LogoPresenter.propTypes = {
/** A11y label */
label: PropTypes.string,
/** URL to link to */
link: PropTypes.string,
/** A11y title */
title: PropTypes.string,
/** Click event listener */
onClick: PropTypes.func,
/** Logo content */
children: PropTypes.node,
/** Proxy for React's `dangerouslySetInnerHTML` */
// eslint-disable-next-line react/forbid-prop-types
dangerouslySetInnerHTML: PropTypes.any,
/** Function to modify the component's styles */

@@ -852,35 +938,27 @@ stylesheet: PropTypes.func

var _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties$7(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$3 = ["children"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var NotificationsAction = function NotificationsAction(props) {
var children = props.children,
otherProps = _objectWithoutProperties$7(props, ["children"]);
const NotificationsAction = props => {
const {
children
} = props,
otherProps = _objectWithoutProperties(props, _excluded$3);
var className = otherProps.className,
stylesheet = otherProps.stylesheet;
var topNavNotificationsFlyoutClassName = createCustomClassNames(className, "top-nav__notifications-flyout");
return React.createElement(
ActionPresenter,
{ stylesheet: stylesheet, className: className },
React.createElement(
NotificationsFlyout,
_extends$3({}, otherProps, {
stylesheet: stylesheet,
className: topNavNotificationsFlyoutClassName
}),
children
)
);
const {
className,
stylesheet
} = otherProps;
const topNavNotificationsFlyoutClassName = createCustomClassNames(className, "top-nav__notifications-flyout");
return /*#__PURE__*/React.createElement(ActionPresenter, {
stylesheet: stylesheet,
className: className
}, /*#__PURE__*/React.createElement(NotificationsFlyout, _extends({}, otherProps, {
stylesheet: stylesheet,
className: topNavNotificationsFlyoutClassName
}), children));
};
NotificationsAction.displayName = "NotificationsAction";
NotificationsAction.propTypes = NotificationsFlyout.propTypes;
NotificationsAction.defaultProps = {

@@ -891,3 +969,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return offsetPanelHorizontal(offsetContainerVertical(coordinates, 8), 93);

@@ -929,20 +1007,19 @@ },

function SeparatorPresenter(_ref) {
var customStylesheet = _ref.stylesheet;
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var resolvedRoles = _ref2.resolvedRoles;
var styles = stylesheet({ stylesheet: customStylesheet }, resolvedRoles);
return React.createElement("div", {
role: "presentation",
"aria-hidden": true,
className: css(styles.topNavSeparator)
});
}
);
let {
stylesheet: customStylesheet
} = _ref;
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref2 => {
let {
resolvedRoles
} = _ref2;
const styles = stylesheet({
stylesheet: customStylesheet
}, resolvedRoles);
return /*#__PURE__*/React.createElement("div", {
role: "presentation",
"aria-hidden": true,
className: css(styles.topNavSeparator)
});
});
}
SeparatorPresenter.propTypes = {

@@ -965,35 +1042,30 @@ stylesheet: PropTypes.func

function _objectWithoutProperties$8(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$2 = ["children", "stylesheet"];
/**
* @todo Remove the <SeparatorPresenter /> and wrapping <div /> component
*/
function ProfileActionPresenter(_ref) {
var children = _ref.children,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$8(_ref, ["children", "stylesheet"]);
let {
children,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$2);
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
var topNavProfileActionButtonWrapperClassName = createCustomClassNames(className, "top-nav-profile-action-button-wrapper");
return React.createElement(
"div",
{ className: css(styles.topNavProfileAction) },
React.createElement(SeparatorPresenter, null),
React.createElement(
ActionPresenter,
{ className: className, stylesheet: customStylesheet },
React.createElement(
"div",
{
className: cx([topNavProfileActionButtonWrapperClassName, css(styles.topNavProfileActionButtonWrapper)])
},
children
)
)
);
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
const topNavProfileActionButtonWrapperClassName = createCustomClassNames(className, "top-nav-profile-action-button-wrapper");
return /*#__PURE__*/React.createElement("div", {
className: css(styles.topNavProfileAction)
}, /*#__PURE__*/React.createElement(SeparatorPresenter, null), /*#__PURE__*/React.createElement(ActionPresenter, {
className: className,
stylesheet: customStylesheet
}, /*#__PURE__*/React.createElement("div", {
className: cx([topNavProfileActionButtonWrapperClassName, css(styles.topNavProfileActionButtonWrapper)])
}, children)));
}
ProfileActionPresenter.propTypes = {

@@ -1024,53 +1096,51 @@ children: PropTypes.node,

function _objectWithoutProperties$9(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$1 = ["alterCoordinates", "anchorPoint", "avatarImage", "avatarName", "children", "fallbackAnchorPoints", "onClick", "stylesheet"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var ProfileAction = function ProfileAction(props) {
var alterCoordinates = props.alterCoordinates,
anchorPoint = props.anchorPoint,
avatarImage = props.avatarImage,
avatarName = props.avatarName,
children = props.children,
fallbackAnchorPoints = props.fallbackAnchorPoints,
onClick = props.onClick,
stylesheet = props.stylesheet,
otherProps = _objectWithoutProperties$9(props, ["alterCoordinates", "anchorPoint", "avatarImage", "avatarName", "children", "fallbackAnchorPoints", "onClick", "stylesheet"]);
const ProfileAction = props => {
const {
alterCoordinates,
anchorPoint,
avatarImage,
avatarName,
children,
fallbackAnchorPoints,
onClick,
stylesheet
} = props,
otherProps = _objectWithoutProperties(props, _excluded$1);
var className = otherProps.className;
var topNavProfileFlyoutClassName = createCustomClassNames(className, "top-nav__profile-flyout");
return React.createElement(
ProfileActionPresenter,
{ className: className },
React.createElement(
ProfileFlyout,
{
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
avatarImage: avatarImage,
avatarName: avatarName,
className: topNavProfileFlyoutClassName,
fallbackAnchorPoints: fallbackAnchorPoints,
onProfileImageClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
},
children
)
);
const {
className
} = otherProps;
const topNavProfileFlyoutClassName = createCustomClassNames(className, "top-nav__profile-flyout");
return /*#__PURE__*/React.createElement(ProfileActionPresenter, {
className: className
}, /*#__PURE__*/React.createElement(ProfileFlyout, {
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
avatarImage: avatarImage,
avatarName: avatarName,
className: topNavProfileFlyoutClassName,
fallbackAnchorPoints: fallbackAnchorPoints,
onProfileImageClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
}, children));
};
ProfileAction.displayName = "ProfileAction";
ProfileAction.propTypes = {
/** Manipulate flyout coordinates before each render */
alterCoordinates: PropTypes.func,
/** Where the flyout will be anchored relative to target */
anchorPoint: PropTypes.string,
/** The name that will converted into initials, and displayed when an image isn't available */
avatarName: PropTypes.string.isRequired,
/** Url to a profile image */
avatarImage: PropTypes.string,
/**

@@ -1082,10 +1152,12 @@ * When the flyout overflows the viewport, it'll attempt to

fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS$1)),
/** Content to render in the profile flyout */
children: PropTypes.node,
/** Callback when the flyout is opened */
onClick: PropTypes.func,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
};
ProfileAction.defaultProps = {

@@ -1096,3 +1168,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return offsetPanelHorizontal(offsetContainerVertical(coordinates, 10), 6);

@@ -1184,50 +1256,45 @@ },

function _objectWithoutProperties$10(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded = ["leftActions", "rightActions", "logo", "stylesheet"];
function TopNav(_ref) {
var leftActions = _ref.leftActions,
rightActions = _ref.rightActions,
logo = _ref.logo,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$10(_ref, ["leftActions", "rightActions", "logo", "stylesheet"]);
let {
leftActions,
rightActions,
logo,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded);
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var resolvedRoles = _ref2.resolvedRoles;
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, resolvedRoles);
var topNavLogoWrapperClassName = createCustomClassNames(className, "top-nav-logo-wrapper");
var topNavSpacerClassName = createCustomClassNames(className, "top-nav-spacer");
return React.createElement(
"div",
{ className: cx([className, css(styles.topNav)]) },
leftActions,
React.createElement(
"div",
{
className: cx([topNavLogoWrapperClassName, css(styles.topNavLogoWrapper)])
},
logo
),
React.createElement("div", {
role: "presentation",
"aria-hidden": true,
className: cx([topNavSpacerClassName, css(styles.topNavSpacer)])
}),
rightActions
);
}
);
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref2 => {
let {
resolvedRoles
} = _ref2;
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, resolvedRoles);
const topNavLogoWrapperClassName = createCustomClassNames(className, "top-nav-logo-wrapper");
const topNavSpacerClassName = createCustomClassNames(className, "top-nav-spacer");
return /*#__PURE__*/React.createElement("div", {
className: cx([className, css(styles.topNav)])
}, leftActions, /*#__PURE__*/React.createElement("div", {
className: cx([topNavLogoWrapperClassName, css(styles.topNavLogoWrapper)])
}, logo), /*#__PURE__*/React.createElement("div", {
role: "presentation",
"aria-hidden": true,
className: cx([topNavSpacerClassName, css(styles.topNavSpacer)])
}), rightActions);
});
}
TopNav.propTypes = {
/** Actions to render to the left of the logo */
leftActions: PropTypes.node,
/** Actions to render on the right of the bar */
rightActions: PropTypes.node,
/** Content to render as the logo */
logo: PropTypes.node,
/** Function to modify the component's styles */

@@ -1276,3 +1343,2 @@ stylesheet: PropTypes.func

TopNav.Separator = SeparatorPresenter;
/**

@@ -1288,2 +1354,3 @@ * @todo Remove the static properties below

*/
TopNav.HelpAction = HelpAction;

@@ -1293,3 +1360,2 @@ TopNav.ProfileContent = ProfileContent;

export default TopNav;
export { HelpAction, Interactions, NotificationsAction, ProfileAction, NavAction, ActionPresenter as Action, LogoPresenter as Logo, LogoTextPresenter as LogoText, SeparatorPresenter as Separator };
export { ActionPresenter as Action, HelpAction, Interactions, LogoPresenter as Logo, LogoTextPresenter as LogoText, NavAction, NotificationsAction, ProfileAction, SeparatorPresenter as Separator, TopNav as default };

1068

build/index.js

@@ -5,21 +5,120 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var ProfileFlyout = require('@hig/profile-flyout');
var React = require('react');
var PropTypes = require('prop-types');
var emotion = require('emotion');
var Flyout = require('@hig/flyout');
var Flyout__default = _interopDefault(Flyout);
var IconButton = _interopDefault(require('@hig/icon-button'));
var icons = require('@hig/icons');
var ThemeContext = _interopDefault(require('@hig/theme-context'));
var ThemeContext = require('@hig/theme-context');
var utils = require('@hig/utils');
var Typography = _interopDefault(require('@hig/typography'));
var IconButton = require('@hig/icon-button');
var Typography = require('@hig/typography');
var NotificationsFlyout = require('@hig/notifications-flyout');
var NotificationsFlyout__default = _interopDefault(NotificationsFlyout);
var ProfileFlyout = require('@hig/profile-flyout');
var ProfileFlyout__default = _interopDefault(ProfileFlyout);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var ProfileFlyout__default = /*#__PURE__*/_interopDefaultLegacy(ProfileFlyout);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var Flyout__default = /*#__PURE__*/_interopDefaultLegacy(Flyout);
var ThemeContext__default = /*#__PURE__*/_interopDefaultLegacy(ThemeContext);
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var NotificationsFlyout__default = /*#__PURE__*/_interopDefaultLegacy(NotificationsFlyout);
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function getTopNavThemeData(themeData) {

@@ -29,3 +128,3 @@ return {

fontFamily: themeData["basics.fontFamilies.main"],
boxShadow: "0 4px " + themeData["basics.shadows.lowBlur"] + " -4px rgba(0, 0, 0, 0.25)"
boxShadow: `0 4px ${themeData["basics.shadows.lowBlur"]} -4px rgba(0, 0, 0, 0.25)`
};

@@ -35,99 +134,100 @@ }

function stylesheet(props, themeData) {
var customStylesheet = props.stylesheet;
var styles = {
topNav: _extends({
display: "flex",
position: "relative",
height: "56px",
minHeight: "56px",
paddingLeft: "7px",
justifyContent: "space-between",
alignItems: "stretch",
const {
stylesheet: customStylesheet
} = props;
const styles = {
topNav: _objectSpread2({
display: `flex`,
position: `relative`,
height: `56px`,
minHeight: `56px`,
paddingLeft: `7px`,
justifyContent: `space-between`,
alignItems: `stretch`,
zIndex: 9998,
lineHeight: 1.6,
boxSizing: "border-box"
boxSizing: `border-box`
}, themeData ? getTopNavThemeData(themeData) : {}),
topNavSpacer: {
flex: "1 1 0"
flex: `1 1 0`
},
topNavLogoWrapper: {
display: "flex",
padding: "0 12px 0 5px",
alignItems: "center",
lineHeight: 0
display: `flex`,
padding: `0 12px 0 5px`,
alignItems: `center`
},
topNavSeparator: {
width: 0,
height: "32px",
margin: "12px 6px",
borderLeftWidth: "1px",
borderLeftColor: themeData ? themeData["divider.heavyColor"] : "transparent",
borderLeftStyle: "solid"
height: `32px`,
margin: `12px 6px`,
borderLeftWidth: `1px`,
borderLeftColor: themeData ? themeData["divider.heavyColor"] : `transparent`,
borderLeftStyle: `solid`
},
topNavProfileAction: {
display: "flex",
alignItems: "center",
boxSizing: "border-box"
display: `flex`,
alignItems: `center`,
boxSizing: `border-box`
},
topNavProfileActionButtonWrapper: {
display: "flex",
alignItems: "center",
padding: "0 6px"
display: `flex`,
alignItems: `center`,
padding: `0 6px`
},
topNavLogo: {
display: "flex",
textDecoration: "none",
cursor: "pointer"
display: `flex`,
textDecoration: `none`,
cursor: `pointer`
},
topNavLogoTextPresenter: {
display: "inline-block",
display: `inline-block`,
margin: 0,
fontSize: "16px",
lineHeight: "16px",
fontSize: `16px`,
lineHeight: `16px`,
fontWeight: 400
},
topNavInteractions: {
display: "flex",
alignItems: "center",
padding: "0 6px"
display: `flex`,
alignItems: `center`,
padding: `0 6px`
},
topNavAction: {
display: "flex",
height: "56px",
alignItems: "center"
display: `flex`,
height: `56px`,
alignItems: `center`
},
topNavActionFlyoutPanel: {
width: "276px",
maxHeight: "360px",
overflowY: "auto",
msOverflowStyle: "-ms-autohiding-scrollbar"
width: `276px`,
maxHeight: `360px`,
overflowY: `auto`,
msOverflowStyle: `-ms-autohiding-scrollbar`
}
};
return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
}
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$a = ["children", "stylesheet"];
function ActionPresenter(_ref) {
var children = _ref.children,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties(_ref, ["children", "stylesheet"]);
let {
children,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$a);
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
"div",
{ className: emotion.cx([className, emotion.css(styles.topNavAction)]) },
children
);
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.cx([className, emotion.css(styles.topNavAction)])
}, children);
}
ActionPresenter.propTypes = {
/** Content to render inside an action */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -156,79 +256,66 @@ ActionPresenter.__docgenInfo = {

function ActionFlyoutPanelPresenter(_ref) {
var children = _ref.children,
handleScroll = _ref.handleScroll,
innerRef = _ref.innerRef,
customStylesheet = _ref.stylesheet;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
Flyout.Panel,
{ innerRef: innerRef },
React.createElement(
"div",
{
className: emotion.css(styles.topNavActionFlyoutPanel),
onScroll: handleScroll
},
children
)
);
let {
children,
handleScroll,
innerRef,
stylesheet: customStylesheet
} = _ref;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React__default["default"].createElement(Flyout.Panel, {
innerRef: innerRef
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.css(styles.topNavActionFlyoutPanel),
onScroll: handleScroll
}, children));
}
ActionFlyoutPanelPresenter.propTypes = {
children: PropTypes.node,
handleScroll: PropTypes.func,
innerRef: PropTypes.func,
stylesheet: PropTypes.func
children: PropTypes__default["default"].node,
handleScroll: PropTypes__default["default"].func,
innerRef: PropTypes__default["default"].func,
stylesheet: PropTypes__default["default"].func
};
/* eslint-disable-next-line react/prop-types, prettier/prettier */
/* eslint-disable-next-line react/prop-types, prettier/prettier */
function renderActionFlyoutPanel(_ref2) {
var content = _ref2.content,
innerRef = _ref2.innerRef,
customStylesheet = _ref2.stylesheet;
return React.createElement(
ActionFlyoutPanelPresenter,
{
innerRef: innerRef,
stylesheet: customStylesheet
},
content
);
let {
content,
innerRef,
stylesheet: customStylesheet
} = _ref2;
return /*#__PURE__*/React__default["default"].createElement(ActionFlyoutPanelPresenter, {
innerRef: innerRef,
stylesheet: customStylesheet
}, content);
}
var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$9 = ["icon", "onClick", "title"];
function NavButtonPresenter(_ref) {
var icon = _ref.icon,
onClick = _ref.onClick,
title = _ref.title,
otherProps = _objectWithoutProperties$1(_ref, ["icon", "onClick", "title"]);
let {
icon,
onClick,
title
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$9);
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var metadata = _ref2.metadata;
var NavDefaultIcon = metadata.densityId === "high-density" ? icons.List16 : icons.List24;
return React.createElement(IconButton, _extends$1({
icon: icon || React.createElement(NavDefaultIcon, null),
onClick: onClick,
title: title
}, otherProps));
}
);
return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref2 => {
let {
metadata
} = _ref2;
const NavDefaultIcon = metadata.densityId === "high-density" ? icons.List16 : icons.List24;
return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], _extends({
icon: icon || /*#__PURE__*/React__default["default"].createElement(NavDefaultIcon, null),
onClick: onClick,
title: title
}, otherProps));
});
}
NavButtonPresenter.defaultProps = {
title: ""
};
NavButtonPresenter.propTypes = {
icon: PropTypes.element,
onClick: PropTypes.func,
title: PropTypes.string
icon: PropTypes__default["default"].element,
onClick: PropTypes__default["default"].func,
title: PropTypes__default["default"].string
};

@@ -267,59 +354,59 @@ NavButtonPresenter.__docgenInfo = {

function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$8 = ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "icon", "onClick", "stylesheet", "title"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var NavAction = function NavAction(props) {
var alterCoordinates = props.alterCoordinates,
anchorPoint = props.anchorPoint,
children = props.children,
fallbackAnchorPoints = props.fallbackAnchorPoints,
icon = props.icon,
onClick = props.onClick,
stylesheet = props.stylesheet,
title = props.title,
otherProps = _objectWithoutProperties$2(props, ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "icon", "onClick", "stylesheet", "title"]);
const NavAction = props => {
const {
alterCoordinates,
anchorPoint,
children,
fallbackAnchorPoints,
icon,
onClick,
stylesheet,
title
} = props,
otherProps = _objectWithoutProperties(props, _excluded$8);
var className = otherProps.className;
var topNavNavActionFlyoutClassName = utils.createCustomClassNames(className, "top-nav__nav-action-flyout");
var topNavNavActionButtonClassName = utils.createCustomClassNames(className, "top-nav__nav-action-button");
return React.createElement(
ActionPresenter,
{ className: className, stylesheet: stylesheet },
React.createElement(
Flyout__default,
{
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: topNavNavActionFlyoutClassName,
content: children,
fallbackAnchorPoints: fallbackAnchorPoints,
onClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
},
function (_ref) {
var handleClick = _ref.handleClick;
return React.createElement(NavButtonPresenter, {
className: topNavNavActionButtonClassName,
icon: icon,
onClick: utils.combineEventHandlers(onClick, handleClick),
title: title
});
}
)
);
const {
className
} = otherProps;
const topNavNavActionFlyoutClassName = utils.createCustomClassNames(className, "top-nav__nav-action-flyout");
const topNavNavActionButtonClassName = utils.createCustomClassNames(className, "top-nav__nav-action-button");
return /*#__PURE__*/React__default["default"].createElement(ActionPresenter, {
className: className,
stylesheet: stylesheet
}, /*#__PURE__*/React__default["default"].createElement(Flyout__default["default"], {
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: topNavNavActionFlyoutClassName,
content: children,
fallbackAnchorPoints: fallbackAnchorPoints,
onClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
}, _ref => {
let {
handleClick
} = _ref;
return /*#__PURE__*/React__default["default"].createElement(NavButtonPresenter, {
className: topNavNavActionButtonClassName,
icon: icon,
onClick: utils.combineEventHandlers(onClick, handleClick),
title: title
});
}));
};
NavAction.displayName = "NavAction";
NavAction.propTypes = {
/** Manipulate flyout coordinates before each render */
alterCoordinates: PropTypes.func,
alterCoordinates: PropTypes__default["default"].func,
/** Where the flyout will be anchored relative to target */
anchorPoint: PropTypes.string,
anchorPoint: PropTypes__default["default"].string,
/** Content to render inside the pull down flyout */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/**

@@ -330,13 +417,16 @@ * When the flyout overflows the viewport, it'll attempt to

*/
fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(Flyout.AVAILABLE_ANCHOR_POINTS)),
fallbackAnchorPoints: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(Flyout.AVAILABLE_ANCHOR_POINTS)),
/** Icon to be displayed in the top bar for the pull down, default is List */
icon: PropTypes.element,
icon: PropTypes__default["default"].element,
/** Callback when the flyout is opened */
onClick: PropTypes.func,
onClick: PropTypes__default["default"].func,
/** Title text displayed in the tooltip on button hover */
title: PropTypes.string,
title: PropTypes__default["default"].string,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};
NavAction.defaultProps = {

@@ -347,3 +437,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return Flyout.offsetPanelHorizontal(Flyout.offsetContainerVertical(coordinates, 8), 57);

@@ -435,53 +525,49 @@ },

function _objectWithoutProperties$3(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$7 = ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "onClick", "stylesheet"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var HelpAction = function HelpAction(props) {
var alterCoordinates = props.alterCoordinates,
anchorPoint = props.anchorPoint,
children = props.children,
fallbackAnchorPoints = props.fallbackAnchorPoints,
onClick = props.onClick,
stylesheet = props.stylesheet,
otherProps = _objectWithoutProperties$3(props, ["alterCoordinates", "anchorPoint", "children", "fallbackAnchorPoints", "onClick", "stylesheet"]);
const HelpAction = props => {
const {
alterCoordinates,
anchorPoint,
children,
fallbackAnchorPoints,
onClick,
stylesheet
} = props,
otherProps = _objectWithoutProperties(props, _excluded$7);
var className = otherProps.className;
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var metadata = _ref.metadata;
var title = "View help";
var HelpIcon = metadata.densityId === "high-density" ? icons.Help16 : icons.Help24;
return React.createElement(
NavAction,
{
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: className,
fallbackAnchorPoints: fallbackAnchorPoints,
icon: React.createElement(HelpIcon, null),
onClick: onClick,
stylesheet: stylesheet,
title: title
},
children
);
}
);
const {
className
} = otherProps;
return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref => {
let {
metadata
} = _ref;
const title = "View help";
const HelpIcon = metadata.densityId === "high-density" ? icons.Help16 : icons.Help24;
return /*#__PURE__*/React__default["default"].createElement(NavAction, {
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
className: className,
fallbackAnchorPoints: fallbackAnchorPoints,
icon: /*#__PURE__*/React__default["default"].createElement(HelpIcon, null),
onClick: onClick,
stylesheet: stylesheet,
title: title
}, children);
});
};
HelpAction.displayName = "HelpAction";
HelpAction.propTypes = {
/** Manipulate flyout coordinates before each render */
alterCoordinates: PropTypes.func,
alterCoordinates: PropTypes__default["default"].func,
/** Where the flyout will be anchored relative to target */
anchorPoint: PropTypes.string,
anchorPoint: PropTypes__default["default"].string,
/** Content to render inside the help flyout */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/**

@@ -492,9 +578,10 @@ * When the flyout overflows the viewport, it'll attempt to

*/
fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(Flyout.AVAILABLE_ANCHOR_POINTS)),
fallbackAnchorPoints: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(Flyout.AVAILABLE_ANCHOR_POINTS)),
/** Callback when the flyout is opened */
onClick: PropTypes.func,
onClick: PropTypes__default["default"].func,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};
HelpAction.defaultProps = {

@@ -505,3 +592,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return Flyout.offsetPanelHorizontal(Flyout.offsetContainerVertical(coordinates, 8), 57);

@@ -579,30 +666,31 @@ },

function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$6 = ["children", "innerRef", "stylesheet"];
function InteractionsPresenter(_ref) {
var children = _ref.children,
innerRef = _ref.innerRef,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$4(_ref, ["children", "innerRef", "stylesheet"]);
let {
children,
innerRef,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$6);
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
"div",
{
className: emotion.cx([className, emotion.css(styles.topNavInteractions)]),
ref: innerRef
},
children
);
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.cx([className, emotion.css(styles.topNavInteractions)]),
ref: innerRef
}, children);
}
InteractionsPresenter.propTypes = {
/** Actions to be rendered */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/** Reference the wrappinf <div /> element */
innerRef: PropTypes.func,
innerRef: PropTypes__default["default"].func,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -637,14 +725,13 @@ InteractionsPresenter.__docgenInfo = {

var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
const _excluded$5 = ["stylesheet"];
function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var Interactions = function Interactions(props) {
const Interactions = props => {
/**
* @todo Complete render prop implementation with alignment helpers
*/
var renderChildren = function renderChildren() {
var children = props.children;
const renderChildren = () => {
const {
children
} = props;
if (typeof children === "function") {

@@ -657,19 +744,19 @@ return children();

var stylesheet = props.stylesheet,
otherProps = _objectWithoutProperties$5(props, ["stylesheet"]);
const {
stylesheet
} = props,
otherProps = _objectWithoutProperties(props, _excluded$5);
return React.createElement(
InteractionsPresenter,
_extends$2({ stylesheet: stylesheet }, otherProps),
renderChildren()
);
return /*#__PURE__*/React__default["default"].createElement(InteractionsPresenter, _extends({
stylesheet: stylesheet
}, otherProps), renderChildren());
};
Interactions.displayName = "Interactions";
Interactions.propTypes = {
/** Actions to be rendered */
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -703,18 +790,20 @@ Interactions.__docgenInfo = {

function LogoTextPresenter(_ref) {
var children = _ref.children,
customStylesheet = _ref.stylesheet;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
Typography,
{ variant: "h1", style: styles.topNavLogoTextPresenter },
children
);
let {
children,
stylesheet: customStylesheet
} = _ref;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
variant: "h1",
style: styles.topNavLogoTextPresenter
}, children);
}
LogoTextPresenter.propTypes = {
/** Logo content */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -742,11 +831,9 @@ LogoTextPresenter.__docgenInfo = {

function _objectWithoutProperties$6(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$4 = ["label", "link", "title", "onClick", "children", "dangerouslySetInnerHTML", "stylesheet"];
function renderChildren(children, customStylesheet) {
if (typeof children === "string") {
return React.createElement(
LogoTextPresenter,
{ stylesheet: customStylesheet },
children
);
return /*#__PURE__*/React__default["default"].createElement(LogoTextPresenter, {
stylesheet: customStylesheet
}, children);
}

@@ -758,46 +845,51 @@

function LogoPresenter(_ref) {
var label = _ref.label,
link = _ref.link,
title = _ref.title,
onClick = _ref.onClick,
children = _ref.children,
dangerouslySetInnerHTML = _ref.dangerouslySetInnerHTML,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$6(_ref, ["label", "link", "title", "onClick", "children", "dangerouslySetInnerHTML", "stylesheet"]);
let {
label,
link,
title,
onClick,
children,
dangerouslySetInnerHTML,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$4);
var Wrapper = link ? "a" : "div";
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
return React.createElement(
Wrapper,
{
className: emotion.cx([className, emotion.css(styles.topNavLogo)]),
href: link,
title: title,
"aria-label": label,
onClick: onClick,
dangerouslySetInnerHTML: dangerouslySetInnerHTML
},
renderChildren(children, customStylesheet)
);
const Wrapper = link ? "a" : "div";
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
className: emotion.cx([className, emotion.css(styles.topNavLogo)]),
href: link,
title: title,
"aria-label": label,
onClick: onClick,
dangerouslySetInnerHTML: dangerouslySetInnerHTML
}, renderChildren(children, customStylesheet));
}
LogoPresenter.propTypes = {
/** A11y label */
label: PropTypes.string,
label: PropTypes__default["default"].string,
/** URL to link to */
link: PropTypes.string,
link: PropTypes__default["default"].string,
/** A11y title */
title: PropTypes.string,
title: PropTypes__default["default"].string,
/** Click event listener */
onClick: PropTypes.func,
onClick: PropTypes__default["default"].func,
/** Logo content */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/** Proxy for React's `dangerouslySetInnerHTML` */
// eslint-disable-next-line react/forbid-prop-types
dangerouslySetInnerHTML: PropTypes.any,
dangerouslySetInnerHTML: PropTypes__default["default"].any,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -860,35 +952,27 @@ LogoPresenter.__docgenInfo = {

var _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties$7(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$3 = ["children"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var NotificationsAction = function NotificationsAction(props) {
var children = props.children,
otherProps = _objectWithoutProperties$7(props, ["children"]);
const NotificationsAction = props => {
const {
children
} = props,
otherProps = _objectWithoutProperties(props, _excluded$3);
var className = otherProps.className,
stylesheet = otherProps.stylesheet;
var topNavNotificationsFlyoutClassName = utils.createCustomClassNames(className, "top-nav__notifications-flyout");
return React.createElement(
ActionPresenter,
{ stylesheet: stylesheet, className: className },
React.createElement(
NotificationsFlyout__default,
_extends$3({}, otherProps, {
stylesheet: stylesheet,
className: topNavNotificationsFlyoutClassName
}),
children
)
);
const {
className,
stylesheet
} = otherProps;
const topNavNotificationsFlyoutClassName = utils.createCustomClassNames(className, "top-nav__notifications-flyout");
return /*#__PURE__*/React__default["default"].createElement(ActionPresenter, {
stylesheet: stylesheet,
className: className
}, /*#__PURE__*/React__default["default"].createElement(NotificationsFlyout__default["default"], _extends({}, otherProps, {
stylesheet: stylesheet,
className: topNavNotificationsFlyoutClassName
}), children));
};
NotificationsAction.displayName = "NotificationsAction";
NotificationsAction.propTypes = NotificationsFlyout__default.propTypes;
NotificationsAction.propTypes = NotificationsFlyout__default["default"].propTypes;
NotificationsAction.defaultProps = {

@@ -899,3 +983,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return Flyout.offsetPanelHorizontal(Flyout.offsetContainerVertical(coordinates, 8), 93);

@@ -937,22 +1021,21 @@ },

function SeparatorPresenter(_ref) {
var customStylesheet = _ref.stylesheet;
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var resolvedRoles = _ref2.resolvedRoles;
var styles = stylesheet({ stylesheet: customStylesheet }, resolvedRoles);
return React.createElement("div", {
role: "presentation",
"aria-hidden": true,
className: emotion.css(styles.topNavSeparator)
});
}
);
let {
stylesheet: customStylesheet
} = _ref;
return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref2 => {
let {
resolvedRoles
} = _ref2;
const styles = stylesheet({
stylesheet: customStylesheet
}, resolvedRoles);
return /*#__PURE__*/React__default["default"].createElement("div", {
role: "presentation",
"aria-hidden": true,
className: emotion.css(styles.topNavSeparator)
});
});
}
SeparatorPresenter.propTypes = {
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -973,38 +1056,33 @@ SeparatorPresenter.__docgenInfo = {

function _objectWithoutProperties$8(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$2 = ["children", "stylesheet"];
/**
* @todo Remove the <SeparatorPresenter /> and wrapping <div /> component
*/
function ProfileActionPresenter(_ref) {
var children = _ref.children,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$8(_ref, ["children", "stylesheet"]);
let {
children,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded$2);
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, {});
var topNavProfileActionButtonWrapperClassName = utils.createCustomClassNames(className, "top-nav-profile-action-button-wrapper");
return React.createElement(
"div",
{ className: emotion.css(styles.topNavProfileAction) },
React.createElement(SeparatorPresenter, null),
React.createElement(
ActionPresenter,
{ className: className, stylesheet: customStylesheet },
React.createElement(
"div",
{
className: emotion.cx([topNavProfileActionButtonWrapperClassName, emotion.css(styles.topNavProfileActionButtonWrapper)])
},
children
)
)
);
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, {});
const topNavProfileActionButtonWrapperClassName = utils.createCustomClassNames(className, "top-nav-profile-action-button-wrapper");
return /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.css(styles.topNavProfileAction)
}, /*#__PURE__*/React__default["default"].createElement(SeparatorPresenter, null), /*#__PURE__*/React__default["default"].createElement(ActionPresenter, {
className: className,
stylesheet: customStylesheet
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.cx([topNavProfileActionButtonWrapperClassName, emotion.css(styles.topNavProfileActionButtonWrapper)])
}, children)));
}
ProfileActionPresenter.propTypes = {
children: PropTypes.node,
stylesheet: PropTypes.func
children: PropTypes__default["default"].node,
stylesheet: PropTypes__default["default"].func
};

@@ -1032,53 +1110,51 @@ ProfileActionPresenter.__docgenInfo = {

function _objectWithoutProperties$9(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded$1 = ["alterCoordinates", "anchorPoint", "avatarImage", "avatarName", "children", "fallbackAnchorPoints", "onClick", "stylesheet"];
/** @typedef {import("@hig/flyout").Coordinates} Coordinates */
var ProfileAction = function ProfileAction(props) {
var alterCoordinates = props.alterCoordinates,
anchorPoint = props.anchorPoint,
avatarImage = props.avatarImage,
avatarName = props.avatarName,
children = props.children,
fallbackAnchorPoints = props.fallbackAnchorPoints,
onClick = props.onClick,
stylesheet = props.stylesheet,
otherProps = _objectWithoutProperties$9(props, ["alterCoordinates", "anchorPoint", "avatarImage", "avatarName", "children", "fallbackAnchorPoints", "onClick", "stylesheet"]);
const ProfileAction = props => {
const {
alterCoordinates,
anchorPoint,
avatarImage,
avatarName,
children,
fallbackAnchorPoints,
onClick,
stylesheet
} = props,
otherProps = _objectWithoutProperties(props, _excluded$1);
var className = otherProps.className;
var topNavProfileFlyoutClassName = utils.createCustomClassNames(className, "top-nav__profile-flyout");
return React.createElement(
ProfileActionPresenter,
{ className: className },
React.createElement(
ProfileFlyout__default,
{
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
avatarImage: avatarImage,
avatarName: avatarName,
className: topNavProfileFlyoutClassName,
fallbackAnchorPoints: fallbackAnchorPoints,
onProfileImageClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
},
children
)
);
const {
className
} = otherProps;
const topNavProfileFlyoutClassName = utils.createCustomClassNames(className, "top-nav__profile-flyout");
return /*#__PURE__*/React__default["default"].createElement(ProfileActionPresenter, {
className: className
}, /*#__PURE__*/React__default["default"].createElement(ProfileFlyout__default["default"], {
alterCoordinates: alterCoordinates,
anchorPoint: anchorPoint,
avatarImage: avatarImage,
avatarName: avatarName,
className: topNavProfileFlyoutClassName,
fallbackAnchorPoints: fallbackAnchorPoints,
onProfileImageClick: onClick,
panel: renderActionFlyoutPanel,
stylesheet: stylesheet
}, children));
};
ProfileAction.displayName = "ProfileAction";
ProfileAction.propTypes = {
/** Manipulate flyout coordinates before each render */
alterCoordinates: PropTypes.func,
alterCoordinates: PropTypes__default["default"].func,
/** Where the flyout will be anchored relative to target */
anchorPoint: PropTypes.string,
anchorPoint: PropTypes__default["default"].string,
/** The name that will converted into initials, and displayed when an image isn't available */
avatarName: PropTypes.string.isRequired,
avatarName: PropTypes__default["default"].string.isRequired,
/** Url to a profile image */
avatarImage: PropTypes.string,
avatarImage: PropTypes__default["default"].string,
/**

@@ -1089,11 +1165,13 @@ * When the flyout overflows the viewport, it'll attempt to

*/
fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(ProfileFlyout.AVAILABLE_ANCHOR_POINTS)),
fallbackAnchorPoints: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(ProfileFlyout.AVAILABLE_ANCHOR_POINTS)),
/** Content to render in the profile flyout */
children: PropTypes.node,
children: PropTypes__default["default"].node,
/** Callback when the flyout is opened */
onClick: PropTypes.func,
onClick: PropTypes__default["default"].func,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};
ProfileAction.defaultProps = {

@@ -1104,3 +1182,3 @@ /**

*/
alterCoordinates: function alterCoordinates(coordinates) {
alterCoordinates(coordinates) {
return Flyout.offsetPanelHorizontal(Flyout.offsetContainerVertical(coordinates, 10), 6);

@@ -1192,52 +1270,47 @@ },

function _objectWithoutProperties$10(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const _excluded = ["leftActions", "rightActions", "logo", "stylesheet"];
function TopNav(_ref) {
var leftActions = _ref.leftActions,
rightActions = _ref.rightActions,
logo = _ref.logo,
customStylesheet = _ref.stylesheet,
otherProps = _objectWithoutProperties$10(_ref, ["leftActions", "rightActions", "logo", "stylesheet"]);
let {
leftActions,
rightActions,
logo,
stylesheet: customStylesheet
} = _ref,
otherProps = _objectWithoutProperties(_ref, _excluded);
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var resolvedRoles = _ref2.resolvedRoles;
var className = otherProps.className;
var styles = stylesheet({ stylesheet: customStylesheet }, resolvedRoles);
var topNavLogoWrapperClassName = utils.createCustomClassNames(className, "top-nav-logo-wrapper");
var topNavSpacerClassName = utils.createCustomClassNames(className, "top-nav-spacer");
return React.createElement(
"div",
{ className: emotion.cx([className, emotion.css(styles.topNav)]) },
leftActions,
React.createElement(
"div",
{
className: emotion.cx([topNavLogoWrapperClassName, emotion.css(styles.topNavLogoWrapper)])
},
logo
),
React.createElement("div", {
role: "presentation",
"aria-hidden": true,
className: emotion.cx([topNavSpacerClassName, emotion.css(styles.topNavSpacer)])
}),
rightActions
);
}
);
return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref2 => {
let {
resolvedRoles
} = _ref2;
const {
className
} = otherProps;
const styles = stylesheet({
stylesheet: customStylesheet
}, resolvedRoles);
const topNavLogoWrapperClassName = utils.createCustomClassNames(className, "top-nav-logo-wrapper");
const topNavSpacerClassName = utils.createCustomClassNames(className, "top-nav-spacer");
return /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.cx([className, emotion.css(styles.topNav)])
}, leftActions, /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.cx([topNavLogoWrapperClassName, emotion.css(styles.topNavLogoWrapper)])
}, logo), /*#__PURE__*/React__default["default"].createElement("div", {
role: "presentation",
"aria-hidden": true,
className: emotion.cx([topNavSpacerClassName, emotion.css(styles.topNavSpacer)])
}), rightActions);
});
}
TopNav.propTypes = {
/** Actions to render to the left of the logo */
leftActions: PropTypes.node,
leftActions: PropTypes__default["default"].node,
/** Actions to render on the right of the bar */
rightActions: PropTypes.node,
rightActions: PropTypes__default["default"].node,
/** Content to render as the logo */
logo: PropTypes.node,
logo: PropTypes__default["default"].node,
/** Function to modify the component's styles */
stylesheet: PropTypes.func
stylesheet: PropTypes__default["default"].func
};

@@ -1284,3 +1357,2 @@ TopNav.__docgenInfo = {

TopNav.Separator = SeparatorPresenter;
/**

@@ -1296,2 +1368,3 @@ * @todo Remove the static properties below

*/
TopNav.HelpAction = HelpAction;

@@ -1301,12 +1374,15 @@ TopNav.ProfileContent = ProfileFlyout.ProfileContent;

exports.ProfileContent = ProfileFlyout.ProfileContent;
Object.defineProperty(exports, 'ProfileContent', {
enumerable: true,
get: function () { return ProfileFlyout.ProfileContent; }
});
exports.Action = ActionPresenter;
exports.HelpAction = HelpAction;
exports.Interactions = Interactions;
exports.Logo = LogoPresenter;
exports.LogoText = LogoTextPresenter;
exports.NavAction = NavAction;
exports.NotificationsAction = NotificationsAction;
exports.ProfileAction = ProfileAction;
exports.NavAction = NavAction;
exports.Action = ActionPresenter;
exports.Logo = LogoPresenter;
exports.LogoText = LogoTextPresenter;
exports.Separator = SeparatorPresenter;
exports.default = TopNav;
exports["default"] = TopNav;

7

CHANGELOG.md

@@ -0,1 +1,8 @@

# [@hig/top-nav-v4.1.2](https://github.com/Autodesk/hig/compare/@hig/top-nav@4.1.1...@hig/top-nav@4.1.2) (2022-06-02)
### Bug Fixes
* remove lineHeight in topNavLogoWrapper ([122abc6](https://github.com/Autodesk/hig/commit/122abc6))
# [@hig/top-nav-v4.1.1](https://github.com/Autodesk/hig/compare/@hig/top-nav@4.1.0...@hig/top-nav@4.1.1) (2022-01-31)

@@ -2,0 +9,0 @@

4

package.json
{
"name": "@hig/top-nav",
"version": "4.1.1",
"version": "4.1.2",
"description": "HIG Top Navigation",

@@ -40,3 +40,3 @@ "author": "Autodesk Inc.",

"@hig/theme-context": "^4.1.0",
"@hig/theme-data": "^2.23.0",
"@hig/theme-data": "^2.26.0",
"react": "^17.0.0"

@@ -43,0 +43,0 @@ },

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc