@flipdish/ui-library 0.23.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/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/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/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/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
|
@@ -8,7 +8,7 @@ var React = require('react');
|
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
9
|
var componentGuard_utils = require('../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.cjs');
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
/** Per-type tab classes for an interaction state — exported so `PageHeader`'s nav strip matches without duplicating the maps. */
|
|
12
12
|
const getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
|
|
13
13
|
'button-brand': cx.cx('outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
|
|
14
14
|
'button-gray': cx.cx('outline-focus-ring *:data-icon:text-fg-quaternary', isHovered && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover', isFocusVisible && 'outline-2 -outline-offset-2', isSelected && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover'),
|
|
@@ -17,7 +17,8 @@ const getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
|
|
|
17
17
|
underline: cx.cx('rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
|
|
18
18
|
line: cx.cx('rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
|
|
19
19
|
});
|
|
20
|
-
|
|
20
|
+
/** Per-size tab classes (`base` + one entry per type). See `getTabStyles`. */
|
|
21
|
+
const tabSizes = {
|
|
21
22
|
sm: {
|
|
22
23
|
base: 'text-sm font-semibold gap-1 *:data-icon:size-4',
|
|
23
24
|
'button-brand': 'py-2 px-2.5',
|
|
@@ -37,7 +38,7 @@ const sizes = {
|
|
|
37
38
|
line: 'pr-3.5 pl-3 py-1',
|
|
38
39
|
},
|
|
39
40
|
};
|
|
40
|
-
|
|
41
|
+
/** Per-type classes for the horizontal `TabList` container. */
|
|
41
42
|
const getHorizontalStyles = ({ size, fullWidth }) => ({
|
|
42
43
|
'button-brand': 'gap-1',
|
|
43
44
|
'button-gray': 'gap-1',
|
|
@@ -82,7 +83,7 @@ const Tab = ({ label, children, badge, icon: Icon, className, 'data-testid': dat
|
|
|
82
83
|
? testIdUtils.slugifyTestId(children)
|
|
83
84
|
: 'item';
|
|
84
85
|
const tabTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, `tab-${idPart}`) : undefined);
|
|
85
|
-
return (jsxRuntime.jsx(reactAriaComponents.Tab, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx.cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1',
|
|
86
|
+
return (jsxRuntime.jsx(reactAriaComponents.Tab, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx.cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.isValidElement(Icon) && Icon, componentGuard_utils.isReactComponent(Icon) && jsxRuntime.jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxRuntime.jsxs("span", { className: cx.cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsxRuntime.jsx(Badge.Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx.cx('hidden transition-inherit-all md:flex', size === 'sm' && '-my-px'), children: badge }))] })] })) }));
|
|
86
87
|
};
|
|
87
88
|
/**
|
|
88
89
|
* Organises related content into labelled panels, showing one at a time.
|
|
@@ -102,4 +103,6 @@ exports.Tab = Tab;
|
|
|
102
103
|
exports.TabList = TabList;
|
|
103
104
|
exports.TabPanel = TabPanel;
|
|
104
105
|
exports.Tabs = Tabs;
|
|
106
|
+
exports.getTabStyles = getTabStyles;
|
|
107
|
+
exports.tabSizes = tabSizes;
|
|
105
108
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["cx","createContext","useSlottedContext","TabsContext","useTestIdPrefix","joinTestId","_jsx","AriaTabList","slugifyTestId","AriaTabPanel","useContext","AriaTab","_jsxs","_Fragment","isValidElement","isReactComponent","Badge","useResolvedTestId","TestIdProvider","AriaTabs"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["cx","createContext","useSlottedContext","TabsContext","useTestIdPrefix","joinTestId","_jsx","AriaTabList","slugifyTestId","AriaTabPanel","useContext","AriaTab","_jsxs","_Fragment","isValidElement","isReactComponent","Badge","useResolvedTestId","TestIdProvider","AriaTabs"],"mappings":"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"}
|
|
@@ -5,7 +5,17 @@ type Orientation = 'horizontal' | 'vertical';
|
|
|
5
5
|
type HorizontalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'underline';
|
|
6
6
|
type VerticalTypes = 'button-brand' | 'button-gray' | 'button-border' | 'button-minimal' | 'line';
|
|
7
7
|
type TabTypeColors<T> = T extends 'horizontal' ? HorizontalTypes : VerticalTypes;
|
|
8
|
-
|
|
8
|
+
/** Per-type tab classes for an interaction state — exported so `PageHeader`'s nav strip matches without duplicating the maps. */
|
|
9
|
+
export declare const getTabStyles: ({ isFocusVisible, isSelected, isHovered }: Pick<AriaTabRenderProps, "isFocusVisible" | "isSelected" | "isHovered">) => {
|
|
10
|
+
'button-brand': string;
|
|
11
|
+
'button-gray': string;
|
|
12
|
+
'button-border': string;
|
|
13
|
+
'button-minimal': string;
|
|
14
|
+
underline: string;
|
|
15
|
+
line: string;
|
|
16
|
+
};
|
|
17
|
+
/** Per-size tab classes (`base` + one entry per type). See `getTabStyles`. */
|
|
18
|
+
export declare const tabSizes: {
|
|
9
19
|
sm: {
|
|
10
20
|
base: string;
|
|
11
21
|
'button-brand': string;
|
|
@@ -27,7 +37,7 @@ declare const sizes: {
|
|
|
27
37
|
};
|
|
28
38
|
export interface TabListComponentProps<T extends object, K extends Orientation> extends Omit<AriaTabListProps<T>, 'items'> {
|
|
29
39
|
/** The size of the tab list. */
|
|
30
|
-
size?: keyof typeof
|
|
40
|
+
size?: keyof typeof tabSizes;
|
|
31
41
|
/** The type of the tab list. */
|
|
32
42
|
type?: TabTypeColors<K>;
|
|
33
43
|
/** The orientation of the tab list. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,IAAI,YAAY,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC9I,OAAO,EAGL,QAAQ,IAAI,YAAY,EACxB,IAAI,IAAI,QAAQ,EAGjB,MAAM,uBAAuB,CAAC;AAG/B,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ import { createContext, useContext, isValidElement } from 'react';
|
|
|
6
6
|
import { Tab as Tab$1, useSlottedContext, TabsContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components';
|
|
7
7
|
import { isReactComponent } from '../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.js';
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
/** Per-type tab classes for an interaction state — exported so `PageHeader`'s nav strip matches without duplicating the maps. */
|
|
10
10
|
const getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
|
|
11
11
|
'button-brand': cx('outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'bg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
|
|
12
12
|
'button-gray': cx('outline-focus-ring *:data-icon:text-fg-quaternary', isHovered && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover', isFocusVisible && 'outline-2 -outline-offset-2', isSelected && 'bg-primary_hover text-secondary *:data-icon:text-fg-secondary_hover'),
|
|
@@ -15,7 +15,8 @@ const getTabStyles = ({ isFocusVisible, isSelected, isHovered }) => ({
|
|
|
15
15
|
underline: cx('rounded-none border-b-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
|
|
16
16
|
line: cx('rounded-none border-l-2 border-transparent outline-focus-ring *:data-icon:text-fg-quaternary', isFocusVisible && 'outline-2 -outline-offset-2', (isSelected || isHovered) && 'border-fg-brand-primary_alt text-brand-secondary *:data-icon:text-fg-brand-secondary_hover'),
|
|
17
17
|
});
|
|
18
|
-
|
|
18
|
+
/** Per-size tab classes (`base` + one entry per type). See `getTabStyles`. */
|
|
19
|
+
const tabSizes = {
|
|
19
20
|
sm: {
|
|
20
21
|
base: 'text-sm font-semibold gap-1 *:data-icon:size-4',
|
|
21
22
|
'button-brand': 'py-2 px-2.5',
|
|
@@ -35,7 +36,7 @@ const sizes = {
|
|
|
35
36
|
line: 'pr-3.5 pl-3 py-1',
|
|
36
37
|
},
|
|
37
38
|
};
|
|
38
|
-
|
|
39
|
+
/** Per-type classes for the horizontal `TabList` container. */
|
|
39
40
|
const getHorizontalStyles = ({ size, fullWidth }) => ({
|
|
40
41
|
'button-brand': 'gap-1',
|
|
41
42
|
'button-gray': 'gap-1',
|
|
@@ -80,7 +81,7 @@ const Tab = ({ label, children, badge, icon: Icon, className, 'data-testid': dat
|
|
|
80
81
|
? slugifyTestId(children)
|
|
81
82
|
: 'item';
|
|
82
83
|
const tabTestId = dataTestId ?? (prefix ? joinTestId(prefix, `tab-${idPart}`) : undefined);
|
|
83
|
-
return (jsx(Tab$1, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1',
|
|
84
|
+
return (jsx(Tab$1, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxs("span", { className: cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsx(Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx('hidden transition-inherit-all md:flex', size === 'sm' && '-my-px'), children: badge }))] })] })) }));
|
|
84
85
|
};
|
|
85
86
|
/**
|
|
86
87
|
* Organises related content into labelled panels, showing one at a time.
|
|
@@ -96,5 +97,5 @@ Tabs.Panel = TabPanel;
|
|
|
96
97
|
Tabs.List = TabList;
|
|
97
98
|
Tabs.Item = Tab;
|
|
98
99
|
|
|
99
|
-
export { Tab, TabList, TabPanel, Tabs };
|
|
100
|
+
export { Tab, TabList, TabPanel, Tabs, getTabStyles, tabSizes };
|
|
100
101
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTabList","AriaTabPanel","AriaTab","_jsxs","_Fragment","AriaTabs"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTabList","AriaTabPanel","AriaTab","_jsxs","_Fragment","AriaTabs"],"mappings":"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"}
|
|
@@ -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":"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"}
|
|
@@ -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
|