@pantheon-systems/pds-toolkit-react 2.0.0-alpha.11 → 2.0.0-alpha.13

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/libs/types/custom-types.d.ts

@@ -46,6 +46,10 @@ export type LinkItemType = {
      * Optional icon for this item. Choose from available icons in the Icon component.
      */
     iconName?: PDSIcon;
+    /**
+     * Size of the icon. Defaults to 's'.
+     */
+    iconSize?: IconSize;
     /**
      * Is this a critical action item?
      */
@@ -85,6 +89,10 @@ export type MenuItemType = {
      * Optional icon for this item. Choose from available icons in the Icon component.
      */
     iconName?: PDSIcon;
+    /**
+     * Size of the icon. Defaults to 's'.
+     */
+    iconSize?: IconSize;
     /**
      * Optional ID value for this item.
      */

package/dist/libs/types/navigation-types.d.ts

@@ -31,7 +31,7 @@ export interface NavMenuItem {
     id?: string;
     isActive?: boolean | null;
     isSeparator?: boolean;
-    label: string;
+    label?: string;
     linkContent?: ReactElement;
     links?: NavMenuItem[];
 }

package/dist/svg/pause.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M48 80l0 352 64 0 0-352-64 0zM0 80C0 53.5 21.5 32 48 32l64 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48L0 80zm272 0l0 352 64 0 0-352-64 0zm-48 0c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-352z"/>
+</svg>

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.11",
+	"version": "2.0.0-alpha.13",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -52,7 +52,7 @@
 		"prestorybook": "node scripts/filter-exports-by-tags.js && npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run generate:ux-writing-search-index && npm run generate:ux-writing-guide",
 		"storybook": "storybook dev -p 6006",
 		"prebuild": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss && npm run generate:ux-writing-search-index && npm run generate:ux-writing-guide",
-		"build": "NODE_ENV=production storybook build",
+		"build": "NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=production storybook build",
 		"build-storybook": "NODE_ENV=production storybook build",
 		"postbuild": "node scripts/copy-mcp-assets.js && node scripts/build-starter-template.js && node scripts/generate-html-docs.js && node scripts/verify-mcp-build.js",
 		"verify:mcp": "node scripts/verify-mcp-build.js",
@@ -154,13 +154,13 @@
 		"vite-tsconfig-paths": "^4.3.2"
 	},
 	"peerDependencies": {
-		"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-		"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"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": "^10.0.6",
+		"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 {};