@automattic/jetpack-components 3.2.0 → 4.0.0

package/components/icon-tooltip/index.tsx

@@ -1,3 +1,4 @@
+import { speak } from '@wordpress/a11y';
 import { Popover } from '@wordpress/components';
 import { focus } from '@wordpress/dom';
 import { Icon, info } from '@wordpress/icons';
@@ -43,6 +44,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 	placement = 'bottom-end',
 	animate = true,
 	iconCode = info,
+	label,
 	iconSize = 18,
 	offset = 10,
 	title,
@@ -62,7 +64,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 	const [ hoverTimeout, setHoverTimeout ] = useState( null );
 	const wrapperRef = useRef< HTMLDivElement >( null );
 	const popoverRef = useRef< HTMLDivElement >( null );
-	const triggerRef = useRef< HTMLAnchorElement >( null );
+	const triggerRef = useRef< HTMLElement >( null );
 	const hasTextTrigger = trigger !== undefined;
 	// Where focus should land after Tab leaves the tooltip. The effect below applies it, rather
 	// than the handler, because Popover puts focus back on the trigger as it unmounts.
@@ -80,14 +82,17 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		[ isVisible, setIsVisible, onTriggerClick ]
 	);
 
-	// Focus can stay on a text trigger while its tooltip is open, so it handles the dialog keys too.
+	// Focus can stay on the trigger while its tooltip is open, so it handles the dialog keys too.
 	const handleTriggerKeyDown = useCallback(
-		( event: KeyboardEvent< HTMLAnchorElement > ) => {
+		( event: KeyboardEvent< HTMLElement > ) => {
+			// A held key repeats activation, so only its first press toggles.
+			if ( event.repeat && ( event.key === 'Enter' || event.key === ' ' ) ) {
+				event.preventDefault();
+				return;
+			}
 			// A link only activates on Enter; a button also activates on Space.
-			if ( event.key === ' ' ) {
-				if ( ! event.repeat ) {
-					toggleTooltip( event );
-				}
+			if ( hasTextTrigger && event.key === ' ' ) {
+				toggleTooltip( event );
 				return;
 			}
 			if ( ! isVisible ) {
@@ -107,7 +112,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 				}
 			}
 		},
-		[ isVisible, hideTooltip, toggleTooltip ]
+		[ hasTextTrigger, isVisible, hideTooltip, toggleTooltip ]
 	);
 
 	const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
@@ -151,10 +156,6 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		[ hideTooltip ]
 	);
 
-	const focusOnOpen =
-		isForcedToShow || ( hasTextTrigger && ! openedByHover.current )
-			? 'firstElement'
-			: ! openedByHover.current;
 	const args = {
 		// To be compatible with deprecating prop `position`.
 		position: placementsToPositions( placement ),
@@ -164,9 +165,9 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		resize: false,
 		flip: false,
 		offset, // The distance (in px) between the anchor and the popover.
-		// Focusing the popover itself puts Escape in reach even with nothing tabbable inside. A text
-		// trigger or caller-controlled popover moves focus to its first link, if it has one.
-		focusOnMount: focusOnOpen,
+		// Focus stays on the trigger, which handles the dialog keys; a caller-controlled popover
+		// has no trigger, so it focuses its first button instead.
+		focusOnMount: isForcedToShow ? 'firstElement' : false,
 		// Tab moves through the popover in document order rather than cycling inside it, and
 		// handlePopoverKeyDown decides where it lands on the way out.
 		constrainTabbing: false,
@@ -174,7 +175,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		ref: popoverRef,
 		onClose: () => {
 			const popover = popoverRef.current;
-			if ( hasTextTrigger && popover?.contains( popover.ownerDocument.activeElement ) ) {
+			if ( popover?.contains( popover.ownerDocument.activeElement ) ) {
 				focusAfterClose.current = triggerRef.current;
 			}
 			hideTooltip();
@@ -215,6 +216,21 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		return () => doc?.removeEventListener( 'pointerdown', handlePointerDown );
 	}, [ isVisible, isForcedToShow, closeOnClickOutside, hideTooltip ] );
 
+	// Hover leaves focus elsewhere, so Escape is watched directly to keep the content dismissible.
+	useEffect( () => {
+		if ( ! isVisible || ! openedByHover.current ) {
+			return;
+		}
+		const doc = wrapperRef.current?.ownerDocument;
+		const handleKeyDown = ( event: globalThis.KeyboardEvent ) => {
+			if ( event.key === 'Escape' ) {
+				hideTooltip();
+			}
+		};
+		doc?.addEventListener( 'keydown', handleKeyDown );
+		return () => doc?.removeEventListener( 'keydown', handleKeyDown );
+	}, [ isVisible, hideTooltip ] );
+
 	useEffect( () => {
 		if ( isForcedToShow || isVisible ) {
 			return;
@@ -224,6 +240,14 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		destination?.focus();
 	}, [ isForcedToShow, isVisible ] );
 
+	// Focus stays on the trigger, so a screen reader hears the popover through an announcement.
+	useEffect( () => {
+		const popover = popoverRef.current;
+		if ( isVisible && ! openedByHover.current && popover ) {
+			speak( popover.innerText ?? popover.textContent, 'polite' );
+		}
+	}, [ isVisible ] );
+
 	const handleMouseEnter = useCallback( () => {
 		if ( hoverShow ) {
 			if ( hoverTimeout ) {
@@ -270,7 +294,7 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 				<>
 					{ /* A link, not a button, so it keeps the host page's link styling. */ }
 					<a
-						ref={ triggerRef }
+						ref={ triggerRef as React.RefObject< HTMLAnchorElement > }
 						href="#"
 						role="button"
 						className="icon-tooltip-trigger"
@@ -286,7 +310,14 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 				</>
 			) }
 			{ ! hasTextTrigger && ! isAnchorWrapper && (
-				<Button variant="link" aria-expanded={ isVisible } onClick={ toggleTooltip }>
+				<Button
+					ref={ triggerRef }
+					variant="link"
+					aria-label={ label }
+					aria-expanded={ isVisible }
+					onClick={ toggleTooltip }
+					onKeyDown={ handleTriggerKeyDown }
+				>
 					<Icon className={ iconClassName } icon={ iconCode } size={ iconSize } />
 				</Button>
 			) }

package/components/icon-tooltip/style.scss

@@ -107,14 +107,6 @@ $arrow-color: var(--jp-gray);
 .icon-tooltip-container {
 	// Recover events
 	pointer-events: all;
-	// Takes focus on open, but its box is wider than the visible content,
-	// so the ring goes on the content instead.
-	outline: none;
-
-	&:focus-visible .components-popover__content {
-		outline: var(--wp-admin-border-width-focus, 2px) solid var(--wp-admin-theme-color, #3858e9);
-	}
-
 	// __content styles here covers both the inline and portal modes
 	.components-popover__content {
 		padding: 24px;

package/components/icon-tooltip/types.ts

@@ -41,6 +41,11 @@ export type IconTooltipProps = {
 	 */
 	iconCode?: ComponentProps< typeof Icon >[ 'icon' ];
 
+	/**
+	 * The accessible name of the icon button. Ignored when `trigger` is set, since its text names it.
+	 */
+	label?: string;
+
 	/**
 	 * The title of Popover.
 	 */

package/components/jetpack-footer/style.scss

@@ -1,10 +1,7 @@
-@use "sass:meta";
-@include meta.load-css("pkg:@wordpress/theme/design-tokens.css");
-
 .jetpack-footer {
-	border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	box-sizing: border-box;
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
 	display: flex;

package/components/jitm-slot/index.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+import { useLayoutEffect, useRef } from 'react';
+import './style.scss';
+import type { JitmSlotProps } from './types.ts';
+import type { JSX, FC } from 'react';
+
+const NOTICES_ID = 'jp-admin-notices';
+
+/**
+ * Returns the page's one `#jp-admin-notices`, creating it on first use.
+ *
+ * Found through the DOM, not a module variable: each wp-build route bundles its own copy
+ * of this module.
+ *
+ * @return {HTMLElement} The element.
+ */
+const getNotices = (): HTMLElement => {
+	let element = document.getElementById( NOTICES_ID );
+	if ( ! element ) {
+		element = document.createElement( 'div' );
+		element.id = NOTICES_ID;
+	}
+	return element;
+};
+
+/**
+ * Hosts the element the JITM script re-parents its card into.
+ *
+ * The JITM script places its card once per page load, so the element outlives any
+ * one slot: an unmounted slot parks it, hidden, and the next slot takes it back.
+ * `className` is for width and alignment; `style.scss` owns spacing.
+ *
+ * @param {JitmSlotProps} props - Component props.
+ * @return {JSX.Element} The slot.
+ */
+const JitmSlot: FC< JitmSlotProps > = ( { className, inset } ) => {
+	const ref = useRef< HTMLDivElement >( null );
+
+	useLayoutEffect( () => {
+		const host = ref.current;
+		if ( ! host ) {
+			return;
+		}
+
+		const element = getNotices();
+		element.hidden = false;
+		host.appendChild( element );
+
+		return () => {
+			// A slot that mounted before this one unmounted may already hold it.
+			if ( element.parentNode === host ) {
+				element.hidden = true;
+				document.body.appendChild( element );
+			}
+		};
+	}, [] );
+
+	return (
+		<div
+			ref={ ref }
+			className={ clsx( 'jp-jitm-slot', { 'jp-jitm-slot--inset': inset }, className ) }
+			data-testid="jp-jitm-slot"
+		/>
+	);
+};
+
+export default JitmSlot;

package/components/jitm-slot/style.scss

@@ -0,0 +1,16 @@
+// The slot is always rendered and usually empty, so it takes no space
+// of its own; spacing sits on the card so a dismissed one leaves no gap.
+.jp-jitm-slot {
+	margin: 0;
+	padding: 0;
+
+	// `jitm-card` comes from packages/jitm/src/js/jetpack-jitm.js.
+	.jitm-card {
+		margin: var(--wpds-dimension-gap-xl) 0;
+	}
+}
+
+// Same specificity as the rule above, so it has to come after it.
+.jp-jitm-slot--inset .jitm-card {
+	margin-inline: var(--wpds-dimension-padding-2xl);
+}

package/components/jitm-slot/types.ts

@@ -0,0 +1,10 @@
+export type JitmSlotProps = {
+	/**
+	 * Layout the dashboard owns: width, column span, centering. Not spacing.
+	 */
+	className?: string;
+	/**
+	 * The slot sits outside the page's padded container, so the card takes the page gutter.
+	 */
+	inset?: boolean;
+};

package/components/text/style.module.scss

@@ -89,9 +89,9 @@ $props: (
 
 $sides: (
 	"top": "t",
-	"right": "r",
+	"inline-end": "r",
 	"bottom": "b",
-	"left": "l",
+	"inline-start": "l",
 );
 
 @each $prop, $p in $props {
@@ -106,8 +106,8 @@ $sides: (
 
 		/* mx, px */
 		.#{$p}x-#{$size} {
-			#{$prop}-left: calc(var(--spacing-base) * #{$size});
-			#{$prop}-right: calc(var(--spacing-base) * #{$size});
+			#{$prop}-inline-start: calc(var(--spacing-base) * #{$size});
+			#{$prop}-inline-end: calc(var(--spacing-base) * #{$size});
 		}
 
 		.#{$p}y-#{$size} {

package/components/text/types.ts

@@ -9,11 +9,11 @@ export type TextProps = {
 	m?: SpacingValue;
 	/** margin-top */
 	mt?: SpacingValue;
-	/** margin-right */
+	/** margin-inline-end (right in LTR) */
 	mr?: SpacingValue;
 	/** margin-bottom */
 	mb?: SpacingValue;
-	/** margin-left */
+	/** margin-inline-start (left in LTR) */
 	ml?: SpacingValue;
 	/** margin left and right */
 	mx?: SpacingValue;
@@ -23,11 +23,11 @@ export type TextProps = {
 	p?: SpacingValue;
 	/** padding-top */
 	pt?: SpacingValue;
-	/** padding-right */
+	/** padding-inline-end (right in LTR) */
 	pr?: SpacingValue;
 	/** padding-bottom */
 	pb?: SpacingValue;
-	/** padding-left */
+	/** padding-inline-start (left in LTR) */
 	pl?: SpacingValue;
 	/** padding left and right */
 	px?: SpacingValue;

package/components/theme-provider/index.tsx

@@ -121,7 +121,7 @@ const ThemeProvider: FC< ThemeProviderProps > = ( {
 	id,
 	withGlobalStyles = true,
 } ) => {
-	const themeWrapperRef = useRef< HTMLDivElement >();
+	const themeWrapperRef = useRef< HTMLDivElement >( undefined );
 
 	// Check whether the theme provider instance is already registered.
 	const isAlreadyProvided = globalThemeInstances?.[ id ]?.provided;

package/index.ts

@@ -35,6 +35,7 @@ export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
+export { default as JitmSlot } from './components/jitm-slot/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
@@ -56,11 +57,9 @@ export { default as ProductPrice } from './components/product-price/index.tsx';
 export { default as DotPager } from './components/dot-pager/index.tsx';
 export { default as DonutMeter } from './components/donut-meter/index.tsx';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.tsx';
-export { default as Notice } from './components/notice/index.tsx';
 export { default as Popover } from './components/popover/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
-export { default as ZendeskChat } from './components/zendesk-chat/index.tsx';
 export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "3.2.0",
+	"version": "4.0.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -46,6 +46,10 @@
 			"types": "./build/components/jetpack-logo/index.d.ts",
 			"default": "./build/components/jetpack-logo/index.js"
 		},
+		"./jitm-slot": {
+			"types": "./build/components/jitm-slot/index.d.ts",
+			"default": "./build/components/jitm-slot/index.js"
+		},
 		"./pricing-table": {
 			"types": "./build/components/pricing-table/index.d.ts",
 			"default": "./build/components/pricing-table/index.js"
@@ -72,12 +76,13 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/jetpack-api": "^2.0.0",
-		"@automattic/jetpack-boost-score-api": "^1.1.0",
+		"@automattic/jetpack-api": "^2.1.0",
+		"@automattic/jetpack-boost-score-api": "^1.2.0",
 		"@automattic/jetpack-script-data": "^0.6.8",
-		"@automattic/number-formatters": "^1.2.9",
+		"@automattic/number-formatters": "^1.2.10",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
+		"@wordpress/a11y": "4.55.0",
 		"@wordpress/admin-ui": "2.10.0",
 		"@wordpress/browserslist-config": "6.55.0",
 		"@wordpress/components": "40.1.0",
@@ -95,12 +100,12 @@
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.3.19",
+		"social-logos": "^3.4.0",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.14",
+		"@automattic/jetpack-base-styles": "^1.2.16",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.1",
 		"@storybook/addon-docs": "10.4.6",
@@ -119,7 +124,7 @@
 		"storybook": "10.4.6",
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
-		"webpack": "5.107.2",
+		"webpack": "5.111.1",
 		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {

package/build/components/notice/index.d.ts

@@ -1,29 +0,0 @@
-import type { FC, ReactNode } from 'react';
-type NoticeProps = {
-    /** The severity of the alert. */
-    level?: 'error' | 'warning' | 'info' | 'success';
-    /** The title of the notice */
-    title?: string;
-    /** A list of action elements to show across the bottom */
-    actions?: ReactNode[];
-    /** Hide close button */
-    hideCloseButton?: boolean;
-    /** Method to call when the close button is clicked */
-    onClose?: () => void;
-    /** Children to be rendered inside the alert. */
-    children: ReactNode;
-};
-/**
- * Notice component
- *
- * @param {object}      props                 - The component properties.
- * @param {string}      props.level           - The notice level: error, warning, info, success.
- * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
- * @param {Function}    props.onClose         - The function to call when the close button is clicked.
- * @param {string}      props.title           - The title of the notice.
- * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {Component}   props.children        - The notice content.
- * @return {ReactElement}              The `Notice` component.
- */
-declare const Notice: FC<NoticeProps>;
-export default Notice;

package/build/components/notice/index.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, cautionFilled as warning, info, check, close } from '@wordpress/icons';
-import clsx from 'clsx';
-import styles from './style.module.scss';
-const getIconByLevel = (level) => {
-    switch (level) {
-        case 'error':
-            return warning;
-        case 'warning':
-            return warning;
-        case 'info':
-            return info;
-        case 'success':
-            return check;
-        default:
-            return warning;
-    }
-};
-/**
- * Notice component
- *
- * @param {object}      props                 - The component properties.
- * @param {string}      props.level           - The notice level: error, warning, info, success.
- * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
- * @param {Function}    props.onClose         - The function to call when the close button is clicked.
- * @param {string}      props.title           - The title of the notice.
- * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {Component}   props.children        - The notice content.
- * @return {ReactElement}              The `Notice` component.
- */
-const Notice = ({ level = 'info', title, children, actions, hideCloseButton = false, onClose, }) => {
-    const classes = clsx(styles.container, styles[`is-${level}`]);
-    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) }), _jsxs("div", { className: styles['main-content'], children: [title && _jsx("div", { className: styles.title, children: title }), children, actions && actions.length > 0 && (_jsx("div", { className: styles['action-bar'], children: actions.map((action, index) => (_jsx("div", { className: styles.action, children: action }, index))) }))] }), !hideCloseButton && (_jsx("button", { "aria-label": "close", className: styles['close-button'], onClick: onClose, children: _jsx(Icon, { icon: close }) }))] }));
-};
-export default Notice;

package/build/components/notice/style.module.scss

@@ -1,120 +0,0 @@
-.container {
-	display: flex;
-	align-items: flex-start;
-
-	font-size: var(--font-body);
-
-	border: 1px solid var(--jp-black);
-	border-radius: 4px;
-	border-color: var(--jp-gray-5);
-	border-left-width: 6px;
-
-	padding: 24px 31px 27px 18px;
-}
-
-.icon-wrapper {
-	margin-right: 20px;
-	width: calc(var(--spacing-base) * 3);
-	height: calc(var(--spacing-base) * 3);
-}
-
-.close-button {
-	padding: 0;
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	outline: none;
-
-	svg {
-		display: block;
-	}
-}
-
-// Mobile layout differences.
-@media screen and ( max-width: 600px ) {
-
-	.container {
-		position: relative;
-		padding-top: 68px;
-		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
-	}
-
-	.icon-wrapper {
-		position: absolute;
-		top: 24px;
-		left: 24px;
-	}
-
-	.close-button {
-		position: absolute;
-		top: 24px;
-		right: 24px;
-	}
-}
-
-.main-content {
-	flex-grow: 1;
-}
-
-.title {
-	font-weight: 600;
-	margin-bottom: 8px;
-}
-
-.action-bar {
-	display: flex;
-	align-items: center;
-	margin-top: 20px;
-	row-gap: 20px;
-	flex-wrap: wrap;
-
-	@media screen and ( max-width: 600px ) {
-		justify-content: center;
-	}
-
-	a {
-
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			color: var(--jp-black);
-		}
-	}
-
-	> * {
-		margin-right: 24px;
-	}
-}
-
-.is-error {
-	border-left-color: var(--jp-red);
-
-	.icon {
-		color: var(--jp-red);
-	}
-}
-
-.is-warning {
-	border-left-color: var(--jp-yellow-20);
-
-	.icon {
-		color: var(--jp-yellow-20);
-	}
-}
-
-.is-info {
-	border-left-color: var(--black);
-
-	.icon {
-		color: var(--black);
-	}
-}
-
-.is-success {
-	border-left-color: var(--jp-green);
-
-	.icon {
-		color: var(--jp-green);
-	}
-}

package/build/components/zendesk-chat/constants.d.ts

@@ -1 +0,0 @@
-export declare const chatKey = "d729d42c-b547-4750-a6f6-8b30534a5f12";

package/build/components/zendesk-chat/constants.js

@@ -1,2 +0,0 @@
-// This is not a secret, it can easily be found in the DOM
-export const chatKey = 'd729d42c-b547-4750-a6f6-8b30534a5f12';

package/build/components/zendesk-chat/index.d.ts

@@ -1,3 +0,0 @@
-import type { ZendeskChatType } from './types.ts';
-export declare const ZendeskChat: ZendeskChatType;
-export default ZendeskChat;

package/build/components/zendesk-chat/index.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useCallback } from 'react';
-import { chatKey } from './constants.js';
-export const ZendeskChat = ({ jwt_token }) => {
-    const authenticateUser = useCallback(() => {
-        if (typeof window !== 'undefined' && typeof window.zE === 'function') {
-            window.zE('messenger', 'loginUser', function (callback) {
-                callback(jwt_token);
-            });
-        }
-    }, [jwt_token]);
-    useEffect(() => {
-        const script = document.createElement('script');
-        const container = document.getElementById('zendesk-chat-container');
-        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + encodeURIComponent(chatKey);
-        script.type = 'text/javascript';
-        script.id = 'ze-snippet';
-        script.onload = () => {
-            authenticateUser();
-        };
-        if (container) {
-            container.appendChild(script);
-        }
-    }, [authenticateUser]);
-    return _jsx("div", { "data-testid": "zendesk-chat-container", id: "zendesk-chat-container" });
-};
-export default ZendeskChat;

package/build/components/zendesk-chat/types.d.ts

@@ -1,11 +0,0 @@
-import type { FC } from 'react';
-declare global {
-    interface Window {
-        zE: Function;
-    }
-}
-interface ZendeskChatProps {
-    jwt_token: string;
-}
-export type ZendeskChatType = FC<ZendeskChatProps>;
-export {};