@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/v2Containers/WebPush/Create/preview/NotificationContainer.js

@@ -1,294 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import chromeIcon from './assets/chrome-icon.png';
-import AndroidMobileChromeHeader from './components/AndroidMobileChromeHeader';
-import AndroidMobileExpanded from './components/AndroidMobileExpanded';
-import NotificationExpandedContent from './components/NotificationExpandedContent';
-import NotificationHeader from './components/NotificationHeader';
-import WindowsChromeExpanded from './components/WindowsChromeExpanded';
-import IOSHeader from './components/IOSHeader';
-import {
-  OS_MACOS,
-  OS_IOS,
-  OS_IPADOS,
-  OS_WINDOWS,
-  OS_ANDROID_MOBILE,
-  OS_ANDROID_TABLET,
-  BROWSER_CHROME,
-  BROWSER_FIREFOX,
-  BROWSER_EDGE,
-  BROWSER_OPERA,
-  BRAND_ICON_SUPPORTED_BROWSERS,
-  BROWSER_DISPLAY_NAMES,
-  NOTIFICATION_STATE_COLLAPSED,
-  NOTIFICATION_STATE_EXPANDED,
-} from './constants';
-import {
-  getNotificationContainerClassName,
-  formatUrlForPreview,
-  transformButtonsForPreview,
-} from '../utils/previewUtils';
-
-/**
- * NotificationContainer Component
- * 
- * Standalone notification container component that renders the actual notification UI.
- * This component is decoupled from any wrapper containers and can be used
- * in different contexts (main preview, device frame preview, etc.).
- * 
- * The component renders the notification-container div with all its content:
- * - Notification header (icon, title, URL, body)
- * - Expanded content (media image, CTA buttons) when state is 'Expanded'
- * 
- * @param {string} notificationTitle - Title of the notification
- * @param {string} notificationBody - Body text of the notification
- * @param {string} url - URL for the notification
- * @param {string} selectedOS - Operating system name
- * @param {string} selectedBrowser - Browser name
- * @param {string} notificationState - 'Collapsed' or 'Expanded' (default: 'Collapsed')
- * @param {string} className - Additional CSS classes to apply to the container
- * @param {string} icon - Icon asset for the browser (defaults to Chrome)
- * @param {boolean} supportsExpanded - Whether Expanded state is supported for this variant
- * @param {boolean} enableMedia - Whether to render media section when expanded
- * @param {boolean} enableCtas - Whether to render CTA buttons when expanded
- * @param {string} imageSrc - Media/banner image source URL
- * @param {string} brandIconSrc - Brand icon image source URL
- */
-const NotificationContainer = ({
-  notificationTitle,
-  notificationBody,
-  url,
-  selectedOS,
-  selectedBrowser,
-  notificationState = NOTIFICATION_STATE_COLLAPSED,
-  className = '',
-  icon = chromeIcon,
-  supportsExpanded = true,
-  enableMedia = true,
-  enableCtas = true,
-  brandIcon = '',
-  enableBrandIconPreview = true,
-  imageSrc = '',
-  brandIconSrc = '',
-  buttons = [],
-  showSeparateIOSCTAs = false,
-}) => {
-  // Force expanded UI for Windows when Collapsed state is selected
-  // Windows only supports expanded preview - when Windows + Collapsed is selected, render expanded UI
-  // Note: If Windows needs separate Collapsed/Expanded states later, remove the second condition
-  const isExpanded = (supportsExpanded && notificationState === NOTIFICATION_STATE_EXPANDED) || 
-                     (selectedOS === OS_WINDOWS && notificationState === NOTIFICATION_STATE_COLLAPSED);
-  const notificationContainerClass = getNotificationContainerClassName(selectedOS, selectedBrowser);
-  const stateClass = isExpanded ? 'expanded' : 'collapsed';
-  const selectedBrowserLower = (selectedBrowser || '').toLowerCase();
-
-  // Platform detection object - provides clean access to all platform/browser checks
-  const platform = {
-    parts: notificationContainerClass.split('-'),
-    get os() { return this.parts[0]; },
-    get browser() { return this.parts.length === 3 ? this.parts[2] : this.parts[1]; },
-    get isMacOs() { return selectedOS === OS_MACOS; },
-    get isIOS() { return selectedOS === OS_IOS; },
-    get isIPadOS() { return selectedOS === OS_IPADOS; },
-    get isAndroidMobile() { return this.os === 'android' && this.parts[1] === 'mobile'; },
-    get isAndroidTablet() { return this.os === 'android' && this.parts[1] === 'tablet'; },
-    get isIOSBrowser() { return this.os === 'ios'; },
-    get isIPadOSBrowser() { return this.os === 'ipados'; },
-    get isWindows() { return this.os === 'windows'; },
-    get supportsBrandIcon() { return BRAND_ICON_SUPPORTED_BROWSERS.includes(selectedBrowserLower); },
-    get isMacOsBrandIconBrowser() { return this.isMacOs && this.supportsBrandIcon; },
-    get isWindowsExpanded() { return this.isWindows && isExpanded; },
-    get isMacOsExpandedBrand() { return this.isMacOs && isExpanded && this.supportsBrandIcon; },
-  };
-
-  const displayUrl = formatUrlForPreview(url) || url || '';
-  // Use real media image from form/props
-  const mediaImageUrl = imageSrc || '';
-  // Use real brand icon from form/props, fallback to prop if provided for backward compatibility
-  const actualBrandIcon = brandIconSrc || brandIcon || '';
-  const shouldShowBrandIconAndroidExpanded =
-    (platform.isAndroidMobile || platform.isAndroidTablet) && isExpanded && enableBrandIconPreview && Boolean(actualBrandIcon);
-  const ctaButtons = transformButtonsForPreview(buttons);
-
-  // Brand icon preview toggle (set enableBrandIconPreview to false to see no-brand state)
-  const shouldShowBrandIcon = (() => {
-    // iOS/iPadOS NEVER show brand icons - they use a simple notification style
-    if (platform.isIOSBrowser || platform.isIPadOSBrowser) return false;
-    
-    if (!enableBrandIconPreview || !actualBrandIcon) return false;
-    if (platform.isAndroidMobile && !isExpanded) return true;
-    if (platform.isAndroidTablet && !isExpanded) return true;
-    // macOS: show brand icon for all browsers in collapsed state
-    if (platform.isMacOs && !isExpanded) return true;
-    // Windows browsers: show brand icon in collapsed state (same as macOS Chrome)
-    if (platform.isWindows && !isExpanded) return true;
-    return false;
-  })();
-
-  const shouldShowBrandIconInExpandedMac = (() => {
-    if (!platform.isMacOsExpandedBrand) return false;
-    if (!enableBrandIconPreview || !actualBrandIcon) return false;
-    return true;
-  })();
-
-  const shouldRenderExpandedMedia = (() => {
-    if (!enableMedia) return false;
-    if (platform.isMacOsExpandedBrand) {
-      // For macOS brand browsers, only render if brand icon is available.
-      return shouldShowBrandIconInExpandedMac;
-    }
-    return Boolean(mediaImageUrl);
-  })();
-
-  const containerClasses = [
-    'notification-container',
-    notificationContainerClass,
-    stateClass,
-    className,
-    platform.isWindowsExpanded ? 'windows-chrome-expanded' : '',
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .trim();
-
-  // Get browser display name for Windows expanded notifications
-  const getBrowserDisplayName = (browser) => {
-    return BROWSER_DISPLAY_NAMES[browser] || browser;
-  };
-
-  // Check if we need to render separate CTA container for iOS + Collapsed
-  const shouldRenderSeparateIOSCTAs = 
-    showSeparateIOSCTAs &&
-    platform.isIOSBrowser && 
-    !isExpanded && 
-    enableCtas && 
-    ctaButtons && 
-    ctaButtons.length > 0;
-
-  const notificationContent = (
-    <div className={containerClasses}>
-      {platform.isWindowsExpanded ? (
-        <WindowsChromeExpanded
-          icon={icon}
-          brandIcon={actualBrandIcon}
-          enableBrandIconPreview={enableBrandIconPreview}
-          notificationTitle={notificationTitle}
-          notificationBody={notificationBody}
-          displayUrl={displayUrl}
-          browserName={getBrowserDisplayName(selectedBrowser)}
-          mediaImageUrl={mediaImageUrl}
-          enableCtas={enableCtas}
-          ctaButtons={ctaButtons}
-        />
-      ) : (platform.isAndroidMobile || platform.isAndroidTablet) && isExpanded ? (
-        <AndroidMobileExpanded
-          icon={icon}
-          selectedBrowser={selectedBrowser}
-          notificationTitle={notificationTitle}
-          notificationBody={notificationBody}
-          displayUrl={displayUrl}
-          brandIcon={actualBrandIcon}
-          shouldShowBrandIcon={shouldShowBrandIcon}
-          shouldShowBrandIconExpanded={shouldShowBrandIconAndroidExpanded}
-          mediaImageUrl={mediaImageUrl}
-          enableCtas={enableCtas}
-          ctaButtons={ctaButtons}
-        />
-      ) : (
-        <>
-          {(platform.isAndroidMobile || platform.isAndroidTablet) && !isExpanded ? (
-            <AndroidMobileChromeHeader
-              icon={icon}
-              selectedBrowser={selectedBrowser}
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-              brandIcon={actualBrandIcon}
-              shouldShowBrandIcon={shouldShowBrandIcon}
-            />
-          ) : (platform.isIOSBrowser || platform.isIPadOSBrowser) ? (
-            <IOSHeader
-              icon={icon}
-              selectedBrowser={selectedBrowser}
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-            />
-          ) : (
-            <NotificationHeader
-              icon={icon}
-              selectedBrowser={selectedBrowser}
-              notificationTitle={notificationTitle}
-              displayUrl={displayUrl}
-              notificationBody={notificationBody}
-              shouldShowBrandIcon={shouldShowBrandIcon}
-              brandIcon={actualBrandIcon}
-              isExpanded={isExpanded}
-            />
-          )}
-
-          {isExpanded && (
-            <NotificationExpandedContent
-              shouldRenderExpandedMedia={shouldRenderExpandedMedia}
-              shouldShowBrandIconInExpandedMac={shouldShowBrandIconInExpandedMac}
-              brandIcon={actualBrandIcon}
-              mediaImageUrl={mediaImageUrl}
-              enableCtas={enableCtas}
-              ctaButtons={ctaButtons}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-
-  // For iOS + Collapsed with CTAs, render notification and separate CTA container
-  if (shouldRenderSeparateIOSCTAs) {
-    return (
-      <div className="ios-notification-wrapper">
-        {notificationContent}
-        <div className="ios-cta-container">
-          {ctaButtons.map((button) => (
-            <button
-              key={button.id}
-              type="button"
-              className="ios-cta-button"
-            >
-              {button.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // Default: return just the notification container
-  return notificationContent;
-};
-
-NotificationContainer.propTypes = {
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  url: PropTypes.string,
-  selectedOS: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
-  className: PropTypes.string,
-  icon: PropTypes.string,
-  supportsExpanded: PropTypes.bool,
-  enableMedia: PropTypes.bool,
-  enableCtas: PropTypes.bool,
-  brandIcon: PropTypes.string,
-  enableBrandIconPreview: PropTypes.bool,
-  imageSrc: PropTypes.string,
-  brandIconSrc: PropTypes.string,
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string,
-      url: PropTypes.string,
-      type: PropTypes.string,
-    })
-  ),
-  showSeparateIOSCTAs: PropTypes.bool,
-};
-
-export default NotificationContainer;
-

package/v2Containers/WebPush/Create/preview/PreviewContent.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import NotificationContainer from './NotificationContainer';
-import { getResolvedVariant } from './config/notificationMappings';
-import { NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED } from './constants';
-import './preview.scss';
-
-/**
- * PreviewContent Component
- * 
- * Renders the preview area for web push notification.
- * Displays actual notification preview for macOS + Chrome combination.
- * For other OS/Browser combinations, shows the selection text.
- * 
- * This component wraps the NotificationContainer in a preview-specific
- * container (notification-preview) for the main preview area.
- * 
- * @param {string} notificationState - NOTIFICATION_STATE_COLLAPSED or NOTIFICATION_STATE_EXPANDED (default: NOTIFICATION_STATE_COLLAPSED)
- */
-
-const PreviewContent = ({
-  notificationTitle,
-  notificationBody,
-  url,
-  selectedOS,
-  selectedBrowser,
-  notificationState = NOTIFICATION_STATE_COLLAPSED,
-  imageSrc,
-  brandIconSrc,
-  buttons = [],
-}) => {
-  const resolvedVariant = getResolvedVariant(selectedOS, selectedBrowser, notificationState);
-
-  return (
-    <div className="preview-content">
-      <div className="preview-content-wrapper">
-        <div className={`notification-preview ${resolvedVariant ? '' : 'preview-unavailable'}`.trim()}>
-          {resolvedVariant && (
-            <NotificationContainer
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-              url={url}
-              selectedOS={selectedOS}
-              selectedBrowser={selectedBrowser}
-              notificationState={resolvedVariant.stateKey}
-              icon={resolvedVariant.variant.icon}
-              supportsExpanded={resolvedVariant.stateConfig.supportsExpanded}
-              enableMedia={resolvedVariant.stateConfig.showMedia}
-              enableCtas={buttons.length > 0}
-              className={resolvedVariant.variant.notificationClassName}
-              imageSrc={imageSrc}
-              brandIconSrc={brandIconSrc}
-              buttons={buttons}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-PreviewContent.propTypes = {
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  url: PropTypes.string,
-  selectedOS: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
-  imageSrc: PropTypes.string,
-  brandIconSrc: PropTypes.string,
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string,
-      url: PropTypes.string,
-      type: PropTypes.string,
-    })
-  ),
-};
-
-PreviewContent.defaultProps = {
-  notificationTitle: '',
-  notificationBody: '',
-  url: '',
-  imageSrc: '',
-  brandIconSrc: '',
-  buttons: [],
-};
-
-export default PreviewContent;
-

package/v2Containers/WebPush/Create/preview/PreviewControls.js

@@ -1,305 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import { LAYOUT_MODE, SELECT_WIDTH, STATE_OPTIONS } from './constants';
-import { getBrowserOptionsForOS, getSupportedStates } from './config/notificationMappings';
-import messages from '../messages';
-import './preview.scss';
-
-/**
- * PreviewControls Component
- * 
- * Renders dropdown controls for selecting Operating System, Browser, and State
- * for the web push notification preview.
- * 
- * Implements cascading dropdown reset behavior:
- * - When OS changes, Browser and State reset to first available option
- * - When Browser changes, State resets to first available option
- * 
- * @param {string} layoutMode - 'inline', 'newRow', or 'compact' (default: 'newRow')
- * @param {boolean} showStateDropdown - Whether to show the State dropdown (default: true)
- * @param {boolean|function} stateDropdownDisabled - Controls State dropdown disabled state.
- *   - If boolean: directly sets disabled state
- *   - If function: receives (selectedOS, selectedBrowser, stateOptions) and returns boolean
- *   - Note: Can be extended to accept object { disabled: boolean, tooltip?: string } for tooltip support
- */
-const PreviewControls = ({
-  selectedOS,
-  selectedBrowser,
-  selectedState,
-  osOptions,
-  browserOptions,
-  stateOptions,
-  onOSChange,
-  onBrowserChange,
-  onStateChange,
-  layoutMode = LAYOUT_MODE.NEW_ROW,
-  showStateDropdown = true,
-  stateDropdownDisabled = false,
-}) => {
-  const selectWidth = layoutMode === LAYOUT_MODE.COMPACT ? SELECT_WIDTH.COMPACT : SELECT_WIDTH.FULL;
-
-  // Determine if State dropdown should be disabled
-  // Supports boolean or function for extensibility
-  // Note: Can be extended to support object { disabled: boolean, tooltip?: string } for tooltip messages
-  const isStateDropdownDisabled = useMemo(() => {
-    // Disable State dropdown for Windows (only Collapsed state is supported)
-    if (selectedOS === 'Windows') {
-      return true;
-    }
-    return typeof stateDropdownDisabled === 'function'
-      ? stateDropdownDisabled(selectedOS, selectedBrowser, stateOptions)
-      : stateDropdownDisabled;
-  }, [stateDropdownDisabled, selectedOS, selectedBrowser, stateOptions]);
-
-  // Memoized State dropdown content to avoid recreating on every render
-  const stateDropdownContent = useMemo(() => (
-    <>
-      <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-        <FormattedMessage {...messages.state} />
-      </CapLabel>
-      <CapSelect.CapCustomSelect
-        width={selectWidth}
-        options={stateOptions}
-        value={selectedState}
-        onChange={onStateChange}
-        // Note: Add tooltip prop here when tooltip mechanism is implemented
-        // tooltip={tooltipMessage ? tooltipMessage : undefined}
-      />
-    </>
-  ), [selectWidth, stateOptions, selectedState, onStateChange]);
-
-  // Memoized State dropdown renderer with disabled wrapper
-  const renderStateDropdown = useMemo(() => {
-    if (isStateDropdownDisabled) {
-      return (
-        <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
-          {stateDropdownContent}
-        </div>
-      );
-    }
-    return stateDropdownContent;
-  }, [isStateDropdownDisabled, stateDropdownContent]);
-
-  /**
-   * Cascading dropdown reset handler for OS changes
-   * Resets Browser and State to first available option when OS changes
-   * 
-   * This implements cascading dropdown behavior: when a parent dropdown (OS) changes,
-   * dependent dropdowns (Browser, State) reset to their first available option.
-   */
-  const handleOSChangeWithCascade = useCallback((value) => {
-    onOSChange(value);
-    
-    // Get browser options for the new OS to ensure we reset to a valid option
-    const newBrowserOptions = getBrowserOptionsForOS(value);
-    
-    // Reset Browser to first available option for the new OS
-    const newBrowserValue = newBrowserOptions && newBrowserOptions.length > 0 
-      ? newBrowserOptions[0].value 
-      : null;
-    
-    if (newBrowserValue && onBrowserChange) {
-      onBrowserChange(newBrowserValue);
-    }
-    
-    // Compute fresh state options based on new OS and Browser combination
-    // Only reset state if stateOptions is provided and not empty
-    if (showStateDropdown && newBrowserValue && onStateChange && stateOptions && stateOptions.length > 0) {
-      // For Windows, always reset to "Collapsed" (only supported state)
-      if (value === 'Windows') {
-        onStateChange('Collapsed');
-      } else {
-        const newSupportedStates = getSupportedStates(value, newBrowserValue);
-        const newStateOptions = newSupportedStates.length > 0
-          ? newSupportedStates.map((state) => ({ value: state, label: state }))
-          : STATE_OPTIONS;
-        
-        if (newStateOptions.length > 0) {
-          onStateChange(newStateOptions[0].value);
-        }
-      }
-    }
-  }, [onOSChange, onBrowserChange, onStateChange, stateOptions, showStateDropdown]);
-
-  /**
-   * Cascading dropdown reset handler for Browser changes
-   * Resets State to first available option when Browser changes
-   */
-  const handleBrowserChangeWithCascade = useCallback((value) => {
-    onBrowserChange(value);
-    
-    // Compute fresh state options based on current OS and new Browser combination
-    // Only reset state if stateOptions is provided and not empty
-    if (showStateDropdown && onStateChange && stateOptions && stateOptions.length > 0) {
-      const newSupportedStates = getSupportedStates(selectedOS, value);
-      const newStateOptions = newSupportedStates.length > 0
-        ? newSupportedStates.map((state) => ({ value: state, label: state }))
-        : STATE_OPTIONS;
-      
-      if (newStateOptions.length > 0) {
-        onStateChange(newStateOptions[0].value);
-      }
-    }
-  }, [onBrowserChange, onStateChange, selectedOS, stateOptions, showStateDropdown]);
-
-  const controls = [
-    {
-      key: 'os',
-      label: 'operatingSystem',
-      value: selectedOS,
-      options: osOptions,
-      onChange: handleOSChangeWithCascade,
-      className: 'preview-control-os',
-    },
-    {
-      key: 'browser',
-      label: 'browser',
-      value: selectedBrowser,
-      options: browserOptions,
-      onChange: handleBrowserChangeWithCascade,
-      className: 'preview-control-browser',
-    },
-  ];
-
-  if (showStateDropdown) {
-    controls.push({
-      key: 'state',
-      label: 'state',
-      value: selectedState,
-      options: stateOptions,
-      onChange: onStateChange,
-      className: 'preview-control-state',
-      disabled: isStateDropdownDisabled,
-    });
-  }
-
-  const renderControl = useCallback(({ key, label, value, options, onChange, className, disabled }) => {
-    // Special handling for state dropdown - use memoized renderer
-    if (key === 'state') {
-      return (
-        <div key={key} className={`preview-control ${className}`}>
-          {renderStateDropdown}
-        </div>
-      );
-    }
-
-    const controlContent = (
-      <>
-        <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-          <FormattedMessage {...messages[label]} />
-        </CapLabel>
-        <CapSelect.CapCustomSelect
-          width={selectWidth}
-          options={options}
-          value={value}
-          onChange={onChange}
-        />
-      </>
-    );
-
-    return (
-      <div key={key} className={`preview-control ${className}`}>
-        {disabled ? (
-          <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
-            {controlContent}
-          </div>
-        ) : (
-          controlContent
-        )}
-      </div>
-    );
-  }, [selectWidth, renderStateDropdown]);
-
-  if (layoutMode === LAYOUT_MODE.COMPACT) {
-    return (
-      <div className="preview-controls preview-controls-compact">
-        {controls.map(renderControl)}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <CapRow className="preview-controls">
-        <CapColumn span={12} className="preview-control-os">
-          <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-            <FormattedMessage {...messages.operatingSystem} />
-          </CapLabel>
-          <CapSelect.CapCustomSelect
-            width={selectWidth}
-            options={osOptions}
-            value={selectedOS}
-            onChange={handleOSChangeWithCascade}
-          />
-        </CapColumn>
-        <CapColumn span={12} className="preview-control-browser">
-          <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-            <FormattedMessage {...messages.browser} />
-          </CapLabel>
-          <CapSelect.CapCustomSelect
-            width={selectWidth}
-            options={browserOptions}
-            value={selectedBrowser}
-            onChange={handleBrowserChangeWithCascade}
-          />
-        </CapColumn>
-      </CapRow>
-      {showStateDropdown && layoutMode === LAYOUT_MODE.NEW_ROW && (
-        <CapRow className="preview-controls-state">
-          <CapColumn span={12} className="preview-control-state">
-            {renderStateDropdown}
-          </CapColumn>
-        </CapRow>
-      )}
-      {showStateDropdown && layoutMode === LAYOUT_MODE.INLINE && (
-        <CapRow className="preview-controls">
-          <CapColumn span={12} className="preview-control-state">
-            {renderStateDropdown}
-          </CapColumn>
-        </CapRow>
-      )}
-    </>
-  );
-};
-
-PreviewControls.propTypes = {
-  selectedOS: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  selectedState: PropTypes.string,
-  osOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  browserOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  stateOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ),
-  onOSChange: PropTypes.func.isRequired,
-  onBrowserChange: PropTypes.func.isRequired,
-  onStateChange: PropTypes.func,
-  layoutMode: PropTypes.oneOf([LAYOUT_MODE.INLINE, LAYOUT_MODE.NEW_ROW, LAYOUT_MODE.COMPACT]),
-  showStateDropdown: PropTypes.bool,
-  stateDropdownDisabled: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.func, // (selectedOS, selectedBrowser, stateOptions) => boolean
-    // Note: Can add PropTypes.shape({ disabled: PropTypes.bool, tooltip: PropTypes.string }) for tooltip support
-  ]),
-};
-
-export default PreviewControls;
-