@itwin/reports-config-widget-react 0.4.0 → 0.6.0

package/src/widget/components/Reports.tsx

@@ -6,11 +6,7 @@ import { SvgAdd, SvgPlay, SvgRefresh } from "@itwin/itwinui-icons-react";
 import { Button, IconButton } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
-import {
-  EmptyMessage,
-  handleError,
-  LoadingOverlay,
-} from "./utils";
+import { EmptyMessage, handleError, LoadingOverlay } from "./utils";
 import "./Reports.scss";
 import DeleteModal from "./DeleteModal";
 import type { Report, ReportsClient } from "@itwin/insights-client";
@@ -29,7 +25,7 @@ const fetchReports = async (
   iTwinId: string | undefined,
   setIsLoading: (isLoading: boolean) => void,
   reportsClient: ReportsClient,
-  getAccessToken: () => Promise<AccessToken>
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   try {
     if (!iTwinId) return;
@@ -44,70 +40,47 @@ const fetchReports = async (
   }
 };
 
+/**
+ * Props for {@link Reports} component.
+ * @public
+ */
 export interface ReportsProps {
   onClickAddReport?: () => void;
   onClickReportTitle?: (report: Report) => void;
   onClickReportModify?: (report: Report) => void;
 }
 
-export const Reports = ({
-  onClickAddReport,
-  onClickReportModify,
-  onClickReportTitle,
-}: ReportsProps) => {
+/**
+ * Component to manage and list reports for an iTwin.
+ * @public
+ */
+export const Reports = ({ onClickAddReport, onClickReportModify, onClickReportTitle }: ReportsProps) => {
   const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();
   const { bulkExtractor } = useBulkExtractor();
-  const [showDeleteModal, setShowDeleteModal] = useState<Report | undefined>(
-    undefined
-  );
+  const [showDeleteModal, setShowDeleteModal] = useState<Report | undefined>(undefined);
   const [selectedReportIds, setSelectedReportIds] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [searchValue, setSearchValue] = useState<string>("");
   const [reports, setReports] = useState<Report[]>([]);
-  const jobStartEvent = useMemo(
-    () => new BeEvent<(reportId: string) => void>(),
-    []
-  );
+  const jobStartEvent = useMemo(() => new BeEvent<(reportId: string) => void>(), []);
 
   useEffect(() => {
-    void fetchReports(
-      setReports,
-      iTwinId,
-      setIsLoading,
-      reportsClient,
-      getAccessToken
-    );
+    void fetchReports(setReports, iTwinId, setIsLoading, reportsClient, getAccessToken);
   }, [getAccessToken, iTwinId, reportsClient, setIsLoading]);
 
   const refresh = useCallback(async () => {
-    await fetchReports(
-      setReports,
-      iTwinId,
-      setIsLoading,
-      reportsClient,
-      getAccessToken
-    );
+    await fetchReports(setReports, iTwinId, setIsLoading, reportsClient, getAccessToken);
   }, [getAccessToken, iTwinId, reportsClient]);
 
   const filteredReports = useMemo(
-    () =>
-      reports.filter((x) =>
-        [x.displayName, x.description]
-          .join(" ")
-          .toLowerCase()
-          .includes(searchValue.toLowerCase())
-      ),
-    [reports, searchValue]
+    () => reports.filter((x) => [x.displayName, x.description].join(" ").toLowerCase().includes(searchValue.toLowerCase())),
+    [reports, searchValue],
   );
 
   const onSelectionChange = (reportId: string, control: boolean) => {
     if (!control) setSelectedReportIds([]);
 
-    setSelectedReportIds((sr) =>
-      sr.some((r) => reportId === r)
-        ? sr.filter((r) => reportId !== r)
-        : [...sr, reportId]
-    );
+    setSelectedReportIds((sr) => (sr.some((r) => reportId === r) ? sr.filter((r) => reportId !== r) : [...sr, reportId]));
   };
 
   const updateDatasets = useCallback(async () => {
@@ -125,46 +98,28 @@ export const Reports = ({
         <div className="rcw-toolbar">
           <div className="rcw-button-spacing">
             {onClickAddReport && (
-              <Button
-                startIcon={<SvgAdd />}
-                onClick={onClickAddReport}
-                styleType="high-visibility"
-                title="New Report"
-              >
-                {ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:New"
-                )}
+              <Button startIcon={<SvgAdd />} onClick={onClickAddReport} styleType="high-visibility" title="New Report">
+                {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:New")}
               </Button>
             )}
             <IconButton
-              title={ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:UpdateDatasets"
-              )}
+              title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:UpdateDatasets")}
               onClick={updateDatasets}
               disabled={selectedReportIds.length === 0}
             >
               <SvgPlay />
             </IconButton>
           </div>
-          <div
-            className="rcw-search-bar-container"
-            data-testid="rcw-search-bar"
-          >
+          <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
             <IconButton
-              title={ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:Refresh"
-              )}
+              title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Refresh")}
               onClick={refresh}
               disabled={isLoading}
               styleType="borderless"
             >
               <SvgRefresh />
             </IconButton>
-            <SearchBar
-              searchValue={searchValue}
-              setSearchValue={setSearchValue}
-              disabled={isLoading}
-            />
+            <SearchBar searchValue={searchValue} setSearchValue={setSearchValue} disabled={isLoading} />
           </div>
         </div>
         {isLoading ? (
@@ -172,14 +127,10 @@ export const Reports = ({
         ) : reports.length === 0 && onClickAddReport ? (
           <EmptyMessage>
             <>
-              {ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:NoReports"
-              )}
+              {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:NoReports")}
               <div>
                 <Button onClick={onClickAddReport} styleType="cta">
-                  {ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:CreateOneReportCTA"
-                  )}
+                  {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:CreateOneReportCTA")}
                 </Button>
               </div>
             </>
@@ -198,9 +149,7 @@ export const Reports = ({
                 }}
                 onClickModify={onClickReportModify}
                 onSelectionChange={onSelectionChange}
-                selected={selectedReportIds.some(
-                  (reportId) => report.id === reportId
-                )}
+                selected={selectedReportIds.some((reportId) => report.id === reportId)}
               />
             ))}
           </div>
@@ -211,10 +160,7 @@ export const Reports = ({
         onClose={() => setShowDeleteModal(undefined)}
         onDelete={async () => {
           const accessToken = await getAccessToken();
-          await reportsClient.deleteReport(
-            accessToken,
-            showDeleteModal?.id ?? ""
-          );
+          await reportsClient.deleteReport(accessToken, showDeleteModal?.id ?? "");
         }}
         refresh={refresh}
       />

package/src/widget/components/ReportsConfigContext.tsx

@@ -1,24 +1,26 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { IModelApp } from "@itwin/core-frontend";
 import type { IModelsClientOptions } from "@itwin/imodels-client-management";
-import { Constants, IModelsClient } from "@itwin/imodels-client-management";
-import { ExtractionClient, MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
+import { IModelsClient } from "@itwin/imodels-client-management";
+import { ExtractionClient, GROUPING_AND_MAPPING_BASE_PATH, MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
 import { toaster } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { BulkExtractorContext } from "../context/BulkExtractorContext";
-import type {
-  GetAccessTokenFn,
-  ReportsConfigApiProps,
-} from "../context/ReportsConfigApiContext";
+import type { GetAccessTokenFn, ReportsConfigApiProps } from "../context/ReportsConfigApiContext";
 import { ReportsConfigApiContext } from "../context/ReportsConfigApiContext";
 import { REPORTS_CONFIG_BASE_URL } from "../ReportsConfigUiProvider";
 import { BulkExtractor } from "./BulkExtractor";
+import { IMODELS_BASE_URL } from "./Constants";
 import { FailedExtractionToast, SuccessfulExtractionToast } from "./ExtractionToast";
 import { generateUrl } from "./utils";
 
+/**
+ * Props for the {@link ReportsConfigContext} component.
+ * @public
+ */
 export interface ReportsConfigContextProps {
   getAccessToken?: GetAccessTokenFn;
   baseUrl?: string;
@@ -31,27 +33,29 @@ export interface ReportsConfigContextProps {
   children?: React.ReactNode;
 }
 
-const authorizationClientGetAccessToken = async () =>
-  (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
+const authorizationClientGetAccessToken = async () => (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
 
+/**
+ * Reports Config context providers required for all components.
+ * @public
+ */
 export const ReportsConfigContext = (props: ReportsConfigContextProps) => {
-  const reportsBaseUrl = useCallback(() => generateUrl(
-    REPORTING_BASE_PATH,
-    props.baseUrl || REPORTS_CONFIG_BASE_URL
-  ), [props.baseUrl]);
-  const iModelClientOptions: IModelsClientOptions = useMemo(() => ({
-    api: { baseUrl: generateUrl(Constants.api.baseUrl, props.baseUrl ?? REPORTS_CONFIG_BASE_URL) },
-  }), [props.baseUrl]);
-  const [extractionClient, setExtractionClient] = useState<ExtractionClient>(
-    props.extractionClient ?? new ExtractionClient(reportsBaseUrl())
+  const reportsBaseUrl = useCallback(() => generateUrl(REPORTING_BASE_PATH, props.baseUrl || REPORTS_CONFIG_BASE_URL), [props.baseUrl]);
+  const groupingMappingBaseUrl = useCallback(() => generateUrl(GROUPING_AND_MAPPING_BASE_PATH, props.baseUrl || REPORTS_CONFIG_BASE_URL), [props.baseUrl]);
+  const iModelClientOptions: IModelsClientOptions = useMemo(
+    () => ({
+      api: { baseUrl: generateUrl(IMODELS_BASE_URL, props.baseUrl ?? REPORTS_CONFIG_BASE_URL) },
+    }),
+    [props.baseUrl],
   );
+  const [extractionClient, setExtractionClient] = useState<ExtractionClient>(props.extractionClient ?? new ExtractionClient(reportsBaseUrl()));
 
   const [apiConfig, setApiConfig] = useState<ReportsConfigApiProps>({
     getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,
     baseUrl: reportsBaseUrl(),
     iTwinId: props.iTwinId,
     reportsClient: props.reportsClient ?? new ReportsClient(reportsBaseUrl()),
-    mappingsClient: props.mappingsClient ?? new MappingsClient(reportsBaseUrl()),
+    mappingsClient: props.mappingsClient ?? new MappingsClient(groupingMappingBaseUrl()),
     iModelsClient: props.iModelsClient ?? new IModelsClient(iModelClientOptions),
   });
 
@@ -70,8 +74,12 @@ export const ReportsConfigContext = (props: ReportsConfigContextProps) => {
   };
 
   const bulkExtractor = useMemo(
-    () => ({ bulkExtractor: props.bulkExtractor ?? new BulkExtractor(apiConfig.reportsClient, extractionClient, apiConfig.getAccessToken, successfulExtractionToast, failedExtractionToast) }),
-    [apiConfig.getAccessToken, apiConfig.reportsClient, extractionClient, props.bulkExtractor]
+    () => ({
+      bulkExtractor:
+        props.bulkExtractor ??
+        new BulkExtractor(apiConfig.reportsClient, extractionClient, apiConfig.getAccessToken, successfulExtractionToast, failedExtractionToast),
+    }),
+    [apiConfig.getAccessToken, apiConfig.reportsClient, extractionClient, props.bulkExtractor],
   );
 
   useEffect(() => {
@@ -87,9 +95,7 @@ export const ReportsConfigContext = (props: ReportsConfigContextProps) => {
 
   return (
     <ReportsConfigApiContext.Provider value={apiConfig}>
-      <BulkExtractorContext.Provider value={bulkExtractor}>
-        {props.children}
-      </BulkExtractorContext.Provider>
+      <BulkExtractorContext.Provider value={bulkExtractor}>{props.children}</BulkExtractorContext.Provider>
     </ReportsConfigApiContext.Provider>
   );
 };

package/src/widget/components/ReportsContainer.scss

@@ -13,4 +13,4 @@
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
-}
+}

package/src/widget/components/ReportsContainer.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
 import React, { useCallback, useState } from "react";
 import "./ReportsContainer.scss";
@@ -19,7 +19,7 @@ interface ReportsContainerProps {
 export enum RouteStep {
   ReportsList,
   ReportAction,
-  ReportMappings
+  ReportMappings,
 }
 
 export interface ReportsRouteFields {
@@ -32,14 +32,8 @@ export interface Route {
   reportsRoutingFields: ReportsRouteFields;
 }
 
-const ReportsContainer = ({
-  getAccessToken,
-  baseUrl,
-}: ReportsContainerProps) => {
-
-  const [routingHistory, setRoutingHistory] = useState<Route[]>([
-    { step: RouteStep.ReportsList, title: "iTwin Reports", reportsRoutingFields: {} },
-  ]);
+const ReportsContainer = ({ getAccessToken, baseUrl }: ReportsContainerProps) => {
+  const [routingHistory, setRoutingHistory] = useState<Route[]>([{ step: RouteStep.ReportsList, title: "iTwin Reports", reportsRoutingFields: {} }]);
   const currentRoute = routingHistory[routingHistory.length - 1];
   const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
   const navigateTo = useCallback((toRoute: (prev: Route | undefined) => Route) => {
@@ -55,15 +49,8 @@ const ReportsContainer = ({
   return (
     <ReportsConfigContext getAccessToken={getAccessToken} baseUrl={baseUrl} iTwinId={iTwinId}>
       <div className="rcw-reports-container">
-        <ReportsHeader
-          goBack={goBack}
-          currentRoute={currentRoute}
-        />
-        <ReportsRouter
-          currentRoute={currentRoute}
-          navigateTo={navigateTo}
-          goBack={goBack}
-        />
+        <ReportsHeader goBack={goBack} currentRoute={currentRoute} />
+        <ReportsRouter currentRoute={currentRoute} navigateTo={navigateTo} goBack={goBack} />
       </div>
     </ReportsConfigContext>
   );

package/src/widget/components/ReportsHeader.tsx

@@ -1,27 +1,14 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import React from "react";
 import type { Route } from "./ReportsContainer";
 import { RouteStep } from "./ReportsContainer";
 import { WidgetHeader } from "./utils";
 
-export const ReportsHeader = ({
-  goBack,
-  currentRoute,
-}: {
-  goBack: () => void;
-  currentRoute: Route;
-}) => {
-  const shouldDisableReturnFn =
-    currentRoute.step === RouteStep.ReportsList ||
-    currentRoute.step === RouteStep.ReportAction;
+export const ReportsHeader = ({ goBack, currentRoute }: { goBack: () => void; currentRoute: Route }) => {
+  const shouldDisableReturnFn = currentRoute.step === RouteStep.ReportsList || currentRoute.step === RouteStep.ReportAction;
 
-  return (
-    <WidgetHeader
-      returnFn={shouldDisableReturnFn ? undefined : goBack}
-      title={currentRoute.title}
-    />
-  );
+  return <WidgetHeader returnFn={shouldDisableReturnFn ? undefined : goBack} title={currentRoute.title} />;
 };

package/src/widget/components/ReportsRouter.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import React from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -29,9 +29,7 @@ export const ReportsRouter = ({
           onClickAddReport={() =>
             navigateTo(() => ({
               step: RouteStep.ReportAction,
-              title: ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:ITwinReports"
-              ),
+              title: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ITwinReports"),
               reportsRoutingFields: {},
             }))
           }

package/src/widget/components/SearchBar.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
 import { IconButton, LabeledInput } from "@itwin/itwinui-react";
 import React, { useState } from "react";
@@ -14,16 +14,13 @@ interface SearchBarProps {
   disabled?: boolean;
 }
 
-export const SearchBar = ({
-  searchValue,
-  setSearchValue,
-  disabled,
-}: SearchBarProps) => {
+export const SearchBar = ({ searchValue, setSearchValue, disabled }: SearchBarProps) => {
   const [searchBarOpen, setSearchBarOpened] = useState<boolean>(false);
   const [searchBarClosing, setSearchBarClosing] = useState<boolean>(false);
 
   return searchBarOpen || searchValue ? (
-    <div className="rcw-search-button"
+    <div
+      className="rcw-search-button"
       style={{
         animation: searchBarClosing ? "rcw-shrink .5s" : "rcw-expand .5s",
       }}
@@ -37,9 +34,7 @@ export const SearchBar = ({
     >
       <LabeledInput
         aria-label="search-textbox"
-        placeholder={ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Search"
-        )}
+        placeholder={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Search")}
         svgIcon={
           <IconButton
             onClick={() => setSearchBarClosing(true)}
@@ -60,7 +55,8 @@ export const SearchBar = ({
       styleType="borderless"
       data-testid="rcw-search-button"
       title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SearchReport")}
-      onClick={() => setSearchBarOpened(true)}>
+      onClick={() => setSearchBarOpened(true)}
+    >
       <SvgSearch />
     </IconButton>
   );

package/src/widget/components/SelectIModel.scss

@@ -12,4 +12,4 @@
     gap: var(--iui-size-xs);
     width: 100%;
   }
-}
+}

package/src/widget/components/SelectIModel.tsx

@@ -1,17 +1,11 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
 import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
-import type {
-  GetIModelListParams,
-  IModelsClient,
-  MinimalIModel,
-} from "@itwin/imodels-client-management";
-import {
-  toArray,
-} from "@itwin/imodels-client-management";
+import type { GetIModelListParams, IModelsClient, MinimalIModel } from "@itwin/imodels-client-management";
+import { toArray } from "@itwin/imodels-client-management";
 import { ComboBox, Label } from "@itwin/itwinui-react";
 import React, { useEffect, useMemo, useState } from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -22,17 +16,15 @@ const fetchIModels = async (
   setiModels: React.Dispatch<React.SetStateAction<MinimalIModel[]>>,
   iTwinId: string,
   iModelsClient: IModelsClient,
-  getAccessToken: () => Promise<AccessToken>
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   const accessToken = await getAccessToken();
   const authorization = AccessTokenAdapter.toAuthorizationCallback(accessToken);
   const getiModelListParams: GetIModelListParams = {
-    urlParams: { projectId: iTwinId },
+    urlParams: { iTwinId },
     authorization,
   };
-  const iModels = await toArray(
-    iModelsClient.iModels.getMinimalList(getiModelListParams)
-  );
+  const iModels = await toArray(iModelsClient.iModels.getMinimalList(getiModelListParams));
   setiModels(iModels);
 };
 
@@ -41,10 +33,7 @@ interface SelectedIModelProps {
   setSelectedIModelId: (iModelId: string) => void;
 }
 
-export const SelectIModel = ({
-  selectedIModelId,
-  setSelectedIModelId,
-}: SelectedIModelProps) => {
+export const SelectIModel = ({ selectedIModelId, setSelectedIModelId }: SelectedIModelProps) => {
   const { iTwinId, getAccessToken, iModelsClient } = useReportsConfigApi();
   const [iModels, setIModels] = useState<MinimalIModel[]>([]);
 
@@ -61,11 +50,7 @@ export const SelectIModel = ({
 
   return (
     <div className="rcw-select-imodel">
-      <Label htmlFor="combo-input">
-        {ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:SelectIModel"
-        )}
-      </Label>
+      <Label htmlFor="combo-input">{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SelectIModel")}</Label>
       <div className="rcw-combobox">
         <ComboBox<string>
           options={iModelOptions}

package/src/widget/components/utils.scss

@@ -44,4 +44,4 @@
 .rcw-skeleton-block {
   height: calc(var(--iui-size-s) * 3);
   width: 100%;
-}
+}