npm - @7shifts/sous-chef - Versions diffs - 4.5.0 → 4.6.0-beta.0 - Mend

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { DataProps } from '../../foundation/types';
+type SideNavState = 'expanded' | 'collapsed';
+type SideNavProps = {
+    isExpanded?: boolean;
+    onToggleExpand?: (state: SideNavState) => void;
+};
+type Props = {
+    /** Side navigation, typically a `PrimaryNav`. LayoutFrame manages its expanded state. */
+    sideNav?: React.ReactElement<SideNavProps>;
+    /** Top navigation bar, typically a `TopBar`. */
+    topBar?: React.ReactNode;
+    /** Main page content. Scrolls independently of the nav and top bar. */
+    children: React.ReactNode;
+    /** Whether the side nav starts expanded. Defaults to `true`. */
+    defaultSideNavExpanded?: boolean;
+    /** Called when the side nav is toggled. */
+    onSideNavToggle?: (state: SideNavState) => void;
+    testId?: string;
+} & DataProps;
+/**
+ * Top-level application skeleton with three slots: a side navigation, a top
+ * navigation bar, and the main content area. The side nav and top bar fill the
+ * viewport edges while the content scrolls independently. LayoutFrame owns the
+ * side nav's expanded/collapsed state and wires it into the `sideNav` slot,
+ * unless that slot is already controlled by the consumer.
+ */
+declare const LayoutFrame: ({ sideNav, topBar, children, defaultSideNavExpanded, onSideNavToggle, testId, ...rest }: Props) => React.JSX.Element;
+export default LayoutFrame;

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { DataProps } from '../../foundation/types';
+type Props = {
+    /** The icon (or any content) rendered inside the button. */
+    children: React.ReactNode;
+    /** Text shown in the tooltip when hovering the button. */
+    tooltipContent: string;
+    onClick: () => void;
+    /** Any node rendered in the top-right corner of the button, e.g. a `<Badge>`. */
+    badge?: React.ReactNode;
+    testId?: string;
+} & DataProps;
+/**
+ * An icon button used inside the `TopBar`. Wraps its content in a tooltip and
+ * supports an optional badge positioned in the top-right corner.
+ */
+declare const NavButton: ({ children, tooltipContent, onClick, badge, testId, ...rest }: Props) => React.JSX.Element;
+export default NavButton;

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { DataProps } from '../../foundation/types';
+type Props = {
+    /** Content for the left region. Defaults to the 7shifts logo when omitted. */
+    logo?: React.ReactNode;
+    /** Content for the center region, e.g. a banner. */
+    center?: React.ReactNode;
+    /** A search bar rendered in the right region, before the actions. */
+    search?: React.ReactNode;
+    /** Buttons rendered in the right region, typically `NavButton`s. */
+    actions?: React.ReactNode;
+    /** The account menu rendered at the far right, e.g. a `Dropdown` with an `Avatar`. */
+    accountMenu?: React.ReactNode;
+    testId?: string;
+} & DataProps;
+/**
+ * Top navigation bar with three regions: a left region for the logo, a center
+ * region for banners, and a right region for a search bar, action buttons and
+ * an account menu. Every region is an optional slot, making the bar flexible.
+ */
+declare const TopBar: ({ logo, center, search, actions, accountMenu, testId, ...rest }: Props) => React.JSX.Element;
+export default TopBar;

@@ -4,6 +4,9 @@ import Inline from './Inline';
 import Stack from './Stack';
 import Page from './Page';
 import PageLayout from './PageLayout';
-export { CalloutCard, Card, Inline, Stack, Page, PageLayout };
+import TopBar from './TopBar';
+import NavButton from './NavButton';
+import LayoutFrame from './LayoutFrame';
+export { CalloutCard, Card, Inline, Stack, Page, PageLayout, TopBar, NavButton, LayoutFrame };
 export type { AlignItems, FlexWrap, JustifyContent } from './Flex/types';
 export type { PageLayoutMenu } from './PageLayout/types';

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    contentRef: React.RefObject<HTMLDivElement>;
+};
+declare const PrimaryNavFooter: ({ children, contentRef }: Props) => React.JSX.Element;
+export default PrimaryNavFooter;

	@@ -0,0 +1 @@
1	+ export { default } from './PrimaryNavFooter';

@@ -0,0 +1,10 @@
+import React from 'react';
+type SubmenuFocusContextType = {
+    isSubmenuFocused: boolean;
+    setSubmenuFocused: (focused: boolean) => void;
+};
+export declare const SubmenuFocusProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useSubmenuFocus: () => SubmenuFocusContextType;
+export {};

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.5.0",
+    "version": "4.6.0-beta.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",

@7shifts/sous-chef 4.5.0 → 4.6.0-beta.0