[Emotion] Publicly export cloneElementWithCss service/util

src/components/accessibility/screen_reader_only/screen_reader_only.tsx

@@ -9,7 +9,7 @@
 import { ReactElement, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-import { cloneElementWithCss } from '../../../services/theme/clone_element';
+import { cloneElementWithCss } from '../../../services';
 import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles';
 
 export interface EuiScreenReaderOnlyProps {

src/components/card/card.tsx

@@ -16,8 +16,11 @@ import React, {
 import classNames from 'classnames';
 
 import { CommonProps, ExclusiveUnion } from '../common';
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import {
+  getSecureRelForTarget,
+  useEuiTheme,
+  cloneElementWithCss,
+} from '../../services';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';

src/components/facet/facet_button.tsx

@@ -20,8 +20,7 @@ import { EuiNotificationBadge } from '../badge';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiInnerText } from '../inner_text';
 
-import { cloneElementWithCss } from '../../services/theme/clone_element';
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import {
   euiFacetButtonStyles,
   euiFacetButtonTextStyles,

src/components/list_group/list_group.tsx

@@ -11,8 +11,7 @@ import classNames from 'classnames';
 
 import { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { logicalStyle } from '../../global_styling';
 
 import { euiListGroupStyles } from './list_group.styles';

src/components/list_group/list_group_item.tsx

@@ -27,8 +27,11 @@ import {
   EuiListGroupItemExtraActionProps,
 } from './list_group_item_extra_action';
 
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import {
+  getSecureRelForTarget,
+  useEuiTheme,
+  cloneElementWithCss,
+} from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 
 import {

src/components/text/text_align.tsx

@@ -12,7 +12,7 @@ import React, {
   isValidElement,
 } from 'react';
 import { CommonProps } from '../common';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { cloneElementWithCss } from '../../services';
 
 import { euiTextAlignStyles } from './text_align.styles';
 

src/components/text/text_color.tsx

@@ -12,10 +12,10 @@ import React, {
   CSSProperties,
   isValidElement,
 } from 'react';
+
 import { CommonProps } from '../common';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 
-import { useEuiTheme } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 
 export const COLORS = [

src/components/title/title.tsx

@@ -8,8 +8,7 @@
 
 import { FunctionComponent, ReactElement } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { euiTitleStyles } from './title.styles';
 import { CommonProps } from '../common';
 

src/components/toast/global_toast_list_item.tsx

@@ -8,8 +8,7 @@
 
 import { FunctionComponent, ReactElement } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { CommonProps } from '../common';
 import { euiGlobalToastListItemStyles } from './global_toast_list.styles';
 

src/services/theme/clone_element.tsx → src/services/emotion/clone_element.tsx

@@ -13,8 +13,6 @@ import { jsx } from '@emotion/react';
  * React.cloneElement does not work if the cloned element does not already have the
  * `css` prop - as a result, we need to use `jsx()` to manually clone the element
  * See https://github.com/emotion-js/emotion/issues/1404
- *
- * NOTE: We're still using/testing this utility internally, so this is not yet a public API
  */
 export const cloneElementWithCss = (
   element: any,

src/services/emotion/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './clone_element';

src/services/index.ts

@@ -72,6 +72,7 @@ export { useColorPickerState, useColorStopsState } from './color_picker';
 export type { EuiSetColorMethod } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
+export * from './emotion';
 export * from './findElement';
 export {
   dateFormatAliases,

src/test/internal/render_custom_styles.tsx

@@ -11,7 +11,7 @@ import { css } from '@emotion/react';
 import { get, set } from 'lodash';
 
 import { render } from '../rtl';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { cloneElementWithCss } from '../../services';
 import { keysOf } from '../../components';
 
 export const customStyles = {

upcoming_changelogs/6939.md

@@ -0,0 +1 @@
+- Added a new `cloneElementWithCss` Emotion utility