@flipdish/ui-library 0.28.0 → 0.29.0

package/dist/components/templates/AppShell/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+
+/**
+ * Layout-only template for an app shell: navigation beside a content column that stacks the
+ * header above the page, with an optional side panel that pushes the page instead of covering it.
+ * The shell is exactly the height of the window and the document never scrolls: the page content
+ * scrolls in its own area under the header, so the header, navigation and side panel stay in place
+ * with no sticky positioning. It holds no state and renders whatever is passed to its slots, so the
+ * app keeps ownership of navigation, search and panel state.
+ *
+ * @summary window-height layout template placing navigation, header, a scrolling page area and a side panel
+ */
+const AppShell = ({ sidebar, header, panel, children, scrollAreaProps, className, 'data-testid': dataTestId }) => {
+    const appShellTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'app-shell', rootName: 'app-shell' });
+    return (
+    // A column below `lg`, so a navigation that renders its own mobile top bar stacks above the content.
+    jsxRuntime.jsxs("div", { "data-testid": appShellTestId, className: cx.cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: [sidebar, jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1", children: [jsxRuntime.jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaProps?.ref, "data-testid": scrollAreaProps?.['data-testid'] ?? testIdUtils.joinTestId(appShellTestId, 'scroll-area'), 
+                                // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
+                                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                                tabIndex: 0, className: "flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), panel] })] })] }));
+};
+
+exports.AppShell = AppShell;
+//# sourceMappingURL=index.cjs.map

package/dist/components/templates/AppShell/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsxs","cx","_jsx","joinTestId"],"mappings":";;;;;;AAmCA;;;;;;;;;AASG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAE7G;;IAEEC,eAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAEC,KAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC5H,OAAO,EAGRD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,aAClD,MAAM,EAEPA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,aAClCE,cAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,eAAe,EAAE,GAAG,iBACZ,eAAe,GAAG,aAAa,CAAC,IAAIC,sBAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,gCAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,yHAAyH,EAAA,QAAA,EAElI,QAAQ,EAAA,CACL,EAEL,KAAK,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/components/templates/AppShell/index.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, Ref } from 'react';
+export interface AppShellScrollAreaProps {
+    /** `id` for the scrolling element, e.g. for a scroll-to-top helper that looks it up. */
+    id?: string;
+    /** Ref to the scrolling element, e.g. to reset `scrollTop` on navigation or attach a scroll listener. */
+    ref?: Ref<HTMLDivElement>;
+    /** Overrides the scrolling element's `data-testid` (defaults to `<root>--scroll-area`). */
+    'data-testid'?: string;
+}
+export interface AppShellProps {
+    /** Primary navigation, rendered first beside the content column. Compose `<SidebarNavigation>` here. */
+    sidebar?: ReactNode;
+    /** Top bar, rendered at the top of the content column. It stays in place while the page area scrolls. Compose `<ApplicationHeader>` here. */
+    header?: ReactNode;
+    /**
+     * Side panel rendered under the header, beside the page area, which narrows to make room. It fills
+     * the height under the header and stays in view while the page area scrolls.
+     */
+    panel?: ReactNode;
+    /** Page content, normally a `<PageLayout>`. Rendered inside the shell's scroll area. */
+    children: ReactNode;
+    /** Hooks for the element that scrolls the page content, since the document itself does not scroll. */
+    scrollAreaProps?: AppShellScrollAreaProps;
+    /** Extra classes merged onto the root element. */
+    className?: string;
+    /** Overrides the `data-testid` (defaults to `fd-app-shell`). */
+    'data-testid'?: string;
+}
+/**
+ * Layout-only template for an app shell: navigation beside a content column that stacks the
+ * header above the page, with an optional side panel that pushes the page instead of covering it.
+ * The shell is exactly the height of the window and the document never scrolls: the page content
+ * scrolls in its own area under the header, so the header, navigation and side panel stay in place
+ * with no sticky positioning. It holds no state and renders whatever is passed to its slots, so the
+ * app keeps ownership of navigation, search and panel state.
+ *
+ * @summary window-height layout template placing navigation, header, a scrolling page area and a side panel
+ */
+export declare const AppShell: ({ sidebar, header, panel, children, scrollAreaProps, className, "data-testid": dataTestId }: AppShellProps) => ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/templates/AppShell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/AppShell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,uBAAuB;IACtC,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yGAAyG;IACzG,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wGAAwG;IACxG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6IAA6I;IAC7I,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,sGAAsG;IACtG,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,6FAA6F,aAAa,KAAG,SA8BrI,CAAC"}

package/dist/components/templates/AppShell/index.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+
+/**
+ * Layout-only template for an app shell: navigation beside a content column that stacks the
+ * header above the page, with an optional side panel that pushes the page instead of covering it.
+ * The shell is exactly the height of the window and the document never scrolls: the page content
+ * scrolls in its own area under the header, so the header, navigation and side panel stay in place
+ * with no sticky positioning. It holds no state and renders whatever is passed to its slots, so the
+ * app keeps ownership of navigation, search and panel state.
+ *
+ * @summary window-height layout template placing navigation, header, a scrolling page area and a side panel
+ */
+const AppShell = ({ sidebar, header, panel, children, scrollAreaProps, className, 'data-testid': dataTestId }) => {
+    const appShellTestId = useResolvedTestId({ testId: dataTestId, segment: 'app-shell', rootName: 'app-shell' });
+    return (
+    // A column below `lg`, so a navigation that renders its own mobile top bar stacks above the content.
+    jsxs("div", { "data-testid": appShellTestId, className: cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: [sidebar, jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxs("div", { className: "flex min-h-0 flex-1", children: [jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaProps?.ref, "data-testid": scrollAreaProps?.['data-testid'] ?? joinTestId(appShellTestId, 'scroll-area'), 
+                                // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
+                                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                                tabIndex: 0, className: "flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), panel] })] })] }));
+};
+
+export { AppShell };
+//# sourceMappingURL=index.js.map

package/dist/components/templates/AppShell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAmCA;;;;;;;;;AASG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAE7G;;IAEEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC5H,OAAO,EAGRA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,aAClD,MAAM,EAEPA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,aAClCC,GAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,eAAe,EAAE,GAAG,iBACZ,eAAe,GAAG,aAAa,CAAC,IAAI,UAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,gCAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,yHAAyH,EAAA,QAAA,EAElI,QAAQ,EAAA,CACL,EAEL,KAAK,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/native/components/templates/AppShell/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `AppShell` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/components/templates/AppShell` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `AppShell` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {