@pantheon-systems/pds-toolkit-react 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/components/icons/Icon/icon-registry.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Icon Registry - Source of truth for PDS icon mappings.
+ *
+ * Maps PDS camelCase icon names to their source:
+ * - FA icons: reference a Font Awesome package + export name
+ * - Custom icons: hand-authored SVG data in custom-icons.tsx
+ *
+ * To add an FA icon:
+ *   1. Add entry here with source: 'fa', style, and faImportName
+ *   2. Run: npm run generate:icon-data
+ *   3. Commit both this file and generated-icon-data.ts
+ *
+ * To add a custom icon:
+ *   1. Add SVG data to custom-icons.tsx
+ *   2. Add entry here with source: 'custom'
+ *   3. Run: npm run generate:icon-data
+ *   4. Commit all three files
+ */
+export type FAStyle = 'regular' | 'solid' | 'brands';
+export type IconCategory = 'actions' | 'arrows' | 'brands' | 'communication' | 'custom' | 'data' | 'development' | 'documents' | 'financial' | 'media' | 'navigation' | 'objects' | 'security' | 'status' | 'users';
+export interface FAIconEntry {
+    aliases?: string[];
+    categories: IconCategory[];
+    faImportName: string;
+    source: 'fa';
+    style: FAStyle;
+}
+export interface CustomIconEntry {
+    aliases?: string[];
+    categories: IconCategory[];
+    source: 'custom';
+}
+export type IconRegistryEntry = CustomIconEntry | FAIconEntry;
+export declare const iconRegistry: Record<string, IconRegistryEntry>;

package/dist/components/icons/PaymentIcon/PaymentIcon.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './payment-icon.css';
-type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
+export type PaymentSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
 /**
  * Prop types for PaymentIcon
  */
@@ -13,9 +14,12 @@ export interface PaymentIconProps extends ComponentPropsWithoutRef<'div'> {
      * The type of payment icon to display.
      */
     paymentType: PaymentType;
+    /**
+     * Which size of icon to render
+     */
+    size?: PaymentSize;
 }
 /**
  * PaymentIcon UI component
  */
-export declare const PaymentIcon: ({ className, paymentType, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const PaymentIcon: ({ className, paymentType, size, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts

@@ -1,16 +1,16 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './platform-icon.css';
-type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'google' | 'import-custom' | 'microsoft' | 'next' | 'next-drupal' | 'next-wp' | 'splunk' | 'sumo-logic' | 'wordpress';
-interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
+export type PlatformSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'google' | 'import-custom' | 'microsoft' | 'next' | 'next-drupal' | 'next-wp' | 'splunk' | 'sumo-logic' | 'wordpress';
+export interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
+    platformType: PlatformType;
     /**
      * Which size of icon to render
      */
-    iconSize?: 'm' | 'l' | 'xl' | '2xl';
-    platformType: PlatformType;
+    size?: PlatformSize;
 }
 /**
  * PlatformIcon UI component
  */
-export declare const PlatformIcon: ({ className, iconSize, platformType, ...props }: PlatformIconProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const PlatformIcon: ({ className, platformType, size, ...props }: PlatformIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Checkbox/Checkbox.d.ts

@@ -74,9 +74,9 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
      */
     showLabel?: boolean;
     /**
-     * Size of the label and checkbox. Defaults to 'M'.
+     * Size of the checkbox and label.
      */
-    size?: 'S' | 'M';
+    size?: 's' | 'm';
     /**
      * Validation message for the input field based on the validation status.
      */

package/dist/components/inputs/Combobox/Combobox.d.ts

@@ -1,6 +1,7 @@
-import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
+import React, { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ValidationStatus } from '../../../libs/types/input-types';
 import './combobox.css';
+export type ComboboxSize = 's' | 'm' | 'l';
 type LabelStrings = {
     clearButton?: string;
     inputInstructions?: string;
@@ -14,10 +15,15 @@ export type ComboboxOption = {
     searchIndex?: string[];
     value: string;
 };
+export type ComboboxOptionGroup = {
+    groupLabel: string;
+    options: ComboboxOption[];
+};
+export type ComboboxOptionsType = (ComboboxOption | ComboboxOptionGroup)[];
 /**
  * Prop types for Combobox
  */
-export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
+export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onFocus' | 'onBlur'> {
     /**
      * Additional class names
      */
@@ -79,9 +85,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
      */
     noResultsText?: string;
     /**
-     * onBlur event handler.
+     * onBlur event handler to provide the current value of the input.
      */
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (currentValue: string) => void;
     /**
      * onChange event handler.
      */
@@ -91,9 +97,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
      */
     onClear?: () => void;
     /**
-     * onFocus event handler.
+     * onFocus event handler to provide the current value of the input.
      */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (currentValue: string) => void;
     /**
      * Callback when an option is selected. Returns the selected option object.
      */
@@ -119,6 +125,10 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
      * When true, clicking or focusing the input will show all available options before typing.
      */
     showUnfilteredOptions?: boolean;
+    /**
+     * Size of the combobox field.
+     */
+    size?: ComboboxSize;
     /**
      * Optional tooltip text to display additional information.
      */

package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts

@@ -1,19 +1,39 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './combobox-multiselect.css';
+export type ComboboxMultiselectSize = 's' | 'm' | 'l';
 type LabelStrings = {
+    aiBadgeLabel?: string;
+    aiPanelButton?: string;
+    aiPanelClose?: string;
+    aiPanelRefresh?: string;
     inputInstructions?: string;
     triggerButton?: string;
 };
-interface OptionProps {
+/**
+ * Public option interface - what users provide to the component
+ */
+export interface OptionProps {
+    badge?: 'ai';
     id: string;
-    isAlreadySelected?: boolean;
     label: string;
 }
+interface AiSuggestionsPanel {
+    content?: ReactNode;
+    disableRefresh?: boolean;
+    isFetching?: boolean;
+    items?: OptionProps[];
+    onClose?: () => void;
+    onRefresh?: () => void;
+}
 type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
 /**
  * Prop types for ComboboxMultiselect
  */
 export interface ComboboxMultiselectProps extends DivProps {
+    /**
+     * AI suggestions panel configuration. When provided, shows a sparkle button that opens a floating suggestions panel.
+     */
+    aiSuggestions?: AiSuggestionsPanel;
     /**
      * Additional class names
      */
@@ -70,14 +90,21 @@ export interface ComboboxMultiselectProps extends DivProps {
      * Is this field required?
      */
     required?: boolean;
+    /**
+     * Display all selected tags in a wrapping row instead of stacking with only the top one visible
+     */
+    showAllTags?: boolean;
     /**
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Size of the combobox multiselect field.
+     */
+    size?: ComboboxMultiselectSize;
 }
-export declare const getFilteredOptions: (options: OptionProps[], selectedItems: OptionProps[], inputValue: string) => OptionProps[];
 /**
  * ComboboxMultiselect UI component
  */
-export declare const ComboboxMultiselect: ({ className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showLabel, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Datepicker/Datepicker.d.ts

@@ -5,6 +5,7 @@ import 'react-day-picker/dist/style.css';
 import './datepicker.css';
 type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
 export interface CustomPresetConfig {
+    active?: boolean;
     custom?: () => DateRange;
     days?: number;
     label: string;
@@ -56,10 +57,23 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      * Locale from date-fns for internationalization.
      */
     locale?: Locale;
+    /**
+     * Maximum selectable date.
+     */
+    maxDate?: Date;
+    /**
+     * Minimum selectable date.
+     */
+    minDate?: Date;
     /**
      * onChange handler
      */
     onChange?: (value: DateRange | Date | undefined) => void;
+    /**
+     * Callback fired once on mount when an active preset is applied.
+     * Only fires if no initial value is provided and a preset has active: true.
+     */
+    onInitialize?: (value: DateRange | Date | undefined) => void;
     /**
      * Placeholder text for the trigger button.
      */
@@ -92,5 +106,5 @@ export interface DatepickerProps extends DatepickerHTMLProps {
 /**
  * Datepicker UI component.
  */
-export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, onChange, placeholder, presets, required, showLabel, tooltipText, translationStrings, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, maxDate, minDate, onChange, onInitialize, placeholder, presets, required, showLabel, tooltipText, translationStrings, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/FileUpload/FileUpload.d.ts

@@ -1,6 +1,7 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ValidationStatus } from '../../../libs/types/input-types';
 import './file-upload.css';
+export type FileUploadSize = 's' | 'm';
 type LabelStrings = {
     chooseFile: string;
     clearButton: string;
@@ -73,6 +74,10 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Size of the input field.
+     */
+    size?: FileUploadSize;
     /**
      * Optional tooltip text to display additional information.
      */

package/dist/components/inputs/Select/Select.d.ts

@@ -3,6 +3,7 @@ import { ValidationStatus } from '../../../libs/types/input-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './select.css';
 export type SelectIconType = PDSIcon | 'google' | 'microsoft';
+export type SelectSize = 's' | 'm' | 'l';
 type LabelStrings = {
     selectOptionText: string;
     triggerButton: string;
@@ -44,6 +45,10 @@ interface SelectOptionGroupProps {
  * Prop types for Select
  */
 export interface SelectProps {
+    /**
+     * Automatically resize the select to fit the longest option label. Defaults to false (width: 100%).
+     */
+    autoWidth?: boolean;
     /**
      * Additional class names
      */
@@ -104,6 +109,10 @@ export interface SelectProps {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Size of the select field.
+     */
+    size?: SelectSize;
     /**
      * Optional tooltip text to display additional information.
      */
@@ -128,5 +137,5 @@ export declare const SelectOptionGroup: ({ children, label, }: SelectOptionGroup
 /**
  * Select UI component
  */
-export declare const Select: ({ className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Select/select-sample-data.d.ts

@@ -4,4 +4,5 @@ export declare const userRoleOptions: SelectOptionType[];
 export declare const validationExampleOptions: SelectOptionType[];
 export declare const sampleSelectOptionsWithGroups: SelectOptionsType;
 export declare const ssoProviderOptions: SelectOptionType[];
+export declare const autoWidthOptions: SelectOptionType[];
 export declare const sampleSelectOptions: SelectOptionType[];

package/dist/components/inputs/Switch/Switch.d.ts

@@ -40,18 +40,10 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
      * Message or description used to help clarify the usage of the input.
      */
     message?: string | ReactNode;
-    /**
-     * Status text for when switch is off.
-     */
-    offLabel?: string;
     /**
      * onChange event handler. Controlled inputs should use this to manage the input value. Uncontrolled inputs will manage their own state, but may still use this to access the event object.
      */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Status text for when switch is on.
-     */
-    onLabel?: string;
     /**
      * Is this field required?
      */
@@ -60,14 +52,6 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
-    /**
-     * Show toggle status label next to switch. If false, icons will render and the text will still be available to screen readers.
-     */
-    showStatusLabel?: boolean;
-    /**
-     * Determines the placement of the toggle status label. Default set to `right`.
-     */
-    statusLabelPlacement?: 'right' | 'left';
     /**
      * Determines switch placement, default set to `right`.
      */

package/dist/components/inputs/TagsInput/TagsInput.d.ts

@@ -0,0 +1,100 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ValidationStatus } from '../../../libs/types/input-types';
+import './tags-input.css';
+type LabelStrings = {
+    inputInstructions: string;
+    tagAriaLabel: string;
+    tagAriaLabelSimple: string;
+    tagRemove: string;
+    tagsListLabel: string;
+};
+/**
+ * Tag type
+ */
+export type TagType = {
+    id: string;
+    value: string;
+};
+type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
+/**
+ * Prop types for TagsInput
+ */
+export interface TagsInputProps extends DivProps {
+    /**
+     * Optional placeholder text to display when the input field is empty and there are existing tags.
+     */
+    addMorePlaceholder?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Minimum height in pixels for the tags input wrapper box (not including label or message). Defaults to 80px.
+     */
+    inputMinHeight?: number;
+    /**
+     * Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Should tags be sortable via drag-and-drop and keyboard shortcuts? Defaults to false.
+     */
+    isSortable?: boolean;
+    /**
+     * Input label.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the input field.
+     */
+    message?: string | ReactNode;
+    /**
+     * onChange event handler. Called when tags change.
+     */
+    onChange: (tags: TagType[]) => void;
+    /**
+     * Optional placeholder text to display when the input field is empty and there are no tags yet.
+     */
+    placeholder?: string;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Tags array. The component is controlled and requires managing state externally.
+     */
+    tags: TagType[];
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string | null;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    translationStrings?: LabelStrings;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+}
+/**
+ * TagsInput UI component
+ */
+export declare const TagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/inputs/TextInput/TextInput.d.ts

@@ -107,6 +107,10 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
      * Show Toggle visibility control for input. Valid for type `password` only.
      */
     showVisibilityToggle?: boolean;
+    /**
+     * Input size.
+     */
+    size?: 's' | 'm' | 'l';
     /**
      * Optional tooltip text to display additional information.
      */

package/dist/components/inputs/Textarea/Textarea.d.ts

@@ -79,6 +79,10 @@ export interface TextareaProps {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Input size.
+     */
+    size?: 's' | 'm' | 'l';
     /**
      * Additional props for the `<textarea>` element.
      */

package/dist/components/inputs/input-utilities.d.ts

@@ -1,5 +1,6 @@
 import React, { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
 import { SelectOptionGroupType, SelectOptionType } from './Select/Select';
+import '@components/Dropdown/dropdown.css';
 import './input-utilities.css';
 export declare const inputCommonClasses: {
     base: string;
@@ -63,9 +64,9 @@ export declare const InputMessage: ({ className, forInputGroup, hasValidationMes
     validationMessageHasDecorators?: boolean;
     validationStatus?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-type DecoratorVariants = 'search' | 'error' | 'success' | 'filter';
-export declare const InputDecorator: ({ variant }: {
-    variant: DecoratorVariants;
+export type PrefixVariants = 'search' | 'error' | 'success' | 'filter';
+export declare const InputPrefix: ({ variant }: {
+    variant: PrefixVariants;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const SearchShortcut: ({ inputId, shortcutLabel, }: {
     inputId: string;

package/dist/components/{CTALink → links/CTALink}/CTALink.d.ts

@@ -12,7 +12,7 @@ export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Size of link
      */
-    size?: 'sm' | 'md';
+    size?: 's' | 'm';
 }
 /**
  * CTA Link UI component

package/dist/components/{LinkNewWindow → links/LinkNewWindow}/LinkNewWindow.d.ts

@@ -15,7 +15,7 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
     /**
      * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
      */
-    fontSize?: 'sm' | 'md' | 'lg';
+    fontSize?: 's' | 'm' | 'l';
     /**
      * Is the link in the process of loading?
      */

package/dist/components/navigation/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { NavigationItem } from '../../../libs/types/navigation-types';
+import '@components/Dropdown/dropdown.css';
 import './dropdown-menu.css';
 /**
  * Prop types for DropdownMenu

package/dist/components/navigation/Navbar/Navbar.d.ts

@@ -27,7 +27,7 @@ export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
      */
     hideBorder?: boolean;
     /**
-     * Hide the logo if it will be provided elsewhere in the layout. The logo will still be rendered in the mobile view.
+     * Hide the logo on desktop. The logo is always shown in the mobile bar.
      */
     hideLogo?: boolean;
     /**

package/dist/components/navigation/SideNavGlobal/SideNavGlobal.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { SideNavGlobalItemProps } from './SideNavGlobalItem';
 import './side-nav-global.css';
 /**
@@ -13,11 +13,6 @@ export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
-    /**
-     * Should the Pantheon logo be displayed above the menu items?
-     * It will not be displayed in the mobile view regardless of this value.
-     */
-    hasLogo?: boolean;
     /**
      * Is the sidebar collapsed?
      */
@@ -29,22 +24,17 @@ export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
         submenu: string;
         toggle: string;
     };
-    /**
-     * Where should the logo link to? A fully-formed link element.
-     * Only necessary if `hasLogo` is true.
-     * If the logo should not be a link, leave blank.
-     */
-    logoLinkContent?: ReactNode;
     /**
      * Menu items to render.
      */
     menuItems?: SideNavGlobalItemProps[];
     /**
-     * Text to display in the mobile menu trigger button when no active link is found.
+     * Callback to expand the sidebar. When provided and the sidebar is collapsed,
+     * tapping a nav item with children will expand the sidebar instead of showing a flyout.
      */
-    mobileMenuSelectTextFallback?: string;
+    onExpandSidebar?: () => void;
 }
 /**
  * SideNavGlobal UI component
  */
-export declare const SideNavGlobal: ({ ariaLabel, className, hasLogo, isSidebarCollapsed, labels, logoLinkContent, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavGlobalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavGlobal: ({ ariaLabel, className, isSidebarCollapsed, labels, menuItems, onExpandSidebar, ...props }: SideNavGlobalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts

@@ -17,8 +17,12 @@ export interface SideNavGlobalItemProps extends NavigationItem {
         submenu: string;
         toggle: string;
     };
+    /**
+     * Callback to expand the sidebar on touch devices when collapsed.
+     */
+    onExpandSidebar?: () => void;
 }
 /**
  * SideNavGlobalItem UI component
  */
-export declare const SideNavGlobalItem: ({ icon, isActive, isSidebarCollapsed, labels, linkContent, links, }: SideNavGlobalItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavGlobalItem: ({ icon, isActive, isSidebarCollapsed, labels, linkContent, links, onExpandSidebar, }: SideNavGlobalItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/{NavMenu/NavMenu.d.ts → SiteMenu/SiteMenu.d.ts}

@@ -1,10 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { NavMenuItem } from '../../../libs/types/navigation-types';
+import '@components/Dropdown/dropdown.css';
 import './nav-menu.css';
 /**
- * Prop types for NavMenu
+ * Prop types for SiteMenu
  */
-interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
+interface SiteMenuProps extends ComponentPropsWithoutRef<'nav'> {
     /**
      * Aria label for `nav` element.
      */
@@ -21,13 +22,9 @@ interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
      * Menu Items.
      */
     menuItems?: NavMenuItem[];
-    /**
-     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
-     */
-    mobileMenuMaxWidth?: number;
 }
 /**
- * NavMenu UI component
+ * SiteMenu UI component
  */
-export declare const NavMenu: ({ ariaLabel, className, colorType, menuItems, mobileMenuMaxWidth, ...props }: NavMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteMenu: ({ ariaLabel, className, colorType, menuItems, ...props }: SiteMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/navigation/SiteMenu/SiteMenuDropdown.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { NavMenuItem } from '../../../libs/types/navigation-types';
+/**
+ * Prop types for SiteMenuDropdown
+ */
+interface SiteMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Menu items. If omitted or empty, renders as a plain top-level link.
+     */
+    items?: NavMenuItem[];
+    /**
+     * Menu label shown on the trigger button.
+     */
+    label?: string;
+}
+/**
+ * SiteMenuDropdown — a sub-menu for SiteMenu items that have child links.
+ * Desktop: Floating UI dropdown (opens on hover or click).
+ * Mobile: NavAccordion inline expansion.
+ * Both are always in the DOM; CSS driven by [data-pds-mobile] shows the right one.
+ */
+export declare const SiteMenuDropdown: ({ items, label }: SiteMenuDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};