@pantheon-systems/pds-toolkit-react 2.0.0-alpha.75 → 2.0.0-alpha.77

package/dist/index.source.d.ts

@@ -11,6 +11,7 @@ export * from './components/buttons/FilterButton/FilterButton';
 export * from './components/buttons/IconButton/IconButton';
 export * from './components/buttons/MenuButton/MenuButton';
 export * from './components/buttons/SegmentedButton/SegmentedButton';
+export * from './components/buttons/SelectButton/SelectButton';
 export * from './components/buttons/SplitButton/SplitButton';
 export * from './components/buttons/SSOButton/SSOButton';
 export * from './components/buttons/UtilityButton/UtilityButton';
@@ -74,6 +75,8 @@ export * from './components/notifications/SectionMessage/SectionMessage';
 export * from './components/notifications/Toaster/Toast';
 export * from './components/notifications/Toaster/Toaster';
 export * from './components/notifications/Toaster/useToast';
+export * from './components/overlays/BottomSheet/BottomSheet';
+export * from './components/overlays/BulkActionBar/BulkActionBar';
 export * from './components/overlays/Drawer/Drawer';
 export * from './components/overlays/FullScreenOverlay/FullScreenOverlay';
 export * from './components/overlays/Modal/Modal';
@@ -91,6 +94,7 @@ 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';
@@ -125,6 +129,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/svg/arrowDownWideShort.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M249 369L145 473c-9.4 9.4-24.6 9.4-33.9 0L7 369c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l63 63 0-342.1c0-13.3 10.7-24 24-24s24 10.7 24 24l0 342.1 63-63c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm63 111c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L312 96z"/>
+</svg>

package/dist/svg/arrowUpShortWide.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M145 39c-9.4-9.4-24.6-9.4-33.9 0L7 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l63-63 0 342.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-342.1 63 63c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L145 39zm167 9c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-112 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l176 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-176 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l240 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-240 0z"/>
+</svg>

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.75",
+	"version": "2.0.0-alpha.77",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -182,7 +182,7 @@
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
 		"@internationalized/date": "^3.12.2",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.68",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.70",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.3.2",