@24i/bigscreen-sdk 1.1.0 → 2.1.1-alpha.2133

package/packages/input/src/Input.tsx

@@ -1,4 +1,4 @@
-import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { createRef, Component, setText, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { Interactable } from '@24i/bigscreen-sdk/interactable';
 import { IFocusable } from '@24i/bigscreen-sdk/focus';
 import { isRtl } from '@24i/bigscreen-sdk/i18n';
@@ -9,7 +9,7 @@ import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
 import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
 import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
-import { checkCharOrderMishmash, handleOverflow } from './utils';
+import { handleOverflow } from './handleOverflow';
 import './Input.scss';
 
 type Props = {
@@ -19,11 +19,13 @@ type Props = {
     passwordChar?: string,
     /** Moves text to the left (with negative margin-left) when caret overflows */
     shouldHandleOverflow?: boolean,
+    onChange?: (newValue: string) => void,
+    onFocus?: () => void,
+    onBlur?: () => void,
+    // eslint-disable-next-line react/no-unused-prop-types
     maxLength?: number,
-    onFocus?: (event: FocusEvent) => void,
-    onBlur?: (event: FocusEvent) => void,
+    // eslint-disable-next-line react/require-default-props
     onFinish?: (wasCancelled?: boolean) => void,
-    onChange?: (newValue: string) => void,
 };
 
 const ACTIVE = 'active';
@@ -42,8 +44,6 @@ export class Input extends Component<Props> implements IFocusable {
 
     caret = createRef<HTMLDivElement>();
 
-    caretPosition = 0;
-
     isInputting = false;
 
     lastValue: string;
@@ -70,11 +70,6 @@ export class Input extends Component<Props> implements IFocusable {
         this.isPlaceholderVisible = value.length === 0;
     }
 
-    componentDidMount() {
-        const { value } = this.props;
-        if (value) this.setText(value);
-    }
-
     getType() {
         return this.nativeInput.current?.type;
     }
@@ -92,10 +87,13 @@ export class Input extends Component<Props> implements IFocusable {
 
     onCaretPositionChange = (position: number | null) => {
         if (position === null) return;
+        const { shouldHandleOverflow } = this.props;
         const value = this.getValue();
-        this.setText(value);
-        this.updateCaretPosition(position);
-        this.updateTextOverflow();
+        setText(this.text, this.filterText(value));
+        this.setCaretPosition(position);
+        if (shouldHandleOverflow) {
+            handleOverflow(this.wrap.current, this.caret.current, this.text.current);
+        }
         if (this.lastValue !== value) {
             const { onChange } = this.props;
             this.lastValue = value;
@@ -110,59 +108,31 @@ export class Input extends Component<Props> implements IFocusable {
 
     setValue(value: string) {
         this.nativeInput.current!.value = value;
-        this.setText(value);
     }
 
     setType(type: Props['type']) {
         if (this.getType() === type) return;
         const value = this.getValue();
         this.nativeInput.current!.type = type;
-        this.setText(value);
-    }
-
-    setText(text: string): void {
-        const filtered = this.filterText(text);
-        this.renderText(filtered);
+        setText(this.text, this.filterText(value));
     }
 
-    updateCaretPosition(position: number) {
+    setCaretPosition(position: number) {
         const textNode = this.text.current!.firstChild;
-        if (!textNode || position <= 0) {
-            this.caretPosition = 0;
+        if (!textNode) {
             offsetPosition(this.caret, { x: 0 });
             return;
         }
-        const wholeTextDimensions = this.text.current!.getBoundingClientRect();
-        if (position >= this.text.current!.children.length) {
-            const offset = wholeTextDimensions.right - wholeTextDimensions.left;
-            this.caretPosition = isRtl() ? -offset : offset;
-            offsetPosition(this.caret, { x: this.caretPosition }, false);
-            return;
-        }
-        const charNode = this.text.current!.children[position - 1];
-        const charDimensions = charNode!.getBoundingClientRect();
-        const isCharMishmash = checkCharOrderMishmash(this.text.current!, position - 1);
-        if (isRtl()) {
-            if (isCharMishmash) {
-                this.caretPosition = charDimensions.right - wholeTextDimensions.right;
-            } else {
-                this.caretPosition = charDimensions.left - wholeTextDimensions.right;
-            }
-        } else if (isCharMishmash) {
-            this.caretPosition = charDimensions.left - wholeTextDimensions.left;
-        } else {
-            this.caretPosition = charDimensions.right - wholeTextDimensions.left;
-        }
-        offsetPosition(this.caret, { x: this.caretPosition }, false);
-    }
-
-    updateTextOverflow() {
-        const { shouldHandleOverflow } = this.props;
-        if (!shouldHandleOverflow) return;
-        const textMargin = handleOverflow(
-            this.wrap.current, this.caret.current, this.text.current,
-        );
-        offsetPosition(this.caret, { x: this.caretPosition - textMargin }, false);
+        const range = new Range();
+        range.selectNode(textNode);
+        const wholeText = range.getBoundingClientRect();
+        range.setStart(textNode, position);
+        range.setEnd(textNode, position);
+        const caretText = range.getBoundingClientRect();
+        const offset = isRtl()
+            ? wholeText.left - caretText.left
+            : wholeText.left + wholeText.width - caretText.left;
+        offsetPosition(this.caret, { x: -offset }, false);
     }
 
     /**
@@ -226,14 +196,6 @@ export class Input extends Component<Props> implements IFocusable {
         return text.replace(/ /g, NBSP);
     }
 
-    renderText(text: string): void {
-        const chars: JSX.Element[] = [];
-        for (let i = 0; i < text.length; i++) {
-            chars.push(<span className="char">{text[i]}</span>);
-        }
-        this.clearMount(chars, this.text);
-    }
-
     render() {
         const { value, type, placeholder, onFocus, onBlur } = this.props;
         return (
@@ -258,7 +220,9 @@ export class Input extends Component<Props> implements IFocusable {
                     >
                         {placeholder}
                     </div>
-                    <div ref={this.text} className="text" />
+                    <div ref={this.text} className="text" dir="auto">
+                        {this.filterText(value)}
+                    </div>
                     <div ref={this.caret} className="caret" />
                 </div>
             </Interactable>

package/packages/input/src/handleOverflow.ts

@@ -0,0 +1,29 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+export const handleOverflow = (
+    wrap: HTMLDivElement | null,
+    caret: HTMLDivElement | null,
+    text: HTMLDivElement | null,
+) => {
+    if (!wrap || !caret || !text) return;
+    const { width: wrapWidth, left: wrapLeft } = wrap.getBoundingClientRect();
+    const { width: caretWidth, left: caretLeft } = caret.getBoundingClientRect();
+    const textMargin = parseInt(text.dataset.margin!, 10) || 0;
+    const caretOffset = isRtl()
+        ? caretLeft + textMargin - caretWidth
+        : caretLeft - textMargin + caretWidth;
+    if (!isRtl() && wrapWidth + wrapLeft < caretOffset) {
+        const margin = -(caretOffset - wrapWidth - wrapLeft);
+        text.style.marginLeft = `${margin}px`;
+        text.style.marginRight = '0px';
+        text.dataset.margin = margin.toString();
+    } else if (isRtl() && caretOffset < wrapLeft) {
+        const margin = -(wrapLeft - caretOffset);
+        text.style.marginLeft = '0px';
+        text.style.marginRight = `${margin}px`;
+        text.dataset.margin = margin.toString();
+    } else {
+        text.style.marginLeft = '0px';
+        text.style.marginRight = '0px';
+    }
+};

package/packages/interactable/README.md

@@ -12,7 +12,6 @@ It provides common functionality for you.
 ## Props
 - `onPress` - called for onClick and onKeyDown
 - `ref` is forwarded to underlying `div`
-- `blockRepeatedKeyDown` - interactable must suppress repeated onPress calls, until the key is released. This is because because keyDown event is repeatedly fired when user holds key on webTv and Adrodid Tv. This may lead to unpredictable behavior.
 - other `div` props
 
 ## Provided functionality
@@ -35,4 +34,4 @@ renders
 <div class="btn btn-primary" tabindex="0">
     Play video
 </div>
-```
+```

package/packages/interactable/src/Interactable.tsx

@@ -3,20 +3,14 @@ import { isClickOrEnter } from '@24i/bigscreen-sdk/device';
 import { Props } from './interface';
 
 export const Interactable = forwardRef<Props>(
-    ({ children, onPress, blockRepeatedKeyDown, ...otherProps },
-        ref: Reference<HTMLDivElement> | null) => {
+    ({ children, onPress, ...otherProps }, ref: Reference<HTMLDivElement> | null) => {
         const domRef = ref || createRef<HTMLDivElement>();
-
-        const onPressProxy = (e: MouseEvent | KeyboardEvent) => {
-            if (typeof onPress === 'function' && isClickOrEnter(e)) {
-                onPress(e);
-            }
+        const onPressProxy = (e: KeyboardEvent | MouseEvent) => {
+            if (typeof onPress === 'function' && isClickOrEnter(e)) onPress(e);
         };
-
         const onMouseEnter = () => {
             domRef.current!.focus({ preventScroll: true });
         };
-
         return (
             <div
                 {...otherProps}

package/packages/interactable/src/interface.ts

@@ -3,5 +3,4 @@ import { Children } from '@24i/bigscreen-sdk/jsx';
 export type Props = {
     children?: Children,
     onPress?: (event: KeyboardEvent | MouseEvent) => void,
-    blockRepeatedKeyDown?: boolean,
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;

package/packages/jsx/src/index.ts

@@ -27,5 +27,5 @@ export type {
     ClassComponentInterface,
     DeclareProps,
 } from './types';
-// eslint-disable-next-line import/no-default-export, no-restricted-exports
+// eslint-disable-next-line import/no-default-export
 export { createElement as default } from './virtualDOM';

package/packages/jsx/src/test-utils/index.ts

@@ -1,6 +1,5 @@
 export { click } from './click';
 export { enter } from './enter';
 export { keydown } from './keydown';
-export { keyup } from './keyup';
 export { shallow } from './shallow';
 export { MountedComponent } from './MountedComponent';

package/packages/keyboard/src/Backdrop/Backdrop.scss

@@ -1,7 +1,6 @@
 .keyboard-backdrop {
     position: fixed;
     left: 0;
-    right: 0;
     top: 0;
     width: $backdrop-width;
     height: $backdrop-height;
@@ -10,7 +9,6 @@
 .keyboard-backdrop-disabled {
     position: absolute;
     left: 0;
-    right: 0;
     top: 0;
     width: 100%;
     height: 100%;

package/packages/keyboard/src/KeyboardBase.tsx

@@ -1,6 +1,5 @@
 import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
-import { getKeyDigit, device } from '@24i/bigscreen-sdk/device';
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
+import { getKeyDigit } from '@24i/bigscreen-sdk/device';
 import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
 import {
     Matrix,
@@ -121,15 +120,8 @@ export abstract class KeyboardBase<
      */
     onKeyDown(event: KeyboardEvent) {
         const { handleRemoteDigits, handleHWKeyboard } = this.props;
-        const preventBack = 'backAsBackspaceInSearch' in device && !!device.backAsBackspaceInSearch;
-        const inputLength = this.inputElement?.value?.length;
-
         if (BACK.is(event)) {
-            if (preventBack && inputLength) {
-                this.onBackspace();
-            } else {
-                this.onCancel();
-            }
+            this.onCancel();
         } else {
             let char: string | null = null;
             if (handleHWKeyboard) {
@@ -216,9 +208,7 @@ export abstract class KeyboardBase<
      * Moves caret 1 position to the left.
      */
     onLeft() {
-        const newPosition = !isRtl()
-            ? caretLeft(this.inputElement)
-            : caretRight(this.inputElement);
+        const newPosition = caretLeft(this.inputElement);
         if (typeof newPosition === 'number') {
             this.updateCaretPosition(newPosition);
         }
@@ -228,9 +218,7 @@ export abstract class KeyboardBase<
      * Moves caret 1 position to the right.
      */
     onRight() {
-        const newPosition = !isRtl()
-            ? caretRight(this.inputElement)
-            : caretLeft(this.inputElement);
+        const newPosition = caretRight(this.inputElement);
         if (typeof newPosition === 'number') {
             this.updateCaretPosition(newPosition);
         }

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.scss

@@ -23,10 +23,6 @@
         padding-bottom: $keyboard-padding-bottom;
         height: 100%;
         width: 100%;
-
-        &.wide .key.key-space {
-            width: $key-space-wide-width;
-        }
     }
 
     .keys-container {

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.tsx

@@ -56,19 +56,14 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
     createLanguageFocusMatrix() {
         const { languageLayout } = this.props;
         this.languageFocusMatrix = generateFocusMatrixFromStringMatrix(
-            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true),
+            this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true)
         );
     }
 
     show() {
         super.show();
         this.renderedLayout = 'normal';
-        const { layouts, languageLayout } = this.props;
-        if (this.isLanguageLayoutActive) {
-            this.renderLayout(this.languageFocusMatrix, languageLayout!.layout);
-        } else {
-            this.renderLayout(this.focusMatrices.normal, layouts.normal);
-        }
+        this.renderLayout(this.focusMatrices.normal, this.props.layouts.normal);
     }
 
     hide() {
@@ -208,7 +203,6 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
 
     renderKeyboard(layout: JSX.Element[]) {
         const { texts, shouldHideOnBackdropClick, languageLayout } = this.props;
-        const layoutClassName = languageLayout?.className || '';
         const isSpecialLayout = this.renderedLayout === 'special';
         const isNormalLayout = this.renderedLayout === 'normal';
         return (
@@ -217,7 +211,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                     onClick={() => this.onCancel()}
                     enableOnClick={shouldHideOnBackdropClick}
                 />
-                <div className={`keyboard-wrapper ${layoutClassName}`}>
+                <div className="keyboard-wrapper">
                     <div className="keys-container side-bar layout-selector">
                         <div className="key-row first-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
@@ -258,25 +252,23 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                         <div className="key-row">
                             <div className="key key-wide key-empty">&nbsp;</div>
                         </div>
-                        {languageLayout
-                            ? (
-                                <div className="key-row rounded-border-container">
-                                    <Interactable
-                                        ref={this.keyRefs.language}
-                                        className="key key-wide key-with-icon key-language"
-                                        onPress={() => this.onLanguage()}
-                                    >
-                                        <div className="key-background">
-                                            <div className="key-mask-icon" />
-                                        </div>
-                                    </Interactable>
-                                </div>
-                            )
-                            : (
-                                <div className="key-row">
-                                    <div className="key key-wide key-empty">&nbsp;</div>
-                                </div>
-                            )}
+                        {!!languageLayout ?
+                            <div className="key-row rounded-border-container">
+                                <Interactable
+                                    ref={this.keyRefs.language}
+                                    className="key key-wide key-with-icon key-language"
+                                    onPress={() => this.onLanguage()}
+                                >
+                                    <div className="key-background">
+                                        <div className="key-mask-icon" />
+                                    </div>
+                                </Interactable>
+                            </div>
+                            :
+                            <div className="key-row">
+                                <div className="key key-wide key-empty">&nbsp;</div>
+                            </div>
+                        }
                     </div>
                     <div className="keys-container key-layout">
                         {layout}

package/packages/keyboard/src/WhitelabelKeyboard/_sizes.1080.scss

@@ -26,7 +26,6 @@ $icon-mask-size: 40px;
 $key-with-icon-padding: 17px 22px;
 
 $key-space-width: 528px;
-$key-space-wide-width: 609px;
 
 $focus-shadow-1: 0 1px 3px 0;
 $focus-shadow-2: 0 20px 32px 0;

package/packages/keyboard/src/WhitelabelKeyboard/_sizes.scss

@@ -26,7 +26,6 @@ $icon-mask-size: 27px;
 $key-with-icon-padding: 11px 15px;
 
 $key-space-width: 348px;
-$key-space-wide-width: 406px;
 
 $focus-shadow-1: 0 1px 2px 0;
 $focus-shadow-2: 0 13px 21px 0;

package/packages/keyboard/src/WhitelabelKeyboard/layouts/index.ts

@@ -1,14 +1,3 @@
-export { arabic } from './arabic';
-export { burmese } from './burmese';
-export { dari } from './dari';
 export { hebrew } from './hebrew';
-export { korean } from './korean';
 export { latin } from './latin';
-export { pashto } from './pashto';
-export { persian } from './persian';
-export { russian } from './russian';
 export { special } from './special';
-export { tibetan } from './tibetan';
-export { turkish } from './turkish';
-export { ukrainian } from './ukrainian';
-export { urdu } from './urdu';

package/packages/keyboard/src/WhitelabelKeyboard/types.ts

@@ -13,7 +13,6 @@ export type KeyTexts = {
 };
 
 export type LanguageLayout = {
-    className? : string,
     keyText: KeyTexts['toNormalLayout'],
     layout: KeyMatrixCell[][],
     makeFocusStrings: (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => KeyMatrixCell[][],

package/packages/l10n/README.md

@@ -76,24 +76,6 @@ type DateTimeFormatOptions = {
 }
 ```
 
-#### date-fns DateTime format
-It is also possible to use formatting provided by [date-fns](https://date-fns.org/v2.30.0/docs/format) library. First you need to globally configure the formats used (usually from backstage):
-```ts
-l10n.init({
-    dateFormatLong?: string | null, // e.g. 'eee, dd MMM' for "Wed, 09 Jul"
-    dateFormatNumeric?: string | null, // e.g. 'EEEE, MMMM d' for "Wednesday, July 9"
-    dateFormatShort?: string | null, // e.g. 'MM/dd/yyyy' for "07/09/2023"
-    timeFormat?: string | null, // e.g. 'h:mm a' for "9:05 PM"
-});
-```
-After that, `timeFormat` and `dateFormatShort` are used automatically where appropriate, in case the format string is _falsy_ the [default formatting implementation](#datetime-format) will be used. You can also specify which format you want to use in `DateTimeFormatOptions`:
-```ts
-type DateTimeFormatOptions = {
-    ...
-    formatType: 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat',
-}
-```
-
 You can use both `timestamp` in `ms` or `Date` object directly for formatting.
 
 #### Examples

package/packages/l10n/src/date/common.ts

@@ -7,7 +7,7 @@ const NOON = 12;
 
 export const SECOND_FROM_END = 2;
 
-export const h24 = (date: Date) => date.getUTCHours().toString();
+export const h24 = (date: Date) => date.getHours().toString();
 
 export const hh24 = (date: Date) => {
     const h = h24(date);
@@ -15,7 +15,7 @@ export const hh24 = (date: Date) => {
 };
 
 export const h12 = (date: Date) => {
-    const h = date.getUTCHours() % NOON;
+    const h = date.getHours() % NOON;
     return h === 0 ? '12' : h.toString();
 };
 
@@ -24,14 +24,14 @@ export const hh12 = (date: Date) => {
     return h.length === 1 ? `0${h}` : h;
 };
 
-export const m = (date: Date) => date.getUTCMinutes().toString();
+export const m = (date: Date) => date.getMinutes().toString();
 
 export const mm = (date: Date) => {
     const min = m(date);
     return min.length === 1 ? `0${min}` : min;
 };
 
-export const s = (date: Date) => date.getUTCSeconds().toString();
+export const s = (date: Date) => date.getSeconds().toString();
 
 export const ss = (date: Date) => {
     const sec = s(date);
@@ -39,7 +39,7 @@ export const ss = (date: Date) => {
 };
 
 export const amOrPm = (date: Date) => (
-    date.getUTCHours() < NOON ? 'AM' : 'PM'
+    date.getHours() < NOON ? 'AM' : 'PM'
 );
 
 export const h24Mm = (date: Date) => `${h24(date)}:${mm(date)}`;
@@ -107,7 +107,7 @@ export const collonSeparatedHour12MinuteSecond = (date: Date, options: DateTimeF
 
 export const processYear = (dateStringParts: string[], year: Year | undefined, date: Date) => {
     if (typeof year === 'undefined') return;
-    const fullYear = date.getUTCFullYear().toString();
+    const fullYear = date.getFullYear().toString();
     dateStringParts.push(
         year === '2-digit'
             ? fullYear.substring(fullYear.length - SECOND_FROM_END)
@@ -151,15 +151,3 @@ export const dateFormatter = (
         )(date),
     };
 };
-
-export const toTwoDigitLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: '2-digit', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);
-
-export const toNumericLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: 'numeric', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);

package/packages/l10n/src/date/cs.ts

@@ -1,4 +1,4 @@
-import { dateFormatter, processYear, toNumericLocaleTimeString } from './common';
+import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
 import type { DateTimeFormatOptions, Weekday, Day, Month, Year } from './types';
 
 const WEEKDAYS = {
@@ -86,4 +86,10 @@ const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-export const csDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString, ' ');
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: 'numeric', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);
+
+export const csDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString, ' ');

package/packages/l10n/src/date/en-001.ts

@@ -1,7 +1,7 @@
 import {
     collonSeparatedHour12MinuteSecond, dateFormatter, processYear, SECOND_FROM_END,
 } from './common';
-import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (
@@ -19,7 +19,7 @@ const processMonth = (
                 : numericMonth
         }${typeof year !== 'undefined' ? ',' : ''}`);
     } else {
-        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
+        dateStringParts.push(MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -49,7 +49,7 @@ const getDdMmYyyy = (dateStringParts: string[], year: Year | undefined, date: Da
     dateStringParts.push(`${d}/${m}/${y}`);
 };
 
-const toLocaleDateString = (date: Date) => (
+export const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },

package/packages/l10n/src/date/en-common.ts

@@ -1,6 +1,6 @@
-import type { Day, Month, Weekday, LocaleData, Year } from './types';
+import type { Day, Month, Weekday, Year } from './types';
 
-export const EN_MONTHS = {
+export const MONTHS = {
     narrow: [
         'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
     ],
@@ -13,7 +13,7 @@ export const EN_MONTHS = {
     ],
 };
 
-export const EN_WEEKDAYS = {
+export const WEEKDAYS = {
     narrow: [
         'S', 'M', 'T', 'W', 'T', 'F', 'S',
     ],
@@ -32,10 +32,9 @@ export const processWeekday = (
     day: Day | undefined,
     weekday: Weekday | undefined,
     date: Date,
-    weekdaysLocaleData: LocaleData = EN_WEEKDAYS,
 ) => {
     if (typeof weekday === 'undefined') return;
-    let weekdayString = weekdaysLocaleData[weekday][date.getDay()];
+    let weekdayString = WEEKDAYS[weekday][date.getDay()];
     if (
         typeof year !== 'undefined'
         || typeof month !== 'undefined'

package/packages/l10n/src/date/en-us.ts

@@ -4,7 +4,7 @@ import {
     processYear,
     SECOND_FROM_END,
 } from './common';
-import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (dateStringParts: string[], month: Month | undefined, date: Date) => {
@@ -16,7 +16,7 @@ const processMonth = (dateStringParts: string[], month: Month | undefined, date:
                 ? `0${numericMonth}` : numericMonth,
         );
     } else {
-        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
+        dateStringParts.push(MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -56,7 +56,7 @@ const getDdMmYyyy = (
     dateStringParts.push(`${m}/${d}/${y}`);
 };
 
-const toLocaleDateString = (date: Date) => (
+export const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: 'numeric', day: 'numeric',
     },