@pantheon-systems/pds-toolkit-react 2.0.0-alpha.37 → 2.0.0-alpha.39

package/codemods/v1-to-v2/transforms/removed-prop-values.js

@@ -0,0 +1,206 @@
+/**
+ * Codemod: removed-prop-values
+ *
+ * Handles props that were removed or had specific values removed in PDS v1→v2.
+ * Driven entirely by props.removals in mappings.json.
+ *
+ * Two kinds of change:
+ *
+ * 1. Value rewrites (entries with `oldValue`):
+ *    The prop stays but a specific string value changes.
+ *    e.g. Button variant="brand-secondary" → variant="secondary"
+ *
+ * 2. Prop removals (all other entries):
+ *    - Plain removals: the prop is removed unconditionally.
+ *      e.g. <Panel hasStatusIndicator> → <Panel>
+ *    - Conditional removals (entries with `removedValues`): the prop is
+ *      removed only when its value is in the removed set; other values are
+ *      left untouched.
+ *      e.g. Card background="mint-gradient" → prop removed
+ *           Card background="default"       → unchanged
+ *
+ * Usage (all components):
+ *   npx jscodeshift -t codemods/v1-to-v2/transforms/removed-prop-values.js \
+ *     --extensions=tsx,ts,jsx,js \
+ *     src/
+ *
+ * Usage (single component — recommended for by-component migrations):
+ *   npx jscodeshift -t codemods/v1-to-v2/transforms/removed-prop-values.js \
+ *     --only=Button \
+ *     --extensions=tsx,ts,jsx,js \
+ *     src/
+ *
+ * Limitations:
+ *   - Only static string literals and boolean shorthand attributes are
+ *     transformed. Dynamic values (variables, expressions) are left as-is
+ *     and need manual review.
+ *   - Table.headers is skipped — its removal requires a structural object
+ *     shape change that cannot be automated at the attribute level.
+ */
+
+const path = require('path');
+const mappings = require(path.join(__dirname, '../mappings.json'));
+
+// Entries that are too complex to automate
+const SKIP_PROPS = new Set(['Table.headers']);
+
+function buildLookups() {
+	// { 'Component.prop.oldValue': 'newValue' }
+	const valueRewrites = {};
+	// { 'Component.prop': null | Set<removedValues> }
+	//   null   → remove the prop unconditionally
+	//   Set    → remove only when value is in the set
+	const propRemovals = {};
+
+	for (const entry of mappings.props.removals) {
+		const { component, prop } = entry;
+		if (!component || !prop) continue;
+
+		const key = `${component}.${prop}`;
+		if (SKIP_PROPS.has(key)) continue;
+
+		if (entry.oldValue) {
+			// Value rewrite: derive new value from the replacement text
+			// Replacement is prose like "Use variant=\"secondary\""
+			// Extract the first quoted value found, e.g. "secondary"
+			const match =
+				entry.replacement && entry.replacement.match(/["']([^"']+)["']/);
+			const newValue = match ? match[1] : null;
+			if (newValue) {
+				valueRewrites[`${key}.${entry.oldValue}`] = newValue;
+			}
+		} else if (entry.removedValues) {
+			// Conditional removal: remove only when value is in the set
+			propRemovals[key] = new Set(entry.removedValues);
+		} else {
+			// Unconditional removal
+			propRemovals[key] = null;
+		}
+	}
+
+	return { valueRewrites, propRemovals };
+}
+
+const { valueRewrites: ALL_VALUE_REWRITES, propRemovals: ALL_PROP_REMOVALS } =
+	buildLookups();
+
+module.exports = function transform(file, api, options) {
+	const j = api.jscodeshift;
+	const root = j(file.source);
+
+	// Parse --only flag: comma-separated component names
+	const onlyComponents =
+		options && options.only
+			? new Set(
+					options.only
+						.split(',')
+						.map((s) => s.trim())
+						.filter(Boolean),
+				)
+			: null;
+
+	// Map local import name → exported component name
+	const localToExported = new Map();
+
+	root.find(j.ImportDeclaration).forEach((nodePath) => {
+		if (nodePath.node.source.value !== '@pantheon-systems/pds-toolkit-react')
+			return;
+		nodePath.node.specifiers.forEach((spec) => {
+			if (spec.type === 'ImportSpecifier') {
+				localToExported.set(spec.local.name, spec.imported.name);
+			}
+		});
+	});
+
+	if (localToExported.size === 0) return;
+
+	let changed = false;
+
+	root.find(j.JSXOpeningElement).forEach((nodePath) => {
+		const nameNode = nodePath.node.name;
+		if (nameNode.type !== 'JSXIdentifier') return;
+
+		const exportedName = localToExported.get(nameNode.name);
+		if (!exportedName) return;
+
+		if (onlyComponents && !onlyComponents.has(exportedName)) return;
+
+		const attrsToRemove = [];
+
+		nodePath.node.attributes.forEach((attr) => {
+			if (attr.type !== 'JSXAttribute') return;
+
+			const propName = attr.name.name;
+			if (typeof propName !== 'string') return;
+
+			const key = `${exportedName}.${propName}`;
+
+			// --- Value rewrites ---
+			// String literal: variant="brand-secondary"
+			if (attr.value && attr.value.type === 'StringLiteral') {
+				const rewriteKey = `${key}.${attr.value.value}`;
+				const newValue = ALL_VALUE_REWRITES[rewriteKey];
+				if (newValue) {
+					attr.value = j.stringLiteral(newValue);
+					changed = true;
+					return;
+				}
+			}
+			// JSX expression container: variant={"brand-secondary"}
+			if (
+				attr.value &&
+				attr.value.type === 'JSXExpressionContainer' &&
+				attr.value.expression.type === 'StringLiteral'
+			) {
+				const rewriteKey = `${key}.${attr.value.expression.value}`;
+				const newValue = ALL_VALUE_REWRITES[rewriteKey];
+				if (newValue) {
+					attr.value.expression = j.stringLiteral(newValue);
+					changed = true;
+					return;
+				}
+			}
+
+			// --- Prop removals ---
+			if (!(key in ALL_PROP_REMOVALS)) return;
+			const removedValues = ALL_PROP_REMOVALS[key];
+
+			if (removedValues === null) {
+				// Unconditional removal (boolean shorthand or any value)
+				attrsToRemove.push(attr);
+				changed = true;
+				return;
+			}
+
+			// Conditional removal — only remove when value is in the removed set
+			let attrValue = null;
+			if (!attr.value) {
+				// Boolean shorthand e.g. <Card background> — unlikely but handle it
+				attrValue = 'true';
+			} else if (attr.value.type === 'StringLiteral') {
+				attrValue = attr.value.value;
+			} else if (
+				attr.value.type === 'JSXExpressionContainer' &&
+				attr.value.expression.type === 'StringLiteral'
+			) {
+				attrValue = attr.value.expression.value;
+			}
+
+			if (attrValue !== null && removedValues.has(attrValue)) {
+				attrsToRemove.push(attr);
+				changed = true;
+			}
+		});
+
+		// Remove collected attributes
+		if (attrsToRemove.length > 0) {
+			nodePath.node.attributes = nodePath.node.attributes.filter(
+				(attr) => !attrsToRemove.includes(attr),
+			);
+		}
+	});
+
+	return changed ? root.toSource() : undefined;
+};
+
+module.exports.parser = 'tsx';

package/dist/components/Dropdown/Dropdown.d.ts

@@ -25,9 +25,11 @@ export declare const Dropdown: {
     Trigger: ({ children, className, showTriggerIcon, ...props }: DropdownTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Panel: ({ children, className, ...props }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ children, className, description, disabled, icon, index, isActive, isCritical, onClick, trailingIcon, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    CheckboxItem: ({ checked, children, className, description, disabled, indeterminate, index, onCheckedChange, onClick, onKeyDown, ...props }: DropdownCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
     Heading: ({ children, className, ...props }: DropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;
     Separator: ({ className, ...props }: DropdownSeparatorProps) => import("react/jsx-runtime").JSX.Element;
     Filter: ({ className, filterIcon, label, noResultsText, onFilterChange, placeholder, showNoResults, ...props }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, ...props }: DropdownFooterProps) => import("react/jsx-runtime").JSX.Element;
 };
 export interface DropdownTriggerProps extends ComponentPropsWithoutRef<'button'> {
     /**
@@ -91,6 +93,40 @@ export interface DropdownItemProps extends ComponentPropsWithoutRef<'li'> {
      */
     trailingIcon?: ReactNode;
 }
+export interface DropdownCheckboxItemProps extends Omit<ComponentPropsWithoutRef<'li'>, 'onChange'> {
+    /**
+     * Checked state of the item.
+     */
+    checked?: boolean;
+    /**
+     * Item label content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Secondary text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Partial/mixed state — renders a dash instead of a check.
+     */
+    indeterminate?: boolean;
+    /**
+     * Index of this item in the list (required for keyboard navigation).
+     */
+    index: number;
+    /**
+     * Callback fired when the item is toggled, with the next checked value.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
 export interface DropdownHeadingProps extends ComponentPropsWithoutRef<'li'> {
     /**
      * Heading text.
@@ -138,3 +174,13 @@ export interface DropdownFilterProps extends ComponentPropsWithoutRef<'li'> {
      */
     showNoResults?: boolean;
 }
+export interface DropdownFooterProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Footer content — typically a single link or button (rendered as a link).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}

package/dist/components/SiteFooter/SiteFooter.d.ts

@@ -15,7 +15,10 @@ export interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
      */
     className?: string;
     /**
-     * PDS container width.
+     * PDS container width, controlling the footer's max-width and inline padding.
+     * Defaults to 'full' (full width, edge-to-edge, no padding) so the containing
+     * layout or app provides the gutter; set a constrained width (e.g. 'x-wide')
+     * to have the footer constrain and pad itself.
      */
     containerWidth?: ContainerWidth;
     /**

package/dist/components/Tooltip/Tooltip.d.ts

@@ -42,7 +42,7 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Size of the trigger icon. Uses PDS Icon sizing.
      */
-    triggerIconSize?: 'xs' | 's' | 'm' | 'l';
+    triggerIconSize?: 's' | 'm' | 'l';
     /**
      * Z-index value for the tooltip container. In most cases, the default value should be retained.
      */

package/dist/components/UtilityBar/UtilityBar.d.ts

@@ -1,8 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '../../libs/types/layout-types';
+import { PaddingScale } from '../../libs/types/layout-types';
 import './utility-bar.css';
 type UtilityBarBackground = 'default' | 'default-secondary' | 'transparent';
-type UtilityBarPadding = GridGapOptions | 'none';
 export interface UtilityBarProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Background color of the utility bar.
@@ -21,7 +20,7 @@ export interface UtilityBarProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Internal padding. Defaults to 'none'.
      */
-    padding?: UtilityBarPadding;
+    padding?: PaddingScale;
 }
 export declare const UtilityBar: ({ backgroundColor, children, className, padding, ...props }: UtilityBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/ButtonLink/ButtonLink.d.ts

@@ -3,7 +3,6 @@ import { ButtonDisplayType, ButtonSize, ButtonVariant } from '../../../libs/type
 import { PDSIcon } from '../../icons/Icon/Icon';
 import '../Button/button.css';
 import './button-link.css';
-type ButtonLinkVariant = Exclude<ButtonVariant, 'inline'>;
 /**
  * Prop types for ButtonLink
  */
@@ -39,10 +38,9 @@ export interface ButtonLinkProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Variant of the button.
      */
-    variant?: ButtonLinkVariant;
+    variant?: ButtonVariant;
 }
 /**
  * ButtonLink UI component
  */
 export declare const ButtonLink: ({ className, disabled, displayType, iconName, linkContent, size, tooltipText, variant, ...props }: ButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/buttons/CloseButton/CloseButton.d.ts

@@ -17,9 +17,9 @@ export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Size of the icon.
+     * Size of the button.
      */
-    size?: 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l';
 }
 /**
  * CloseButton UI component

package/dist/components/buttons/FilterButton/FilterButton.d.ts

@@ -0,0 +1,82 @@
+import './filter-button.css';
+/**
+ * A single option the FilterButton can filter by.
+ */
+export interface FilterButtonOption {
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Visible label for the option.
+     */
+    label: string;
+    /**
+     * Unique value used for selection.
+     */
+    value: string;
+}
+/**
+ * Prop types for FilterButton
+ */
+export interface FilterButtonProps {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Text for the clear action in the panel footer.
+     */
+    clearLabel?: string;
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * The filter key/dimension name shown in the trigger (e.g. "Status").
+     */
+    filterKey: string;
+    /**
+     * id applied to the trigger button.
+     */
+    id?: string;
+    /**
+     * Show the in-menu search input once the number of options reaches this
+     * threshold. Defaults to `8`. Set to `0` to always show it.
+     */
+    minFilterItems?: number;
+    /**
+     * Text shown when the search finds no matching options.
+     */
+    noResultsText?: string;
+    /**
+     * Called with the next selected values whenever the selection changes.
+     */
+    onSelectionChange: (values: string[]) => void;
+    /**
+     * Options the user can filter by.
+     */
+    options: FilterButtonOption[];
+    /**
+     * Accessible label for the search input.
+     */
+    searchLabel?: string;
+    /**
+     * Placeholder for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Currently selected option values (controlled).
+     */
+    selectedValues: string[];
+}
+/**
+ * FilterButton — a multiselect filter with a stateful trigger, designed to sit
+ * in a UtilityBar above a Table. Composes the Dropdown compound component
+ * (checkbox items + a search row + a Clear footer) behind a trigger with three
+ * states: default, single selection, and multiple selections (with a count).
+ *
+ * Selection is controlled: pass `selectedValues` and handle `onSelectionChange`.
+ * The consuming app owns filtering the data with those values.
+ */
+export declare const FilterButton: ({ className, clearLabel, disabled, filterKey, id, minFilterItems, noResultsText, onSelectionChange, options, searchLabel, searchPlaceholder, selectedValues, }: FilterButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -1,5 +1,6 @@
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './segmented-button.css';
+export type SegmentedButtonSize = 's' | 'xs';
 /**
  * Structure for each option in the SegmentedButton component.
  */
@@ -69,6 +70,11 @@ export interface SegmentedButtonProps {
      * include an optional icon or spinner before the label and a tally after it.
      */
     options: OptionType[];
+    /**
+     * Size of the segmented button. `'s'` matches the small button height (32px);
+     * `'xs'` matches the extra-small button height (24px).
+     */
+    size?: SegmentedButtonSize;
     /**
      * Controlled value. Cannot be used together with `defaultValue`.
      */
@@ -77,5 +83,5 @@ export interface SegmentedButtonProps {
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/cards/ActionCard/ActionCard.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
-import { GridGapOptions } from '../../../libs/types/layout-types';
+import { PaddingScale } from '../../../libs/types/layout-types';
 import { CardBackground, CardImageVariant } from '../../cards/Card/Card';
 import './action-card.css';
 export interface ActionCardPrimaryAction {
@@ -47,7 +47,7 @@ export interface ActionCardProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Relative padding for the `main` and `footer` slots.
      */
-    padding?: GridGapOptions;
+    padding?: PaddingScale;
     /**
      * The card-level primary action. Provide either `linkContent` (for links) or
      * `onClick` (for button actions), plus a required accessible `label`.

package/dist/components/cards/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '../../../libs/types/layout-types';
+import { PaddingScale } from '../../../libs/types/layout-types';
 import './card.css';
 export type CardBackground = 'default' | 'transparent';
 export type CardImageVariant = 'bleed' | 'inset';
@@ -28,7 +28,7 @@ export interface CardProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Relative padding for the `main` slot.
      */
-    padding?: GridGapOptions;
+    padding?: PaddingScale;
 }
 /**
  * Card UI component

package/dist/components/icons/Icon/custom-icons.d.ts

@@ -26,7 +26,7 @@
  *   serialized by the generate script.
  *
  * Testing:
- * - Check the icon at all sizes (xs through 3xl) in Storybook
+ * - Check the icon at all sizes (s through 3xl) in Storybook
  * - Verify it looks balanced next to FA icons at the same size
  */
 import React from 'react';