@pantheon-systems/pds-toolkit-react 2.0.0-alpha.76 → 2.0.0-alpha.78

package/dist/index.source.d.ts

@@ -85,15 +85,18 @@ export * from './components/pagination/PaginationChapter/PaginationChapter';
 export * from './components/pagination/PaginationCompact/PaginationCompact';
 export * from './components/panels/ExpansionPanel/ExpansionPanel';
 export * from './components/panels/ExpansionPanelGroup/ExpansionPanelGroup';
+export * from './components/panels/FeaturePanel/FeaturePanel';
 export * from './components/panels/Panel/Panel';
 export * from './components/panels/PanelList/PanelList';
 export * from './components/panels/PanelList/PanelRow';
 export * from './components/panels/PanelStack/PanelStack';
+export * from './components/panels/WidgetPanel/WidgetPanel';
 export * from './components/PantheonLogo/PantheonLogo';
 export * from './components/Popover/Popover';
 export * from './components/progress-indicators/ProgressBar/ProgressBar';
 export * from './components/progress-indicators/ProgressRing/ProgressRing';
 export * from './components/ResultCount/ResultCount';
+export * from './components/RowActionsMenu/RowActionsMenu';
 export * from './components/SiteFooter/SiteFooter';
 export * from './components/SiteSearch/SiteSearch';
 export * from './components/SortableList/SortableList';
@@ -128,6 +131,7 @@ export * from './libs/types/custom-types';
 export * from './libs/types/input-types';
 export * from './libs/types/layout-types';
 export * from './libs/types/navigation-types';
+export * from './utilities/auto-grid/AutoGrid';
 export * from './utilities/context-providers/ThemeContext/ThemeContext';
 export * from './utilities/grid/Grid';
 export * from './utilities/grid/GridItem';

package/dist/layouts/SidebarLayout/SidebarLayout.d.ts

@@ -7,7 +7,8 @@ import './sidebar-layout.css';
 interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * 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.
+     * Optional named slots: `sidebar` for sidebar content, `second-sidebar` for a second, opposite-side
+     * sidebar, `content` for backwards compatibility.
      */
     children: ReactNode;
     /**
@@ -15,10 +16,28 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     className?: string;
     /**
-     * Gap between the main content and sidebar, from the numbered spacing scale.
+     * Gap between the main content and sidebar(s), from the numbered spacing scale.
      * Defaults to `xl`.
      */
     gridGap?: GapScale;
+    /**
+     * Mobile position of the `second-sidebar` slot: `'before'` or `'after'` (default) the main content.
+     * When both sidebars resolve to `'after'`, they stack in the same left-to-right order they have
+     * on desktop.
+     */
+    secondSidebarMobileLocation?: 'before' | 'after';
+    /**
+     * Width of the second sidebar as a percentage (e.g. `'33%'`). Defaults to `sidebarWidth`.
+     */
+    secondSidebarWidth?: string;
+    /**
+     * Maximum width of the second sidebar in rems. Defaults to `sidebarWidthMax`.
+     */
+    secondSidebarWidthMax?: number;
+    /**
+     * Minimum width of the second sidebar in rems. Defaults to `sidebarWidthMin`.
+     */
+    secondSidebarWidthMin?: number;
     /**
      * Sidebar location.
      */
@@ -43,5 +62,5 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * SidebarLayout UI component
  */
-export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, sidebarWidthMax, sidebarWidthMin, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLayout: ({ children, className, gridGap, secondSidebarMobileLocation, secondSidebarWidth, secondSidebarWidthMax, secondSidebarWidthMin, sidebarLocation, sidebarMobileLocation, sidebarWidth, sidebarWidthMax, sidebarWidthMin, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,3 +3,4 @@ export type PaddingScale = 'none' | 'condensed' | 'standard' | 'spacious';
 export type CardPaddingScale = Exclude<PaddingScale, 'none'>;
 export type CardBackground = 'default' | 'secondary' | 'transparent';
 export type VerticalAlignOptions = 'start' | 'center' | 'end';
+export type ImageDisplayVariant = 'bleed' | 'inset';

package/dist/utilities/auto-grid/AutoGrid.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GapScale } from '../../libs/types/layout-types';
+import './auto-grid.css';
+/**
+ * Prop types for AutoGrid
+ */
+export interface AutoGridProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Grid content. Each child is placed directly as a grid item -- no
+     * wrapper component needed.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Gap between items, from the numbered spacing scale. Fixed at all
+     * breakpoints; set `mobileGap` to change it on small screens. Defaults
+     * to `xl`.
+     */
+    gap?: GapScale;
+    /**
+     * Minimum width of each item, as a CSS length (e.g. `'13rem'`). Items
+     * grow to evenly fill each row up to that width, wrapping to a new row
+     * once another item can't fit at it. Every item is always the same
+     * width, regardless of how many end up in the last row -- an
+     * incomplete row just leaves blank trailing space instead of
+     * stretching its items wider.
+     */
+    itemMinWidth: string;
+    /**
+     * Caps the number of columns, regardless of how much width is
+     * available. Uncapped by default.
+     */
+    maxColumns?: number;
+    /**
+     * Gap on small (mobile) screens. If not set, uses the same value as `gap`.
+     */
+    mobileGap?: GapScale;
+}
+/**
+ * AutoGrid layout component — a responsive grid that fits as many
+ * `itemMinWidth`-wide items per row as will fit, evenly filling the row up
+ * to that width, and wraps the rest to new rows. Every item is always the
+ * same width. Optionally cap the column count with `maxColumns`.
+ */
+export declare const AutoGrid: ({ children, className, gap, itemMinWidth, maxColumns, mobileGap, ...props }: AutoGridProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { Placement } from '@floating-ui/react';
-import { useFloating, useInteractions } from '@floating-ui/react';
+import { useFloating, useFloatingNodeId, useInteractions } from '@floating-ui/react';
 export type DropdownRole = 'menu' | 'listbox' | 'dialog';
 export type DropdownVariant = 'default' | 'input';
 export interface UseDropdownOptions {
@@ -118,6 +118,16 @@ export interface UseDropdownReturn {
      * Ref array for list item DOM nodes (used by useListNavigation).
      */
     listRef: React.MutableRefObject<any[]>;
+    /**
+     * This instance's Floating UI tree node ID (`null` when not part of a
+     * `<FloatingTree>`). Consumers that can be nested inside another floating
+     * panel (e.g. MenuButton, Dropdown) wrap their rendered floating panel in
+     * a `<FloatingNode id={nodeId}>` so outside-click/Escape resolve to the
+     * correct (innermost) panel when nested. See each consumer's own
+     * `useFloatingParentNodeId()` check for whether it also needs to provide
+     * its own `<FloatingTree>` (root case) or can join an ancestor's.
+     */
+    nodeId: ReturnType<typeof useFloatingNodeId>;
     /**
      * Floating UI refs for the reference and floating elements.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.76",
+	"version": "2.0.0-alpha.78",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",