Merge 65e60c3 into 28f6a3a

scripts/prepublish.js

@@ -14,6 +14,9 @@ execSync("mtc");
 execSync(
     "find dist -type f -name 'component*.js' | xargs sed -i '' 's/exports.default =/module.exports =/g'",
 );
+execSync(
+    "find dist -type f -name 'component*.js' | xargs sed -i '' 's/ extends Marko.Component {/ {/g'",
+);
 execSync(
     "sed -i '' 's/no-update-body-if=!!config.preserveItems/no-update-body-if(!!config.preserveItems)/g' dist/components/ebay-carousel/index.marko",
 );
@@ -40,13 +43,3 @@ fs.writeFileSync(
     markoConfigPath,
     fs.readFileSync(markoConfigPath, "utf-8").replace(/\.\/src\//g, "./dist/"),
 );
-
-// copy over `types.d.ts` and `makeup.d.ts` files
-fs.copyFileSync(
-    path.join(rootDir, "src/types.d.ts"),
-    path.join(rootDir, "dist/types.d.ts"),
-);
-fs.copyFileSync(
-    path.join(rootDir, "src/makeup.d.ts"),
-    path.join(rootDir, "dist/makeup.d.ts"),
-);

src/components/components/ebay-dialog-base/component.ts

@@ -4,6 +4,7 @@ import type { AttrClass } from "marko/tags-html";
 import * as bodyScroll from "../../../common/body-scroll";
 import * as eventUtils from "../../../common/event-utils";
 import transition from "../../../common/transition";
+import { WithNormalizedProps } from "../../../global";
 
 interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
     "button-position"?: "right" | "left" | "bottom" | "hidden";

src/components/components/ebay-notice-base/component.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../../global";
+
 interface NoticeBaseInput
     extends Omit<Marko.Input<"section">, "title" | `on${string}`> {
     status?:

src/components/components/ebay-tooltip-base/component-browser.ts

@@ -1,7 +1,17 @@
 import Expander from "makeup-expander";
 import focusables from "makeup-focusables";
-import { inline, autoUpdate, flip, computePosition, shift, offset, arrow, type Placement } from '@floating-ui/dom';
-import { pointerStyles } from './constants'
+import {
+    inline,
+    autoUpdate,
+    flip,
+    computePosition,
+    shift,
+    offset,
+    arrow,
+    type Placement,
+} from "@floating-ui/dom";
+import { pointerStyles } from "./constants";
+import { WithNormalizedProps } from "../../../global";
 
 interface TooptipBaseInput {
     open?: boolean;
@@ -85,7 +95,7 @@ class TooltipBase extends Marko.Component<Input> {
         const expanderEl = container?.getElementsByClassName(type)[0];
 
         if (host && !isTourtip) {
-           this._expander = new Expander(expanderEl, {
+            this._expander = new Expander(expanderEl, {
                 hostSelector: hostSelector,
                 contentSelector: `.${type}__overlay`,
                 expandedClass: `${type}--expanded`,
@@ -111,43 +121,51 @@ class TooltipBase extends Marko.Component<Input> {
     }
 
     updateTip() {
-            computePosition((this.hostEl as HTMLElement), (this.overlayEl as HTMLElement), {
-                placement: this.input.placement || pointerStyles[this.input.pointer ?? 'bottom'],
+        computePosition(
+            this.hostEl as HTMLElement,
+            this.overlayEl as HTMLElement,
+            {
+                placement:
+                    this.input.placement ||
+                    pointerStyles[this.input.pointer ?? "bottom"],
                 middleware: [
                     offset(this.input.offset || 6),
                     inline(),
                     flip(),
                     shift(),
-                    arrow({ element: this.arrowEl as HTMLElement, padding: 20 }),
+                    arrow({
+                        element: this.arrowEl as HTMLElement,
+                        padding: 20,
+                    }),
                 ],
-            }).then(({ x, y, placement, middlewareData }) => {
-                Object.assign(this.overlayEl?.style || {}, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                });
-
-                // Accessing the data
-                const arrowX = middlewareData.arrow?.x;
-                const arrowY = middlewareData.arrow?.y;
-
-                const staticSide = {
-                    top: 'bottom',
-                    strategy: 'fixed',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right',
-                }[placement.split('-')[0]];
-
-                Object.assign(this.arrowEl?.style || {}, {
-                    left: arrowX != null ? `${arrowX}px` : '',
-                    top: arrowY != null ? `${arrowY}px` : '',
-                    right: '',
-                    bottom: '',
-                    [staticSide || '']: '-4px',
-                });
+            },
+        ).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(this.overlayEl?.style || {}, {
+                left: `${x}px`,
+                top: `${y}px`,
             });
-        }
 
+            // Accessing the data
+            const arrowX = middlewareData.arrow?.x;
+            const arrowY = middlewareData.arrow?.y;
+
+            const staticSide = {
+                top: "bottom",
+                strategy: "fixed",
+                right: "left",
+                bottom: "top",
+                left: "right",
+            }[placement.split("-")[0]];
+
+            Object.assign(this.arrowEl?.style || {}, {
+                left: arrowX != null ? `${arrowX}px` : "",
+                top: arrowY != null ? `${arrowY}px` : "",
+                right: "",
+                bottom: "",
+                [staticSide || ""]: "-4px",
+            });
+        });
+    }
 
     _setupBaseTooltip() {
         const { type } = this.input;
@@ -158,7 +176,6 @@ class TooltipBase extends Marko.Component<Input> {
         this.overlayEl = this.el?.querySelector(`.${type}__overlay`) || null;
         this.arrowEl = this.el?.querySelector(`.${type}__pointer`) || null;
 
-
         if (this.input.type !== "dialog--mini") {
             this._setupMakeup();
         }

src/components/components/ebay-tooltip-overlay/component-browser.ts

@@ -1,5 +1,6 @@
 import type { AttrClass } from "marko/tags-html";
-import {typeRoles} from './constants'
+import { typeRoles } from "./constants";
+import { WithNormalizedProps } from "../../../global";
 
 interface TooltipOverlayInput {
     toJSON?: any;

src/components/ebay-3d-viewer/component.ts

@@ -1,5 +1,6 @@
 import type { AttrClass } from "marko/tags-html";
 import { CDNLoader } from "../../common/cdn";
+import { WithNormalizedProps } from "../../global";
 
 interface ViewerInput {
     "cdn-url"?: string;

src/components/ebay-alert-dialog/index.marko

@@ -1,4 +1,5 @@
 import type { Input as BaseInput } from "<ebay-dialog-base>";
+import { WithNormalizedProps } from "../../global";
 
 static interface AlertDialogInput extends Omit<BaseInput, `on${string}`> {
     "confirm-text"?: string;

src/components/ebay-area-chart/component.ts

@@ -15,6 +15,7 @@ import {
 import { debounce } from "../../common/event-utils";
 import { ebayLegend } from "../../common/charts/legend";
 import Highcharts from "highcharts";
+import { WithNormalizedProps } from "../../global";
 
 interface AreaChartInput extends Omit<Marko.Input<"div">, `on${string}`> {
     title: Highcharts.TitleOptions["text"];

src/components/ebay-avatar/index.marko

@@ -1,5 +1,6 @@
 import { processHtmlAttributes } from "../../common/html-attributes";
 import { getColorForText } from "./util";
+import { WithNormalizedProps } from "../../global";
 
 static type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
 

src/components/ebay-badge/index.marko

@@ -1,5 +1,6 @@
 import { processHtmlAttributes } from "../../common/html-attributes";
 import type { AttrClass } from "marko/tags-html";
+import { WithNormalizedProps } from "../../global";
 
 static interface BadgeInput extends Marko.Input<"span"> {
     type?: "menu" | "icon";
@@ -16,7 +17,7 @@ $ const {
     ...htmlInput
 } = input;
 
-$ const roundedNumber = Math.round(+(number ?? NaN));
+$ const roundedNumber = Math.round(+(number === undefined ? NaN : number));
 
 <if(roundedNumber > 0)>
     <span

src/components/ebay-bar-chart/component.ts

@@ -18,6 +18,7 @@ import { eBayColumns } from "../../common/charts/bar-chart";
 import Highcharts from "highcharts";
 
 import subtemplate from "./subtemplate.marko";
+import { WithNormalizedProps } from "../../global";
 
 interface SeriesItem
     extends Highcharts.PlotAreaOptions,

src/components/ebay-bar-chart/subtemplate.component-browser.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../global";
+
 interface TooltipInput {
     date: string;
     x: number;

src/components/ebay-breadcrumbs/component.ts

@@ -2,6 +2,7 @@ import * as eventUtils from "../../common/event-utils";
 import { getMaxWidth } from "../../common/dom";
 import type { AttrClass } from "marko/tags-html";
 import type { MenuEvent } from "../ebay-menu/component";
+import { WithNormalizedProps } from "../../global";
 
 interface BreadcrumbsInput extends Omit<Marko.Input<"nav">, `on${string}`> {
     "a11y-heading-tag"?: keyof Marko.NativeTags;

src/components/ebay-breadcrumbs/index.marko

@@ -10,7 +10,7 @@ $ const {
     ...htmlInput
 } = input;
 
-$ const items = [...(attrTagItems ?? [])];
+$ const items = [...(attrTagItems || [])];
 
 $ var anyHref = (items || []).some((element) => element.href != null);
 <nav

src/components/ebay-button/component-browser.ts

@@ -1,4 +1,5 @@
 import * as eventUtils from "../../common/event-utils";
+import { WithNormalizedProps } from "../../global";
 import { validSizes } from "./constants";
 
 export interface ButtonEvent<T extends Event> {

src/components/ebay-calendar/component.ts

@@ -1,3 +1,4 @@
+import { WithNormalizedProps } from "../../global";
 import {
     dateArgToISO,
     fromISO,

src/components/ebay-carousel/component.ts

@@ -5,6 +5,7 @@ import { resizeUtil } from "../../common/event-utils";
 import { processHtmlAttributes } from "../../common/html-attributes";
 import { onScrollDebounced as onScroll } from "./utils/on-scroll-debounced";
 import { scrollTransition } from "./utils/scroll-transition";
+import { WithNormalizedProps } from "../../global";
 
 type Direction = typeof LEFT | typeof RIGHT;
 // Used for carousel slide direction.

src/components/ebay-character-count/component.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../global";
+
 export interface CharacterCountEvent {
     count: number;
     inputAriaLive: Marko.AriaAttributes["aria-live"];

src/components/ebay-checkbox/component-browser.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../global";
+
 export interface CheckboxEvent {
     originalEvent: Event;
     value: string;

src/components/ebay-chip/index.marko

@@ -1,4 +1,5 @@
 import { processHtmlAttributes } from "../../common/html-attributes";
+import { WithNormalizedProps } from "../../global";
 
 static interface ChipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     renderBody?: Marko.Body;

src/components/ebay-combobox/component.ts

@@ -5,6 +5,7 @@ import { scroll } from "../../common/element-scroll";
 import * as eventUtils from "../../common/event-utils";
 import safeRegex from "../../common/build-safe-regex";
 import type { AttrClass } from "marko/tags-html";
+import { WithNormalizedProps } from "../../global";
 
 interface ComboboxEvent {
     currentInputValue: State["currentValue"];

src/components/ebay-combobox/index.marko

@@ -25,7 +25,7 @@ $ const {
     class: buttonClass,
     renderBody: buttonRenderBody,
     ...htmlButton
-} = button ?? {}
+} = button || {}
 
 $ var hasButton = !!button;
 $ var defaultTag = fluid ? "div" : "span";

src/components/ebay-confirm-dialog/index.marko

@@ -1,4 +1,6 @@
 import type { Input as BaseInput } from "<ebay-dialog-base>";
+import { WithNormalizedProps } from "../../global";
+
 static interface ConfirmDialogInput extends Omit<BaseInput, `on${string}`> {
     "reject-text"?: string;
     "confirm-text"?: string;

src/components/ebay-cta-button/index.marko

@@ -1,4 +1,5 @@
 import { processHtmlAttributes } from "../../common/html-attributes"
+import { WithNormalizedProps } from "../../global";
 
 static interface CtaButtonInput extends Marko.Input<"a"> {
     size?: "default" | "large";

src/components/ebay-date-textbox/component.ts

@@ -1,5 +1,6 @@
 import Expander from "makeup-expander";
 import { toISO, type DayISO, dateArgToISO } from "../ebay-calendar/date-utils";
+import { WithNormalizedProps } from "../../global";
 
 const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
 

src/components/ebay-date-textbox/index.marko

@@ -45,7 +45,7 @@ $ const [rangeStartPlaceholder, mainPlaceholder] = (
             selected=(
                 state.firstSelected && state.secondSelected
                     ? [state.firstSelected, state.secondSelected]
-                    : state.firstSelected ?? state.secondSelected ?? undefined
+                    : state.firstSelected || state.secondSelected || undefined
             )
             onSelect("onPopoverSelect")
         />

src/components/ebay-details/component-browser.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../global";
+
 export interface DetailsInput
     extends Omit<Marko.Input<"details">, `on${string}`> {
     toJSON?: any;

src/components/ebay-drawer-dialog/component.ts

@@ -1,3 +1,4 @@
+import { WithNormalizedProps } from "../../global";
 import DialogBase, {
     type Input as BaseInput,
 } from "../components/ebay-dialog-base/component";

src/components/ebay-eek/eek-util.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../global";
+
 const validRanges = {
     "A+++": ["D", "E", "G"],
     "A++": ["E", "G"],

src/components/ebay-fake-link/component-browser.ts

@@ -1,4 +1,5 @@
 import * as eventUtils from "../../common/event-utils";
+import { WithNormalizedProps } from "../../global";
 
 interface FakeLinkInput extends Omit<Marko.Input<"button">, `on${string}`> {
     toJSON?: any;

src/components/ebay-fake-menu-button/component.ts

@@ -5,6 +5,7 @@ import type {
     Input as FakeMenuInput,
     Item as FakeMenuItem,
 } from "../ebay-fake-menu/component";
+import { WithNormalizedProps } from "../../global";
 
 interface FakeMenuButtonInput extends Omit<Marko.Input<"span">, `on${string}`> {
     text?: string;

src/components/ebay-fake-menu-button/index.marko

@@ -44,7 +44,7 @@ $ {
         tagName = IconButton;
         isButtonVariant = false;
     } else {
-        priority = inputPriority ?? null;
+        priority = inputPriority || null;
         prefix = 'btn';
     }
 }

src/components/ebay-fake-menu/component.ts

@@ -5,6 +5,7 @@ import setupMenu, {
     type MenuState,
     MenuUtils,
 } from "../../common/menu-utils";
+import { WithNormalizedProps } from "../../global";
 
 export interface MenuEvent {
     el?: HTMLElement;

src/components/ebay-fake-tabs/index.marko

@@ -1,4 +1,5 @@
 import { processHtmlAttributes } from "../../common/html-attributes"
+import { WithNormalizedProps } from "../../global";
 
 $ const {
     selectedIndex = 0,

src/components/ebay-filter-menu-button/component.ts

@@ -6,6 +6,7 @@ import setupMenu, {
     type MenuState,
 } from "../../common/menu-utils";
 import type { FilterMenuEvent } from "../ebay-filter-menu/component";
+import { WithNormalizedProps } from "../../global";
 
 export interface FilterMenuButtonEvent {
     el?: Element;

src/components/ebay-filter-menu/component.ts

@@ -7,6 +7,7 @@ import setupMenu, {
     type MenuState,
 } from "../../common/menu-utils";
 import type { RadioEvent } from "../ebay-radio/component-browser";
+import { WithNormalizedProps } from "../../global";
 
 export interface FilterMenuEvent<T extends Event = Event> {
     el?: Element;

src/components/ebay-filter/component.ts

@@ -1,3 +1,5 @@
+import { WithNormalizedProps } from "../../global";
+
 export interface FilterInput
     extends Omit<Marko.Input<"button">, `on${string}`> {
     selected?: boolean;