@zendeskgarden/react-chrome 9.0.0-next.1 → 9.0.0-next.11

package/dist/typings/elements/body/Body.d.ts

@@ -5,8 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IBodyProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Body: React.ForwardRefExoticComponent<IBodyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/footer/Footer.d.ts

@@ -5,7 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
+import { FooterItem } from './FooterItem';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const FooterComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
+export declare const Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>> & {
+    Item: typeof FooterItem;
+};

package/dist/typings/elements/footer/FooterItem.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Footer.Item` instead
+ *
  * @extends HTMLAttributes<HTMLElement>
  */
 export declare const FooterItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/header/Header.d.ts

@@ -6,7 +6,17 @@
  */
 import React from 'react';
 import { IHeaderProps } from '../../types';
+import { HeaderItem } from './HeaderItem';
+import { HeaderItemIcon } from './HeaderItemIcon';
+import { HeaderItemText } from './HeaderItemText';
+import { HeaderItemWrapper } from './HeaderItemWrapper';
+export declare const HeaderComponent: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLElement>>;
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const Header: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLElement>>;
+export declare const Header: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLElement>> & {
+    Item: typeof HeaderItem;
+    ItemIcon: typeof HeaderItemIcon;
+    ItemText: typeof HeaderItemText;
+    ItemWrapper: typeof HeaderItemWrapper;
+};

package/dist/typings/elements/header/HeaderItem.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderItemProps } from '../../types';
 /**
+ * @deprecated use `Header.Item` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const HeaderItem: React.ForwardRefExoticComponent<IHeaderItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/header/HeaderItemIcon.d.ts

@@ -4,8 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { PropsWithChildren, SVGAttributes } from 'react';
 /**
- * @extends HTMLAttributes<HTMLElement>
+ * @deprecated use `Header.ItemIcon` instead
+ *
+ * @extends SVGAttributes<SVGElement>
  */
-export declare const HeaderItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element | null;
+export declare const HeaderItemIcon: ({ children, ...props }: PropsWithChildren<SVGAttributes<SVGElement>>) => React.JSX.Element | null;

package/dist/typings/elements/header/HeaderItemText.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderItemTextProps } from '../../types';
 /**
+ * @deprecated use `Header.ItemText` instead
+ *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
 export declare const HeaderItemText: React.ForwardRefExoticComponent<IHeaderItemTextProps & React.RefAttributes<HTMLElement>>;

package/dist/typings/elements/header/HeaderItemWrapper.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderItemWrapperProps } from '../../types';
 /**
+ * @deprecated use `Header.ItemWrapper` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const HeaderItemWrapper: React.ForwardRefExoticComponent<IHeaderItemWrapperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/nav/Nav.d.ts

@@ -6,7 +6,17 @@
  */
 import React from 'react';
 import { INavProps } from '../../types';
+import { NavItem } from './NavItem';
+import { NavItemIcon } from './NavItemIcon';
+import { NavItemText } from './NavItemText';
+import { NavList } from './NavList';
+export declare const NavComponent: React.ForwardRefExoticComponent<INavProps & React.RefAttributes<HTMLElement>>;
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const Nav: React.ForwardRefExoticComponent<INavProps & React.RefAttributes<HTMLElement>>;
+export declare const Nav: React.ForwardRefExoticComponent<INavProps & React.RefAttributes<HTMLElement>> & {
+    List: typeof NavList;
+    Item: typeof NavItem;
+    ItemIcon: typeof NavItemIcon;
+    ItemText: typeof NavItemText;
+};

package/dist/typings/elements/nav/NavItem.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { INavItemProps } from '../../types';
 /**
+ * @deprecated use `Nav.Item` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const NavItem: React.ForwardRefExoticComponent<INavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/nav/NavItemIcon.d.ts

@@ -4,8 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { SVGAttributes, PropsWithChildren } from 'react';
 /**
- * @extends HTMLAttributes<HTMLElement>
+ * @deprecated use `Nav.ItemIcon` instead
+ *
+ * @extends SVGAttributes<SVGElement>
  */
-export declare const NavItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element | null;
+export declare const NavItemIcon: ({ children, ...props }: PropsWithChildren<SVGAttributes<SVGElement>>) => React.JSX.Element | null;

package/dist/typings/elements/nav/NavItemText.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { INavItemTextProps } from '../../types';
 /**
+ * @deprecated use `Nav.ItemText` instead
+ *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
 export declare const NavItemText: React.ForwardRefExoticComponent<INavItemTextProps & React.RefAttributes<HTMLElement>>;

package/dist/typings/elements/{body/Sidebar.d.ts → nav/NavList.d.ts}

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 /**
- * @extends HTMLAttributes<HTMLElement>
+ * @extends HTMLAttributes<HTMLUListElement>
  */
-export declare const Sidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const NavList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;

package/dist/typings/index.d.ts

@@ -4,28 +4,21 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { Chrome } from './elements/Chrome';
-export { SkipNav } from './elements/SkipNav';
-export { Body } from './elements/body/Body';
-export { Content } from './elements/body/Content';
-export { Main } from './elements/body/Main';
-export { Sidebar } from './elements/body/Sidebar';
-export { Header } from './elements/header/Header';
 export { HeaderItem } from './elements/header/HeaderItem';
 export { HeaderItemIcon } from './elements/header/HeaderItemIcon';
 export { HeaderItemText } from './elements/header/HeaderItemText';
 export { HeaderItemWrapper } from './elements/header/HeaderItemWrapper';
-export { Footer } from './elements/footer/Footer';
 export { FooterItem } from './elements/footer/FooterItem';
-export { Nav } from './elements/nav/Nav';
 export { NavItem } from './elements/nav/NavItem';
 export { NavItemIcon } from './elements/nav/NavItemIcon';
 export { NavItemText } from './elements/nav/NavItemText';
-export { SubNav } from './elements/subnav/SubNav';
-export { SubNavItem } from './elements/subnav/SubNavItem';
-export { SubNavItemText } from './elements/subnav/SubNavItemText';
-export { CollapsibleSubNavItem } from './elements/subnav/CollapsibleSubNavItem';
+export { Chrome } from './elements/Chrome';
+export { SkipNav } from './elements/SkipNav';
+export { Body } from './elements/body/Body';
+export { Content } from './elements/body/Content';
+export { Main } from './elements/body/Main';
+export { Header } from './elements/header/Header';
+export { Footer } from './elements/footer/Footer';
+export { Nav } from './elements/nav/Nav';
 export { Sheet } from './elements/sheet/Sheet';
-export { PRODUCT as PRODUCTS, type IChromeProps, type ISkipNavProps, type IBodyProps, type IHeaderProps, type IHeaderItemProps, type IHeaderItemTextProps, type IHeaderItemWrapperProps, type INavProps, type INavItemProps, type INavItemTextProps, type ISubNavItemProps, type ICollapsibleSubNavItemProps, type ISheetProps, type ISheetFooterProps, 
-/** @deprecated can be accessed via IHeaderItemProps['product'] */
-type Product as PRODUCT } from './types';
+export { PRODUCTS, type IChromeProps, type ISkipNavProps, type IHeaderProps, type IHeaderItemProps, type IHeaderItemTextProps, type IHeaderItemWrapperProps, type INavProps, type INavItemProps, type INavItemTextProps, type ISheetProps, type ISheetFooterProps } from './types';

package/dist/typings/styled/index.d.ts

@@ -10,7 +10,6 @@ export { StyledSkipNavIcon } from './StyledSkipNavIcon';
 export { StyledBody } from './body/StyledBody';
 export { StyledContent } from './body/StyledContent';
 export { StyledMain } from './body/StyledMain';
-export { StyledSidebar } from './body/StyledSidebar';
 export { StyledFooter } from './footer/StyledFooter';
 export { StyledFooterItem } from './footer/StyledFooterItem';
 export { StyledHeader } from './header/StyledHeader';
@@ -21,18 +20,14 @@ export { StyledLogoHeaderItem } from './header/StyledLogoHeaderItem';
 export { StyledHeaderItemText } from './header/StyledHeaderItemText';
 export { StyledHeaderItemWrapper } from './header/StyledHeaderItemWrapper';
 export { StyledNav } from './nav/StyledNav';
+export { StyledNavList } from './nav/StyledNavList';
+export { StyledNavListItem } from './nav/StyledNavListItem';
 export { StyledBaseNavItem } from './nav/StyledBaseNavItem';
 export { StyledLogoNavItem } from './nav/StyledLogoNavItem';
 export { StyledBrandmarkNavItem } from './nav/StyledBrandmarkNavItem';
-export { StyledNavItem } from './nav/StyledNavItem';
+export { StyledNavButton } from './nav/StyledNavButton';
 export { StyledNavItemIcon } from './nav/StyledNavItemIcon';
 export { StyledNavItemText } from './nav/StyledNavItemText';
-export { StyledSubNav } from './subnav/StyledSubNav';
-export { StyledSubNavItem } from './subnav/StyledSubNavItem';
-export { StyledSubNavItemText } from './subnav/StyledSubNavItemText';
-export { StyledSubNavItemHeader } from './subnav/StyledSubNavItemHeader';
-export { StyledSubNavItemIconWrapper, StyledSubNavItemIcon } from './subnav/StyledSubNavItemIcon';
-export { StyledSubNavPanel } from './subnav/StyledSubNavPanel';
 export { StyledSheet } from './sheet/StyledSheet';
 export { StyledSheetWrapper } from './sheet/StyledSheetWrapper';
 export { StyledSheetTitle } from './sheet/StyledSheetTitle';

package/dist/typings/styled/nav/StyledBaseNavItem.d.ts

@@ -6,11 +6,7 @@
  */
 import { ThemeProps, DefaultTheme } from 'styled-components';
 export declare const getNavItemHeight: (props: ThemeProps<DefaultTheme>) => string;
-/**
- * 1. Button reset.
- * 2. Anchor reset.
- */
-export declare const StyledBaseNavItem: import("styled-components").StyledComponent<"button", DefaultTheme, {
+export declare const StyledBaseNavItem: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/nav/StyledBrandmarkNavItem.d.ts

@@ -4,11 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/**
+ * 1. Overrides flex default `min-height: auto`
+ */
 export declare const StyledBrandmarkNavItem: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & {
-    'data-garden-id': string;
-    'data-garden-version': string;
-    as: string;
-}, "as" | "data-garden-id" | "data-garden-version">;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/nav/StyledLogoNavItem.d.ts

@@ -11,11 +11,10 @@ export interface IStyledLogoNavItemProps extends ThemeProps<DefaultTheme> {
     isDark?: boolean;
     isLight?: boolean;
 }
+/**
+ * 1. Overrides flex default `min-height: auto`
+ */
 export declare const StyledLogoNavItem: import("styled-components").StyledComponent<"button", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & {
-    'data-garden-id': string;
-    'data-garden-version': string;
-    as: string;
-} & IStyledLogoNavItemProps, "as" | "data-garden-id" | "data-garden-version">;
+} & IStyledLogoNavItemProps, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/nav/{StyledNavItem.d.ts → StyledNavButton.d.ts}

@@ -17,8 +17,10 @@ interface IStyledNavItemProps extends ThemeProps<DefaultTheme> {
  * 2. Button reset
  * 3. Override `focusStyles` outline (in `colorStyles`)
  * 4. Use of negative offset to create an inset outline
+ * 5. Overrides flex default `min-width: auto`
+ *    https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
  */
-export declare const StyledNavItem: import("styled-components").StyledComponent<"button", DefaultTheme, {
+export declare const StyledNavButton: import("styled-components").StyledComponent<"button", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
     as: string;

package/dist/typings/styled/{body/StyledSidebar.d.ts → nav/StyledNavList.d.ts}

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledSidebar: import("styled-components").StyledComponent<"aside", import("styled-components").DefaultTheme, {
+export declare const StyledNavList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/nav/StyledNavListItem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+export declare const StyledNavListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/types/index.d.ts

@@ -4,10 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
 export declare const PLACEMENT: readonly ["end", "start"];
-export declare const PRODUCT: readonly ["chat", "connect", "explore", "guide", "message", "support", "talk"];
-export type Product = (typeof PRODUCT)[number];
+export declare const PRODUCTS: readonly ["chat", "explore", "guide", "support", "talk"];
+export type Product = (typeof PRODUCTS)[number];
 export interface IChromeProps extends HTMLAttributes<HTMLDivElement> {
     /** Applies a custom hue to the chrome navigation */
     hue?: string;
@@ -20,10 +20,6 @@ export interface ISkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Sets the `z-index` of the element */
     zIndex?: number;
 }
-export interface IBodyProps extends HTMLAttributes<HTMLDivElement> {
-    /** Adjusts the body content height to allow space for a footer component */
-    hasFooter?: boolean;
-}
 export interface IHeaderProps extends HTMLAttributes<HTMLElement> {
     /** Displays logo for standlone usage  */
     isStandalone?: boolean;
@@ -74,29 +70,6 @@ export interface INavItemTextProps extends HTMLAttributes<HTMLSpanElement> {
     /** Wraps overflow item text instead of truncating long strings with an ellipsis */
     isWrapped?: boolean;
 }
-export interface ISubNavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Indicates that the item is current in the subnav */
-    isCurrent?: boolean;
-}
-export interface ISubNavItemTextProps extends HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Wraps overflow item text instead of truncating long strings with an ellipsis.
-     * Use when `max-width` styling is applied to the subnav container.
-     */
-    isWrapped?: boolean;
-}
-export interface ICollapsibleSubNavItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
-    /** Sets the item's section header */
-    header?: ReactNode;
-    /** Reveals the item's section */
-    isExpanded?: boolean;
-    /**
-     * Handles changes in the item's expansion state
-     *
-     * @param {boolean} isExpanded An item's expansion state
-     */
-    onChange?: (isExpanded: boolean) => void;
-}
 export interface ISheetProps extends HTMLAttributes<HTMLElement> {
     /** Opens the sheet */
     isOpen?: boolean;

package/dist/typings/utils/useBodyContext.d.ts

@@ -7,7 +7,8 @@
 import React from 'react';
 interface IBodyContext {
     hasFooter: boolean;
+    setHasFooter: (footerPresent: boolean) => void;
 }
-export declare const BodyContext: React.Context<IBodyContext>;
-export declare const useBodyContext: () => IBodyContext;
+export declare const BodyContext: React.Context<IBodyContext | undefined>;
+export declare const useBodyContext: () => IBodyContext | undefined;
 export {};

package/dist/typings/utils/useNavListContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+interface INavListContext {
+    hasList: boolean;
+}
+export declare const NavListContext: React.Context<INavListContext | undefined>;
+export declare const useNavListContext: () => INavListContext | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.11",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -21,21 +21,19 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-accordion": "^3.0.4",
-    "@zendeskgarden/container-utilities": "^2.0.0",
     "dom-helpers": "^5.2.1",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.1",
+    "@zendeskgarden/react-theming": "^9.0.0-next.11",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -48,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
 }