@itwin/grouping-mapping-widget 0.12.0 → 0.14.0

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

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupDetails = 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 itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importDefault(require("react"));
+const useValidator_1 = require("../hooks/useValidator");
+const utils_1 = require("./utils");
+const GroupDetails = ({ details, setDetails, validator, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(itwinui_react_1.Small, { className: "gmw-field-legend" }, "Asterisk * indicates mandatory fields."),
+        react_1.default.createElement(itwinui_react_1.LabeledInput, { id: "groupName", name: "groupName", label: "Name", value: details.groupName, required: true, onChange: (event) => {
+                utils_1.handleInputChange(event, details, setDetails);
+                validator.showMessageFor("groupName");
+            }, message: validator.message("groupName", details.groupName, useValidator_1.NAME_REQUIREMENTS), status: validator.message("groupName", details.groupName, useValidator_1.NAME_REQUIREMENTS)
+                ? "negative"
+                : undefined, onBlur: () => {
+                validator.showMessageFor("groupName");
+            }, onBlurCapture: (event) => {
+                utils_1.handleInputChange(event, details, setDetails);
+                validator.showMessageFor("groupName");
+            } }),
+        react_1.default.createElement(itwinui_react_1.LabeledInput, { id: "description", name: "description", label: "Description", value: details.description, onChange: (event) => {
+                utils_1.handleInputChange(event, details, setDetails);
+            } })));
+};
+exports.GroupDetails = GroupDetails;
+//# sourceMappingURL=GroupDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDetails.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupDetails.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,wDAA2D;AAC3D,kDAA0B;AAE1B,wDAA0D;AAC1D,mCAA4C;AAarC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,SAAS,GACS,EAAE,EAAE;IACtB,OAAO,CACL;QACE,8BAAC,qBAAK,IAAC,SAAS,EAAC,kBAAkB,6CAE3B;QACR,8BAAC,4BAAY,IACX,EAAE,EAAC,WAAW,EACd,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,QAAQ,QACR,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,yBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;gBAC9C,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,EACD,OAAO,EAAE,SAAS,CAAC,OAAO,CACxB,WAAW,EACX,OAAO,CAAC,SAAS,EACjB,gCAAiB,CAClB,EACD,MAAM,EACJ,SAAS,CAAC,OAAO,CACf,WAAW,EACX,OAAO,CAAC,SAAS,EACjB,gCAAiB,CAClB;gBACC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,yBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;gBAC9C,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,GACD;QACF,8BAAC,4BAAY,IACX,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,OAAO,CAAC,WAAW,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,yBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;YAChD,CAAC,GACD,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AArDW,QAAA,YAAY,gBAqDvB","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 { LabeledInput, Small } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport type SimpleReactValidator from \"simple-react-validator\";\nimport { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport { handleInputChange } from \"./utils\";\n\nexport interface GroupDetailsType {\n  groupName: string;\n  description: string;\n}\n\nexport interface GroupDetailsProps {\n  details: GroupDetailsType;\n  setDetails: (newDetails: GroupDetailsType) => void;\n  validator: SimpleReactValidator;\n}\n\nexport const GroupDetails = ({\n  details,\n  setDetails,\n  validator,\n}: GroupDetailsProps) => {\n  return (\n    <>\n      <Small className=\"gmw-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        name=\"description\"\n        label=\"Description\"\n        value={details.description}\n        onChange={(event) => {\n          handleInputChange(event, details, setDetails);\n        }}\n      />\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface GroupDetailsActionPanelProps {
+    isSaveDisabled: boolean;
+    onClickBack: () => void;
+    onClickSave: () => Promise<void>;
+}
+export declare const GroupDetailsActionPanel: ({ isSaveDisabled, onClickBack, onClickSave, }: GroupDetailsActionPanelProps) => JSX.Element;
+//# sourceMappingURL=GroupDetailsActionPanel.d.ts.map

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupDetailsActionPanel = 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 itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importDefault(require("react"));
+const GroupDetailsActionPanel = ({ isSaveDisabled, onClickBack, onClickSave, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(itwinui_react_1.Button, { onClick: onClickBack }, "Back"),
+        react_1.default.createElement(itwinui_react_1.Button, { disabled: isSaveDisabled, styleType: "high-visibility", onClick: onClickSave }, "Save")));
+};
+exports.GroupDetailsActionPanel = GroupDetailsActionPanel;
+//# sourceMappingURL=GroupDetailsActionPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDetailsActionPanel.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupDetailsActionPanel.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,wDAA8C;AAC9C,kDAA0B;AAQnB,MAAM,uBAAuB,GAAG,CAAC,EACtC,cAAc,EACd,WAAW,EACX,WAAW,GACkB,EAAE,EAAE;IACjC,OAAO,CACL;QACE,8BAAC,sBAAM,IAAC,OAAO,EAAE,WAAW,WAAe;QAC3C,8BAAC,sBAAM,IACL,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,WAAW,WAGb,CACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,uBAAuB,2BAiBlC","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 { Button } from \"@itwin/itwinui-react\";\nimport React from \"react\";\n\nexport interface GroupDetailsActionPanelProps {\n  isSaveDisabled: boolean;\n  onClickBack: () => void;\n  onClickSave: () => Promise<void>;\n}\n\nexport const GroupDetailsActionPanel = ({\n  isSaveDisabled,\n  onClickBack,\n  onClickSave,\n}: GroupDetailsActionPanelProps) => {\n  return (\n    <>\n      <Button onClick={onClickBack}>Back</Button>\n      <Button\n        disabled={isSaveDisabled}\n        styleType=\"high-visibility\"\n        onClick={onClickSave}\n      >\n        Save\n      </Button>\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import "./GroupAction.scss";
+import type { GroupDetailsProps } from "./GroupDetails";
+import "./GroupDetailsStep.scss";
+declare const defaultDisplayStrings: {
+    groupDetails: string;
+};
+export interface GroupDetailsStepProps extends GroupDetailsProps {
+    displayStrings?: Partial<typeof defaultDisplayStrings>;
+}
+export declare const GroupDetailsStep: ({ displayStrings: userDisplayStrings, ...rest }: GroupDetailsStepProps) => JSX.Element;
+export {};
+//# sourceMappingURL=GroupDetailsStep.d.ts.map

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupDetailsStep = 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 itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importDefault(require("react"));
+require("./GroupAction.scss");
+const GroupDetails_1 = require("./GroupDetails");
+require("./GroupDetailsStep.scss");
+const defaultDisplayStrings = {
+    groupDetails: "Group Details",
+};
+const GroupDetailsStep = ({ displayStrings: userDisplayStrings, ...rest }) => {
+    const displayStrings = react_1.default.useMemo(() => ({ ...defaultDisplayStrings, ...userDisplayStrings }), [userDisplayStrings]);
+    return (react_1.default.createElement(itwinui_react_1.Fieldset, { legend: displayStrings.groupDetails, className: 'gmw-group-details' },
+        react_1.default.createElement(GroupDetails_1.GroupDetails, { ...rest })));
+};
+exports.GroupDetailsStep = GroupDetailsStep;
+//# sourceMappingURL=GroupDetailsStep.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDetailsStep.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupDetailsStep.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,wDAAgD;AAChD,kDAA0B;AAC1B,8BAA4B;AAE5B,iDAA8C;AAC9C,mCAAiC;AAEjC,MAAM,qBAAqB,GAAG;IAC5B,YAAY,EAAE,eAAe;CAC9B,CAAC;AAMK,MAAM,gBAAgB,GAAG,CAAC,EAC/B,cAAc,EAAE,kBAAkB,EAClC,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,cAAc,GAAG,eAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,qBAAqB,EAAE,GAAG,kBAAkB,EAAE,CAAC,EAC3D,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,OAAO,CACL,8BAAC,wBAAQ,IACP,MAAM,EAAE,cAAc,CAAC,YAAY,EACnC,SAAS,EAAC,mBAAmB;QAE7B,8BAAC,2BAAY,OACP,IAAI,GACR,CACO,CACZ,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,gBAAgB,oBAmB3B","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 } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport \"./GroupAction.scss\";\nimport type { GroupDetailsProps } from \"./GroupDetails\";\nimport { GroupDetails } from \"./GroupDetails\";\nimport \"./GroupDetailsStep.scss\";\n\nconst defaultDisplayStrings = {\n  groupDetails: \"Group Details\",\n};\n\nexport interface GroupDetailsStepProps extends GroupDetailsProps {\n  displayStrings?: Partial<typeof defaultDisplayStrings>;\n}\n\nexport const GroupDetailsStep = ({\n  displayStrings: userDisplayStrings,\n  ...rest\n}: GroupDetailsStepProps) => {\n  const displayStrings = React.useMemo(\n    () => ({ ...defaultDisplayStrings, ...userDisplayStrings }),\n    [userDisplayStrings]\n  );\n\n  return (\n    <Fieldset\n      legend={displayStrings.groupDetails}\n      className='gmw-group-details'\n    >\n      <GroupDetails\n        {...rest}\n      />\n    </Fieldset>\n  );\n};\n"]}

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

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.gmw-group-details {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Group } from "@itwin/insights-client";
+import type { ContextCustomUI, GroupingCustomUI } from "./customUI/GroupingMappingCustomUI";
+import type { GroupingProps } from "./Grouping";
+export interface GroupItemProps extends GroupingProps {
+    group: Group;
+    groupUIs: GroupingCustomUI[];
+    contextUIs: ContextCustomUI[];
+    setShowDeleteModal: (showDeleteModal: Group) => void;
+}
+export declare const GroupItem: ({ onClickGroupTitle, disableActions, group, ...rest }: GroupItemProps) => JSX.Element;
+//# sourceMappingURL=GroupItem.d.ts.map

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupItem = void 0;
+const react_1 = __importDefault(require("react"));
+const HorizontalTile_1 = require("./HorizontalTile");
+const GroupMenuActions_1 = require("./GroupMenuActions");
+const GroupItem = ({ onClickGroupTitle, disableActions, group, ...rest }) => {
+    const onTitleClick = () => {
+        if (onClickGroupTitle && !disableActions) {
+            onClickGroupTitle(group);
+        }
+    };
+    return (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { title: group.groupName, subText: group.description, actionGroup: react_1.default.createElement(GroupMenuActions_1.GroupMenuActions, { group: group, onClickGroupTitle: onClickGroupTitle, disableActions: disableActions, ...rest }), onClickTitle: disableActions ? undefined : onTitleClick }));
+};
+exports.GroupItem = GroupItem;
+//# sourceMappingURL=GroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupItem.tsx"],"names":[],"mappings":";;;;;;AAKA,kDAA0B;AAC1B,qDAAkD;AAGlD,yDAAsD;AAS/C,MAAM,SAAS,GAAG,CAAC,EACxB,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,GAAG,IAAI,EACQ,EAAE,EAAE;IAEnB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,iBAAiB,IAAI,CAAC,cAAc,EAAE;YACxC,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,+BAAc,IACb,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,WAAW,EACT,8BAAC,mCAAgB,IACf,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,KAC1B,IAAI,GACR,EAEJ,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,GACvD,CACH,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,SAAS,aA4BpB","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 { Group } from \"@itwin/insights-client\";\nimport React from \"react\";\nimport { HorizontalTile } from \"./HorizontalTile\";\nimport type { ContextCustomUI, GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport type { GroupingProps } from \"./Grouping\";\nimport { GroupMenuActions } from \"./GroupMenuActions\";\n\nexport interface GroupItemProps extends GroupingProps {\n  group: Group;\n  groupUIs: GroupingCustomUI[];\n  contextUIs: ContextCustomUI[];\n  setShowDeleteModal: (showDeleteModal: Group) => void;\n}\n\nexport const GroupItem = ({\n  onClickGroupTitle,\n  disableActions,\n  group,\n  ...rest\n}: GroupItemProps) => {\n\n  const onTitleClick = () => {\n    if (onClickGroupTitle && !disableActions) {\n      onClickGroupTitle(group);\n    }\n  };\n\n  return (\n    <HorizontalTile\n      title={group.groupName}\n      subText={group.description}\n      actionGroup={\n        <GroupMenuActions\n          group={group}\n          onClickGroupTitle={onClickGroupTitle}\n          disableActions={disableActions}\n          {...rest}\n        />\n      }\n      onClickTitle={disableActions ? undefined : onTitleClick}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Group } from "@itwin/insights-client";
+import type { ContextCustomUI, GroupingCustomUI } from "./customUI/GroupingMappingCustomUI";
+import type { GroupingProps } from "./Grouping";
+import "./GroupMenuActions.scss";
+export interface GroupMenuActionsProps extends GroupingProps {
+    group: Group;
+    groupUIs: GroupingCustomUI[];
+    contextUIs: ContextCustomUI[];
+    setShowDeleteModal: (showDeleteModal: Group) => void;
+}
+export declare const GroupMenuActions: ({ mapping, group, actionButtonRenderers, onClickGroupModify, onClickRenderContextCustomUI, groupUIs, contextUIs, disableActions, setShowDeleteModal, }: GroupMenuActionsProps) => JSX.Element;
+//# sourceMappingURL=GroupMenuActions.d.ts.map

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

@@ -0,0 +1,68 @@
+"use strict";
+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.GroupMenuActions = void 0;
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importStar(require("react"));
+const GroupingApiConfigContext_1 = require("./context/GroupingApiConfigContext");
+require("./GroupMenuActions.scss");
+const GroupMenuActions = ({ mapping, group, actionButtonRenderers, onClickGroupModify, onClickRenderContextCustomUI, groupUIs, contextUIs, disableActions, setShowDeleteModal, }) => {
+    const { iModelId } = GroupingApiConfigContext_1.useGroupingMappingApiConfig();
+    const onModify = react_1.useCallback(async (group, type) => {
+        if (!onClickGroupModify)
+            return;
+        onClickGroupModify(group, type);
+    }, [onClickGroupModify]);
+    return (react_1.default.createElement("div", { className: "gmw-actions" },
+        actionButtonRenderers &&
+            actionButtonRenderers.map((actionButton, index) => react_1.default.createElement(react_1.default.Fragment, { key: index }, actionButton({ group }))),
+        react_1.default.createElement(itwinui_react_1.DropdownMenu, { className: "gmw-action-dropdown", disabled: disableActions, menuItems: (close) => [
+                ...(groupUIs.length > 0 && onClickGroupModify
+                    ? [
+                        react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null), disabled: disableActions, "data-testid": "gmw-context-menu-item", subMenuItems: groupUIs.map((p, index) => (react_1.default.createElement(itwinui_react_1.MenuItem, { key: p.name, className: "gmw-menu-item", "data-testid": `gmw-edit-${index}`, onClick: async () => {
+                                    await onModify(group, p.name);
+                                    close();
+                                }, icon: p.icon }, p.displayLabel))) }, "Edit"),
+                    ]
+                    : []),
+                ...contextUIs.map((p) => {
+                    return (react_1.default.createElement(itwinui_react_1.MenuItem, { key: p.name, onClick: async () => {
+                            if (p.uiComponent &&
+                                onClickRenderContextCustomUI) {
+                                onClickRenderContextCustomUI(p.uiComponent, group, p.displayLabel);
+                            }
+                            if (p.onClick) {
+                                p.onClick(group, mapping, iModelId);
+                            }
+                            close();
+                        }, icon: p.icon, "data-testid": "gmw-context-menu-item" }, p.displayLabel));
+                }),
+                react_1.default.createElement(itwinui_react_1.MenuItem, { key: 2, onClick: () => {
+                        setShowDeleteModal(group);
+                        close();
+                    }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null), "data-testid": "gmw-context-menu-item" }, "Remove"),
+            ] },
+            react_1.default.createElement(itwinui_react_1.IconButton, { disabled: disableActions, styleType: "borderless", "data-testid": "gmw-more-button" },
+                react_1.default.createElement(itwinui_icons_react_1.SvgMore, null)))));
+};
+exports.GroupMenuActions = GroupMenuActions;
+//# sourceMappingURL=GroupMenuActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMenuActions.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupMenuActions.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 { Group } from \"@itwin/insights-client\";\nimport { SvgDelete, SvgEdit, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu, IconButton, MenuItem } from \"@itwin/itwinui-react\";\nimport React, { useCallback } from \"react\";\nimport type { ContextCustomUI, GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport type { GroupingProps } from \"./Grouping\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport \"./GroupMenuActions.scss\";\n\nexport interface GroupMenuActionsProps extends GroupingProps {\n  group: Group;\n  groupUIs: GroupingCustomUI[];\n  contextUIs: ContextCustomUI[];\n  setShowDeleteModal: (showDeleteModal: Group) => void;\n}\n\nexport const GroupMenuActions = ({\n  mapping,\n  group,\n  actionButtonRenderers,\n  onClickGroupModify,\n  onClickRenderContextCustomUI,\n  groupUIs,\n  contextUIs,\n  disableActions,\n  setShowDeleteModal,\n}: GroupMenuActionsProps) => {\n  const { iModelId } = useGroupingMappingApiConfig();\n\n  const onModify = useCallback(async (group: Group, type: string) => {\n    if (!onClickGroupModify) return;\n    onClickGroupModify(group, type);\n  }, [onClickGroupModify]);\n\n  return (\n    <div className=\"gmw-actions\">\n      {actionButtonRenderers &&\n        actionButtonRenderers.map((actionButton, index) =>\n          <React.Fragment key={index}>{actionButton({ group })}</React.Fragment>\n        )}\n      <DropdownMenu\n        className=\"gmw-action-dropdown\"\n        disabled={disableActions}\n        menuItems={(close: () => void) => [\n          ...(groupUIs.length > 0 && onClickGroupModify\n            ? [\n              <MenuItem\n                key={0}\n                icon={<SvgEdit />}\n                disabled={disableActions}\n                data-testid=\"gmw-context-menu-item\"\n                subMenuItems={groupUIs.map((p, index) => (\n                  <MenuItem\n                    key={p.name}\n                    className=\"gmw-menu-item\"\n                    data-testid={`gmw-edit-${index}`}\n                    onClick={async () => {\n                      await onModify(group, p.name);\n                      close();\n                    }}\n                    icon={p.icon}\n                  >\n                    {p.displayLabel}\n                  </MenuItem>\n                ))}\n              >\n                Edit\n              </MenuItem>,\n            ]\n            : []),\n          ...contextUIs.map((p) => {\n            return (\n              <MenuItem\n                key={p.name}\n                onClick={async () => {\n                  if (\n                    p.uiComponent &&\n                    onClickRenderContextCustomUI\n                  ) {\n                    onClickRenderContextCustomUI(\n                      p.uiComponent,\n                      group,\n                      p.displayLabel\n                    );\n                  }\n                  if (p.onClick) {\n                    p.onClick(group, mapping, iModelId);\n                  }\n                  close();\n                }}\n                icon={p.icon}\n                data-testid=\"gmw-context-menu-item\"\n              >\n                {p.displayLabel}\n              </MenuItem>\n            );\n          }),\n          <MenuItem\n            key={2}\n            onClick={() => {\n              setShowDeleteModal(group);\n              close();\n            }}\n            icon={<SvgDelete />}\n            data-testid=\"gmw-context-menu-item\"\n          >\n            Remove\n          </MenuItem>,\n        ]}\n      >\n        <IconButton\n          disabled={disableActions}\n          styleType=\"borderless\"\n          data-testid=\"gmw-more-button\"\n        >\n          <SvgMore />\n        </IconButton>\n      </DropdownMenu>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.gmw-actions {
+  display: flex;
+  flex-direction: row;
+  .gmw-action-dropdown {
+    width: $iui-3xl + $iui-xl;
+  }
+}

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

@@ -1,17 +1,21 @@
-/// <reference types="react" />
+import React from "react";
 import type { CreateTypeFromInterface } from "../utils";
 import "./Grouping.scss";
 import type { Group, Mapping } from "@itwin/insights-client";
 import type { ContextCustomUI } from "./customUI/GroupingMappingCustomUI";
 export declare type IGroupTyped = CreateTypeFromInterface<Group>;
+export interface ActionButtonRendererProps {
+    group: Group;
+}
+export declare type ActionButtonRenderer = (props: ActionButtonRendererProps) => React.ReactNode;
 export interface GroupingProps {
     mapping: Mapping;
+    actionButtonRenderers?: ActionButtonRenderer[];
     onClickAddGroup?: (queryGenerationType: string) => void;
     onClickGroupTitle?: (group: Group) => void;
     onClickGroupModify?: (group: Group, queryGenerationType: string) => void;
-    onClickRenderContextCustomUI?: (contextCustomUI: Exclude<ContextCustomUI["uiComponent"], undefined>, group: Group) => void;
-    isNonEmphasizedSelectable?: boolean;
-    emphasizeElements?: boolean;
+    onClickRenderContextCustomUI?: (contextCustomUI: Exclude<ContextCustomUI["uiComponent"], undefined>, group: Group, displayLabel: string) => void;
+    disableActions?: boolean;
 }
-export declare const Groupings: ({ mapping, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, emphasizeElements, isNonEmphasizedSelectable, }: GroupingProps) => JSX.Element;
+export declare const Groupings: ({ mapping, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, }: GroupingProps) => JSX.Element;
 //# sourceMappingURL=Grouping.d.ts.map

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

@@ -27,29 +27,25 @@ exports.Groupings = 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 appui_react_1 = require("@itwin/appui-react");
 const react_1 = __importStar(require("react"));
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const DeleteModal_1 = __importDefault(require("./DeleteModal"));
 require("./Grouping.scss");
-const viewerUtils_1 = require("./viewerUtils");
 const utils_1 = require("./utils");
 const MappingClientContext_1 = require("./context/MappingClientContext");
-const HorizontalTile_1 = require("./HorizontalTile");
 const GroupingApiConfigContext_1 = require("./context/GroupingApiConfigContext");
 const GroupingMappingCustomUIContext_1 = require("./context/GroupingMappingCustomUIContext");
 const GroupingMappingCustomUI_1 = require("./customUI/GroupingMappingCustomUI");
 const GroupHilitedElementsContext_1 = require("./context/GroupHilitedElementsContext");
-const groupsHelpers_1 = require("./groupsHelpers");
-const ToggleGroupVisibility_1 = require("./ToggleGroupVisibility");
 const GroupsAddButton_1 = require("./GroupsAddButton");
+const GroupItem_1 = require("./GroupItem");
 const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading, getAccessToken, mappingsClient) => {
     try {
         setIsLoading(true);
         const accessToken = await getAccessToken();
         const groups = await mappingsClient.getGroups(accessToken, iModelId, mappingId);
-        setGroups(groups);
+        setGroups(groups.sort((a, b) => a.groupName.localeCompare(b.groupName)));
     }
     catch (error) {
         utils_1.handleError(error.status);
@@ -58,161 +54,36 @@ const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading, getAcce
         setIsLoading(false);
     }
 };
-const Groupings = ({ mapping, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, emphasizeElements = true, isNonEmphasizedSelectable = false, }) => {
-    const iModelConnection = appui_react_1.useActiveIModelConnection();
+const Groupings = ({ mapping, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, }) => {
     const { getAccessToken, iModelId } = GroupingApiConfigContext_1.useGroupingMappingApiConfig();
-    const { showGroupColor, setShowGroupColor, hiddenGroupsIds, setHiddenGroupsIds, hilitedElementsQueryCache, groups, setGroups } = GroupHilitedElementsContext_1.useGroupHilitedElementsContext();
+    const { groups, setGroups } = GroupHilitedElementsContext_1.useGroupHilitedElementsContext();
     const mappingClient = MappingClientContext_1.useMappingClient();
-    const groupUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs
-        .filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Grouping);
-    const contextUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs
-        .filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Context);
+    const groupUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs.filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Grouping);
+    const contextUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs.filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Context);
     const [showDeleteModal, setShowDeleteModal] = react_1.useState(undefined);
     const [isLoading, setIsLoading] = react_1.useState(true);
-    const [isLoadingQuery, setLoadingQuery] = react_1.useState(false);
-    const getHiliteIdsFromGroupsWrapper = react_1.useCallback(async (groups) => iModelConnection
-        ? groupsHelpers_1.getHiliteIdsFromGroups(iModelConnection, groups, hilitedElementsQueryCache)
-        : [], [iModelConnection, hilitedElementsQueryCache]);
-    const visualizeGroupColorsWrapper = react_1.useCallback(async (viewGroups) => {
-        if (!iModelConnection)
-            return;
-        setLoadingQuery(true);
-        await groupsHelpers_1.visualizeGroupColors(iModelConnection, groups, viewGroups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements);
-        isNonEmphasizedSelectable && viewerUtils_1.clearEmphasizedElements();
-        setLoadingQuery(false);
-    }, [iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements, isNonEmphasizedSelectable]);
     react_1.useEffect(() => {
         const initialize = async () => {
             await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
         };
         void initialize();
     }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);
-    react_1.useEffect(() => {
-        if (isLoading)
-            return;
-        const visualize = async () => {
-            if (groups.length > 0 && showGroupColor) {
-                await visualizeGroupColorsWrapper(groups);
-            }
-            else {
-                viewerUtils_1.clearEmphasizedOverriddenElements();
-            }
-        };
-        void visualize();
-    }, [groups, isLoading, showGroupColor, visualizeGroupColorsWrapper]);
-    const hideGroupsWrapper = react_1.useCallback(async (viewGroups) => {
-        if (!iModelConnection)
-            return;
-        setLoadingQuery(true);
-        await groupsHelpers_1.hideGroups(iModelConnection, viewGroups, hilitedElementsQueryCache);
-        setLoadingQuery(false);
-    }, [hilitedElementsQueryCache, iModelConnection]);
-    const showGroup = react_1.useCallback(async (viewGroup) => {
-        viewerUtils_1.clearHiddenElements();
-        // hide group Ids filter
-        const newHiddenGroups = hiddenGroupsIds
-            .map((id) => groups.find((g) => g.id === id))
-            .filter((g) => !!g && g.id !== viewGroup.id);
-        // view group Ids filter
-        const viewIds = await getHiliteIdsFromGroupsWrapper(groups.filter((g) => !newHiddenGroups.find((hg) => hg.id === g.id)));
-        let hiddenIds = await getHiliteIdsFromGroupsWrapper(newHiddenGroups);
-        hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));
-        viewerUtils_1.hideElements(hiddenIds);
-    }, [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]);
-    const addGroup = (type) => {
+    const addGroup = react_1.useCallback((type) => {
         if (!onClickAddGroup)
             return;
         onClickAddGroup(type);
-        viewerUtils_1.clearEmphasizedElements();
-    };
-    const onModify = async (group, type) => {
-        if (!onClickGroupModify)
-            return;
-        if (group.id && hiddenGroupsIds.includes(group.id)) {
-            await showGroup(group);
-            setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));
-        }
-        viewerUtils_1.clearEmphasizedElements();
-        onClickGroupModify(group, type);
-    };
-    const colorGroup = async (group) => {
-        if (showGroupColor && hiddenGroupsIds.includes(group.id)) {
-            await showGroup(group);
-            setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));
-        }
-    };
+    }, [onClickAddGroup]);
     const refresh = react_1.useCallback(async () => {
-        setGroups([]);
         await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
     }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);
-    const showAll = async () => {
-        setLoadingQuery(true);
-        viewerUtils_1.clearHiddenElements();
-        setHiddenGroupsIds([]);
-        const allIds = await getHiliteIdsFromGroupsWrapper(groups);
-        await viewerUtils_1.zoomToElements(allIds);
-        setLoadingQuery(false);
-    };
-    const hideAll = react_1.useCallback(async () => {
-        await hideGroupsWrapper(groups);
-        setHiddenGroupsIds(groups.map((g) => g.id).filter((id) => !!id));
-        const allIds = await getHiliteIdsFromGroupsWrapper(groups);
-        await viewerUtils_1.zoomToElements(allIds);
-    }, [setHiddenGroupsIds, groups, hideGroupsWrapper, getHiliteIdsFromGroupsWrapper]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(itwinui_react_1.Surface, { className: 'gmw-groups-container' },
-            react_1.default.createElement("div", { className: 'gmw-toolbar' },
-                onClickAddGroup && groupUIs.length > 0 ? (react_1.default.createElement(GroupsAddButton_1.GroupsAddButton, { isLoadingQuery: isLoadingQuery, groupUIs: groupUIs, onClickAddGroup: addGroup })) : (react_1.default.createElement(ToggleGroupVisibility_1.ToggleGroupVisibility, { isLoadingQuery: isLoadingQuery, showGroupColor: showGroupColor, setShowGroupColor: setShowGroupColor })),
-                iModelConnection &&
-                    react_1.default.createElement(itwinui_react_1.ButtonGroup, { className: 'gmw-toolbar-buttons' },
-                        onClickAddGroup && groupUIs.length > 0 && (react_1.default.createElement(ToggleGroupVisibility_1.ToggleGroupVisibility, { isLoadingQuery: isLoadingQuery, showGroupColor: showGroupColor, setShowGroupColor: setShowGroupColor })),
-                        react_1.default.createElement(itwinui_react_1.IconButton, { title: 'Show All', onClick: showAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityShow, null)),
-                        react_1.default.createElement(itwinui_react_1.IconButton, { title: 'Hide All', onClick: hideAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHide, null)),
-                        react_1.default.createElement(itwinui_react_1.IconButton, { title: "Refresh", onClick: refresh, disabled: isLoading || isLoadingQuery, styleType: 'borderless' },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgRefresh, null)))),
-            isLoading ? (react_1.default.createElement(utils_1.LoadingOverlay, null)) : groups.length === 0 ? (react_1.default.createElement(utils_1.EmptyMessage, { message: 'No Groups available.' })) : (react_1.default.createElement("div", { className: 'gmw-group-list' }, groups
-                .sort((a, b) => { var _a, _b, _c; return (_c = (_a = a.groupName) === null || _a === void 0 ? void 0 : _a.localeCompare((_b = b.groupName) !== null && _b !== void 0 ? _b : "")) !== null && _c !== void 0 ? _c : 1; })
-                .map((g) => (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { key: g.id, title: g.groupName ? g.groupName : "Untitled", subText: g.description, actionGroup: react_1.default.createElement("div", { className: 'gmw-actions' },
-                    iModelConnection && react_1.default.createElement(react_1.default.Fragment, null,
-                        showGroupColor && (react_1.default.createElement(itwinui_react_1.IconButton, { styleType: 'borderless', className: 'gmw-group-view-icon' },
-                            react_1.default.createElement("div", { className: "gmw-color-legend", style: {
-                                    backgroundColor: groupsHelpers_1.getGroupColor(groups.findIndex((group) => g.id === group.id)),
-                                } }))),
-                        g.id && hiddenGroupsIds.includes(g.id) ? (react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
-                                await showGroup(g);
-                                setHiddenGroupsIds(hiddenGroupsIds.filter((id) => g.id !== id));
-                            } },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHide, null))) : (react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
-                                await hideGroupsWrapper([g]);
-                                setHiddenGroupsIds(hiddenGroupsIds.concat(g.id ? [g.id] : []));
-                            } },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityShow, null)))),
-                    react_1.default.createElement(itwinui_react_1.DropdownMenu, { className: 'gmw-custom-ui-dropdown', disabled: isLoadingQuery, menuItems: (close) => [...(groupUIs.length > 0 && onClickGroupModify ?
-                                [react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null), disabled: isLoadingQuery, "data-testid": "gmw-context-menu-item", subMenuItems: groupUIs.map((p, index) => (react_1.default.createElement(itwinui_react_1.MenuItem, { key: index, className: 'gmw-menu-item', "data-testid": `gmw-edit-${index}`, onClick: async () => { await onModify(g, p.name); close(); }, icon: p.icon }, p.displayLabel))) }, "Edit")] : []),
-                            ...contextUIs.map((p) => {
-                                return react_1.default.createElement(itwinui_react_1.MenuItem, { key: p.name, onClick: async () => {
-                                        showGroupColor && await showGroup(g);
-                                        if (p.uiComponent && onClickRenderContextCustomUI) {
-                                            onClickRenderContextCustomUI(p.uiComponent, g);
-                                        }
-                                        if (p.onClick) {
-                                            p.onClick(g, mapping, iModelId);
-                                        }
-                                        close();
-                                    }, icon: p.icon, "data-testid": "gmw-context-menu-item" }, p.displayLabel);
-                            }), react_1.default.createElement(itwinui_react_1.MenuItem, { key: 2, onClick: () => {
-                                    setShowDeleteModal(g);
-                                    close();
-                                }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null), "data-testid": "gmw-context-menu-item" }, "Remove"),
-                        ] },
-                        react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless', "data-testid": "gmw-more-button" },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgMore, null)))), onClickTitle: onClickGroupTitle && !isLoadingQuery ?
-                    async () => {
-                        await colorGroup(g);
-                        onClickGroupTitle(g);
-                    } : undefined })))))),
+        react_1.default.createElement(itwinui_react_1.Surface, { className: "gmw-groups-container" },
+            react_1.default.createElement("div", { className: "gmw-toolbar" },
+                onClickAddGroup && groupUIs.length > 0 && (react_1.default.createElement(GroupsAddButton_1.GroupsAddButton, { disabled: disableActions, groupUIs: groupUIs, onClickAddGroup: addGroup })),
+                react_1.default.createElement(itwinui_react_1.ButtonGroup, { className: "gmw-toolbar-buttons" },
+                    react_1.default.createElement(itwinui_react_1.IconButton, { title: "Refresh", onClick: refresh, disabled: isLoading || disableActions, styleType: "borderless" },
+                        react_1.default.createElement(itwinui_icons_react_1.SvgRefresh, null)))),
+            isLoading ? (react_1.default.createElement(utils_1.LoadingOverlay, null)) : groups.length === 0 ? (react_1.default.createElement(utils_1.EmptyMessage, { message: "No Groups available." })) : (react_1.default.createElement("div", { className: "gmw-group-list" }, groups.map((g) => (react_1.default.createElement(GroupItem_1.GroupItem, { key: g.id, mapping: mapping, group: g, groupUIs: groupUIs, contextUIs: contextUIs, actionButtonRenderers: actionButtonRenderers, onClickGroupTitle: onClickGroupTitle, onClickGroupModify: onClickGroupModify, onClickRenderContextCustomUI: onClickRenderContextCustomUI, disableActions: disableActions, setShowDeleteModal: setShowDeleteModal })))))),
         react_1.default.createElement(DeleteModal_1.default, { entityName: showDeleteModal === null || showDeleteModal === void 0 ? void 0 : showDeleteModal.groupName, onClose: () => setShowDeleteModal(undefined), onDelete: async () => {
                 var _a;
                 const accessToken = await getAccessToken();