@itwin/grouping-mapping-widget 0.2.0

package/lib/esm/widget/components/CustomCalculationAction.js

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { Fieldset, LabeledInput, LabeledSelect, LabeledTextarea, Small, } from "@itwin/itwinui-react";
+import React, { useState } from "react";
+import { reportingClientApi } from "../../api/reportingClient";
+import ActionPanel from "./ActionPanel";
+import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
+import { WidgetHeader } from "./utils";
+import "./CalculatedPropertyAction.scss";
+import "./CustomCalculationAction.scss";
+import { quantityTypesSelectionOptions } from "./GroupPropertyAction";
+const CustomCalculationAction = ({ iModelId, mappingId, groupId, customCalculation, returnFn, }) => {
+    var _a, _b, _c, _d;
+    const [propertyName, setPropertyName] = useState((_a = customCalculation === null || customCalculation === void 0 ? void 0 : customCalculation.propertyName) !== null && _a !== void 0 ? _a : "");
+    const [formula, setFormula] = useState((_b = customCalculation === null || customCalculation === void 0 ? void 0 : customCalculation.formula) !== null && _b !== void 0 ? _b : "");
+    const [quantityType, setQuantityType] = useState((_c = customCalculation === null || customCalculation === void 0 ? void 0 : customCalculation.quantityType) !== null && _c !== void 0 ? _c : "Undefined");
+    const [isLoading, setIsLoading] = useState(false);
+    const [formulaErrorMessage, setFormulaErrorMessage] = useState("");
+    const [validator, showValidationMessage] = useValidator();
+    const onSave = async () => {
+        var _a;
+        if (!validator.allValid()) {
+            showValidationMessage(true);
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const newCustomCalculation = {
+                propertyName,
+                formula,
+                quantityType,
+            };
+            customCalculation
+                ? await reportingClientApi.updateCustomCalculation(iModelId, mappingId, groupId, (_a = customCalculation.id) !== null && _a !== void 0 ? _a : "", newCustomCalculation)
+                : await reportingClientApi.createCustomCalculation(iModelId, mappingId, groupId, newCustomCalculation);
+            await returnFn();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }
+        catch (error) {
+            // error instanceof Response refuses to be true when it should be.
+            if (error.status === 422) {
+                error = error;
+                const erroredResponse = await error.json();
+                if (erroredResponse.error.code === "InvalidInsightsRequest" &&
+                    erroredResponse.error.target === "formula") {
+                    setFormulaErrorMessage(erroredResponse.error.message);
+                }
+            }
+            setIsLoading(false);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(WidgetHeader, { title: customCalculation
+                ? `${(_d = customCalculation === null || customCalculation === void 0 ? void 0 : customCalculation.propertyName) !== null && _d !== void 0 ? _d : ""}`
+                : "Create Custom Calculation", returnFn: returnFn }),
+        React.createElement("div", { className: 'custom-calculation-action-container' },
+            React.createElement(Fieldset, { legend: 'Custom Calculation Details', className: 'details-form' },
+                React.createElement(Small, { className: 'field-legend' }, "Asterisk * indicates mandatory fields."),
+                React.createElement(LabeledInput, { value: propertyName, required: true, name: 'name', label: 'Name', disabled: isLoading, onChange: (event) => {
+                        setPropertyName(event.target.value);
+                        validator.showMessageFor("name");
+                    }, message: validator.message("name", propertyName, NAME_REQUIREMENTS), status: validator.message("name", propertyName, NAME_REQUIREMENTS)
+                        ? "negative"
+                        : undefined, onBlur: () => {
+                        validator.showMessageFor("name");
+                    }, onBlurCapture: (event) => {
+                        setPropertyName(event.target.value);
+                        validator.showMessageFor("name");
+                    } }),
+                React.createElement(LabeledTextarea, { value: formula, required: true, name: 'formula', label: 'Formula', disabled: isLoading, onChange: (event) => {
+                        setFormula(event.target.value);
+                    }, message: formulaErrorMessage, status: formulaErrorMessage ? "negative" : undefined }),
+                React.createElement(LabeledSelect, { label: 'Quantity Type', disabled: isLoading, options: quantityTypesSelectionOptions, value: quantityType, onChange: setQuantityType, onShow: () => { }, onHide: () => { } }))),
+        React.createElement(ActionPanel, { onSave: onSave, onCancel: returnFn, disabled: !(formula && propertyName), isLoading: isLoading })));
+};
+export default CustomCalculationAction;
+//# sourceMappingURL=CustomCalculationAction.js.map

package/lib/esm/widget/components/CustomCalculationAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCalculationAction.js","sourceRoot":"","sources":["../../../../src/widget/components/CustomCalculationAction.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 {\n  Fieldset,\n  LabeledInput,\n  LabeledSelect,\n  LabeledTextarea,\n  Small,\n} from \"@itwin/itwinui-react\";\nimport React, { useState } from \"react\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport ActionPanel from \"./ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport { WidgetHeader } from \"./utils\";\nimport \"./CalculatedPropertyAction.scss\";\nimport type { CustomCalculation } from \"./CustomCalculationTable\";\nimport type { CustomCalculationCreateReportingAPI } from \"../../api/generated/api\";\nimport \"./CustomCalculationAction.scss\";\nimport { quantityTypesSelectionOptions } from \"./GroupPropertyAction\";\n\ninterface CalculatedPropertyActionProps {\n  iModelId: string;\n  mappingId: string;\n  groupId: string;\n  customCalculation?: CustomCalculation;\n  returnFn: () => Promise<void>;\n}\n\nconst CustomCalculationAction = ({\n  iModelId,\n  mappingId,\n  groupId,\n  customCalculation,\n  returnFn,\n}: CalculatedPropertyActionProps) => {\n  const [propertyName, setPropertyName] = useState<string>(\n    customCalculation?.propertyName ?? \"\",\n  );\n  const [formula, setFormula] = useState<string>(\n    customCalculation?.formula ?? \"\",\n  );\n  const [quantityType, setQuantityType] = useState<string>(customCalculation?.quantityType ?? \"Undefined\");\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [formulaErrorMessage, setFormulaErrorMessage] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n\n  const onSave = async () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    try {\n      setIsLoading(true);\n\n      const newCustomCalculation: CustomCalculationCreateReportingAPI = {\n        propertyName,\n        formula,\n        quantityType,\n      };\n\n      customCalculation\n        ? await reportingClientApi.updateCustomCalculation(\n          iModelId,\n          mappingId,\n          groupId,\n          customCalculation.id ?? \"\",\n          newCustomCalculation,\n        )\n        : await reportingClientApi.createCustomCalculation(\n          iModelId,\n          mappingId,\n          groupId,\n          newCustomCalculation,\n        );\n      await returnFn();\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      // error instanceof Response refuses to be true when it should be.\n      if (error.status === 422) {\n        error = error as Response;\n        const erroredResponse = await error.json();\n        if (\n          erroredResponse.error.code === \"InvalidInsightsRequest\" &&\n          erroredResponse.error.target === \"formula\"\n        ) {\n          setFormulaErrorMessage(erroredResponse.error.message);\n        }\n      }\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <WidgetHeader\n        title={\n          customCalculation\n            ? `${customCalculation?.propertyName ?? \"\"}`\n            : \"Create Custom Calculation\"\n        }\n        returnFn={returnFn}\n      />\n      <div className='custom-calculation-action-container'>\n        <Fieldset legend='Custom Calculation Details' className='details-form'>\n          <Small className='field-legend'>\n            Asterisk * indicates mandatory fields.\n          </Small>\n          <LabeledInput\n            value={propertyName}\n            required\n            name='name'\n            label='Name'\n            disabled={isLoading}\n            onChange={(event) => {\n              setPropertyName(event.target.value);\n              validator.showMessageFor(\"name\");\n            }}\n            message={validator.message(\"name\", propertyName, NAME_REQUIREMENTS)}\n            status={\n              validator.message(\"name\", propertyName, NAME_REQUIREMENTS)\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"name\");\n            }}\n            onBlurCapture={(event) => {\n              setPropertyName(event.target.value);\n              validator.showMessageFor(\"name\");\n            }}\n          />\n          <LabeledTextarea\n            value={formula}\n            required\n            name='formula'\n            label='Formula'\n            disabled={isLoading}\n            onChange={(event) => {\n              setFormula(event.target.value);\n            }}\n            message={formulaErrorMessage}\n            status={formulaErrorMessage ? \"negative\" : undefined}\n          />\n          <LabeledSelect<string>\n            label='Quantity Type'\n            disabled={isLoading}\n            options={quantityTypesSelectionOptions}\n            value={quantityType}\n            onChange={setQuantityType}\n            onShow={() => { }}\n            onHide={() => { }}\n          />\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={onSave}\n        onCancel={returnFn}\n        disabled={!(formula && propertyName)}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n\nexport default CustomCalculationAction;\n"]}

package/lib/esm/widget/components/CustomCalculationAction.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* 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';
+
+.custom-calculation-action-container {
+  overflow-x: auto;
+  height: 100%;
+
+  .details-form {
+    display: flex;
+    flex-direction: column;
+    gap: $iui-baseline;
+  }
+}

package/lib/esm/widget/components/CustomCalculationTable.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { CustomCalculationReportingAPI } from "../../api/generated/api";
+import type { CreateTypeFromInterface } from "../utils";
+import { PropertyMenuView } from "./PropertyMenu";
+import type { CellProps } from "react-table";
+export declare type CustomCalculation = CreateTypeFromInterface<CustomCalculationReportingAPI>;
+interface CustomCalculationTableProps {
+    iModelId: string;
+    mappingId: string;
+    groupId: string;
+    setSelectedCustomCalculation: React.Dispatch<React.SetStateAction<CreateTypeFromInterface<CustomCalculationReportingAPI> | undefined>>;
+    setGroupModifyView: React.Dispatch<React.SetStateAction<PropertyMenuView>>;
+    onCustomCalculationModify: (value: CellProps<CustomCalculation>) => void;
+    selectedCustomCalculation?: CustomCalculation;
+}
+declare const CustomCalculationTable: ({ iModelId, mappingId, groupId, setSelectedCustomCalculation, setGroupModifyView, onCustomCalculationModify, selectedCustomCalculation, }: CustomCalculationTableProps) => JSX.Element;
+export default CustomCalculationTable;
+//# sourceMappingURL=CustomCalculationTable.d.ts.map

package/lib/esm/widget/components/CustomCalculationTable.js

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { SvgAdd, SvgDelete, SvgEdit, SvgMore, } from "@itwin/itwinui-icons-react";
+import { Button, DropdownMenu, IconButton, MenuItem, Table, } from "@itwin/itwinui-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { reportingClientApi } from "../../api/reportingClient";
+import { PropertyMenuView } from "./PropertyMenu";
+import DeleteModal from "./DeleteModal";
+const fetchCustomCalculations = async (setCustomCalculations, iModelId, mappingId, groupId, setIsLoading) => {
+    var _a;
+    try {
+        setIsLoading(true);
+        const customCalculations = await reportingClientApi.getCustomCalculations(iModelId, mappingId, groupId);
+        setCustomCalculations((_a = customCalculations.customCalculations) !== null && _a !== void 0 ? _a : []);
+    }
+    catch {
+        // TODO Toaster
+    }
+    finally {
+        setIsLoading(false);
+    }
+};
+const useFetchCustomCalculations = (iModelId, mappingId, groupId, setIsLoading) => {
+    const [CustomCalculations, setCustomCalculations] = useState([]);
+    useEffect(() => {
+        void fetchCustomCalculations(setCustomCalculations, iModelId, mappingId, groupId, setIsLoading);
+    }, [groupId, iModelId, mappingId, setIsLoading]);
+    return [CustomCalculations, setCustomCalculations];
+};
+const CustomCalculationTable = ({ iModelId, mappingId, groupId, setSelectedCustomCalculation, setGroupModifyView, onCustomCalculationModify, selectedCustomCalculation, }) => {
+    var _a;
+    const [isLoading, setIsLoading] = useState(true);
+    const [customCalculations, setCustomCalculations] = useFetchCustomCalculations(iModelId, mappingId, groupId, setIsLoading);
+    const [showCustomCalculationDeleteModal, setShowCustomCalculationDeleteModal,] = useState(false);
+    const refresh = useCallback(async () => {
+        setCustomCalculations([]);
+        await fetchCustomCalculations(setCustomCalculations, iModelId, mappingId, groupId, setIsLoading);
+    }, [groupId, iModelId, mappingId, setCustomCalculations]);
+    const CustomCalculationsColumns = useMemo(() => [
+        {
+            Header: "Table",
+            columns: [
+                {
+                    id: "propertyName",
+                    Header: "Calculated Property",
+                    accessor: "propertyName",
+                    Cell: (value) => (React.createElement("div", { className: 'iui-anchor', onClick: () => onCustomCalculationModify(value) }, value.row.original.propertyName)),
+                },
+                {
+                    id: "formula",
+                    Header: "Formula",
+                    accessor: "formula",
+                },
+                {
+                    id: "dropdown",
+                    Header: "",
+                    width: 80,
+                    Cell: (value) => {
+                        return (React.createElement(DropdownMenu, { menuItems: (close) => [
+                                React.createElement(MenuItem, { key: 0, onClick: () => onCustomCalculationModify(value), icon: React.createElement(SvgEdit, null) }, "Modify"),
+                                React.createElement(MenuItem, { key: 1, onClick: () => {
+                                        setSelectedCustomCalculation(value.row.original);
+                                        setShowCustomCalculationDeleteModal(true);
+                                        close();
+                                    }, icon: React.createElement(SvgDelete, null) }, "Remove"),
+                            ] },
+                            React.createElement(IconButton, { styleType: 'borderless' },
+                                React.createElement(SvgMore, { style: {
+                                        width: "16px",
+                                        height: "16px",
+                                    } }))));
+                    },
+                },
+            ],
+        },
+    ], [onCustomCalculationModify, setSelectedCustomCalculation]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { startIcon: React.createElement(SvgAdd, null), styleType: 'high-visibility', onClick: () => {
+                setGroupModifyView(PropertyMenuView.ADD_CUSTOM_CALCULATION);
+            } }, "Add Custom Calculation"),
+        React.createElement(Table, { data: customCalculations, density: 'extra-condensed', columns: CustomCalculationsColumns, emptyTableContent: 'No Custom Calculations', isSortable: true, isLoading: isLoading }),
+        React.createElement(DeleteModal, { entityName: (_a = selectedCustomCalculation === null || selectedCustomCalculation === void 0 ? void 0 : selectedCustomCalculation.propertyName) !== null && _a !== void 0 ? _a : "", show: showCustomCalculationDeleteModal, setShow: setShowCustomCalculationDeleteModal, onDelete: async () => {
+                var _a;
+                await reportingClientApi.deleteCustomCalculation(iModelId, mappingId, groupId, (_a = selectedCustomCalculation === null || selectedCustomCalculation === void 0 ? void 0 : selectedCustomCalculation.id) !== null && _a !== void 0 ? _a : "");
+            }, refresh: refresh })));
+};
+export default CustomCalculationTable;
+//# sourceMappingURL=CustomCalculationTable.js.map

package/lib/esm/widget/components/CustomCalculationTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCalculationTable.js","sourceRoot":"","sources":["../../../../src/widget/components/CustomCalculationTable.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 {\n  SvgAdd,\n  SvgDelete,\n  SvgEdit,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  Button,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n  Table,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { CustomCalculationReportingAPI } from \"../../api/generated/api\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport { PropertyMenuView } from \"./PropertyMenu\";\nimport type { CellProps } from \"react-table\";\nimport DeleteModal from \"./DeleteModal\";\n\nexport type CustomCalculation =\n  CreateTypeFromInterface<CustomCalculationReportingAPI>;\n\nconst fetchCustomCalculations = async (\n  setCustomCalculations: React.Dispatch<\n  React.SetStateAction<CustomCalculation[]>\n  >,\n  iModelId: string,\n  mappingId: string,\n  groupId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  try {\n    setIsLoading(true);\n    const customCalculations = await reportingClientApi.getCustomCalculations(\n      iModelId,\n      mappingId,\n      groupId,\n    );\n    setCustomCalculations(customCalculations.customCalculations ?? []);\n  } catch {\n    // TODO Toaster\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nconst useFetchCustomCalculations = (\n  iModelId: string,\n  mappingId: string,\n  groupId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n): [\n  CustomCalculation[],\n  React.Dispatch<React.SetStateAction<CustomCalculation[]>>,\n] => {\n  const [CustomCalculations, setCustomCalculations] = useState<\n  CustomCalculation[]\n  >([]);\n\n  useEffect(() => {\n    void fetchCustomCalculations(\n      setCustomCalculations,\n      iModelId,\n      mappingId,\n      groupId,\n      setIsLoading,\n    );\n  }, [groupId, iModelId, mappingId, setIsLoading]);\n\n  return [CustomCalculations, setCustomCalculations];\n};\n\ninterface CustomCalculationTableProps {\n  iModelId: string;\n  mappingId: string;\n  groupId: string;\n\n  setSelectedCustomCalculation: React.Dispatch<\n  React.SetStateAction<\n  CreateTypeFromInterface<CustomCalculationReportingAPI> | undefined\n  >\n  >;\n  setGroupModifyView: React.Dispatch<React.SetStateAction<PropertyMenuView>>;\n  onCustomCalculationModify: (value: CellProps<CustomCalculation>) => void;\n  selectedCustomCalculation?: CustomCalculation;\n}\n\nconst CustomCalculationTable = ({\n  iModelId,\n  mappingId,\n  groupId,\n  setSelectedCustomCalculation,\n  setGroupModifyView,\n  onCustomCalculationModify,\n  selectedCustomCalculation,\n}: CustomCalculationTableProps) => {\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [customCalculations, setCustomCalculations] =\n    useFetchCustomCalculations(iModelId, mappingId, groupId, setIsLoading);\n  const [\n    showCustomCalculationDeleteModal,\n    setShowCustomCalculationDeleteModal,\n  ] = useState<boolean>(false);\n\n  const refresh = useCallback(async () => {\n    setCustomCalculations([]);\n    await fetchCustomCalculations(\n      setCustomCalculations,\n      iModelId,\n      mappingId,\n      groupId,\n      setIsLoading,\n    );\n  }, [groupId, iModelId, mappingId, setCustomCalculations]);\n\n  const CustomCalculationsColumns = useMemo(\n    () => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"propertyName\",\n            Header: \"Calculated Property\",\n            accessor: \"propertyName\",\n            Cell: (value: CellProps<CustomCalculation>) => (\n              <div\n                className='iui-anchor'\n                onClick={() => onCustomCalculationModify(value)}\n              >\n                {value.row.original.propertyName}\n              </div>\n            ),\n          },\n          {\n            id: \"formula\",\n            Header: \"Formula\",\n            accessor: \"formula\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<CustomCalculation>) => {\n              return (\n                <DropdownMenu\n                  menuItems={(close: () => void) => [\n                    <MenuItem\n                      key={0}\n                      onClick={() => onCustomCalculationModify(value)}\n                      icon={<SvgEdit />}\n                    >\n                      Modify\n                    </MenuItem>,\n                    <MenuItem\n                      key={1}\n                      onClick={() => {\n                        setSelectedCustomCalculation(value.row.original);\n                        setShowCustomCalculationDeleteModal(true);\n                        close();\n                      }}\n                      icon={<SvgDelete />}\n                    >\n                      Remove\n                    </MenuItem>,\n                  ]}\n                >\n                  <IconButton styleType='borderless'>\n                    <SvgMore\n                      style={{\n                        width: \"16px\",\n                        height: \"16px\",\n                      }}\n                    />\n                  </IconButton>\n                </DropdownMenu>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    [onCustomCalculationModify, setSelectedCustomCalculation],\n  );\n\n  return (\n    <>\n      <Button\n        startIcon={<SvgAdd />}\n        styleType='high-visibility'\n        onClick={() => {\n          setGroupModifyView(PropertyMenuView.ADD_CUSTOM_CALCULATION);\n        }}\n      >\n        Add Custom Calculation\n      </Button>\n      <Table<CustomCalculation>\n        data={customCalculations}\n        density='extra-condensed'\n        columns={CustomCalculationsColumns}\n        emptyTableContent='No Custom Calculations'\n        isSortable\n        isLoading={isLoading}\n      />\n\n      <DeleteModal\n        entityName={selectedCustomCalculation?.propertyName ?? \"\"}\n        show={showCustomCalculationDeleteModal}\n        setShow={setShowCustomCalculationDeleteModal}\n        onDelete={async () => {\n          await reportingClientApi.deleteCustomCalculation(\n            iModelId,\n            mappingId,\n            groupId,\n            selectedCustomCalculation?.id ?? \"\",\n          );\n        }}\n        refresh={refresh}\n      />\n    </>\n  );\n};\n\nexport default CustomCalculationTable;\n"]}

package/lib/esm/widget/components/DeleteModal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./DeleteModal.scss";
+export interface DeleteModalProps {
+    entityName: string;
+    show: boolean;
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+    onDelete: () => Promise<void>;
+    refresh: () => Promise<void>;
+}
+export declare const DeleteModal: ({ entityName, show, setShow, onDelete, refresh, }: DeleteModalProps) => JSX.Element;
+export default DeleteModal;
+//# sourceMappingURL=DeleteModal.d.ts.map

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

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { Button, IconButton, Leading, MiddleTextTruncation, Modal, ModalButtonBar, ProgressRadial, } from "@itwin/itwinui-react";
+import React, { useState } from "react";
+import "./DeleteModal.scss";
+export const DeleteModal = ({ entityName, show, setShow, onDelete, refresh, }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const deleteCallback = async () => {
+        try {
+            setIsLoading(true);
+            await onDelete();
+            setShow(false);
+            await refresh();
+        }
+        catch (err) {
+            // toaster.negative(`${err.response?.data ?? 'Failed to revoke key.'}`, {
+            //   hasCloseButton: true,
+            // });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Modal, { title: 'Confirm', modalRootId: 'grouping-mapping-widget', isOpen: show, isDismissible: !isLoading, onClose: () => {
+                setShow(false);
+            } },
+            React.createElement("div", { className: "delete-modal-body-text" },
+                React.createElement(Leading, null, "Are you sure you want to delete"),
+                React.createElement("strong", null, React.createElement(MiddleTextTruncation, { text: `${entityName}?` }))),
+            React.createElement(ModalButtonBar, null,
+                isLoading ? (React.createElement(IconButton, { styleType: 'high-visibility' },
+                    React.createElement(ProgressRadial, { size: "small", indeterminate: true }))) : (React.createElement(Button, { styleType: 'high-visibility', onClick: deleteCallback }, "Delete")),
+                React.createElement(Button, { styleType: 'default', onClick: () => {
+                        setShow(false);
+                    }, disabled: isLoading }, "Cancel")))));
+};
+export default DeleteModal;
+//# sourceMappingURL=DeleteModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteModal.js","sourceRoot":"","sources":["../../../../src/widget/components/DeleteModal.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,oBAAoB,EACpB,KAAK,EACL,cAAc,EACd,cAAc,GACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,oBAAoB,CAAC;AAU5B,MAAM,CAAC,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,QAAQ,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,GAAG,EAAE;YACZ,yEAAyE;YACzE,0BAA0B;YAC1B,MAAM;SACP;gBAAS;YACR,YAAY,CAAC,KAAK,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,KAAK,IACJ,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,yBAAyB,EACrC,MAAM,EAAE,IAAI,EACZ,aAAa,EAAE,CAAC,SAAS,EACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC;YAED,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,OAAO,0CAEE;gBACV,oCACG,oBAAC,oBAAoB,IAAC,IAAI,EAAE,GAAG,UAAU,GAAG,GAAI,CAC1C,CACL;YACN,oBAAC,cAAc;gBACZ,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,UAAU,IAAC,SAAS,EAAC,iBAAiB;oBACrC,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,aAAa,SAAG,CAClC,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,cAAc,aAElD,CACV;gBACD,oBAAC,MAAM,IACL,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,EACD,QAAQ,EAAE,SAAS,aAGZ,CACM,CACX,CACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,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  IconButton,\n  Leading,\n  MiddleTextTruncation,\n  Modal,\n  ModalButtonBar,\n  ProgressRadial,\n} from \"@itwin/itwinui-react\";\nimport React, { useState } from \"react\";\nimport \"./DeleteModal.scss\";\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 (err) {\n      // toaster.negative(`${err.response?.data ?? 'Failed to revoke key.'}`, {\n      //   hasCloseButton: true,\n      // });\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <Modal\n        title='Confirm'\n        modalRootId='grouping-mapping-widget'\n        isOpen={show}\n        isDismissible={!isLoading}\n        onClose={() => {\n          setShow(false);\n        }}\n      >\n        <div className=\"delete-modal-body-text\">\n          <Leading>\n            Are you sure you want to delete\n          </Leading>\n          <strong>\n            {<MiddleTextTruncation text={`${entityName}?`} />}\n          </strong>\n        </div>\n        <ModalButtonBar>\n          {isLoading ? (\n            <IconButton styleType='high-visibility'>\n              <ProgressRadial size=\"small\" indeterminate />\n            </IconButton>\n          ) : (\n            <Button styleType='high-visibility' onClick={deleteCallback}>\n              Delete\n            </Button>\n          )}\n          <Button\n            styleType='default'\n            onClick={() => {\n              setShow(false);\n            }}\n            disabled={isLoading}\n          >\n            Cancel\n          </Button>\n        </ModalButtonBar>\n      </Modal>\n    </>\n  );\n};\n\nexport default DeleteModal;\n"]}

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

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.delete-modal-body-text {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  > strong {
+    min-width: 0px;
+  }
+}

package/lib/esm/widget/components/GroupAction.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Group } from "./Grouping";
+import "./GroupAction.scss";
+interface GroupActionProps {
+    iModelId: string;
+    mappingId: string;
+    group?: Group;
+    goBack: () => Promise<void>;
+}
+declare const GroupAction: ({ iModelId, mappingId, group, goBack, }: GroupActionProps) => JSX.Element;
+export default GroupAction;
+//# sourceMappingURL=GroupAction.d.ts.map

package/lib/esm/widget/components/GroupAction.js

@@ -0,0 +1,142 @@
+import { Presentation, } from "@itwin/presentation-frontend";
+import { useActiveIModelConnection } from "@itwin/appui-react";
+import { Fieldset, LabeledInput, Small } from "@itwin/itwinui-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { reportingClientApi } from "../../api/reportingClient";
+import { fetchIdsFromQuery, handleInputChange, WidgetHeader } from "./utils";
+import "./GroupAction.scss";
+import ActionPanel from "./ActionPanel";
+import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
+import { GroupQueryBuilderContainer } from "./GroupQueryBuilderContainer";
+import { GroupQueryBuilderContext } from "./GroupQueryBuilderContext";
+import { QueryBuilder } from "./QueryBuilder";
+import { clearEmphasizedElements, visualizeElementsById, zoomToElements, } from "./viewerUtils";
+const GroupAction = ({ iModelId, mappingId, group, goBack, }) => {
+    var _a, _b, _c;
+    const iModelConnection = useActiveIModelConnection();
+    const [details, setDetails] = useState({
+        groupName: (_a = group === null || group === void 0 ? void 0 : group.groupName) !== null && _a !== void 0 ? _a : "",
+        description: (_b = group === null || group === void 0 ? void 0 : group.description) !== null && _b !== void 0 ? _b : "",
+    });
+    const [query, setQuery] = useState("");
+    const [simpleQuery, setSimpleQuery] = useState("");
+    const [validator, showValidationMessage] = useValidator();
+    const [isLoading, setIsLoading] = useState(false);
+    const [currentPropertyList, setCurrentPropertyList] = React.useState([]);
+    const [queryBuilder, setQueryBuilder] = React.useState(new QueryBuilder(undefined));
+    useEffect(() => {
+        const removeListener = Presentation.selection.selectionChange.addListener(async (evt, selectionProvider) => {
+            const selection = selectionProvider.getSelection(evt.imodel, evt.level);
+            const query = `SELECT ECInstanceId FROM ${selection.instanceKeys.keys().next().value}`;
+            // Selects all instances of the class
+            // const ids = await fetchIdsFromQuery(query, iModelConnection);
+            // const keySet = await manufactureKeys(ids, iModelConnection);
+            // Presentation.selection.replaceSelection(
+            //   "GroupingMappingWidget",
+            //   iModelConnection,
+            //   keySet
+            // );
+            // setSelectionInstanceKeys(selection.instanceKeys);
+            setSimpleQuery(query);
+        });
+        return () => {
+            removeListener();
+        };
+    }, [iModelConnection]);
+    useEffect(() => {
+        const reemphasize = async () => {
+            clearEmphasizedElements();
+            if (!query || query === "") {
+                return;
+            }
+            const ids = await fetchIdsFromQuery(query !== null && query !== void 0 ? query : "", iModelConnection);
+            const resolvedHiliteIds = await visualizeElementsById(ids, "red", iModelConnection);
+            await zoomToElements(resolvedHiliteIds);
+        };
+        void reemphasize();
+    }, [iModelConnection, query]);
+    useEffect(() => {
+        Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+    }, [iModelConnection]);
+    const save = useCallback(async () => {
+        var _a;
+        if (!validator.allValid()) {
+            showValidationMessage(true);
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const currentQuery = query || simpleQuery;
+            group
+                ? await reportingClientApi.updateGroup(iModelId, mappingId, (_a = group.id) !== null && _a !== void 0 ? _a : "", { ...details, query: currentQuery })
+                : await reportingClientApi.createGroup(iModelId, mappingId, {
+                    ...details,
+                    query: currentQuery,
+                });
+            Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+            await goBack();
+        }
+        catch {
+            setIsLoading(false);
+        }
+    }, [
+        details,
+        goBack,
+        group,
+        iModelConnection,
+        iModelId,
+        mappingId,
+        query,
+        showValidationMessage,
+        simpleQuery,
+        validator,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(WidgetHeader, { title: group ? (_c = group.groupName) !== null && _c !== void 0 ? _c : "" : "Add Group", returnFn: async () => {
+                Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                await goBack();
+            } }),
+        React.createElement("div", { className: 'group-add-modify-container' },
+            React.createElement(Fieldset, { legend: 'Group Details', className: 'group-details' },
+                React.createElement(Small, { className: 'field-legend' }, "Asterisk * indicates mandatory fields."),
+                React.createElement(LabeledInput, { id: 'groupName', name: 'groupName', label: 'Name', value: details.groupName, required: true, onChange: (event) => {
+                        handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("groupName");
+                    }, message: validator.message("groupName", details.groupName, NAME_REQUIREMENTS), status: validator.message("groupName", details.groupName, NAME_REQUIREMENTS)
+                        ? "negative"
+                        : undefined, onBlur: () => {
+                        validator.showMessageFor("groupName");
+                    }, onBlurCapture: (event) => {
+                        handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("groupName");
+                    } }),
+                React.createElement(LabeledInput, { id: 'description', required: true, name: 'description', label: 'Description', value: details.description, onChange: (event) => {
+                        handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("description");
+                    }, message: validator.message("description", details.description, "required"), status: validator.message("description", details.description, "required")
+                        ? "negative"
+                        : undefined, onBlur: () => {
+                        validator.showMessageFor("description");
+                    }, onBlurCapture: (event) => {
+                        handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("description");
+                    } })),
+            React.createElement(Fieldset, { legend: 'Group By', className: 'find-similar' },
+                React.createElement(GroupQueryBuilderContext.Provider, { value: {
+                        currentPropertyList,
+                        setCurrentPropertyList,
+                        query,
+                        setQuery,
+                        queryBuilder,
+                        setQueryBuilder,
+                    } },
+                    React.createElement(GroupQueryBuilderContainer, null)))),
+        React.createElement(ActionPanel, { onSave: async () => {
+                await save();
+            }, onCancel: async () => {
+                Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                await goBack();
+            }, disabled: !(details.groupName && details.description && (query || simpleQuery)), isLoading: isLoading })));
+};
+export default GroupAction;
+//# sourceMappingURL=GroupAction.js.map

package/lib/esm/widget/components/GroupAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAction.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupAction.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 type { IModelConnection } from \"@itwin/core-frontend\";\nimport type {\n  ISelectionProvider,\n  SelectionChangeEventArgs} from \"@itwin/presentation-frontend\";\nimport {\n  Presentation,\n} from \"@itwin/presentation-frontend\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Fieldset, LabeledInput, Small } from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport { fetchIdsFromQuery, handleInputChange, WidgetHeader } from \"./utils\";\nimport type { Group } from \"./Grouping\";\nimport \"./GroupAction.scss\";\nimport ActionPanel from \"./ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { GroupQueryBuilderContainer } from \"./GroupQueryBuilderContainer\";\nimport { GroupQueryBuilderContext } from \"./GroupQueryBuilderContext\";\nimport { QueryBuilder } from \"./QueryBuilder\";\nimport {\n  clearEmphasizedElements,\n  visualizeElementsById,\n  zoomToElements,\n} from \"./viewerUtils\";\n\ninterface GroupActionProps {\n  iModelId: string;\n  mappingId: string;\n  group?: Group;\n  goBack: () => Promise<void>;\n}\n\nconst GroupAction = ({\n  iModelId,\n  mappingId,\n  group,\n  goBack,\n}: GroupActionProps) => {\n  const iModelConnection = useActiveIModelConnection() as IModelConnection;\n  const [details, setDetails] = useState({\n    groupName: group?.groupName ?? \"\",\n    description: group?.description ?? \"\",\n  });\n  const [query, setQuery] = useState<string>(\"\");\n  const [simpleQuery, setSimpleQuery] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [currentPropertyList, setCurrentPropertyList] = React.useState<\n  PropertyRecord[]\n  >([]);\n  const [queryBuilder, setQueryBuilder] = React.useState<QueryBuilder>(\n    new QueryBuilder(undefined),\n  );\n\n  useEffect(() => {\n    const removeListener = Presentation.selection.selectionChange.addListener(\n      async (\n        evt: SelectionChangeEventArgs,\n        selectionProvider: ISelectionProvider,\n      ) => {\n        const selection = selectionProvider.getSelection(evt.imodel, evt.level);\n        const query = `SELECT ECInstanceId FROM ${selection.instanceKeys.keys().next().value\n        }`;\n        // Selects all instances of the class\n        // const ids = await fetchIdsFromQuery(query, iModelConnection);\n        // const keySet = await manufactureKeys(ids, iModelConnection);\n        // Presentation.selection.replaceSelection(\n        //   \"GroupingMappingWidget\",\n        //   iModelConnection,\n        //   keySet\n        // );\n        // setSelectionInstanceKeys(selection.instanceKeys);\n        setSimpleQuery(query);\n      },\n    );\n    return () => {\n      removeListener();\n    };\n  }, [iModelConnection]);\n\n  useEffect(() => {\n    const reemphasize = async () => {\n      clearEmphasizedElements();\n      if (!query || query === \"\") {\n        return;\n      }\n      const ids = await fetchIdsFromQuery(query ?? \"\", iModelConnection);\n      const resolvedHiliteIds = await visualizeElementsById(\n        ids,\n        \"red\",\n        iModelConnection,\n      );\n      await zoomToElements(resolvedHiliteIds);\n    };\n\n    void reemphasize();\n  }, [iModelConnection, query]);\n\n  useEffect(() => {\n    Presentation.selection.clearSelection(\n      \"GroupingMappingWidget\",\n      iModelConnection,\n    );\n  }, [iModelConnection]);\n\n  const save = useCallback(async () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    try {\n      setIsLoading(true);\n      const currentQuery = query || simpleQuery;\n\n      group\n        ? await reportingClientApi.updateGroup(\n          iModelId,\n          mappingId,\n          group.id ?? \"\",\n          { ...details, query: currentQuery },\n        )\n        : await reportingClientApi.createGroup(iModelId, mappingId, {\n          ...details,\n          query: currentQuery,\n        });\n      Presentation.selection.clearSelection(\n        \"GroupingMappingWidget\",\n        iModelConnection,\n      );\n      await goBack();\n    } catch {\n      setIsLoading(false);\n    }\n  }, [\n    details,\n    goBack,\n    group,\n    iModelConnection,\n    iModelId,\n    mappingId,\n    query,\n    showValidationMessage,\n    simpleQuery,\n    validator,\n  ]);\n\n  return (\n    <>\n      <WidgetHeader\n        title={group ? group.groupName ?? \"\" : \"Add Group\"}\n        returnFn={async () => {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          await goBack();\n        }}\n      />\n      <div className='group-add-modify-container'>\n        <Fieldset legend='Group Details' className='group-details'>\n          <Small className='field-legend'>\n            Asterisk * indicates mandatory fields.\n          </Small>\n          <LabeledInput\n            id='groupName'\n            name='groupName'\n            label='Name'\n            value={details.groupName}\n            required\n            onChange={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"groupName\");\n            }}\n            message={validator.message(\n              \"groupName\",\n              details.groupName,\n              NAME_REQUIREMENTS,\n            )}\n            status={\n              validator.message(\n                \"groupName\",\n                details.groupName,\n                NAME_REQUIREMENTS,\n              )\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"groupName\");\n            }}\n            onBlurCapture={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"groupName\");\n            }}\n          />\n          <LabeledInput\n            id='description'\n            required\n            name='description'\n            label='Description'\n            value={details.description}\n            onChange={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"description\");\n            }}\n            message={validator.message(\n              \"description\",\n              details.description,\n              \"required\",\n            )}\n            status={\n              validator.message(\"description\", details.description, \"required\")\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"description\");\n            }}\n            onBlurCapture={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"description\");\n            }}\n          />\n        </Fieldset>\n\n        <Fieldset legend='Group By' className='find-similar'>\n          <GroupQueryBuilderContext.Provider\n            value={{\n              currentPropertyList,\n              setCurrentPropertyList,\n              query,\n              setQuery,\n              queryBuilder,\n              setQueryBuilder,\n            }}\n          >\n            <GroupQueryBuilderContainer />\n          </GroupQueryBuilderContext.Provider>\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={async () => {\n          await save();\n        }}\n        onCancel={async () => {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          await goBack();\n        }}\n        disabled={\n          !(details.groupName && details.description && (query || simpleQuery))\n        }\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n\nexport default GroupAction;\n"]}

package/lib/esm/widget/components/GroupAction.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+* 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';
+
+.group-add-modify-container {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+  overflow-x: auto;
+  height: 100%;
+
+  .group-details {
+    display: flex;
+    flex-direction: column;
+    gap: $iui-baseline;
+  }
+}

package/lib/esm/widget/components/GroupPropertyAction.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { KeySet } from "@itwin/presentation-common";
+import type { SelectOption } from "@itwin/itwinui-react";
+import "./GroupPropertyAction.scss";
+interface GroupPropertyActionProps {
+    iModelId: string;
+    mappingId: string;
+    groupId: string;
+    groupPropertyId?: string;
+    groupPropertyName?: string;
+    keySet: KeySet;
+    returnFn: () => Promise<void>;
+}
+export declare const quantityTypesSelectionOptions: SelectOption<string>[];
+declare const GroupPropertyAction: ({ iModelId, mappingId, groupId, groupPropertyId, groupPropertyName, keySet, returnFn, }: GroupPropertyActionProps) => JSX.Element;
+export default GroupPropertyAction;
+//# sourceMappingURL=GroupPropertyAction.d.ts.map