@google-psat/design-system - npm Package Compare versions

Comparing version 0.10.2 to 0.11.0

dist-types/components/index.d.ts

@@ -36,1 +36,5 @@ export { default as Button } from './button';
 export { default as useGlobalFiltering } from './cookiesLanding/useGlobalFiltering';
+export { default as Tabs } from './tabs';
+export { default as QuickLinksList } from './landingPage/quickLinksList';
+export { default as Breadcrumbs } from './breadcrumbs';
+export { default as InternalNavigationForAnchor } from './internalNavigationForAnchor';

dist-types/components/landingPage/constants.d.ts

@@ -1,4 +0,13 @@
-export declare const QUICK_LINKS: {
+/**
+ * Internal dependencies.
+ */
+import { SIDEBAR_ITEMS_KEYS } from '../sidebar';
+export declare const QUICK_LINKS: ({
     title: string;
     link: string;
-}[];
+    sidebarKey: SIDEBAR_ITEMS_KEYS;
+} | {
+    title: string;
+    link: string;
+    sidebarKey?: undefined;
+})[];

dist-types/components/landingPage/index.d.ts

@@ -14,4 +14,5 @@ /**
     extraClasses?: string;
+    showQuickLinks?: boolean;
 }
-declare const LandingPage: ({ title, psInfoKey, iframeSrc, iframeBorderClass, children, extraClasses, contentPanel, }: LandingPageProps) => React.JSX.Element;
+declare const LandingPage: ({ title, psInfoKey, iframeSrc, iframeBorderClass, children, extraClasses, contentPanel, showQuickLinks, }: LandingPageProps) => React.JSX.Element;
 export default LandingPage;

dist-types/components/sidebar/useSidebar/constants.d.ts

 export declare enum SIDEBAR_ITEMS_KEYS {
+    DASHBOARD = "dashboard",
     COOKIES = "cookies",
     COOKIES_WITH_ISSUES = "cookie-issues",
-    TECHNOLOGIES = "technologies",
     PRIVACY_SANDBOX = "privacy-sandbox",
@@ -11,3 +11,3 @@ SITE_BOUNDARIES = "site-boundaries",
     TOPICS = "topics",
-    ATTRIBUTION = "attribution",
+    ATTRIBUTION_REPORTING = "attribution-reporting",
     PROTECTED_AUDIENCE = "protected-audience",
@@ -19,3 +19,4 @@ PRIVATE_AGGREGATION = "private-aggregation",
     FACILITATED_TESTING = "facilitated-testing",
+    WIKI = "wiki",
     SETTINGS = "settings"
 }

dist-types/components/sidebar/useSidebar/context.d.ts

 /**
  * Internal dependencies.
  */
-import { SidebarComponent, SidebarItems } from './types';
+import { CollapsedSidebarItems, SidebarComponent, SidebarItems } from './types';
 export interface SidebarStoreContext {
@@ -15,3 +15,6 @@ state: {
         sidebarItems: SidebarItems;
+        collapsedSidebarItems?: CollapsedSidebarItems;
         isSidebarFocused: boolean;
+        isCollapsed: boolean;
+        isSidebarCollapsible: boolean;
     };
@@ -25,2 +28,7 @@ actions: {
         isKeySelected: (key: string) => boolean;
+        toggleSidebarCollapse: () => void;
+        extractSelectedItemKeyTitles: () => Array<{
+            title: string;
+            key: string;
+        }>;
     };
@@ -27,0 +35,0 @@ }

dist-types/components/sidebar/useSidebar/provider.d.ts

@@ -6,2 +6,2 @@ /**
 import { useSidebarProps } from './types';
-export declare const SidebarProvider: ({ data, defaultSelectedItemKey, children, }: PropsWithChildren<useSidebarProps>) => React.JSX.Element;
+export declare const SidebarProvider: ({ data, defaultSelectedItemKey, collapsedData, collapsedState, children, }: PropsWithChildren<useSidebarProps>) => React.JSX.Element;

dist-types/components/sidebar/useSidebar/types.d.ts

@@ -20,5 +20,15 @@ export type SidebarComponent = {
 };
+export type CollapsedSidebarItems = {
+    footerElements: {
+        [key: string]: {
+            icon: SidebarComponent;
+            title: (() => string) | string;
+        };
+    };
+};
 export interface useSidebarProps {
     data: SidebarItems;
     defaultSelectedItemKey?: string | null;
+    collapsedState?: boolean;
+    collapsedData?: CollapsedSidebarItems;
 }

dist-types/components/table/useTable/types.d.ts

 /**
  * External dependencies.
  */
-import type { CookieTableData, TechnologyData } from '@google-psat/common';
-export type TableData = (CookieTableData | TechnologyData) & {
+import type { CookieTableData } from '@google-psat/common';
+export type TableData = CookieTableData & {
     highlighted?: boolean;
@@ -7,0 +7,0 @@ };

dist-types/icons/index.d.ts

@@ -61,1 +61,10 @@ export { default as ArrowDown } from './arrow-down.svg';
 export { default as GroupsIcon } from './groups.svg';
+export { default as ExternalLinkBlack } from './external-link-black.svg';
+export { default as DashboardIcon } from './dashboard.svg';
+export { default as DashboardIconWhite } from './dashboard-white.svg';
+export { default as WikiIcon } from './wiki.svg';
+export { default as WikiIconWhite } from './wiki-white.svg';
+export { default as ExternalLinkIcon } from './external-link.svg';
+export { default as DoubleArrowIcon } from './double-arrow-icon.svg';
+export { default as Settings } from './settings.svg';
+export { default as MenuOpenIcon } from './menu-open-icon.svg';

dist/components/bulletList/listRow.jsx

@@ -17,4 +17,24 @@ "use strict";
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
@@ -25,3 +45,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 /**
@@ -31,4 +51,12 @@ * Internal dependencies.
 const icons_1 = require("../../icons");
+const sidebar_1 = require("../sidebar");
 const ListRow = ({ row }) => {
     var _a;
+    const navigateTo = (0, sidebar_1.useSidebar)(({ actions }) => actions.updateSelectedItemKey);
+    const handleClick = (0, react_1.useCallback)((event) => {
+        if (row === null || row === void 0 ? void 0 : row.sidebarKey) {
+            navigateTo(row.sidebarKey);
+            event.preventDefault();
+        }
+    }, [navigateTo, row === null || row === void 0 ? void 0 : row.sidebarKey]);
     return (<div className="flex gap-4 items-baseline" key={(_a = row === null || row === void 0 ? void 0 : row.key) !== null && _a !== void 0 ? _a : row.title}>
@@ -38,3 +66,3 @@ <span>
       </span>
-      {(row === null || row === void 0 ? void 0 : row.link) ? (<a title={row.link} href={row.link} target="_blank" rel="noreferrer" className="text-sm text-bright-navy-blue dark:text-jordy-blue font-medium leading-6">
+      {(row === null || row === void 0 ? void 0 : row.link) ? (<a title={row.link} href={row.link} target="_blank" onClick={handleClick} rel="noreferrer" className="text-sm text-bright-navy-blue dark:text-jordy-blue font-medium leading-6">
           {row.title}
@@ -41,0 +69,0 @@ </a>) : (<p className="text-sm font-medium leading-6">{row.title}</p>)}

dist/components/index.js

@@ -35,3 +35,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGlobalFiltering = exports.useFiltersMapping = exports.MenuBar = exports.MatrixContainer = exports.CookiesLandingWrapper = exports.ToastMessage = exports.InspectButton = exports.SearchInput = exports.ExtensionReloadNotification = exports.ErrorFallback = exports.ContentPanel = exports.InfoCard = exports.LandingPage = exports.CookieTable = exports.Details = exports.CookieDetails = exports.CookiesMatrix = exports.CookiesLanding = exports.MatrixComponentHorizontal = exports.Matrix = exports.CirclePieChart = exports.Circle = exports.MessageBox = exports.ToggleSwitch = exports.BorderProgressBar = exports.ProgressBar = exports.ExportButton = exports.RefreshButton = exports.Button = void 0;
+exports.InternalNavigationForAnchor = exports.Breadcrumbs = exports.QuickLinksList = exports.Tabs = exports.useGlobalFiltering = exports.useFiltersMapping = exports.MenuBar = exports.MatrixContainer = exports.CookiesLandingWrapper = exports.ToastMessage = exports.InspectButton = exports.SearchInput = exports.ExtensionReloadNotification = exports.ErrorFallback = exports.ContentPanel = exports.InfoCard = exports.LandingPage = exports.CookieTable = exports.Details = exports.CookieDetails = exports.CookiesMatrix = exports.CookiesLanding = exports.MatrixComponentHorizontal = exports.Matrix = exports.CirclePieChart = exports.Circle = exports.MessageBox = exports.ToggleSwitch = exports.BorderProgressBar = exports.ProgressBar = exports.ExportButton = exports.RefreshButton = exports.Button = void 0;
 var button_1 = require("./button");
@@ -100,2 +100,10 @@ Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
 Object.defineProperty(exports, "useGlobalFiltering", { enumerable: true, get: function () { return __importDefault(useGlobalFiltering_1).default; } });
+var tabs_1 = require("./tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(tabs_1).default; } });
+var quickLinksList_1 = require("./landingPage/quickLinksList");
+Object.defineProperty(exports, "QuickLinksList", { enumerable: true, get: function () { return __importDefault(quickLinksList_1).default; } });
+var breadcrumbs_1 = require("./breadcrumbs");
+Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return __importDefault(breadcrumbs_1).default; } });
+var internalNavigationForAnchor_1 = require("./internalNavigationForAnchor");
+Object.defineProperty(exports, "InternalNavigationForAnchor", { enumerable: true, get: function () { return __importDefault(internalNavigationForAnchor_1).default; } });
 //# sourceMappingURL=index.js.map

dist/components/landingPage/constants.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QUICK_LINKS = void 0;
 /*
@@ -17,8 +19,11 @@ * Copyright 2023 Google LLC
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QUICK_LINKS = void 0;
+/**
+ * Internal dependencies.
+ */
+const sidebar_1 = require("../sidebar");
 exports.QUICK_LINKS = [
     {
         title: 'learnMore',
-        link: 'https://github.com/GoogleChromeLabs/ps-analysis-tool/wiki',
+        link: '#wiki',
+        sidebarKey: sidebar_1.SIDEBAR_ITEMS_KEYS.WIKI,
     },
@@ -25,0 +30,0 @@ {

dist/components/landingPage/contentPanel.jsx

@@ -32,3 +32,3 @@ "use strict";
       <div className="flex gap-5 flex-wrap">
-        {content.map((item, index) => (<a key={index} href={(0, common_1.addUTMParams)(item.url)} target="_blank" rel="noreferrer" className="w-72 h-80 bg-[#FDFDFD] dark:bg-charleston-green hover:bg-[#FAFAFA] rounded-xl border border-bright-gray dark:border-quartz p-5 hover:shadow hover:scale-[1.03] transition-all duration-150 ease-in-out ">
+        {content.map((item, index) => (<a key={index} href={(0, common_1.addUTMParams)(item.url)} target="_blank" rel="noreferrer" className="w-72 min-h-80 bg-[#FDFDFD] dark:bg-charleston-green hover:bg-[#FAFAFA] rounded-xl border border-bright-gray dark:border-quartz p-5 hover:shadow hover:scale-[1.03] transition-all duration-150 ease-in-out ">
             <div className="w-16 h-16 flex justify-center items-center rounded-full bg-bright-gray mb-5">
@@ -35,0 +35,0 @@ <div className={`w-9 h-9 flex justify-center items-center rounded-md ${counterStyles}`}>

dist/components/landingPage/index.jsx

@@ -56,9 +56,14 @@ "use strict";
 const infoCard_1 = __importDefault(require("./infoCard"));
-const LandingPage = ({ title, psInfoKey, iframeSrc, iframeBorderClass, children, extraClasses, contentPanel, }) => {
+const breadcrumbs_1 = __importDefault(require("../breadcrumbs"));
+const sidebar_1 = require("../sidebar");
+const LandingPage = ({ title, psInfoKey, iframeSrc, iframeBorderClass, children, extraClasses, contentPanel, showQuickLinks = true, }) => {
     const [loading, setLoading] = (0, react_1.useState)(iframeSrc ? true : false);
     const [open, setOpen] = (0, react_1.useState)(true);
-    return (<div className="overflow-auto h-full">
+    const { extractSelectedItemKeyTitles } = (0, sidebar_1.useSidebar)(({ actions }) => ({
+        extractSelectedItemKeyTitles: actions.extractSelectedItemKeyTitles,
+    }));
+    return (<div className="w-full h-full">
       {loading && <progressBar_1.default additionalStyles="w-1/3 mx-auto h-full"/>}
       <div className={(0, classnames_1.default)({ hidden: loading }, 'divide-y divide-hex-gray dark:divide-quartz')}>
-        <div className="p-4">
+        <div className="p-4 flex flex-col gap-1">
           <button className="flex gap-2 text-2xl font-bold items-baseline text-raisin-black dark:text-bright-gray cursor-pointer" onClick={() => setOpen((prevOpen) => !prevOpen)}>
@@ -70,2 +75,3 @@ {title && <h1 className="text-left">{title}</h1>}
           </button>
+          <breadcrumbs_1.default items={extractSelectedItemKeyTitles()}/>
         </div>
@@ -80,3 +86,3 @@ <div className={(0, classnames_1.default)({ hidden: !open && !children })}>
             {psInfoKey && <infoCard_1.default infoKey={psInfoKey}/>}
-            {contentPanel && <div>{contentPanel}</div>}
+            {contentPanel && <>{contentPanel}</>}
           </div>
@@ -88,3 +94,3 @@
         </div>
-        <quickLinksList_1.default />
+        {showQuickLinks && <quickLinksList_1.default />}
       </div>
@@ -91,0 +97,0 @@ </div>);

dist/components/sidebar/sidebar.jsx

@@ -17,25 +17,2 @@ "use strict";
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -48,34 +25,20 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
  */
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Internal dependencies.
  */
-const sidebarChild_1 = __importDefault(require("./sidebarChild"));
 const useSidebar_1 = require("./useSidebar");
+const collapsedSidebar_1 = __importDefault(require("./collapsedSidebar"));
+const expandedSidebar_1 = __importDefault(require("./expandedSidebar"));
 const Sidebar = ({ visibleWidth }) => {
-    const { sidebarItems, setIsSidebarFocused } = (0, useSidebar_1.useSidebar)(({ state, actions }) => ({
-        sidebarItems: state.sidebarItems,
-        setIsSidebarFocused: actions.setIsSidebarFocused,
+    const { isCollapsed } = (0, useSidebar_1.useSidebar)(({ state }) => ({
+        isCollapsed: state.isCollapsed,
     }));
-    const [didUserInteract, setDidUserInteract] = (0, react_1.useState)(false);
-    const sidebarContainerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const handleClickOutside = (event) => {
-            var _a;
-            if (sidebarContainerRef.current &&
-                !((_a = sidebarContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                setIsSidebarFocused(false);
-            }
-        };
-        (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleClickOutside);
-        return () => {
-            var _a;
-            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleClickOutside);
-        };
-    }, [setIsSidebarFocused]);
-    return (<div className="w-full h-full overflow-auto border border-l-0 border-t-0 border-b-0 border-gray-300 dark:border-quartz dark:bg-raisin-black" data-testid="sidebar">
-      <div ref={sidebarContainerRef} className="min-w-fit">
-        {Object.entries(sidebarItems).map(([itemKey, sidebarItem]) => (<sidebarChild_1.default didUserInteract={didUserInteract} setDidUserInteract={setDidUserInteract} itemKey={itemKey} sidebarItem={sidebarItem} key={itemKey} visibleWidth={visibleWidth}/>))}
-      </div>
+    return (<div className={(0, classnames_1.default)('h-full border-r border-gray-300 dark:border-quartz relative transition-all duration-300 bg-lotion dark:bg-raisin-black', {
+            'w-full overflow-auto': !isCollapsed,
+        }, {
+            'w-10': isCollapsed,
+        })} data-testid="sidebar">
+      {isCollapsed ? (<collapsedSidebar_1.default />) : (<expandedSidebar_1.default visibleWidth={visibleWidth}/>)}
     </div>);
@@ -82,0 +45,0 @@ };

dist/components/sidebar/sidebarChild.jsx

@@ -93,7 +93,7 @@ "use strict";
             setIsSidebarFocused(true);
-        }} className={`relative w-full flex items-center py-0.5 outline-0 text-xs dark:text-bright-gray ${isKeySelected(itemKey)
+        }} className={`w-full flex items-center py-0.5 outline-0 text-xs dark:text-bright-gray ${isKeySelected(itemKey)
             ? isSidebarFocused
                 ? 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'
                 : 'bg-gainsboro dark:bg-outer-space'
-            : 'bg-white dark:bg-raisin-black'} cursor-pointer ${sidebarItem.isBlurred ? 'opacity-50' : ''}`} style={{ paddingLeft: recursiveStackIndex * 16 + 12 }} data-testid="sidebar-child">
+            : 'bg-lotion dark:bg-raisin-black'} cursor-pointer ${sidebarItem.isBlurred ? 'opacity-50' : ''}`} style={{ paddingLeft: recursiveStackIndex * 16 + 12 }} data-testid="sidebar-child">
         {((_d = Object.keys(sidebarItem.children)) === null || _d === void 0 ? void 0 : _d.length) !== 0 && (<button onClick={() => {
@@ -124,5 +124,3 @@ toggleDropdown(!sidebarItem.dropdownOpen, itemKey);
         </p>
-        <div className="absolute" style={{
-            left: visibleWidth ? visibleWidth - 35 : 0,
-        }}>
+        <div className="absolute right-0 px-1">
           {ExtraInterfaceToTitle && (<ExtraInterfaceToTitle {...(_e = sidebarItem.extraInterfaceToTitle) === null || _e === void 0 ? void 0 : _e.props}/>)}
@@ -129,0 +127,0 @@ </div>

dist/components/sidebar/useSidebar/constants.js

@@ -21,5 +21,5 @@ "use strict";
 (function (SIDEBAR_ITEMS_KEYS) {
+    SIDEBAR_ITEMS_KEYS["DASHBOARD"] = "dashboard";
     SIDEBAR_ITEMS_KEYS["COOKIES"] = "cookies";
     SIDEBAR_ITEMS_KEYS["COOKIES_WITH_ISSUES"] = "cookie-issues";
-    SIDEBAR_ITEMS_KEYS["TECHNOLOGIES"] = "technologies";
     SIDEBAR_ITEMS_KEYS["PRIVACY_SANDBOX"] = "privacy-sandbox";
@@ -31,3 +31,3 @@ SIDEBAR_ITEMS_KEYS["SITE_BOUNDARIES"] = "site-boundaries";
     SIDEBAR_ITEMS_KEYS["TOPICS"] = "topics";
-    SIDEBAR_ITEMS_KEYS["ATTRIBUTION"] = "attribution";
+    SIDEBAR_ITEMS_KEYS["ATTRIBUTION_REPORTING"] = "attribution-reporting";
     SIDEBAR_ITEMS_KEYS["PROTECTED_AUDIENCE"] = "protected-audience";
@@ -39,4 +39,5 @@ SIDEBAR_ITEMS_KEYS["PRIVATE_AGGREGATION"] = "private-aggregation";
     SIDEBAR_ITEMS_KEYS["FACILITATED_TESTING"] = "facilitated-testing";
+    SIDEBAR_ITEMS_KEYS["WIKI"] = "wiki";
     SIDEBAR_ITEMS_KEYS["SETTINGS"] = "settings";
 })(SIDEBAR_ITEMS_KEYS || (exports.SIDEBAR_ITEMS_KEYS = SIDEBAR_ITEMS_KEYS = {}));
 //# sourceMappingURL=constants.js.map

dist/components/sidebar/useSidebar/context.js

@@ -36,3 +36,6 @@ "use strict";
         sidebarItems: {},
+        collapsedSidebarItems: undefined,
         isSidebarFocused: true,
+        isSidebarCollapsible: false,
+        isCollapsed: false,
     },
@@ -46,2 +49,4 @@ actions: {
         isKeySelected: () => false,
+        toggleSidebarCollapse: common_1.noop,
+        extractSelectedItemKeyTitles: () => [],
     },
@@ -48,0 +53,0 @@ };

dist/components/sidebar/useSidebar/provider.jsx

@@ -51,3 +51,3 @@ "use strict";
 const context_1 = require("./context");
-const SidebarProvider = ({ data, defaultSelectedItemKey = null, children, }) => {
+const SidebarProvider = ({ data, defaultSelectedItemKey = null, collapsedData, collapsedState = false, children, }) => {
     const [selectedItemKey, setSelectedItemKey] = (0, react_1.useState)(null);
@@ -58,2 +58,3 @@ const [activePanel, setActivePanel] = (0, react_1.useState)(context_1.initialState.state.activePanel);
     const [isSidebarFocused, setIsSidebarFocused] = (0, react_1.useState)(true);
+    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(collapsedState);
     /**
@@ -224,2 +225,33 @@ * Update the selected item key when the defaultSelectedItemKey loads.
     }, [selectedItemKey]);
+    const toggleSidebarCollapse = (0, react_1.useCallback)(() => {
+        setIsCollapsed((prev) => !prev);
+    }, []);
+    /**
+     * Extract the titles of the selected item key chain.
+     * Eg: selectedItemKey = 'Privacy-Sandbox#cookies#frameUrl'
+     * extractSelectedItemKeyTitles() => ['Privacy Sandbox', 'Cookies', 'Frame URL']
+     * @returns Array<{title: string, key: string}>
+     */
+    const extractSelectedItemKeyTitles = (0, react_1.useCallback)(() => {
+        if (!selectedItemKey) {
+            return [];
+        }
+        let _sidebarItems = sidebarItems;
+        const keys = selectedItemKey.split('#');
+        const titles = [];
+        for (const key of keys) {
+            const sidebarItem = _sidebarItems === null || _sidebarItems === void 0 ? void 0 : _sidebarItems[key];
+            if (!sidebarItem) {
+                break;
+            }
+            titles.push({
+                title: typeof sidebarItem.title === 'function'
+                    ? sidebarItem.title()
+                    : sidebarItem.title,
+                key,
+            });
+            _sidebarItems = sidebarItem.children;
+        }
+        return titles;
+    }, [selectedItemKey, sidebarItems]);
     return (<context_1.SidebarContext.Provider value={{
@@ -231,3 +263,6 @@ state: {
                 sidebarItems,
+                collapsedSidebarItems: collapsedData,
                 isSidebarFocused,
+                isCollapsed,
+                isSidebarCollapsible: Boolean(collapsedData),
             },
@@ -241,2 +276,4 @@ actions: {
                 isKeySelected,
+                toggleSidebarCollapse,
+                extractSelectedItemKeyTitles,
             },
@@ -243,0 +280,0 @@ }}>

dist/components/sidebar/useSidebar/utils/findNextItem.js

@@ -50,3 +50,6 @@ "use strict";
     if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.dropdownOpen) && !skipDropdown) {
-        return handleNextItemOnParent(currentItem);
+        const next = handleNextItemOnParent(currentItem);
+        if (next) {
+            return next;
+        }
     }
@@ -53,0 +56,0 @@ const parentKey = (0, findKeyParent_1.default)(keyPath);

dist/components/sidebar/useSidebar/utils/findPrevItem.js

@@ -51,3 +51,3 @@ "use strict";
     let prevItem = children[prevKey];
-    while (prevItem === null || prevItem === void 0 ? void 0 : prevItem.dropdownOpen) {
+    while ((prevItem === null || prevItem === void 0 ? void 0 : prevItem.dropdownOpen) && Object.keys(prevItem.children).length) {
         const prevItemChildren = Object.keys(prevItem.children);
@@ -54,0 +54,0 @@ prevItem = prevItem.children[prevItemChildren[prevItemChildren.length - 1]];

dist/components/table/components/tableTopBar/index.jsx

@@ -86,3 +86,3 @@ "use strict";
 
-      <div className="text-right w-full text-xxxs text-secondary">
+      <div className="text-right w-full text-xxxs text-secondary dark:text-chinese-silver">
         {i18n_1.I18n.getMessage('count')}: {(_a = rows.length) !== null && _a !== void 0 ? _a : 0}
@@ -89,0 +89,0 @@ </div>

dist/icons/index.jsx

@@ -7,3 +7,3 @@ "use strict";
 exports.VisibilityOff = exports.Warning = exports.PaddedCross = exports.ClearIcon = exports.FilterIcon = exports.StopIcon = exports.Ellipse = exports.Refresh = exports.Cross = exports.Add = exports.PrivacySandboxColoredIcon = exports.PrivacySandboxIconWhite = exports.PrivacySandboxIcon = exports.InspectWhiteIcon = exports.InspectActiveIcon = exports.InspectIcon = exports.AntiCovertTrackingIconWhite = exports.AntiCovertTrackingIcon = exports.RelatedWebsiteSetsIconWhite = exports.RelatedWebsiteSetsIcon = exports.PrivateAdvertisingIconWhite = exports.PrivateAdvertisingIcon = exports.ChipsIconWhite = exports.ChipsIcon = exports.SiteBoundariesIconWhite = exports.SiteBoundariesIcon = exports.InfoIcon = exports.FingerPrintingIconWhite = exports.FingerPrintingIcon = exports.TopicsIconWhite = exports.TopicsIcon = exports.BounceTrackingIconWhite = exports.BounceTrackingIcon = exports.AttributionIconWhite = exports.AttributionIcon = exports.Check = exports.FileWhite = exports.File = exports.Export = exports.Copy = exports.CookieIconWhite = exports.CookieIcon = exports.Cookie = exports.CrossIcon = exports.ClearAll = exports.ChevronRight = exports.ArrowRight = exports.ArrowDownWhite = exports.ArrowUp = exports.ArrowDown = void 0;
-exports.GroupsIcon = exports.WarningBare = exports.ChevronDown = exports.GreenTick = exports.QuestionMark = exports.OutboundInboundColoredIcon = exports.OutboundInboundIcon = exports.OutboundIcon = exports.InboundIcon = exports.PSTimelineIcon = void 0;
+exports.MenuOpenIcon = exports.Settings = exports.DoubleArrowIcon = exports.ExternalLinkIcon = exports.WikiIconWhite = exports.WikiIcon = exports.DashboardIconWhite = exports.DashboardIcon = exports.ExternalLinkBlack = exports.GroupsIcon = exports.WarningBare = exports.ChevronDown = exports.GreenTick = exports.QuestionMark = exports.OutboundInboundColoredIcon = exports.OutboundInboundIcon = exports.OutboundIcon = exports.InboundIcon = exports.PSTimelineIcon = void 0;
 /*
@@ -144,2 +144,20 @@ * Copyright 2023 Google LLC
 Object.defineProperty(exports, "GroupsIcon", { enumerable: true, get: function () { return __importDefault(groups_svg_1).default; } });
+var external_link_black_svg_1 = require("./external-link-black.svg");
+Object.defineProperty(exports, "ExternalLinkBlack", { enumerable: true, get: function () { return __importDefault(external_link_black_svg_1).default; } });
+var dashboard_svg_1 = require("./dashboard.svg");
+Object.defineProperty(exports, "DashboardIcon", { enumerable: true, get: function () { return __importDefault(dashboard_svg_1).default; } });
+var dashboard_white_svg_1 = require("./dashboard-white.svg");
+Object.defineProperty(exports, "DashboardIconWhite", { enumerable: true, get: function () { return __importDefault(dashboard_white_svg_1).default; } });
+var wiki_svg_1 = require("./wiki.svg");
+Object.defineProperty(exports, "WikiIcon", { enumerable: true, get: function () { return __importDefault(wiki_svg_1).default; } });
+var wiki_white_svg_1 = require("./wiki-white.svg");
+Object.defineProperty(exports, "WikiIconWhite", { enumerable: true, get: function () { return __importDefault(wiki_white_svg_1).default; } });
+var external_link_svg_1 = require("./external-link.svg");
+Object.defineProperty(exports, "ExternalLinkIcon", { enumerable: true, get: function () { return __importDefault(external_link_svg_1).default; } });
+var double_arrow_icon_svg_1 = require("./double-arrow-icon.svg");
+Object.defineProperty(exports, "DoubleArrowIcon", { enumerable: true, get: function () { return __importDefault(double_arrow_icon_svg_1).default; } });
+var settings_svg_1 = require("./settings.svg");
+Object.defineProperty(exports, "Settings", { enumerable: true, get: function () { return __importDefault(settings_svg_1).default; } });
+var menu_open_icon_svg_1 = require("./menu-open-icon.svg");
+Object.defineProperty(exports, "MenuOpenIcon", { enumerable: true, get: function () { return __importDefault(menu_open_icon_svg_1).default; } });
 //# sourceMappingURL=index.jsx.map

package.json

 {
   "name": "@google-psat/design-system",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "A package for presentational components that are being used in multiple packages",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

759457

increased by5.77%

Number of package files

445

increased by3.49%

Lines of code

12212

increased by5.22%

No dependency changes