@telefonica/mistica 17.9.0 → 17.11.0

package/src/drawer.tsx

@@ -17,9 +17,13 @@ import {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import Divider from './divider';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as tokens from './text-tokens';
+import Form from './form';
 
+import type {FormProps} from './form';
 import type {DataAttributes, HeadingType, TrackingEvent} from './utils/types';
 
+type DrawerFormProps = Omit<FormProps, 'children'>;
+
 /**
  * Renders divider or a div with transparent border to avoid the small but noticeable layout shift on scroll
  */
@@ -31,6 +35,7 @@ type DrawerLayoutProps = {
     children: React.ReactNode;
     onClose: () => void;
     onDismiss?: () => void;
+    form?: DrawerFormProps;
 };
 
 type DrawerPropsRef = {
@@ -39,7 +44,7 @@ type DrawerPropsRef = {
 };
 
 const DrawerLayout = React.forwardRef<DrawerPropsRef, DrawerLayoutProps>(
-    ({width, children, onClose, onDismiss}, ref) => {
+    ({width, children, onClose, onDismiss, form}, ref) => {
         useSetModalStateEffect();
         const {isMobile} = useScreenSize();
         const [isOpen, setIsOpen] = React.useState(false);
@@ -79,6 +84,17 @@ const DrawerLayout = React.forwardRef<DrawerPropsRef, DrawerLayoutProps>(
             };
         }, [dismiss]);
 
+        const content = (
+            <div
+                data-testid="drawerLayout"
+                ref={open}
+                style={{width: widthStyle}}
+                className={classnames(styles.container, isOpen ? styles.open : styles.closed)}
+            >
+                {children}
+            </div>
+        );
+
         return (
             <Portal>
                 <FocusTrap>
@@ -91,14 +107,16 @@ const DrawerLayout = React.forwardRef<DrawerPropsRef, DrawerLayoutProps>(
                             isOpen ? styles.overlayOpen : styles.overlayClosed
                         )}
                     />
-                    <div
-                        data-testid="drawerLayout"
-                        ref={open}
-                        style={{width: widthStyle}}
-                        className={classnames(styles.container, isOpen ? styles.open : styles.closed)}
-                    >
-                        {children}
-                    </div>
+                    {form ? (
+                        <Form
+                            {...form}
+                            onSubmit={async (...args) => Promise.resolve(form.onSubmit(...args)).then(close)}
+                        >
+                            {content}
+                        </Form>
+                    ) : (
+                        content
+                    )}
                 </FocusTrap>
             </Portal>
         );
@@ -140,10 +158,12 @@ type DrawerProps = {
      * width is ignored in mobile viewport
      */
     width?: number;
+    /** if form is set, button onPress is ignored. Use form.onSubmit */
     button?: ButtonProps;
     secondaryButton?: ButtonProps;
     buttonLink?: ButtonProps;
     dataAttributes?: DataAttributes;
+    form?: DrawerFormProps | undefined;
 };
 
 const Drawer = ({
@@ -160,6 +180,7 @@ const Drawer = ({
     secondaryButton,
     buttonLink,
     dataAttributes,
+    form,
 }: DrawerProps): JSX.Element => {
     const layoutRef = React.useRef<DrawerPropsRef>(null);
     const hasActions = !!(button || secondaryButton || buttonLink);
@@ -182,7 +203,7 @@ const Drawer = ({
     });
 
     return (
-        <DrawerLayout width={width} ref={layoutRef} onClose={onClose} onDismiss={onDismiss}>
+        <DrawerLayout width={width} ref={layoutRef} onClose={onClose} onDismiss={onDismiss} form={form}>
             <section
                 role="dialog"
                 aria-modal="true"
@@ -243,7 +264,17 @@ const Drawer = ({
                     <div className={styles.buttonsLayoutContainer}>
                         <ButtonLayout
                             primaryButton={
-                                button && (
+                                button &&
+                                (form ? (
+                                    <ButtonPrimary
+                                        submit
+                                        trackEvent={button.trackEvent}
+                                        trackingEvent={button.trackingEvent}
+                                        disabled={button.disabled}
+                                    >
+                                        {button.text}
+                                    </ButtonPrimary>
+                                ) : (
                                     <ButtonPrimary
                                         trackEvent={button.trackEvent}
                                         trackingEvent={button.trackingEvent}
@@ -252,7 +283,7 @@ const Drawer = ({
                                     >
                                         {button.text}
                                     </ButtonPrimary>
-                                )
+                                ))
                             }
                             secondaryButton={
                                 secondaryButton && (

package/src/form.tsx

@@ -26,7 +26,7 @@ export type FormValues = {[name: string]: any};
 
 type HTMLFieldElement = HTMLSelectElement | HTMLInputElement;
 
-type FormProps = {
+export type FormProps = {
     id?: string;
     onSubmit: (values: FormValues, rawValues: FormValues) => Promise<void> | void;
     initialValues?: FormValues;

package/src/grid-layout.tsx

@@ -32,6 +32,12 @@ type PropsTemplate8plus4 = {
     right: React.ReactNode;
 };
 
+type PropsTemplate7plus5 = {
+    template: '7+5';
+    left: React.ReactNode;
+    right: React.ReactNode;
+};
+
 type PropsTemplate4plus6 = {
     template: '4+6';
     left: React.ReactNode;
@@ -65,6 +71,7 @@ type Props = CommonProps &
         | PropsChildren
         | PropsTemplate6plus6
         | PropsTemplate8plus4
+        | PropsTemplate7plus5
         | PropsTemplate4plus6
         | PropsTemplate5plus4
         | PropsTemplate3plus9
@@ -125,6 +132,19 @@ const GridLayout = ({
         );
     }
 
+    if (template === '7+5') {
+        return (
+            <div {...gridStyles} {...prefixedDataAttributes}>
+                <DesktopContainerTypeContextProvider value="medium">
+                    <div {...spanStyles(7)}>{left}</div>
+                </DesktopContainerTypeContextProvider>
+                <DesktopContainerTypeContextProvider value="small">
+                    <div {...spanStyles(5)}>{right}</div>
+                </DesktopContainerTypeContextProvider>
+            </div>
+        );
+    }
+
     if (template === '4+6') {
         return (
             <div {...gridStyles} {...prefixedDataAttributes}>

package/src/index.tsx

@@ -17,6 +17,8 @@ export {default as ButtonLayout} from './button-layout';
 export {default as Counter} from './counter';
 export {default as FixedFooterLayout} from './fixed-footer-layout';
 export {default as ButtonFixedFooterLayout} from './button-fixed-footer-layout';
+export {default as Message} from './message';
+export type {MessageProps} from './message';
 export {default as Snackbar} from './snackbar';
 export {useSnackbar} from './snackbar-context';
 export {Portal} from './portal';

package/src/message.css.ts

@@ -0,0 +1,148 @@
+import {globalStyle, style, styleVariants} from '@vanilla-extract/css';
+import {vars} from './skins/skin-contract.css';
+
+const bubbleRadius = '4px';
+export const minimumBubbleSize = 48;
+export const bubblePaddingY = 12;
+export const bubblePaddingX = 16;
+export const minimumErrorWidth = 184;
+const boxedErrorInset = 16;
+const actionsGap = 16;
+const actionsInset = 4;
+
+export const message = style({display: 'flex', width: 'fit-content', minWidth: 0});
+export const direction = styleVariants({
+    incoming: {},
+    outgoing: {flexDirection: 'row-reverse', marginLeft: 'auto'},
+});
+export const asset = style({flexShrink: 0});
+export const assetAlignment = styleVariants({
+    incoming: {alignSelf: 'flex-start', marginRight: 8},
+    outgoing: {alignSelf: 'flex-start', marginLeft: 8},
+});
+export const unboxedAssetSpacing = styleVariants({
+    incoming: {marginRight: 12},
+    outgoing: {marginLeft: 12},
+});
+export const messageContent = style({display: 'flex', flexDirection: 'column', minWidth: 0});
+export const row = style({display: 'flex', width: '100%', minWidth: 0, alignItems: 'flex-start'});
+export const rowDirection = styleVariants({incoming: {}, outgoing: {flexDirection: 'row-reverse'}});
+export const column = style({display: 'flex', flexDirection: 'column', minWidth: 0});
+export const touchable = style({textAlign: 'left', minWidth: 0, borderRadius: vars.borderRadii.container});
+export const corners = styleVariants({
+    'incoming-standalone': {borderTopLeftRadius: bubbleRadius},
+    'incoming-first': {borderBottomLeftRadius: bubbleRadius},
+    'incoming-middle': {borderTopLeftRadius: bubbleRadius, borderBottomLeftRadius: bubbleRadius},
+    'incoming-last': {borderTopLeftRadius: bubbleRadius},
+    'outgoing-standalone': {borderBottomRightRadius: bubbleRadius},
+    'outgoing-first': {borderBottomRightRadius: bubbleRadius},
+    'outgoing-middle': {borderTopRightRadius: bubbleRadius, borderBottomRightRadius: bubbleRadius},
+    'outgoing-last': {borderTopRightRadius: bubbleRadius},
+});
+export const bubble = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    borderRadius: 'inherit',
+    overflowWrap: 'anywhere',
+});
+export const boxed = style({
+    boxSizing: 'border-box',
+    padding: `${bubblePaddingY}px ${bubblePaddingX}px`,
+    minWidth: minimumBubbleSize,
+    minHeight: minimumBubbleSize,
+});
+export const incomingBackground = styleVariants({
+    default: {background: vars.colors.messageBubbleBackgroundIncoming},
+    brand: {background: vars.colors.messageBubbleBackgroundIncomingBrand},
+    negative: {background: vars.colors.messageBubbleBackgroundIncomingNegative},
+    alternative: {background: vars.colors.messageBubbleBackgroundIncomingAlternative},
+    media: {background: vars.colors.messageBubbleBackgroundIncomingMedia},
+});
+export const outgoingBackground = styleVariants({
+    default: {background: vars.colors.messageBubbleBackgroundOutgoing},
+    brand: {background: vars.colors.messageBubbleBackgroundOutgoingBrand},
+    negative: {background: vars.colors.messageBubbleBackgroundOutgoingNegative},
+    alternative: {background: vars.colors.messageBubbleBackgroundOutgoingAlternative},
+    media: {background: vars.colors.messageBubbleBackgroundOutgoingMedia},
+});
+export const errorBackground = style({background: vars.colors.backgroundContainerError});
+export const interactive = style({
+    selectors: {
+        [`${touchable}:hover &`]: {
+            backgroundImage: `linear-gradient(${vars.colors.backgroundContainerHover}, ${vars.colors.backgroundContainerHover})`,
+        },
+        [`${touchable}:active &`]: {
+            backgroundImage: `linear-gradient(${vars.colors.backgroundContainerPressed}, ${vars.colors.backgroundContainerPressed})`,
+        },
+    },
+});
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    minWidth: 0,
+    whiteSpace: 'pre-wrap',
+});
+export const contentSlot = style({minWidth: 0, maxWidth: '100%', overflowX: 'auto', overflowY: 'hidden'});
+globalStyle(`${contentSlot} > *`, {maxWidth: '100%'});
+export const timestamp = style({alignSelf: 'flex-end'});
+export const actions = style({display: 'flex', flexShrink: 0, alignItems: 'center', gap: actionsGap});
+export const footerActions = style({marginTop: actionsInset, flexWrap: 'wrap'});
+export const sideActions = styleVariants({
+    incoming: {marginLeft: actionsInset},
+    outgoing: {marginRight: actionsInset},
+});
+export const outgoingFooterActions = style({justifyContent: 'flex-end'});
+const maximumSideSlotWidth = '40%';
+export const sideSlot = style({
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    minWidth: 0,
+    maxWidth: maximumSideSlotWidth,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+});
+globalStyle(`${sideSlot} > *`, {maxWidth: '100%'});
+export const unboxedActions = style({marginLeft: -8});
+export const error = style({
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridTemplateColumns: 'auto minmax(0, 1fr)',
+    alignItems: 'flex-start',
+    gap: 4,
+    marginTop: 4,
+    minWidth: 0,
+    overflowWrap: 'anywhere',
+});
+export const boxedError = style({paddingInline: boxedErrorInset});
+export const errorIcon = style({
+    display: 'block',
+    width: ['1rem', '1lh'],
+    height: ['1rem', '1lh'],
+});
+
+export const body = style({display: 'flex', flexDirection: 'column', gap: 4});
+export const inlineTimestamp = style({flexDirection: 'row', alignItems: 'baseline', gap: 8});
+export const text = style({display: 'inline-block', maxWidth: '100%'});
+
+export const footer = style({
+    minWidth: 0,
+    maxWidth: '100%',
+    overflowWrap: 'anywhere',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+});
+globalStyle(`${footer} > *`, {maxWidth: '100%'});
+export const errorFooter = style({width: 0, minWidth: '100%', overflowWrap: 'anywhere'});
+export const shortErrorLayout = styleVariants({
+    incoming: {display: 'flex', flexDirection: 'column', alignItems: 'flex-start'},
+    outgoing: {display: 'flex', flexDirection: 'column', alignItems: 'flex-end'},
+});
+export const shortErrorFooter = style({
+    width: 'max-content',
+    minWidth: 0,
+    maxWidth: `max(100%, ${minimumErrorWidth}px)`,
+    flexShrink: 0,
+});

package/src/message.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import * as React from 'react';
+import classnames from 'classnames';
+import Touchable from './touchable';
+import Avatar from './avatar';
+import {Text1, Text2} from './text';
+import {IconButton} from './icon-button';
+import IconWarningRegular from './generated/mistica-icons/icon-warning-regular';
+import ScreenReaderOnly from './screen-reader-only';
+import {ThemeVariant, useThemeVariant} from './theme-variant-context';
+import {useElementDimensions, useTheme} from './hooks';
+import {vars} from './skins/skin-contract.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as tokens from './text-tokens';
+import * as styles from './message.css';
+
+import type {IconButtonProps} from './icon-button';
+import type {PressHandler, TouchableComponentProps} from './touchable';
+import type {ExclusifyUnion} from './utils/utility-types';
+
+type MessageAction = IconButtonProps & {
+    small?: never;
+    type?: never;
+    bleedLeft?: never;
+    bleedRight?: never;
+    bleedY?: never;
+};
+type MessageActions = readonly [MessageAction] | readonly [MessageAction, MessageAction];
+const avatarSize = 40;
+const maximumActions = 2;
+
+export type MessageProps = TouchableComponentProps<
+    {
+        type: 'incoming' | 'outgoing';
+        senderName?: string;
+        senderNameAs?: 'span' | 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        senderNameLabel?: string;
+        timestamp?: string;
+        timestampLabel?: string;
+        asset?: React.ReactElement;
+        boxed?: boolean;
+        /** Maximum width of the whole message, including its asset and side actions. Defaults to 80%.
+         * Error feedback can exceed this limit up to 184px to avoid illegible wrapping.
+         */
+        maxWidth?: number | string;
+        position?: 'standalone' | 'first' | 'middle' | 'last';
+    } & ExclusifyUnion<
+        {onAssetPress: PressHandler; assetLabel: string} | {onAssetPress?: undefined; assetLabel?: undefined}
+    > & {
+            contentText?: string;
+            contentSlot?: React.ReactNode;
+            footerSlot?: React.ReactNode;
+            sideSlot?: React.ReactNode;
+            /** Up to two actions. Extra actions from untyped consumers are ignored. */
+            actions?: MessageActions;
+            actionsPosition?: 'side' | 'footer';
+        } & ExclusifyUnion<{error: true; errorMessage: string} | {error?: false}>
+>;
+
+const Message = ({
+    type,
+    senderName,
+    senderNameAs = 'span',
+    senderNameLabel,
+    timestamp,
+    timestampLabel,
+    asset,
+    onAssetPress,
+    assetLabel,
+    boxed = true,
+    maxWidth = '80%',
+    position = 'standalone',
+    contentText,
+    contentSlot,
+    footerSlot,
+    sideSlot,
+    actions,
+    actionsPosition = 'footer',
+    error = false,
+    errorMessage,
+    dataAttributes,
+    ...touchableProps
+}: MessageProps): JSX.Element => {
+    const {t} = useTheme();
+    const variant = useThemeVariant();
+    const id = React.useId();
+    const {width: textWidth, ref: textRef} = useElementDimensions();
+    const {width: bubbleContentWidth, height: bubbleContentHeight, ref: bubbleRef} = useElementDimensions();
+    const bubbleHeight = bubbleContentHeight + (boxed ? styles.bubblePaddingY * 2 : 0);
+    const bubbleWidth = bubbleContentWidth + (boxed ? styles.bubblePaddingX * 2 : 0);
+    const shortError = error && bubbleContentWidth > 0 && bubbleWidth < styles.minimumErrorWidth;
+    const inlineTimestamp = boxed && !contentSlot && textWidth > 0 && textWidth < styles.minimumBubbleSize;
+    const showTimestamp = !!timestamp && !(error && type === 'outgoing');
+    const isInteractive = !!(touchableProps.onPress || touchableProps.href || touchableProps.to);
+    const directionLabel = t(type === 'incoming' ? tokens.messageIncoming : tokens.messageOutgoing);
+    const renderActions = () =>
+        actions
+            ?.slice(0, maximumActions)
+            .map((action, index) => <IconButton key={index} {...action} small type="neutral" />);
+
+    const accessibleIds = [
+        `${id}-direction`,
+        (senderName || senderNameLabel) && `${id}-sender`,
+        `${id}-content`,
+        showTimestamp && `${id}-timestamp`,
+        error && `${id}-error`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div
+            className={classnames(styles.message, styles.direction[type])}
+            style={{maxWidth}}
+            {...getPrefixedDataAttributes({testid: 'Message', ...dataAttributes})}
+        >
+            {asset && (
+                <div
+                    className={classnames(styles.asset, styles.assetAlignment[type], {
+                        [styles.unboxedAssetSpacing[type]]: !boxed,
+                    })}
+                    style={
+                        type === 'outgoing' && bubbleHeight
+                            ? {transform: `translateY(calc(${bubbleHeight}px - 100%))`}
+                            : undefined
+                    }
+                >
+                    <Touchable maybe onPress={onAssetPress} aria-label={assetLabel}>
+                        <span aria-hidden>
+                            {React.isValidElement<{size: number}>(asset) && asset.type === Avatar
+                                ? React.cloneElement(asset, {size: avatarSize})
+                                : asset}
+                        </span>
+                    </Touchable>
+                </div>
+            )}
+            <div className={classnames(styles.messageContent, {[styles.shortErrorLayout[type]]: shortError})}>
+                <div className={classnames(styles.row, styles.rowDirection[type])}>
+                    <div className={styles.column}>
+                        <Touchable
+                            {...touchableProps}
+                            maybe
+                            aria-labelledby={
+                                touchableProps['aria-label']
+                                    ? undefined
+                                    : touchableProps['aria-labelledby'] ??
+                                      (isInteractive ? accessibleIds : undefined)
+                            }
+                            className={classnames(
+                                styles.touchable,
+                                styles.corners[`${type}-${error ? 'standalone' : position}`]
+                            )}
+                        >
+                            <ThemeVariant variant={boxed ? 'default' : variant}>
+                                <div
+                                    ref={bubbleRef}
+                                    data-testid="MessageBubble"
+                                    className={classnames(styles.bubble, {
+                                        [styles.boxed]: boxed,
+                                        [styles.incomingBackground[variant]]:
+                                            boxed && type === 'incoming' && !error,
+                                        [styles.outgoingBackground[variant]]:
+                                            boxed && type === 'outgoing' && !error,
+                                        [styles.errorBackground]: boxed && error,
+                                        [styles.interactive]: boxed && isInteractive,
+                                    })}
+                                >
+                                    <ScreenReaderOnly>
+                                        <span id={`${id}-direction`}>{directionLabel}: </span>
+                                    </ScreenReaderOnly>
+                                    {(senderName || senderNameLabel) &&
+                                        (senderName ? (
+                                            <Text1
+                                                medium
+                                                as={senderNameAs}
+                                                id={`${id}-sender`}
+                                                color={
+                                                    !boxed &&
+                                                    variant !== 'default' &&
+                                                    variant !== 'alternative'
+                                                        ? vars.colors.textPrimary
+                                                        : vars.colors.textBrand
+                                                }
+                                            >
+                                                {senderNameLabel ? (
+                                                    <>
+                                                        <span aria-hidden>{senderName}</span>
+                                                        <ScreenReaderOnly>
+                                                            <span>{senderNameLabel}</span>
+                                                        </ScreenReaderOnly>
+                                                    </>
+                                                ) : (
+                                                    senderName
+                                                )}
+                                            </Text1>
+                                        ) : (
+                                            <ScreenReaderOnly>
+                                                <span id={`${id}-sender`}>{senderNameLabel}</span>
+                                            </ScreenReaderOnly>
+                                        ))}
+                                    <div
+                                        className={classnames(styles.body, {
+                                            [styles.inlineTimestamp]: inlineTimestamp,
+                                        })}
+                                    >
+                                        <div className={styles.content} id={`${id}-content`}>
+                                            {contentText !== undefined && (
+                                                <Text2 regular as="p">
+                                                    <span ref={textRef} className={styles.text}>
+                                                        {contentText}
+                                                    </span>
+                                                </Text2>
+                                            )}
+                                            {contentSlot !== undefined && (
+                                                <div className={styles.contentSlot}>{contentSlot}</div>
+                                            )}
+                                        </div>
+                                        {showTimestamp && (
+                                            <div className={boxed ? styles.timestamp : undefined}>
+                                                <Text1
+                                                    regular
+                                                    as="span"
+                                                    id={`${id}-timestamp`}
+                                                    color={
+                                                        boxed
+                                                            ? type === 'outgoing'
+                                                                ? vars.colors.textPrimary
+                                                                : vars.colors.textSecondary
+                                                            : undefined
+                                                    }
+                                                >
+                                                    {timestampLabel ? (
+                                                        <>
+                                                            <span aria-hidden>{timestamp}</span>
+                                                            <ScreenReaderOnly>
+                                                                <span>{timestampLabel}</span>
+                                                            </ScreenReaderOnly>
+                                                        </>
+                                                    ) : (
+                                                        timestamp
+                                                    )}
+                                                </Text1>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </ThemeVariant>
+                        </Touchable>
+                        {footerSlot && (
+                            <div className={styles.footer} id={`${id}-footer`}>
+                                {footerSlot}
+                            </div>
+                        )}
+                        {actions && actionsPosition === 'footer' && (
+                            <div
+                                className={classnames(styles.actions, styles.footerActions, {
+                                    [styles.unboxedActions]: !boxed,
+                                    [styles.outgoingFooterActions]: type === 'outgoing',
+                                })}
+                            >
+                                {renderActions()}
+                            </div>
+                        )}
+                    </div>
+                    {sideSlot && (
+                        <div className={styles.sideSlot} style={{height: bubbleHeight || undefined}}>
+                            {sideSlot}
+                        </div>
+                    )}
+                    {actions && actionsPosition === 'side' && (
+                        <div
+                            className={classnames(styles.actions, styles.sideActions[type])}
+                            style={{height: bubbleHeight || undefined}}
+                        >
+                            {renderActions()}
+                        </div>
+                    )}
+                </div>
+                {error && (
+                    <div className={classnames(styles.errorFooter, {[styles.shortErrorFooter]: shortError})}>
+                        <div
+                            className={classnames(styles.error, {
+                                [styles.boxedError]: boxed,
+                            })}
+                            role="alert"
+                            id={`${id}-error`}
+                        >
+                            <Text1 regular color={vars.colors.textError}>
+                                <IconWarningRegular color="currentColor" className={styles.errorIcon} />
+                            </Text1>
+                            <Text1 regular color={vars.colors.textError}>
+                                {errorMessage}
+                            </Text1>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Message;

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.9.0' as string;
+export const PACKAGE_VERSION = '17.11.0' as string;