@mailstep/design-system 0.6.64 → 0.6.65-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.64",
+  "version": "0.6.65-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import type { MenuItem as MenuItemType } from '../../../../types';
+type MenuItemProps = {
+    item: MenuItemType;
+};
+export declare const MenuItem: FC<MenuItemProps>;
+export {};

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { MenuItemsListItem } from '../../styles';
+export var MenuItem = function (_a) {
+    var item = _a.item;
+    return (_jsx(MenuItemsListItem, { children: _jsx(Link, { to: item.link, children: item.name }) }));
+};

package/ui/Blocks/Header/components/MenuItems/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import type { MenuItem as MenuItemType } from '../../types';
+type MenuItemsProps = {
+    items?: MenuItemType[];
+};
+export declare const MenuItems: FC<MenuItemsProps>;
+export {};

package/ui/Blocks/Header/components/MenuItems/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem } from './components/MenuItem';
+import { MenuItemsList } from './styles';
+export var MenuItems = function (_a) {
+    var items = _a.items;
+    return (_jsx(MenuItemsList, { children: items === null || items === void 0 ? void 0 : items.map(function (item, key) { return (_jsx(MenuItem, { item: item }, key)); }) }));
+};

package/ui/Blocks/Header/components/MenuItems/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const MenuItemsList: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
+export declare const MenuItemsListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"])));
+export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n    color: red1;\n    border-color: red1;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n  }\n"], ["\n  a {\n    text-decoration: none;\n    color: red1;\n    border-color: red1;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n  }\n"])));
+var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+type UserInfoProps = {
+    userName?: string;
+    role?: string;
+};
+export declare const UserInfoBlock: FC<UserInfoProps>;
+export {};

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Avatar from '../../../../../../Elements/Avatar';
+import { H7 } from '../../../../../../Elements/Typography';
+import { AvatarWrapper, UserInfo } from './styles';
+export var UserInfoBlock = function (_a) {
+    var userName = _a.userName, role = _a.role;
+    return (_jsxs(AvatarWrapper, { children: [_jsx(Avatar, { colorBack: "lightGray7", size: 34 }), _jsxs(UserInfo, { children: [_jsx(H7, { variant: "bold", mt: 0, mb: "4px", children: userName }), _jsx(H7, { mt: 0, mb: 0, children: role })] })] }));
+};

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const UserInfo: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const AvatarWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var UserInfo = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+export var AvatarWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"], ["\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"])));
+var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useLogout } from './useLogout';

package/ui/Blocks/Header/components/UserMenu/hooks/index.js

@@ -0,0 +1 @@
+export { useLogout } from './useLogout';

package/ui/Blocks/Header/components/UserMenu/hooks/useLogout.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    closeDropdown: () => void;
+    onLogout?: () => void;
+};
+type HookType = (props: Props) => {
+    handleLogout: () => void;
+};
+export declare const useLogout: HookType;
+export {};

package/ui/Blocks/Header/components/UserMenu/hooks/useLogout.js

@@ -0,0 +1,10 @@
+export var useLogout = function (_a) {
+    var closeDropdown = _a.closeDropdown, onLogout = _a.onLogout;
+    var handleLogout = function () {
+        closeDropdown();
+        onLogout === null || onLogout === void 0 ? void 0 : onLogout();
+    };
+    return {
+        handleLogout: handleLogout
+    };
+};

package/ui/Blocks/Header/components/UserMenu/index.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { User } from '../../types';
+type Props = {
+    user?: User;
+    onLogout?: () => void;
+};
+export declare const UserMenu: FC<Props>;
+export {};

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import Avatar from '../../../../Elements/Avatar';
+import Button from '../../../../Elements/Button';
+import { useToggleAndClose } from '../../../../hooks/useToggleAndClose';
+import Popover from '../../../Popover';
+import { UserInfoBlock } from './components/UserInfo';
+import { Trans } from '@lingui/react';
+import { useLogout } from './hooks';
+import { DropdownContentWrap, Line, UserWrap } from './styles';
+export var UserMenu = function (_a) {
+    var _b, _c, _d, _e;
+    var user = _a.user, onLogout = _a.onLogout;
+    var _f = useToggleAndClose(false), isDropdownOpen = _f[0], toggleDropdown = _f[1], closeDropdown = _f[2];
+    var parentRef = useRef(null);
+    var handleLogout = useLogout({ closeDropdown: closeDropdown, onLogout: onLogout }).handleLogout;
+    return (_jsxs(UserWrap, { children: [_jsx("div", { ref: parentRef, onClick: toggleDropdown, children: _jsx(Avatar, { colorBack: isDropdownOpen ? 'lightGray7' : 'neutral20', size: 34 }) }), isDropdownOpen && (_jsx(Popover, { parentRef: parentRef, onClose: closeDropdown, children: _jsxs(DropdownContentWrap, { children: [_jsx(UserInfoBlock, { userName: "".concat((_b = user === null || user === void 0 ? void 0 : user.firstName) !== null && _b !== void 0 ? _b : '', " ").concat((_c = user === null || user === void 0 ? void 0 : user.lastName) !== null && _c !== void 0 ? _c : ''), role: (_e = (_d = user === null || user === void 0 ? void 0 : user.roles) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : '' }), _jsx(Line, {}), _jsx(Button, { onClick: handleLogout, iconLeft: "logout", variant: "ghost", fullWidth: true, children: _jsx(Trans, { id: "logout", message: "Logout" }) })] }) }))] }));
+};

package/ui/Blocks/Header/components/UserMenu/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const UserWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const DropdownContentWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Header/components/UserMenu/styles.js

@@ -0,0 +1,9 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { th } from '@xstyled/styled-components';
+export var UserWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"])));
+export var DropdownContentWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"], ["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"])), th.shadow('dropShadow'), th.color('lightGray6'));
+export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"], ["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"])), th.color('lightGray6'));
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Header/hooks/useChangeLanguage.d.ts

@@ -0,0 +1,9 @@
+type HookProps = {
+    onChangeLanguage?: (language: string) => void;
+};
+type HookReturn = {
+    handleChangeLanguage: (languageCode: string) => void;
+};
+type HookType = ({ onChangeLanguage }: HookProps) => HookReturn;
+export declare const useChangeLanguage: HookType;
+export {};

package/ui/Blocks/Header/hooks/useChangeLanguage.js

@@ -0,0 +1,10 @@
+export var useChangeLanguage = function (_a) {
+    var onChangeLanguage = _a.onChangeLanguage;
+    var handleChangeLanguage = function (languageCode) {
+        onChangeLanguage === null || onChangeLanguage === void 0 ? void 0 : onChangeLanguage(languageCode);
+        location.reload();
+    };
+    return {
+        handleChangeLanguage: handleChangeLanguage
+    };
+};

package/ui/Blocks/Header/index.d.ts

@@ -0,0 +1,18 @@
+import { type FC } from 'react';
+import type { Brand, Variant } from '../../Elements/Logo';
+import type { User, MenuItem } from './types';
+type Props = {
+    homeLink: string;
+    isMobileMenuOpen?: boolean;
+    logo: Brand;
+    logoVariant: Variant;
+    user?: User;
+    currentLanguage?: string;
+    hasUserMenu?: boolean;
+    rightMenuItems?: MenuItem[];
+    onOpenMobileSideMenu?: () => void;
+    onChangeLanguage?: (language: string) => void;
+    onLogout?: () => void;
+};
+export declare const Header: FC<Props>;
+export {};

package/ui/Blocks/Header/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import Logo from '../../Elements/Logo';
+import LanguageSwitch from '../LanguageSwitch';
+import { HamburgerMenuButton } from '../SideMenu';
+import { MenuItems } from './components/MenuItems';
+import { UserMenu } from './components/UserMenu';
+import { useChangeLanguage } from './hooks/useChangeLanguage';
+import { languageItems } from './utils/languageItems';
+import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
+export var Header = function (_a) {
+    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
+    var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
+    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [_jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: _jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" }) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), _jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage }) }), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
+};

package/ui/Blocks/Header/stories/Header.stories.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        homeLink: string;
+        isMobileMenuOpen?: boolean | undefined;
+        logo: import("../../..").Brand;
+        logoVariant: import("../../..").Variant;
+        user?: import("../types").User | undefined;
+        currentLanguage?: string | undefined;
+        hasUserMenu?: boolean | undefined;
+        rightMenuItems?: import("../types").MenuItem[] | undefined;
+        onOpenMobileSideMenu?: (() => void) | undefined;
+        onChangeLanguage?: ((language: string) => void) | undefined;
+        onLogout?: (() => void) | undefined;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const HeaderBasic: () => JSX.Element;
+export declare const HeaderWithUser: () => JSX.Element;
+export declare const HeaderWithRightLink: () => JSX.Element;
+export declare const HeaderWithLanguageSwitch: () => JSX.Element;
+export declare const HeaderWithAllItems: () => JSX.Element;

package/ui/Blocks/Header/stories/Header.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Header } from '../';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+var meta = {
+    title: 'Blocks/Header',
+    component: Header,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+var user = {
+    firstName: 'John',
+    lastName: 'Black',
+    roles: ['ADMIN']
+};
+var menuItems = [
+    {
+        name: 'About us',
+        link: 'http://mailstep.com'
+    },
+    {
+        name: 'Tracking package',
+        link: 'http://mailstep.com/tracking'
+    },
+    {
+        name: 'Customer service',
+        link: 'http://mailstep.com/cc'
+    }
+];
+export default meta;
+export var HeaderBasic = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s" }) })); };
+export var HeaderWithUser = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", hasUserMenu: true, user: user }) })); };
+export var HeaderWithRightLink = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", rightMenuItems: menuItems }) })); };
+export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", currentLanguage: "cs" }) })); };
+export var HeaderWithAllItems = function () {
+    var _a = useState(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
+    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, isMobileMenuOpen: isMobileMenuOpen, onOpenMobileSideMenu: function () { return setIsMobileMenuOpen(function (state) { return !state; }); } }) }));
+};

package/ui/Blocks/Header/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"header", import("@xstyled/system").Theme, {}, never>;
+export declare const LeftSide: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LanguageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const RightSide: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Header/styles.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { headerHeight } from './utils/constants';
+import styled, { th } from '@xstyled/styled-components';
+export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 20px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n"])), headerHeight, th.color('lightGray7'));
+export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
+export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 20px;\n  align-items: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Header/types.d.ts

@@ -0,0 +1,9 @@
+export type User = {
+    firstName?: string;
+    lastName?: string;
+    roles?: string[];
+};
+export type MenuItem = {
+    name: string;
+    link: string;
+};

package/ui/Blocks/Header/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/Header/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const headerHeight = "52px";

package/ui/Blocks/Header/utils/constants.js

@@ -0,0 +1 @@
+export var headerHeight = '52px';

package/ui/Blocks/Header/utils/languageItems.d.ts

@@ -0,0 +1,2 @@
+import type { LanguageItem } from '../../LanguageSwitch';
+export declare const languageItems: LanguageItem[];

package/ui/Blocks/Header/utils/languageItems.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlagCZ } from '../../../Elements/Icon/icons/FlagCZ';
+import { FlagUSA } from '../../../Elements/Icon/icons/FlagUSA';
+export var languageItems = [
+    {
+        languageCode: 'cs',
+        icon: _jsx(FlagCZ, {}),
+        title: 'Česky'
+    },
+    {
+        languageCode: 'en',
+        icon: _jsx(FlagUSA, {}),
+        title: 'English'
+    }
+];

package/ui/Blocks/LanguageSwitch/LanguageSwitch.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { LanguageSwitchProps } from './types';
+import type { FC } from 'react';
+import type { LanguageSwitchProps } from './types';
 declare const LanguageSwitch: FC<LanguageSwitchProps>;
 export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -13,7 +13,7 @@ var LanguageSwitch = function (_a) {
         setFlagDropdownVisible(!flagDropdownVisible);
     }, [flagDropdownVisible]);
     var languageToggle = useCallback(function (languageCode) { return function () {
-        onLanguageChange && onLanguageChange(languageCode);
+        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(languageCode);
     }; }, [onLanguageChange]);
     var activeLanguageObj = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.find(function (language) { return language.languageCode === activeLanguage; }); }, [activeLanguage, languageItems]);
     var filteredLanguages = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.filter(function (language) { return language.languageCode !== activeLanguage; }); }, [languageItems, activeLanguage]);

package/ui/Elements/Logo/index.d.ts

@@ -1,3 +1,4 @@
 import Logo from './Logo';
 export { Logo };
+export type { Brand, Variant } from './types';
 export default Logo;

package/ui/hooks/useToggleAndClose.d.ts

@@ -0,0 +1,3 @@
+type HookType = (initialValue?: boolean) => [state: boolean, toggleHandler: () => void, onClose: () => void];
+export declare const useToggleAndClose: HookType;
+export {};

package/ui/hooks/useToggleAndClose.js

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+export var useToggleAndClose = function (initialValue) {
+    if (initialValue === void 0) { initialValue = true; }
+    var _a = useState(initialValue), state = _a[0], setState = _a[1];
+    var toggleHandler = function () {
+        setState(function (prev) { return !prev; });
+    };
+    var onClose = function () {
+        setState(false);
+    };
+    return [state, toggleHandler, onClose];
+};