@pantheon-systems/pds-toolkit-react 2.0.0-alpha.10 → 2.0.0-alpha.12

package/dist/index.source.d.ts

@@ -23,12 +23,16 @@ export * from './components/cards/NewSiteCard/NewSiteCard';
 export * from './components/cards/PaymentCard/PaymentCard';
 export * from './components/cards/PricingCard/PricingCard';
 export * from './components/cards/SiteCard/SiteCard';
+export * from './components/charts/BarChart/BarChart';
+export * from './components/charts/LineChart/LineChart';
+export * from './components/charts/shared/types';
 export * from './components/CodeBlock/CodeBlock';
 export * from './components/ComparisonList/ComparisonList';
 export * from './components/CTALink/CTALink';
 export * from './components/CTASlice/CTASlice';
 export * from './components/DashboardStat/DashboardStat';
 export * from './components/Drawer/Drawer';
+export * from './components/Dropdown/Dropdown';
 export * from './components/empty-states/CompactEmptyState/CompactEmptyState';
 export * from './components/empty-states/HorizontalEmptyState/HorizontalEmptyState';
 export * from './components/empty-states/VerticalEmptyState/VerticalEmptyState';
@@ -65,11 +69,11 @@ export * from './components/navigation/DashboardNav/DashboardNavItem';
 export * from './components/navigation/DashboardSearch/DashboardSearch';
 export * from './components/navigation/DropdownMenu/DropdownMenu';
 export * from './components/navigation/Navbar/Navbar';
-export * from './components/navigation/NavMenu/NavMenu';
 export * from './components/navigation/SideNav/SideNav';
 export * from './components/navigation/SideNavCompact/SideNavCompact';
 export * from './components/navigation/SideNavGlobal/SideNavGlobal';
 export * from './components/navigation/SideNavGlobal/SideNavGlobalItem';
+export * from './components/navigation/SiteMenu/SiteMenu';
 export * from './components/navigation/TabMenu/TabMenu';
 export * from './components/navigation/UserMenu/UserMenu';
 export * from './components/navigation/WorkspaceSelector/WorkspaceSelector';
@@ -129,6 +133,7 @@ export * from './libs/types/navigation-types';
 export * from './utilities/context-providers/ResponsiveContext/ResponsiveContext';
 export * from './utilities/hooks/useBreakpoint/useBreakpoint';
 export * from './utilities/hooks/useClipboard/useClipboard';
+export * from './utilities/hooks/useDropdown';
 export * from './utilities/hooks/useKeyPress/useKeyPress';
 export * from './utilities/hooks/useMediaQuery/useMediaQuery';
 export * from './utilities/hooks/useWindowWidth/useWindowWidth';

package/dist/layouts/AppLayout/AppLayout.d.ts

@@ -47,6 +47,10 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * If not provided, the sidebar will use an internal function to manage collapsed state.
      */
     onSidebarToggle?: () => void;
+    /**
+     * When true, the sidebar stays fixed and only the main content area scrolls.
+     */
+    scrollableContent?: boolean;
     /**
      * Background color for the sidebar. Use a PDS CSS custom property
      * (e.g. 'var(--pds-color-bg-default)') so dark mode works automatically.
@@ -74,5 +78,5 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * AppLayout UI component
  */
-export declare const AppLayout: ({ children, className, hasSidebarToggle, isSidebarCollapsed, labels, mainBackground, mainContentElement, mainContentProps, onSidebarToggle, sidebarBackground, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppLayout: ({ children, className, hasSidebarToggle, isSidebarCollapsed, labels, mainBackground, mainContentElement, mainContentProps, onSidebarToggle, scrollableContent, sidebarBackground, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/utilities/hooks/useDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './useDropdown';

package/dist/utilities/hooks/useDropdown/useDropdown.d.ts

@@ -0,0 +1,121 @@
+import type { Placement } from '@floating-ui/react';
+import { useFloating, useInteractions } from '@floating-ui/react';
+export type DropdownRole = 'menu' | 'listbox';
+export type DropdownVariant = 'default' | 'input';
+export interface UseDropdownOptions {
+    /**
+     * Allow keyboard navigation to escape the list (move past first/last item).
+     * Useful for combobox inputs where focus should return to the input.
+     */
+    allowEscape?: boolean;
+    /**
+     * Enable click-to-toggle interaction via useClick.
+     * Set to false for combobox-type inputs where open/close is managed
+     * by input events (typing, focus) rather than a click toggle.
+     */
+    enableClick?: boolean;
+    /**
+     * Enable keyboard list navigation via useListNavigation.
+     * Set to false if keyboard nav is managed externally.
+     */
+    enableListNavigation?: boolean;
+    /**
+     * Enable shift middleware to keep the dropdown within viewport bounds.
+     * Set to false for inputs where the dropdown should align flush with the trigger.
+     */
+    enableShift?: boolean;
+    /**
+     * Enable transition animations on the dropdown panel.
+     */
+    enableTransition?: boolean;
+    /**
+     * Enable typeahead character search via useTypeahead.
+     */
+    enableTypeahead?: boolean;
+    /**
+     * Offset distance in pixels between the trigger and the dropdown panel.
+     * Ignored when variant is 'input' (uses dynamic offset based on placement).
+     */
+    offsetValue?: number;
+    /**
+     * Open the dropdown on hover (desktop navigation menus).
+     * Enables useHover with safePolygon.
+     */
+    openOnHover?: boolean;
+    /**
+     * Preferred placement of the dropdown panel relative to the trigger.
+     */
+    placement?: Placement;
+    /**
+     * ARIA role for the dropdown container.
+     */
+    role?: DropdownRole;
+    /**
+     * Index of the currently selected item. Used by typeahead to maintain
+     * selection context. Only needed for selection-style dropdowns (Select).
+     */
+    selectedIndex?: number | null;
+    /**
+     * Dropdown variant. 'input' applies input-specific positioning: dynamic
+     * offset based on placement direction and size constraints with min/max height.
+     * Use for Select, Combobox, and other input-attached dropdowns.
+     */
+    variant?: DropdownVariant;
+    /**
+     * Use virtual focus (aria-activedescendant) instead of roving tabindex.
+     * Appropriate for combobox-type inputs where focus must stay on the input.
+     */
+    virtual?: boolean;
+}
+export interface UseDropdownReturn {
+    /**
+     * Index of the currently active/focused item in the list.
+     */
+    activeIndex: number | null;
+    /**
+     * Styles to apply to the floating panel element.
+     */
+    floatingStyles: ReturnType<typeof useFloating>['floatingStyles'];
+    /**
+     * Props to spread on the floating panel element.
+     */
+    getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];
+    /**
+     * Props to spread on each item element.
+     */
+    getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
+    /**
+     * Props to spread on the trigger/reference element.
+     */
+    getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];
+    /**
+     * Whether the floating panel should be mounted in the DOM
+     * (accounts for transition animations).
+     */
+    isMounted: boolean;
+    /**
+     * Whether the dropdown is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Ref array for list item DOM nodes (used by useListNavigation).
+     */
+    listRef: React.MutableRefObject<any[]>;
+    /**
+     * Floating UI refs for the reference and floating elements.
+     */
+    refs: ReturnType<typeof useFloating>['refs'];
+    /**
+     * Set the active/focused item index.
+     */
+    setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
+    /**
+     * Set the open state of the dropdown.
+     */
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Transition styles to apply to the floating panel element.
+     */
+    transitionStyles: React.CSSProperties;
+}
+export declare const useDropdown: ({ allowEscape, enableClick, enableListNavigation, enableShift, enableTransition, enableTypeahead, offsetValue, openOnHover, placement, role, selectedIndex, variant, virtual, }?: UseDropdownOptions) => UseDropdownReturn;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.10",
+	"version": "2.0.0-alpha.12",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -160,7 +160,7 @@
 	"dependencies": {
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.33",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.34",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.0.8",
@@ -177,7 +177,8 @@
 		"react-day-picker": "^9.11.1",
 		"react-device-detect": "^2.2.3",
 		"react-hotkeys-hook": "^4.5.1",
-		"react-toastify": "^9.0.3"
+		"react-toastify": "^9.0.3",
+		"recharts": "^3.8.1"
 	},
 	"optionalDependencies": {
 		"@fortawesome/free-brands-svg-icons": "^7.2.0",

package/dist/components/navigation/NavMenu/NavMenuDropdown.d.ts

@@ -1,24 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { NavMenuItem } from '../../../libs/types/navigation-types';
-/**
- * Prop types for NavMenuDropdown
- */
-interface NavMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
-    /**
-     * Dropdown items.
-     */
-    items?: NavMenuItem[];
-    /**
-     * Dropdown label.
-     */
-    label?: string;
-    /**
-     * Mobile menu will be enabled when viewport is at or below this number in pixels.
-     */
-    mobileMenuMaxWidth?: number;
-}
-/**
- * NavMenuDropdown UI component
- */
-export declare const NavMenuDropdown: ({ items, label, mobileMenuMaxWidth, }: NavMenuDropdownProps) => import("react/jsx-runtime").JSX.Element;
-export {};