@cimpress-ui/react 1.11.0 → 1.11.1
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.
|
@@ -19,7 +19,7 @@ const cimpress_logo_js_1 = require("./cimpress-logo.js");
|
|
|
19
19
|
function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNSTABLE_postTitle: postTitle, UNSTABLE_search: search, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
20
20
|
const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
|
|
21
21
|
const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
25
|
* Displays a basic application header.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n title: string;\n /** The props of the link that is rendered around the header title. */\n titleLink: Href | AppHeaderTitleLinkProps;\n /** The tools to render at the end of the header. */\n tools?: ReactNode;\n UNSTABLE_navButton?: ReactNode;\n UNSTABLE_postTitle?: ReactNode;\n UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n {\n title,\n titleLink,\n tools,\n UNSTABLE_navButton: navButton,\n UNSTABLE_postTitle: postTitle,\n UNSTABLE_search: search,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: AppHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const isMobile = useIsMobile();\n\n const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n return (\n <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-app-header-title\">\n {navButton}\n <CimpressLogo height={24} />\n <Divider orientation=\"vertical\" />\n <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n {title}\n </Link>\n </Text>\n\n {postTitle}\n </div>\n\n {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n <div className=\"cim-app-header-tools\">\n {isMobile && tools ? (\n <PopoverRoot>\n <IconButton\n icon={<IconMenuMoreVertical />}\n // TODO: i18n\n aria-label=\"Expand/collapse header\"\n variant=\"tertiary\"\n size=\"small\"\n />\n <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n </Popover>\n </PopoverRoot>\n ) : (\n tools\n )}\n </div>\n </header>\n );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}
|
|
@@ -13,7 +13,7 @@ import { CimpressLogo } from './cimpress-logo.js';
|
|
|
13
13
|
function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNSTABLE_postTitle: postTitle, UNSTABLE_search: search, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
14
14
|
const isMobile = useIsMobile();
|
|
15
15
|
const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
|
|
16
|
-
return (_jsxs("header", { ...props, ref: ref, className: clsx('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [_jsxs("div", { className: "cim-app-header-title", children: [navButton, _jsx(CimpressLogo, { height: 24 }), _jsx(Divider, { orientation: "vertical" }), _jsx(Text, { as: "h1", variant: "title-5", tone: "base", children: _jsx(Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && _jsx("div", { className: "cim-app-header-search", children: search }), _jsx("div", { className: "cim-app-header-tools", children: isMobile ? (_jsxs(PopoverRoot, { children: [_jsx(IconButton, { icon: _jsx(IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), _jsx(Popover, { "aria-label": "Expanded header", placement: "bottom end", children: _jsx("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
|
|
16
|
+
return (_jsxs("header", { ...props, ref: ref, className: clsx('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [_jsxs("div", { className: "cim-app-header-title", children: [navButton, _jsx(CimpressLogo, { height: 24 }), _jsx(Divider, { orientation: "vertical" }), _jsx(Text, { as: "h1", variant: "title-5", tone: "base", children: _jsx(Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && _jsx("div", { className: "cim-app-header-search", children: search }), _jsx("div", { className: "cim-app-header-tools", children: isMobile && tools ? (_jsxs(PopoverRoot, { children: [_jsx(IconButton, { icon: _jsx(IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), _jsx(Popover, { "aria-label": "Expanded header", placement: "bottom end", children: _jsx("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* Displays a basic application header.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,qBAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,eAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,KAAC,IAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,cAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,qBAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,eAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,KAAC,YAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,KAAC,IAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,cAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,MAAC,WAAW,eACV,KAAC,UAAU,IACT,IAAI,EAAE,KAAC,oBAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,KAAC,OAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,cAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n title: string;\n /** The props of the link that is rendered around the header title. */\n titleLink: Href | AppHeaderTitleLinkProps;\n /** The tools to render at the end of the header. */\n tools?: ReactNode;\n UNSTABLE_navButton?: ReactNode;\n UNSTABLE_postTitle?: ReactNode;\n UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n {\n title,\n titleLink,\n tools,\n UNSTABLE_navButton: navButton,\n UNSTABLE_postTitle: postTitle,\n UNSTABLE_search: search,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: AppHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const isMobile = useIsMobile();\n\n const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n return (\n <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-app-header-title\">\n {navButton}\n <CimpressLogo height={24} />\n <Divider orientation=\"vertical\" />\n <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n {title}\n </Link>\n </Text>\n\n {postTitle}\n </div>\n\n {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n <div className=\"cim-app-header-tools\">\n {isMobile && tools ? (\n <PopoverRoot>\n <IconButton\n icon={<IconMenuMoreVertical />}\n // TODO: i18n\n aria-label=\"Expand/collapse header\"\n variant=\"tertiary\"\n size=\"small\"\n />\n <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n </Popover>\n </PopoverRoot>\n ) : (\n tools\n )}\n </div>\n </header>\n );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}
|