npm - app-layout-frame - Versions diffs - 0.0.9 → 0.0.10 - Mend

app-layout-frame 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/index.modern.js +1 -1
package/dist/index.modern.js.map +1 -1
package/dist/layout/components/LayoutFrame/LayoutFrame.d.ts +3 -1
package/dist/layout/components/MyAccountMenu/MyAccountMenu.d.ts +5 -1
package/dist/layout/components/TopBar/TopBar.d.ts +3 -1
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}require("@7shifts/sous-chef/dist/index.css");var t=require("react"),a=e(t),n=e(require("classnames")),r=require("@7shifts/sous-chef"),l=require("react-router-dom"),o={"layout-frame":"_2C1bf","layout-frame--no-height":"___2VV","layout-frame__middle-area":"_34YPL","layout-frame__middle-area--full-size":"_jG606","layout-frame__middle-area--no-footer-padding":"_2q-8S","layout-frame__side-bar":"_2dNiZ","layout-frame__side-bar--expanded":"_3kzKX","layout-frame__top-bar":"_299Kx","layout-frame__top-bar--hidden":"_3Gz0Y","layout-frame__content":"_Ri_78"},i=function(){return Boolean(window.navigator.maxTouchPoints)},c=function(e){var t,l=e.as,o=void 0===l?"li":l,i=e.isActive,c=e.children,m={className:n("_1ycHa",(t={},t._1D7jK=void 0!==i&&i,t))},s=a.createElement(r.Inline,{alignItems:"center",space:16,flex:["0 1 auto","0 0 142px"]},c);return a.createElement(o,m,s)},m=function(e){var t,l=e.isActive,o=e.icon,i=e.badge,c=e.children,m="string"==typeof i&&""!==i,s="number"==typeof i&&i>0;return a.createElement("li",{className:n("_amex_",(t={},t._WdXeV=void 0!==l&&l,t._1zt6h=!o,t))},o,a.createElement("div",{className:"_lLwWh"},c,s&&a.createElement(r.Badge,null,function(e){if("number"==typeof e){if(e>0&&e<=99)return String(e);if(e>99)return"99+"}else if("string"==typeof e)return"0"===e?null:parseInt(e)>99?"99+":e;return null}(i)),m&&a.createElement(r.Chip,null,i)))},s=function(e){var t,r=e.children;return a.createElement("span",{className:n("_1ne7X",(t={},t["_3jq-L"]="boolean"==typeof r,t["_1caO-"]="number"==typeof r,t)),"data-testid":"notification-badge"},r)},u={"side-nav-menu-item-group__submenu":"_3_Pzu"},d=function(e){var n=e.isExpanded,o=e.toggleExpand,i=e.item,d=i.label,p=i.badge,f=Boolean(i.items.find(function(e){return e.isActive})),v=t.useState(!!f),E=v[0],_=v[1],g=i.items.sort(function(e,t){return Number(e.isPaywalled||!1)-Number(t.isPaywalled||!1)}),y=i.icon;return a.createElement("li",{className:u["side-nav-menu-item-group"]},a.createElement(l.Link,{to:i.url||i.items[0].url,key:d,onClick:function(){if(!n&&f&&o)return o(),void _(!0);E&&!f||_(!E)}},a.createElement(c,{as:"div",isActive:f},y&&a.createElement(a.Fragment,null,a.createElement(y,null),p>0?a.createElement(s,null):void 0),n&&d)),n&&f&&a.createElement("ul",{className:u["side-nav-menu-item-group__submenu"]},g.map(function(e){return a.createElement(l.Link,{to:e.url,key:e.label,onClick:function(){e.onClick&&e.onClick()}},a.createElement(m,{isActive:e.isActive,badge:e.badge,icon:e.isPaywalled?a.createElement(r.IconAward,{size:"medium",color:"eggplant-500"}):void 0},e.label))})))},p=function(e){var t=e.isExpanded,n=e.item,r=n.label,o=n.isActive,i=n.badge,m=n.icon;return a.createElement(l.Link,{to:n.url,key:r,onClick:function(e){o&&e.preventDefault(),n.onClick&&n.onClick()}},a.createElement(c,{isActive:o},m&&a.createElement(a.Fragment,null,a.createElement(m,null),i>0?a.createElement(s,null):void 0),t&&r))},f=function(e){var t=e.isExpanded,n=e.toggleExpand;return a.createElement("ul",{className:"_244gq"},e.navItems.map(function(e,r){return"type"in e?a.createElement("div",{key:r,className:"_BLBDK"}):"items"in e?a.createElement(d,{key:e.label,isExpanded:t,item:e,toggleExpand:n}):a.createElement(p,{key:e.label,isExpanded:t,item:e})}))},v=function(e){var t=e.navPosition,n=void 0===t?"collapsed":t,l=e.toggleExpand,o=e.navItems,c=e.appLogo,m="expanded"===n||e.isHovering,s=i();return a.createElement("nav",{className:"_9eWEa"},a.createElement("div",{className:"_2gqbS"},a.createElement(r.Inline,{alignItems:"center",justifyContent:"space-between"},(!s||m)&&a.createElement("div",{className:"_2l01n"},c),(m||s)&&a.createElement("button",{onClick:l,className:"_1Ccg2"},a.createElement("collapsed"===n?r.IconChevronRight:r.IconChevronLeft,null)))),a.createElement(f,{isExpanded:m,toggleExpand:l,navItems:o}))},E=function(e){var t=e.companyName;return a.createElement("div",{className:"_9ii6i"},a.createElement("div",{className:"_3iCo3"},a.createElement(r.Avatar,{size:"large",url:e.companyLogoURL})),a.createElement(r.Tooltip,{overlay:"Company name"},a.createElement("span",{className:"_2IZqu"},t)))},_=function(){var e=a.createElement("div",{className:"_2yvUY"},a.createElement(r.Avatar,{size:"large",url:"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg"}));return a.createElement(r.Dropdown,{trigger:e,triggersOn:"hover",zIndex:6},a.createElement(r.DropdownList,null,a.createElement(r.DropdownListItem,{href:"/employees"},"My account"),a.createElement(r.DropdownListItem,{href:"/employees"},"Log out")))},g=function(e){var t=e.actions;return a.createElement("div",{className:"_1Hpad"},a.createElement("div",null,a.createElement(E,{companyLogoURL:e.companyLogoURL,companyName:e.companyName})),a.createElement(r.Inline,{space:24,alignItems:"center"},a.createElement(r.Inline,{space:12,alignItems:"center"},t),a.createElement(_,null)))};exports.LayoutFrame=function(e){var r,l,c=e.navItems,m=e.appLogo,s=e.actions,u=e.companyLogoURL,d=e.companyName,p=e.children,f=t.useRef(null),E=function(e,a){var n=t.useState(function(){try{var t=window.localStorage.getItem(e);return!t||JSON.parse(t)}catch(e){return!0}}),r=n[0],l=n[1],o=t.useCallback(function(t){try{var a=t instanceof Function?t(r):t;l(a),window.localStorage.setItem(e,JSON.stringify(a))}catch(e){throw new Error(e)}},[e,r]);return[r,o]}("vertical-nav-is-expanded"),_=E[0],y=E[1],b=t.useState(!1),N=b[0],h=b[1],x=i();return a.createElement("div",{className:o["layout-frame"]},a.createElement("div",{ref:f,className:n(o["layout-frame__side-bar"],(r={},r[o["layout-frame__side-bar--expanded"]]=_,r[o["layout-frame__side-bar--collapsed"]]=!_,r)),onMouseEnter:function(){!x&&h(!0)},onMouseLeave:function(){!x&&h(!1)},style:{width:_||N?240:72}},a.createElement(v,{isHovering:N,navPosition:_?"expanded":"collapsed",toggleExpand:function(){y(!_),_&&f&&h(!1)},navItems:c,appLogo:m})),a.createElement("div",{className:n(o["layout-frame__middle-area"],(l={},l[o["layout-frame__middle-area--full-size"]]=!1,l))},a.createElement("div",{className:o["layout-frame__top-bar"]},a.createElement(g,{companyLogoURL:u,companyName:d,actions:s})),a.createElement("div",{className:o["layout-frame__content"]},p)))},exports.NavButton=function(e){var t=e.badge,n=void 0!==t&&t,l=e.onClick;return a.createElement(r.Tooltip,{overlay:e.tooltipContent},a.createElement("button",{className:"_3RkpO",tabIndex:0,onClick:function(){return l()}},e.children,!!n&&a.createElement(s,null,n)))};
+function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}require("@7shifts/sous-chef/dist/index.css");var t=require("react"),a=e(t),n=e(require("classnames")),r=require("@7shifts/sous-chef"),l=require("react-router-dom"),i={"layout-frame":"_2C1bf","layout-frame--no-height":"___2VV","layout-frame__middle-area":"_34YPL","layout-frame__middle-area--full-size":"_jG606","layout-frame__middle-area--no-footer-padding":"_2q-8S","layout-frame__side-bar":"_2dNiZ","layout-frame__side-bar--expanded":"_3kzKX","layout-frame__top-bar":"_299Kx","layout-frame__top-bar--hidden":"_3Gz0Y","layout-frame__content":"_Ri_78"},o=function(){return Boolean(window.navigator.maxTouchPoints)},c=function(e){var t,l=e.as,i=void 0===l?"li":l,o=e.isActive,c=e.children,m={className:n("_1ycHa",(t={},t._1D7jK=void 0!==o&&o,t))},u=a.createElement(r.Inline,{alignItems:"center",space:16,flex:["0 1 auto","0 0 142px"]},c);return a.createElement(i,m,u)},m=function(e){var t,l=e.isActive,i=e.icon,o=e.badge,c=e.children,m="string"==typeof o&&""!==o,u="number"==typeof o&&o>0;return a.createElement("li",{className:n("_amex_",(t={},t._WdXeV=void 0!==l&&l,t._1zt6h=!i,t))},i,a.createElement("div",{className:"_lLwWh"},c,u&&a.createElement(r.Badge,null,function(e){if("number"==typeof e){if(e>0&&e<=99)return String(e);if(e>99)return"99+"}else if("string"==typeof e)return"0"===e?null:parseInt(e)>99?"99+":e;return null}(o)),m&&a.createElement(r.Chip,null,o)))},u=function(e){var t,r=e.children;return a.createElement("span",{className:n("_1ne7X",(t={},t["_3jq-L"]="boolean"==typeof r,t["_1caO-"]="number"==typeof r,t)),"data-testid":"notification-badge"},r)},s={"side-nav-menu-item-group__submenu":"_3_Pzu"},d=function(e){var n=e.isExpanded,i=e.toggleExpand,o=e.item,d=o.label,f=o.badge,p=Boolean(o.items.find(function(e){return e.isActive})),v=t.useState(!!p),E=v[0],_=v[1],g=o.items.sort(function(e,t){return Number(e.isPaywalled||!1)-Number(t.isPaywalled||!1)}),y=o.icon;return a.createElement("li",{className:s["side-nav-menu-item-group"]},a.createElement(l.Link,{to:o.url||o.items[0].url,key:d,onClick:function(){if(!n&&p&&i)return i(),void _(!0);E&&!p||_(!E)}},a.createElement(c,{as:"div",isActive:p},y&&a.createElement(a.Fragment,null,a.createElement(y,null),f>0?a.createElement(u,null):void 0),n&&d)),n&&p&&a.createElement("ul",{className:s["side-nav-menu-item-group__submenu"]},g.map(function(e){return a.createElement(l.Link,{to:e.url,key:e.label,onClick:function(){e.onClick&&e.onClick()}},a.createElement(m,{isActive:e.isActive,badge:e.badge,icon:e.isPaywalled?a.createElement(r.IconAward,{size:"medium",color:"eggplant-500"}):void 0},e.label))})))},f=function(e){var t=e.isExpanded,n=e.item,r=n.label,i=n.isActive,o=n.badge,m=n.icon;return a.createElement(l.Link,{to:n.url,key:r,onClick:function(e){i&&e.preventDefault(),n.onClick&&n.onClick()}},a.createElement(c,{isActive:i},m&&a.createElement(a.Fragment,null,a.createElement(m,null),o>0?a.createElement(u,null):void 0),t&&r))},p=function(e){var t=e.isExpanded,n=e.toggleExpand;return a.createElement("ul",{className:"_244gq"},e.navItems.map(function(e,r){return"type"in e?a.createElement("div",{key:r,className:"_BLBDK"}):"items"in e?a.createElement(d,{key:e.label,isExpanded:t,item:e,toggleExpand:n}):a.createElement(f,{key:e.label,isExpanded:t,item:e})}))},v=function(e){var t=e.navPosition,n=void 0===t?"collapsed":t,l=e.toggleExpand,i=e.navItems,c=e.appLogo,m="expanded"===n||e.isHovering,u=o();return a.createElement("nav",{className:"_9eWEa"},a.createElement("div",{className:"_2gqbS"},a.createElement(r.Inline,{alignItems:"center",justifyContent:"space-between"},(!u||m)&&a.createElement("div",{className:"_2l01n"},c),(m||u)&&a.createElement("button",{onClick:l,className:"_1Ccg2"},a.createElement("collapsed"===n?r.IconChevronRight:r.IconChevronLeft,null)))),a.createElement(p,{isExpanded:m,toggleExpand:l,navItems:i}))},E=function(e){var t=e.companyName;return a.createElement("div",{className:"_9ii6i"},a.createElement("div",{className:"_3iCo3"},a.createElement(r.Avatar,{size:"large",url:e.companyLogoURL})),a.createElement(r.Tooltip,{overlay:"Company name"},a.createElement("span",{className:"_2IZqu"},t)))},_=function(e){var t=e.accountMenuDropdown,n=a.createElement("div",{className:"_2yvUY"},a.createElement(r.Avatar,{size:"large",url:e.userPrifileImageURL}));return a.createElement(r.Dropdown,{trigger:n,triggersOn:"hover",zIndex:6},t)},g=function(e){var t=e.actions,n=e.accountMenuDropdown,l=e.userPrifileImageURL;return a.createElement("div",{className:"_1Hpad"},a.createElement("div",null,a.createElement(E,{companyLogoURL:e.companyLogoURL,companyName:e.companyName})),a.createElement(r.Inline,{space:24,alignItems:"center"},a.createElement(r.Inline,{space:12,alignItems:"center"},t),a.createElement(_,{accountMenuDropdown:n,userPrifileImageURL:l})))};exports.LayoutFrame=function(e){var r,l,c=e.navItems,m=e.appLogo,u=e.actions,s=e.companyLogoURL,d=e.companyName,f=e.userPrifileImageURL,p=e.accountMenuDropdown,E=e.children,_=t.useRef(null),y=function(e,a){var n=t.useState(function(){try{var t=window.localStorage.getItem(e);return!t||JSON.parse(t)}catch(e){return!0}}),r=n[0],l=n[1],i=t.useCallback(function(t){try{var a=t instanceof Function?t(r):t;l(a),window.localStorage.setItem(e,JSON.stringify(a))}catch(e){throw new Error(e)}},[e,r]);return[r,i]}("vertical-nav-is-expanded"),b=y[0],N=y[1],L=t.useState(!1),x=L[0],I=L[1],h=o();return a.createElement("div",{className:i["layout-frame"]},a.createElement("div",{ref:_,className:n(i["layout-frame__side-bar"],(r={},r[i["layout-frame__side-bar--expanded"]]=b,r[i["layout-frame__side-bar--collapsed"]]=!b,r)),onMouseEnter:function(){!h&&I(!0)},onMouseLeave:function(){!h&&I(!1)},style:{width:b||x?240:72}},a.createElement(v,{isHovering:x,navPosition:b?"expanded":"collapsed",toggleExpand:function(){N(!b),b&&_&&I(!1)},navItems:c,appLogo:m})),a.createElement("div",{className:n(i["layout-frame__middle-area"],(l={},l[i["layout-frame__middle-area--full-size"]]=!1,l))},a.createElement("div",{className:i["layout-frame__top-bar"]},a.createElement(g,{companyLogoURL:s,companyName:d,actions:u,userPrifileImageURL:f,accountMenuDropdown:p})),a.createElement("div",{className:i["layout-frame__content"]},E)))},exports.NavButton=function(e){var t=e.badge,n=void 0!==t&&t,l=e.onClick;return a.createElement(r.Tooltip,{overlay:e.tooltipContent},a.createElement("button",{className:"_3RkpO",tabIndex:0,onClick:function(){return l()}},e.children,!!n&&a.createElement(u,null,n)))};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/layout/util/mobileDetect.ts","../src/layout/components/PrimaryNavItem/PrimaryNavItem.tsx","../src/layout/components/SecondaryNavItem/SecondaryNavItem.tsx","../src/layout/util/navDomain.ts","../src/layout/components/NotificationBadge/NotificationBadge.tsx","../src/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.tsx","../src/layout/components/SideNavMenuItem/SideNavMenuItem.tsx","../src/layout/components/SideNavMenu/SideNavMenu.tsx","../src/layout/components/SideNavBar/SideNavBar.tsx","../src/layout/constants.ts","../src/layout/components/Brand/Brand.tsx","../src/layout/components/MyAccountMenu/MyAccountMenu.tsx","../src/layout/components/TopBar/TopBar.tsx","../src/layout/components/LayoutFrame/LayoutFrame.tsx","../src/layout/util/useLocalStorage.ts","../src/layout/components/NavButton/NavButton.tsx"],"sourcesContent":["export const isTouchscreen = (): boolean => {\n return Boolean(window.navigator.maxTouchPoints);\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport styles from './primary-nav-item.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n as?: 'div' \| 'li';\n isActive?: boolean;\n children: React.ReactNode;\n};\n\nconst PrimaryNavItem = ({ as = 'li', isActive = false, children }: Props) => {\n const props = {\n className: classNames(styles['primary-nav-item'], {\n [styles['primary-nav-item--active']]: isActive\n })\n };\n\n const content = (\n <Inline alignItems=\"center\" space={16} flex={['0 1 auto', '0 0 142px']}>\n {children}\n </Inline>\n );\n\n return React.createElement(as, props, content);\n};\n\nexport default PrimaryNavItem;\n","import React from 'react';\nimport { Badge, Chip } from '@7shifts/sous-chef';\nimport classNames from 'classnames';\nimport styles from './secondary-nav-item.scss';\nimport { getBadgeContent } from '../../util/navDomain';\n\ntype Props = {\n isActive?: boolean;\n icon?: React.ReactNode;\n badge?: string \| number;\n children: React.ReactNode;\n};\n\nconst SecondaryNavItem = ({\n isActive = false,\n icon,\n badge,\n children\n}: Props) => {\n const hasChip = typeof badge === 'string' && badge !== '';\n const hasBadge = typeof badge === 'number' && badge > 0;\n return (\n <li\n className={classNames(styles['secondary-nav-item'], {\n [styles['secondary-nav-item--active']]: isActive,\n [styles['secondary-nav-item--no-icon']]: !icon\n })}\n >\n {icon}\n <div className={styles['secondary-nav-item__content']}>\n {children}\n {hasBadge && <Badge>{getBadgeContent(badge)}</Badge>}\n {hasChip && <Chip>{badge}</Chip>}\n </div>\n </li>\n );\n};\n\nexport default SecondaryNavItem;\n","export const getBadgeContent = (\n badge: (string \| null \| undefined) \| (number \| null \| undefined)\n): string \| null \| undefined => {\n if (typeof badge === 'number') {\n if (badge > 0 && badge <= 99) {\n //covers number values between 0 and 99\n return String(badge);\n } else if (badge > 99) {\n //covers number values bigger than 99\n return '99+';\n }\n } else if (typeof badge === 'string') {\n //covers all string values, excluding \"0\"\n if (badge === '0') {\n return null;\n } else if (parseInt(badge) > 99) {\n //covers number values bigger than 99\n return '99+';\n } else {\n //return all other strings\n return badge;\n }\n }\n\n return null;\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\nimport styles from './notification-badge.scss';\n\ntype Props = {\n children?: ReactNode;\n};\n\nconst NotificationBadge = ({ children }: Props): JSX.Element => {\n return (\n <span\n className={classNames(styles['notification-badge'], {\n [styles['notification-badge--bullet']]:\n typeof children === 'boolean',\n [styles['notification-badge--count']]:\n typeof children === 'number'\n })}\n data-testid=\"notification-badge\"\n >\n {children}\n </span>\n );\n};\n\nexport default NotificationBadge;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItemGroup } from '../../types';\nimport { Link } from 'react-router-dom';\nimport { IconAward } from '@7shifts/sous-chef';\nimport { useState } from 'react';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport SecondaryNavItem from '../SecondaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\nimport styles from './side-nav-menu-item-group.scss';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n item: NavBarItemGroup;\n};\n\nconst SideNavMenuItemGroup = ({ isExpanded, toggleExpand, item }: Props) => {\n const { label, badge } = item;\n const hasActiveSubmenu = Boolean(item.items.find((item) => item.isActive));\n const [isSubmenuExpanded, setIsSubmenuExpanded] = useState(\n !!hasActiveSubmenu\n );\n\n // sorts paywalled navBarItems to bottom of submenu\n const sortedNavBarItems = item.items.sort(\n (itemA, itemB) =>\n Number(itemA.isPaywalled \|\| false) -\n Number(itemB.isPaywalled \|\| false)\n );\n\n const Icon = item.icon;\n return (\n <li className={styles['side-nav-menu-item-group']}>\n <Link\n to={item.url \|\| item.items[0].url}\n key={label}\n onClick={() => {\n if (!isExpanded && hasActiveSubmenu && toggleExpand) {\n toggleExpand();\n setIsSubmenuExpanded(true);\n return;\n }\n\n if (!isSubmenuExpanded \|\| hasActiveSubmenu) {\n setIsSubmenuExpanded(!isSubmenuExpanded);\n }\n }}\n >\n <PrimaryNavItem as=\"div\" isActive={hasActiveSubmenu}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n {isExpanded && hasActiveSubmenu && (\n <ul className={styles['side-nav-menu-item-group__submenu']}>\n {sortedNavBarItems.map((subMenuItem) => (\n <Link\n to={subMenuItem.url}\n key={subMenuItem.label}\n onClick={() => {\n if (subMenuItem.onClick) {\n subMenuItem.onClick();\n }\n }}\n >\n <SecondaryNavItem\n isActive={subMenuItem.isActive}\n badge={subMenuItem.badge}\n icon={\n subMenuItem.isPaywalled ? (\n <IconAward\n size=\"medium\"\n color=\"eggplant-500\"\n />\n ) : undefined\n }\n >\n {subMenuItem.label}\n </SecondaryNavItem>\n </Link>\n ))}\n </ul>\n )}\n </li>\n );\n};\n\nexport default SideNavMenuItemGroup;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItem } from '../../types';\nimport { Link } from 'react-router-dom';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\n\ntype Props = {\n isExpanded: boolean;\n item: NavBarItem;\n};\n\nconst SideNavMenuItem = ({ isExpanded, item }: Props) => {\n const { url, label, isActive, badge } = item;\n const Icon = item.icon;\n return (\n <Link\n to={url}\n key={label}\n onClick={(e) => {\n if (isActive) {\n e.preventDefault();\n }\n if (item.onClick) {\n item.onClick();\n }\n }}\n >\n <PrimaryNavItem isActive={isActive}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n );\n};\n\nexport default SideNavMenuItem;\n","import React from 'react';\nimport styles from './side-nav-menu.scss';\nimport { NavBarItems } from '../../types';\nimport SideNavMenuItemGroup from '../SideNavMenuItemGroup/SideNavMenuItemGroup';\nimport SideNavMenuItem from '../SideNavMenuItem/SideNavMenuItem';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n};\n\nconst SideNavMenu = ({ isExpanded, toggleExpand, navItems }: Props) => {\n return (\n <ul className={styles['side-nav-menu']}>\n {navItems.map((item, index) => {\n if ('type' in item) {\n return (\n <div\n key={index}\n className={styles['side-nav-menu__divider']}\n />\n );\n }\n if ('items' in item) {\n return (\n <SideNavMenuItemGroup\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n toggleExpand={toggleExpand}\n />\n );\n }\n\n return (\n <SideNavMenuItem\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n />\n );\n })}\n </ul>\n );\n};\n\nexport default SideNavMenu;\n","import React from 'react';\nimport { IconChevronLeft, IconChevronRight, Inline } from '@7shifts/sous-chef';\nimport styles from './side-nav-bar.scss';\nimport { NavBarItems, NavPosition } from '../../types';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NAV_POSITION } from '../../constants';\nimport SideNavMenu from '../SideNavMenu/SideNavMenu';\n\ntype Props = {\n isHovering?: boolean;\n navPosition?: NavPosition;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n};\n\nconst SideNavBar = ({\n isHovering,\n navPosition = NAV_POSITION.COLLAPSED,\n toggleExpand,\n navItems,\n appLogo\n}: Props) => {\n const isExpanded = navPosition === NAV_POSITION.EXPANDED \|\| isHovering;\n const isTouchDevice = isTouchscreen();\n\n return (\n <nav className={styles['side-nav-bar']}>\n <div className={styles['side-nav-bar__header']}>\n <Inline alignItems=\"center\" justifyContent=\"space-between\">\n {(!isTouchDevice \|\| isExpanded) && (\n <div className={styles['side-nav-bar__logo']}>\n {appLogo}\n </div>\n )}\n {(isExpanded \|\| isTouchDevice) && (\n <button\n onClick={toggleExpand}\n className={styles['side-nav-bar__nav-toggle']}\n >\n {navPosition === NAV_POSITION.COLLAPSED ? (\n <IconChevronRight />\n ) : (\n <IconChevronLeft />\n )}\n </button>\n )}\n </Inline>\n </div>\n <SideNavMenu\n isExpanded={isExpanded as boolean}\n toggleExpand={toggleExpand}\n navItems={navItems}\n />\n </nav>\n );\n};\n\nexport default SideNavBar;\n","import { NavDivider } from './types';\n\nexport const NAV_POSITION = {\n EXPANDED: 'expanded' as const,\n COLLAPSED: 'collapsed' as const\n};\n\nexport const NAV_SIZE = {\n EXPANDED: 240,\n COLLAPSED: 72\n} as const;\n\nexport const DIVIDER: NavDivider = {\n type: 'divider' as const\n};\n","import React from 'react';\nimport { Avatar, Tooltip } from '@7shifts/sous-chef';\nimport styles from './brand.scss';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n};\n\nconst Brand = ({ companyLogoURL, companyName }: Props) => {\n return (\n <div className={styles['brand']}>\n <div className={styles['brand__company-photo']}>\n <Avatar size=\"large\" url={companyLogoURL} />\n </div>\n <Tooltip overlay=\"Company name\">\n <span className={styles['brand__company-name']}>\n {companyName}\n </span>\n </Tooltip>\n </div>\n );\n};\n\nexport default Brand;\n","import React from 'react';\nimport {\n Avatar,\n Dropdown,\n DropdownList,\n DropdownListItem\n} from '@7shifts/sous-chef';\nimport styles from './my-account-menu.scss';\n\nconst MyAccountMenu = () => {\n const trigger = (\n <div className={styles['my-account-menu']}>\n <Avatar\n size=\"large\"\n url=\"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg\"\n />\n </div>\n );\n\n return (\n <Dropdown trigger={trigger} triggersOn=\"hover\" zIndex={6}>\n <DropdownList>\n <DropdownListItem href=\"/employees\">\n My account\n </DropdownListItem>\n <DropdownListItem href=\"/employees\">Log out</DropdownListItem>\n </DropdownList>\n </Dropdown>\n );\n};\n\nexport default MyAccountMenu;\n","import React from 'react';\nimport Brand from '../Brand/Brand';\nimport MyAccountMenu from '../MyAccountMenu/MyAccountMenu';\nimport styles from './top-bar.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n actions: React.ReactNode[];\n};\nconst TopBar = ({ companyLogoURL, companyName, actions }: Props) => {\n return (\n <div className={styles['top-bar']}>\n <div>\n <Brand\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n />\n </div>\n <Inline space={24} alignItems=\"center\">\n <Inline space={12} alignItems=\"center\">\n {actions}\n </Inline>\n <MyAccountMenu />\n </Inline>\n </div>\n );\n};\n\nexport default TopBar;\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport styles from './layout-frame.scss';\nimport useLocalStorage from '../../util/useLocalStorage';\nimport { NAV_POSITION, NAV_SIZE } from '../../constants';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NavBarItems } from '../../types';\nimport SideNavBar from '../SideNavBar/SideNavBar';\nimport TopBar from '../TopBar/TopBar';\n\ntype Props = {\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n actions: React.ReactNode[];\n companyLogoURL: string;\n companyName: string;\n children?: React.ReactNode;\n};\n\nconst LayoutFrame = ({\n navItems,\n appLogo,\n actions,\n companyLogoURL,\n companyName,\n children\n}: Props) => {\n const navRef = useRef<HTMLDivElement>(null);\n const isFullScreen = false;\n const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(\n 'vertical-nav-is-expanded',\n true\n );\n const [isHovering, setIsHovering] = useState(false);\n\n const toggleExpand = () => {\n //@ts-ignore\n setIsExpanded(!isExpanded);\n if (isExpanded && navRef) {\n setIsHovering(false);\n }\n };\n\n const isTouchDevice = isTouchscreen();\n const isShowingSideMenu = !isFullScreen;\n\n return (\n <div className={styles['layout-frame']}>\n {isShowingSideMenu && (\n <div\n ref={navRef}\n className={classNames(styles['layout-frame__side-bar'], {\n [styles['layout-frame__side-bar--expanded']]:\n isExpanded,\n [styles['layout-frame__side-bar--collapsed']]:\n !isExpanded\n })}\n onMouseEnter={() => {\n !isTouchDevice && setIsHovering(true);\n }}\n onMouseLeave={() => {\n !isTouchDevice && setIsHovering(false);\n }}\n style={{\n width:\n isExpanded \|\| isHovering\n ? NAV_SIZE.EXPANDED\n : NAV_SIZE.COLLAPSED\n }}\n >\n <SideNavBar\n isHovering={isHovering}\n navPosition={\n isExpanded\n ? NAV_POSITION.EXPANDED\n : NAV_POSITION.COLLAPSED\n }\n toggleExpand={toggleExpand}\n navItems={navItems}\n appLogo={appLogo}\n />\n </div>\n )}\n\n <div\n className={classNames(styles['layout-frame__middle-area'], {\n [styles['layout-frame__middle-area--full-size']]:\n !isShowingSideMenu\n })}\n >\n {!isFullScreen && (\n <div className={styles['layout-frame__top-bar']}>\n <TopBar\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n actions={actions}\n />\n </div>\n )}\n <div className={styles['layout-frame__content']}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nexport default LayoutFrame;\n","// @ts-strict-ignore\nimport { useCallback, useState } from 'react';\n\nfunction useLocalStorage<T>(\n key: string,\n initialValue: T\n): [T, (value: T) => void] {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that persists the new value to localStorage.\n const setValue = useCallback(\n (value) => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n throw new Error(error as string);\n }\n },\n [key, storedValue]\n );\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n","import React from 'react';\nimport { Tooltip } from '@7shifts/sous-chef';\nimport styles from './nav-button.scss';\nimport NotificationBadge from '../NotificationBadge/NotificationBadge';\n\ntype props = {\n children: React.ReactNode;\n tooltipContent: string;\n badge?: number \| boolean;\n onClick: () => void;\n};\n\nconst NavButton = ({\n children,\n tooltipContent,\n badge = false,\n onClick\n}: props): JSX.Element => {\n return (\n <Tooltip overlay={tooltipContent}>\n <button\n className={styles['nav-button']}\n tabIndex={0}\n onClick={() => onClick()}\n >\n {children}\n {!!badge && <NotificationBadge>{badge}</NotificationBadge>}\n </button>\n </Tooltip>\n );\n};\n\nexport default NavButton;\n"],"names":["isTouchscreen","Boolean","window","navigator","maxTouchPoints","PrimaryNavItem","_ref","as","_ref$as","_ref$isActive","isActive","children","props","className","classNames","_classNames","content","React","Inline","alignItems","space","flex","createElement","SecondaryNavItem","icon","badge","hasChip","hasBadge","Badge","String","parseInt","getBadgeContent","Chip","NotificationBadge","SideNavMenuItemGroup","isExpanded","toggleExpand","item","label","hasActiveSubmenu","items","find","_useState","useState","isSubmenuExpanded","setIsSubmenuExpanded","sortedNavBarItems","sort","itemA","itemB","Number","isPaywalled","Icon","styles","Link","to","url","key","onClick","Fragment","undefined","map","subMenuItem","IconAward","size","color","SideNavMenuItem","e","preventDefault","SideNavMenu","navItems","index","SideNavBar","_ref$navPosition","navPosition","appLogo","isHovering","isTouchDevice","justifyContent","IconChevronRight","IconChevronLeft","Brand","companyName","Avatar","companyLogoURL","Tooltip","overlay","MyAccountMenu","trigger","Dropdown","triggersOn","zIndex","DropdownList","DropdownListItem","href","TopBar","actions","navRef","useRef","_useLocalStorage","initialValue","localStorage","getItem","JSON","parse","error","storedValue","setStoredValue","setValue","useCallback","value","valueToStore","Function","setItem","stringify","Error","useLocalStorage","setIsExpanded","setIsHovering","ref","onMouseEnter","onMouseLeave","style","width","_classNames2","React__default","_ref$badge","tooltipContent","tabIndex"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/layout/util/mobileDetect.ts","../src/layout/components/PrimaryNavItem/PrimaryNavItem.tsx","../src/layout/components/SecondaryNavItem/SecondaryNavItem.tsx","../src/layout/util/navDomain.ts","../src/layout/components/NotificationBadge/NotificationBadge.tsx","../src/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.tsx","../src/layout/components/SideNavMenuItem/SideNavMenuItem.tsx","../src/layout/components/SideNavMenu/SideNavMenu.tsx","../src/layout/components/SideNavBar/SideNavBar.tsx","../src/layout/constants.ts","../src/layout/components/Brand/Brand.tsx","../src/layout/components/MyAccountMenu/MyAccountMenu.tsx","../src/layout/components/TopBar/TopBar.tsx","../src/layout/components/LayoutFrame/LayoutFrame.tsx","../src/layout/util/useLocalStorage.ts","../src/layout/components/NavButton/NavButton.tsx"],"sourcesContent":["export const isTouchscreen = (): boolean => {\n return Boolean(window.navigator.maxTouchPoints);\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport styles from './primary-nav-item.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n as?: 'div' \| 'li';\n isActive?: boolean;\n children: React.ReactNode;\n};\n\nconst PrimaryNavItem = ({ as = 'li', isActive = false, children }: Props) => {\n const props = {\n className: classNames(styles['primary-nav-item'], {\n [styles['primary-nav-item--active']]: isActive\n })\n };\n\n const content = (\n <Inline alignItems=\"center\" space={16} flex={['0 1 auto', '0 0 142px']}>\n {children}\n </Inline>\n );\n\n return React.createElement(as, props, content);\n};\n\nexport default PrimaryNavItem;\n","import React from 'react';\nimport { Badge, Chip } from '@7shifts/sous-chef';\nimport classNames from 'classnames';\nimport styles from './secondary-nav-item.scss';\nimport { getBadgeContent } from '../../util/navDomain';\n\ntype Props = {\n isActive?: boolean;\n icon?: React.ReactNode;\n badge?: string \| number;\n children: React.ReactNode;\n};\n\nconst SecondaryNavItem = ({\n isActive = false,\n icon,\n badge,\n children\n}: Props) => {\n const hasChip = typeof badge === 'string' && badge !== '';\n const hasBadge = typeof badge === 'number' && badge > 0;\n return (\n <li\n className={classNames(styles['secondary-nav-item'], {\n [styles['secondary-nav-item--active']]: isActive,\n [styles['secondary-nav-item--no-icon']]: !icon\n })}\n >\n {icon}\n <div className={styles['secondary-nav-item__content']}>\n {children}\n {hasBadge && <Badge>{getBadgeContent(badge)}</Badge>}\n {hasChip && <Chip>{badge}</Chip>}\n </div>\n </li>\n );\n};\n\nexport default SecondaryNavItem;\n","export const getBadgeContent = (\n badge: (string \| null \| undefined) \| (number \| null \| undefined)\n): string \| null \| undefined => {\n if (typeof badge === 'number') {\n if (badge > 0 && badge <= 99) {\n //covers number values between 0 and 99\n return String(badge);\n } else if (badge > 99) {\n //covers number values bigger than 99\n return '99+';\n }\n } else if (typeof badge === 'string') {\n //covers all string values, excluding \"0\"\n if (badge === '0') {\n return null;\n } else if (parseInt(badge) > 99) {\n //covers number values bigger than 99\n return '99+';\n } else {\n //return all other strings\n return badge;\n }\n }\n\n return null;\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\nimport styles from './notification-badge.scss';\n\ntype Props = {\n children?: ReactNode;\n};\n\nconst NotificationBadge = ({ children }: Props): JSX.Element => {\n return (\n <span\n className={classNames(styles['notification-badge'], {\n [styles['notification-badge--bullet']]:\n typeof children === 'boolean',\n [styles['notification-badge--count']]:\n typeof children === 'number'\n })}\n data-testid=\"notification-badge\"\n >\n {children}\n </span>\n );\n};\n\nexport default NotificationBadge;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItemGroup } from '../../types';\nimport { Link } from 'react-router-dom';\nimport { IconAward } from '@7shifts/sous-chef';\nimport { useState } from 'react';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport SecondaryNavItem from '../SecondaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\nimport styles from './side-nav-menu-item-group.scss';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n item: NavBarItemGroup;\n};\n\nconst SideNavMenuItemGroup = ({ isExpanded, toggleExpand, item }: Props) => {\n const { label, badge } = item;\n const hasActiveSubmenu = Boolean(item.items.find((item) => item.isActive));\n const [isSubmenuExpanded, setIsSubmenuExpanded] = useState(\n !!hasActiveSubmenu\n );\n\n // sorts paywalled navBarItems to bottom of submenu\n const sortedNavBarItems = item.items.sort(\n (itemA, itemB) =>\n Number(itemA.isPaywalled \|\| false) -\n Number(itemB.isPaywalled \|\| false)\n );\n\n const Icon = item.icon;\n return (\n <li className={styles['side-nav-menu-item-group']}>\n <Link\n to={item.url \|\| item.items[0].url}\n key={label}\n onClick={() => {\n if (!isExpanded && hasActiveSubmenu && toggleExpand) {\n toggleExpand();\n setIsSubmenuExpanded(true);\n return;\n }\n\n if (!isSubmenuExpanded \|\| hasActiveSubmenu) {\n setIsSubmenuExpanded(!isSubmenuExpanded);\n }\n }}\n >\n <PrimaryNavItem as=\"div\" isActive={hasActiveSubmenu}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n {isExpanded && hasActiveSubmenu && (\n <ul className={styles['side-nav-menu-item-group__submenu']}>\n {sortedNavBarItems.map((subMenuItem) => (\n <Link\n to={subMenuItem.url}\n key={subMenuItem.label}\n onClick={() => {\n if (subMenuItem.onClick) {\n subMenuItem.onClick();\n }\n }}\n >\n <SecondaryNavItem\n isActive={subMenuItem.isActive}\n badge={subMenuItem.badge}\n icon={\n subMenuItem.isPaywalled ? (\n <IconAward\n size=\"medium\"\n color=\"eggplant-500\"\n />\n ) : undefined\n }\n >\n {subMenuItem.label}\n </SecondaryNavItem>\n </Link>\n ))}\n </ul>\n )}\n </li>\n );\n};\n\nexport default SideNavMenuItemGroup;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItem } from '../../types';\nimport { Link } from 'react-router-dom';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\n\ntype Props = {\n isExpanded: boolean;\n item: NavBarItem;\n};\n\nconst SideNavMenuItem = ({ isExpanded, item }: Props) => {\n const { url, label, isActive, badge } = item;\n const Icon = item.icon;\n return (\n <Link\n to={url}\n key={label}\n onClick={(e) => {\n if (isActive) {\n e.preventDefault();\n }\n if (item.onClick) {\n item.onClick();\n }\n }}\n >\n <PrimaryNavItem isActive={isActive}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n );\n};\n\nexport default SideNavMenuItem;\n","import React from 'react';\nimport styles from './side-nav-menu.scss';\nimport { NavBarItems } from '../../types';\nimport SideNavMenuItemGroup from '../SideNavMenuItemGroup/SideNavMenuItemGroup';\nimport SideNavMenuItem from '../SideNavMenuItem/SideNavMenuItem';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n};\n\nconst SideNavMenu = ({ isExpanded, toggleExpand, navItems }: Props) => {\n return (\n <ul className={styles['side-nav-menu']}>\n {navItems.map((item, index) => {\n if ('type' in item) {\n return (\n <div\n key={index}\n className={styles['side-nav-menu__divider']}\n />\n );\n }\n if ('items' in item) {\n return (\n <SideNavMenuItemGroup\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n toggleExpand={toggleExpand}\n />\n );\n }\n\n return (\n <SideNavMenuItem\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n />\n );\n })}\n </ul>\n );\n};\n\nexport default SideNavMenu;\n","import React from 'react';\nimport { IconChevronLeft, IconChevronRight, Inline } from '@7shifts/sous-chef';\nimport styles from './side-nav-bar.scss';\nimport { NavBarItems, NavPosition } from '../../types';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NAV_POSITION } from '../../constants';\nimport SideNavMenu from '../SideNavMenu/SideNavMenu';\n\ntype Props = {\n isHovering?: boolean;\n navPosition?: NavPosition;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n};\n\nconst SideNavBar = ({\n isHovering,\n navPosition = NAV_POSITION.COLLAPSED,\n toggleExpand,\n navItems,\n appLogo\n}: Props) => {\n const isExpanded = navPosition === NAV_POSITION.EXPANDED \|\| isHovering;\n const isTouchDevice = isTouchscreen();\n\n return (\n <nav className={styles['side-nav-bar']}>\n <div className={styles['side-nav-bar__header']}>\n <Inline alignItems=\"center\" justifyContent=\"space-between\">\n {(!isTouchDevice \|\| isExpanded) && (\n <div className={styles['side-nav-bar__logo']}>\n {appLogo}\n </div>\n )}\n {(isExpanded \|\| isTouchDevice) && (\n <button\n onClick={toggleExpand}\n className={styles['side-nav-bar__nav-toggle']}\n >\n {navPosition === NAV_POSITION.COLLAPSED ? (\n <IconChevronRight />\n ) : (\n <IconChevronLeft />\n )}\n </button>\n )}\n </Inline>\n </div>\n <SideNavMenu\n isExpanded={isExpanded as boolean}\n toggleExpand={toggleExpand}\n navItems={navItems}\n />\n </nav>\n );\n};\n\nexport default SideNavBar;\n","import { NavDivider } from './types';\n\nexport const NAV_POSITION = {\n EXPANDED: 'expanded' as const,\n COLLAPSED: 'collapsed' as const\n};\n\nexport const NAV_SIZE = {\n EXPANDED: 240,\n COLLAPSED: 72\n} as const;\n\nexport const DIVIDER: NavDivider = {\n type: 'divider' as const\n};\n","import React from 'react';\nimport { Avatar, Tooltip } from '@7shifts/sous-chef';\nimport styles from './brand.scss';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n};\n\nconst Brand = ({ companyLogoURL, companyName }: Props) => {\n return (\n <div className={styles['brand']}>\n <div className={styles['brand__company-photo']}>\n <Avatar size=\"large\" url={companyLogoURL} />\n </div>\n <Tooltip overlay=\"Company name\">\n <span className={styles['brand__company-name']}>\n {companyName}\n </span>\n </Tooltip>\n </div>\n );\n};\n\nexport default Brand;\n","import React from 'react';\nimport { Avatar, Dropdown } from '@7shifts/sous-chef';\nimport styles from './my-account-menu.scss';\n\ntype Props = {\n accountMenuDropdown: React.ReactNode;\n userPrifileImageURL: string;\n};\n\nconst MyAccountMenu = ({ accountMenuDropdown, userPrifileImageURL }: Props) => {\n const trigger = (\n <div className={styles['my-account-menu']}>\n <Avatar size=\"large\" url={userPrifileImageURL} />\n </div>\n );\n\n return (\n <Dropdown trigger={trigger} triggersOn=\"hover\" zIndex={6}>\n {accountMenuDropdown}\n </Dropdown>\n );\n};\n\nexport default MyAccountMenu;\n","import React from 'react';\nimport Brand from '../Brand/Brand';\nimport MyAccountMenu from '../MyAccountMenu/MyAccountMenu';\nimport styles from './top-bar.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n actions: React.ReactNode[];\n accountMenuDropdown: React.ReactNode;\n userPrifileImageURL: string;\n};\nconst TopBar = ({\n companyLogoURL,\n companyName,\n actions,\n accountMenuDropdown,\n userPrifileImageURL\n}: Props) => {\n return (\n <div className={styles['top-bar']}>\n <div>\n <Brand\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n />\n </div>\n <Inline space={24} alignItems=\"center\">\n <Inline space={12} alignItems=\"center\">\n {actions}\n </Inline>\n <MyAccountMenu\n accountMenuDropdown={accountMenuDropdown}\n userPrifileImageURL={userPrifileImageURL}\n />\n </Inline>\n </div>\n );\n};\n\nexport default TopBar;\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport styles from './layout-frame.scss';\nimport useLocalStorage from '../../util/useLocalStorage';\nimport { NAV_POSITION, NAV_SIZE } from '../../constants';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NavBarItems } from '../../types';\nimport SideNavBar from '../SideNavBar/SideNavBar';\nimport TopBar from '../TopBar/TopBar';\n\ntype Props = {\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n accountMenuDropdown: React.ReactNode;\n actions: React.ReactNode[];\n companyLogoURL: string;\n companyName: string;\n userPrifileImageURL: string;\n children?: React.ReactNode;\n};\n\nconst LayoutFrame = ({\n navItems,\n appLogo,\n actions,\n companyLogoURL,\n companyName,\n userPrifileImageURL,\n accountMenuDropdown,\n children\n}: Props) => {\n const navRef = useRef<HTMLDivElement>(null);\n const isFullScreen = false;\n const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(\n 'vertical-nav-is-expanded',\n true\n );\n const [isHovering, setIsHovering] = useState(false);\n\n const toggleExpand = () => {\n //@ts-ignore\n setIsExpanded(!isExpanded);\n if (isExpanded && navRef) {\n setIsHovering(false);\n }\n };\n\n const isTouchDevice = isTouchscreen();\n const isShowingSideMenu = !isFullScreen;\n\n return (\n <div className={styles['layout-frame']}>\n {isShowingSideMenu && (\n <div\n ref={navRef}\n className={classNames(styles['layout-frame__side-bar'], {\n [styles['layout-frame__side-bar--expanded']]:\n isExpanded,\n [styles['layout-frame__side-bar--collapsed']]:\n !isExpanded\n })}\n onMouseEnter={() => {\n !isTouchDevice && setIsHovering(true);\n }}\n onMouseLeave={() => {\n !isTouchDevice && setIsHovering(false);\n }}\n style={{\n width:\n isExpanded \|\| isHovering\n ? NAV_SIZE.EXPANDED\n : NAV_SIZE.COLLAPSED\n }}\n >\n <SideNavBar\n isHovering={isHovering}\n navPosition={\n isExpanded\n ? NAV_POSITION.EXPANDED\n : NAV_POSITION.COLLAPSED\n }\n toggleExpand={toggleExpand}\n navItems={navItems}\n appLogo={appLogo}\n />\n </div>\n )}\n\n <div\n className={classNames(styles['layout-frame__middle-area'], {\n [styles['layout-frame__middle-area--full-size']]:\n !isShowingSideMenu\n })}\n >\n {!isFullScreen && (\n <div className={styles['layout-frame__top-bar']}>\n <TopBar\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n actions={actions}\n userPrifileImageURL={userPrifileImageURL}\n accountMenuDropdown={accountMenuDropdown}\n />\n </div>\n )}\n <div className={styles['layout-frame__content']}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nexport default LayoutFrame;\n","// @ts-strict-ignore\nimport { useCallback, useState } from 'react';\n\nfunction useLocalStorage<T>(\n key: string,\n initialValue: T\n): [T, (value: T) => void] {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that persists the new value to localStorage.\n const setValue = useCallback(\n (value) => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n throw new Error(error as string);\n }\n },\n [key, storedValue]\n );\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n","import React from 'react';\nimport { Tooltip } from '@7shifts/sous-chef';\nimport styles from './nav-button.scss';\nimport NotificationBadge from '../NotificationBadge/NotificationBadge';\n\ntype props = {\n children: React.ReactNode;\n tooltipContent: string;\n badge?: number \| boolean;\n onClick: () => void;\n};\n\nconst NavButton = ({\n children,\n tooltipContent,\n badge = false,\n onClick\n}: props): JSX.Element => {\n return (\n <Tooltip overlay={tooltipContent}>\n <button\n className={styles['nav-button']}\n tabIndex={0}\n onClick={() => onClick()}\n >\n {children}\n {!!badge && <NotificationBadge>{badge}</NotificationBadge>}\n </button>\n </Tooltip>\n );\n};\n\nexport default NavButton;\n"],"names":["isTouchscreen","Boolean","window","navigator","maxTouchPoints","PrimaryNavItem","_ref","as","_ref$as","_ref$isActive","isActive","children","props","className","classNames","_classNames","content","React","Inline","alignItems","space","flex","createElement","SecondaryNavItem","icon","badge","hasChip","hasBadge","Badge","String","parseInt","getBadgeContent","Chip","NotificationBadge","SideNavMenuItemGroup","isExpanded","toggleExpand","item","label","hasActiveSubmenu","items","find","_useState","useState","isSubmenuExpanded","setIsSubmenuExpanded","sortedNavBarItems","sort","itemA","itemB","Number","isPaywalled","Icon","styles","Link","to","url","key","onClick","Fragment","undefined","map","subMenuItem","IconAward","size","color","SideNavMenuItem","e","preventDefault","SideNavMenu","navItems","index","SideNavBar","_ref$navPosition","navPosition","appLogo","isHovering","isTouchDevice","justifyContent","IconChevronRight","IconChevronLeft","Brand","companyName","Avatar","companyLogoURL","Tooltip","overlay","MyAccountMenu","accountMenuDropdown","trigger","userPrifileImageURL","Dropdown","triggersOn","zIndex","TopBar","actions","navRef","useRef","_useLocalStorage","initialValue","localStorage","getItem","JSON","parse","error","storedValue","setStoredValue","setValue","useCallback","value","valueToStore","Function","setItem","stringify","Error","useLocalStorage","setIsExpanded","setIsHovering","ref","onMouseEnter","onMouseLeave","style","width","_classNames2","_ref$badge","tooltipContent","tabIndex"],"mappings":"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"}

package/dist/index.modern.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"@7shifts/sous-chef/dist/index.css";import e,{useState as t,useCallback as a,useRef as n}from"react";import r from"classnames";import{Inline as l,Badge as o,Chip as i,IconAward as c,IconChevronRight as m,IconChevronLeft as s,Avatar as u,Tooltip as d,Dropdown as p,DropdownList as f,DropdownListItem as E}from"@7shifts/sous-chef";import{Link as _}from"react-router-dom";var v={"layout-frame":"_2C1bf","layout-frame--no-height":"___2VV","layout-frame__middle-area":"_34YPL","layout-frame__middle-area--full-size":"_jG606","layout-frame__middle-area--no-footer-padding":"_2q-8S","layout-frame__side-bar":"_2dNiZ","layout-frame__side-bar--expanded":"_3kzKX","layout-frame__top-bar":"_299Kx","layout-frame__top-bar--hidden":"_3Gz0Y","layout-frame__content":"_Ri_78"},g=function(){return Boolean(window.navigator.maxTouchPoints)},y=function(t){var a,n=t.as,o=void 0===n?"li":n,i=t.isActive,c=t.children,m={className:r("_1ycHa",(a={},a._1D7jK=void 0!==i&&i,a))},s=e.createElement(l,{alignItems:"center",space:16,flex:["0 1 auto","0 0 142px"]},c);return e.createElement(o,m,s)},b=function(t){var a,n=t.isActive,l=t.icon,c=t.badge,m=t.children,s="string"==typeof c&&""!==c,u="number"==typeof c&&c>0;return e.createElement("li",{className:r("_amex_",(a={},a._WdXeV=void 0!==n&&n,a._1zt6h=!l,a))},l,e.createElement("div",{className:"_lLwWh"},m,u&&e.createElement(o,null,function(e){if("number"==typeof e){if(e>0&&e<=99)return String(e);if(e>99)return"99+"}else if("string"==typeof e)return"0"===e?null:parseInt(e)>99?"99+":e;return null}(c)),s&&e.createElement(i,null,c)))},N=function(t){var a,n=t.children;return e.createElement("span",{className:r("_1ne7X",(a={},a["_3jq-L"]="boolean"==typeof n,a["_1caO-"]="number"==typeof n,a)),"data-testid":"notification-badge"},n)},x={"side-nav-menu-item-group__submenu":"_3_Pzu"},h=function(a){var n=a.isExpanded,r=a.toggleExpand,l=a.item,o=l.label,i=l.badge,m=Boolean(l.items.find(function(e){return e.isActive})),s=t(!!m),u=s[0],d=s[1],p=l.items.sort(function(e,t){return Number(e.isPaywalled||!1)-Number(t.isPaywalled||!1)}),f=l.icon;return e.createElement("li",{className:x["side-nav-menu-item-group"]},e.createElement(_,{to:l.url||l.items[0].url,key:o,onClick:function(){if(!n&&m&&r)return r(),void d(!0);u&&!m||d(!u)}},e.createElement(y,{as:"div",isActive:m},f&&e.createElement(e.Fragment,null,e.createElement(f,null),i>0?e.createElement(N,null):void 0),n&&o)),n&&m&&e.createElement("ul",{className:x["side-nav-menu-item-group__submenu"]},p.map(function(t){return e.createElement(_,{to:t.url,key:t.label,onClick:function(){t.onClick&&t.onClick()}},e.createElement(b,{isActive:t.isActive,badge:t.badge,icon:t.isPaywalled?e.createElement(c,{size:"medium",color:"eggplant-500"}):void 0},t.label))})))},k=function(t){var a=t.isExpanded,n=t.item,r=n.label,l=n.isActive,o=n.badge,i=n.icon;return e.createElement(_,{to:n.url,key:r,onClick:function(e){l&&e.preventDefault(),n.onClick&&n.onClick()}},e.createElement(y,{isActive:l},i&&e.createElement(e.Fragment,null,e.createElement(i,null),o>0?e.createElement(N,null):void 0),a&&r))},L=function(t){var a=t.isExpanded,n=t.toggleExpand;return e.createElement("ul",{className:"_244gq"},t.navItems.map(function(t,r){return"type"in t?e.createElement("div",{key:r,className:"_BLBDK"}):"items"in t?e.createElement(h,{key:t.label,isExpanded:a,item:t,toggleExpand:n}):e.createElement(k,{key:t.label,isExpanded:a,item:t})}))},w=function(t){var a=t.navPosition,n=void 0===a?"collapsed":a,r=t.toggleExpand,o=t.navItems,i=t.appLogo,c="expanded"===n||t.isHovering,u=g();return e.createElement("nav",{className:"_9eWEa"},e.createElement("div",{className:"_2gqbS"},e.createElement(l,{alignItems:"center",justifyContent:"space-between"},(!u||c)&&e.createElement("div",{className:"_2l01n"},i),(c||u)&&e.createElement("button",{onClick:r,className:"_1Ccg2"},e.createElement("collapsed"===n?m:s,null)))),e.createElement(L,{isExpanded:c,toggleExpand:r,navItems:o}))},C=function(t){var a=t.companyName;return e.createElement("div",{className:"_9ii6i"},e.createElement("div",{className:"_3iCo3"},e.createElement(u,{size:"large",url:t.companyLogoURL})),e.createElement(d,{overlay:"Company name"},e.createElement("span",{className:"_2IZqu"},a)))},I=function(){var t=e.createElement("div",{className:"_2yvUY"},e.createElement(u,{size:"large",url:"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg"}));return e.createElement(p,{trigger:t,triggersOn:"hover",zIndex:6},e.createElement(f,null,e.createElement(E,{href:"/employees"},"My account"),e.createElement(E,{href:"/employees"},"Log out")))},z=function(t){var a=t.actions;return e.createElement("div",{className:"_1Hpad"},e.createElement("div",null,e.createElement(C,{companyLogoURL:t.companyLogoURL,companyName:t.companyName})),e.createElement(l,{space:24,alignItems:"center"},e.createElement(l,{space:12,alignItems:"center"},a),e.createElement(I,null)))},A=function(l){var o,i,c=l.navItems,m=l.appLogo,s=l.actions,u=l.companyLogoURL,d=l.companyName,p=l.children,f=n(null),E=function(e,n){var r=t(function(){try{var t=window.localStorage.getItem(e);return!t||JSON.parse(t)}catch(e){return!0}}),l=r[0],o=r[1],i=a(function(t){try{var a=t instanceof Function?t(l):t;o(a),window.localStorage.setItem(e,JSON.stringify(a))}catch(e){throw new Error(e)}},[e,l]);return[l,i]}("vertical-nav-is-expanded"),_=E[0],y=E[1],b=t(!1),N=b[0],x=b[1],h=g();return e.createElement("div",{className:v["layout-frame"]},e.createElement("div",{ref:f,className:r(v["layout-frame__side-bar"],(o={},o[v["layout-frame__side-bar--expanded"]]=_,o[v["layout-frame__side-bar--collapsed"]]=!_,o)),onMouseEnter:function(){!h&&x(!0)},onMouseLeave:function(){!h&&x(!1)},style:{width:_||N?240:72}},e.createElement(w,{isHovering:N,navPosition:_?"expanded":"collapsed",toggleExpand:function(){y(!_),_&&f&&x(!1)},navItems:c,appLogo:m})),e.createElement("div",{className:r(v["layout-frame__middle-area"],(i={},i[v["layout-frame__middle-area--full-size"]]=!1,i))},e.createElement("div",{className:v["layout-frame__top-bar"]},e.createElement(z,{companyLogoURL:u,companyName:d,actions:s})),e.createElement("div",{className:v["layout-frame__content"]},p)))},P=function(t){var a=t.badge,n=void 0!==a&&a,r=t.onClick;return e.createElement(d,{overlay:t.tooltipContent},e.createElement("button",{className:"_3RkpO",tabIndex:0,onClick:function(){return r()}},t.children,!!n&&e.createElement(N,null,n)))};export{A as LayoutFrame,P as NavButton};
+import"@7shifts/sous-chef/dist/index.css";import e,{useState as t,useCallback as a,useRef as n}from"react";import r from"classnames";import{Inline as l,Badge as o,Chip as i,IconAward as c,IconChevronRight as m,IconChevronLeft as s,Avatar as u,Tooltip as d,Dropdown as f}from"@7shifts/sous-chef";import{Link as p}from"react-router-dom";var E={"layout-frame":"_2C1bf","layout-frame--no-height":"___2VV","layout-frame__middle-area":"_34YPL","layout-frame__middle-area--full-size":"_jG606","layout-frame__middle-area--no-footer-padding":"_2q-8S","layout-frame__side-bar":"_2dNiZ","layout-frame__side-bar--expanded":"_3kzKX","layout-frame__top-bar":"_299Kx","layout-frame__top-bar--hidden":"_3Gz0Y","layout-frame__content":"_Ri_78"},_=function(){return Boolean(window.navigator.maxTouchPoints)},v=function(t){var a,n=t.as,o=void 0===n?"li":n,i=t.isActive,c=t.children,m={className:r("_1ycHa",(a={},a._1D7jK=void 0!==i&&i,a))},s=e.createElement(l,{alignItems:"center",space:16,flex:["0 1 auto","0 0 142px"]},c);return e.createElement(o,m,s)},g=function(t){var a,n=t.isActive,l=t.icon,c=t.badge,m=t.children,s="string"==typeof c&&""!==c,u="number"==typeof c&&c>0;return e.createElement("li",{className:r("_amex_",(a={},a._WdXeV=void 0!==n&&n,a._1zt6h=!l,a))},l,e.createElement("div",{className:"_lLwWh"},m,u&&e.createElement(o,null,function(e){if("number"==typeof e){if(e>0&&e<=99)return String(e);if(e>99)return"99+"}else if("string"==typeof e)return"0"===e?null:parseInt(e)>99?"99+":e;return null}(c)),s&&e.createElement(i,null,c)))},y=function(t){var a,n=t.children;return e.createElement("span",{className:r("_1ne7X",(a={},a["_3jq-L"]="boolean"==typeof n,a["_1caO-"]="number"==typeof n,a)),"data-testid":"notification-badge"},n)},b={"side-nav-menu-item-group__submenu":"_3_Pzu"},N=function(a){var n=a.isExpanded,r=a.toggleExpand,l=a.item,o=l.label,i=l.badge,m=Boolean(l.items.find(function(e){return e.isActive})),s=t(!!m),u=s[0],d=s[1],f=l.items.sort(function(e,t){return Number(e.isPaywalled||!1)-Number(t.isPaywalled||!1)}),E=l.icon;return e.createElement("li",{className:b["side-nav-menu-item-group"]},e.createElement(p,{to:l.url||l.items[0].url,key:o,onClick:function(){if(!n&&m&&r)return r(),void d(!0);u&&!m||d(!u)}},e.createElement(v,{as:"div",isActive:m},E&&e.createElement(e.Fragment,null,e.createElement(E,null),i>0?e.createElement(y,null):void 0),n&&o)),n&&m&&e.createElement("ul",{className:b["side-nav-menu-item-group__submenu"]},f.map(function(t){return e.createElement(p,{to:t.url,key:t.label,onClick:function(){t.onClick&&t.onClick()}},e.createElement(g,{isActive:t.isActive,badge:t.badge,icon:t.isPaywalled?e.createElement(c,{size:"medium",color:"eggplant-500"}):void 0},t.label))})))},x=function(t){var a=t.isExpanded,n=t.item,r=n.label,l=n.isActive,o=n.badge,i=n.icon;return e.createElement(p,{to:n.url,key:r,onClick:function(e){l&&e.preventDefault(),n.onClick&&n.onClick()}},e.createElement(v,{isActive:l},i&&e.createElement(e.Fragment,null,e.createElement(i,null),o>0?e.createElement(y,null):void 0),a&&r))},L=function(t){var a=t.isExpanded,n=t.toggleExpand;return e.createElement("ul",{className:"_244gq"},t.navItems.map(function(t,r){return"type"in t?e.createElement("div",{key:r,className:"_BLBDK"}):"items"in t?e.createElement(N,{key:t.label,isExpanded:a,item:t,toggleExpand:n}):e.createElement(x,{key:t.label,isExpanded:a,item:t})}))},h=function(t){var a=t.navPosition,n=void 0===a?"collapsed":a,r=t.toggleExpand,o=t.navItems,i=t.appLogo,c="expanded"===n||t.isHovering,u=_();return e.createElement("nav",{className:"_9eWEa"},e.createElement("div",{className:"_2gqbS"},e.createElement(l,{alignItems:"center",justifyContent:"space-between"},(!u||c)&&e.createElement("div",{className:"_2l01n"},i),(c||u)&&e.createElement("button",{onClick:r,className:"_1Ccg2"},e.createElement("collapsed"===n?m:s,null)))),e.createElement(L,{isExpanded:c,toggleExpand:r,navItems:o}))},I=function(t){var a=t.companyName;return e.createElement("div",{className:"_9ii6i"},e.createElement("div",{className:"_3iCo3"},e.createElement(u,{size:"large",url:t.companyLogoURL})),e.createElement(d,{overlay:"Company name"},e.createElement("span",{className:"_2IZqu"},a)))},w=function(t){var a=t.accountMenuDropdown,n=e.createElement("div",{className:"_2yvUY"},e.createElement(u,{size:"large",url:t.userPrifileImageURL}));return e.createElement(f,{trigger:n,triggersOn:"hover",zIndex:6},a)},k=function(t){var a=t.actions,n=t.accountMenuDropdown,r=t.userPrifileImageURL;return e.createElement("div",{className:"_1Hpad"},e.createElement("div",null,e.createElement(I,{companyLogoURL:t.companyLogoURL,companyName:t.companyName})),e.createElement(l,{space:24,alignItems:"center"},e.createElement(l,{space:12,alignItems:"center"},a),e.createElement(w,{accountMenuDropdown:n,userPrifileImageURL:r})))},C=function(l){var o,i,c=l.navItems,m=l.appLogo,s=l.actions,u=l.companyLogoURL,d=l.companyName,f=l.userPrifileImageURL,p=l.accountMenuDropdown,v=l.children,g=n(null),y=function(e,n){var r=t(function(){try{var t=window.localStorage.getItem(e);return!t||JSON.parse(t)}catch(e){return!0}}),l=r[0],o=r[1],i=a(function(t){try{var a=t instanceof Function?t(l):t;o(a),window.localStorage.setItem(e,JSON.stringify(a))}catch(e){throw new Error(e)}},[e,l]);return[l,i]}("vertical-nav-is-expanded"),b=y[0],N=y[1],x=t(!1),L=x[0],I=x[1],w=_();return e.createElement("div",{className:E["layout-frame"]},e.createElement("div",{ref:g,className:r(E["layout-frame__side-bar"],(o={},o[E["layout-frame__side-bar--expanded"]]=b,o[E["layout-frame__side-bar--collapsed"]]=!b,o)),onMouseEnter:function(){!w&&I(!0)},onMouseLeave:function(){!w&&I(!1)},style:{width:b||L?240:72}},e.createElement(h,{isHovering:L,navPosition:b?"expanded":"collapsed",toggleExpand:function(){N(!b),b&&g&&I(!1)},navItems:c,appLogo:m})),e.createElement("div",{className:r(E["layout-frame__middle-area"],(i={},i[E["layout-frame__middle-area--full-size"]]=!1,i))},e.createElement("div",{className:E["layout-frame__top-bar"]},e.createElement(k,{companyLogoURL:u,companyName:d,actions:s,userPrifileImageURL:f,accountMenuDropdown:p})),e.createElement("div",{className:E["layout-frame__content"]},v)))},P=function(t){var a=t.badge,n=void 0!==a&&a,r=t.onClick;return e.createElement(d,{overlay:t.tooltipContent},e.createElement("button",{className:"_3RkpO",tabIndex:0,onClick:function(){return r()}},t.children,!!n&&e.createElement(y,null,n)))};export{C as LayoutFrame,P as NavButton};
 //# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.modern.js","sources":["../src/layout/util/mobileDetect.ts","../src/layout/components/PrimaryNavItem/PrimaryNavItem.tsx","../src/layout/components/SecondaryNavItem/SecondaryNavItem.tsx","../src/layout/util/navDomain.ts","../src/layout/components/NotificationBadge/NotificationBadge.tsx","../src/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.tsx","../src/layout/components/SideNavMenuItem/SideNavMenuItem.tsx","../src/layout/components/SideNavMenu/SideNavMenu.tsx","../src/layout/components/SideNavBar/SideNavBar.tsx","../src/layout/constants.ts","../src/layout/components/Brand/Brand.tsx","../src/layout/components/MyAccountMenu/MyAccountMenu.tsx","../src/layout/components/TopBar/TopBar.tsx","../src/layout/components/LayoutFrame/LayoutFrame.tsx","../src/layout/util/useLocalStorage.ts","../src/layout/components/NavButton/NavButton.tsx"],"sourcesContent":["export const isTouchscreen = (): boolean => {\n return Boolean(window.navigator.maxTouchPoints);\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport styles from './primary-nav-item.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n as?: 'div' \| 'li';\n isActive?: boolean;\n children: React.ReactNode;\n};\n\nconst PrimaryNavItem = ({ as = 'li', isActive = false, children }: Props) => {\n const props = {\n className: classNames(styles['primary-nav-item'], {\n [styles['primary-nav-item--active']]: isActive\n })\n };\n\n const content = (\n <Inline alignItems=\"center\" space={16} flex={['0 1 auto', '0 0 142px']}>\n {children}\n </Inline>\n );\n\n return React.createElement(as, props, content);\n};\n\nexport default PrimaryNavItem;\n","import React from 'react';\nimport { Badge, Chip } from '@7shifts/sous-chef';\nimport classNames from 'classnames';\nimport styles from './secondary-nav-item.scss';\nimport { getBadgeContent } from '../../util/navDomain';\n\ntype Props = {\n isActive?: boolean;\n icon?: React.ReactNode;\n badge?: string \| number;\n children: React.ReactNode;\n};\n\nconst SecondaryNavItem = ({\n isActive = false,\n icon,\n badge,\n children\n}: Props) => {\n const hasChip = typeof badge === 'string' && badge !== '';\n const hasBadge = typeof badge === 'number' && badge > 0;\n return (\n <li\n className={classNames(styles['secondary-nav-item'], {\n [styles['secondary-nav-item--active']]: isActive,\n [styles['secondary-nav-item--no-icon']]: !icon\n })}\n >\n {icon}\n <div className={styles['secondary-nav-item__content']}>\n {children}\n {hasBadge && <Badge>{getBadgeContent(badge)}</Badge>}\n {hasChip && <Chip>{badge}</Chip>}\n </div>\n </li>\n );\n};\n\nexport default SecondaryNavItem;\n","export const getBadgeContent = (\n badge: (string \| null \| undefined) \| (number \| null \| undefined)\n): string \| null \| undefined => {\n if (typeof badge === 'number') {\n if (badge > 0 && badge <= 99) {\n //covers number values between 0 and 99\n return String(badge);\n } else if (badge > 99) {\n //covers number values bigger than 99\n return '99+';\n }\n } else if (typeof badge === 'string') {\n //covers all string values, excluding \"0\"\n if (badge === '0') {\n return null;\n } else if (parseInt(badge) > 99) {\n //covers number values bigger than 99\n return '99+';\n } else {\n //return all other strings\n return badge;\n }\n }\n\n return null;\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\nimport styles from './notification-badge.scss';\n\ntype Props = {\n children?: ReactNode;\n};\n\nconst NotificationBadge = ({ children }: Props): JSX.Element => {\n return (\n <span\n className={classNames(styles['notification-badge'], {\n [styles['notification-badge--bullet']]:\n typeof children === 'boolean',\n [styles['notification-badge--count']]:\n typeof children === 'number'\n })}\n data-testid=\"notification-badge\"\n >\n {children}\n </span>\n );\n};\n\nexport default NotificationBadge;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItemGroup } from '../../types';\nimport { Link } from 'react-router-dom';\nimport { IconAward } from '@7shifts/sous-chef';\nimport { useState } from 'react';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport SecondaryNavItem from '../SecondaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\nimport styles from './side-nav-menu-item-group.scss';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n item: NavBarItemGroup;\n};\n\nconst SideNavMenuItemGroup = ({ isExpanded, toggleExpand, item }: Props) => {\n const { label, badge } = item;\n const hasActiveSubmenu = Boolean(item.items.find((item) => item.isActive));\n const [isSubmenuExpanded, setIsSubmenuExpanded] = useState(\n !!hasActiveSubmenu\n );\n\n // sorts paywalled navBarItems to bottom of submenu\n const sortedNavBarItems = item.items.sort(\n (itemA, itemB) =>\n Number(itemA.isPaywalled \|\| false) -\n Number(itemB.isPaywalled \|\| false)\n );\n\n const Icon = item.icon;\n return (\n <li className={styles['side-nav-menu-item-group']}>\n <Link\n to={item.url \|\| item.items[0].url}\n key={label}\n onClick={() => {\n if (!isExpanded && hasActiveSubmenu && toggleExpand) {\n toggleExpand();\n setIsSubmenuExpanded(true);\n return;\n }\n\n if (!isSubmenuExpanded \|\| hasActiveSubmenu) {\n setIsSubmenuExpanded(!isSubmenuExpanded);\n }\n }}\n >\n <PrimaryNavItem as=\"div\" isActive={hasActiveSubmenu}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n {isExpanded && hasActiveSubmenu && (\n <ul className={styles['side-nav-menu-item-group__submenu']}>\n {sortedNavBarItems.map((subMenuItem) => (\n <Link\n to={subMenuItem.url}\n key={subMenuItem.label}\n onClick={() => {\n if (subMenuItem.onClick) {\n subMenuItem.onClick();\n }\n }}\n >\n <SecondaryNavItem\n isActive={subMenuItem.isActive}\n badge={subMenuItem.badge}\n icon={\n subMenuItem.isPaywalled ? (\n <IconAward\n size=\"medium\"\n color=\"eggplant-500\"\n />\n ) : undefined\n }\n >\n {subMenuItem.label}\n </SecondaryNavItem>\n </Link>\n ))}\n </ul>\n )}\n </li>\n );\n};\n\nexport default SideNavMenuItemGroup;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItem } from '../../types';\nimport { Link } from 'react-router-dom';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\n\ntype Props = {\n isExpanded: boolean;\n item: NavBarItem;\n};\n\nconst SideNavMenuItem = ({ isExpanded, item }: Props) => {\n const { url, label, isActive, badge } = item;\n const Icon = item.icon;\n return (\n <Link\n to={url}\n key={label}\n onClick={(e) => {\n if (isActive) {\n e.preventDefault();\n }\n if (item.onClick) {\n item.onClick();\n }\n }}\n >\n <PrimaryNavItem isActive={isActive}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n );\n};\n\nexport default SideNavMenuItem;\n","import React from 'react';\nimport styles from './side-nav-menu.scss';\nimport { NavBarItems } from '../../types';\nimport SideNavMenuItemGroup from '../SideNavMenuItemGroup/SideNavMenuItemGroup';\nimport SideNavMenuItem from '../SideNavMenuItem/SideNavMenuItem';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n};\n\nconst SideNavMenu = ({ isExpanded, toggleExpand, navItems }: Props) => {\n return (\n <ul className={styles['side-nav-menu']}>\n {navItems.map((item, index) => {\n if ('type' in item) {\n return (\n <div\n key={index}\n className={styles['side-nav-menu__divider']}\n />\n );\n }\n if ('items' in item) {\n return (\n <SideNavMenuItemGroup\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n toggleExpand={toggleExpand}\n />\n );\n }\n\n return (\n <SideNavMenuItem\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n />\n );\n })}\n </ul>\n );\n};\n\nexport default SideNavMenu;\n","import React from 'react';\nimport { IconChevronLeft, IconChevronRight, Inline } from '@7shifts/sous-chef';\nimport styles from './side-nav-bar.scss';\nimport { NavBarItems, NavPosition } from '../../types';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NAV_POSITION } from '../../constants';\nimport SideNavMenu from '../SideNavMenu/SideNavMenu';\n\ntype Props = {\n isHovering?: boolean;\n navPosition?: NavPosition;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n};\n\nconst SideNavBar = ({\n isHovering,\n navPosition = NAV_POSITION.COLLAPSED,\n toggleExpand,\n navItems,\n appLogo\n}: Props) => {\n const isExpanded = navPosition === NAV_POSITION.EXPANDED \|\| isHovering;\n const isTouchDevice = isTouchscreen();\n\n return (\n <nav className={styles['side-nav-bar']}>\n <div className={styles['side-nav-bar__header']}>\n <Inline alignItems=\"center\" justifyContent=\"space-between\">\n {(!isTouchDevice \|\| isExpanded) && (\n <div className={styles['side-nav-bar__logo']}>\n {appLogo}\n </div>\n )}\n {(isExpanded \|\| isTouchDevice) && (\n <button\n onClick={toggleExpand}\n className={styles['side-nav-bar__nav-toggle']}\n >\n {navPosition === NAV_POSITION.COLLAPSED ? (\n <IconChevronRight />\n ) : (\n <IconChevronLeft />\n )}\n </button>\n )}\n </Inline>\n </div>\n <SideNavMenu\n isExpanded={isExpanded as boolean}\n toggleExpand={toggleExpand}\n navItems={navItems}\n />\n </nav>\n );\n};\n\nexport default SideNavBar;\n","import { NavDivider } from './types';\n\nexport const NAV_POSITION = {\n EXPANDED: 'expanded' as const,\n COLLAPSED: 'collapsed' as const\n};\n\nexport const NAV_SIZE = {\n EXPANDED: 240,\n COLLAPSED: 72\n} as const;\n\nexport const DIVIDER: NavDivider = {\n type: 'divider' as const\n};\n","import React from 'react';\nimport { Avatar, Tooltip } from '@7shifts/sous-chef';\nimport styles from './brand.scss';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n};\n\nconst Brand = ({ companyLogoURL, companyName }: Props) => {\n return (\n <div className={styles['brand']}>\n <div className={styles['brand__company-photo']}>\n <Avatar size=\"large\" url={companyLogoURL} />\n </div>\n <Tooltip overlay=\"Company name\">\n <span className={styles['brand__company-name']}>\n {companyName}\n </span>\n </Tooltip>\n </div>\n );\n};\n\nexport default Brand;\n","import React from 'react';\nimport {\n Avatar,\n Dropdown,\n DropdownList,\n DropdownListItem\n} from '@7shifts/sous-chef';\nimport styles from './my-account-menu.scss';\n\nconst MyAccountMenu = () => {\n const trigger = (\n <div className={styles['my-account-menu']}>\n <Avatar\n size=\"large\"\n url=\"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg\"\n />\n </div>\n );\n\n return (\n <Dropdown trigger={trigger} triggersOn=\"hover\" zIndex={6}>\n <DropdownList>\n <DropdownListItem href=\"/employees\">\n My account\n </DropdownListItem>\n <DropdownListItem href=\"/employees\">Log out</DropdownListItem>\n </DropdownList>\n </Dropdown>\n );\n};\n\nexport default MyAccountMenu;\n","import React from 'react';\nimport Brand from '../Brand/Brand';\nimport MyAccountMenu from '../MyAccountMenu/MyAccountMenu';\nimport styles from './top-bar.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n actions: React.ReactNode[];\n};\nconst TopBar = ({ companyLogoURL, companyName, actions }: Props) => {\n return (\n <div className={styles['top-bar']}>\n <div>\n <Brand\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n />\n </div>\n <Inline space={24} alignItems=\"center\">\n <Inline space={12} alignItems=\"center\">\n {actions}\n </Inline>\n <MyAccountMenu />\n </Inline>\n </div>\n );\n};\n\nexport default TopBar;\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport styles from './layout-frame.scss';\nimport useLocalStorage from '../../util/useLocalStorage';\nimport { NAV_POSITION, NAV_SIZE } from '../../constants';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NavBarItems } from '../../types';\nimport SideNavBar from '../SideNavBar/SideNavBar';\nimport TopBar from '../TopBar/TopBar';\n\ntype Props = {\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n actions: React.ReactNode[];\n companyLogoURL: string;\n companyName: string;\n children?: React.ReactNode;\n};\n\nconst LayoutFrame = ({\n navItems,\n appLogo,\n actions,\n companyLogoURL,\n companyName,\n children\n}: Props) => {\n const navRef = useRef<HTMLDivElement>(null);\n const isFullScreen = false;\n const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(\n 'vertical-nav-is-expanded',\n true\n );\n const [isHovering, setIsHovering] = useState(false);\n\n const toggleExpand = () => {\n //@ts-ignore\n setIsExpanded(!isExpanded);\n if (isExpanded && navRef) {\n setIsHovering(false);\n }\n };\n\n const isTouchDevice = isTouchscreen();\n const isShowingSideMenu = !isFullScreen;\n\n return (\n <div className={styles['layout-frame']}>\n {isShowingSideMenu && (\n <div\n ref={navRef}\n className={classNames(styles['layout-frame__side-bar'], {\n [styles['layout-frame__side-bar--expanded']]:\n isExpanded,\n [styles['layout-frame__side-bar--collapsed']]:\n !isExpanded\n })}\n onMouseEnter={() => {\n !isTouchDevice && setIsHovering(true);\n }}\n onMouseLeave={() => {\n !isTouchDevice && setIsHovering(false);\n }}\n style={{\n width:\n isExpanded \|\| isHovering\n ? NAV_SIZE.EXPANDED\n : NAV_SIZE.COLLAPSED\n }}\n >\n <SideNavBar\n isHovering={isHovering}\n navPosition={\n isExpanded\n ? NAV_POSITION.EXPANDED\n : NAV_POSITION.COLLAPSED\n }\n toggleExpand={toggleExpand}\n navItems={navItems}\n appLogo={appLogo}\n />\n </div>\n )}\n\n <div\n className={classNames(styles['layout-frame__middle-area'], {\n [styles['layout-frame__middle-area--full-size']]:\n !isShowingSideMenu\n })}\n >\n {!isFullScreen && (\n <div className={styles['layout-frame__top-bar']}>\n <TopBar\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n actions={actions}\n />\n </div>\n )}\n <div className={styles['layout-frame__content']}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nexport default LayoutFrame;\n","// @ts-strict-ignore\nimport { useCallback, useState } from 'react';\n\nfunction useLocalStorage<T>(\n key: string,\n initialValue: T\n): [T, (value: T) => void] {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that persists the new value to localStorage.\n const setValue = useCallback(\n (value) => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n throw new Error(error as string);\n }\n },\n [key, storedValue]\n );\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n","import React from 'react';\nimport { Tooltip } from '@7shifts/sous-chef';\nimport styles from './nav-button.scss';\nimport NotificationBadge from '../NotificationBadge/NotificationBadge';\n\ntype props = {\n children: React.ReactNode;\n tooltipContent: string;\n badge?: number \| boolean;\n onClick: () => void;\n};\n\nconst NavButton = ({\n children,\n tooltipContent,\n badge = false,\n onClick\n}: props): JSX.Element => {\n return (\n <Tooltip overlay={tooltipContent}>\n <button\n className={styles['nav-button']}\n tabIndex={0}\n onClick={() => onClick()}\n >\n {children}\n {!!badge && <NotificationBadge>{badge}</NotificationBadge>}\n </button>\n </Tooltip>\n );\n};\n\nexport default NavButton;\n"],"names":["isTouchscreen","Boolean","window","navigator","maxTouchPoints","PrimaryNavItem","_ref","as","_ref$as","_ref$isActive","isActive","children","props","className","classNames","_classNames","content","React","Inline","alignItems","space","flex","createElement","SecondaryNavItem","icon","badge","hasChip","hasBadge","Badge","String","parseInt","getBadgeContent","Chip","NotificationBadge","SideNavMenuItemGroup","isExpanded","toggleExpand","item","label","hasActiveSubmenu","items","find","_useState","useState","isSubmenuExpanded","setIsSubmenuExpanded","sortedNavBarItems","sort","itemA","itemB","Number","isPaywalled","Icon","styles","Link","to","url","key","onClick","Fragment","undefined","map","subMenuItem","IconAward","size","color","SideNavMenuItem","e","preventDefault","SideNavMenu","navItems","index","SideNavBar","_ref$navPosition","navPosition","appLogo","isHovering","isTouchDevice","justifyContent","IconChevronRight","IconChevronLeft","Brand","companyName","Avatar","companyLogoURL","Tooltip","overlay","MyAccountMenu","trigger","Dropdown","triggersOn","zIndex","DropdownList","DropdownListItem","href","TopBar","actions","LayoutFrame","navRef","useRef","_useLocalStorage","initialValue","localStorage","getItem","JSON","parse","error","storedValue","setStoredValue","setValue","useCallback","value","valueToStore","Function","setItem","stringify","Error","useLocalStorage","setIsExpanded","setIsHovering","ref","onMouseEnter","onMouseLeave","style","width","_classNames2","NavButton","_ref$badge","tooltipContent","tabIndex"],"mappings":"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"}
1	+ {"version":3,"file":"index.modern.js","sources":["../src/layout/util/mobileDetect.ts","../src/layout/components/PrimaryNavItem/PrimaryNavItem.tsx","../src/layout/components/SecondaryNavItem/SecondaryNavItem.tsx","../src/layout/util/navDomain.ts","../src/layout/components/NotificationBadge/NotificationBadge.tsx","../src/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.tsx","../src/layout/components/SideNavMenuItem/SideNavMenuItem.tsx","../src/layout/components/SideNavMenu/SideNavMenu.tsx","../src/layout/components/SideNavBar/SideNavBar.tsx","../src/layout/constants.ts","../src/layout/components/Brand/Brand.tsx","../src/layout/components/MyAccountMenu/MyAccountMenu.tsx","../src/layout/components/TopBar/TopBar.tsx","../src/layout/components/LayoutFrame/LayoutFrame.tsx","../src/layout/util/useLocalStorage.ts","../src/layout/components/NavButton/NavButton.tsx"],"sourcesContent":["export const isTouchscreen = (): boolean => {\n return Boolean(window.navigator.maxTouchPoints);\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport styles from './primary-nav-item.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n as?: 'div' \| 'li';\n isActive?: boolean;\n children: React.ReactNode;\n};\n\nconst PrimaryNavItem = ({ as = 'li', isActive = false, children }: Props) => {\n const props = {\n className: classNames(styles['primary-nav-item'], {\n [styles['primary-nav-item--active']]: isActive\n })\n };\n\n const content = (\n <Inline alignItems=\"center\" space={16} flex={['0 1 auto', '0 0 142px']}>\n {children}\n </Inline>\n );\n\n return React.createElement(as, props, content);\n};\n\nexport default PrimaryNavItem;\n","import React from 'react';\nimport { Badge, Chip } from '@7shifts/sous-chef';\nimport classNames from 'classnames';\nimport styles from './secondary-nav-item.scss';\nimport { getBadgeContent } from '../../util/navDomain';\n\ntype Props = {\n isActive?: boolean;\n icon?: React.ReactNode;\n badge?: string \| number;\n children: React.ReactNode;\n};\n\nconst SecondaryNavItem = ({\n isActive = false,\n icon,\n badge,\n children\n}: Props) => {\n const hasChip = typeof badge === 'string' && badge !== '';\n const hasBadge = typeof badge === 'number' && badge > 0;\n return (\n <li\n className={classNames(styles['secondary-nav-item'], {\n [styles['secondary-nav-item--active']]: isActive,\n [styles['secondary-nav-item--no-icon']]: !icon\n })}\n >\n {icon}\n <div className={styles['secondary-nav-item__content']}>\n {children}\n {hasBadge && <Badge>{getBadgeContent(badge)}</Badge>}\n {hasChip && <Chip>{badge}</Chip>}\n </div>\n </li>\n );\n};\n\nexport default SecondaryNavItem;\n","export const getBadgeContent = (\n badge: (string \| null \| undefined) \| (number \| null \| undefined)\n): string \| null \| undefined => {\n if (typeof badge === 'number') {\n if (badge > 0 && badge <= 99) {\n //covers number values between 0 and 99\n return String(badge);\n } else if (badge > 99) {\n //covers number values bigger than 99\n return '99+';\n }\n } else if (typeof badge === 'string') {\n //covers all string values, excluding \"0\"\n if (badge === '0') {\n return null;\n } else if (parseInt(badge) > 99) {\n //covers number values bigger than 99\n return '99+';\n } else {\n //return all other strings\n return badge;\n }\n }\n\n return null;\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\nimport styles from './notification-badge.scss';\n\ntype Props = {\n children?: ReactNode;\n};\n\nconst NotificationBadge = ({ children }: Props): JSX.Element => {\n return (\n <span\n className={classNames(styles['notification-badge'], {\n [styles['notification-badge--bullet']]:\n typeof children === 'boolean',\n [styles['notification-badge--count']]:\n typeof children === 'number'\n })}\n data-testid=\"notification-badge\"\n >\n {children}\n </span>\n );\n};\n\nexport default NotificationBadge;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItemGroup } from '../../types';\nimport { Link } from 'react-router-dom';\nimport { IconAward } from '@7shifts/sous-chef';\nimport { useState } from 'react';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport SecondaryNavItem from '../SecondaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\nimport styles from './side-nav-menu-item-group.scss';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n item: NavBarItemGroup;\n};\n\nconst SideNavMenuItemGroup = ({ isExpanded, toggleExpand, item }: Props) => {\n const { label, badge } = item;\n const hasActiveSubmenu = Boolean(item.items.find((item) => item.isActive));\n const [isSubmenuExpanded, setIsSubmenuExpanded] = useState(\n !!hasActiveSubmenu\n );\n\n // sorts paywalled navBarItems to bottom of submenu\n const sortedNavBarItems = item.items.sort(\n (itemA, itemB) =>\n Number(itemA.isPaywalled \|\| false) -\n Number(itemB.isPaywalled \|\| false)\n );\n\n const Icon = item.icon;\n return (\n <li className={styles['side-nav-menu-item-group']}>\n <Link\n to={item.url \|\| item.items[0].url}\n key={label}\n onClick={() => {\n if (!isExpanded && hasActiveSubmenu && toggleExpand) {\n toggleExpand();\n setIsSubmenuExpanded(true);\n return;\n }\n\n if (!isSubmenuExpanded \|\| hasActiveSubmenu) {\n setIsSubmenuExpanded(!isSubmenuExpanded);\n }\n }}\n >\n <PrimaryNavItem as=\"div\" isActive={hasActiveSubmenu}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n {isExpanded && hasActiveSubmenu && (\n <ul className={styles['side-nav-menu-item-group__submenu']}>\n {sortedNavBarItems.map((subMenuItem) => (\n <Link\n to={subMenuItem.url}\n key={subMenuItem.label}\n onClick={() => {\n if (subMenuItem.onClick) {\n subMenuItem.onClick();\n }\n }}\n >\n <SecondaryNavItem\n isActive={subMenuItem.isActive}\n badge={subMenuItem.badge}\n icon={\n subMenuItem.isPaywalled ? (\n <IconAward\n size=\"medium\"\n color=\"eggplant-500\"\n />\n ) : undefined\n }\n >\n {subMenuItem.label}\n </SecondaryNavItem>\n </Link>\n ))}\n </ul>\n )}\n </li>\n );\n};\n\nexport default SideNavMenuItemGroup;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItem } from '../../types';\nimport { Link } from 'react-router-dom';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\n\ntype Props = {\n isExpanded: boolean;\n item: NavBarItem;\n};\n\nconst SideNavMenuItem = ({ isExpanded, item }: Props) => {\n const { url, label, isActive, badge } = item;\n const Icon = item.icon;\n return (\n <Link\n to={url}\n key={label}\n onClick={(e) => {\n if (isActive) {\n e.preventDefault();\n }\n if (item.onClick) {\n item.onClick();\n }\n }}\n >\n <PrimaryNavItem isActive={isActive}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n );\n};\n\nexport default SideNavMenuItem;\n","import React from 'react';\nimport styles from './side-nav-menu.scss';\nimport { NavBarItems } from '../../types';\nimport SideNavMenuItemGroup from '../SideNavMenuItemGroup/SideNavMenuItemGroup';\nimport SideNavMenuItem from '../SideNavMenuItem/SideNavMenuItem';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n};\n\nconst SideNavMenu = ({ isExpanded, toggleExpand, navItems }: Props) => {\n return (\n <ul className={styles['side-nav-menu']}>\n {navItems.map((item, index) => {\n if ('type' in item) {\n return (\n <div\n key={index}\n className={styles['side-nav-menu__divider']}\n />\n );\n }\n if ('items' in item) {\n return (\n <SideNavMenuItemGroup\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n toggleExpand={toggleExpand}\n />\n );\n }\n\n return (\n <SideNavMenuItem\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n />\n );\n })}\n </ul>\n );\n};\n\nexport default SideNavMenu;\n","import React from 'react';\nimport { IconChevronLeft, IconChevronRight, Inline } from '@7shifts/sous-chef';\nimport styles from './side-nav-bar.scss';\nimport { NavBarItems, NavPosition } from '../../types';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NAV_POSITION } from '../../constants';\nimport SideNavMenu from '../SideNavMenu/SideNavMenu';\n\ntype Props = {\n isHovering?: boolean;\n navPosition?: NavPosition;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n};\n\nconst SideNavBar = ({\n isHovering,\n navPosition = NAV_POSITION.COLLAPSED,\n toggleExpand,\n navItems,\n appLogo\n}: Props) => {\n const isExpanded = navPosition === NAV_POSITION.EXPANDED \|\| isHovering;\n const isTouchDevice = isTouchscreen();\n\n return (\n <nav className={styles['side-nav-bar']}>\n <div className={styles['side-nav-bar__header']}>\n <Inline alignItems=\"center\" justifyContent=\"space-between\">\n {(!isTouchDevice \|\| isExpanded) && (\n <div className={styles['side-nav-bar__logo']}>\n {appLogo}\n </div>\n )}\n {(isExpanded \|\| isTouchDevice) && (\n <button\n onClick={toggleExpand}\n className={styles['side-nav-bar__nav-toggle']}\n >\n {navPosition === NAV_POSITION.COLLAPSED ? (\n <IconChevronRight />\n ) : (\n <IconChevronLeft />\n )}\n </button>\n )}\n </Inline>\n </div>\n <SideNavMenu\n isExpanded={isExpanded as boolean}\n toggleExpand={toggleExpand}\n navItems={navItems}\n />\n </nav>\n );\n};\n\nexport default SideNavBar;\n","import { NavDivider } from './types';\n\nexport const NAV_POSITION = {\n EXPANDED: 'expanded' as const,\n COLLAPSED: 'collapsed' as const\n};\n\nexport const NAV_SIZE = {\n EXPANDED: 240,\n COLLAPSED: 72\n} as const;\n\nexport const DIVIDER: NavDivider = {\n type: 'divider' as const\n};\n","import React from 'react';\nimport { Avatar, Tooltip } from '@7shifts/sous-chef';\nimport styles from './brand.scss';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n};\n\nconst Brand = ({ companyLogoURL, companyName }: Props) => {\n return (\n <div className={styles['brand']}>\n <div className={styles['brand__company-photo']}>\n <Avatar size=\"large\" url={companyLogoURL} />\n </div>\n <Tooltip overlay=\"Company name\">\n <span className={styles['brand__company-name']}>\n {companyName}\n </span>\n </Tooltip>\n </div>\n );\n};\n\nexport default Brand;\n","import React from 'react';\nimport { Avatar, Dropdown } from '@7shifts/sous-chef';\nimport styles from './my-account-menu.scss';\n\ntype Props = {\n accountMenuDropdown: React.ReactNode;\n userPrifileImageURL: string;\n};\n\nconst MyAccountMenu = ({ accountMenuDropdown, userPrifileImageURL }: Props) => {\n const trigger = (\n <div className={styles['my-account-menu']}>\n <Avatar size=\"large\" url={userPrifileImageURL} />\n </div>\n );\n\n return (\n <Dropdown trigger={trigger} triggersOn=\"hover\" zIndex={6}>\n {accountMenuDropdown}\n </Dropdown>\n );\n};\n\nexport default MyAccountMenu;\n","import React from 'react';\nimport Brand from '../Brand/Brand';\nimport MyAccountMenu from '../MyAccountMenu/MyAccountMenu';\nimport styles from './top-bar.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n companyLogoURL: string;\n companyName: string;\n actions: React.ReactNode[];\n accountMenuDropdown: React.ReactNode;\n userPrifileImageURL: string;\n};\nconst TopBar = ({\n companyLogoURL,\n companyName,\n actions,\n accountMenuDropdown,\n userPrifileImageURL\n}: Props) => {\n return (\n <div className={styles['top-bar']}>\n <div>\n <Brand\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n />\n </div>\n <Inline space={24} alignItems=\"center\">\n <Inline space={12} alignItems=\"center\">\n {actions}\n </Inline>\n <MyAccountMenu\n accountMenuDropdown={accountMenuDropdown}\n userPrifileImageURL={userPrifileImageURL}\n />\n </Inline>\n </div>\n );\n};\n\nexport default TopBar;\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport styles from './layout-frame.scss';\nimport useLocalStorage from '../../util/useLocalStorage';\nimport { NAV_POSITION, NAV_SIZE } from '../../constants';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NavBarItems } from '../../types';\nimport SideNavBar from '../SideNavBar/SideNavBar';\nimport TopBar from '../TopBar/TopBar';\n\ntype Props = {\n navItems: NavBarItems;\n appLogo: React.ReactNode;\n accountMenuDropdown: React.ReactNode;\n actions: React.ReactNode[];\n companyLogoURL: string;\n companyName: string;\n userPrifileImageURL: string;\n children?: React.ReactNode;\n};\n\nconst LayoutFrame = ({\n navItems,\n appLogo,\n actions,\n companyLogoURL,\n companyName,\n userPrifileImageURL,\n accountMenuDropdown,\n children\n}: Props) => {\n const navRef = useRef<HTMLDivElement>(null);\n const isFullScreen = false;\n const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(\n 'vertical-nav-is-expanded',\n true\n );\n const [isHovering, setIsHovering] = useState(false);\n\n const toggleExpand = () => {\n //@ts-ignore\n setIsExpanded(!isExpanded);\n if (isExpanded && navRef) {\n setIsHovering(false);\n }\n };\n\n const isTouchDevice = isTouchscreen();\n const isShowingSideMenu = !isFullScreen;\n\n return (\n <div className={styles['layout-frame']}>\n {isShowingSideMenu && (\n <div\n ref={navRef}\n className={classNames(styles['layout-frame__side-bar'], {\n [styles['layout-frame__side-bar--expanded']]:\n isExpanded,\n [styles['layout-frame__side-bar--collapsed']]:\n !isExpanded\n })}\n onMouseEnter={() => {\n !isTouchDevice && setIsHovering(true);\n }}\n onMouseLeave={() => {\n !isTouchDevice && setIsHovering(false);\n }}\n style={{\n width:\n isExpanded \|\| isHovering\n ? NAV_SIZE.EXPANDED\n : NAV_SIZE.COLLAPSED\n }}\n >\n <SideNavBar\n isHovering={isHovering}\n navPosition={\n isExpanded\n ? NAV_POSITION.EXPANDED\n : NAV_POSITION.COLLAPSED\n }\n toggleExpand={toggleExpand}\n navItems={navItems}\n appLogo={appLogo}\n />\n </div>\n )}\n\n <div\n className={classNames(styles['layout-frame__middle-area'], {\n [styles['layout-frame__middle-area--full-size']]:\n !isShowingSideMenu\n })}\n >\n {!isFullScreen && (\n <div className={styles['layout-frame__top-bar']}>\n <TopBar\n companyLogoURL={companyLogoURL}\n companyName={companyName}\n actions={actions}\n userPrifileImageURL={userPrifileImageURL}\n accountMenuDropdown={accountMenuDropdown}\n />\n </div>\n )}\n <div className={styles['layout-frame__content']}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nexport default LayoutFrame;\n","// @ts-strict-ignore\nimport { useCallback, useState } from 'react';\n\nfunction useLocalStorage<T>(\n key: string,\n initialValue: T\n): [T, (value: T) => void] {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that persists the new value to localStorage.\n const setValue = useCallback(\n (value) => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n throw new Error(error as string);\n }\n },\n [key, storedValue]\n );\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n","import React from 'react';\nimport { Tooltip } from '@7shifts/sous-chef';\nimport styles from './nav-button.scss';\nimport NotificationBadge from '../NotificationBadge/NotificationBadge';\n\ntype props = {\n children: React.ReactNode;\n tooltipContent: string;\n badge?: number \| boolean;\n onClick: () => void;\n};\n\nconst NavButton = ({\n children,\n tooltipContent,\n badge = false,\n onClick\n}: props): JSX.Element => {\n return (\n <Tooltip overlay={tooltipContent}>\n <button\n className={styles['nav-button']}\n tabIndex={0}\n onClick={() => onClick()}\n >\n {children}\n {!!badge && <NotificationBadge>{badge}</NotificationBadge>}\n </button>\n </Tooltip>\n );\n};\n\nexport default NavButton;\n"],"names":["isTouchscreen","Boolean","window","navigator","maxTouchPoints","PrimaryNavItem","_ref","as","_ref$as","_ref$isActive","isActive","children","props","className","classNames","_classNames","content","React","Inline","alignItems","space","flex","createElement","SecondaryNavItem","icon","badge","hasChip","hasBadge","Badge","String","parseInt","getBadgeContent","Chip","NotificationBadge","SideNavMenuItemGroup","isExpanded","toggleExpand","item","label","hasActiveSubmenu","items","find","_useState","useState","isSubmenuExpanded","setIsSubmenuExpanded","sortedNavBarItems","sort","itemA","itemB","Number","isPaywalled","Icon","styles","Link","to","url","key","onClick","Fragment","undefined","map","subMenuItem","IconAward","size","color","SideNavMenuItem","e","preventDefault","SideNavMenu","navItems","index","SideNavBar","_ref$navPosition","navPosition","appLogo","isHovering","isTouchDevice","justifyContent","IconChevronRight","IconChevronLeft","Brand","companyName","Avatar","companyLogoURL","Tooltip","overlay","MyAccountMenu","accountMenuDropdown","trigger","userPrifileImageURL","Dropdown","triggersOn","zIndex","TopBar","actions","LayoutFrame","navRef","useRef","_useLocalStorage","initialValue","localStorage","getItem","JSON","parse","error","storedValue","setStoredValue","setValue","useCallback","value","valueToStore","Function","setItem","stringify","Error","useLocalStorage","setIsExpanded","setIsHovering","ref","onMouseEnter","onMouseLeave","style","width","_classNames2","NavButton","_ref$badge","tooltipContent","tabIndex"],"mappings":"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"}

package/dist/layout/components/LayoutFrame/LayoutFrame.d.ts CHANGED Viewed

@@ -3,10 +3,12 @@ import { NavBarItems } from '../../types';
 declare type Props = {
     navItems: NavBarItems;
     appLogo: React.ReactNode;
+    accountMenuDropdown: React.ReactNode;
     actions: React.ReactNode[];
     companyLogoURL: string;
     companyName: string;
+    userPrifileImageURL: string;
     children?: React.ReactNode;
 };
-declare const LayoutFrame: ({ navItems, appLogo, actions, companyLogoURL, companyName, children }: Props) => React.JSX.Element;
+declare const LayoutFrame: ({ navItems, appLogo, actions, companyLogoURL, companyName, userPrifileImageURL, accountMenuDropdown, children }: Props) => React.JSX.Element;
 export default LayoutFrame;

package/dist/layout/components/MyAccountMenu/MyAccountMenu.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
 import React from 'react';
-declare const MyAccountMenu: () => React.JSX.Element;
+declare type Props = {
+    accountMenuDropdown: React.ReactNode;
+    userPrifileImageURL: string;
+};
+declare const MyAccountMenu: ({ accountMenuDropdown, userPrifileImageURL }: Props) => React.JSX.Element;
 export default MyAccountMenu;

package/dist/layout/components/TopBar/TopBar.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ declare type Props = {
     companyLogoURL: string;
     companyName: string;
     actions: React.ReactNode[];
+    accountMenuDropdown: React.ReactNode;
+    userPrifileImageURL: string;
 };
-declare const TopBar: ({ companyLogoURL, companyName, actions }: Props) => React.JSX.Element;
+declare const TopBar: ({ companyLogoURL, companyName, actions, accountMenuDropdown, userPrifileImageURL }: Props) => React.JSX.Element;
 export default TopBar;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "app-layout-frame",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "description": "Easily layout your webapp with sidenav and topbar",
     "author": "galexandrade",
     "license": "MIT",