@razorpay/blade/build/lib/web/production/components/TopNav/TopNavOverlayThemeOverride.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { ThemeProvider } from 'styled-components';
import { useTopNavContext } from './TopNavContext.js';
import '../../tokens/theme/index.js';
import '../BladeProvider/index.js';
import useTheme, { ThemeContext } from '../BladeProvider/useTheme.js';
import { jsx, Fragment } from 'react/jsx-runtime';
import bladeTheme from '../../tokens/theme/bladeTheme.js';
import { BladeProvider } from '../BladeProvider/BladeProvider.web.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * Wraps children with the correct theme when rendered inside TopNav.
 *
 * TopNav forces a dark theme, but overlay/child components should render
 * in the app's original colorScheme. This wrapper centralises that logic.
 *
 * - Without `shouldOverrideTheme` (default): wraps with BladeProvider using
 *   the app's original colorScheme (for portalled overlays like Popover, Menu).
 * - With `shouldOverrideTheme={false}`: stays in TopNav's dark theme.
 * - With `shouldOverrideTheme={true}`: switches to the app's original colorScheme
 *   via ThemeContext + StyledThemeProvider (for inline theme switches like SearchInput).
 *
 * Outside TopNav this is a no-op passthrough.
 */
var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref) {
  var children = _ref.children,
    shouldOverrideTheme = _ref.shouldOverrideTheme;
  var topNavContext = useTopNavContext();
  var _useTheme = useTheme(),
    platform = _useTheme.platform;
  var isDark = shouldOverrideTheme ? (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.colorScheme) === 'dark' : true;
  var overrideTheme = React__default.useMemo(function () {
    return _objectSpread(_objectSpread({}, bladeTheme), {}, {
      colors: isDark ? bladeTheme.colors.onDark : bladeTheme.colors.onLight,
      elevation: isDark ? bladeTheme.elevation.onDark : bladeTheme.elevation.onLight,
      typography: bladeTheme.typography[platform]
    });
  }, [isDark, platform]);
  if (!topNavContext) {
    // eslint-disable-next-line react/jsx-no-useless-fragment
    return /*#__PURE__*/jsx(Fragment, {
      children: children
    });
  }
  if (shouldOverrideTheme !== undefined) {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    var noop = function noop() {};
    return /*#__PURE__*/jsx(ThemeContext.Provider, {
      value: {
        theme: overrideTheme,
        colorScheme: shouldOverrideTheme ? topNavContext.colorScheme : 'dark',
        setColorScheme: noop,
        platform: platform
      },
      children: /*#__PURE__*/jsx(ThemeProvider, {
        theme: overrideTheme,
        children: children
      })
    });
  }
  return /*#__PURE__*/jsx(BladeProvider, {
    themeTokens: bladeTheme,
    colorScheme: topNavContext.colorScheme,
    children: children
  });
};

export { TopNavOverlayThemeOverride };
//# sourceMappingURL=TopNavOverlayThemeOverride.js.map