@wordpress/boot 0.1.1-next.2f1c7c01b.0

package/build-module/components/app/index.js

@@ -0,0 +1,32 @@
+// packages/boot/src/components/app/index.tsx
+import { createRoot, StrictMode } from "@wordpress/element";
+import { dispatch, useSelect } from "@wordpress/data";
+import Router from "./router";
+import { store } from "../../store";
+import { jsx } from "react/jsx-runtime";
+function App() {
+  const routes = useSelect((select) => select(store).getRoutes(), []);
+  return /* @__PURE__ */ jsx(Router, { routes });
+}
+async function init({
+  menuItems,
+  routes
+}) {
+  (menuItems ?? []).forEach((menuItem) => {
+    dispatch(store).registerMenuItem(menuItem.id, menuItem);
+  });
+  (routes ?? []).forEach((route) => {
+    dispatch(store).registerRoute(route);
+  });
+  const rootElement = document.getElementById("gutenberg-boot-app");
+  if (rootElement) {
+    const root = createRoot(rootElement);
+    root.render(
+      /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {}) })
+    );
+  }
+}
+export {
+  init
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/app/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/app/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createRoot, StrictMode } from '@wordpress/element';\nimport { dispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Router from './router';\nimport { store } from '../../store';\nimport type { MenuItem, Route } from '../../store/types';\n\nfunction App() {\n\tconst routes = useSelect( ( select ) => select( store ).getRoutes(), [] );\n\n\treturn <Router routes={ routes } />;\n}\n\nexport async function init( {\n\tmenuItems,\n\troutes,\n}: {\n\tmenuItems?: MenuItem[];\n\troutes?: Route[];\n} ) {\n\t( menuItems ?? [] ).forEach( ( menuItem ) => {\n\t\tdispatch( store ).registerMenuItem( menuItem.id, menuItem );\n\t} );\n\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\t// Render the app\n\tconst rootElement = document.getElementById( 'gutenberg-boot-app' );\n\tif ( rootElement ) {\n\t\tconst root = createRoot( rootElement );\n\t\troot.render(\n\t\t\t<StrictMode>\n\t\t\t\t<App />\n\t\t\t</StrictMode>\n\t\t);\n\t}\n}\n"],
+  "mappings": ";AAGA,SAAS,YAAY,kBAAkB;AACvC,SAAS,UAAU,iBAAiB;AAKpC,OAAO,YAAY;AACnB,SAAS,aAAa;AAMd;AAHR,SAAS,MAAM;AACd,QAAM,SAAS,UAAW,CAAE,WAAY,OAAQ,KAAM,EAAE,UAAU,GAAG,CAAC,CAAE;AAExE,SAAO,oBAAC,UAAO,QAAkB;AAClC;AAEA,eAAsB,KAAM;AAAA,EAC3B;AAAA,EACA;AACD,GAGI;AACH,GAAE,aAAa,CAAC,GAAI,QAAS,CAAE,aAAc;AAC5C,aAAU,KAAM,EAAE,iBAAkB,SAAS,IAAI,QAAS;AAAA,EAC3D,CAAE;AAEF,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAGF,QAAM,cAAc,SAAS,eAAgB,oBAAqB;AAClE,MAAK,aAAc;AAClB,UAAM,OAAO,WAAY,WAAY;AACrC,SAAK;AAAA,MACJ,oBAAC,cACA,8BAAC,OAAI,GACN;AAAA,IACD;AAAA,EACD;AACD;",
+  "names": []
+}

package/build-module/components/app/router.js

@@ -0,0 +1,119 @@
+// packages/boot/src/components/app/router.tsx
+import {
+  createRouter,
+  createRootRoute,
+  createRoute,
+  RouterProvider,
+  createBrowserHistory
+} from "@tanstack/react-router";
+import { parseHref } from "@tanstack/history";
+import { __ } from "@wordpress/i18n";
+import { lazy, useState, useEffect } from "@wordpress/element";
+import { Page } from "@wordpress/admin-ui";
+import Root from "../root";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NotFoundComponent() {
+  return /* @__PURE__ */ jsx("div", { className: "boot-layout__stage", children: /* @__PURE__ */ jsx(Page, { title: __("Route not found"), hasPadding: true, children: __("The page you're looking for does not exist") }) });
+}
+function RouteComponent({
+  stage: Stage,
+  inspector: Inspector
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Stage && /* @__PURE__ */ jsx("div", { className: "boot-layout__stage", children: /* @__PURE__ */ jsx(Stage, {}) }),
+    Inspector && /* @__PURE__ */ jsx("div", { className: "boot-layout__inspector", children: /* @__PURE__ */ jsx(Inspector, {}) })
+  ] });
+}
+async function createRouteFromDefinition(route, parentRoute) {
+  const SurfacesModule = route.content_module ? lazy(async () => {
+    const module = await import(route.content_module);
+    return {
+      default: () => /* @__PURE__ */ jsx(
+        RouteComponent,
+        {
+          stage: module.stage,
+          inspector: module.inspector
+        }
+      )
+    };
+  }) : () => null;
+  let routeConfig = {};
+  if (route.route_module) {
+    const module = await import(route.route_module);
+    routeConfig = module.route || {};
+  }
+  return createRoute({
+    getParentRoute: () => parentRoute,
+    path: route.path,
+    beforeLoad: routeConfig.beforeLoad ? async (opts) => {
+      const context = {
+        params: opts.params || {},
+        search: opts.search || {}
+      };
+      await routeConfig.beforeLoad(context);
+    } : void 0,
+    loader: routeConfig.loader ? async (opts) => {
+      const context = {
+        params: opts.params || {},
+        search: opts.search || {}
+      };
+      return await routeConfig.loader(context);
+    } : void 0,
+    component: SurfacesModule
+  });
+}
+async function createRouteTree(routes) {
+  const rootRoute = createRootRoute({
+    component: Root,
+    context: () => ({})
+  });
+  const dynamicRoutes = await Promise.all(
+    routes.map((route) => createRouteFromDefinition(route, rootRoute))
+  );
+  return rootRoute.addChildren(dynamicRoutes);
+}
+function createPathHistory() {
+  return createBrowserHistory({
+    parseLocation: () => {
+      const url = new URL(window.location.href);
+      const path = url.searchParams.get("p") || "/";
+      const pathHref = `${path}${url.hash}`;
+      return parseHref(pathHref, window.history.state);
+    },
+    createHref: (href) => {
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set("p", href);
+      return `${window.location.pathname}?${searchParams}`;
+    }
+  });
+}
+function Router({ routes }) {
+  const [router, setRouter] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    async function initializeRouter() {
+      const history = createPathHistory();
+      const routeTree = await createRouteTree(routes);
+      if (!cancelled) {
+        const newRouter = createRouter({
+          history,
+          routeTree,
+          defaultNotFoundComponent: NotFoundComponent
+        });
+        setRouter(newRouter);
+      }
+    }
+    initializeRouter();
+    return () => {
+      cancelled = true;
+    };
+  }, [routes]);
+  if (!router) {
+    return /* @__PURE__ */ jsx("div", { children: "Loading routes..." });
+  }
+  return /* @__PURE__ */ jsx(RouterProvider, { router });
+}
+export {
+  Router as default
+};
+//# sourceMappingURL=router.js.map

package/build-module/components/app/router.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/app/router.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreateRouter,\n\tcreateRootRoute,\n\tcreateRoute,\n\tRouterProvider,\n\tcreateBrowserHistory,\n\ttype AnyRoute,\n} from '@tanstack/react-router';\nimport { parseHref } from '@tanstack/history';\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { lazy, useState, useEffect } from '@wordpress/element';\nimport { Page } from '@wordpress/admin-ui';\n\n/**\n * Internal dependencies\n */\nimport Root from '../root';\nimport type { Route, RouteLoaderContext } from '../../store/types';\n\n// Not found component\nfunction NotFoundComponent() {\n\treturn (\n\t\t<div className=\"boot-layout__stage\">\n\t\t\t<Page title={ __( 'Route not found' ) } hasPadding>\n\t\t\t\t{ __( \"The page you're looking for does not exist\" ) }\n\t\t\t</Page>\n\t\t</div>\n\t);\n}\n\nfunction RouteComponent( {\n\tstage: Stage,\n\tinspector: Inspector,\n}: {\n\tstage?: ComponentType;\n\tinspector?: ComponentType;\n} ) {\n\treturn (\n\t\t<>\n\t\t\t{ Stage && (\n\t\t\t\t<div className=\"boot-layout__stage\">\n\t\t\t\t\t<Stage />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ Inspector && (\n\t\t\t\t<div className=\"boot-layout__inspector\">\n\t\t\t\t\t<Inspector />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Creates a TanStack route from a Route definition.\n *\n * @param route       Route configuration\n * @param parentRoute Parent route.\n * @return Tanstack Route.\n */\nasync function createRouteFromDefinition(\n\troute: Route,\n\tparentRoute: AnyRoute\n) {\n\t// Create lazy components for stage and inspector surfaces\n\tconst SurfacesModule = route.content_module\n\t\t? lazy( async () => {\n\t\t\t\tconst module = await import( route.content_module! );\n\t\t\t\t// Return a component that renders the surfaces\n\t\t\t\treturn {\n\t\t\t\t\tdefault: () => (\n\t\t\t\t\t\t<RouteComponent\n\t\t\t\t\t\t\tstage={ module.stage }\n\t\t\t\t\t\t\tinspector={ module.inspector }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t  } )\n\t\t: () => null;\n\n\t// Load route module for lifecycle functions if specified\n\tlet routeConfig: {\n\t\tbeforeLoad?: ( context: RouteLoaderContext ) => void | Promise< void >;\n\t\tloader?: ( context: RouteLoaderContext ) => Promise< unknown >;\n\t} = {};\n\n\tif ( route.route_module ) {\n\t\tconst module = await import( route.route_module );\n\t\trouteConfig = module.route || {};\n\t}\n\n\treturn createRoute( {\n\t\tgetParentRoute: () => parentRoute,\n\t\tpath: route.path,\n\t\tbeforeLoad: routeConfig.beforeLoad\n\t\t\t? async ( opts: any ) => {\n\t\t\t\t\tconst context: RouteLoaderContext = {\n\t\t\t\t\t\tparams: opts.params || {},\n\t\t\t\t\t\tsearch: opts.search || {},\n\t\t\t\t\t};\n\t\t\t\t\tawait routeConfig.beforeLoad!( context );\n\t\t\t  }\n\t\t\t: undefined,\n\t\tloader: routeConfig.loader\n\t\t\t? async ( opts: any ) => {\n\t\t\t\t\tconst context: RouteLoaderContext = {\n\t\t\t\t\t\tparams: opts.params || {},\n\t\t\t\t\t\tsearch: opts.search || {},\n\t\t\t\t\t};\n\t\t\t\t\treturn await routeConfig.loader!( context );\n\t\t\t  }\n\t\t\t: undefined,\n\t\tcomponent: SurfacesModule,\n\t} );\n}\n\n/**\n * Creates a route tree from route definitions.\n *\n * @param routes Routes definition.\n * @return Router tree.\n */\nasync function createRouteTree( routes: Route[] ) {\n\tconst rootRoute = createRootRoute( {\n\t\tcomponent: Root,\n\t\tcontext: () => ( {} ),\n\t} );\n\n\t// Create routes from definitions\n\tconst dynamicRoutes = await Promise.all(\n\t\troutes.map( ( route ) => createRouteFromDefinition( route, rootRoute ) )\n\t);\n\n\treturn rootRoute.addChildren( dynamicRoutes );\n}\n\n// Create custom history that parses ?p= query parameter\nfunction createPathHistory() {\n\treturn createBrowserHistory( {\n\t\tparseLocation: () => {\n\t\t\tconst url = new URL( window.location.href );\n\t\t\tconst path = url.searchParams.get( 'p' ) || '/';\n\t\t\tconst pathHref = `${ path }${ url.hash }`;\n\t\t\treturn parseHref( pathHref, window.history.state );\n\t\t},\n\t\tcreateHref: ( href ) => {\n\t\t\tconst searchParams = new URLSearchParams( window.location.search );\n\t\t\tsearchParams.set( 'p', href );\n\t\t\treturn `${ window.location.pathname }?${ searchParams }`;\n\t\t},\n\t} );\n}\n\ninterface RouterProps {\n\troutes: Route[];\n}\n\nexport default function Router( { routes }: RouterProps ) {\n\tconst [ router, setRouter ] = useState< any >( null );\n\n\tuseEffect( () => {\n\t\tlet cancelled = false;\n\n\t\tasync function initializeRouter() {\n\t\t\tconst history = createPathHistory();\n\t\t\tconst routeTree = await createRouteTree( routes );\n\n\t\t\tif ( ! cancelled ) {\n\t\t\t\tconst newRouter = createRouter( {\n\t\t\t\t\thistory,\n\t\t\t\t\trouteTree,\n\t\t\t\t\tdefaultNotFoundComponent: NotFoundComponent,\n\t\t\t\t} );\n\t\t\t\tsetRouter( newRouter );\n\t\t\t}\n\t\t}\n\n\t\tinitializeRouter();\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [ routes ] );\n\n\tif ( ! router ) {\n\t\treturn <div>Loading routes...</div>;\n\t}\n\n\treturn <RouterProvider router={ router } />;\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,SAAS,iBAAiB;AAM1B,SAAS,UAAU;AACnB,SAAS,MAAM,UAAU,iBAAiB;AAC1C,SAAS,YAAY;AAKrB,OAAO,UAAU;AAOd,SAeD,UAfC,KAeD,YAfC;AAHH,SAAS,oBAAoB;AAC5B,SACC,oBAAC,SAAI,WAAU,sBACd,8BAAC,QAAK,OAAQ,GAAI,iBAAkB,GAAI,YAAU,MAC/C,aAAI,4CAA6C,GACpD,GACD;AAEF;AAEA,SAAS,eAAgB;AAAA,EACxB,OAAO;AAAA,EACP,WAAW;AACZ,GAGI;AACH,SACC,iCACG;AAAA,aACD,oBAAC,SAAI,WAAU,sBACd,8BAAC,SAAM,GACR;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,0BACd,8BAAC,aAAU,GACZ;AAAA,KAEF;AAEF;AASA,eAAe,0BACd,OACA,aACC;AAED,QAAM,iBAAiB,MAAM,iBAC1B,KAAM,YAAY;AAClB,UAAM,SAAS,MAAM,OAAQ,MAAM;AAEnC,WAAO;AAAA,MACN,SAAS,MACR;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,OAAO;AAAA,UACf,WAAY,OAAO;AAAA;AAAA,MACpB;AAAA,IAEF;AAAA,EACA,CAAE,IACF,MAAM;AAGT,MAAI,cAGA,CAAC;AAEL,MAAK,MAAM,cAAe;AACzB,UAAM,SAAS,MAAM,OAAQ,MAAM;AACnC,kBAAc,OAAO,SAAS,CAAC;AAAA,EAChC;AAEA,SAAO,YAAa;AAAA,IACnB,gBAAgB,MAAM;AAAA,IACtB,MAAM,MAAM;AAAA,IACZ,YAAY,YAAY,aACrB,OAAQ,SAAe;AACvB,YAAM,UAA8B;AAAA,QACnC,QAAQ,KAAK,UAAU,CAAC;AAAA,QACxB,QAAQ,KAAK,UAAU,CAAC;AAAA,MACzB;AACA,YAAM,YAAY,WAAa,OAAQ;AAAA,IACvC,IACA;AAAA,IACH,QAAQ,YAAY,SACjB,OAAQ,SAAe;AACvB,YAAM,UAA8B;AAAA,QACnC,QAAQ,KAAK,UAAU,CAAC;AAAA,QACxB,QAAQ,KAAK,UAAU,CAAC;AAAA,MACzB;AACA,aAAO,MAAM,YAAY,OAAS,OAAQ;AAAA,IAC1C,IACA;AAAA,IACH,WAAW;AAAA,EACZ,CAAE;AACH;AAQA,eAAe,gBAAiB,QAAkB;AACjD,QAAM,YAAY,gBAAiB;AAAA,IAClC,WAAW;AAAA,IACX,SAAS,OAAQ,CAAC;AAAA,EACnB,CAAE;AAGF,QAAM,gBAAgB,MAAM,QAAQ;AAAA,IACnC,OAAO,IAAK,CAAE,UAAW,0BAA2B,OAAO,SAAU,CAAE;AAAA,EACxE;AAEA,SAAO,UAAU,YAAa,aAAc;AAC7C;AAGA,SAAS,oBAAoB;AAC5B,SAAO,qBAAsB;AAAA,IAC5B,eAAe,MAAM;AACpB,YAAM,MAAM,IAAI,IAAK,OAAO,SAAS,IAAK;AAC1C,YAAM,OAAO,IAAI,aAAa,IAAK,GAAI,KAAK;AAC5C,YAAM,WAAW,GAAI,IAAK,GAAI,IAAI,IAAK;AACvC,aAAO,UAAW,UAAU,OAAO,QAAQ,KAAM;AAAA,IAClD;AAAA,IACA,YAAY,CAAE,SAAU;AACvB,YAAM,eAAe,IAAI,gBAAiB,OAAO,SAAS,MAAO;AACjE,mBAAa,IAAK,KAAK,IAAK;AAC5B,aAAO,GAAI,OAAO,SAAS,QAAS,IAAK,YAAa;AAAA,IACvD;AAAA,EACD,CAAE;AACH;AAMe,SAAR,OAAyB,EAAE,OAAO,GAAiB;AACzD,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAiB,IAAK;AAEpD,YAAW,MAAM;AAChB,QAAI,YAAY;AAEhB,mBAAe,mBAAmB;AACjC,YAAM,UAAU,kBAAkB;AAClC,YAAM,YAAY,MAAM,gBAAiB,MAAO;AAEhD,UAAK,CAAE,WAAY;AAClB,cAAM,YAAY,aAAc;AAAA,UAC/B;AAAA,UACA;AAAA,UACA,0BAA0B;AAAA,QAC3B,CAAE;AACF,kBAAW,SAAU;AAAA,MACtB;AAAA,IACD;AAEA,qBAAiB;AAEjB,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAE,MAAO,CAAE;AAEd,MAAK,CAAE,QAAS;AACf,WAAO,oBAAC,SAAI,+BAAiB;AAAA,EAC9B;AAEA,SAAO,oBAAC,kBAAe,QAAkB;AAC1C;",
+  "names": []
+}

package/build-module/components/navigation/drilldown-item/index.js

@@ -0,0 +1,49 @@
+// packages/boot/src/components/navigation/drilldown-item/index.tsx
+import clsx from "clsx";
+import {
+  FlexBlock,
+  __experimentalItem as Item,
+  __experimentalHStack as HStack,
+  Icon
+} from "@wordpress/components";
+import { isRTL } from "@wordpress/i18n";
+import { chevronRightSmall, chevronLeftSmall } from "@wordpress/icons";
+import { wrapIcon } from "../items";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DrilldownItem({
+  className,
+  id,
+  icon,
+  shouldShowPlaceholder = true,
+  children,
+  onNavigate
+}) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onNavigate({ id, direction: "forward" });
+  };
+  return /* @__PURE__ */ jsx(
+    Item,
+    {
+      className: clsx("boot-navigation-item", className),
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          justify: "flex-start",
+          spacing: 2,
+          style: { flexGrow: "1" },
+          children: [
+            wrapIcon(icon, shouldShowPlaceholder),
+            /* @__PURE__ */ jsx(FlexBlock, { children }),
+            /* @__PURE__ */ jsx(Icon, { icon: isRTL() ? chevronLeftSmall : chevronRightSmall })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  DrilldownItem as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/navigation/drilldown-item/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/navigation/drilldown-item/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalItem as Item,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n\tIcon,\n} from '@wordpress/components';\nimport { isRTL } from '@wordpress/i18n';\nimport { chevronRightSmall, chevronLeftSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { wrapIcon } from '../items';\nimport type { IconType } from '../../../store/types';\n\ninterface DrilldownItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Identifier of the navigation item.\n\t */\n\tid: string;\n\t/**\n\t * Icon to display with the navigation item.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Whether to show placeholder icons for alignment.\n\t */\n\tshouldShowPlaceholder?: boolean;\n\t/**\n\t * Content to display inside the navigation item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Function to handle sidebar navigation when the item is clicked.\n\t */\n\tonNavigate: ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => void;\n}\n\nexport default function DrilldownItem( {\n\tclassName,\n\tid,\n\ticon,\n\tshouldShowPlaceholder = true,\n\tchildren,\n\tonNavigate,\n}: DrilldownItemProps ) {\n\tconst handleClick = ( e: React.MouseEvent ) => {\n\t\te.preventDefault();\n\t\tonNavigate( { id, direction: 'forward' } );\n\t};\n\n\treturn (\n\t\t<Item\n\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\tonClick={ handleClick }\n\t\t>\n\t\t\t<HStack\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tspacing={ 2 }\n\t\t\t\tstyle={ { flexGrow: '1' } }\n\t\t\t>\n\t\t\t\t{ wrapIcon( icon, shouldShowPlaceholder ) }\n\t\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t\t\t<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,aAAa;AACtB,SAAS,mBAAmB,wBAAwB;AAKpD,SAAS,gBAAgB;AAsDtB,SAMC,KAND;AAlBY,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,cAAc,CAAE,MAAyB;AAC9C,MAAE,eAAe;AACjB,eAAY,EAAE,IAAI,WAAW,UAAU,CAAE;AAAA,EAC1C;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,wBAAwB,SAAU;AAAA,MACpD,SAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACA,SAAQ;AAAA,UACR,SAAU;AAAA,UACV,OAAQ,EAAE,UAAU,IAAI;AAAA,UAEtB;AAAA,qBAAU,MAAM,qBAAsB;AAAA,YACxC,oBAAC,aAAY,UAAU;AAAA,YACvB,oBAAC,QAAK,MAAO,MAAM,IAAI,mBAAmB,mBAAoB;AAAA;AAAA;AAAA,MAC/D;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/components/navigation/dropdown-item/index.js

@@ -0,0 +1,162 @@
+// packages/boot/src/components/navigation/dropdown-item/index.tsx
+import clsx from "clsx";
+import {
+  FlexBlock,
+  __experimentalItem as Item,
+  __experimentalHStack as HStack,
+  Icon,
+  __unstableMotion as motion,
+  __unstableAnimatePresence as AnimatePresence
+} from "@wordpress/components";
+import { chevronDownSmall } from "@wordpress/icons";
+import { useReducedMotion } from "@wordpress/compose";
+import { useSelect } from "@wordpress/data";
+import { STORE_NAME } from "../../../store";
+import NavigationItem from "../navigation-item";
+import { wrapIcon } from "../items";
+
+// packages/boot/src/components/navigation/dropdown-item/style.scss
+var css = `/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.boot-dropdown-item__children {
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  margin-block-start: -2px;
+  margin-block-end: 2px;
+  margin-inline-start: 30px;
+  overflow: hidden;
+}
+
+.boot-dropdown-item__chevron.is-up {
+  transform: rotate(180deg);
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZ3V0ZW5iZXJnL2d1dGVuYmVyZy9wdWJsaXNoL3BhY2thZ2VzL2Jvb3Qvc3JjL2NvbXBvbmVudHMvbmF2aWdhdGlvbi9kcm9wZG93bi1pdGVtIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fdmFyaWFibGVzLnNjc3MiLCIuLi8uLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fY29sb3JzLnNjc3MiLCJzdHlsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FDQUE7QUFBQTtBQUFBO0FEVUE7QUFBQTtBQUFBO0FBT0E7QUFBQTtBQUFBO0FBNkJBO0FBQUE7QUFBQTtBQUFBO0FBaUJBO0FBQUE7QUFBQTtBQVdBO0FBQUE7QUFBQTtBQWdCQTtBQUFBO0FBQUE7QUF3QkE7QUFBQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBZUE7QUFBQTtBQUFBO0FBbUJBO0FBQUE7QUFBQTtBQVNBO0FBQUE7QUFBQTtBQUFBO0FFaEtBO0VBQ0M7RUFDQTtFQU9BLFNBRHNDO0VBRXRDO0VBQ0Esa0JBSHNDO0VBSXRDLHFCQUNDO0VBRUQ7OztBQUdEO0VBQ0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFNDU1MgVmFyaWFibGVzLlxuICpcbiAqIFBsZWFzZSB1c2UgdmFyaWFibGVzIGZyb20gdGhpcyBzaGVldCB0byBlbnN1cmUgY29uc2lzdGVuY3kgYWNyb3NzIHRoZSBVSS5cbiAqIERvbid0IGFkZCB0byB0aGlzIHNoZWV0IHVubGVzcyB5b3UncmUgcHJldHR5IHN1cmUgdGhlIHZhbHVlIHdpbGwgYmUgcmV1c2VkIGluIG1hbnkgcGxhY2VzLlxuICogRm9yIGV4YW1wbGUsIGRvbid0IGFkZCBydWxlcyB0byB0aGlzIHNoZWV0IHRoYXQgYWZmZWN0IGJsb2NrIHZpc3VhbHMuIEl0J3MgcHVyZWx5IGZvciBVSS5cbiAqL1xuXG5AdXNlIFwiLi9jb2xvcnNcIjtcblxuLyoqXG4gKiBGb250cyAmIGJhc2ljIHZhcmlhYmxlcy5cbiAqL1xuXG4kZGVmYXVsdC1mb250OiAtYXBwbGUtc3lzdGVtLCBCbGlua01hY1N5c3RlbUZvbnQsXCJTZWdvZSBVSVwiLCBSb2JvdG8sIE94eWdlbi1TYW5zLCBVYnVudHUsIENhbnRhcmVsbCxcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7IC8vIFRvZG86IGRlcHJlY2F0ZSBpbiBmYXZvciBvZiAkZmFtaWx5IHZhcmlhYmxlc1xuJGRlZmF1bHQtbGluZS1oZWlnaHQ6IDEuNDsgLy8gVG9kbzogZGVwcmVjYXRlIGluIGZhdm9yIG9mICRsaW5lLWhlaWdodCB0b2tlbnNcblxuLyoqXG4gKiBUeXBvZ3JhcGh5XG4gKi9cblxuLy8gU2l6ZXNcbiRmb250LXNpemUteC1zbWFsbDogMTFweDtcbiRmb250LXNpemUtc21hbGw6IDEycHg7XG4kZm9udC1zaXplLW1lZGl1bTogMTNweDtcbiRmb250LXNpemUtbGFyZ2U6IDE1cHg7XG4kZm9udC1zaXplLXgtbGFyZ2U6IDIwcHg7XG4kZm9udC1zaXplLTJ4LWxhcmdlOiAzMnB4O1xuXG4vLyBMaW5lIGhlaWdodHNcbiRmb250LWxpbmUtaGVpZ2h0LXgtc21hbGw6IDE2cHg7XG4kZm9udC1saW5lLWhlaWdodC1zbWFsbDogMjBweDtcbiRmb250LWxpbmUtaGVpZ2h0LW1lZGl1bTogMjRweDtcbiRmb250LWxpbmUtaGVpZ2h0LWxhcmdlOiAyOHB4O1xuJGZvbnQtbGluZS1oZWlnaHQteC1sYXJnZTogMzJweDtcbiRmb250LWxpbmUtaGVpZ2h0LTJ4LWxhcmdlOiA0MHB4O1xuXG4vLyBXZWlnaHRzXG4kZm9udC13ZWlnaHQtcmVndWxhcjogNDAwO1xuJGZvbnQtd2VpZ2h0LW1lZGl1bTogNDk5OyAvLyBlbnN1cmVzIGZhbGxiYWNrIHRvIDQwMCAoaW5zdGVhZCBvZiA2MDApXG5cbi8vIEZhbWlsaWVzXG4kZm9udC1mYW1pbHktaGVhZGluZ3M6IC1hcHBsZS1zeXN0ZW0sIFwic3lzdGVtLXVpXCIsIFwiU2Vnb2UgVUlcIiwgUm9ib3RvLCBPeHlnZW4tU2FucywgVWJ1bnR1LCBDYW50YXJlbGwsIFwiSGVsdmV0aWNhIE5ldWVcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1ib2R5OiAtYXBwbGUtc3lzdGVtLCBcInN5c3RlbS11aVwiLCBcIlNlZ29lIFVJXCIsIFJvYm90bywgT3h5Z2VuLVNhbnMsIFVidW50dSwgQ2FudGFyZWxsLCBcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7XG4kZm9udC1mYW1pbHktbW9ubzogTWVubG8sIENvbnNvbGFzLCBtb25hY28sIG1vbm9zcGFjZTtcblxuLyoqXG4gKiBHcmlkIFN5c3RlbS5cbiAqIGh0dHBzOi8vbWFrZS53b3JkcHJlc3Mub3JnL2Rlc2lnbi8yMDE5LzEwLzMxL3Byb3Bvc2FsLWEtY29uc2lzdGVudC1zcGFjaW5nLXN5c3RlbS1mb3Itd29yZHByZXNzL1xuICovXG5cbiRncmlkLXVuaXQ6IDhweDtcbiRncmlkLXVuaXQtMDU6IDAuNSAqICRncmlkLXVuaXQ7XHQvLyA0cHhcbiRncmlkLXVuaXQtMTA6IDEgKiAkZ3JpZC11bml0O1x0XHQvLyA4cHhcbiRncmlkLXVuaXQtMTU6IDEuNSAqICRncmlkLXVuaXQ7XHQvLyAxMnB4XG4kZ3JpZC11bml0LTIwOiAyICogJGdyaWQtdW5pdDtcdFx0Ly8gMTZweFxuJGdyaWQtdW5pdC0zMDogMyAqICRncmlkLXVuaXQ7XHRcdC8vIDI0cHhcbiRncmlkLXVuaXQtNDA6IDQgKiAkZ3JpZC11bml0O1x0XHQvLyAzMnB4XG4kZ3JpZC11bml0LTUwOiA1ICogJGdyaWQtdW5pdDtcdFx0Ly8gNDBweFxuJGdyaWQtdW5pdC02MDogNiAqICRncmlkLXVuaXQ7XHRcdC8vIDQ4cHhcbiRncmlkLXVuaXQtNzA6IDcgKiAkZ3JpZC11bml0O1x0XHQvLyA1NnB4XG4kZ3JpZC11bml0LTgwOiA4ICogJGdyaWQtdW5pdDtcdFx0Ly8gNjRweFxuXG4vKipcbiAqIFJhZGl1cyBzY2FsZS5cbiAqL1xuXG4kcmFkaXVzLXgtc21hbGw6IDFweDsgICAvLyBBcHBsaWVkIHRvIGVsZW1lbnRzIGxpa2UgYnV0dG9ucyBuZXN0ZWQgd2l0aGluIHByaW1pdGl2ZXMgbGlrZSBpbnB1dHMuXG4kcmFkaXVzLXNtYWxsOiAycHg7ICAgICAvLyBBcHBsaWVkIHRvIG1vc3QgcHJpbWl0aXZlcy5cbiRyYWRpdXMtbWVkaXVtOiA0cHg7ICAgIC8vIEFwcGxpZWQgdG8gY29udGFpbmVycyB3aXRoIHNtYWxsZXIgcGFkZGluZy5cbiRyYWRpdXMtbGFyZ2U6IDhweDsgICAgIC8vIEFwcGxpZWQgdG8gY29udGFpbmVycyB3aXRoIGxhcmdlciBwYWRkaW5nLlxuJHJhZGl1cy1mdWxsOiA5OTk5cHg7ICAgLy8gRm9yIHBpbGxzLlxuJHJhZGl1cy1yb3VuZDogNTAlOyAgICAgLy8gRm9yIGNpcmNsZXMgYW5kIG92YWxzLlxuXG4vKipcbiAqIEVsZXZhdGlvbiBzY2FsZS5cbiAqL1xuXG4vLyBGb3Igc2VjdGlvbnMgYW5kIGNvbnRhaW5lcnMgdGhhdCBncm91cCByZWxhdGVkIGNvbnRlbnQgYW5kIGNvbnRyb2xzLCB3aGljaCBtYXkgb3ZlcmxhcCBvdGhlciBjb250ZW50LiBFeGFtcGxlOiBQcmV2aWV3IEZyYW1lLlxuJGVsZXZhdGlvbi14LXNtYWxsOiAwIDFweCAxcHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAzKSwgMCAxcHggMnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMiksIDAgM3B4IDNweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpLCAwIDRweCA0cHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAxKTtcblxuLy8gRm9yIGNvbXBvbmVudHMgdGhhdCBwcm92aWRlIGNvbnRleHR1YWwgZmVlZGJhY2sgd2l0aG91dCBiZWluZyBpbnRydXNpdmUuIEdlbmVyYWxseSBub24taW50ZXJydXB0aXZlLiBFeGFtcGxlOiBUb29sdGlwcywgU25hY2tiYXIuXG4kZWxldmF0aW9uLXNtYWxsOiAwIDFweCAycHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjA1KSwgMCAycHggM3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNCksIDAgNnB4IDZweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDMpLCAwIDhweCA4cHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAyKTtcblxuLy8gRm9yIGNvbXBvbmVudHMgdGhhdCBvZmZlciBhZGRpdGlvbmFsIGFjdGlvbnMuIEV4YW1wbGU6IE1lbnVzLCBDb21tYW5kIFBhbGV0dGVcbiRlbGV2YXRpb24tbWVkaXVtOiAwIDJweCAzcHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjA1KSwgMCA0cHggNXB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNCksIDAgMTJweCAxMnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMyksIDAgMTZweCAxNnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMik7XG5cbi8vIEZvciBjb21wb25lbnRzIHRoYXQgY29uZmlybSBkZWNpc2lvbnMgb3IgaGFuZGxlIG5lY2Vzc2FyeSBpbnRlcnJ1cHRpb25zLiBFeGFtcGxlOiBNb2RhbHMuXG4kZWxldmF0aW9uLWxhcmdlOiAwIDVweCAxNXB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wOCksIDAgMTVweCAyN3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNyksIDAgMzBweCAzNnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNCksIDAgNTBweCA0M3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMik7XG5cbi8qKlxuICogRGltZW5zaW9ucy5cbiAqL1xuXG4kaWNvbi1zaXplOiAyNHB4O1xuJGJ1dHRvbi1zaXplOiAzNnB4O1xuJGJ1dHRvbi1zaXplLW5leHQtZGVmYXVsdC00MHB4OiA0MHB4OyAvLyB0cmFuc2l0aW9uYXJ5IHZhcmlhYmxlIGZvciBuZXh0IGRlZmF1bHQgYnV0dG9uIHNpemVcbiRidXR0b24tc2l6ZS1zbWFsbDogMjRweDtcbiRidXR0b24tc2l6ZS1jb21wYWN0OiAzMnB4O1xuJGhlYWRlci1oZWlnaHQ6IDY0cHg7XG4kcGFuZWwtaGVhZGVyLWhlaWdodDogJGdyaWQtdW5pdC02MDtcbiRuYXYtc2lkZWJhci13aWR0aDogMzAwcHg7XG4kYWRtaW4tYmFyLWhlaWdodDogMzJweDtcbiRhZG1pbi1iYXItaGVpZ2h0LWJpZzogNDZweDtcbiRhZG1pbi1zaWRlYmFyLXdpZHRoOiAxNjBweDtcbiRhZG1pbi1zaWRlYmFyLXdpZHRoLWJpZzogMTkwcHg7XG4kYWRtaW4tc2lkZWJhci13aWR0aC1jb2xsYXBzZWQ6IDM2cHg7XG4kbW9kYWwtbWluLXdpZHRoOiAzNTBweDtcbiRtb2RhbC13aWR0aC1zbWFsbDogMzg0cHg7XG4kbW9kYWwtd2lkdGgtbWVkaXVtOiA1MTJweDtcbiRtb2RhbC13aWR0aC1sYXJnZTogODQwcHg7XG4kc3Bpbm5lci1zaXplOiAxNnB4O1xuJGNhbnZhcy1wYWRkaW5nOiAkZ3JpZC11bml0LTIwO1xuXG4vKipcbiAqIE1vYmlsZSBzcGVjaWZpYyBzdHlsZXNcbiAqL1xuJG1vYmlsZS10ZXh0LW1pbi1mb250LXNpemU6IDE2cHg7IC8vIEFueSBmb250IHNpemUgYmVsb3cgMTZweCB3aWxsIGNhdXNlIE1vYmlsZSBTYWZhcmkgdG8gXCJ6b29tIGluXCIuXG5cbi8qKlxuICogRWRpdG9yIHN0eWxlcy5cbiAqL1xuXG4kc2lkZWJhci13aWR0aDogMjgwcHg7XG4kY29udGVudC13aWR0aDogODQwcHg7XG4kd2lkZS1jb250ZW50LXdpZHRoOiAxMTAwcHg7XG4kd2lkZ2V0LWFyZWEtd2lkdGg6IDcwMHB4O1xuJHNlY29uZGFyeS1zaWRlYmFyLXdpZHRoOiAzNTBweDtcbiRlZGl0b3ItZm9udC1zaXplOiAxNnB4O1xuJGRlZmF1bHQtYmxvY2stbWFyZ2luOiAyOHB4OyAvLyBUaGlzIHZhbHVlIHByb3ZpZGVzIGEgY29uc2lzdGVudCwgY29udGlndW91cyBzcGFjaW5nIGJldHdlZW4gYmxvY2tzLlxuJHRleHQtZWRpdG9yLWZvbnQtc2l6ZTogMTVweDtcbiRlZGl0b3ItbGluZS1oZWlnaHQ6IDEuODtcbiRlZGl0b3ItaHRtbC1mb250OiAkZm9udC1mYW1pbHktbW9ubztcblxuLyoqXG4gKiBCbG9jayAmIEVkaXRvciBVSS5cbiAqL1xuXG4kYmxvY2stdG9vbGJhci1oZWlnaHQ6ICRncmlkLXVuaXQtNjA7XG4kYm9yZGVyLXdpZHRoOiAxcHg7XG4kYm9yZGVyLXdpZHRoLWZvY3VzLWZhbGxiYWNrOiAycHg7IC8vIFRoaXMgZXhpc3RzIGFzIGEgZmFsbGJhY2ssIGFuZCBpcyBpZGVhbGx5IG92ZXJyaWRkZW4gYnkgdmFyKC0td3AtYWRtaW4tYm9yZGVyLXdpZHRoLWZvY3VzKSB1bmxlc3MgaW4gc29tZSBTQVNTIG1hdGggY2FzZXMuXG4kYm9yZGVyLXdpZHRoLXRhYjogMS41cHg7XG4kaGVscHRleHQtZm9udC1zaXplOiAxMnB4O1xuJHJhZGlvLWlucHV0LXNpemU6IDE2cHg7XG4kcmFkaW8taW5wdXQtc2l6ZS1zbTogMjRweDsgLy8gV2lkdGggJiBoZWlnaHQgZm9yIHNtYWxsIHZpZXdwb3J0cy5cblxuLy8gRGVwcmVjYXRlZCwgcGxlYXNlIGF2b2lkIHVzaW5nIHRoZXNlLlxuJGJsb2NrLXBhZGRpbmc6IDE0cHg7IC8vIFVzZWQgdG8gZGVmaW5lIHNwYWNlIGJldHdlZW4gYmxvY2sgZm9vdHByaW50IGFuZCBzdXJyb3VuZGluZyBib3JkZXJzLlxuJHJhZGl1cy1ibG9jay11aTogJHJhZGl1cy1zbWFsbDtcbiRzaGFkb3ctcG9wb3ZlcjogJGVsZXZhdGlvbi14LXNtYWxsO1xuJHNoYWRvdy1tb2RhbDogJGVsZXZhdGlvbi1sYXJnZTtcbiRkZWZhdWx0LWZvbnQtc2l6ZTogJGZvbnQtc2l6ZS1tZWRpdW07XG5cbi8qKlxuICogQmxvY2sgcGFkZGluZ3MuXG4gKi9cblxuLy8gUGFkZGluZyBmb3IgYmxvY2tzIHdpdGggYSBiYWNrZ3JvdW5kIGNvbG9yIChlLmcuIHBhcmFncmFwaCBvciBncm91cCkuXG4kYmxvY2stYmctcGFkZGluZy0tdjogMS4yNWVtO1xuJGJsb2NrLWJnLXBhZGRpbmctLWg6IDIuMzc1ZW07XG5cblxuLyoqXG4gKiBSZWFjdCBOYXRpdmUgc3BlY2lmaWMuXG4gKiBUaGVzZSB2YXJpYWJsZXMgZG8gbm90IGFwcGVhciB0byBiZSB1c2VkIGFueXdoZXJlIGVsc2UuXG4gKi9cblxuLy8gRGltZW5zaW9ucy5cbiRtb2JpbGUtaGVhZGVyLXRvb2xiYXItaGVpZ2h0OiA0NHB4O1xuJG1vYmlsZS1oZWFkZXItdG9vbGJhci1leHBhbmRlZC1oZWlnaHQ6IDUycHg7XG4kbW9iaWxlLWZsb2F0aW5nLXRvb2xiYXItaGVpZ2h0OiA0NHB4O1xuJG1vYmlsZS1mbG9hdGluZy10b29sYmFyLW1hcmdpbjogOHB4O1xuJG1vYmlsZS1jb2xvci1zd2F0Y2g6IDQ4cHg7XG5cbi8vIEJsb2NrIFVJLlxuJG1vYmlsZS1ibG9jay10b29sYmFyLWhlaWdodDogNDRweDtcbiRkaW1tZWQtb3BhY2l0eTogMTtcbiRibG9jay1lZGdlLXRvLWNvbnRlbnQ6IDE2cHg7XG4kc29saWQtYm9yZGVyLXNwYWNlOiAxMnB4O1xuJGRhc2hlZC1ib3JkZXItc3BhY2U6IDZweDtcbiRibG9jay1zZWxlY3RlZC1tYXJnaW46IDNweDtcbiRibG9jay1zZWxlY3RlZC1ib3JkZXItd2lkdGg6IDFweDtcbiRibG9jay1zZWxlY3RlZC1wYWRkaW5nOiAwO1xuJGJsb2NrLXNlbGVjdGVkLWNoaWxkLW1hcmdpbjogNXB4O1xuJGJsb2NrLXNlbGVjdGVkLXRvLWNvbnRlbnQ6ICRibG9jay1lZGdlLXRvLWNvbnRlbnQgLSAkYmxvY2stc2VsZWN0ZWQtbWFyZ2luIC0gJGJsb2NrLXNlbGVjdGVkLWJvcmRlci13aWR0aDtcbiIsIi8qKlxuICogQ29sb3JzXG4gKi9cblxuLy8gV29yZFByZXNzIGdyYXlzLlxuJGJsYWNrOiAjMDAwO1x0XHRcdC8vIFVzZSBvbmx5IHdoZW4geW91IHRydWx5IG5lZWQgcHVyZSBibGFjay4gRm9yIFVJLCB1c2UgJGdyYXktOTAwLlxuJGdyYXktOTAwOiAjMWUxZTFlO1xuJGdyYXktODAwOiAjMmYyZjJmO1xuJGdyYXktNzAwOiAjNzU3NTc1O1x0XHQvLyBNZWV0cyA0LjY6MSAoNC41OjEgaXMgbWluaW11bSkgdGV4dCBjb250cmFzdCBhZ2FpbnN0IHdoaXRlLlxuJGdyYXktNjAwOiAjOTQ5NDk0O1x0XHQvLyBNZWV0cyAzOjEgVUkgb3IgbGFyZ2UgdGV4dCBjb250cmFzdCBhZ2FpbnN0IHdoaXRlLlxuJGdyYXktNDAwOiAjY2NjO1xuJGdyYXktMzAwOiAjZGRkO1x0XHQvLyBVc2VkIGZvciBtb3N0IGJvcmRlcnMuXG4kZ3JheS0yMDA6ICNlMGUwZTA7XHRcdC8vIFVzZWQgc3BhcmluZ2x5IGZvciBsaWdodCBib3JkZXJzLlxuJGdyYXktMTAwOiAjZjBmMGYwO1x0XHQvLyBVc2VkIGZvciBsaWdodCBncmF5IGJhY2tncm91bmRzLlxuJHdoaXRlOiAjZmZmO1xuXG4vLyBPcGFjaXRpZXMgJiBhZGRpdGlvbmFsIGNvbG9ycy5cbiRkYXJrLWdyYXktcGxhY2Vob2xkZXI6IHJnYmEoJGdyYXktOTAwLCAwLjYyKTtcbiRtZWRpdW0tZ3JheS1wbGFjZWhvbGRlcjogcmdiYSgkZ3JheS05MDAsIDAuNTUpO1xuJGxpZ2h0LWdyYXktcGxhY2Vob2xkZXI6IHJnYmEoJHdoaXRlLCAwLjY1KTtcblxuLy8gQWxlcnQgY29sb3JzLlxuJGFsZXJ0LXllbGxvdzogI2YwYjg0OTtcbiRhbGVydC1yZWQ6ICNjYzE4MTg7XG4kYWxlcnQtZ3JlZW46ICM0YWI4NjY7XG5cbi8vIERlcHJlY2F0ZWQsIHBsZWFzZSBhdm9pZCB1c2luZyB0aGVzZS5cbiRkYXJrLXRoZW1lLWZvY3VzOiAkd2hpdGU7XHQvLyBGb2N1cyBjb2xvciB3aGVuIHRoZSB0aGVtZSBpcyBkYXJrLlxuIiwiQHVzZSBcIkB3b3JkcHJlc3MvYmFzZS1zdHlsZXMvdmFyaWFibGVzXCI7XG5cbi5ib290LWRyb3Bkb3duLWl0ZW1fX2NoaWxkcmVuIHtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuXHQvLyBJbiBvcmRlciB0byBhdm9pZCB0aGUgZm9jdXMgcmluZyBvZiBlYWNoIGxpc3QgaXRlbSBmcm9tIGJlaW5nIGN1dCBvZmYsXG5cdC8vIHdlIGFkZCBwYWRkaW5nIGFyb3VuZCB0aGUgbWVudSBpdGVtcy5cblx0Ly8gQXQgdGhlIHNhbWUgdGltZSwgd2UgdXNlIHRoZSBzYW1lIHZhbHVlIHRvIHR3ZWFrIG1hcmdpbnMgc28gdGhhdFxuXHQvLyB0aGUgaXRlbXMgc3RpbGwgcmV0YWluIHRoZSBzYW1lIHBvc2l0aW9uIGFuZCBmb290cHJpbnQuXG5cdCRwYWRkaW5nLXRvLWF2b2lkLWN1dHRpbmctZm9jdXMtcmluZzogMnB4O1xuXHRwYWRkaW5nOiAkcGFkZGluZy10by1hdm9pZC1jdXR0aW5nLWZvY3VzLXJpbmc7XG5cdG1hcmdpbi1ibG9jay1zdGFydDogLSRwYWRkaW5nLXRvLWF2b2lkLWN1dHRpbmctZm9jdXMtcmluZztcblx0bWFyZ2luLWJsb2NrLWVuZDogJHBhZGRpbmctdG8tYXZvaWQtY3V0dGluZy1mb2N1cy1yaW5nO1xuXHRtYXJnaW4taW5saW5lLXN0YXJ0OlxuXHRcdHZhcmlhYmxlcy4kZ3JpZC11bml0LTQwIC1cblx0XHQkcGFkZGluZy10by1hdm9pZC1jdXR0aW5nLWZvY3VzLXJpbmc7XG5cdG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5ib290LWRyb3Bkb3duLWl0ZW1fX2NoZXZyb24uaXMtdXAge1xuXHR0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xufVxuIl19 */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+
+// packages/boot/src/components/navigation/dropdown-item/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ANIMATION_DURATION = 0.2;
+function DropdownItem({
+  className,
+  id,
+  icon,
+  children,
+  isExpanded,
+  onToggle
+}) {
+  const menuItems = useSelect(
+    (select) => (
+      // @ts-ignore
+      select(STORE_NAME).getMenuItems()
+    ),
+    []
+  );
+  const items = menuItems.filter((item) => item.parent === id);
+  const disableMotion = useReducedMotion();
+  return /* @__PURE__ */ jsxs("div", { className: "boot-dropdown-item", children: [
+    /* @__PURE__ */ jsx(
+      Item,
+      {
+        className: clsx("boot-navigation-item", className),
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onToggle();
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            justify: "flex-start",
+            spacing: 2,
+            style: { flexGrow: "1" },
+            children: [
+              wrapIcon(icon, false),
+              /* @__PURE__ */ jsx(FlexBlock, { children }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: chevronDownSmall,
+                  className: clsx("boot-dropdown-item__chevron", {
+                    "is-up": isExpanded
+                  })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0 },
+        animate: { height: "auto" },
+        exit: { height: 0 },
+        transition: {
+          type: "tween",
+          duration: disableMotion ? 0 : ANIMATION_DURATION,
+          ease: "easeOut"
+        },
+        className: "boot-dropdown-item__children",
+        children: items.map((item, index) => /* @__PURE__ */ jsx(
+          NavigationItem,
+          {
+            to: item.to,
+            shouldShowPlaceholder: false,
+            children: item.label
+          },
+          index
+        ))
+      }
+    ) })
+  ] });
+}
+export {
+  DropdownItem as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/navigation/dropdown-item/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/navigation/dropdown-item/index.tsx", "../../../../src/components/navigation/dropdown-item/style.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalItem as Item,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n\tIcon,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { chevronDownSmall } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../../store';\nimport NavigationItem from '../navigation-item';\nimport { wrapIcon } from '../items';\nimport type { IconType, MenuItem } from '../../../store/types';\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.2;\n\ninterface DropdownItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Identifier of the parent menu item.\n\t */\n\tid: string;\n\t/**\n\t * Icon to display with the dropdown item.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Whether to show placeholder icons for alignment.\n\t */\n\tshouldShowPlaceholder?: boolean;\n\t/**\n\t * Content to display inside the dropdown item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Whether this dropdown is currently expanded.\n\t */\n\tisExpanded: boolean;\n\t/**\n\t * Function to toggle this dropdown's expanded state.\n\t */\n\tonToggle: () => void;\n}\n\nexport default function DropdownItem( {\n\tclassName,\n\tid,\n\ticon,\n\tchildren,\n\tisExpanded,\n\tonToggle,\n}: DropdownItemProps ) {\n\tconst menuItems: MenuItem[] = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems(),\n\t\t[]\n\t);\n\tconst items = menuItems.filter( ( item ) => item.parent === id );\n\tconst disableMotion = useReducedMotion();\n\treturn (\n\t\t<div className=\"boot-dropdown-item\">\n\t\t\t<Item\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonToggle();\n\t\t\t\t} }\n\t\t\t\tonMouseDown={ ( e ) => e.preventDefault() }\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tstyle={ { flexGrow: '1' } }\n\t\t\t\t>\n\t\t\t\t\t{ wrapIcon( icon, false ) }\n\t\t\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronDownSmall }\n\t\t\t\t\t\tclassName={ clsx( 'boot-dropdown-item__chevron', {\n\t\t\t\t\t\t\t'is-up': isExpanded,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</Item>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ { height: 0 } }\n\t\t\t\t\t\tanimate={ { height: 'auto' } }\n\t\t\t\t\t\texit={ { height: 0 } }\n\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tclassName=\"boot-dropdown-item__children\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ false }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.boot-dropdown-item__children {\n  display: flex;\n  flex-direction: column;\n  padding: 2px;\n  margin-block-start: -2px;\n  margin-block-end: 2px;\n  margin-inline-start: 30px;\n  overflow: hidden;\n}\n\n.boot-dropdown-item__chevron.is-up {\n  transform: rotate(180deg);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZ3V0ZW5iZXJnL2d1dGVuYmVyZy9wdWJsaXNoL3BhY2thZ2VzL2Jvb3Qvc3JjL2NvbXBvbmVudHMvbmF2aWdhdGlvbi9kcm9wZG93bi1pdGVtIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fdmFyaWFibGVzLnNjc3MiLCIuLi8uLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fY29sb3JzLnNjc3MiLCJzdHlsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FDQUE7QUFBQTtBQUFBO0FEVUE7QUFBQTtBQUFBO0FBT0E7QUFBQTtBQUFBO0FBNkJBO0FBQUE7QUFBQTtBQUFBO0FBaUJBO0FBQUE7QUFBQTtBQVdBO0FBQUE7QUFBQTtBQWdCQTtBQUFBO0FBQUE7QUF3QkE7QUFBQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBZUE7QUFBQTtBQUFBO0FBbUJBO0FBQUE7QUFBQTtBQVNBO0FBQUE7QUFBQTtBQUFBO0FFaEtBO0VBQ0M7RUFDQTtFQU9BLFNBRHNDO0VBRXRDO0VBQ0Esa0JBSHNDO0VBSXRDLHFCQUNDO0VBRUQ7OztBQUdEO0VBQ0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFNDU1MgVmFyaWFibGVzLlxuICpcbiAqIFBsZWFzZSB1c2UgdmFyaWFibGVzIGZyb20gdGhpcyBzaGVldCB0byBlbnN1cmUgY29uc2lzdGVuY3kgYWNyb3NzIHRoZSBVSS5cbiAqIERvbid0IGFkZCB0byB0aGlzIHNoZWV0IHVubGVzcyB5b3UncmUgcHJldHR5IHN1cmUgdGhlIHZhbHVlIHdpbGwgYmUgcmV1c2VkIGluIG1hbnkgcGxhY2VzLlxuICogRm9yIGV4YW1wbGUsIGRvbid0IGFkZCBydWxlcyB0byB0aGlzIHNoZWV0IHRoYXQgYWZmZWN0IGJsb2NrIHZpc3VhbHMuIEl0J3MgcHVyZWx5IGZvciBVSS5cbiAqL1xuXG5AdXNlIFwiLi9jb2xvcnNcIjtcblxuLyoqXG4gKiBGb250cyAmIGJhc2ljIHZhcmlhYmxlcy5cbiAqL1xuXG4kZGVmYXVsdC1mb250OiAtYXBwbGUtc3lzdGVtLCBCbGlua01hY1N5c3RlbUZvbnQsXCJTZWdvZSBVSVwiLCBSb2JvdG8sIE94eWdlbi1TYW5zLCBVYnVudHUsIENhbnRhcmVsbCxcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7IC8vIFRvZG86IGRlcHJlY2F0ZSBpbiBmYXZvciBvZiAkZmFtaWx5IHZhcmlhYmxlc1xuJGRlZmF1bHQtbGluZS1oZWlnaHQ6IDEuNDsgLy8gVG9kbzogZGVwcmVjYXRlIGluIGZhdm9yIG9mICRsaW5lLWhlaWdodCB0b2tlbnNcblxuLyoqXG4gKiBUeXBvZ3JhcGh5XG4gKi9cblxuLy8gU2l6ZXNcbiRmb250LXNpemUteC1zbWFsbDogMTFweDtcbiRmb250LXNpemUtc21hbGw6IDEycHg7XG4kZm9udC1zaXplLW1lZGl1bTogMTNweDtcbiRmb250LXNpemUtbGFyZ2U6IDE1cHg7XG4kZm9udC1zaXplLXgtbGFyZ2U6IDIwcHg7XG4kZm9udC1zaXplLTJ4LWxhcmdlOiAzMnB4O1xuXG4vLyBMaW5lIGhlaWdodHNcbiRmb250LWxpbmUtaGVpZ2h0LXgtc21hbGw6IDE2cHg7XG4kZm9udC1saW5lLWhlaWdodC1zbWFsbDogMjBweDtcbiRmb250LWxpbmUtaGVpZ2h0LW1lZGl1bTogMjRweDtcbiRmb250LWxpbmUtaGVpZ2h0LWxhcmdlOiAyOHB4O1xuJGZvbnQtbGluZS1oZWlnaHQteC1sYXJnZTogMzJweDtcbiRmb250LWxpbmUtaGVpZ2h0LTJ4LWxhcmdlOiA0MHB4O1xuXG4vLyBXZWlnaHRzXG4kZm9udC13ZWlnaHQtcmVndWxhcjogNDAwO1xuJGZvbnQtd2VpZ2h0LW1lZGl1bTogNDk5OyAvLyBlbnN1cmVzIGZhbGxiYWNrIHRvIDQwMCAoaW5zdGVhZCBvZiA2MDApXG5cbi8vIEZhbWlsaWVzXG4kZm9udC1mYW1pbHktaGVhZGluZ3M6IC1hcHBsZS1zeXN0ZW0sIFwic3lzdGVtLXVpXCIsIFwiU2Vnb2UgVUlcIiwgUm9ib3RvLCBPeHlnZW4tU2FucywgVWJ1bnR1LCBDYW50YXJlbGwsIFwiSGVsdmV0aWNhIE5ldWVcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1ib2R5OiAtYXBwbGUtc3lzdGVtLCBcInN5c3RlbS11aVwiLCBcIlNlZ29lIFVJXCIsIFJvYm90bywgT3h5Z2VuLVNhbnMsIFVidW50dSwgQ2FudGFyZWxsLCBcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7XG4kZm9udC1mYW1pbHktbW9ubzogTWVubG8sIENvbnNvbGFzLCBtb25hY28sIG1vbm9zcGFjZTtcblxuLyoqXG4gKiBHcmlkIFN5c3RlbS5cbiAqIGh0dHBzOi8vbWFrZS53b3JkcHJlc3Mub3JnL2Rlc2lnbi8yMDE5LzEwLzMxL3Byb3Bvc2FsLWEtY29uc2lzdGVudC1zcGFjaW5nLXN5c3RlbS1mb3Itd29yZHByZXNzL1xuICovXG5cbiRncmlkLXVuaXQ6IDhweDtcbiRncmlkLXVuaXQtMDU6IDAuNSAqICRncmlkLXVuaXQ7XHQvLyA0cHhcbiRncmlkLXVuaXQtMTA6IDEgKiAkZ3JpZC11bml0O1x0XHQvLyA4cHhcbiRncmlkLXVuaXQtMTU6IDEuNSAqICRncmlkLXVuaXQ7XHQvLyAxMnB4XG4kZ3JpZC11bml0LTIwOiAyICogJGdyaWQtdW5pdDtcdFx0Ly8gMTZweFxuJGdyaWQtdW5pdC0zMDogMyAqICRncmlkLXVuaXQ7XHRcdC8vIDI0cHhcbiRncmlkLXVuaXQtNDA6IDQgKiAkZ3JpZC11bml0O1x0XHQvLyAzMnB4XG4kZ3JpZC11bml0LTUwOiA1ICogJGdyaWQtdW5pdDtcdFx0Ly8gNDBweFxuJGdyaWQtdW5pdC02MDogNiAqICRncmlkLXVuaXQ7XHRcdC8vIDQ4cHhcbiRncmlkLXVuaXQtNzA6IDcgKiAkZ3JpZC11bml0O1x0XHQvLyA1NnB4XG4kZ3JpZC11bml0LTgwOiA4ICogJGdyaWQtdW5pdDtcdFx0Ly8gNjRweFxuXG4vKipcbiAqIFJhZGl1cyBzY2FsZS5cbiAqL1xuXG4kcmFkaXVzLXgtc21hbGw6IDFweDsgICAvLyBBcHBsaWVkIHRvIGVsZW1lbnRzIGxpa2UgYnV0dG9ucyBuZXN0ZWQgd2l0aGluIHByaW1pdGl2ZXMgbGlrZSBpbnB1dHMuXG4kcmFkaXVzLXNtYWxsOiAycHg7ICAgICAvLyBBcHBsaWVkIHRvIG1vc3QgcHJpbWl0aXZlcy5cbiRyYWRpdXMtbWVkaXVtOiA0cHg7ICAgIC8vIEFwcGxpZWQgdG8gY29udGFpbmVycyB3aXRoIHNtYWxsZXIgcGFkZGluZy5cbiRyYWRpdXMtbGFyZ2U6IDhweDsgICAgIC8vIEFwcGxpZWQgdG8gY29udGFpbmVycyB3aXRoIGxhcmdlciBwYWRkaW5nLlxuJHJhZGl1cy1mdWxsOiA5OTk5cHg7ICAgLy8gRm9yIHBpbGxzLlxuJHJhZGl1cy1yb3VuZDogNTAlOyAgICAgLy8gRm9yIGNpcmNsZXMgYW5kIG92YWxzLlxuXG4vKipcbiAqIEVsZXZhdGlvbiBzY2FsZS5cbiAqL1xuXG4vLyBGb3Igc2VjdGlvbnMgYW5kIGNvbnRhaW5lcnMgdGhhdCBncm91cCByZWxhdGVkIGNvbnRlbnQgYW5kIGNvbnRyb2xzLCB3aGljaCBtYXkgb3ZlcmxhcCBvdGhlciBjb250ZW50LiBFeGFtcGxlOiBQcmV2aWV3IEZyYW1lLlxuJGVsZXZhdGlvbi14LXNtYWxsOiAwIDFweCAxcHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAzKSwgMCAxcHggMnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMiksIDAgM3B4IDNweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpLCAwIDRweCA0cHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAxKTtcblxuLy8gRm9yIGNvbXBvbmVudHMgdGhhdCBwcm92aWRlIGNvbnRleHR1YWwgZmVlZGJhY2sgd2l0aG91dCBiZWluZyBpbnRydXNpdmUuIEdlbmVyYWxseSBub24taW50ZXJydXB0aXZlLiBFeGFtcGxlOiBUb29sdGlwcywgU25hY2tiYXIuXG4kZWxldmF0aW9uLXNtYWxsOiAwIDFweCAycHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjA1KSwgMCAycHggM3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNCksIDAgNnB4IDZweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDMpLCAwIDhweCA4cHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAyKTtcblxuLy8gRm9yIGNvbXBvbmVudHMgdGhhdCBvZmZlciBhZGRpdGlvbmFsIGFjdGlvbnMuIEV4YW1wbGU6IE1lbnVzLCBDb21tYW5kIFBhbGV0dGVcbiRlbGV2YXRpb24tbWVkaXVtOiAwIDJweCAzcHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjA1KSwgMCA0cHggNXB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNCksIDAgMTJweCAxMnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMyksIDAgMTZweCAxNnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMik7XG5cbi8vIEZvciBjb21wb25lbnRzIHRoYXQgY29uZmlybSBkZWNpc2lvbnMgb3IgaGFuZGxlIG5lY2Vzc2FyeSBpbnRlcnJ1cHRpb25zLiBFeGFtcGxlOiBNb2RhbHMuXG4kZWxldmF0aW9uLWxhcmdlOiAwIDVweCAxNXB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wOCksIDAgMTVweCAyN3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNyksIDAgMzBweCAzNnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNCksIDAgNTBweCA0M3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMik7XG5cbi8qKlxuICogRGltZW5zaW9ucy5cbiAqL1xuXG4kaWNvbi1zaXplOiAyNHB4O1xuJGJ1dHRvbi1zaXplOiAzNnB4O1xuJGJ1dHRvbi1zaXplLW5leHQtZGVmYXVsdC00MHB4OiA0MHB4OyAvLyB0cmFuc2l0aW9uYXJ5IHZhcmlhYmxlIGZvciBuZXh0IGRlZmF1bHQgYnV0dG9uIHNpemVcbiRidXR0b24tc2l6ZS1zbWFsbDogMjRweDtcbiRidXR0b24tc2l6ZS1jb21wYWN0OiAzMnB4O1xuJGhlYWRlci1oZWlnaHQ6IDY0cHg7XG4kcGFuZWwtaGVhZGVyLWhlaWdodDogJGdyaWQtdW5pdC02MDtcbiRuYXYtc2lkZWJhci13aWR0aDogMzAwcHg7XG4kYWRtaW4tYmFyLWhlaWdodDogMzJweDtcbiRhZG1pbi1iYXItaGVpZ2h0LWJpZzogNDZweDtcbiRhZG1pbi1zaWRlYmFyLXdpZHRoOiAxNjBweDtcbiRhZG1pbi1zaWRlYmFyLXdpZHRoLWJpZzogMTkwcHg7XG4kYWRtaW4tc2lkZWJhci13aWR0aC1jb2xsYXBzZWQ6IDM2cHg7XG4kbW9kYWwtbWluLXdpZHRoOiAzNTBweDtcbiRtb2RhbC13aWR0aC1zbWFsbDogMzg0cHg7XG4kbW9kYWwtd2lkdGgtbWVkaXVtOiA1MTJweDtcbiRtb2RhbC13aWR0aC1sYXJnZTogODQwcHg7XG4kc3Bpbm5lci1zaXplOiAxNnB4O1xuJGNhbnZhcy1wYWRkaW5nOiAkZ3JpZC11bml0LTIwO1xuXG4vKipcbiAqIE1vYmlsZSBzcGVjaWZpYyBzdHlsZXNcbiAqL1xuJG1vYmlsZS10ZXh0LW1pbi1mb250LXNpemU6IDE2cHg7IC8vIEFueSBmb250IHNpemUgYmVsb3cgMTZweCB3aWxsIGNhdXNlIE1vYmlsZSBTYWZhcmkgdG8gXCJ6b29tIGluXCIuXG5cbi8qKlxuICogRWRpdG9yIHN0eWxlcy5cbiAqL1xuXG4kc2lkZWJhci13aWR0aDogMjgwcHg7XG4kY29udGVudC13aWR0aDogODQwcHg7XG4kd2lkZS1jb250ZW50LXdpZHRoOiAxMTAwcHg7XG4kd2lkZ2V0LWFyZWEtd2lkdGg6IDcwMHB4O1xuJHNlY29uZGFyeS1zaWRlYmFyLXdpZHRoOiAzNTBweDtcbiRlZGl0b3ItZm9udC1zaXplOiAxNnB4O1xuJGRlZmF1bHQtYmxvY2stbWFyZ2luOiAyOHB4OyAvLyBUaGlzIHZhbHVlIHByb3ZpZGVzIGEgY29uc2lzdGVudCwgY29udGlndW91cyBzcGFjaW5nIGJldHdlZW4gYmxvY2tzLlxuJHRleHQtZWRpdG9yLWZvbnQtc2l6ZTogMTVweDtcbiRlZGl0b3ItbGluZS1oZWlnaHQ6IDEuODtcbiRlZGl0b3ItaHRtbC1mb250OiAkZm9udC1mYW1pbHktbW9ubztcblxuLyoqXG4gKiBCbG9jayAmIEVkaXRvciBVSS5cbiAqL1xuXG4kYmxvY2stdG9vbGJhci1oZWlnaHQ6ICRncmlkLXVuaXQtNjA7XG4kYm9yZGVyLXdpZHRoOiAxcHg7XG4kYm9yZGVyLXdpZHRoLWZvY3VzLWZhbGxiYWNrOiAycHg7IC8vIFRoaXMgZXhpc3RzIGFzIGEgZmFsbGJhY2ssIGFuZCBpcyBpZGVhbGx5IG92ZXJyaWRkZW4gYnkgdmFyKC0td3AtYWRtaW4tYm9yZGVyLXdpZHRoLWZvY3VzKSB1bmxlc3MgaW4gc29tZSBTQVNTIG1hdGggY2FzZXMuXG4kYm9yZGVyLXdpZHRoLXRhYjogMS41cHg7XG4kaGVscHRleHQtZm9udC1zaXplOiAxMnB4O1xuJHJhZGlvLWlucHV0LXNpemU6IDE2cHg7XG4kcmFkaW8taW5wdXQtc2l6ZS1zbTogMjRweDsgLy8gV2lkdGggJiBoZWlnaHQgZm9yIHNtYWxsIHZpZXdwb3J0cy5cblxuLy8gRGVwcmVjYXRlZCwgcGxlYXNlIGF2b2lkIHVzaW5nIHRoZXNlLlxuJGJsb2NrLXBhZGRpbmc6IDE0cHg7IC8vIFVzZWQgdG8gZGVmaW5lIHNwYWNlIGJldHdlZW4gYmxvY2sgZm9vdHByaW50IGFuZCBzdXJyb3VuZGluZyBib3JkZXJzLlxuJHJhZGl1cy1ibG9jay11aTogJHJhZGl1cy1zbWFsbDtcbiRzaGFkb3ctcG9wb3ZlcjogJGVsZXZhdGlvbi14LXNtYWxsO1xuJHNoYWRvdy1tb2RhbDogJGVsZXZhdGlvbi1sYXJnZTtcbiRkZWZhdWx0LWZvbnQtc2l6ZTogJGZvbnQtc2l6ZS1tZWRpdW07XG5cbi8qKlxuICogQmxvY2sgcGFkZGluZ3MuXG4gKi9cblxuLy8gUGFkZGluZyBmb3IgYmxvY2tzIHdpdGggYSBiYWNrZ3JvdW5kIGNvbG9yIChlLmcuIHBhcmFncmFwaCBvciBncm91cCkuXG4kYmxvY2stYmctcGFkZGluZy0tdjogMS4yNWVtO1xuJGJsb2NrLWJnLXBhZGRpbmctLWg6IDIuMzc1ZW07XG5cblxuLyoqXG4gKiBSZWFjdCBOYXRpdmUgc3BlY2lmaWMuXG4gKiBUaGVzZSB2YXJpYWJsZXMgZG8gbm90IGFwcGVhciB0byBiZSB1c2VkIGFueXdoZXJlIGVsc2UuXG4gKi9cblxuLy8gRGltZW5zaW9ucy5cbiRtb2JpbGUtaGVhZGVyLXRvb2xiYXItaGVpZ2h0OiA0NHB4O1xuJG1vYmlsZS1oZWFkZXItdG9vbGJhci1leHBhbmRlZC1oZWlnaHQ6IDUycHg7XG4kbW9iaWxlLWZsb2F0aW5nLXRvb2xiYXItaGVpZ2h0OiA0NHB4O1xuJG1vYmlsZS1mbG9hdGluZy10b29sYmFyLW1hcmdpbjogOHB4O1xuJG1vYmlsZS1jb2xvci1zd2F0Y2g6IDQ4cHg7XG5cbi8vIEJsb2NrIFVJLlxuJG1vYmlsZS1ibG9jay10b29sYmFyLWhlaWdodDogNDRweDtcbiRkaW1tZWQtb3BhY2l0eTogMTtcbiRibG9jay1lZGdlLXRvLWNvbnRlbnQ6IDE2cHg7XG4kc29saWQtYm9yZGVyLXNwYWNlOiAxMnB4O1xuJGRhc2hlZC1ib3JkZXItc3BhY2U6IDZweDtcbiRibG9jay1zZWxlY3RlZC1tYXJnaW46IDNweDtcbiRibG9jay1zZWxlY3RlZC1ib3JkZXItd2lkdGg6IDFweDtcbiRibG9jay1zZWxlY3RlZC1wYWRkaW5nOiAwO1xuJGJsb2NrLXNlbGVjdGVkLWNoaWxkLW1hcmdpbjogNXB4O1xuJGJsb2NrLXNlbGVjdGVkLXRvLWNvbnRlbnQ6ICRibG9jay1lZGdlLXRvLWNvbnRlbnQgLSAkYmxvY2stc2VsZWN0ZWQtbWFyZ2luIC0gJGJsb2NrLXNlbGVjdGVkLWJvcmRlci13aWR0aDtcbiIsIi8qKlxuICogQ29sb3JzXG4gKi9cblxuLy8gV29yZFByZXNzIGdyYXlzLlxuJGJsYWNrOiAjMDAwO1x0XHRcdC8vIFVzZSBvbmx5IHdoZW4geW91IHRydWx5IG5lZWQgcHVyZSBibGFjay4gRm9yIFVJLCB1c2UgJGdyYXktOTAwLlxuJGdyYXktOTAwOiAjMWUxZTFlO1xuJGdyYXktODAwOiAjMmYyZjJmO1xuJGdyYXktNzAwOiAjNzU3NTc1O1x0XHQvLyBNZWV0cyA0LjY6MSAoNC41OjEgaXMgbWluaW11bSkgdGV4dCBjb250cmFzdCBhZ2FpbnN0IHdoaXRlLlxuJGdyYXktNjAwOiAjOTQ5NDk0O1x0XHQvLyBNZWV0cyAzOjEgVUkgb3IgbGFyZ2UgdGV4dCBjb250cmFzdCBhZ2FpbnN0IHdoaXRlLlxuJGdyYXktNDAwOiAjY2NjO1xuJGdyYXktMzAwOiAjZGRkO1x0XHQvLyBVc2VkIGZvciBtb3N0IGJvcmRlcnMuXG4kZ3JheS0yMDA6ICNlMGUwZTA7XHRcdC8vIFVzZWQgc3BhcmluZ2x5IGZvciBsaWdodCBib3JkZXJzLlxuJGdyYXktMTAwOiAjZjBmMGYwO1x0XHQvLyBVc2VkIGZvciBsaWdodCBncmF5IGJhY2tncm91bmRzLlxuJHdoaXRlOiAjZmZmO1xuXG4vLyBPcGFjaXRpZXMgJiBhZGRpdGlvbmFsIGNvbG9ycy5cbiRkYXJrLWdyYXktcGxhY2Vob2xkZXI6IHJnYmEoJGdyYXktOTAwLCAwLjYyKTtcbiRtZWRpdW0tZ3JheS1wbGFjZWhvbGRlcjogcmdiYSgkZ3JheS05MDAsIDAuNTUpO1xuJGxpZ2h0LWdyYXktcGxhY2Vob2xkZXI6IHJnYmEoJHdoaXRlLCAwLjY1KTtcblxuLy8gQWxlcnQgY29sb3JzLlxuJGFsZXJ0LXllbGxvdzogI2YwYjg0OTtcbiRhbGVydC1yZWQ6ICNjYzE4MTg7XG4kYWxlcnQtZ3JlZW46ICM0YWI4NjY7XG5cbi8vIERlcHJlY2F0ZWQsIHBsZWFzZSBhdm9pZCB1c2luZyB0aGVzZS5cbiRkYXJrLXRoZW1lLWZvY3VzOiAkd2hpdGU7XHQvLyBGb2N1cyBjb2xvciB3aGVuIHRoZSB0aGVtZSBpcyBkYXJrLlxuIiwiQHVzZSBcIkB3b3JkcHJlc3MvYmFzZS1zdHlsZXMvdmFyaWFibGVzXCI7XG5cbi5ib290LWRyb3Bkb3duLWl0ZW1fX2NoaWxkcmVuIHtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuXHQvLyBJbiBvcmRlciB0byBhdm9pZCB0aGUgZm9jdXMgcmluZyBvZiBlYWNoIGxpc3QgaXRlbSBmcm9tIGJlaW5nIGN1dCBvZmYsXG5cdC8vIHdlIGFkZCBwYWRkaW5nIGFyb3VuZCB0aGUgbWVudSBpdGVtcy5cblx0Ly8gQXQgdGhlIHNhbWUgdGltZSwgd2UgdXNlIHRoZSBzYW1lIHZhbHVlIHRvIHR3ZWFrIG1hcmdpbnMgc28gdGhhdFxuXHQvLyB0aGUgaXRlbXMgc3RpbGwgcmV0YWluIHRoZSBzYW1lIHBvc2l0aW9uIGFuZCBmb290cHJpbnQuXG5cdCRwYWRkaW5nLXRvLWF2b2lkLWN1dHRpbmctZm9jdXMtcmluZzogMnB4O1xuXHRwYWRkaW5nOiAkcGFkZGluZy10by1hdm9pZC1jdXR0aW5nLWZvY3VzLXJpbmc7XG5cdG1hcmdpbi1ibG9jay1zdGFydDogLSRwYWRkaW5nLXRvLWF2b2lkLWN1dHRpbmctZm9jdXMtcmluZztcblx0bWFyZ2luLWJsb2NrLWVuZDogJHBhZGRpbmctdG8tYXZvaWQtY3V0dGluZy1mb2N1cy1yaW5nO1xuXHRtYXJnaW4taW5saW5lLXN0YXJ0OlxuXHRcdHZhcmlhYmxlcy4kZ3JpZC11bml0LTQwIC1cblx0XHQkcGFkZGluZy10by1hdm9pZC1jdXR0aW5nLWZvY3VzLXJpbmc7XG5cdG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5ib290LWRyb3Bkb3duLWl0ZW1fX2NoZXZyb24uaXMtdXAge1xuXHR0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xufVxuIl19 */`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,EACxB;AAAA,EACA,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,OACvB;AACP,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;;;AC3BzB,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;;;AD8BzC,SAMC,KAND;AA5DJ,IAAM,qBAAqB;AAiCZ,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,YAAwB;AAAA,IAC7B,CAAE;AAAA;AAAA,MAED,OAAQ,UAAW,EAAE,aAAa;AAAA;AAAA,IACnC,CAAC;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,OAAQ,CAAE,SAAU,KAAK,WAAW,EAAG;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,SACC,qBAAC,SAAI,WAAU,sBACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM,wBAAwB,SAAU;AAAA,QACpD,SAAU,CAAE,MAAO;AAClB,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB,mBAAS;AAAA,QACV;AAAA,QACA,aAAc,CAAE,MAAO,EAAE,eAAe;AAAA,QAExC;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,SAAU;AAAA,YACV,OAAQ,EAAE,UAAU,IAAI;AAAA,YAEtB;AAAA,uBAAU,MAAM,KAAM;AAAA,cACxB,oBAAC,aAAY,UAAU;AAAA,cACvB;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAO;AAAA,kBACP,WAAY,KAAM,+BAA+B;AAAA,oBAChD,SAAS;AAAA,kBACV,CAAE;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,mBAAgB,SAAU,OACxB,wBACD;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,SAAU,EAAE,QAAQ,EAAE;AAAA,QACtB,SAAU,EAAE,QAAQ,OAAO;AAAA,QAC3B,MAAO,EAAE,QAAQ,EAAE;AAAA,QACnB,YAAa;AAAA,UACZ,MAAM;AAAA,UACN,UAAU,gBAAgB,IAAI;AAAA,UAC9B,MAAM;AAAA,QACP;AAAA,QACA,WAAU;AAAA,QAER,gBAAM,IAAK,CAAE,MAAM,UACpB;AAAA,UAAC;AAAA;AAAA,YAEA,IAAK,KAAK;AAAA,YACV,uBAAwB;AAAA,YAEtB,eAAK;AAAA;AAAA,UAJD;AAAA,QAKP,CACC;AAAA;AAAA,IACH,GAEF;AAAA,KACD;AAEF;",
+  "names": []
+}

package/build-module/components/navigation/index.js

@@ -0,0 +1,101 @@
+// packages/boot/src/components/navigation/index.tsx
+import { useState, useMemo, useRef } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { STORE_NAME } from "../../store";
+import NavigationItem from "./navigation-item";
+import DrilldownItem from "./drilldown-item";
+import DropdownItem from "./dropdown-item";
+import NavigationScreen from "./navigation-screen";
+import { useSidebarParent } from "./use-sidebar-parent";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Navigation() {
+  const backButtonRef = useRef(null);
+  const [animationDirection, setAnimationDirection] = useState(null);
+  const [parentId, setParentId, parentDropdownId, setParentDropdownId] = useSidebarParent();
+  const menuItems = useSelect(
+    (select) => (
+      // @ts-ignore
+      select(STORE_NAME).getMenuItems()
+    ),
+    []
+  );
+  const parent = useMemo(
+    () => menuItems.find((item) => item.id === parentId),
+    [menuItems, parentId]
+  );
+  const navigationKey = parent ? `drilldown-${parent.id}` : "root";
+  const handleNavigate = ({
+    id,
+    direction
+  }) => {
+    setAnimationDirection(direction);
+    setParentId(id);
+  };
+  const handleDropdownToggle = (dropdownId) => {
+    setParentDropdownId(
+      parentDropdownId === dropdownId ? void 0 : dropdownId
+    );
+  };
+  const items = useMemo(
+    () => menuItems.filter((item) => item.parent === parentId),
+    [menuItems, parentId]
+  );
+  const hasRealIcons = items.some((item) => !!item.icon);
+  return /* @__PURE__ */ jsx(
+    NavigationScreen,
+    {
+      isRoot: !parent,
+      title: parent ? parent.label : "",
+      backMenuItem: parent?.parent,
+      backButtonRef,
+      animationDirection: animationDirection || void 0,
+      navigationKey,
+      onNavigate: handleNavigate,
+      content: /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => {
+        if (item.parent_type === "dropdown") {
+          return /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              id: item.id,
+              className: "boot-navigation-item",
+              icon: item.icon,
+              shouldShowPlaceholder: hasRealIcons,
+              isExpanded: parentDropdownId === item.id,
+              onToggle: () => handleDropdownToggle(item.id),
+              children: item.label
+            },
+            item.id
+          );
+        }
+        if (item.parent_type === "drilldown") {
+          return /* @__PURE__ */ jsx(
+            DrilldownItem,
+            {
+              id: item.id,
+              icon: item.icon,
+              shouldShowPlaceholder: hasRealIcons,
+              onNavigate: handleNavigate,
+              children: item.label
+            },
+            item.id
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          NavigationItem,
+          {
+            to: item.to,
+            icon: item.icon,
+            shouldShowPlaceholder: hasRealIcons,
+            children: item.label
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+var navigation_default = Navigation;
+export {
+  navigation_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/navigation/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/navigation/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../store';\nimport NavigationItem from './navigation-item';\nimport DrilldownItem from './drilldown-item';\nimport DropdownItem from './dropdown-item';\nimport NavigationScreen from './navigation-screen';\nimport { useSidebarParent } from './use-sidebar-parent';\nimport type { MenuItem } from '../../store/types';\n\nfunction Navigation() {\n\tconst backButtonRef = useRef< HTMLButtonElement >( null );\n\tconst [ animationDirection, setAnimationDirection ] = useState<\n\t\t'forward' | 'backward' | null\n\t>( null );\n\tconst [ parentId, setParentId, parentDropdownId, setParentDropdownId ] =\n\t\tuseSidebarParent();\n\tconst menuItems = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems() as MenuItem[],\n\t\t[]\n\t);\n\tconst parent = useMemo(\n\t\t() => menuItems.find( ( item ) => item.id === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\t// Create a unique key for the current navigation state\n\t// The sidebar will animate when the key changes.\n\tconst navigationKey = parent ? `drilldown-${ parent.id }` : 'root';\n\n\t// We use transitions to handle navigation clicks\n\t// This allows smooth animations and non blocking navigation.\n\tconst handleNavigate = ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => {\n\t\tsetAnimationDirection( direction );\n\t\tsetParentId( id );\n\t};\n\n\tconst handleDropdownToggle = ( dropdownId: string ) => {\n\t\tsetParentDropdownId(\n\t\t\tparentDropdownId === dropdownId ? undefined : dropdownId\n\t\t);\n\t};\n\n\tconst items = useMemo(\n\t\t() => menuItems.filter( ( item ) => item.parent === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\n\tconst hasRealIcons = items.some( ( item ) => !! item.icon );\n\n\treturn (\n\t\t<NavigationScreen\n\t\t\tisRoot={ ! parent }\n\t\t\ttitle={ parent ? parent.label : '' }\n\t\t\tbackMenuItem={ parent?.parent }\n\t\t\tbackButtonRef={ backButtonRef }\n\t\t\tanimationDirection={ animationDirection || undefined }\n\t\t\tnavigationKey={ navigationKey }\n\t\t\tonNavigate={ handleNavigate }\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ items.map( ( item: MenuItem ) => {\n\t\t\t\t\t\tif ( item.parent_type === 'dropdown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\tclassName=\"boot-navigation-item\"\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tisExpanded={ parentDropdownId === item.id }\n\t\t\t\t\t\t\t\t\tonToggle={ () =>\n\t\t\t\t\t\t\t\t\t\thandleDropdownToggle( item.id )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t</DropdownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.parent_type === 'drilldown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DrilldownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tonNavigate={ handleNavigate }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t</DrilldownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default Navigation;\n"],
+  "mappings": ";AAGA,SAAS,UAAU,SAAS,cAAc;AAC1C,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,wBAAwB;AA4D7B,mBAII,WAJJ;AAzDJ,SAAS,aAAa;AACrB,QAAM,gBAAgB,OAA6B,IAAK;AACxD,QAAM,CAAE,oBAAoB,qBAAsB,IAAI,SAEnD,IAAK;AACR,QAAM,CAAE,UAAU,aAAa,kBAAkB,mBAAoB,IACpE,iBAAiB;AAClB,QAAM,YAAY;AAAA,IACjB,CAAE;AAAA;AAAA,MAED,OAAQ,UAAW,EAAE,aAAa;AAAA;AAAA,IACnC,CAAC;AAAA,EACF;AACA,QAAM,SAAS;AAAA,IACd,MAAM,UAAU,KAAM,CAAE,SAAU,KAAK,OAAO,QAAS;AAAA,IACvD,CAAE,WAAW,QAAS;AAAA,EACvB;AAGA,QAAM,gBAAgB,SAAS,aAAc,OAAO,EAAG,KAAK;AAI5D,QAAM,iBAAiB,CAAE;AAAA,IACxB;AAAA,IACA;AAAA,EACD,MAGO;AACN,0BAAuB,SAAU;AACjC,gBAAa,EAAG;AAAA,EACjB;AAEA,QAAM,uBAAuB,CAAE,eAAwB;AACtD;AAAA,MACC,qBAAqB,aAAa,SAAY;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,QAAQ;AAAA,IACb,MAAM,UAAU,OAAQ,CAAE,SAAU,KAAK,WAAW,QAAS;AAAA,IAC7D,CAAE,WAAW,QAAS;AAAA,EACvB;AAEA,QAAM,eAAe,MAAM,KAAM,CAAE,SAAU,CAAC,CAAE,KAAK,IAAK;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS,CAAE;AAAA,MACX,OAAQ,SAAS,OAAO,QAAQ;AAAA,MAChC,cAAe,QAAQ;AAAA,MACvB;AAAA,MACA,oBAAqB,sBAAsB;AAAA,MAC3C;AAAA,MACA,YAAa;AAAA,MACb,SACC,gCACG,gBAAM,IAAK,CAAE,SAAoB;AAClC,YAAK,KAAK,gBAAgB,YAAa;AACtC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa,qBAAqB,KAAK;AAAA,cACvC,UAAW,MACV,qBAAsB,KAAK,EAAG;AAAA,cAG7B,eAAK;AAAA;AAAA,YAVD,KAAK;AAAA,UAWZ;AAAA,QAEF;AAEA,YAAK,KAAK,gBAAgB,aAAc;AACvC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa;AAAA,cAEX,eAAK;AAAA;AAAA,YAND,KAAK;AAAA,UAOZ;AAAA,QAEF;AAEA,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAK,KAAK;AAAA,YACV,MAAO,KAAK;AAAA,YACZ,uBAAwB;AAAA,YAEtB,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEF,CAAE,GACH;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,qBAAQ;",
+  "names": []
+}