refactor: fixup typescript errors (#10295)

Esri · Sep 15, 2024 · 6a86d80 · 6a86d80
1 parent 9a89c5e
commit 6a86d80
Show file tree

Hide file tree

Showing 15 changed files with 26 additions and 23 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -38,7 +38,6 @@ import { DatePickerMessages } from "./components/date-picker/assets/date-picker/
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
 import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
-import { OverlayPositioning as OverlayPositioning1 } from "./components";
 import { DialogPlacement } from "./components/dialog/interfaces";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
@@ -134,7 +133,6 @@ export { DatePickerMessages } from "./components/date-picker/assets/date-picker/
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
 export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
-export { OverlayPositioning as OverlayPositioning1 } from "./components";
 export { DialogPlacement } from "./components/dialog/interfaces";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
@@ -1752,7 +1750,7 @@ export namespace Components {
         /**
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
-        "overlayPositioning": OverlayPositioning1;
+        "overlayPositioning": OverlayPositioning;
         /**
           * Specifies the placement of the dialog.
          */
@@ -9795,7 +9793,7 @@ declare namespace LocalJSX {
         /**
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
-        "overlayPositioning"?: OverlayPositioning1;
+        "overlayPositioning"?: OverlayPositioning;
         /**
           * Specifies the placement of the dialog.
          */

diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -279,7 +279,11 @@ export class Button
           }}
           disabled={childElType === "button" ? this.disabled || this.loading : null}
           download={
-            childElType === "a" && (this.download === "" || this.download) ? this.download : null
+            childElType === "a"
+              ? this.download === true || this.download === ""
+                ? ""
+                : this.download || null
+              : null
           }
           href={childElType === "a" && this.href}
           name={childElType === "button" && this.name}

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -43,7 +43,7 @@ import {
 import { componentOnReady } from "../../utils/component";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { HeadingLevel } from "../functional/Heading";
-import { OverlayPositioning } from "../../components";
+import type { OverlayPositioning } from "../../utils/floating-ui";
 import { DialogMessages } from "./assets/dialog/t9n";
 import {
   CSS,

diff --git a/packages/calcite-components/src/components/functional/FloatingArrow.tsx b/packages/calcite-components/src/components/functional/FloatingArrow.tsx
@@ -2,7 +2,7 @@ import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { JSXAttributes } from "@stencil/core/internal";
 import { FloatingLayout } from "../../utils/floating-ui";
 
-interface FloatingArrowProps extends JSXAttributes {
+interface FloatingArrowProps extends JSXAttributes<SVGSVGElement> {
   floatingLayout: FloatingLayout;
 }
 

diff --git a/packages/calcite-components/src/components/handle/handle.e2e.ts b/packages/calcite-components/src/components/handle/handle.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, hidden, renders, themed, t9n } from "../../tests/commonTests";
-import { HandleMessages } from "../../components";
+import type { HandleMessages } from "./assets/handle/t9n";
 import { CSS, SUBSTITUTIONS } from "./resources";
 
 describe("calcite-handle", () => {

diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
@@ -113,7 +113,9 @@ export class Link implements InteractiveComponent, LoadableComponent {
           When the 'download' property of type 'boolean | string' is set to true, the value is "".
           This works around that issue for now.
           */
-            download={Tag === "a" && (download === "" || download) ? download : null}
+            download={
+              Tag === "a" ? (download === true || download === "" ? "" : download || null) : null
+            }
             href={Tag === "a" && this.href}
             onClick={this.childElClickHandler}
             ref={this.storeTagRef}
@@ -174,7 +176,7 @@ export class Link implements InteractiveComponent, LoadableComponent {
   /** the rendered child element */
   private childEl: HTMLAnchorElement | HTMLSpanElement;
 
-  private childElClickHandler = (event: PointerEvent): void => {
+  private childElClickHandler = (event: MouseEvent): void => {
     if (!event.isTrusted) {
       // click was invoked internally, we stop it here
       event.stopPropagation();

diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
@@ -700,7 +700,7 @@ export class Panel
   };
 
   render(): VNode {
-    const { disabled, loading, panelKeyDownHandler, isClosed } = this;
+    const { disabled, loading, isClosed } = this;
 
     const panelNode = (
       <article
@@ -718,7 +718,7 @@ export class Panel
     );
 
     return (
-      <Host onKeyDown={panelKeyDownHandler}>
+      <Host onKeyDown={this.panelKeyDownHandler}>
         <InteractiveContainer disabled={disabled}>
           {loading ? <calcite-scrim loading={loading} /> : null}
           {panelNode}

diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
@@ -268,7 +268,7 @@ export class Popover
 
   @State() defaultMessages: PopoverMessages;
 
-  arrowEl: SVGElement;
+  arrowEl: SVGSVGElement;
 
   closeButtonEl: HTMLCalciteActionElement;
 
@@ -515,7 +515,7 @@ export class Popover
     deactivateFocusTrap(this);
   }
 
-  storeArrowEl = (el: SVGElement): void => {
+  storeArrowEl = (el: SVGSVGElement): void => {
     this.arrowEl = el;
     this.reposition(true);
   };

diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
@@ -356,7 +356,7 @@ export class Rating
     }
   };
 
-  private handleInputChange = (event: InputEvent) => {
+  private handleInputChange = (event: Event) => {
     if (this.isKeyboardInteraction === true) {
       const inputVal = Number(event.target["value"]);
       this.hoverValue = inputVal;

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -142,7 +142,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   @State() floatingLayout: FloatingLayout = "vertical";
 
-  arrowEl: SVGElement;
+  arrowEl: SVGSVGElement;
 
   guid = `calcite-tooltip-${guid()}`;
 
@@ -344,7 +344,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
         >
           <FloatingArrow
             floatingLayout={floatingLayout}
-            ref={(arrowEl: SVGElement) => (this.arrowEl = arrowEl)}
+            ref={(arrowEl) => (this.arrowEl = arrowEl)}
           />
           <div class={CSS.container}>
             <slot />

diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
@@ -95,7 +95,7 @@ export const positionFloatingUI =
       flipPlacements?: FlipPlacement[];
       offsetDistance?: number;
       offsetSkidding?: number;
-      arrowEl?: SVGElement;
+      arrowEl?: SVGSVGElement;
       type: UIType;
     },
   ): Promise<void> => {
@@ -335,7 +335,7 @@ function getMiddleware({
   flipPlacements?: EffectivePlacement[];
   offsetDistance?: number;
   offsetSkidding?: number;
-  arrowEl?: SVGElement;
+  arrowEl?: SVGSVGElement;
   type: UIType;
 }): Middleware[] {
   const defaultMiddleware = [shift(), hide()];

diff --git a/packages/calcite-components/src/utils/form.tsx b/packages/calcite-components/src/utils/form.tsx
@@ -1,6 +1,7 @@
 import { FunctionalComponent, h, VNode } from "@stencil/core";
 import { Writable } from "type-fest";
-import { IconNameOrString, Status } from "../components";
+import { Status } from "../components/interfaces";
+import type { IconNameOrString } from "../components/icon/interfaces";
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 
 /**

diff --git a/packages/calcite-components/src/utils/selectableComponent.ts b/packages/calcite-components/src/utils/selectableComponent.ts
@@ -1,4 +1,4 @@
-import { SelectionMode } from "../components";
+import { SelectionMode } from "../components/interfaces";
 
 /**
  * Defines interface for group components that manage selection behavior of their children.

diff --git a/packages/eslint-plugin-calcite-components/src/rules/require-event-emitter-type.ts b/packages/eslint-plugin-calcite-components/src/rules/require-event-emitter-type.ts
@@ -1,5 +1,4 @@
 import { Rule } from "eslint";
-// @ts-ignore
 import { stencilComponentContext } from "stencil-eslint-core";
 
 const rule: Rule.RuleModule = {

diff --git a/packages/eslint-plugin-calcite-components/src/rules/strict-boolean-attributes.ts b/packages/eslint-plugin-calcite-components/src/rules/strict-boolean-attributes.ts
@@ -1,5 +1,4 @@
 import { Rule } from "eslint";
-// @ts-ignore
 import { getDecorator, stencilComponentContext } from "stencil-eslint-core";
 
 const rule: Rule.RuleModule = {