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

package/lib/cjs/widget/components/DeleteModal.js

@@ -29,36 +29,32 @@ const react_1 = __importStar(require("react"));
 const ReportsConfigWidget_1 = require("../../ReportsConfigWidget");
 require("./DeleteModal.scss");
 const utils_1 = require("./utils");
-const DeleteModal = ({ entityName, show, setShow, onDelete, refresh, }) => {
-    const [isLoading, setIsLoading] = react_1.useState(false);
+const DeleteModal = ({ entityName, onClose, onDelete, refresh, }) => {
+    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
     const deleteCallback = async () => {
         try {
-            setIsLoading(true);
+            setIsDeleting(true);
             await onDelete();
-            setShow(false);
             await refresh();
+            onClose();
         }
         catch (error) {
-            utils_1.handleError(error.status);
+            (0, utils_1.handleError)(error.status);
         }
         finally {
-            setIsLoading(false);
+            setIsDeleting(false);
         }
     };
-    return (react_1.default.createElement(itwinui_react_1.Modal, { title: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Confirm"), isOpen: show, isDismissible: !isLoading, onClose: () => {
-            setShow(false);
-        } },
+    return (react_1.default.createElement(itwinui_react_1.Modal, { title: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Confirm"), isOpen: !!entityName, isDismissible: !isDeleting, onClose: onClose },
         react_1.default.createElement(itwinui_react_1.ModalContent, null,
             react_1.default.createElement("div", { className: "rcw-delete-modal-body-text" },
-                react_1.default.createElement(itwinui_react_1.Leading, null, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AreYouSureYouWantToDelete")),
+                react_1.default.createElement(itwinui_react_1.Text, { variant: 'leading' }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AreYouSureYouWantToDelete")),
                 react_1.default.createElement("strong", null, react_1.default.createElement(itwinui_react_1.MiddleTextTruncation, { text: `${entityName}?` })))),
         react_1.default.createElement(itwinui_react_1.ModalButtonBar, null,
-            isLoading && (react_1.default.createElement("div", { className: "rcw-loading-delete", "data-testid": "rcw-loading-delete" },
+            isDeleting && (react_1.default.createElement("div", { className: "rcw-loading-delete", "data-testid": "rcw-loading-delete" },
                 react_1.default.createElement(utils_1.LoadingSpinner, null))),
-            react_1.default.createElement(itwinui_react_1.Button, { styleType: "high-visibility", onClick: deleteCallback, disabled: isLoading }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Delete")),
-            react_1.default.createElement(itwinui_react_1.Button, { styleType: "default", onClick: () => {
-                    setShow(false);
-                }, disabled: isLoading }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Cancel")))));
+            react_1.default.createElement(itwinui_react_1.Button, { styleType: "high-visibility", onClick: deleteCallback, disabled: isDeleting }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Delete")),
+            react_1.default.createElement(itwinui_react_1.Button, { styleType: "default", onClick: onClose, disabled: isDeleting }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Cancel")))));
 };
 exports.DeleteModal = DeleteModal;
 exports.default = exports.DeleteModal;

package/lib/cjs/widget/components/DeleteModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteModal.js","sourceRoot":"","sources":["../../../../src/widget/components/DeleteModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,wDAO8B;AAC9B,+CAAwC;AACxC,mEAAgE;AAChE,8BAA4B;AAC5B,mCAAsD;AAU/C,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,GACU,EAAE,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAU,KAAK,CAAC,CAAC;IAE3D,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;QAChC,IAAI;YACF,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,MAAM,QAAQ,EAAE,CAAC;YACjB,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,MAAM,OAAO,EAAE,CAAC;SACjB;QAAC,OAAO,KAAU,EAAE;YACnB,mBAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC3B;gBAAS;YACR,YAAY,CAAC,KAAK,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,qBAAK,IACJ,KAAK,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACxD,6BAA6B,CAC9B,EACD,MAAM,EAAE,IAAI,EACZ,aAAa,EAAE,CAAC,SAAS,EACzB,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;QAED,8BAAC,4BAAY;YACX,uCAAK,SAAS,EAAC,4BAA4B;gBACzC,8BAAC,uBAAO,QACL,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAClD,+CAA+C,CAChD,CACO;gBACV,8CAAS,8BAAC,oCAAoB,IAAC,IAAI,EAAE,GAAG,UAAU,GAAG,GAAI,CAAU,CAC/D,CACO;QACf,8BAAC,8BAAc;YACZ,SAAS,IAAI,CACZ,uCAAK,SAAS,EAAC,oBAAoB,iBAAa,oBAAoB;gBAClE,8BAAC,sBAAc,OAAG,CACd,CACP;YACD,8BAAC,sBAAM,IACL,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,SAAS,IAElB,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAClD,4BAA4B,CAC7B,CACM;YACT,8BAAC,sBAAM,IACL,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC,EACD,QAAQ,EAAE,SAAS,IAElB,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAClD,4BAA4B,CAC7B,CACM,CACM,CACX,CACT,CAAC;AACJ,CAAC,CAAC;AAxEW,QAAA,WAAW,eAwEtB;AAEF,kBAAe,mBAAW,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  Button,\n  Leading,\n  MiddleTextTruncation,\n  Modal,\n  ModalButtonBar,\n  ModalContent,\n} from \"@itwin/itwinui-react\";\nimport React, { useState } from \"react\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\nimport \"./DeleteModal.scss\";\nimport { handleError, LoadingSpinner } from \"./utils\";\n\nexport interface DeleteModalProps {\n  entityName: string;\n  show: boolean;\n  setShow: React.Dispatch<React.SetStateAction<boolean>>;\n  onDelete: () => Promise<void>;\n  refresh: () => Promise<void>;\n}\n\nexport const DeleteModal = ({\n  entityName,\n  show,\n  setShow,\n  onDelete,\n  refresh,\n}: DeleteModalProps) => {\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const deleteCallback = async () => {\n    try {\n      setIsLoading(true);\n      await onDelete();\n      setShow(false);\n      await refresh();\n    } catch (error: any) {\n      handleError(error.status);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <Modal\n      title={ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Confirm\"\n      )}\n      isOpen={show}\n      isDismissible={!isLoading}\n      onClose={() => {\n        setShow(false);\n      }}\n    >\n      <ModalContent>\n        <div className=\"rcw-delete-modal-body-text\">\n          <Leading>\n            {ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:AreYouSureYouWantToDelete\"\n            )}\n          </Leading>\n          <strong>{<MiddleTextTruncation text={`${entityName}?`} />}</strong>\n        </div>\n      </ModalContent>\n      <ModalButtonBar>\n        {isLoading && (\n          <div className=\"rcw-loading-delete\" data-testid=\"rcw-loading-delete\">\n            <LoadingSpinner />\n          </div>\n        )}\n        <Button\n          styleType=\"high-visibility\"\n          onClick={deleteCallback}\n          disabled={isLoading}\n        >\n          {ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Delete\"\n          )}\n        </Button>\n        <Button\n          styleType=\"default\"\n          onClick={() => {\n            setShow(false);\n          }}\n          disabled={isLoading}\n        >\n          {ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Cancel\"\n          )}\n        </Button>\n      </ModalButtonBar>\n    </Modal>\n  );\n};\n\nexport default DeleteModal;\n"]}
+{"version":3,"file":"DeleteModal.js","sourceRoot":"","sources":["../../../../src/widget/components/DeleteModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,wDAO8B;AAC9B,+CAAwC;AACxC,mEAAgE;AAChE,8BAA4B;AAC5B,mCAAsD;AAS/C,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,OAAO,EACP,QAAQ,EACR,OAAO,GACU,EAAE,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE7D,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;QAChC,IAAI;YACF,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,MAAM,QAAQ,EAAE,CAAC;YACjB,MAAM,OAAO,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC;SACX;QAAC,OAAO,KAAU,EAAE;YACnB,IAAA,mBAAW,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC3B;gBAAS;YACR,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,qBAAK,IACJ,KAAK,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACxD,6BAA6B,CAC9B,EACD,MAAM,EAAE,CAAC,CAAC,UAAU,EACpB,aAAa,EAAE,CAAC,UAAU,EAC1B,OAAO,EAAE,OAAO;QAEhB,8BAAC,4BAAY;YACX,uCAAK,SAAS,EAAC,4BAA4B;gBACzC,8BAAC,oBAAI,IAAC,OAAO,EAAC,SAAS,IACpB,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAClD,+CAA+C,CAChD,CACI;gBACP,8CAAS,8BAAC,oCAAoB,IAAC,IAAI,EAAE,GAAG,UAAU,GAAG,GAAI,CAAU,CAC/D,CACO;QACf,8BAAC,8BAAc;YACZ,UAAU,IAAI,CACb,uCAAK,SAAS,EAAC,oBAAoB,iBAAa,oBAAoB;gBAClE,8BAAC,sBAAc,OAAG,CACd,CACP;YACD,8BAAC,sBAAM,IACL,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,UAAU,IAEnB,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAClD,4BAA4B,CAC7B,CACM;YACT,8BAAC,sBAAM,IACL,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,IAEnB,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAClD,4BAA4B,CAC7B,CACM,CACM,CACX,CACT,CAAC;AACJ,CAAC,CAAC;AAnEW,QAAA,WAAW,eAmEtB;AAEF,kBAAe,mBAAW,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  Button,\n  MiddleTextTruncation,\n  Modal,\n  ModalButtonBar,\n  ModalContent,\n  Text,\n} from \"@itwin/itwinui-react\";\nimport React, { useState } from \"react\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\nimport \"./DeleteModal.scss\";\nimport { handleError, LoadingSpinner } from \"./utils\";\n\nexport interface DeleteModalProps {\n  entityName?: string;\n  onClose: () => void;\n  onDelete: () => Promise<void>;\n  refresh: () => Promise<void>;\n}\n\nexport const DeleteModal = ({\n  entityName,\n  onClose,\n  onDelete,\n  refresh,\n}: DeleteModalProps) => {\n  const [isDeleting, setIsDeleting] = useState<boolean>(false);\n\n  const deleteCallback = async () => {\n    try {\n      setIsDeleting(true);\n      await onDelete();\n      await refresh();\n      onClose();\n    } catch (error: any) {\n      handleError(error.status);\n    } finally {\n      setIsDeleting(false);\n    }\n  };\n\n  return (\n    <Modal\n      title={ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Confirm\"\n      )}\n      isOpen={!!entityName}\n      isDismissible={!isDeleting}\n      onClose={onClose}\n    >\n      <ModalContent>\n        <div className=\"rcw-delete-modal-body-text\">\n          <Text variant='leading'>\n            {ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:AreYouSureYouWantToDelete\"\n            )}\n          </Text>\n          <strong>{<MiddleTextTruncation text={`${entityName}?`} />}</strong>\n        </div>\n      </ModalContent>\n      <ModalButtonBar>\n        {isDeleting && (\n          <div className=\"rcw-loading-delete\" data-testid=\"rcw-loading-delete\">\n            <LoadingSpinner />\n          </div>\n        )}\n        <Button\n          styleType=\"high-visibility\"\n          onClick={deleteCallback}\n          disabled={isDeleting}\n        >\n          {ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Delete\"\n          )}\n        </Button>\n        <Button\n          styleType=\"default\"\n          onClick={onClose}\n          disabled={isDeleting}\n        >\n          {ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Cancel\"\n          )}\n        </Button>\n      </ModalButtonBar>\n    </Modal>\n  );\n};\n\nexport default DeleteModal;\n"]}

package/lib/cjs/widget/components/DeleteModal.scss

@@ -2,11 +2,10 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
 
 .rcw-delete-modal-body-text {
   display: flex;
-  gap: $iui-xs;
+  gap: var(--iui-size-2xs);
   flex-wrap: wrap;
 
   >strong {
@@ -15,5 +14,5 @@
 }
 
 .rcw-loading-delete {
-  margin-right: $iui-s;
+  margin-right: var(--iui-size-xs);
 }

package/lib/cjs/widget/components/ExtractionStatus.js

@@ -43,12 +43,12 @@ var ExtractionStates;
     ExtractionStates[ExtractionStates["Failed"] = 5] = "Failed";
 })(ExtractionStates = exports.ExtractionStates || (exports.ExtractionStates = {}));
 const ExtractionStatus = ({ state, clearExtractionState, }) => {
-    const [fadeOut, setFadeOut] = react_1.useState(false);
+    const [fadeOut, setFadeOut] = (0, react_1.useState)(false);
     const onAnimationEnd = () => {
         clearExtractionState();
         setFadeOut(false);
     };
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let timer;
         switch (state) {
             case ExtractionStates.Succeeded:

package/lib/cjs/widget/components/ExtractionStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractionStatus.js","sourceRoot":"","sources":["../../../../src/widget/components/ExtractionStatus.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,iCAA4C;AAC5C,mCAAiC;AACjC,2CAAoD;AACpD,wFAAqF;AACrF,sFAAmF;AACnF,oFAAiF;AACjF,oFAAiF;AACjF,0FAAuF;AAEvF,IAAY,gBAOX;AAPD,WAAY,gBAAgB;IAC1B,uDAAI,CAAA;IACJ,+DAAQ,CAAA;IACR,2DAAM,CAAA;IACN,6DAAO,CAAA;IACP,iEAAS,CAAA;IACT,2DAAM,CAAA;AACR,CAAC,EAPW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAO3B;AAOM,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,oBAAoB,GACE,EAAE,EAAE;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,gBAAQ,CAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,oBAAoB,EAAE,CAAC;QACvB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,iBAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAa,CAAC;QAClB,QAAQ,KAAK,EAAE;YACb,KAAK,gBAAgB,CAAC,SAAS,CAAC;YAChC,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,iCAAqB,CAAC,CAAC;SAC5E;QACD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,QAAQ,KAAK,EAAE;QACb,KAAK,gBAAgB,CAAC,QAAQ;YAC5B,OAAO,CAAC,oBAAC,iDAAuB,OAAG,CAAC,CAAC;QACvC,KAAK,gBAAgB,CAAC,MAAM;YAC1B,OAAO,CAAC,oBAAC,6CAAqB,OAAG,CAAC,CAAC;QACrC,KAAK,gBAAgB,CAAC,OAAO;YAC3B,OAAO,CAAC,oBAAC,+CAAsB,OAAG,CAAC,CAAC;QACtC,KAAK,gBAAgB,CAAC,SAAS;YAC7B,OAAO,CAAC,oBAAC,mDAAwB,IAC/B,SAAS,EAAE,OAAO,EAClB,cAAc,EAAE,cAAc,GAC9B,CAAC,CAAC;QACN,KAAK,gBAAgB,CAAC,MAAM;YAC1B,OAAO,CAAC,oBAAC,6CAAqB,IAC5B,SAAS,EAAE,OAAO,EAClB,cAAc,EAAE,cAAc,GAC9B,CAAC,CAAC;QACN;YACE,OAAO,yCAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAzCW,QAAA,gBAAgB,oBAyC3B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport \"./ExtractionStatus.scss\";\nimport { STATUS_CHECK_INTERVAL } from \"./Constants\";\nimport { StartingExtractionState } from \"./ExtractionStates/StartingExtractionState\";\nimport { RunningExtractionState } from \"./ExtractionStates/RunningExtractionState\";\nimport { FailedExtractionState } from \"./ExtractionStates/FailedExtractionState\";\nimport { QueuedExtractionState } from \"./ExtractionStates/QueuedExtractionState\";\nimport { SucceededExtractionState } from \"./ExtractionStates/SucceededExtractionState\";\n\nexport enum ExtractionStates {\n  None,\n  Starting,\n  Queued,\n  Running,\n  Succeeded,\n  Failed,\n}\n\ninterface ExtractionStatusProps {\n  state: ExtractionStates;\n  clearExtractionState: () => void;\n}\n\nexport const ExtractionStatus = ({\n  state,\n  clearExtractionState,\n}: ExtractionStatusProps) => {\n  const [fadeOut, setFadeOut] = useState<boolean>(false);\n\n  const onAnimationEnd = () => {\n    clearExtractionState();\n    setFadeOut(false);\n  };\n\n  useEffect(() => {\n    let timer: number;\n    switch (state) {\n      case ExtractionStates.Succeeded:\n      case ExtractionStates.Failed:\n        timer = window.setTimeout(() => setFadeOut(true), STATUS_CHECK_INTERVAL);\n    }\n    return () => window.clearTimeout(timer);\n  }, [state]);\n\n  switch (state) {\n    case ExtractionStates.Starting:\n      return (<StartingExtractionState />);\n    case ExtractionStates.Queued:\n      return (<QueuedExtractionState />);\n    case ExtractionStates.Running:\n      return (<RunningExtractionState />);\n    case ExtractionStates.Succeeded:\n      return (<SucceededExtractionState\n        animation={fadeOut}\n        onAnimationEnd={onAnimationEnd}\n      />);\n    case ExtractionStates.Failed:\n      return (<FailedExtractionState\n        animation={fadeOut}\n        onAnimationEnd={onAnimationEnd}\n      />);\n    default:\n      return <></>;\n  }\n};\n"]}
+{"version":3,"file":"ExtractionStatus.js","sourceRoot":"","sources":["../../../../src/widget/components/ExtractionStatus.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,iCAA4C;AAC5C,mCAAiC;AACjC,2CAAoD;AACpD,wFAAqF;AACrF,sFAAmF;AACnF,oFAAiF;AACjF,oFAAiF;AACjF,0FAAuF;AAEvF,IAAY,gBAOX;AAPD,WAAY,gBAAgB;IAC1B,uDAAI,CAAA;IACJ,+DAAQ,CAAA;IACR,2DAAM,CAAA;IACN,6DAAO,CAAA;IACP,iEAAS,CAAA;IACT,2DAAM,CAAA;AACR,CAAC,EAPW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAO3B;AAOM,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,oBAAoB,GACE,EAAE,EAAE;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,oBAAoB,EAAE,CAAC;QACvB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAa,CAAC;QAClB,QAAQ,KAAK,EAAE;YACb,KAAK,gBAAgB,CAAC,SAAS,CAAC;YAChC,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,iCAAqB,CAAC,CAAC;SAC5E;QACD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,QAAQ,KAAK,EAAE;QACb,KAAK,gBAAgB,CAAC,QAAQ;YAC5B,OAAO,CAAC,oBAAC,iDAAuB,OAAG,CAAC,CAAC;QACvC,KAAK,gBAAgB,CAAC,MAAM;YAC1B,OAAO,CAAC,oBAAC,6CAAqB,OAAG,CAAC,CAAC;QACrC,KAAK,gBAAgB,CAAC,OAAO;YAC3B,OAAO,CAAC,oBAAC,+CAAsB,OAAG,CAAC,CAAC;QACtC,KAAK,gBAAgB,CAAC,SAAS;YAC7B,OAAO,CAAC,oBAAC,mDAAwB,IAC/B,SAAS,EAAE,OAAO,EAClB,cAAc,EAAE,cAAc,GAC9B,CAAC,CAAC;QACN,KAAK,gBAAgB,CAAC,MAAM;YAC1B,OAAO,CAAC,oBAAC,6CAAqB,IAC5B,SAAS,EAAE,OAAO,EAClB,cAAc,EAAE,cAAc,GAC9B,CAAC,CAAC;QACN;YACE,OAAO,yCAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAzCW,QAAA,gBAAgB,oBAyC3B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport \"./ExtractionStatus.scss\";\nimport { STATUS_CHECK_INTERVAL } from \"./Constants\";\nimport { StartingExtractionState } from \"./ExtractionStates/StartingExtractionState\";\nimport { RunningExtractionState } from \"./ExtractionStates/RunningExtractionState\";\nimport { FailedExtractionState } from \"./ExtractionStates/FailedExtractionState\";\nimport { QueuedExtractionState } from \"./ExtractionStates/QueuedExtractionState\";\nimport { SucceededExtractionState } from \"./ExtractionStates/SucceededExtractionState\";\n\nexport enum ExtractionStates {\n  None,\n  Starting,\n  Queued,\n  Running,\n  Succeeded,\n  Failed,\n}\n\ninterface ExtractionStatusProps {\n  state: ExtractionStates;\n  clearExtractionState: () => void;\n}\n\nexport const ExtractionStatus = ({\n  state,\n  clearExtractionState,\n}: ExtractionStatusProps) => {\n  const [fadeOut, setFadeOut] = useState<boolean>(false);\n\n  const onAnimationEnd = () => {\n    clearExtractionState();\n    setFadeOut(false);\n  };\n\n  useEffect(() => {\n    let timer: number;\n    switch (state) {\n      case ExtractionStates.Succeeded:\n      case ExtractionStates.Failed:\n        timer = window.setTimeout(() => setFadeOut(true), STATUS_CHECK_INTERVAL);\n    }\n    return () => window.clearTimeout(timer);\n  }, [state]);\n\n  switch (state) {\n    case ExtractionStates.Starting:\n      return (<StartingExtractionState />);\n    case ExtractionStates.Queued:\n      return (<QueuedExtractionState />);\n    case ExtractionStates.Running:\n      return (<RunningExtractionState />);\n    case ExtractionStates.Succeeded:\n      return (<SucceededExtractionState\n        animation={fadeOut}\n        onAnimationEnd={onAnimationEnd}\n      />);\n    case ExtractionStates.Failed:\n      return (<FailedExtractionState\n        animation={fadeOut}\n        onAnimationEnd={onAnimationEnd}\n      />);\n    default:\n      return <></>;\n  }\n};\n"]}

package/lib/cjs/widget/components/ExtractionStatus.scss

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
 
 .rcw-extraction-status {
   align-items: center;
@@ -10,10 +9,10 @@
   display: flex;
 
   .rcw-status-icon {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
+    width: var(--iui-size-m);
+    height: var(--iui-size-m);
     align-items: center;
-    margin: auto $iui-xs * 3;
+    margin: auto calc(var(--iui-size-2xs) * 3);
     display: flex;
   }
 }
@@ -22,11 +21,11 @@
   align-items: center;
   height: 38px;
   display: flex;
-  margin: auto $iui-xs * 3;
+  margin: auto calc(var(--iui-size-2xs) * 3);
 
   .rcw-status-icon {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
+    width: var(--iui-size-m);
+    height: var(--iui-size-m);
   }
 }
 

package/lib/cjs/widget/components/HorizontalTile.js

@@ -10,10 +10,10 @@ require("./HorizontalTile.scss");
 const classnames_1 = __importDefault(require("classnames"));
 const HorizontalTile = (props) => {
     const { title, titleTooltip, subText, subtextToolTip, actionGroup, selected, className, onClickTitle, ...rest } = props;
-    return (react_1.default.createElement("div", { className: classnames_1.default("rcw-horizontal-tile-container", { "rcw-horizontal-tile-selected": selected }, className), onClick: rest.onClick, "data-testid": "horizontal-tile" },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("rcw-horizontal-tile-container", { "rcw-horizontal-tile-selected": selected }, className), onClick: rest.onClick, "data-testid": "horizontal-tile" },
         react_1.default.createElement("div", { className: "rcw-body-container" },
             react_1.default.createElement("div", { className: "rcw-body" },
-                react_1.default.createElement(itwinui_react_1.Text, { className: classnames_1.default("rcw-body-text", { "iui-anchor": !!onClickTitle }), onClick: onClickTitle, variant: "body", title: titleTooltip }, title),
+                react_1.default.createElement(itwinui_react_1.Text, { className: (0, classnames_1.default)("rcw-body-text", { "iui-anchor": !!onClickTitle }), onClick: onClickTitle, variant: "body", title: titleTooltip }, title),
                 subText &&
                     react_1.default.createElement(itwinui_react_1.Text, { className: "rcw-body-text", isMuted: true, title: subtextToolTip, variant: "small" }, subText))),
         react_1.default.createElement("div", { className: "rcw-action-button", "data-testid": "tile-action-button" }, actionGroup)));

package/lib/cjs/widget/components/HorizontalTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTile.js","sourceRoot":"","sources":["../../../../src/widget/components/HorizontalTile.tsx"],"names":[],"mappings":";;;;;;AAKA,kDAA0B;AAC1B,wDAA4C;AAC5C,iCAA+B;AAC/B,4DAAoC;AAY7B,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC3D,MAAM,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,uCACE,SAAS,EAAE,oBAAU,CACnB,+BAA+B,EAC/B,EAAE,8BAA8B,EAAE,QAAQ,EAAE,EAC5C,SAAS,CACV,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,iBACT,iBAAiB;QAE7B,uCAAK,SAAS,EAAC,oBAAoB;YACjC,uCAAK,SAAS,EAAC,UAAU;gBACvB,8BAAC,oBAAI,IAAC,SAAS,EAAE,oBAAU,CAAC,eAAe,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,EAC5E,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,YAAY,IAAG,KAAK,CACtB;gBAEL,OAAO;oBACP,8BAAC,oBAAI,IAAC,SAAS,EAAC,eAAe,EAC7B,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,cAAc,EACrB,OAAO,EAAC,OAAO,IAAE,OAAO,CACnB,CAEL,CACF;QACN,uCACE,SAAS,EAAC,mBAAmB,iBACjB,oBAAoB,IAC/B,WAAW,CACR,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,cAAc,kBA+CzB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { ReactNode } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport \"./HorizontalTile.scss\";\nimport classNames from \"classnames\";\n\nexport interface HorizontalTileProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  title: string;\n  actionGroup: ReactNode;\n  subText: string;\n  onClickTitle?: React.MouseEventHandler;\n  titleTooltip: string;\n  subtextToolTip?: string;\n  selected?: boolean;\n}\n\nexport const HorizontalTile = (props: HorizontalTileProps) => {\n  const {\n    title,\n    titleTooltip,\n    subText,\n    subtextToolTip,\n    actionGroup,\n    selected,\n    className,\n    onClickTitle,\n    ...rest\n  } = props;\n\n  return (\n    <div\n      className={classNames(\n        \"rcw-horizontal-tile-container\",\n        { \"rcw-horizontal-tile-selected\": selected },\n        className\n      )}\n      onClick={rest.onClick}\n      data-testid=\"horizontal-tile\"\n    >\n      <div className=\"rcw-body-container\">\n        <div className=\"rcw-body\">\n          <Text className={classNames(\"rcw-body-text\", { \"iui-anchor\": !!onClickTitle })}\n            onClick={onClickTitle}\n            variant=\"body\"\n            title={titleTooltip}>{title}\n          </Text>\n          {\n            subText &&\n            <Text className=\"rcw-body-text\"\n              isMuted={true}\n              title={subtextToolTip}\n              variant=\"small\">{subText}\n            </Text>\n          }\n        </div>\n      </div>\n      <div\n        className=\"rcw-action-button\"\n        data-testid=\"tile-action-button\">\n        {actionGroup}\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"HorizontalTile.js","sourceRoot":"","sources":["../../../../src/widget/components/HorizontalTile.tsx"],"names":[],"mappings":";;;;;;AAKA,kDAA0B;AAC1B,wDAA4C;AAC5C,iCAA+B;AAC/B,4DAAoC;AAY7B,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC3D,MAAM,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EACnB,+BAA+B,EAC/B,EAAE,8BAA8B,EAAE,QAAQ,EAAE,EAC5C,SAAS,CACV,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,iBACT,iBAAiB;QAE7B,uCAAK,SAAS,EAAC,oBAAoB;YACjC,uCAAK,SAAS,EAAC,UAAU;gBACvB,8BAAC,oBAAI,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,EAC5E,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,YAAY,IAAG,KAAK,CACtB;gBAEL,OAAO;oBACP,8BAAC,oBAAI,IAAC,SAAS,EAAC,eAAe,EAC7B,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,cAAc,EACrB,OAAO,EAAC,OAAO,IAAE,OAAO,CACnB,CAEL,CACF;QACN,uCACE,SAAS,EAAC,mBAAmB,iBACjB,oBAAoB,IAC/B,WAAW,CACR,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,cAAc,kBA+CzB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { ReactNode } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport \"./HorizontalTile.scss\";\nimport classNames from \"classnames\";\n\nexport interface HorizontalTileProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  title: string;\n  actionGroup: ReactNode;\n  subText: string;\n  onClickTitle?: React.MouseEventHandler;\n  titleTooltip: string;\n  subtextToolTip?: string;\n  selected?: boolean;\n}\n\nexport const HorizontalTile = (props: HorizontalTileProps) => {\n  const {\n    title,\n    titleTooltip,\n    subText,\n    subtextToolTip,\n    actionGroup,\n    selected,\n    className,\n    onClickTitle,\n    ...rest\n  } = props;\n\n  return (\n    <div\n      className={classNames(\n        \"rcw-horizontal-tile-container\",\n        { \"rcw-horizontal-tile-selected\": selected },\n        className\n      )}\n      onClick={rest.onClick}\n      data-testid=\"horizontal-tile\"\n    >\n      <div className=\"rcw-body-container\">\n        <div className=\"rcw-body\">\n          <Text className={classNames(\"rcw-body-text\", { \"iui-anchor\": !!onClickTitle })}\n            onClick={onClickTitle}\n            variant=\"body\"\n            title={titleTooltip}>{title}\n          </Text>\n          {\n            subText &&\n            <Text className=\"rcw-body-text\"\n              isMuted={true}\n              title={subtextToolTip}\n              variant=\"small\">{subText}\n            </Text>\n          }\n        </div>\n      </div>\n      <div\n        className=\"rcw-action-button\"\n        data-testid=\"tile-action-button\">\n        {actionGroup}\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/cjs/widget/components/HorizontalTile.scss

@@ -2,17 +2,14 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
-@import "~@itwin/itwinui-css/scss/icon/index";
-
 .rcw-horizontal-tile {
   &-container {
     display: flex;
     justify-content: space-between;
     border-radius: 5px;
-    background-color: var(--iui-color-background-2);
-    height: $iui-baseline * 4;
-    padding: 5.5px $iui-s;
+    background-color: var(--iui-color-background-backdrop);
+    min-height: calc(var(--iui-size-s) * 5);
+    padding: 5.5px var(--iui-size-xs);
 
     .rcw-body-container {
       display: flex;
@@ -37,16 +34,16 @@
       align-self: center;
       min-width: 36px;
       flex-shrink: 0;
-      display: flex;
+      margin-right: var(--iui-size-2xs);
     }
   }
 
   &-selected {
-    @include themed {
-      border: 1px solid t(iui-color-foreground-primary);
-      background: linear-gradient(rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))),
-        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    }
+    border: 1px solid var(--iui-color-border-accent);
+    background: linear-gradient(
+        rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6)),
+        rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6))
+      ),
+      linear-gradient(var(--iui-color-background), var(--iui-color-background));
   }
-}
+}

package/lib/cjs/widget/components/LocalizedTablePaginator.js

@@ -24,8 +24,8 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
 const react_1 = __importStar(require("react"));
 const ReportsConfigWidget_1 = require("../../ReportsConfigWidget");
 const LocalizedTablePaginator = (props) => {
-    const pageSizeList = react_1.useMemo(() => [10, 25, 50], []);
-    const paginationLocalization = react_1.useMemo(() => ({
+    const pageSizeList = (0, react_1.useMemo)(() => [10, 25, 50], []);
+    const paginationLocalization = (0, react_1.useMemo)(() => ({
         pageSizeLabel: (size) => ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.SizePerPage", { size }),
         rangeLabel: (startIndex, endIndex, totalRows, isLoading) => isLoading
             ? ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.StartIndexEndIndex", { startIndex, endIndex })

package/lib/cjs/widget/components/LocalizedTablePaginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizedTablePaginator.js","sourceRoot":"","sources":["../../../../src/widget/components/LocalizedTablePaginator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wDAAsD;AACtD,+CAAuC;AACvC,mEAAgE;AAEzD,MAAM,uBAAuB,GAAG,CAAC,KAAkC,EAAE,EAAE;IAC5E,MAAM,YAAY,GAAG,eAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACrD,MAAM,sBAAsB,GAAG,eAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,CAAC,IAAY,EAAE,EAAE,CAC9B,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACjD,uCAAuC,EACvC,EAAE,IAAI,EAAE,CACT;QACH,UAAU,EAAE,CACV,UAAkB,EAClB,QAAgB,EAChB,SAAiB,EACjB,SAAkB,EAClB,EAAE,CACF,SAAS;YACP,CAAC,CAAC,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACnD,8CAA8C,EAC9C,EAAE,UAAU,EAAE,QAAQ,EAAE,CACzB;YACD,CAAC,CAAC,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACnD,gDAAgD,EAChD,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,CACpC;QACL,YAAY,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAC/D,wCAAwC,CACzC;QACD,QAAQ,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAC3D,oCAAoC,CACrC;QACD,aAAa,EAAE,CAAC,IAAY,EAAE,EAAE,CAC9B,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACjD,oCAAoC,EACpC,EAAE,IAAI,EAAE,CACT;QACH,gBAAgB,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACnE,uCAAuC,CACxC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,8BAAC,8BAAc,OACT,KAAK,EACT,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,sBAAsB,GACpC,CACH,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,uBAAuB,2BAiDlC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { TablePaginatorRendererProps } from \"@itwin/itwinui-react\";\nimport { TablePaginator } from \"@itwin/itwinui-react\";\nimport React, { useMemo } from \"react\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\n\nexport const LocalizedTablePaginator = (props: TablePaginatorRendererProps) => {\n  const pageSizeList = useMemo(() => [10, 25, 50], []);\n  const paginationLocalization = useMemo(\n    () => ({\n      pageSizeLabel: (size: number) =>\n        ReportsConfigWidget.localization.getLocalizedString(\n          \"ReportsConfigWidget:Table.SizePerPage\",\n          { size }\n        ),\n      rangeLabel: (\n        startIndex: number,\n        endIndex: number,\n        totalRows: number,\n        isLoading: boolean\n      ) =>\n        isLoading\n          ? ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Table.StartIndexEndIndex\",\n            { startIndex, endIndex }\n          )\n          : ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Table.StartIndexEndIndexOf\",\n            { startIndex, endIndex, totalRows }\n          ),\n      previousPage: ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Table.PreviousPage\"\n      ),\n      nextPage: ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Table.NextPage\"\n      ),\n      goToPageLabel: (page: number) =>\n        ReportsConfigWidget.localization.getLocalizedString(\n          \"ReportsConfigWidget:Table.GoToPage\",\n          { page }\n        ),\n      rowsPerPageLabel: ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Table.RowsPerPage\"\n      ),\n    }),\n    []\n  );\n\n  return (\n    <TablePaginator\n      {...props}\n      pageSizeList={pageSizeList}\n      localization={paginationLocalization}\n    />\n  );\n};\n"]}
+{"version":3,"file":"LocalizedTablePaginator.js","sourceRoot":"","sources":["../../../../src/widget/components/LocalizedTablePaginator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wDAAsD;AACtD,+CAAuC;AACvC,mEAAgE;AAEzD,MAAM,uBAAuB,GAAG,CAAC,KAAkC,EAAE,EAAE;IAC5E,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACrD,MAAM,sBAAsB,GAAG,IAAA,eAAO,EACpC,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,CAAC,IAAY,EAAE,EAAE,CAC9B,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACjD,uCAAuC,EACvC,EAAE,IAAI,EAAE,CACT;QACH,UAAU,EAAE,CACV,UAAkB,EAClB,QAAgB,EAChB,SAAiB,EACjB,SAAkB,EAClB,EAAE,CACF,SAAS;YACP,CAAC,CAAC,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACnD,8CAA8C,EAC9C,EAAE,UAAU,EAAE,QAAQ,EAAE,CACzB;YACD,CAAC,CAAC,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACnD,gDAAgD,EAChD,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,CACpC;QACL,YAAY,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAC/D,wCAAwC,CACzC;QACD,QAAQ,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CAC3D,oCAAoC,CACrC;QACD,aAAa,EAAE,CAAC,IAAY,EAAE,EAAE,CAC9B,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACjD,oCAAoC,EACpC,EAAE,IAAI,EAAE,CACT;QACH,gBAAgB,EAAE,yCAAmB,CAAC,YAAY,CAAC,kBAAkB,CACnE,uCAAuC,CACxC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,8BAAC,8BAAc,OACT,KAAK,EACT,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,sBAAsB,GACpC,CACH,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,uBAAuB,2BAiDlC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { TablePaginatorRendererProps } from \"@itwin/itwinui-react\";\nimport { TablePaginator } from \"@itwin/itwinui-react\";\nimport React, { useMemo } from \"react\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\n\nexport const LocalizedTablePaginator = (props: TablePaginatorRendererProps) => {\n  const pageSizeList = useMemo(() => [10, 25, 50], []);\n  const paginationLocalization = useMemo(\n    () => ({\n      pageSizeLabel: (size: number) =>\n        ReportsConfigWidget.localization.getLocalizedString(\n          \"ReportsConfigWidget:Table.SizePerPage\",\n          { size }\n        ),\n      rangeLabel: (\n        startIndex: number,\n        endIndex: number,\n        totalRows: number,\n        isLoading: boolean\n      ) =>\n        isLoading\n          ? ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Table.StartIndexEndIndex\",\n            { startIndex, endIndex }\n          )\n          : ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Table.StartIndexEndIndexOf\",\n            { startIndex, endIndex, totalRows }\n          ),\n      previousPage: ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Table.PreviousPage\"\n      ),\n      nextPage: ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Table.NextPage\"\n      ),\n      goToPageLabel: (page: number) =>\n        ReportsConfigWidget.localization.getLocalizedString(\n          \"ReportsConfigWidget:Table.GoToPage\",\n          { page }\n        ),\n      rowsPerPageLabel: ReportsConfigWidget.localization.getLocalizedString(\n        \"ReportsConfigWidget:Table.RowsPerPage\"\n      ),\n    }),\n    []\n  );\n\n  return (\n    <TablePaginator\n      {...props}\n      pageSizeList={pageSizeList}\n      localization={paginationLocalization}\n    />\n  );\n};\n"]}

package/lib/cjs/widget/components/ReportAction.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 import "./ReportAction.scss";
 import type { Report } from "@itwin/insights-client";
-interface ReportActionProps {
-    iTwinId: string;
+export interface ReportActionProps {
     report?: Report;
-    returnFn: () => Promise<void>;
+    onSaveSuccess: () => void;
+    onClickCancel?: () => void;
 }
-declare const ReportAction: ({ iTwinId, report, returnFn }: ReportActionProps) => JSX.Element;
-export default ReportAction;
+export declare const ReportAction: ({ report, onSaveSuccess, onClickCancel }: ReportActionProps) => JSX.Element;
 //# sourceMappingURL=ReportAction.d.ts.map

package/lib/cjs/widget/components/ReportAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportAction.d.ts","sourceRoot":"","sources":["../../../../src/widget/components/ReportAction.tsx"],"names":[],"mappings":";AAcA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAKrD,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,kCAAmC,iBAAiB,gBAmHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ReportAction.d.ts","sourceRoot":"","sources":["../../../../src/widget/components/ReportAction.tsx"],"names":[],"mappings":";AAYA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,6CAA8C,iBAAiB,gBAwGvF,CAAC"}

package/lib/cjs/widget/components/ReportAction.js

@@ -22,6 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportAction = void 0;
 /*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,42 +33,42 @@ const ActionPanel_1 = __importDefault(require("./ActionPanel"));
 const useValidator_1 = __importStar(require("../hooks/useValidator"));
 const utils_1 = require("./utils");
 require("./ReportAction.scss");
-const insights_client_1 = require("@itwin/insights-client");
-const ReportsApiConfigContext_1 = require("../context/ReportsApiConfigContext");
+const ReportsConfigApiContext_1 = require("../context/ReportsConfigApiContext");
 const ReportsConfigWidget_1 = require("../../ReportsConfigWidget");
-const ReportAction = ({ iTwinId, report, returnFn }) => {
-    var _a, _b;
-    const apiConfig = ReportsApiConfigContext_1.useReportsApiConfig();
-    const [values, setValues] = react_1.useState({
-        name: (_a = report === null || report === void 0 ? void 0 : report.displayName) !== null && _a !== void 0 ? _a : "",
-        description: (_b = report === null || report === void 0 ? void 0 : report.description) !== null && _b !== void 0 ? _b : "",
+const ReportAction = ({ report, onSaveSuccess, onClickCancel }) => {
+    const { iTwinId, getAccessToken, reportsClient } = (0, ReportsConfigApiContext_1.useReportsConfigApi)();
+    const [values, setValues] = (0, react_1.useState)({
+        name: report?.displayName ?? "",
+        description: report?.description ?? "",
     });
-    const [validator, showValidationMessage] = useValidator_1.default();
-    const [isLoading, setIsLoading] = react_1.useState(false);
+    const [validator, showValidationMessage] = (0, useValidator_1.default)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const onSave = async () => {
-        var _a;
         try {
             if (!validator.allValid()) {
                 showValidationMessage(true);
                 return;
             }
             setIsLoading(true);
-            const reportsClientApi = new insights_client_1.ReportsClient(utils_1.generateUrl(insights_client_1.REPORTING_BASE_PATH, apiConfig.baseUrl));
-            const accessToken = await apiConfig.getAccessToken();
+            const accessToken = await getAccessToken();
             report
-                ? await reportsClientApi.updateReport(accessToken, (_a = report.id) !== null && _a !== void 0 ? _a : "", {
+                ? await reportsClient.updateReport(accessToken, report.id ?? "", {
                     displayName: values.name,
                     description: values.description,
                 })
-                : await reportsClientApi.createReport(accessToken, {
+                : await reportsClient.createReport(accessToken, {
                     displayName: values.name,
                     description: values.description,
                     projectId: iTwinId,
                 });
-            await returnFn();
+            onSaveSuccess();
+            setValues({
+                name: report?.displayName ?? "",
+                description: report?.description ?? "",
+            });
         }
         catch (error) {
-            utils_1.handleError(error.status);
+            (0, utils_1.handleError)(error.status);
             setIsLoading(false);
         }
         finally {
@@ -75,27 +76,24 @@ const ReportAction = ({ iTwinId, report, returnFn }) => {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(utils_1.WidgetHeader, { title: report
-                ? ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ModifyReport")
-                : ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AddReport"), returnFn: returnFn }),
         react_1.default.createElement("div", { className: "rcw-details-form-container" },
             react_1.default.createElement(itwinui_react_1.Fieldset, { legend: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportDetails"), className: "rcw-details-form" },
-                react_1.default.createElement(itwinui_react_1.Small, { className: "field-legend" }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:MandatoryFields")),
+                react_1.default.createElement(itwinui_react_1.Text, { variant: 'small', className: "field-legend" }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:MandatoryFields")),
                 react_1.default.createElement(itwinui_react_1.LabeledInput, { name: "name", label: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Name"), value: values.name, required: true, disabled: isLoading, onChange: (event) => {
-                        utils_1.handleInputChange(event, values, setValues);
+                        (0, utils_1.handleInputChange)(event, values, setValues);
                         validator.showMessageFor("name");
                     }, message: validator.message("name", values.name, useValidator_1.NAME_REQUIREMENTS), status: validator.message("name", values.name, useValidator_1.NAME_REQUIREMENTS)
                         ? "negative"
                         : undefined, onBlur: () => {
                         validator.showMessageFor("name");
                     }, onBlurCapture: (event) => {
-                        utils_1.handleInputChange(event, values, setValues);
+                        (0, utils_1.handleInputChange)(event, values, setValues);
                         validator.showMessageFor("name");
                     } }),
                 react_1.default.createElement(itwinui_react_1.LabeledInput, { name: "description", label: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Description"), value: values.description, onChange: (event) => {
-                        utils_1.handleInputChange(event, values, setValues);
+                        (0, utils_1.handleInputChange)(event, values, setValues);
                     }, disabled: isLoading }))),
-        react_1.default.createElement(ActionPanel_1.default, { actionLabel: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Add"), onAction: onSave, onCancel: returnFn, isSavingDisabled: !values.name, isLoading: isLoading })));
+        react_1.default.createElement(ActionPanel_1.default, { actionLabel: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Add"), onAction: onSave, onCancel: onClickCancel, isSavingDisabled: !values.name, isLoading: isLoading })));
 };
-exports.default = ReportAction;
+exports.ReportAction = ReportAction;
 //# sourceMappingURL=ReportAction.js.map

package/lib/cjs/widget/components/ReportAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportAction.js","sourceRoot":"","sources":["../../../../src/widget/components/ReportAction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport { Fieldset, LabeledInput, Small } from \"@itwin/itwinui-react\";\nimport React, { useState } from \"react\";\nimport ActionPanel from \"./ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport {\n  generateUrl,\n  handleError,\n  handleInputChange,\n  WidgetHeader,\n} from \"./utils\";\nimport \"./ReportAction.scss\";\nimport type { Report } from \"@itwin/insights-client\";\nimport { REPORTING_BASE_PATH, ReportsClient } from \"@itwin/insights-client\";\nimport { useReportsApiConfig } from \"../context/ReportsApiConfigContext\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\n\ninterface ReportActionProps {\n  iTwinId: string;\n  report?: Report;\n  returnFn: () => Promise<void>;\n}\n\nconst ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {\n  const apiConfig = useReportsApiConfig();\n  const [values, setValues] = useState({\n    name: report?.displayName ?? \"\",\n    description: report?.description ?? \"\",\n  });\n  const [validator, showValidationMessage] = useValidator();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const onSave = async () => {\n    try {\n      if (!validator.allValid()) {\n        showValidationMessage(true);\n        return;\n      }\n      setIsLoading(true);\n      const reportsClientApi = new ReportsClient(\n        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)\n      );\n      const accessToken = await apiConfig.getAccessToken();\n      report\n        ? await reportsClientApi.updateReport(accessToken, report.id ?? \"\", {\n          displayName: values.name,\n          description: values.description,\n        })\n        : await reportsClientApi.createReport(accessToken, {\n          displayName: values.name,\n          description: values.description,\n          projectId: iTwinId,\n        });\n      await returnFn();\n    } catch (error: any) {\n      handleError(error.status);\n      setIsLoading(false);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <WidgetHeader\n        title={\n          report\n            ? ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:ModifyReport\"\n            )\n            : ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:AddReport\"\n            )\n        }\n        returnFn={returnFn}\n      />\n      <div className=\"rcw-details-form-container\">\n        <Fieldset\n          legend={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:ReportDetails\"\n          )}\n          className=\"rcw-details-form\"\n        >\n          <Small className=\"field-legend\">\n            {ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:MandatoryFields\"\n            )}\n          </Small>\n          <LabeledInput\n            name=\"name\"\n            label={ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:Name\"\n            )}\n            value={values.name}\n            required\n            disabled={isLoading}\n            onChange={(event) => {\n              handleInputChange(event, values, setValues);\n              validator.showMessageFor(\"name\");\n            }}\n            message={validator.message(\"name\", values.name, NAME_REQUIREMENTS)}\n            status={\n              validator.message(\"name\", values.name, NAME_REQUIREMENTS)\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"name\");\n            }}\n            onBlurCapture={(event) => {\n              handleInputChange(event, values, setValues);\n              validator.showMessageFor(\"name\");\n            }}\n          />\n          <LabeledInput\n            name=\"description\"\n            label={ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:Description\"\n            )}\n            value={values.description}\n            onChange={(event) => {\n              handleInputChange(event, values, setValues);\n            }}\n            disabled={isLoading}\n          />\n        </Fieldset>\n      </div>\n      <ActionPanel\n        actionLabel={ReportsConfigWidget.localization.getLocalizedString(\n          \"ReportsConfigWidget:Add\"\n        )}\n        onAction={onSave}\n        onCancel={returnFn}\n        isSavingDisabled={!values.name}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n\nexport default ReportAction;\n"]}
+{"version":3,"file":"ReportAction.js","sourceRoot":"","sources":["../../../../src/widget/components/ReportAction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport { Fieldset, LabeledInput, Text } from \"@itwin/itwinui-react\";\nimport React, { useState } from \"react\";\nimport ActionPanel from \"./ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport {\n  handleError,\n  handleInputChange,\n} from \"./utils\";\nimport \"./ReportAction.scss\";\nimport type { Report } from \"@itwin/insights-client\";\nimport { useReportsConfigApi } from \"../context/ReportsConfigApiContext\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\n\nexport interface ReportActionProps {\n  report?: Report;\n  onSaveSuccess: () => void;\n  onClickCancel?: () => void;\n}\n\nexport const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportActionProps) => {\n  const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();\n  const [values, setValues] = useState({\n    name: report?.displayName ?? \"\",\n    description: report?.description ?? \"\",\n  });\n  const [validator, showValidationMessage] = useValidator();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const onSave = async () => {\n    try {\n      if (!validator.allValid()) {\n        showValidationMessage(true);\n        return;\n      }\n      setIsLoading(true);\n      const accessToken = await getAccessToken();\n      report\n        ? await reportsClient.updateReport(accessToken, report.id ?? \"\", {\n          displayName: values.name,\n          description: values.description,\n        })\n        : await reportsClient.createReport(accessToken, {\n          displayName: values.name,\n          description: values.description,\n          projectId: iTwinId,\n        });\n      onSaveSuccess();\n      setValues({\n        name: report?.displayName ?? \"\",\n        description: report?.description ?? \"\",\n      });\n    } catch (error: any) {\n      handleError(error.status);\n      setIsLoading(false);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"rcw-details-form-container\">\n        <Fieldset\n          legend={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:ReportDetails\"\n          )}\n          className=\"rcw-details-form\"\n        >\n          <Text variant='small' className=\"field-legend\">\n            {ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:MandatoryFields\"\n            )}\n          </Text>\n          <LabeledInput\n            name=\"name\"\n            label={ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:Name\"\n            )}\n            value={values.name}\n            required\n            disabled={isLoading}\n            onChange={(event) => {\n              handleInputChange(event, values, setValues);\n              validator.showMessageFor(\"name\");\n            }}\n            message={validator.message(\"name\", values.name, NAME_REQUIREMENTS)}\n            status={\n              validator.message(\"name\", values.name, NAME_REQUIREMENTS)\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"name\");\n            }}\n            onBlurCapture={(event) => {\n              handleInputChange(event, values, setValues);\n              validator.showMessageFor(\"name\");\n            }}\n          />\n          <LabeledInput\n            name=\"description\"\n            label={ReportsConfigWidget.localization.getLocalizedString(\n              \"ReportsConfigWidget:Description\"\n            )}\n            value={values.description}\n            onChange={(event) => {\n              handleInputChange(event, values, setValues);\n            }}\n            disabled={isLoading}\n          />\n        </Fieldset>\n      </div>\n      <ActionPanel\n        actionLabel={ReportsConfigWidget.localization.getLocalizedString(\n          \"ReportsConfigWidget:Add\"\n        )}\n        onAction={onSave}\n        onCancel={onClickCancel}\n        isSavingDisabled={!values.name}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n\n"]}

package/lib/cjs/widget/components/ReportAction.scss

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
 
 .rcw-details-form-container {
   overflow-x: auto;
@@ -11,6 +10,6 @@
   .rcw-details-form {
     display: flex;
     flex-direction: column;
-    gap: $iui-baseline;
+    gap: var(--iui-size-);
   }
 }

package/lib/cjs/widget/components/ReportHorizontalTile.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import type BulkExtractor from "./BulkExtractor";
+import type { BulkExtractor } from "./BulkExtractor";
 import type { BeEvent } from "@itwin/core-bentley";
 import type { Report } from "@itwin/insights-client";
-import type { HorizontalTileProps } from "./HorizontalTile";
-export interface ReportHorizontalTileProps extends Pick<HorizontalTileProps, "onClickTitle"> {
+export interface ReportHorizontalTileProps {
     selected: boolean;
     onSelectionChange: (reportId: string, controlPressed: boolean) => void;
     bulkExtractor: BulkExtractor;
     jobStartEvent: BeEvent<(reportId: string) => void>;
     report: Report;
     onClickDelete: () => void;
-    onClickModify: () => void;
+    onClickModify?: (report: Report) => void;
+    onClickTitle?: (report: Report) => void;
 }
 export declare const ReportHorizontalTile: (props: ReportHorizontalTileProps) => JSX.Element;
 //# sourceMappingURL=ReportHorizontalTile.d.ts.map

package/lib/cjs/widget/components/ReportHorizontalTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportHorizontalTile.d.ts","sourceRoot":"","sources":["../../../../src/widget/components/ReportHorizontalTile.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAarD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,CAAC;IAC1F,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACvE,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACnD,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,UAAW,yBAAyB,gBA8FpE,CAAC"}
+{"version":3,"file":"ReportHorizontalTile.d.ts","sourceRoot":"","sources":["../../../../src/widget/components/ReportHorizontalTile.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAcrD,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACvE,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACnD,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB,UAAW,yBAAyB,gBA8FpE,CAAC"}

package/lib/cjs/widget/components/ReportHorizontalTile.js

@@ -1,6 +1,22 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportHorizontalTile = void 0;
@@ -8,8 +24,7 @@ exports.ReportHorizontalTile = void 0;
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-const react_1 = require("react");
-const react_2 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const ExtractionStatus_1 = require("./ExtractionStatus");
 const Constants_1 = require("./Constants");
 const ReportsConfigWidget_1 = require("../../ReportsConfigWidget");
@@ -17,11 +32,10 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const HorizontalTile_1 = require("./HorizontalTile");
 const ReportHorizontalTile = (props) => {
-    var _a, _b;
-    const [jobStarted, setJobStarted] = react_1.useState(false);
-    const [extractionState, setExtractionState] = react_1.useState(ExtractionStatus_1.ExtractionStates.None);
-    const interval = react_1.useRef();
-    react_1.useEffect(() => {
+    const [jobStarted, setJobStarted] = (0, react_1.useState)(false);
+    const [extractionState, setExtractionState] = (0, react_1.useState)(ExtractionStatus_1.ExtractionStates.None);
+    const interval = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
         const listener = (startedReportId) => {
             if (startedReportId === props.report.id) {
                 setExtractionState(ExtractionStatus_1.ExtractionStates.Starting);
@@ -33,7 +47,7 @@ const ReportHorizontalTile = (props) => {
             props.jobStartEvent.removeListener(listener);
         };
     }, [props.jobStartEvent, props.report.id]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (jobStarted) {
             window.clearInterval(interval.current);
             interval.current = window.setInterval(async () => {
@@ -49,21 +63,20 @@ const ReportHorizontalTile = (props) => {
         return () => window.clearInterval(interval.current);
     }, [props.report.id, props.bulkExtractor, jobStarted]);
     const onClickTile = (e) => {
-        var _a;
-        if ((_a = e === null || e === void 0 ? void 0 : e.currentTarget.className) === null || _a === void 0 ? void 0 : _a.toString().split(" ").includes("rcw-horizontal-tile-container")) {
+        if (e?.currentTarget.className?.toString().split(" ").includes("rcw-horizontal-tile-container")) {
             props.onSelectionChange(props.report.id, e.ctrlKey);
         }
     };
-    return (react_2.default.createElement(HorizontalTile_1.HorizontalTile, { title: props.report.displayName, subText: (_a = props.report.description) !== null && _a !== void 0 ? _a : "", subtextToolTip: (_b = props.report.description) !== null && _b !== void 0 ? _b : "", titleTooltip: props.report.displayName, onClick: onClickTile, onClickTitle: props.onClickTitle, selected: props.selected, actionGroup: extractionState === ExtractionStatus_1.ExtractionStates.None ? (react_2.default.createElement("div", { className: "rcw-action-button", "data-testid": "tile-action-button" },
-            react_2.default.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => [
-                    react_2.default.createElement(itwinui_react_1.MenuItem, { key: 0, onClick: props.onClickModify, icon: react_2.default.createElement(itwinui_icons_react_1.SvgEdit, null) }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Modify")),
-                    react_2.default.createElement(itwinui_react_1.MenuItem, { key: 1, onClick: () => {
+    return (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { title: props.report.displayName, subText: props.report.description ?? "", subtextToolTip: props.report.description ?? "", titleTooltip: props.report.displayName, onClick: onClickTile, onClickTitle: () => props.onClickTitle?.(props.report), selected: props.selected, actionGroup: extractionState === ExtractionStatus_1.ExtractionStates.None ? (react_1.default.createElement("div", { className: "rcw-action-button", "data-testid": "tile-action-button" },
+            react_1.default.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => [
+                    props.onClickModify ? react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, onClick: () => props.onClickModify?.(props.report), icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null) }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Modify")) : [],
+                    react_1.default.createElement(itwinui_react_1.MenuItem, { key: 1, onClick: () => {
                             props.onClickDelete();
                             close();
-                        }, icon: react_2.default.createElement(itwinui_icons_react_1.SvgDelete, null) }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Remove")),
-                ] },
-                react_2.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless" },
-                    react_2.default.createElement(itwinui_icons_react_1.SvgMore, null))))) : (react_2.default.createElement(ExtractionStatus_1.ExtractionStatus, { state: extractionState, clearExtractionState: () => {
+                        }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null) }, ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Remove")),
+                ].flat() },
+                react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless", title: ReportsConfigWidget_1.ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportOptions") },
+                    react_1.default.createElement(itwinui_icons_react_1.SvgMore, null))))) : (react_1.default.createElement(ExtractionStatus_1.ExtractionStatus, { state: extractionState, clearExtractionState: () => {
                 setExtractionState(ExtractionStatus_1.ExtractionStates.None);
             } })) }));
 };