@pantheon-systems/pds-toolkit-react 1.0.0-beta.1 → 1.0.0-beta.10

package/_dist/layouts/AppLayout/AppLayout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth } from '@libs/types/custom-types';
+import { ContainerWidth } from '../../libs/types/custom-types';
 import './app-layout.css';
 /**
  * Prop types for AppLayout

package/_dist/layouts/Container/Container.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth } from '@libs/types/custom-types';
+import { ContainerWidth } from '../../libs/types/custom-types';
 import '../../utilities/container.css';
 /**
  * Prop types for Container

package/_dist/layouts/DashboardInner/DashboardInner.d.ts

@@ -5,7 +5,8 @@ import './dashboard-inner.css';
  */
 interface DashboardInnerProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Child elements to be assigned to named slots.
+     * Child elements. Main content can be passed without a slot attribute (unslotted).
+     * Optional named slots: `header-left`, `header-right`, `content` (for backwards compatibility).
      */
     children: ReactNode;
     /**

package/_dist/layouts/FlexContainer/FlexContainer.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '@layouts/layout-types';
+import { GridGapOptions } from '../../libs/types/layout-types';
 import './flex-container.css';
 type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
 type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';

package/_dist/layouts/SidebarLayout/SidebarLayout.d.ts

@@ -1,11 +1,12 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '@layouts/layout-types';
+import { GridGapOptions } from '../../libs/types/layout-types';
 /**
  * Prop types for SidebarLayout
  */
 interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Children to render in the layout. All children must be assigned to a named slot — either 'sidebar' or 'content'.
+     * Children to render in the layout. Main content can be passed without a slot attribute (unslotted).
+     * Optional named slots: `sidebar` for sidebar content, `content` for backwards compatibility.
      */
     children: ReactNode;
     /**

package/_dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions, VerticalAlignOptions } from '@layouts/layout-types';
+import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
 import '../../utilities/grid/grid.css';
 import './three-item-layout.css';
 /**

package/_dist/layouts/TwoItemLayout/TwoItemLayout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions, VerticalAlignOptions } from '@layouts/layout-types';
+import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
 import '../../utilities/grid/grid.css';
 import './two-item-layout.css';
 /**

package/_dist/libs/components/utility-components.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { HeadingLevel } from '@libs/types/custom-types';
+import { HeadingLevel } from '../types/custom-types';
 interface HxProps {
     baseClass?: string;
     children?: ReactNode;

package/_dist/libs/types/custom-types.d.ts

@@ -1,12 +1,15 @@
 import { ReactNode } from 'react';
-import { PDSIcon } from '@components/icons/Icon/Icon';
+import { PDSIcon } from '../../components/icons/Icon/Icon';
 export type BadgeColor = 'success' | 'critical' | 'info' | 'warning' | 'neutral' | 'brand' | 'silver' | 'gold' | 'platinum' | 'diamond';
 export type ButtonDisplayType = 'label-only' | 'icon-start' | 'icon-end';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'navbar' | 'inline';
+export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
 export type ContainerWidth = 'narrow' | 'standard' | 'wide' | 'x-wide' | 'full';
 export type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-caption' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'list-item' | 'inherit' | 'initial' | 'revert' | 'unset';
+export type StatusType = 'info' | 'success' | 'warning' | 'critical' | 'discovery';
+export type StatusTypeExtended = StatusType | 'neutral' | 'working';
+export declare const StatusTypeLabels: Record<StatusType, string>;
 export type FuiOffset = number | {
     alignmentAxis?: number | null;
     crossAxis?: number;
@@ -26,6 +29,10 @@ export type HeadingItemType = {
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
 export type HeadingLevelCommon = Exclude<HeadingLevel, 'h1' | 'h5' | 'h6'>;
 export type LinkItemType = {
+    /**
+     * Screen reader label for critical items. Only used when isCritical is true.
+     */
+    criticalLabel?: string;
     /**
      * Description of the item
      */
@@ -38,6 +45,10 @@ export type LinkItemType = {
      * Optional icon for this item. Choose from available icons in the Icon component.
      */
     iconName?: PDSIcon;
+    /**
+     * Is this a critical action item?
+     */
+    isCritical?: boolean;
     /**
      * Is the item a link?
      */
@@ -56,6 +67,10 @@ export type MenuItemType = {
      * (optional) Callback function to execute when menu item is activated
      */
     callback?: () => void;
+    /**
+     * Screen reader label for critical items. Only used when isCritical is true.
+     */
+    criticalLabel?: string;
     /**
      * Description of the item
      */
@@ -72,6 +87,10 @@ export type MenuItemType = {
      * Optional ID value for this item.
      */
     id?: string;
+    /**
+     * Is this a critical action item?
+     */
+    isCritical?: boolean;
     /**
      * Label for a menu item
      */
@@ -82,6 +101,18 @@ export type MenuItemType = {
     testId?: string;
 };
 export type NodeItemType = {
+    /**
+     * Screen reader label for critical items. Only used when isCritical is true.
+     */
+    criticalLabel?: string;
+    /**
+     * Is this item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Is this a critical action item?
+     */
+    isCritical?: boolean;
     /**
      * Is the item a node?
      */
@@ -97,6 +128,11 @@ export type SeparatorItemType = {
      */
     isSeparator: boolean;
 };
+export type MenuItem = HeadingItemType | LinkItemType | MenuItemType | NodeItemType | SeparatorItemType;
+export declare const isSeparatorItemType: (item: MenuItem) => item is SeparatorItemType;
+export declare const isHeadingItemType: (item: MenuItem) => item is HeadingItemType;
+export declare const isLinkItemType: (item: MenuItem) => item is LinkItemType;
+export declare const isNodeItemType: (item: MenuItem) => item is NodeItemType;
 export type SitePlanLevel = 'sandbox' | 'basic' | 'performance-small' | 'performance-medium' | 'performance-large' | 'performance-xl' | 'performance-2xl' | 'elite' | 'pro' | 'business' | 'flagship-performance';
 export declare const SitePlanLevelLabel: Record<SitePlanLevel, string>;
 export type SiteStatus = 'active' | 'frozen' | 'restricted';

package/_dist/{components/navigation → libs/types}/navigation-types.d.ts

@@ -3,11 +3,11 @@ export type NavigationItem = {
     /**
      * A boolean indicating whether the item is the active item.
      */
-    isActive?: boolean;
+    isActive?: boolean | null;
     /**
      * Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
      */
-    linkContent: ReactElement | string;
+    linkContent?: ReactElement | string;
     /**
      * Submenu items.
      */
@@ -17,7 +17,7 @@ export type FlattenedNavigationItem = {
     /**
      * A boolean indicating whether the item is the active item.
      */
-    isActive?: boolean;
+    isActive?: boolean | null;
     /**
      * Nesting level of the item.
      */
@@ -25,13 +25,13 @@ export type FlattenedNavigationItem = {
     /**
      * Link content — a fully-formed link element using the router of your choice.
      */
-    linkContent: ReactElement;
+    linkContent?: ReactElement;
 };
-export interface MenuItem {
+export interface NavMenuItem {
     id?: string;
-    isActive?: boolean;
+    isActive?: boolean | null;
     isSeparator?: boolean;
     label: string;
     linkContent?: ReactElement;
-    links?: MenuItem[];
+    links?: NavMenuItem[];
 }

package/_dist/mocks/data/navigation-items.d.ts

@@ -1,6 +1,7 @@
-import type { SideNavGlobalItemProps } from '@components/navigation/SideNavGlobal/SideNavGlobalItem';
+import type { SideNavGlobalItemProps } from '../../components/navigation/SideNavGlobal/SideNavGlobalItem';
+import type { WorkspaceSelectorItem } from '../../components/navigation/WorkspaceSelector/WorkspaceSelector';
 export declare const dialogMsgBase = "Activated menu item => ";
-import { UserMenuItem } from '@components/navigation/UserMenu/UserMenu';
+import { UserMenuItem } from '../../components/navigation/UserMenu/UserMenu';
 export declare const buttonNavSampleMenuItems: ({
     linkContent: import("react/jsx-runtime").JSX.Element;
     isActive: boolean;
@@ -54,7 +55,7 @@ export declare const micrositeMenuItems: ({
     label?: undefined;
     links?: undefined;
 })[];
-export declare const navMenuSampleMenuItems: ({
+export declare const navMenuSampleNavMenuItems: ({
     label: string;
     links: ({
         linkContent: import("react/jsx-runtime").JSX.Element;
@@ -76,7 +77,7 @@ export declare const navMenuSampleMenuItems: ({
     links?: undefined;
     isActive?: undefined;
 })[];
-export declare const navMenuSampleMenuItemsRR: ({
+export declare const navMenuSampleNavMenuItemsRR: ({
     label: string;
     links: ({
         linkContent: import("react/jsx-runtime").JSX.Element;
@@ -272,95 +273,6 @@ export declare const tabMenuSampleMenuItemsMultidev: ({
     promoteActiveChildLink?: undefined;
 })[];
 export declare const userMenuSampleItems: UserMenuItem[];
-export declare const workspaceItemsSimple: ({
-    displayName: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    imageSrc?: undefined;
-    planTier?: undefined;
-    isUnprivileged?: undefined;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    imageSrc: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isUnprivileged?: undefined;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    imageSrc: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isUnprivileged: boolean;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isActive: boolean;
-    imageSrc?: undefined;
-    isUnprivileged?: undefined;
-} | {
-    displayName: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    imageSrc?: undefined;
-    isUnprivileged?: undefined;
-    isActive?: undefined;
-})[];
-export declare const workspaceItemsPersonal: ({
-    displayName: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isActive: boolean;
-    imageSrc?: undefined;
-    planTier?: undefined;
-} | {
-    displayName: string;
-    imageSrc: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isActive?: undefined;
-    imageSrc?: undefined;
-})[];
-export declare const workspaceItemsLonger: ({
-    displayName: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    imageSrc?: undefined;
-    planTier?: undefined;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    imageSrc: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    imageSrc?: undefined;
-    isActive?: undefined;
-} | {
-    displayName: string;
-    planTier: string;
-    workspaceId: string;
-    workspaceLink: import("react/jsx-runtime").JSX.Element;
-    isActive: boolean;
-    imageSrc?: undefined;
-})[];
+export declare const workspaceItemsSimple: WorkspaceSelectorItem[];
+export declare const workspaceItemsPersonal: WorkspaceSelectorItem[];
+export declare const workspaceItemsLonger: WorkspaceSelectorItem[];

package/_dist/utilities/context-providers/OverlayContext/OverlayContext.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+interface OverlayContextType {
+    closeOverlay: () => void;
+    hasOpenOverlay: boolean;
+    openOverlay: () => void;
+}
+export declare const OverlayContext: React.Context<OverlayContextType>;
+export declare const OverlayContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useOverlayContext: () => OverlayContextType;
+export {};

package/_dist/vars/animation.d.ts

@@ -1,5 +1,5 @@
 export const ANIMATION_TRANSITION_DEFAULT_DURATION: 200;
 export const ANIMATION_TRANSITION_DEFAULT_DELAY: 0;
-export const ANIMATION_TRANSITION_DEFAULT_TIMING_FUNCTION: "ease-in-out";
+export const ANIMATION_TRANSITION_DEFAULT_TIMING_FUNCTION: "cubic-bezier(.2, 0, 0, 1)";
 export const ANIMATION_TRANSITION_REVEAL_DURATION: 300;
-export const ANIMATION_TRANSITION_REVEAL_TIMING_FUNCTION: "ease-out";
+export const ANIMATION_TRANSITION_REVEAL_TIMING_FUNCTION: "cubic-bezier(.2, 0, 0, 1)";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "1.0.0-beta.1",
+	"version": "1.0.0-beta.10",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -37,26 +37,27 @@
 	],
 	"type": "module",
 	"scripts": {
-		"build": "npm run vite build && npm run build:types || true",
-		"build:types": "tsc -p tsconfig.build.json",
-		"postbuild": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss",
+		"build:lib": "vite build && npm run build:types",
+		"build:types": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+		"postbuild:lib": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss",
 		"build:css": "postcss src/core.css -o _dist/css/pds-core.css",
 		"build:css:components": "postcss src/components/index.css -o _dist/css/pds-components.css",
 		"build:css:layouts": "postcss src/layouts/index.css -o _dist/css/pds-layouts.css",
 		"build:css:packageExtraCss": "node scripts/package-extra-css.js",
 		"build:css:watch": "npm run build:css -- -w",
-		"typecheck:tsc": "tsc --noEmit",
-		"typecheck:attw": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution internal-resolution-error",
-		"typecheck:publint": "npx publint",
-		"typecheck": "npm run typecheck:attw && npm run typecheck:publint && npm run typecheck:tsc",
 		"prestorybook": "npm run build:css",
 		"storybook": "storybook dev -p 6006",
-		"prestorybook:build": "npm run build:css",
-		"storybook:build": "storybook build",
+		"prebuild": "npm run build:css",
+		"build": "storybook build",
+		"build-storybook": "storybook build",
+		"predeploy:pantheon": "npm run build:css",
+		"deploy:pantheon": "storybook build",
+		"start": "node index.js",
 		"develop": "concurrently --raw --kill-others \"npm run storybook\" \"npm run build:css:watch\"",
-		"eslint": "eslint --ext .jsx,.tsx,.js,.ts",
-		"eslint:all": "eslint src --ext .jsx,.tsx,.js,.ts --cache",
-		"format:fix": "prettier . --write && npm run eslint:all -- --fix",
+		"typecheck": "npm run typecheck:attw && npm run typecheck:publint && npm run typecheck:tsc",
+		"typecheck:tsc": "tsc --noEmit",
+		"typecheck:attw": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution internal-resolution-error",
+		"typecheck:publint": "npx publint",
 		"pretest": "npm run build:css",
 		"test": "playwright test",
 		"pretest:vrt": "npm run build:css",
@@ -64,20 +65,20 @@
 		"pretest:vrt:update": "npm run build:css",
 		"test:vrt:update": "npm run test:vrt -- --update-snapshots",
 		"pretest:a11y:generate": "npm run build:css",
-		"test:a11y:generate": "DISABLE_A11Y_ADDON=true npm run storybook:build && node __tests__/a11y/a11y.generate-tests.js",
+		"test:a11y:generate": "DISABLE_A11Y_ADDON=true npm run build && node __tests__/a11y/a11y.generate-tests.js",
 		"test:a11y": "USE_STATIC_STORYBOOK=true DISABLE_A11Y_ADDON=true playwright test --project 'a11y'",
 		"test:a11y:results": "npx http-server ./__tests__/a11y/results/",
-		"predeploy:pantheon": "npm run build:css",
-		"deploy:pantheon": "storybook build",
+		"eslint": "eslint --ext .jsx,.tsx,.js,.ts",
+		"eslint:all": "eslint src --ext .jsx,.tsx,.js,.ts --cache",
+		"format:fix": "prettier . --write && npm run eslint:all -- --fix",
 		"generate:component": "plop component",
 		"generate:layout": "plop layout",
 		"generate:foundation": "plop foundation",
 		"generate:pattern": "plop pattern",
 		"generate:utility": "plop utility",
-		"prepare": "husky install",
-		"build-storybook": "storybook build",
-		"vite": "vite",
-		"pack:local": "bash scripts/pack-local.sh"
+		"test:version-switcher": "bash scripts/test-version-switcher.sh",
+		"pack:local": "bash scripts/pack-local.sh",
+		"prepare": "husky install"
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.15.3",
@@ -87,12 +88,12 @@
 		"@csstools/postcss-design-tokens": "^2.0.4",
 		"@csstools/postcss-global-data": "^1.0.3",
 		"@playwright/test": "^1.36.2",
-		"@storybook/addon-a11y": "^9.1.12",
-		"@storybook/addon-docs": "^9.1.12",
-		"@storybook/addon-links": "^9.1.12",
-		"@storybook/addon-webpack5-compiler-swc": "^4.0.1",
-		"@storybook/react-vite": "^9.1.12",
-		"@storybook/react-webpack5": "^9.1.12",
+		"@storybook/addon-a11y": "^10.1.7",
+		"@storybook/addon-docs": "^10.1.7",
+		"@storybook/addon-links": "^10.1.7",
+		"@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+		"@storybook/react-vite": "^10.1.7",
+		"@storybook/react-webpack5": "^10.1.7",
 		"@types/prismjs": "^1.26.5",
 		"@types/react": "^19.2.2",
 		"@typescript-eslint/eslint-plugin": "^8.47.0",
@@ -110,7 +111,7 @@
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-simple-import-sort": "^12.1.1",
 		"eslint-plugin-sort-destructure-keys": "^2.0.0",
-		"eslint-plugin-storybook": "^9.1.12",
+		"eslint-plugin-storybook": "^10.1.7",
 		"eslint-plugin-typescript-sort-keys": "^3.3.0",
 		"fast-glob": "^3.3.2",
 		"husky": "^8.0.3",
@@ -127,7 +128,8 @@
 		"prettier-plugin-css-order": "^2.1.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"storybook": "^9.1.12",
+		"storybook": "^10.1.7",
+		"tsc-alias": "^1.8.16",
 		"typescript": "^5.4.5",
 		"vite": "^7.2.2",
 		"vite-plugin-lib-inject-css": "^2.1.1",
@@ -144,6 +146,8 @@
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.0.8",
+		"express": "^4.22.1",
+		"express-rate-limit": "^8.2.1",
 		"focus-trap-react": "^10.2.1",
 		"hash-sum": "^2.0.0",
 		"prism-react-renderer": "^2.4.1",
@@ -156,8 +160,7 @@
 		"react-toastify": "^9.0.3"
 	},
 	"lint-staged": {
-		"src/**/*.{js,jsx,ts,tsx}": [
-			"npm run eslint"
-		]
+		"*": "prettier --write --ignore-unknown",
+		"src/**/*.{js,jsx,ts,tsx}": "npm run eslint -- --fix"
 	}
 }