@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.
Files changed (64) hide show
  1. package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs +3 -3
  2. package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map +1 -1
  3. package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts +6 -1
  4. package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map +1 -1
  5. package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js +3 -3
  6. package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js.map +1 -1
  7. package/dist/components/molecules/Breadcrumbs/index.cjs +4 -2
  8. package/dist/components/molecules/Breadcrumbs/index.cjs.map +1 -1
  9. package/dist/components/molecules/Breadcrumbs/index.d.ts +7 -6
  10. package/dist/components/molecules/Breadcrumbs/index.d.ts.map +1 -1
  11. package/dist/components/molecules/Breadcrumbs/index.js +5 -3
  12. package/dist/components/molecules/Breadcrumbs/index.js.map +1 -1
  13. package/dist/components/molecules/EmptyState/index.cjs +2 -1
  14. package/dist/components/molecules/EmptyState/index.cjs.map +1 -1
  15. package/dist/components/molecules/EmptyState/index.d.ts.map +1 -1
  16. package/dist/components/molecules/EmptyState/index.js +3 -2
  17. package/dist/components/molecules/EmptyState/index.js.map +1 -1
  18. package/dist/components/molecules/Select/components/multi-select.cjs +2 -1
  19. package/dist/components/molecules/Select/components/multi-select.cjs.map +1 -1
  20. package/dist/components/molecules/Select/components/multi-select.d.ts.map +1 -1
  21. package/dist/components/molecules/Select/components/multi-select.js +3 -2
  22. package/dist/components/molecules/Select/components/multi-select.js.map +1 -1
  23. package/dist/components/molecules/Tabs/index.cjs +7 -4
  24. package/dist/components/molecules/Tabs/index.cjs.map +1 -1
  25. package/dist/components/molecules/Tabs/index.d.ts +12 -2
  26. package/dist/components/molecules/Tabs/index.d.ts.map +1 -1
  27. package/dist/components/molecules/Tabs/index.js +6 -5
  28. package/dist/components/molecules/Tabs/index.js.map +1 -1
  29. package/dist/components/organisms/CommandMenu/index.cjs +2 -9
  30. package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
  31. package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
  32. package/dist/components/organisms/CommandMenu/index.js +3 -10
  33. package/dist/components/organisms/CommandMenu/index.js.map +1 -1
  34. package/dist/components/organisms/PageHeader/components/page-header-tab-nav.cjs +25 -0
  35. package/dist/components/organisms/PageHeader/components/page-header-tab-nav.cjs.map +1 -0
  36. package/dist/components/organisms/PageHeader/components/page-header-tab-nav.d.ts +19 -0
  37. package/dist/components/organisms/PageHeader/components/page-header-tab-nav.d.ts.map +1 -0
  38. package/dist/components/organisms/PageHeader/components/page-header-tab-nav.js +23 -0
  39. package/dist/components/organisms/PageHeader/components/page-header-tab-nav.js.map +1 -0
  40. package/dist/components/organisms/PageHeader/index.cjs +38 -3
  41. package/dist/components/organisms/PageHeader/index.cjs.map +1 -1
  42. package/dist/components/organisms/PageHeader/index.d.ts +78 -3
  43. package/dist/components/organisms/PageHeader/index.d.ts.map +1 -1
  44. package/dist/components/organisms/PageHeader/index.js +40 -1
  45. package/dist/components/organisms/PageHeader/index.js.map +1 -1
  46. package/dist/components/templates/PageLayout/index.cjs +8 -10
  47. package/dist/components/templates/PageLayout/index.cjs.map +1 -1
  48. package/dist/components/templates/PageLayout/index.d.ts +7 -5
  49. package/dist/components/templates/PageLayout/index.d.ts.map +1 -1
  50. package/dist/components/templates/PageLayout/index.js +8 -10
  51. package/dist/components/templates/PageLayout/index.js.map +1 -1
  52. package/dist/utilities/__internal__/childrenUtils/children.utils.cjs +22 -0
  53. package/dist/utilities/__internal__/childrenUtils/children.utils.cjs.map +1 -0
  54. package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts +12 -0
  55. package/dist/utilities/__internal__/childrenUtils/children.utils.d.ts.map +1 -0
  56. package/dist/utilities/__internal__/childrenUtils/children.utils.js +20 -0
  57. package/dist/utilities/__internal__/childrenUtils/children.utils.js.map +1 -0
  58. package/package.json +1 -1
  59. package/dist/components/organisms/PageHeader/components/page-header-simple.cjs +0 -16
  60. package/dist/components/organisms/PageHeader/components/page-header-simple.cjs.map +0 -1
  61. package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts +0 -26
  62. package/dist/components/organisms/PageHeader/components/page-header-simple.d.ts.map +0 -1
  63. package/dist/components/organisms/PageHeader/components/page-header-simple.js +0 -14
  64. package/dist/components/organisms/PageHeader/components/page-header-simple.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/PageHeader/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC"}
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
- export { PageHeaderSimple } from './components/page-header-simple.js';
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
- * English defaults, overridable via `renderError` (the consumer owns localisation).
10
- * TODO(i18n): once ui-library has its own translation layer, source these strings
11
- * from it instead of hardcoding English (keep `renderError` as a consumer override).
12
- */
13
- const DefaultPageError = ({ testId }) => (jsxRuntime.jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full max-w-container flex-col items-center gap-2 px-md py-2xl text-center lg:px-2xl", 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." })] }));
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 items-center gap-xl py-2xl lg:gap-2xl lg:pb-3xl', 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 })] }));
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;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,eAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CAC3IC,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;;;;;;;;;;;;;AAaG;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,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAClI,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;;;;"}
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 `<PageHeaderSimple>` (or a feature wrapper around it)
11
- * here. Rendered OUTSIDE the error boundary so page chrome (breadcrumbs, back link)
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: the centered `<main>`
34
- * scroll container, an optional header region, and a page-scoped error boundary keyed
35
- * by `pageName`. Consumers drop their page content in as children.
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;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,6FAQxB,eAAe,KAAG,SAgBpB,CAAC"}
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
- * English defaults, overridable via `renderError` (the consumer owns localisation).
8
- * TODO(i18n): once ui-library has its own translation layer, source these strings
9
- * from it instead of hardcoding English (keep `renderError` as a consumer override).
10
- */
11
- const DefaultPageError = ({ testId }) => (jsxs("div", { role: "alert", "data-testid": testId, className: "flex w-full max-w-container flex-col items-center gap-2 px-md py-2xl text-center lg:px-2xl", 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." })] }));
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 items-center gap-xl py-2xl lg:gap-2xl lg:pb-3xl', className), children: [header, jsx(ErrorBoundary, { identifier: pageName, onError: onError, renderFallback: (error) => renderError?.({ error, pageName }) ?? jsx(DefaultPageError, { testId: joinTestId(pageLayoutTestId, 'error') }), children: children })] }));
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;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAuB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,OAAO,iBAAc,MAAM,EAAE,SAAS,EAAC,4FAA4F,EAAA,QAAA,EAAA,CAC3IC,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;;;;;;;;;;;;;AAaG;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,sEAAsE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAClI,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;;;;"}
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;;;;"}
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ /**
6
+ * `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
7
+ * and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
8
+ * Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
9
+ *
10
+ * Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
11
+ * siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
12
+ * child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
13
+ */
14
+ const flattenChildren = (children, keyPath = []) => React.Children.toArray(children).flatMap((child) => {
15
+ if (React.isValidElement(child) && child.type === React.Fragment) {
16
+ return flattenChildren(child.props.children, [...keyPath, String(child.key ?? '')]);
17
+ }
18
+ return keyPath.length && React.isValidElement(child) ? React.cloneElement(child, { key: JSON.stringify([...keyPath, String(child.key ?? '')]) }) : child;
19
+ });
20
+
21
+ exports.flattenChildren = flattenChildren;
22
+ //# sourceMappingURL=children.utils.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"children.utils.cjs","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"sourcesContent":[null],"names":["Children","isValidElement","Fragment","cloneElement"],"mappings":";;;;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAE,OAAA,GAA6B,EAAE,KAClFA,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IAC3C,IAAIC,oBAAc,CAA2B,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAKC,cAAQ,EAAE;QAC9E,OAAO,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF;AACA,IAAA,OAAO,OAAO,CAAC,MAAM,IAAID,oBAAc,CAAC,KAAK,CAAC,GAAGE,kBAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK;AAC9I,CAAC;;;;"}
@@ -0,0 +1,12 @@
1
+ import { type ReactNode } from 'react';
2
+ /**
3
+ * `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
4
+ * and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
5
+ * Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
6
+ *
7
+ * Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
8
+ * siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
9
+ * child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
10
+ */
11
+ export declare const flattenChildren: (children: ReactNode, keyPath?: readonly string[]) => ReactNode[];
12
+ //# sourceMappingURL=children.utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"children.utils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,UAAU,SAAS,EAAE,UAAS,SAAS,MAAM,EAAO,KAAG,SAAS,EAM5F,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { Children, isValidElement, Fragment, cloneElement } from 'react';
2
+
3
+ /**
4
+ * `Children.toArray` that also unwraps Fragments, so `<>...</>`-wrapped children are counted
5
+ * and inspected as their actual items. Pure JS, no DOM dependency — works on web and React
6
+ * Native. INTERNAL: import as `#internal/utilities/childrenUtils/children.utils`.
7
+ *
8
+ * Unwrapped items are re-keyed with the JSON-encoded path of Fragment keys above them, so
9
+ * siblings stay unique after flattening. Plain concatenation is ambiguous: Fragment `a` +
10
+ * child `b` and a sibling keyed `a.$b` would both produce `.$a.$b`.
11
+ */
12
+ const flattenChildren = (children, keyPath = []) => Children.toArray(children).flatMap((child) => {
13
+ if (isValidElement(child) && child.type === Fragment) {
14
+ return flattenChildren(child.props.children, [...keyPath, String(child.key ?? '')]);
15
+ }
16
+ return keyPath.length && isValidElement(child) ? cloneElement(child, { key: JSON.stringify([...keyPath, String(child.key ?? '')]) }) : child;
17
+ });
18
+
19
+ export { flattenChildren };
20
+ //# sourceMappingURL=children.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"children.utils.js","sources":["../../../../src/utilities/__internal__/childrenUtils/children.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAE,OAAA,GAA6B,EAAE,KAClF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IAC3C,IAAI,cAAc,CAA2B,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC9E,OAAO,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF;AACA,IAAA,OAAO,OAAO,CAAC,MAAM,IAAI,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK;AAC9I,CAAC;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/ui-library",
3
- "version": "0.23.0",
3
+ "version": "0.24.0",
4
4
  "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
5
5
  "type": "module",
6
6
  "imports": {
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
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 Input = require('@flipdish/ui-library/components/atoms/Input');
7
- var cx = require('@flipdish/ui-library/utilities/cx');
8
- var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
9
-
10
- const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, 'data-testid': dataTestId, }) => {
11
- const pageHeaderTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'page-header-simple', rootName: 'page-header-simple' });
12
- return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: pageHeaderTestId, children: jsxRuntime.jsxs("div", { "data-testid": pageHeaderTestId, className: cx.cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsxRuntime.jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsxRuntime.jsx("div", { className: "flex lg:hidden", children: jsxRuntime.jsx(Button.Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: uiIcons.ArrowLeft, children: backLabel }) })), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsxRuntime.jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input.Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'search-mobile') }), jsxRuntime.jsx(Input.Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: uiIcons.SearchLg, "data-testid": testIdUtils.joinTestId(pageHeaderTestId, 'search-desktop') })] }))] })] }) }));
13
- };
14
-
15
- exports.PageHeaderSimple = PageHeaderSimple;
16
- //# sourceMappingURL=page-header-simple.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"page-header-simple.cjs","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","_jsxs","cx","Button","ArrowLeft","_Fragment","Input","SearchLg","joinTestId"],"mappings":";;;;;;;;;AA+BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH,KAAI;AAC1B,IAAA,MAAM,gBAAgB,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;AAEjI,IAAA,QACEC,cAAA,CAACC,0BAAc,IAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAEC,KAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3I,WAAW,IAAIH,wBAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC7BA,cAAA,CAACI,aAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAEC,iBAAS,EAAA,QAAA,EACvE,SAAS,EAAA,CACH,EAAA,CACL,CACP,EAEDH,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,EAAA,QAAA,EAAA,CACpGD,yBAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,IAAIF,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,sBAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,GAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,EAAA,CAAO,EAElE,UAAU,KACTE,eAAA,CAAAI,mBAAA,EAAA,EAAA,QAAA,EAAA,CAEEN,eAACO,WAAK,EAAA,EACJ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAEC,gBAAQ,EAAA,aAAA,EACDC,sBAAU,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAA,CAC1D,EAGFT,eAACO,WAAK,EAAA,EACJ,QAAQ,EAAA,IAAA,EACR,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,gBACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAEC,gBAAQ,EAAA,aAAA,EACDC,sBAAU,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC3D,CAAA,EAAA,CACD,CACJ,IACG,CAAA,EAAA,CACF,EAAA,CACS;AAErB;;;;"}
@@ -1,26 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- export interface PageHeaderSimpleProps {
3
- /** Page title (rendered as the `h1`). */
4
- title?: string;
5
- /** Supporting text shown beneath the title. */
6
- description?: string;
7
- /**
8
- * Breadcrumb trail shown on desktop — pass a complete `<Breadcrumbs>` element so the
9
- * caller owns the items, divider and `type`. Hidden below the `lg` breakpoint.
10
- */
11
- breadcrumbs?: ReactNode;
12
- /** Mobile "back" link label. When set, a back link replaces the breadcrumbs below `lg`. */
13
- backLabel?: string;
14
- backHref?: string;
15
- /** Action buttons rendered to the right of the title on desktop. */
16
- actions?: ReactNode;
17
- /** Render the search inputs (mobile + desktop). */
18
- showSearch?: boolean;
19
- /** Render the divider beneath the title row. */
20
- withDivider?: boolean;
21
- className?: string;
22
- /** Overrides the `data-testid` (defaults to `fd-page-header-simple`). */
23
- 'data-testid'?: string;
24
- }
25
- export declare const PageHeaderSimple: ({ title, description, breadcrumbs, backLabel, backHref, actions, showSearch, withDivider, className, "data-testid": dataTestId, }: PageHeaderSimpleProps) => import("react").JSX.Element;
26
- //# sourceMappingURL=page-header-simple.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"page-header-simple.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,GAAI,mIAW9B,qBAAqB,gCAoDvB,CAAC"}
@@ -1,14 +0,0 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { ArrowLeft, SearchLg } from '@flipdish/ui-icons';
3
- import { Button } from '@flipdish/ui-library/components/atoms/Button';
4
- import { Input } from '@flipdish/ui-library/components/atoms/Input';
5
- import { cx } from '@flipdish/ui-library/utilities/cx';
6
- import { useResolvedTestId, TestIdProvider, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
7
-
8
- const PageHeaderSimple = ({ title, description, breadcrumbs, backLabel, backHref = '#', actions, showSearch = false, withDivider = false, className, 'data-testid': dataTestId, }) => {
9
- const pageHeaderTestId = useResolvedTestId({ testId: dataTestId, segment: 'page-header-simple', rootName: 'page-header-simple' });
10
- return (jsx(TestIdProvider, { value: pageHeaderTestId, children: jsxs("div", { "data-testid": pageHeaderTestId, className: cx('relative flex w-full max-w-container flex-col gap-4 bg-primary px-md lg:px-2xl', className), children: [breadcrumbs && jsx("div", { className: "max-lg:hidden", children: breadcrumbs }), backLabel && (jsx("div", { className: "flex lg:hidden", children: jsx(Button, { href: backHref, color: "link-gray", size: "xs", iconLeading: ArrowLeft, children: backLabel }) })), jsxs("div", { className: cx('flex flex-col gap-4 lg:flex-row', withDivider && 'border-b border-secondary pb-4'), children: [jsxs("div", { className: "flex flex-1 flex-col gap-0.5", children: [title && jsx("h1", { className: "text-xl font-semibold text-primary", children: title }), description && jsx("p", { className: "text-md text-tertiary", children: description })] }), actions && jsx("div", { className: "flex items-start gap-3", children: actions }), showSearch && (jsxs(Fragment, { children: [jsx(Input, { className: "w-full md:hidden", size: "md", "aria-label": "Search", placeholder: "Search", icon: SearchLg, "data-testid": joinTestId(pageHeaderTestId, 'search-mobile') }), jsx(Input, { shortcut: true, className: "w-full max-w-70 max-md:hidden", size: "sm", "aria-label": "Search", placeholder: "Search", icon: SearchLg, "data-testid": joinTestId(pageHeaderTestId, 'search-desktop') })] }))] })] }) }));
11
- };
12
-
13
- export { PageHeaderSimple };
14
- //# sourceMappingURL=page-header-simple.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"page-header-simple.js","sources":["../../../../../src/components/organisms/PageHeader/components/page-header-simple.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AA+BO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH,KAAI;AAC1B,IAAA,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC;AAEjI,IAAA,QACEA,GAAA,CAAC,cAAc,IAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACrCC,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,gFAAgF,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3I,WAAW,IAAID,aAAK,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,GAAO,EAEjE,SAAS,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC7BA,GAAA,CAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,SAAS,EAAA,QAAA,EACvE,SAAS,EAAA,CACH,EAAA,CACL,CACP,EAEDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,WAAW,IAAI,gCAAgC,CAAC,EAAA,QAAA,EAAA,CACpGA,cAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC1C,KAAK,IAAID,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EACxE,WAAW,IAAIA,WAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,WAAW,GAAK,CAAA,EAAA,CAClE,EAEL,OAAO,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,EAAA,CAAO,EAElE,UAAU,KACTC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEEF,IAAC,KAAK,EAAA,EACJ,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,IAAI,EAAA,YAAA,EACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,QAAQ,EAAA,aAAA,EACD,UAAU,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAA,CAC1D,EAGFA,IAAC,KAAK,EAAA,EACJ,QAAQ,EAAA,IAAA,EACR,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,IAAI,gBACE,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,QAAQ,EAAA,aAAA,EACD,UAAU,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC3D,CAAA,EAAA,CACD,CACJ,IACG,CAAA,EAAA,CACF,EAAA,CACS;AAErB;;;;"}