fix(atomic): fix broken generated types (#4932)

KIT-3933
coveo · Feb 5, 2025 · 1c8d484 · 1c8d484
1 parent e986e85
commit 1c8d484
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/atomic/package.json b/packages/atomic/package.json
@@ -74,6 +74,7 @@
     "@coveo/headless": "3.15.0",
     "@popperjs/core": "2.11.8",
     "@salesforce-ux/design-system": "2.25.6",
+    "@stencil/core": "4.20.0",
     "dayjs": "1.11.13",
     "dompurify": "3.2.3",
     "escape-html": "1.0.3",
@@ -96,7 +97,6 @@
     "@rollup/plugin-replace": "6.0.2",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",
-    "@stencil/core": "4.20.0",
     "@stencil/react-output-target": "0.5.3",
     "@storybook/addon-a11y": "8.1.11",
     "@storybook/addon-essentials": "8.1.11",

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -17,14 +17,13 @@ import { ItemRenderingFunction } from "./components/common/item-list/item-list-c
 import { RedirectionPayload } from "./components/search/atomic-search-box/redirection-payload";
 import { AriaLabelGenerator } from "./components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products";
 import { AtomicInterface } from "./utils/initialization-utils";
-import { unknown as AnyBindings, ItemDisplayBasicLayout as ItemDisplayBasicLayout1, ItemDisplayDensity as ItemDisplayDensity1, ItemDisplayImageSize as ItemDisplayImageSize1, ItemRenderingFunction as ItemRenderingFunction1 } from "./components";
-import { AnyBindings as AnyBindings1 } from "./components/common/interface/bindings";
+import { AnyBindings } from "./components/common/interface/bindings";
 import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 import { NumericFilter, NumericFilterState, RelativeDateUnit } from "./components/common/types";
 import { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
 import { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
 import { InsightStore } from "./components/insight/atomic-insight-interface/store";
-import { InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
+import { Actions, InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
 import { InsightResultAttachToCaseEvent } from "./components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action";
 import { Section } from "./components/common/atomic-layout-section/sections";
 import { CommerceStore } from "./components/commerce/atomic-commerce-interface/store";
@@ -50,14 +49,13 @@ export { ItemRenderingFunction } from "./components/common/item-list/item-list-c
 export { RedirectionPayload } from "./components/search/atomic-search-box/redirection-payload";
 export { AriaLabelGenerator } from "./components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products";
 export { AtomicInterface } from "./utils/initialization-utils";
-export { unknown as AnyBindings, ItemDisplayBasicLayout as ItemDisplayBasicLayout1, ItemDisplayDensity as ItemDisplayDensity1, ItemDisplayImageSize as ItemDisplayImageSize1, ItemRenderingFunction as ItemRenderingFunction1 } from "./components";
-export { AnyBindings as AnyBindings1 } from "./components/common/interface/bindings";
+export { AnyBindings } from "./components/common/interface/bindings";
 export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
 export { NumericFilter, NumericFilterState, RelativeDateUnit } from "./components/common/types";
 export { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, LogLevel as InsightLogLevel, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
 export { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
 export { InsightStore } from "./components/insight/atomic-insight-interface/store";
-export { InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
+export { Actions, InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
 export { InsightResultAttachToCaseEvent } from "./components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action";
 export { Section } from "./components/common/atomic-layout-section/sections";
 export { CommerceStore } from "./components/commerce/atomic-commerce-interface/store";
@@ -931,7 +929,7 @@ export namespace Components {
      * Internal component made to be integrated in a NumericFacet.
      */
     interface AtomicFacetNumberInput {
-        "bindings": AnyBindings1;
+        "bindings": AnyBindings;
         "filter": NumericFilter;
         "filterState": NumericFilterState;
         "label": string;
@@ -1749,19 +1747,19 @@ export namespace Components {
         /**
           * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
          */
-        "density": ItemDisplayDensity1;
+        "density": ItemDisplayDensity;
         /**
           * The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
          */
-        "display": ItemDisplayBasicLayout1;
+        "display": ItemDisplayBasicLayout;
         /**
           * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
          */
         "headingLevel": number;
         /**
           * The expected size of the image displayed in the results.
          */
-        "imageSize": ItemDisplayImageSize1;
+        "imageSize": ItemDisplayImageSize;
         /**
           * The non-localized label for the list of recommendations.
          */
@@ -1790,7 +1788,7 @@ export namespace Components {
           * Sets a rendering function to bypass the standard HTML template mechanism for rendering results. You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.  Do not use this method if you integrate Atomic in a plain HTML deployment.
           * @param resultRenderingFunction
          */
-        "setRenderFunction": (resultRenderingFunction: ItemRenderingFunction1) => Promise<void>;
+        "setRenderFunction": (resultRenderingFunction: ItemRenderingFunction) => Promise<void>;
     }
     interface AtomicIpxRefineModal {
         /**
@@ -3715,7 +3713,7 @@ export namespace Components {
     interface AtomicTabPopover {
         "closePopoverOnFocusOut": (event: FocusEvent) => Promise<void>;
         "setButtonVisibility": (isVisible: boolean) => Promise<void>;
-        "togglePopover": () => Promise<void>;
+        "toggle": () => Promise<void>;
     }
     /**
      * The `atomic-table-element` element defines a table column in a result list.
@@ -7126,7 +7124,7 @@ declare namespace LocalJSX {
      * Internal component made to be integrated in a NumericFacet.
      */
     interface AtomicFacetNumberInput {
-        "bindings": AnyBindings1;
+        "bindings": AnyBindings;
         "filter": NumericFilter;
         "filterState": NumericFilterState;
         "label": string;
@@ -7917,19 +7915,19 @@ declare namespace LocalJSX {
         /**
           * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
          */
-        "density"?: ItemDisplayDensity1;
+        "density"?: ItemDisplayDensity;
         /**
           * The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
          */
-        "display"?: ItemDisplayBasicLayout1;
+        "display"?: ItemDisplayBasicLayout;
         /**
           * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
          */
         "headingLevel"?: number;
         /**
           * The expected size of the image displayed in the results.
          */
-        "imageSize"?: ItemDisplayImageSize1;
+        "imageSize"?: ItemDisplayImageSize;
         /**
           * The non-localized label for the list of recommendations.
          */

diff --git a/...late-components/atomic-product-numeric-field-value/atomic-product-numeric-field-value.tsx b/...late-components/atomic-product-numeric-field-value/atomic-product-numeric-field-value.tsx
@@ -1,11 +1,11 @@
 import {Product} from '@coveo/headless/commerce';
 import {Component, Prop, Element, State, Listen} from '@stencil/core';
-import {Bindings} from '../../../../components';
 import {InitializeBindings} from '../../../../utils/initialization-utils';
 import {
   defaultNumberFormatter,
   NumberFormatter,
 } from '../../../common/formats/format-common';
+import {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';
 import {ProductContext} from '../product-template-decorators';
 import {parseValue} from '../product-utils';
 
@@ -20,7 +20,7 @@ import {parseValue} from '../product-utils';
   shadow: false,
 })
 export class AtomicProductNumber {
-  @InitializeBindings() public bindings!: Bindings;
+  @InitializeBindings() public bindings!: CommerceBindings;
   @ProductContext() private product!: Product;
 
   @Element() host!: HTMLElement;

diff --git a/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx b/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx
@@ -4,9 +4,9 @@ import {
   DateRangeRequest,
 } from '@coveo/headless';
 import {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';
-import {AnyBindings} from '../../../../components';
 import {parseDate} from '../../../../utils/date-utils';
 import {Button} from '../../../common/button';
+import {AnyBindings} from '../../interface/bindings';
 
 /**
  * Internal component made to be integrated in a TimeframeFacet.

diff --git a/...erated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx b/...erated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx
@@ -13,7 +13,6 @@ import {
   Event,
   EventEmitter,
 } from '@stencil/core/internal';
-import {AnyBindings} from '../../../../components';
 import CloseIcon from '../../../../images/close.svg';
 import Success from '../../../../images/success.svg';
 import {
@@ -25,6 +24,7 @@ import {once, randomID} from '../../../../utils/utils';
 import {Button} from '../../button';
 import {FieldsetGroup} from '../../fieldset-group';
 import {IconButton} from '../../iconButton';
+import {AnyBindings} from '../../interface/bindings';
 import {RadioButton} from '../../stencil-radio-button';
 
 /**

diff --git a/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx b/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx
@@ -153,7 +153,7 @@ export class AtomicTabManagerBar {
           onClick={() => {
             tab.select();
             this.updatePopoverTabs();
-            this.tabPopover?.togglePopover();
+            this.tabPopover?.toggle();
           }}
         >
           {tab.label}

diff --git a/packages/atomic/src/components/common/tabs/tab-bar.tsx b/packages/atomic/src/components/common/tabs/tab-bar.tsx
@@ -153,7 +153,7 @@ export class TabBar {
           onClick={() => {
             tab.select();
             this.updatePopoverTabs();
-            this.tabPopover?.togglePopover();
+            this.tabPopover?.toggle();
           }}
         >
           {tab.label}

diff --git a/packages/atomic/src/components/common/tabs/tab-popover.tsx b/packages/atomic/src/components/common/tabs/tab-popover.tsx
@@ -60,7 +60,7 @@ export class TabPopover implements InitializableComponent {
     }
 
     if (e.key === 'Escape') {
-      this.togglePopover();
+      this.toggle();
     } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       e.preventDefault();
       this.navigatePopover(e.key);
@@ -123,7 +123,7 @@ export class TabPopover implements InitializableComponent {
   }
 
   @Method()
-  public async togglePopover() {
+  public async toggle() {
     this.isOpen = !this.isOpen;
   }
 
@@ -172,7 +172,7 @@ export class TabPopover implements InitializableComponent {
       <Button
         ref={(el) => (this.buttonRef = el!)}
         style="text-transparent"
-        onClick={() => this.togglePopover()}
+        onClick={() => this.toggle()}
         part="popover-button"
         ariaExpanded={`${this.isOpen}`}
         ariaLabel={ariaLabel}
@@ -204,7 +204,7 @@ export class TabPopover implements InitializableComponent {
       <div
         part="backdrop"
         class="fixed bottom-0 left-0 right-0 top-0 z-[9998] cursor-pointer bg-transparent"
-        onClick={() => this.togglePopover()}
+        onClick={() => this.toggle()}
       ></div>
     );
   }

diff --git a/...omic/src/components/insight/atomic-insight-result-action/atomic-insight-result-action.tsx b/...omic/src/components/insight/atomic-insight-result-action/atomic-insight-result-action.tsx
@@ -18,7 +18,7 @@ export interface InsightResultActionClickedEvent {
   result: Result;
 }
 
-enum Actions {
+export enum Actions {
   CopyToClipboard = 'copyToClipboard',
   AttachToCase = 'attachToCase',
   Quickview = 'quickview',

diff --git a/.../atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx b/.../atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx
@@ -21,12 +21,6 @@ import {
   Fragment,
   Watch,
 } from '@stencil/core';
-import {
-  ItemRenderingFunction,
-  ItemDisplayBasicLayout,
-  ItemDisplayDensity,
-  ItemDisplayImageSize,
-} from '../../../../components';
 import {FocusTargetController} from '../../../../utils/accessibility-utils';
 import {
   InitializableComponent,
@@ -41,9 +35,17 @@ import {createAppLoadedListener} from '../../../common/interface/store';
 import {DisplayGrid} from '../../../common/item-list/display-grid';
 import {DisplayWrapper} from '../../../common/item-list/display-wrapper';
 import {ItemDisplayGuard} from '../../../common/item-list/item-display-guard';
-import {ItemListCommon} from '../../../common/item-list/item-list-common';
+import {
+  ItemListCommon,
+  ItemRenderingFunction,
+} from '../../../common/item-list/item-list-common';
 import {ItemTemplateProvider} from '../../../common/item-list/item-template-provider';
-import {getItemListDisplayClasses} from '../../../common/layout/display-options';
+import {
+  getItemListDisplayClasses,
+  ItemDisplayBasicLayout,
+  ItemDisplayDensity,
+  ItemDisplayImageSize,
+} from '../../../common/layout/display-options';
 import {RecsBindings} from '../../../recommendations/atomic-recs-interface/atomic-recs-interface';
 
 /**

diff --git a/...ges/atomic/src/components/search/result-lists/atomic-result-list/adopted-stylesheets.d.ts b/...ges/atomic/src/components/search/result-lists/atomic-result-list/adopted-stylesheets.d.ts
diff --git a/packages/atomic/src/utils/replace-breakpoint.ts b/packages/atomic/src/utils/replace-breakpoint.ts
@@ -10,9 +10,6 @@ function replaceMediaQuery(style: string, mobileBreakpoint: string) {
 }
 
 function replaceStyleSheet(element: HTMLElement, mobileBreakpoint: string) {
-  // Not adopted by all browsers, not part of Typescript yet
-  // https://caniuse.com/mdn-api_document_adoptedstylesheets
-  // https://github.com/microsoft/TypeScript/issues/30022
   const stylesheets = element.shadowRoot?.adoptedStyleSheets;
   if (!stylesheets || !stylesheets.length) {
     return;
@@ -22,7 +19,7 @@ function replaceStyleSheet(element: HTMLElement, mobileBreakpoint: string) {
   const style = Object.values(stylesheet.cssRules)
     .map((rule) => rule.cssText)
     .join('');
-  stylesheet.replaceSync?.(replaceMediaQuery(style, mobileBreakpoint));
+  stylesheet.replaceSync(replaceMediaQuery(style, mobileBreakpoint));
 }
 
 function replateStyleContent(element: HTMLElement, breakpoint: string) {

diff --git a/packages/samples/angular/tsconfig.json b/packages/samples/angular/tsconfig.json
@@ -14,12 +14,11 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
     "lib": ["es2020", "dom"],
-    "skipLibCheck": true,
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {