@flipdish/ui-library 0.22.0 → 0.24.0
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.
- package/dist/components/atoms/Badge/index.cjs +16 -3
- package/dist/components/atoms/Badge/index.cjs.map +1 -1
- package/dist/components/atoms/Badge/index.d.ts +13 -24
- package/dist/components/atoms/Badge/index.d.ts.map +1 -1
- package/dist/components/atoms/Badge/index.js +16 -3
- package/dist/components/atoms/Badge/index.js.map +1 -1
- package/dist/components/atoms/Dot/Dot.styles.cjs +51 -0
- package/dist/components/atoms/Dot/Dot.styles.cjs.map +1 -0
- package/dist/components/atoms/Dot/Dot.styles.d.ts +109 -0
- package/dist/components/atoms/Dot/Dot.styles.d.ts.map +1 -0
- package/dist/components/atoms/Dot/Dot.styles.js +49 -0
- package/dist/components/atoms/Dot/Dot.styles.js.map +1 -0
- package/dist/components/atoms/Dot/index.cjs +5 -14
- package/dist/components/atoms/Dot/index.cjs.map +1 -1
- package/dist/components/atoms/Dot/index.d.ts +11 -3
- package/dist/components/atoms/Dot/index.d.ts.map +1 -1
- package/dist/components/atoms/Dot/index.js +5 -14
- package/dist/components/atoms/Dot/index.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs +3 -3
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts +6 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js +3 -3
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.cjs +4 -2
- package/dist/components/molecules/Breadcrumbs/index.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.d.ts +7 -6
- package/dist/components/molecules/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.js +5 -3
- package/dist/components/molecules/Breadcrumbs/index.js.map +1 -1
- package/dist/components/molecules/Carousel/index.cjs +1 -1
- package/dist/components/molecules/Carousel/index.cjs.map +1 -1
- package/dist/components/molecules/Carousel/index.js +1 -1
- package/dist/components/molecules/Carousel/index.js.map +1 -1
- package/dist/components/molecules/EmptyState/index.cjs +2 -1
- package/dist/components/molecules/EmptyState/index.cjs.map +1 -1
- package/dist/components/molecules/EmptyState/index.d.ts.map +1 -1
- package/dist/components/molecules/EmptyState/index.js +3 -2
- package/dist/components/molecules/EmptyState/index.js.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.cjs +2 -1
- package/dist/components/molecules/Select/components/multi-select.cjs.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.js +3 -2
- package/dist/components/molecules/Select/components/multi-select.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +7 -4
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.d.ts +12 -2
- package/dist/components/molecules/Tabs/index.d.ts.map +1 -1
- package/dist/components/molecules/Tabs/index.js +6 -5
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/molecules/Tags/index.cjs +1 -1
- package/dist/components/molecules/Tags/index.cjs.map +1 -1
- package/dist/components/molecules/Tags/index.js +1 -1
- package/dist/components/molecules/Tags/index.js.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.cjs +1 -1
- package/dist/components/organisms/ActivityFeed/index.cjs.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.js +1 -1
- package/dist/components/organisms/ActivityFeed/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/index.cjs +2 -9
- package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +3 -10
- package/dist/components/organisms/CommandMenu/index.js.map +1 -1
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.cjs +25 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.cjs.map +1 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.d.ts +19 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.d.ts.map +1 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.js +23 -0
- package/dist/components/organisms/PageHeader/components/page-header-tab-nav.js.map +1 -0
- package/dist/components/organisms/PageHeader/index.cjs +38 -3
- package/dist/components/organisms/PageHeader/index.cjs.map +1 -1
- package/dist/components/organisms/PageHeader/index.d.ts +78 -3
- package/dist/components/organisms/PageHeader/index.d.ts.map +1 -1
- package/dist/components/organisms/PageHeader/index.js +40 -1
- package/dist/components/organisms/PageHeader/index.js.map +1 -1
- package/dist/components/templates/PageLayout/index.cjs +8 -10
- package/dist/components/templates/PageLayout/index.cjs.map +1 -1
- package/dist/components/templates/PageLayout/index.d.ts +7 -5
- package/dist/components/templates/PageLayout/index.d.ts.map +1 -1
- package/dist/components/templates/PageLayout/index.js +8 -10
- package/dist/components/templates/PageLayout/index.js.map +1 -1
- package/dist/native/components/atoms/Dot/Dot.styles.d.ts +109 -0
- package/dist/native/components/atoms/Dot/Dot.styles.d.ts.map +1 -0
- package/dist/native/components/atoms/Dot/Dot.styles.js +49 -0
- package/dist/native/components/atoms/Dot/Dot.styles.js.map +1 -0
- package/dist/native/components/atoms/Dot/index.d.ts +24 -8
- package/dist/native/components/atoms/Dot/index.d.ts.map +1 -0
- package/dist/native/components/atoms/Dot/index.js +25 -0
- package/dist/native/components/atoms/Dot/index.js.map +1 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.cjs +22 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.cjs.map +1 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts +12 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts.map +1 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.js +20 -0
- package/dist/utilities/__internal__/childrenUtils/children.utils.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/organisms/PageHeader/components/page-header-simple.cjs +0 -16
- package/dist/components/organisms/PageHeader/components/page-header-simple.cjs.map +0 -1
- package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts +0 -26
- package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts.map +0 -1
- package/dist/components/organisms/PageHeader/components/page-header-simple.js +0 -14
- package/dist/components/organisms/PageHeader/components/page-header-simple.js.map +0 -1
|
@@ -6,6 +6,7 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var reactHotkeysHook = require('react-hotkeys-hook');
|
|
9
|
+
var children_utils = require('../../../utilities/__internal__/childrenUtils/children.utils.cjs');
|
|
9
10
|
var commandMenu_utils = require('./commandMenu.utils.cjs');
|
|
10
11
|
var commandInput = require('./components/command-input.cjs');
|
|
11
12
|
var commandMenuFooter = require('./components/command-menu-footer.cjs');
|
|
@@ -61,15 +62,7 @@ const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, f
|
|
|
61
62
|
// Register hotkey for input
|
|
62
63
|
reactHotkeysHook.useHotkeys(shortcut?.split('').join('+').replace('⌘', 'meta') ?? '', () => inputRef.current?.focus());
|
|
63
64
|
// Determine if the command menu has a footer.
|
|
64
|
-
const hasFooter = React.useMemo(() =>
|
|
65
|
-
let hasFooter = false;
|
|
66
|
-
React.Children.forEach(children, (child) => {
|
|
67
|
-
if (child && typeof child === 'object' && 'type' in child && child.type === commandMenuFooter.CommandMenuFooter) {
|
|
68
|
-
hasFooter = true;
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
return hasFooter;
|
|
72
|
-
}, [children]);
|
|
65
|
+
const hasFooter = React.useMemo(() => children_utils.flattenChildren(children).some((child) => React.isValidElement(child) && child.type === commandMenuFooter.CommandMenuFooter), [children]);
|
|
73
66
|
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(CommandMenuContext.Provider, { value: { hasFooter, flatItems, selectedKeys, setSelectedKeys, onSelectionChange, items, ...otherProps }, children: jsxRuntime.jsx(CommandDialog, { isOpen: otherProps.isOpen, onOpenChange: otherProps.onOpenChange, className: overlayClassName, dialogClassName: dialogClassName, "data-testid": rootTestId, children: jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { inputValue, onInputChange, filter: filter === false ? undefined : filter || contains, children: [jsxRuntime.jsx(reactAriaComponents.TextField, { "aria-label": "Search", children: jsxRuntime.jsx(commandInput.CommandInput, { autoFocus: true, shortcutKeys: shortcut ? [shortcut] : undefined, placeholder: placeholder, ref: commandMenu_utils.mergeRefs([inputRef, useHotkeysRef]), className: "relative outline-hidden! after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-border-secondary" }) }), children] }) }) }) }));
|
|
74
67
|
};
|
|
75
68
|
const CommandDialog = ({ className, dialogClassName, children, 'data-testid': dataTestId, ...comboboxProps }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["createContext","useRef","useFilter","useResolvedTestId","useState","useHotkeys","parseHotkey","isDeepEqual","useMemo","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["createContext","useRef","useFilter","useResolvedTestId","useState","useHotkeys","parseHotkey","isDeepEqual","useMemo","flattenChildren","isValidElement","CommandMenuFooter","_jsx","TestIdProvider","_jsxs","AriaAutocomplete","AriaTextField","CommandInput","mergeRefs","AriaModalOverlay","cx","AriaModal","AriaDialog","useContext","AriaListBox","AriaListBoxSection","CommandMenuHeader","AriaCollection","Fragment","CommandDropdownMenuItem","AriaDialogTrigger"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC9I,OAAO,EAEL,UAAU,IAAI,cAAc,EAE5B,aAAa,IAAI,iBAAiB,EAOnC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
3
3
|
import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
|
-
import { createContext, useRef, useState, useMemo,
|
|
4
|
+
import { createContext, useRef, useState, useMemo, isValidElement, useContext, Fragment } from 'react';
|
|
5
5
|
import { ModalOverlay, Modal, Dialog, useFilter, Autocomplete, TextField, ListBox, ListBoxSection, Collection, DialogTrigger } from 'react-aria-components';
|
|
6
6
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
7
|
+
import { flattenChildren } from '../../../utilities/__internal__/childrenUtils/children.utils.js';
|
|
7
8
|
import { isDeepEqual, mergeRefs } from './commandMenu.utils.js';
|
|
8
9
|
import { CommandInput } from './components/command-input.js';
|
|
9
10
|
import { CommandMenuFooter } from './components/command-menu-footer.js';
|
|
@@ -59,15 +60,7 @@ const CommandMenuRoot = ({ items, children, dialogClassName, overlayClassName, f
|
|
|
59
60
|
// Register hotkey for input
|
|
60
61
|
useHotkeys(shortcut?.split('').join('+').replace('⌘', 'meta') ?? '', () => inputRef.current?.focus());
|
|
61
62
|
// Determine if the command menu has a footer.
|
|
62
|
-
const hasFooter = useMemo(() =>
|
|
63
|
-
let hasFooter = false;
|
|
64
|
-
Children.forEach(children, (child) => {
|
|
65
|
-
if (child && typeof child === 'object' && 'type' in child && child.type === CommandMenuFooter) {
|
|
66
|
-
hasFooter = true;
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
return hasFooter;
|
|
70
|
-
}, [children]);
|
|
63
|
+
const hasFooter = useMemo(() => flattenChildren(children).some((child) => isValidElement(child) && child.type === CommandMenuFooter), [children]);
|
|
71
64
|
return (jsx(TestIdProvider, { value: rootTestId, children: jsx(CommandMenuContext.Provider, { value: { hasFooter, flatItems, selectedKeys, setSelectedKeys, onSelectionChange, items, ...otherProps }, children: jsx(CommandDialog, { isOpen: otherProps.isOpen, onOpenChange: otherProps.onOpenChange, className: overlayClassName, dialogClassName: dialogClassName, "data-testid": rootTestId, children: jsxs(Autocomplete, { inputValue, onInputChange, filter: filter === false ? undefined : filter || contains, children: [jsx(TextField, { "aria-label": "Search", children: jsx(CommandInput, { autoFocus: true, shortcutKeys: shortcut ? [shortcut] : undefined, placeholder: placeholder, ref: mergeRefs([inputRef, useHotkeysRef]), className: "relative outline-hidden! after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-border-secondary" }) }), children] }) }) }) }));
|
|
72
65
|
};
|
|
73
66
|
const CommandDialog = ({ className, dialogClassName, children, 'data-testid': dataTestId, ...comboboxProps }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaAutocomplete","AriaTextField","AriaModalOverlay","AriaModal","AriaDialog","AriaListBox","AriaListBoxSection","AriaCollection","AriaDialogTrigger"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/CommandMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaAutocomplete","AriaTextField","AriaModalOverlay","AriaModal","AriaDialog","AriaListBox","AriaListBoxSection","AriaCollection","AriaDialogTrigger"],"mappings":";;;;;;;;;;;;;;AAmDA,MAAM,kBAAkB,GAAG,aAAa,CAAyB;AAC/D,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,IAAI,GAAG,EAAE;AACvB,IAAA,eAAe,EAAE,MAAK,EAAE,CAAC;AAC1B,CAAA,CAAC;AAsBF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,WAAW,GAAG,MAAM,EACpB,WAAW,GAAG,QAAQ,EACtB,mBAAmB,EACnB,QAAQ,GAAG,IAAI,EACf,aAAa,EAAE,UAAU,EACzB,GAAG,UAAU,EACQ,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;AAC/C,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;AAE/G,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,mBAAmB,IAAI,IAAI,GAAG,EAAE,CAAC;;AAGjG,IAAA,MAAM,aAAa,GAAG,KAAK,IAAI,YAAY,IAAI,EAAE;AACjD,IAAA,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;AAC/D,IAAA,MAAM,qBAAqB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC;IACnF,MAAM,8BAA8B,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;AAC1E,QAAA,GAAG,IAAI;AACP,QAAA,YAAY,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,KAAI;AAClD,YAAA,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC;gBAAE,OAAO,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnF,YAAA,OAAO,GAAG;AACZ,QAAA,CAAC,CAAC;AACH,KAAA,CAAC,CAAC;;AAGH,IAAA,MAAM,aAAa,GAAG,UAAU,CAC9B,8BAA8B,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EACzE,CAAC,aAAa,EAAE,YAAY,KAAI;QAC9B,aAAa,CAAC,cAAc,EAAE;QAE9B,MAAM,IAAI,GAAG,8BAA8B,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;AAC1D,YAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;;;;;;AAOtE,YAAA,QACE,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE;AACtF,gBAAA,YAAY,CAAC,UAAU,KAAK,YAAY,CAAC,UAAU;AACnD,gBAAA,YAAY,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG;AACrC,gBAAA,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AACvC,gBAAA,YAAY,CAAC,KAAK,KAAK,YAAY,CAAC,KAAK;AACzC,gBAAA,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AACvC,gBAAA,YAAY,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG;gBACrC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC;AAErD,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,IAAI;AAAE,YAAA,iBAAiB,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AACnD,IAAA,CAAC,EACD,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAC3B;;AAGD,IAAA,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;;AAGrG,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,eAAe,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEjJ,IAAA,QACEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,EAAA,QAAA,EAClIA,GAAA,CAAC,aAAa,EAAA,EACZ,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,SAAS,EAAE,gBAAgB,EAC3B,eAAe,EAAE,eAAe,EAAA,aAAA,EACnB,UAAU,EAAA,QAAA,EAEvBC,IAAA,CAACC,YAAgB,EAAA,EAAO,UAAU,EAAE,aAAa,EAAI,MAAM,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,GAAG,MAAM,IAAI,QAAQ,aAC5GF,GAAA,CAACG,SAAa,EAAA,EAAA,YAAA,EAAY,QAAQ,EAAA,QAAA,EAChCH,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAA,IAAA,EACT,YAAY,EAAE,QAAQ,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,EAC/C,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,EACzC,SAAS,EAAC,uHAAuH,EAAA,CACjI,EAAA,CACY,EACf,QAAQ,CAAA,EAAA,CACQ,EAAA,CACL,EAAA,CACY,EAAA,CACf;AAErB,CAAC;MAOY,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,aAAa,EAAoB,KAAI;AACvI,IAAA,QACEA,GAAA,CAACI,YAAgB,EAAA,EAAA,GACX,aAAa,EACjB,aAAa,EAAA,IAAA,EACb,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,mKAAmK,EACnK,KAAK,CAAC,UAAU,IAAI,0CAA0C,EAC9D,KAAK,CAAC,SAAS,IAAI,2CAA2C,EAC9D,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,QAAA,EAGF,CAAC,KAAK,MACLJ,GAAA,CAACK,KAAS,EAAA,EACR,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,uGAAuG,EACvG,KAAK,CAAC,UAAU,IAAI,6CAA6C,EACjE,KAAK,CAAC,SAAS,IAAI,8CAA8C,EACjE,OAAO,eAAe,KAAK,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,eAAe,CACjF,EAAA,QAAA,EAGHL,GAAA,CAACM,MAAU,EAAA,EAAA,YAAA,EAAY,cAAc,EAAA,aAAA,EAAc,UAAU,EAAE,SAAS,EAAC,sDAAsD,EAAA,QAAA,EAC5H,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,QAAQ,EAAA,CACjD,EAAA,CACH,CACb,EAAA,CACgB;AAEvB;AAIO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAwB,KAAI;AACzG,IAAA,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC;IAEjF,QACEN,GAAA,CAACO,OAAW,EAAA,EAAA,YAAA,EACC,sBAAsB,EAAA,GAC7B,KAAK,EAAA,GACL,YAAY,EAChB,gBAAgB,EAAE,MAAM,UAAU,EAClC,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,CAAC,GAAG,KAAI;AACzB,YAAA,YAAY,CAAC,iBAAiB,GAAG,GAAe,CAAC;AACjD,YAAA,YAAY,CAAC,eAAe,CAAC,GAAe,CAAC;AAC/C,QAAA,CAAC,EACD,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,sFAAsF,EACtF,SAAS,IAAI,oBAAoB,EACjC,CAAC,KAAK,CAAC,OAAO,IAAI,MAAM,EACxB,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,CAEH;AAEN;AAMO,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAA2B,KAAI;IAClG,QACEN,KAACO,cAAkB,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,KAAK,CAAC,SAAS,CAAC,aACpH,KAAK,KACJR,GAAA,CAAC,iBAAiB,IAAa,SAAS,EAAC,MAAM,EAAA,QAAA,EAC5C,KAAK,IADgB,KAAK,CAET,CACrB,EACDA,GAAA,CAACS,UAAc,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAkB,CAAA,EAAA,CACtC;AAEzB;AAcO,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAA2B,KAAI;IAC7F,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC;IAEvD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;IACrC,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAQ;IAEjC,IAAI,OAAO,EAAE;QACX,OAAOT,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,EAAA,CAAY;IACpG;IAEA,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,QAAA,EAAG,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,EAAA,CAAO;AACrG;AAEO,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC,KAAI;AACxF,IAAA,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAA,CAAI;AACvE;AAEA,MAAM,WAAW,GAAG;AAWpB,WAAW,CAAC,IAAI,GAAG,uBAAuB;AAC1C,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,MAAM,GAAG,iBAAiB;AACtC,WAAW,CAAC,OAAO,GAAG,kBAAkB;AACxC,WAAW,CAAC,OAAO,GAAG,kBAAkB;AACxC,WAAW,CAAC,OAAO,GAAGU,aAAiB;AACvC,WAAW,CAAC,UAAU,GAAGD,UAAc;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Badge = require('@flipdish/ui-library/components/atoms/Badge');
|
|
5
|
+
var Tabs = require('@flipdish/ui-library/components/molecules/Tabs');
|
|
6
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
7
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
8
|
+
var reactAriaComponents = require('react-aria-components');
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Desktop section strip for `PageHeader`, styled via the Tabs class maps but rendered as a
|
|
12
|
+
* `<nav>` rather than a `tablist`: react-aria always points a selected `tab`'s
|
|
13
|
+
* `aria-controls` at a `tabpanel`, and the header never owns that content, so the
|
|
14
|
+
* reference could not resolve (fails axe `aria-valid-attr-value`).
|
|
15
|
+
*/
|
|
16
|
+
const PageHeaderTabNav = ({ tabs, selectedTab, onSelect, 'aria-label': ariaLabel, className, 'data-testid': testId, }) => (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, "data-testid": testId, className: cx.cx('w-full', className), children: jsxRuntime.jsx("ul", { className: "relative flex gap-3 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary", children: tabs.map((tab) => {
|
|
17
|
+
const isSelected = tab.id === selectedTab;
|
|
18
|
+
const itemTestId = testIdUtils.joinTestId(testId, `tab-${testIdUtils.slugifyTestId(tab.id)}`);
|
|
19
|
+
const itemClassName = ({ isHovered, isFocusVisible, isDisabled }) => cx.cx('z-10 flex h-max cursor-pointer items-center justify-center whitespace-nowrap text-quaternary transition duration-100 ease-linear', Tabs.tabSizes.sm.base, Tabs.tabSizes.sm.underline, Tabs.getTabStyles({ isSelected, isHovered, isFocusVisible }).underline, isDisabled && 'cursor-not-allowed opacity-50');
|
|
20
|
+
const content = ({ isHovered }) => (jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 px-0.5", children: [tab.label, tab.badge !== undefined && (jsxRuntime.jsx(Badge.Badge, { size: "sm", type: "pill-color", color: isHovered || isSelected ? 'brand' : 'gray', className: "-my-px transition-inherit-all", children: tab.badge }))] }));
|
|
21
|
+
return (jsxRuntime.jsx("li", { className: "flex", children: tab.href ? (jsxRuntime.jsx(reactAriaComponents.Link, { href: tab.href, isDisabled: tab.isDisabled, "aria-current": isSelected ? 'page' : undefined, className: itemClassName, onPress: () => onSelect(tab.id), "data-testid": itemTestId, children: content })) : (jsxRuntime.jsx(reactAriaComponents.Button, { isDisabled: tab.isDisabled, "aria-current": isSelected ? 'true' : undefined, className: itemClassName, onPress: () => onSelect(tab.id), "data-testid": itemTestId, children: content })) }, tab.id));
|
|
22
|
+
}) }) }));
|
|
23
|
+
|
|
24
|
+
exports.PageHeaderTabNav = PageHeaderTabNav;
|
|
25
|
+
//# sourceMappingURL=page-header-tab-nav.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page-header-tab-nav.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-tab-nav.tsx"],"sourcesContent":[null],"names":["_jsx","cx","joinTestId","slugifyTestId","tabSizes","getTabStyles","_jsxs","Badge","AriaLink","AriaButton"],"mappings":";;;;;;;;;AAwBA;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,aAAa,EAAE,MAAM,GACC,MACtBA,sCAAiB,SAAS,EAAA,aAAA,EAAe,MAAM,EAAE,SAAS,EAAEC,KAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAA,QAAA,EACjFD,uBAAI,SAAS,EAAC,6GAA6G,EAAA,QAAA,EACxH,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AAChB,YAAA,MAAM,UAAU,GAAG,GAAG,CAAC,EAAE,KAAK,WAAW;AACzC,YAAA,MAAM,UAAU,GAAGE,sBAAU,CAAC,MAAM,EAAE,CAAA,IAAA,EAAOC,yBAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA,CAAE,CAAC;YAErE,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAoB,KAChFF,KAAE,CACA,kIAAkI,EAClIG,aAAQ,CAAC,EAAE,CAAC,IAAI,EAChBA,aAAQ,CAAC,EAAE,CAAC,SAAS,EACrBC,iBAAY,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC,SAAS,EACjE,UAAU,IAAI,+BAA+B,CAC9C;AAEH,YAAA,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAuC,MACjEC,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/C,GAAG,CAAC,KAAK,EACT,GAAG,CAAC,KAAK,KAAK,SAAS,KACtBN,cAAA,CAACO,WAAK,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,IAAI,UAAU,GAAG,OAAO,GAAG,MAAM,EAAE,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAC5H,GAAG,CAAC,KAAK,EAAA,CACJ,CACT,CAAA,EAAA,CACI,CACR;YAED,QACEP,cAAA,CAAA,IAAA,EAAA,EAAiB,SAAS,EAAC,MAAM,YAC9B,GAAG,CAAC,IAAI,IACPA,cAAA,CAACQ,wBAAQ,EAAA,EACP,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,UAAU,EAAE,GAAG,CAAC,UAAU,EAAA,cAAA,EACZ,UAAU,GAAG,MAAM,GAAG,SAAS,EAC7C,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,MAAM,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAA,aAAA,EAClB,UAAU,EAAA,QAAA,EAEtB,OAAO,EAAA,CACC,KAEXR,cAAA,CAACS,0BAAU,EAAA,EACT,UAAU,EAAE,GAAG,CAAC,UAAU,EAAA,cAAA,EACZ,UAAU,GAAG,MAAM,GAAG,SAAS,EAC7C,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,MAAM,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAA,aAAA,EAClB,UAAU,EAAA,QAAA,EAEtB,OAAO,EAAA,CACG,CACd,EAAA,EAtBM,GAAG,CAAC,EAAE,CAuBV;AAET,QAAA,CAAC,CAAC,EAAA,CACC,EAAA,CACD;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { PageHeaderTab } from '../index';
|
|
2
|
+
interface PageHeaderTabNavProps {
|
|
3
|
+
tabs: PageHeaderTab[];
|
|
4
|
+
selectedTab: string;
|
|
5
|
+
onSelect: (id: string) => void;
|
|
6
|
+
/** Accessible name for the `<nav>` landmark. */
|
|
7
|
+
'aria-label': string;
|
|
8
|
+
className?: string;
|
|
9
|
+
'data-testid': string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Desktop section strip for `PageHeader`, styled via the Tabs class maps but rendered as a
|
|
13
|
+
* `<nav>` rather than a `tablist`: react-aria always points a selected `tab`'s
|
|
14
|
+
* `aria-controls` at a `tabpanel`, and the header never owns that content, so the
|
|
15
|
+
* reference could not resolve (fails axe `aria-valid-attr-value`).
|
|
16
|
+
*/
|
|
17
|
+
export declare const PageHeaderTabNav: ({ tabs, selectedTab, onSelect, "aria-label": ariaLabel, className, "data-testid": testId, }: PageHeaderTabNavProps) => import("react").JSX.Element;
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=page-header-tab-nav.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page-header-tab-nav.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-tab-nav.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,qBAAqB;IAC7B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gDAAgD;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB;AAQD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,6FAO9B,qBAAqB,gCAwDvB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Badge } from '@flipdish/ui-library/components/atoms/Badge';
|
|
3
|
+
import { tabSizes, getTabStyles } from '@flipdish/ui-library/components/molecules/Tabs';
|
|
4
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
5
|
+
import { joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
6
|
+
import { Link, Button } from 'react-aria-components';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Desktop section strip for `PageHeader`, styled via the Tabs class maps but rendered as a
|
|
10
|
+
* `<nav>` rather than a `tablist`: react-aria always points a selected `tab`'s
|
|
11
|
+
* `aria-controls` at a `tabpanel`, and the header never owns that content, so the
|
|
12
|
+
* reference could not resolve (fails axe `aria-valid-attr-value`).
|
|
13
|
+
*/
|
|
14
|
+
const PageHeaderTabNav = ({ tabs, selectedTab, onSelect, 'aria-label': ariaLabel, className, 'data-testid': testId, }) => (jsx("nav", { "aria-label": ariaLabel, "data-testid": testId, className: cx('w-full', className), children: jsx("ul", { className: "relative flex gap-3 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary", children: tabs.map((tab) => {
|
|
15
|
+
const isSelected = tab.id === selectedTab;
|
|
16
|
+
const itemTestId = joinTestId(testId, `tab-${slugifyTestId(tab.id)}`);
|
|
17
|
+
const itemClassName = ({ isHovered, isFocusVisible, isDisabled }) => cx('z-10 flex h-max cursor-pointer items-center justify-center whitespace-nowrap text-quaternary transition duration-100 ease-linear', tabSizes.sm.base, tabSizes.sm.underline, getTabStyles({ isSelected, isHovered, isFocusVisible }).underline, isDisabled && 'cursor-not-allowed opacity-50');
|
|
18
|
+
const content = ({ isHovered }) => (jsxs("span", { className: "flex items-center gap-1.5 px-0.5", children: [tab.label, tab.badge !== undefined && (jsx(Badge, { size: "sm", type: "pill-color", color: isHovered || isSelected ? 'brand' : 'gray', className: "-my-px transition-inherit-all", children: tab.badge }))] }));
|
|
19
|
+
return (jsx("li", { className: "flex", children: tab.href ? (jsx(Link, { href: tab.href, isDisabled: tab.isDisabled, "aria-current": isSelected ? 'page' : undefined, className: itemClassName, onPress: () => onSelect(tab.id), "data-testid": itemTestId, children: content })) : (jsx(Button, { isDisabled: tab.isDisabled, "aria-current": isSelected ? 'true' : undefined, className: itemClassName, onPress: () => onSelect(tab.id), "data-testid": itemTestId, children: content })) }, tab.id));
|
|
20
|
+
}) }) }));
|
|
21
|
+
|
|
22
|
+
export { PageHeaderTabNav };
|
|
23
|
+
//# sourceMappingURL=page-header-tab-nav.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page-header-tab-nav.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-tab-nav.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaLink","AriaButton"],"mappings":";;;;;;;AAwBA;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAC/B,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,aAAa,EAAE,MAAM,GACC,MACtBA,2BAAiB,SAAS,EAAA,aAAA,EAAe,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAA,QAAA,EACjFA,YAAI,SAAS,EAAC,6GAA6G,EAAA,QAAA,EACxH,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AAChB,YAAA,MAAM,UAAU,GAAG,GAAG,CAAC,EAAE,KAAK,WAAW;AACzC,YAAA,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,EAAE,CAAA,IAAA,EAAO,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA,CAAE,CAAC;YAErE,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAoB,KAChF,EAAE,CACA,kIAAkI,EAClI,QAAQ,CAAC,EAAE,CAAC,IAAI,EAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EACrB,YAAY,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC,SAAS,EACjE,UAAU,IAAI,+BAA+B,CAC9C;AAEH,YAAA,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAuC,MACjEC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/C,GAAG,CAAC,KAAK,EACT,GAAG,CAAC,KAAK,KAAK,SAAS,KACtBD,GAAA,CAAC,KAAK,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,IAAI,UAAU,GAAG,OAAO,GAAG,MAAM,EAAE,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAC5H,GAAG,CAAC,KAAK,EAAA,CACJ,CACT,CAAA,EAAA,CACI,CACR;YAED,QACEA,GAAA,CAAA,IAAA,EAAA,EAAiB,SAAS,EAAC,MAAM,YAC9B,GAAG,CAAC,IAAI,IACPA,GAAA,CAACE,IAAQ,EAAA,EACP,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,UAAU,EAAE,GAAG,CAAC,UAAU,EAAA,cAAA,EACZ,UAAU,GAAG,MAAM,GAAG,SAAS,EAC7C,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,MAAM,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAA,aAAA,EAClB,UAAU,EAAA,QAAA,EAEtB,OAAO,EAAA,CACC,KAEXF,GAAA,CAACG,MAAU,EAAA,EACT,UAAU,EAAE,GAAG,CAAC,UAAU,EAAA,cAAA,EACZ,UAAU,GAAG,MAAM,GAAG,SAAS,EAC7C,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,MAAM,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAA,aAAA,EAClB,UAAU,EAAA,QAAA,EAEtB,OAAO,EAAA,CACG,CACd,EAAA,EAtBM,GAAG,CAAC,EAAE,CAuBV;AAET,QAAA,CAAC,CAAC,EAAA,CACC,EAAA,CACD;;;;"}
|
|
@@ -1,8 +1,43 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
+
var Button = require('@flipdish/ui-library/components/atoms/Button');
|
|
6
|
+
var Divider = require('@flipdish/ui-library/components/atoms/Divider');
|
|
7
|
+
var Breadcrumbs = require('@flipdish/ui-library/components/molecules/Breadcrumbs');
|
|
8
|
+
var Select = require('@flipdish/ui-library/components/molecules/Select');
|
|
9
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
10
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
11
|
+
var React = require('react');
|
|
12
|
+
var pageHeaderTabNav = require('./components/page-header-tab-nav.cjs');
|
|
4
13
|
|
|
14
|
+
/**
|
|
15
|
+
* Page-level header that anchors every page: a title (`h1`) with optional breadcrumbs
|
|
16
|
+
* (a back link below `lg`), supporting text, action buttons, section tabs and a divider.
|
|
17
|
+
* Navigation (breadcrumbs, tabs) is data-driven because the header re-renders it per
|
|
18
|
+
* breakpoint; actions are a slot because the header only positions them. Spans the full
|
|
19
|
+
* width of its container — `PageLayout` owns the page padding.
|
|
20
|
+
*
|
|
21
|
+
* @summary page header with title, breadcrumbs, actions and section tabs
|
|
22
|
+
*/
|
|
23
|
+
const PageHeader = ({ title, description, breadcrumbs, actions, tabs, selectedTab, defaultSelectedTab, onTabChange, withDivider = false, className, 'data-testid': dataTestId, }) => {
|
|
24
|
+
const pageHeaderTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-header', rootName: 'page-header' });
|
|
25
|
+
const hasTabs = Boolean(tabs?.length);
|
|
26
|
+
const backCrumb = breadcrumbs
|
|
27
|
+
?.slice(0, -1)
|
|
28
|
+
.reverse()
|
|
29
|
+
.find((crumb) => crumb.href);
|
|
30
|
+
// Uncontrolled fallback so the desktop strip and the mobile select always agree on the selection.
|
|
31
|
+
const [internalSelectedTab, setInternalSelectedTab] = React.useState(defaultSelectedTab);
|
|
32
|
+
const resolvedSelectedTab = selectedTab ?? internalSelectedTab ?? tabs?.[0]?.id ?? '';
|
|
33
|
+
const selectTab = (id) => {
|
|
34
|
+
setInternalSelectedTab(id);
|
|
35
|
+
onTabChange?.(id);
|
|
36
|
+
};
|
|
37
|
+
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: pageHeaderTestId, children: jsxRuntime.jsxs("div", { "data-testid": pageHeaderTestId, className: cx.cx('flex w-full flex-col gap-4', className), children: [breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { divider: "slash", className: "max-lg:hidden", children: breadcrumbs.map((crumb) => (jsxRuntime.jsx(Breadcrumbs.Breadcrumbs.Item, {
|
|
38
|
+
// Pin the segment to the label so an icon-only crumb keeps `--item-<label>` rather than falling back to its href.
|
|
39
|
+
id: crumb.id ?? testIdUtils.slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: uiIcons.ArrowLeft, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex flex-row-reverse flex-wrap items-center justify-end gap-3 lg:flex-row lg:justify-start", children: actions })] }), hasTabs && tabs && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(pageHeaderTabNav.PageHeaderTabNav, { className: "max-lg:hidden", tabs: tabs, selectedTab: resolvedSelectedTab, onSelect: selectTab, "aria-label": title, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'tabs') }), jsxRuntime.jsx(Select.Select, { className: "w-full lg:hidden", size: "md", "aria-label": title, value: resolvedSelectedTab, onChange: (key) => key !== null && selectTab(String(key)), "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'tabs-select'), children: tabs.map((tab) => (jsxRuntime.jsx(Select.Select.Item, { id: tab.id, label: tab.label, isDisabled: tab.isDisabled }, tab.id))) })] })), withDivider && !hasTabs && jsxRuntime.jsx(Divider.Divider, {})] }) }));
|
|
40
|
+
};
|
|
5
41
|
|
|
6
|
-
|
|
7
|
-
exports.PageHeaderSimple = pageHeaderSimple.PageHeaderSimple;
|
|
42
|
+
exports.PageHeader = PageHeader;
|
|
8
43
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useState","_jsx","TestIdProvider","_jsxs","cx","Breadcrumbs","slugifyTestId","Button","ArrowLeft","joinTestId","PageHeaderTabNav","Select","Divider"],"mappings":"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"}
|
|
@@ -1,7 +1,82 @@
|
|
|
1
|
+
import type { FC, ReactNode } from 'react';
|
|
2
|
+
export interface PageHeaderBreadcrumb {
|
|
3
|
+
/** Stable id used for the derived `data-testid`; defaults to a slug of `label`. */
|
|
4
|
+
id?: string;
|
|
5
|
+
/** Visible crumb label. Also labels the mobile back link when this is the parent crumb. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Link target. Omit on the last crumb (the current page). */
|
|
8
|
+
href?: string;
|
|
9
|
+
/** Leading icon, e.g. `HomeLine` on the root crumb. */
|
|
10
|
+
icon?: FC<{
|
|
11
|
+
className?: string;
|
|
12
|
+
}>;
|
|
13
|
+
/**
|
|
14
|
+
* Render only `icon` in the trail; `label` becomes the link's `aria-label` (and still
|
|
15
|
+
* labels the mobile back link). Use on the root home crumb, per the designs.
|
|
16
|
+
*/
|
|
17
|
+
hideLabel?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface PageHeaderTab {
|
|
20
|
+
/** Stable identifier — passed to `onTabChange` and matched against `selectedTab`. */
|
|
21
|
+
id: string;
|
|
22
|
+
/** Visible tab label. */
|
|
23
|
+
label: string;
|
|
24
|
+
/** Optional count/status badge shown after the label (desktop only). */
|
|
25
|
+
badge?: number | string;
|
|
26
|
+
/**
|
|
27
|
+
* Renders the desktop item as a link to this URL (with `aria-current="page"` when
|
|
28
|
+
* selected) instead of a button. `onTabChange` still fires on press.
|
|
29
|
+
*/
|
|
30
|
+
href?: string;
|
|
31
|
+
/** Prevents the tab from being selected. */
|
|
32
|
+
isDisabled?: boolean;
|
|
33
|
+
}
|
|
34
|
+
export interface PageHeaderProps {
|
|
35
|
+
/** Page title (rendered as the `h1`). */
|
|
36
|
+
title: string;
|
|
37
|
+
/** Supporting text shown beneath the title. */
|
|
38
|
+
description?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Breadcrumb trail, root first, current page last. Renders `<Breadcrumbs>` on desktop;
|
|
41
|
+
* below `lg` it collapses to a back link targeting the nearest ancestor crumb with an
|
|
42
|
+
* `href`, labelled with that crumb's label.
|
|
43
|
+
*/
|
|
44
|
+
breadcrumbs?: PageHeaderBreadcrumb[];
|
|
45
|
+
/**
|
|
46
|
+
* Action buttons rendered to the right of the title on desktop and beneath it on
|
|
47
|
+
* mobile. Compose them primary-last (e.g. icon button, secondary, primary): the row is
|
|
48
|
+
* reversed below `lg` so the primary action comes first on mobile, as in the design.
|
|
49
|
+
*/
|
|
50
|
+
actions?: ReactNode;
|
|
51
|
+
/**
|
|
52
|
+
* Section tabs rendered beneath the title row — an underline strip on desktop and a
|
|
53
|
+
* full-width `Select` on mobile. The header only renders the switcher; render the
|
|
54
|
+
* matching content yourself, keyed off `selectedTab` / `onTabChange`.
|
|
55
|
+
*/
|
|
56
|
+
tabs?: PageHeaderTab[];
|
|
57
|
+
/** Controlled selected tab id. */
|
|
58
|
+
selectedTab?: string;
|
|
59
|
+
/** Initially selected tab id (uncontrolled). Defaults to the first tab. */
|
|
60
|
+
defaultSelectedTab?: string;
|
|
61
|
+
/** Called with the tab id when the user picks a tab (desktop strip or mobile select). */
|
|
62
|
+
onTabChange?: (id: string) => void;
|
|
63
|
+
/**
|
|
64
|
+
* Render a divider beneath the title row. Ignored when `tabs` are present — the tab
|
|
65
|
+
* strip draws its own bottom rule.
|
|
66
|
+
*/
|
|
67
|
+
withDivider?: boolean;
|
|
68
|
+
className?: string;
|
|
69
|
+
/** Overrides the `data-testid` (defaults to `fd-page-header`). */
|
|
70
|
+
'data-testid'?: string;
|
|
71
|
+
}
|
|
1
72
|
/**
|
|
2
|
-
* Page-level header
|
|
73
|
+
* Page-level header that anchors every page: a title (`h1`) with optional breadcrumbs
|
|
74
|
+
* (a back link below `lg`), supporting text, action buttons, section tabs and a divider.
|
|
75
|
+
* Navigation (breadcrumbs, tabs) is data-driven because the header re-renders it per
|
|
76
|
+
* breakpoint; actions are a slot because the header only positions them. Spans the full
|
|
77
|
+
* width of its container — `PageLayout` owns the page padding.
|
|
3
78
|
*
|
|
4
|
-
* @summary page header with title and
|
|
79
|
+
* @summary page header with title, breadcrumbs, actions and section tabs
|
|
5
80
|
*/
|
|
6
|
-
export {
|
|
81
|
+
export declare const PageHeader: ({ title, description, breadcrumbs, actions, tabs, selectedTab, defaultSelectedTab, onTabChange, withDivider, className, "data-testid": dataTestId, }: PageHeaderProps) => import("react").JSX.Element;
|
|
7
82
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,sJAYxB,eAAe,gCAmFjB,CAAC"}
|
|
@@ -1,2 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { ArrowLeft } from '@flipdish/ui-icons';
|
|
3
|
+
import { Button } from '@flipdish/ui-library/components/atoms/Button';
|
|
4
|
+
import { Divider } from '@flipdish/ui-library/components/atoms/Divider';
|
|
5
|
+
import { Breadcrumbs } from '@flipdish/ui-library/components/molecules/Breadcrumbs';
|
|
6
|
+
import { Select } from '@flipdish/ui-library/components/molecules/Select';
|
|
7
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
8
|
+
import { useResolvedTestId, TestIdProvider, slugifyTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
9
|
+
import { useState } from 'react';
|
|
10
|
+
import { PageHeaderTabNav } from './components/page-header-tab-nav.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Page-level header that anchors every page: a title (`h1`) with optional breadcrumbs
|
|
14
|
+
* (a back link below `lg`), supporting text, action buttons, section tabs and a divider.
|
|
15
|
+
* Navigation (breadcrumbs, tabs) is data-driven because the header re-renders it per
|
|
16
|
+
* breakpoint; actions are a slot because the header only positions them. Spans the full
|
|
17
|
+
* width of its container — `PageLayout` owns the page padding.
|
|
18
|
+
*
|
|
19
|
+
* @summary page header with title, breadcrumbs, actions and section tabs
|
|
20
|
+
*/
|
|
21
|
+
const PageHeader = ({ title, description, breadcrumbs, actions, tabs, selectedTab, defaultSelectedTab, onTabChange, withDivider = false, className, 'data-testid': dataTestId, }) => {
|
|
22
|
+
const pageHeaderTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-header', rootName: 'page-header' });
|
|
23
|
+
const hasTabs = Boolean(tabs?.length);
|
|
24
|
+
const backCrumb = breadcrumbs
|
|
25
|
+
?.slice(0, -1)
|
|
26
|
+
.reverse()
|
|
27
|
+
.find((crumb) => crumb.href);
|
|
28
|
+
// Uncontrolled fallback so the desktop strip and the mobile select always agree on the selection.
|
|
29
|
+
const [internalSelectedTab, setInternalSelectedTab] = useState(defaultSelectedTab);
|
|
30
|
+
const resolvedSelectedTab = selectedTab ?? internalSelectedTab ?? tabs?.[0]?.id ?? '';
|
|
31
|
+
const selectTab = (id) => {
|
|
32
|
+
setInternalSelectedTab(id);
|
|
33
|
+
onTabChange?.(id);
|
|
34
|
+
};
|
|
35
|
+
return (jsx(TestIdProvider, { value: pageHeaderTestId, children: jsxs("div", { "data-testid": pageHeaderTestId, className: cx('flex w-full flex-col gap-4', className), children: [breadcrumbs && breadcrumbs.length > 0 && (jsx(Breadcrumbs, { divider: "slash", className: "max-lg:hidden", children: breadcrumbs.map((crumb) => (jsx(Breadcrumbs.Item, {
|
|
36
|
+
// Pin the segment to the label so an icon-only crumb keeps `--item-<label>` rather than falling back to its href.
|
|
37
|
+
id: crumb.id ?? slugifyTestId(crumb.label), href: crumb.href, icon: crumb.icon, "aria-label": crumb.hideLabel ? crumb.label : undefined, children: crumb.hideLabel ? undefined : crumb.label }, crumb.id ?? crumb.label))) })), backCrumb?.href && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backCrumb.href, color: "link-gray", size: "sm", iconLeading: ArrowLeft, "data-testid": joinTestId(pageHeaderTestId, 'back'), children: backCrumb.label }) })), jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-start lg:gap-x-4 lg:gap-y-5", children: [jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:min-w-80", children: [jsx("h1", { className: "text-xl font-semibold text-primary lg:text-display-xs", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex flex-row-reverse flex-wrap items-center justify-end gap-3 lg:flex-row lg:justify-start", children: actions })] }), hasTabs && tabs && (jsxs(Fragment, { children: [jsx(PageHeaderTabNav, { className: "max-lg:hidden", tabs: tabs, selectedTab: resolvedSelectedTab, onSelect: selectTab, "aria-label": title, "data-testid": joinTestId(pageHeaderTestId, 'tabs') }), jsx(Select, { className: "w-full lg:hidden", size: "md", "aria-label": title, value: resolvedSelectedTab, onChange: (key) => key !== null && selectTab(String(key)), "data-testid": joinTestId(pageHeaderTestId, 'tabs-select'), children: tabs.map((tab) => (jsx(Select.Item, { id: tab.id, label: tab.label, isDisabled: tab.isDisabled }, tab.id))) })] })), withDivider && !hasTabs && jsx(Divider, {})] }) }));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { PageHeader };
|
|
2
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -5,16 +5,14 @@ var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
|
|
|
5
5
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
6
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
7
|
|
|
8
|
+
/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
|
|
9
|
+
const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-2xl text-center", children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
|
|
8
10
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
|
|
16
|
-
* scroll container, an optional header region, and a page-scoped error boundary keyed
|
|
17
|
-
* by `pageName`. Consumers drop their page content in as children.
|
|
11
|
+
* Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
|
|
12
|
+
* that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
|
|
13
|
+
* header and content, an optional header region, and a page-scoped error boundary keyed
|
|
14
|
+
* by `pageName`. Consumers drop their page content in as children — it stretches to the
|
|
15
|
+
* full content width, so children should not add their own horizontal padding.
|
|
18
16
|
*
|
|
19
17
|
* The boundary wraps `children` only, not the header: content (data-fetching, forms,
|
|
20
18
|
* dynamic logic) is where throws realistically happen, and keeping the header outside
|
|
@@ -27,7 +25,7 @@ const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert"
|
|
|
27
25
|
*/
|
|
28
26
|
const PageLayout = ({ pageName, header, children, renderError, onError, className, 'data-testid': dataTestId, }) => {
|
|
29
27
|
const pageLayoutTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-layout', rootName: 'page-layout' });
|
|
30
|
-
return (jsxRuntime.jsxs("main", { "data-testid": pageLayoutTestId, className: cx.cx('flex w-full flex-col
|
|
28
|
+
return (jsxRuntime.jsxs("main", { "data-testid": pageLayoutTestId, className: cx.cx('flex w-full flex-col gap-md p-md lg:p-xl', className), children: [header, jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsxRuntime.jsx(DefaultPageError, { testId: testIdUtils.joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
|
|
31
29
|
};
|
|
32
30
|
|
|
33
31
|
exports.PageLayout = PageLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","cx","ErrorBoundary","joinTestId"],"mappings":";;;;;;;AAmCA
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","useResolvedTestId","cx","ErrorBoundary","joinTestId"],"mappings":";;;;;;;AAmCA;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CAC3GC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACEF,eAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAEG,KAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtG,MAAM,EAEPF,cAAA,CAACG,2BAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIH,cAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAEI,sBAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
|
|
@@ -7,8 +7,8 @@ export interface PageLayoutProps {
|
|
|
7
7
|
*/
|
|
8
8
|
pageName: string;
|
|
9
9
|
/**
|
|
10
|
-
* Header region. Compose `<
|
|
11
|
-
*
|
|
10
|
+
* Header region. Compose `<PageHeader>` (or a feature wrapper around it) here.
|
|
11
|
+
* Rendered OUTSIDE the error boundary so page chrome (breadcrumbs, back link)
|
|
12
12
|
* stays usable when the content below throws.
|
|
13
13
|
*/
|
|
14
14
|
header?: ReactNode;
|
|
@@ -30,9 +30,11 @@ export interface PageLayoutProps {
|
|
|
30
30
|
'data-testid'?: string;
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
|
-
* Page-shaped template that standardises the MFE's page chrome:
|
|
34
|
-
*
|
|
35
|
-
*
|
|
33
|
+
* Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
|
|
34
|
+
* that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
|
|
35
|
+
* header and content, an optional header region, and a page-scoped error boundary keyed
|
|
36
|
+
* by `pageName`. Consumers drop their page content in as children — it stretches to the
|
|
37
|
+
* full content width, so children should not add their own horizontal padding.
|
|
36
38
|
*
|
|
37
39
|
* The boundary wraps `children` only, not the header: content (data-fetching, forms,
|
|
38
40
|
* dynamic logic) is where throws realistically happen, and keeping the header outside
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IACvE,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAUD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,6FAQxB,eAAe,KAAG,SAgBpB,CAAC"}
|
|
@@ -3,16 +3,14 @@ import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
|
|
|
3
3
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
4
|
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
5
|
|
|
6
|
+
/** English fallback copy — consumers localise via `renderError`. TODO(i18n): source from ui-library's translation layer once one exists. */
|
|
7
|
+
const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full flex-col items-center gap-2 py-2xl text-center", children: [jsx("h2", { className: "text-lg font-semibold text-primary", children: "Something went wrong" }), jsx("p", { className: "text-md text-tertiary", children: "An unexpected error occurred while loading this page." })] }));
|
|
6
8
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Page-shaped template that standardises the MFE's page chrome: the centered `<main>`
|
|
14
|
-
* scroll container, an optional header region, and a page-scoped error boundary keyed
|
|
15
|
-
* by `pageName`. Consumers drop their page content in as children.
|
|
9
|
+
* Page-shaped template that standardises the MFE's page chrome: a full-width `<main>`
|
|
10
|
+
* that owns the page padding (16px on mobile, 24px from `lg`) and the 16px gap between
|
|
11
|
+
* header and content, an optional header region, and a page-scoped error boundary keyed
|
|
12
|
+
* by `pageName`. Consumers drop their page content in as children — it stretches to the
|
|
13
|
+
* full content width, so children should not add their own horizontal padding.
|
|
16
14
|
*
|
|
17
15
|
* The boundary wraps `children` only, not the header: content (data-fetching, forms,
|
|
18
16
|
* dynamic logic) is where throws realistically happen, and keeping the header outside
|
|
@@ -25,7 +23,7 @@ const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-tes
|
|
|
25
23
|
*/
|
|
26
24
|
const PageLayout = ({ pageName, header, children, renderError, onError, className, 'data-testid': dataTestId, }) => {
|
|
27
25
|
const pageLayoutTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-layout', rootName: 'page-layout' });
|
|
28
|
-
return (jsxs("main", { "data-testid": pageLayoutTestId, className: cx('flex w-full flex-col
|
|
26
|
+
return (jsxs("main", { "data-testid": pageLayoutTestId, className: cx('flex w-full flex-col gap-md p-md lg:p-xl', className), children: [header, jsx(ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsx(DefaultPageError, { testId: joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
|
|
29
27
|
};
|
|
30
28
|
|
|
31
29
|
export { PageLayout };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmCA
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/templates/PageLayout/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAmCA;AACA,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CAC3GC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA0B,EAC5EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,uDAAA,EAAA,CAA0D,CAAA,EAAA,CAC1F,CACP;AAED;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAe;AAC/B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAEnH,IAAA,QACED,IAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAmB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtG,MAAM,EAEPC,GAAA,CAAC,aAAa,EAAA,EACZ,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,CAAC,KAAK,KAAK,WAAW,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAIA,GAAA,CAAC,gBAAgB,EAAA,EAAC,MAAM,EAAE,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAA,CAAI,EAAA,QAAA,EAEnI,QAAQ,EAAA,CACK,CAAA,EAAA,CACX;AAEX;;;;"}
|