@itwin/grouping-mapping-widget 0.6.0 → 0.8.0

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

@@ -1,11 +1,14 @@
 import React from "react";
 import { Text } from "@itwin/itwinui-react";
 import "./HorizontalTile.scss";
-export const HorizontalTile = ({ title, subText, onClickTitle, titleTooltip, subtextToolTip, actionGroup }) => {
-    return (React.createElement("div", { className: "gmw-horizontal-tile-container", "data-testid": "gmw-horizontal-tile" },
-        React.createElement("div", { className: "gmw-body" },
-            React.createElement(Text, { className: `gmw-body-text ${onClickTitle ? "iui-anchor" : ""}`, onClick: onClickTitle, variant: "body", title: titleTooltip }, title),
-            subText && React.createElement(Text, { className: "gmw-body-text", isMuted: true, title: subtextToolTip, variant: "small" }, subText)),
-        React.createElement("div", { className: "gmw-action-button", "data-testid": "tile-action-button" }, actionGroup)));
+import classNames from "classnames";
+export const HorizontalTile = (props) => {
+    return (React.createElement("div", { className: classNames("gmw-horizontal-tile-container", { "gmw-horizontal-tile-selected": props.selected }), onClick: props.onClick, "data-testid": "gmw-horizontal-tile" },
+        React.createElement("div", { className: "gmw-body-container" },
+            props.dragHandle,
+            React.createElement("div", { className: "gmw-body" },
+                React.createElement(Text, { className: classNames("gmw-body-text", { "iui-anchor": !!props.onClickTitle }), onClick: props.onClickTitle, variant: "body", title: props.titleTooltip }, props.title),
+                props.subText && React.createElement(Text, { className: "gmw-body-text", isMuted: true, title: props.subtextToolTip, variant: "small" }, props.subText))),
+        React.createElement("div", { className: "gmw-action-button", "data-testid": "tile-action-button" }, props.actionGroup)));
 };
 //# sourceMappingURL=HorizontalTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTile.js","sourceRoot":"","sources":["../../../../src/widget/components/HorizontalTile.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAW/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAsB,EAAE,EAAE;IAEhI,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B,iBAAa,qBAAqB;QAC9E,6BAAK,SAAS,EAAC,UAAU;YACvB,oBAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,YAAY,IAAG,KAAK,CAAQ;YAC9I,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,IAAE,OAAO,CAAQ,CAC9G;QACN,6BAAK,SAAS,EAAC,mBAAmB,iBAAa,oBAAoB,IAChE,WAAW,CACR,CACF,CACP,CAAC;AAEJ,CAAC,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 type { ReactNode } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport \"./HorizontalTile.scss\";\n\ninterface HorizontalTileProps {\n  title: string;\n  actionGroup: ReactNode;\n  subText?: string;\n  onClickTitle?: () => void;\n  titleTooltip?: string;\n  subtextToolTip?: string;\n}\n\nexport const HorizontalTile = ({ title, subText, onClickTitle, titleTooltip, subtextToolTip, actionGroup}: HorizontalTileProps) => {\n\n  return (\n    <div className=\"gmw-horizontal-tile-container\" data-testid=\"gmw-horizontal-tile\">\n      <div className=\"gmw-body\">\n        <Text className={`gmw-body-text ${onClickTitle ? \"iui-anchor\" : \"\"}`} onClick={onClickTitle} variant=\"body\" title={titleTooltip}>{title}</Text>\n        {subText && <Text className=\"gmw-body-text\" isMuted={true} title={subtextToolTip} variant=\"small\">{subText}</Text>}\n      </div>\n      <div className=\"gmw-action-button\" data-testid=\"tile-action-button\">\n        {actionGroup}\n      </div>\n    </div>\n  );\n\n};\n"]}
+{"version":3,"file":"HorizontalTile.js","sourceRoot":"","sources":["../../../../src/widget/components/HorizontalTile.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAcpC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IAE3D,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,EAAE,8BAA8B,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,iBAAc,qBAAqB;QACxK,6BAAK,SAAS,EAAC,oBAAoB;YAChC,KAAK,CAAC,UAAU;YACjB,6BAAK,SAAS,EAAC,UAAU;gBACvB,oBAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,CAAC,YAAY,IAAG,KAAK,CAAC,KAAK,CAAQ;gBAChL,KAAK,CAAC,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,OAAO,CAAQ,CAChI,CACF;QACN,6BAAK,SAAS,EAAC,mBAAmB,iBAAa,oBAAoB,IAChE,KAAK,CAAC,WAAW,CACd,CACF,CACP,CAAC;AAEJ,CAAC,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 type { ReactNode } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport \"./HorizontalTile.scss\";\nimport classNames from \"classnames\";\n\nexport interface HorizontalTileProps {\n  title: string;\n  actionGroup: ReactNode;\n  subText?: string;\n  onClick?: () => void;\n  onClickTitle?: () => void;\n  titleTooltip?: string;\n  subtextToolTip?: string;\n  selected?: boolean;\n  dragHandle?: ReactNode;\n}\n\nexport const HorizontalTile = (props: HorizontalTileProps) => {\n\n  return (\n    <div className={classNames(\"gmw-horizontal-tile-container\", { \"gmw-horizontal-tile-selected\": props.selected })} onClick={props.onClick} data-testid=\"gmw-horizontal-tile\">\n      <div className=\"gmw-body-container\">\n        {props.dragHandle}\n        <div className=\"gmw-body\">\n          <Text className={classNames(\"gmw-body-text\", { \"iui-anchor\": !!props.onClickTitle })} onClick={props.onClickTitle} variant=\"body\" title={props.titleTooltip}>{props.title}</Text>\n          {props.subText && <Text className=\"gmw-body-text\" isMuted={true} title={props.subtextToolTip} variant=\"small\">{props.subText}</Text>}\n        </div>\n      </div>\n      <div className=\"gmw-action-button\" data-testid=\"tile-action-button\">\n        {props.actionGroup}\n      </div>\n    </div>\n  );\n\n};\n"]}

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

@@ -2,31 +2,55 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import '~@itwin/itwinui-css/scss/variables';
+@import "~@itwin/itwinui-css/scss/variables";
+@import "~@itwin/itwinui-css/scss/icon/index";
 
-.gmw-horizontal-tile-container {
-  display: flex;
-  justify-content: space-between;
-  border-radius: 5px;
-  background-color: var(--iui-color-background-2);
-  height: $iui-baseline * 4;
-  padding: 5.5px $iui-s;
-  .gmw-body {
+.gmw-horizontal-tile {
+  &-container {
     display: flex;
-    flex-direction: column;
-    min-width: 0;
-    justify-content: center;
-    &-text {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    justify-content: space-between;
+    border-radius: 5px;
+    background-color: var(--iui-color-background-2);
+    min-height: $iui-baseline * 4;
+    padding: 5.5px $iui-s;
+
+    .gmw-body-container {
+      display: flex;
+      min-width: 0;
+      .gmw-drag-icon {
+        @include iui-icons-large();
+        justify-content: center;
+        height: 100%;
+      }
+      .gmw-body {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        justify-content: center;
+        &-text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    .gmw-action-button {
+      margin-left: 0;
+      align-self: center;
+      min-width: 36px;
+      margin-right: $iui-xs;
+      flex-shrink: 0;
     }
   }
-  .gmw-action-button {
-    margin-left: 0;
-    align-self: center;
-    min-width: 36px;
-    margin-right: $iui-xs;
-    flex-shrink: 0;
+
+  &-selected {
+    @include themed {
+      border: 1px solid t(iui-color-foreground-primary);
+      background: linear-gradient(
+          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
+          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
+        ),
+        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
+    }
   }
 }

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

@@ -2,14 +2,14 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import '~@itwin/itwinui-css/scss/variables';
+@import "~@itwin/itwinui-css/scss/variables";
 
 .gmw-mappings-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   padding: $iui-baseline $iui-m;
-  min-height: 0;;
+  min-height: 0;
 
   .gmw-table-toolbar {
     display: flex;
@@ -33,8 +33,7 @@
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
-    gap: 7.5px;
-    margin-top: 7.5px;
+    gap: $iui-s;
+    margin-top: $iui-s;
   }
 }
-

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

@@ -28,6 +28,8 @@ const SelectProject = ({ onSelect, onCancel }) => {
         void fetchAccessToken();
     }, [getAccessToken]);
     const startSearch = useCallback(() => {
+        if (!searchInput)
+            return;
         setActiveSearchInput(searchInput);
         setSearched(true);
     }, [searchInput]);

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

@@ -1 +1 @@
-{"version":3,"file":"SelectProject.js","sourceRoot":"","sources":["../../../../src/widget/components/SelectProject.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 { AccessToken } from \"@itwin/core-bentley\";\nimport type {\n  ApiOverrides,\n  IModelFull,\n  ProjectFull,\n} from \"@itwin/imodel-browser-react\";\nimport { ProjectGrid } from \"@itwin/imodel-browser-react\";\nimport {\n  SvgCalendar,\n  SvgClose,\n  SvgList,\n  SvgSearch,\n  SvgStarHollow,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  Button,\n  HorizontalTabs,\n  IconButton,\n  LabeledInput,\n  Tab,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport \"./SelectProject.scss\";\n\nconst tabsWithIcons = [\n  <Tab\n    key=\"favorite\"\n    label=\"Favorite projects\"\n    startIcon={<SvgStarHollow />}\n  />,\n  <Tab key=\"recents\" label=\"Recent projects\" startIcon={<SvgCalendar />} />,\n  <Tab key=\"all\" label=\"My projects\" startIcon={<SvgList />} />,\n];\ninterface SelectProjectProps {\n  onSelect: (project: ProjectFull) => void;\n  onCancel: () => void;\n}\nconst SelectProject = ({ onSelect, onCancel }: SelectProjectProps) => {\n  const { getAccessToken, prefix } = useGroupingMappingApiConfig();\n  const [projectType, setProjectType] = useState<number>(0);\n  const [searchInput, setSearchInput] = useState<string>(\"\");\n  const [activeSearchInput, setActiveSearchInput] = useState<string>(\"\");\n  const [accessToken, setAccessToken] = useState<AccessToken>();\n  const [apiOverrides, setApiOverrides] = useState<ApiOverrides<IModelFull[]>>({\n    serverEnvironmentPrefix: prefix,\n  });\n  const [searched, setSearched] = useState<boolean>(false);\n\n  useEffect(\n    () => setApiOverrides({ serverEnvironmentPrefix: prefix }),\n    [prefix]\n  );\n\n  useEffect(() => {\n    const fetchAccessToken = async () => {\n      const accessToken = await getAccessToken();\n      setAccessToken(accessToken);\n    };\n    void fetchAccessToken();\n  }, [getAccessToken]);\n\n  const startSearch = useCallback(() => {\n    setActiveSearchInput(searchInput);\n    setSearched(true);\n  }, [searchInput]);\n\n  const clearSearch = useCallback(() => {\n    setSearchInput(\"\");\n    setActiveSearchInput(\"\");\n    setSearched(false);\n  }, []);\n\n  useEffect(() => {\n    if (searchInput.length === 0) {\n      setSearched(false);\n      clearSearch();\n    }\n  }, [searchInput, setSearched, clearSearch]);\n\n  return (\n    <div className=\"gmw-select-project-grid-container\">\n      <HorizontalTabs\n        labels={tabsWithIcons}\n        onTabSelected={setProjectType}\n        activeIndex={projectType}\n        type={\"borderless\"}\n        contentClassName=\"gmw-grid-holding-tab\"\n      >\n        <LabeledInput\n          displayStyle=\"inline\"\n          iconDisplayStyle=\"inline\"\n          className=\"gmw-search-input\"\n          label=\"Search\"\n          value={searchInput}\n          placeholder=\"Search....\"\n          onChange={(event) => {\n            const {\n              target: { value },\n            } = event;\n            setSearchInput(value);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              startSearch();\n            }\n          }}\n          svgIcon={\n            searched ? (\n              <IconButton onClick={clearSearch} styleType=\"borderless\">\n                <SvgClose />\n              </IconButton>\n            ) : (\n              <IconButton onClick={startSearch} styleType=\"borderless\">\n                <SvgSearch />\n              </IconButton>\n            )\n          }\n        />\n      </HorizontalTabs>\n      <div className=\"gmw-project-grid\">\n        <ProjectGrid\n          onThumbnailClick={onSelect}\n          accessToken={accessToken}\n          apiOverrides={apiOverrides}\n          filterOptions={activeSearchInput}\n          requestType={\n            projectType === 0 ? \"favorites\" : projectType === 1 ? \"recents\" : \"\"\n          }\n        />\n      </div>\n      <div className=\"gmw-select-project-action-panel\">\n        <Button onClick={onCancel}>Cancel</Button>\n      </div>\n    </div>\n  );\n};\n\nexport default SelectProject;\n"]}
+{"version":3,"file":"SelectProject.js","sourceRoot":"","sources":["../../../../src/widget/components/SelectProject.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 { AccessToken } from \"@itwin/core-bentley\";\nimport type {\n  ApiOverrides,\n  IModelFull,\n  ProjectFull,\n} from \"@itwin/imodel-browser-react\";\nimport { ProjectGrid } from \"@itwin/imodel-browser-react\";\nimport {\n  SvgCalendar,\n  SvgClose,\n  SvgList,\n  SvgSearch,\n  SvgStarHollow,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  Button,\n  HorizontalTabs,\n  IconButton,\n  LabeledInput,\n  Tab,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport \"./SelectProject.scss\";\n\nconst tabsWithIcons = [\n  <Tab\n    key=\"favorite\"\n    label=\"Favorite projects\"\n    startIcon={<SvgStarHollow />}\n  />,\n  <Tab key=\"recents\" label=\"Recent projects\" startIcon={<SvgCalendar />} />,\n  <Tab key=\"all\" label=\"My projects\" startIcon={<SvgList />} />,\n];\ninterface SelectProjectProps {\n  onSelect: (project: ProjectFull) => void;\n  onCancel: () => void;\n}\nconst SelectProject = ({ onSelect, onCancel }: SelectProjectProps) => {\n  const { getAccessToken, prefix } = useGroupingMappingApiConfig();\n  const [projectType, setProjectType] = useState<number>(0);\n  const [searchInput, setSearchInput] = useState<string>(\"\");\n  const [activeSearchInput, setActiveSearchInput] = useState<string>(\"\");\n  const [accessToken, setAccessToken] = useState<AccessToken>();\n  const [apiOverrides, setApiOverrides] = useState<ApiOverrides<IModelFull[]>>({\n    serverEnvironmentPrefix: prefix,\n  });\n  const [searched, setSearched] = useState<boolean>(false);\n\n  useEffect(\n    () => setApiOverrides({ serverEnvironmentPrefix: prefix }),\n    [prefix]\n  );\n\n  useEffect(() => {\n    const fetchAccessToken = async () => {\n      const accessToken = await getAccessToken();\n      setAccessToken(accessToken);\n    };\n    void fetchAccessToken();\n  }, [getAccessToken]);\n\n  const startSearch = useCallback(() => {\n    if (!searchInput) return;\n    setActiveSearchInput(searchInput);\n    setSearched(true);\n  }, [searchInput]);\n\n  const clearSearch = useCallback(() => {\n    setSearchInput(\"\");\n    setActiveSearchInput(\"\");\n    setSearched(false);\n  }, []);\n\n  useEffect(() => {\n    if (searchInput.length === 0) {\n      setSearched(false);\n      clearSearch();\n    }\n  }, [searchInput, setSearched, clearSearch]);\n\n  return (\n    <div className=\"gmw-select-project-grid-container\">\n      <HorizontalTabs\n        labels={tabsWithIcons}\n        onTabSelected={setProjectType}\n        activeIndex={projectType}\n        type={\"borderless\"}\n        contentClassName=\"gmw-grid-holding-tab\"\n      >\n        <LabeledInput\n          displayStyle=\"inline\"\n          iconDisplayStyle=\"inline\"\n          className=\"gmw-search-input\"\n          label=\"Search\"\n          value={searchInput}\n          placeholder=\"Search....\"\n          onChange={(event) => {\n            const {\n              target: { value },\n            } = event;\n            setSearchInput(value);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              startSearch();\n            }\n          }}\n          svgIcon={\n            searched ? (\n              <IconButton onClick={clearSearch} styleType=\"borderless\">\n                <SvgClose />\n              </IconButton>\n            ) : (\n              <IconButton onClick={startSearch} styleType=\"borderless\">\n                <SvgSearch />\n              </IconButton>\n            )\n          }\n        />\n      </HorizontalTabs>\n      <div className=\"gmw-project-grid\">\n        <ProjectGrid\n          onThumbnailClick={onSelect}\n          accessToken={accessToken}\n          apiOverrides={apiOverrides}\n          filterOptions={activeSearchInput}\n          requestType={\n            projectType === 0 ? \"favorites\" : projectType === 1 ? \"recents\" : \"\"\n          }\n        />\n      </div>\n      <div className=\"gmw-select-project-action-panel\">\n        <Button onClick={onCancel}>Cancel</Button>\n      </div>\n    </div>\n  );\n};\n\nexport default SelectProject;\n"]}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { HorizontalTileProps } from "./HorizontalTile";
+interface SortableHorizontalTileProps extends HorizontalTileProps {
+    id: string;
+}
+declare const SortableHorizontalTile: ({ id, ...props }: SortableHorizontalTileProps) => JSX.Element;
+export default SortableHorizontalTile;
+//# sourceMappingURL=SortableHorizontalTile.d.ts.map

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

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useEffect } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { HorizontalTile } from "./HorizontalTile";
+import { CSS } from "@dnd-kit/utilities";
+import { SvgDragHandleVertical } from "@itwin/itwinui-icons-react";
+const SortableHorizontalTile = ({ id, ...props }) => {
+    const { attributes, listeners, isDragging, setNodeRef, transform, transition, } = useSortable({ id });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    useEffect(() => {
+        if (!isDragging) {
+            return;
+        }
+        document.body.style.cursor = "grabbing";
+        return () => {
+            document.body.style.cursor = "";
+        };
+    }, [isDragging]);
+    return (React.createElement("div", { ref: setNodeRef, ...attributes, style: { ...style, visibility: isDragging ? "hidden" : "visible" } },
+        React.createElement(HorizontalTile, { dragHandle: React.createElement("div", { className: "gmw-drag-icon", style: { cursor: "grab" }, title: "Drag & Drop", ...listeners },
+                React.createElement(SvgDragHandleVertical, null)), ...props })));
+};
+export default SortableHorizontalTile;
+//# sourceMappingURL=SortableHorizontalTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableHorizontalTile.js","sourceRoot":"","sources":["../../../../src/widget/components/SortableHorizontalTile.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAMnE,MAAM,sBAAsB,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAA+B,EAAE,EAAE;IAC/E,MAAM,EACJ,UAAU,EACV,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,GACX,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAExB,MAAM,KAAK,GAAG;QACZ,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QACD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,KACX,UAAU,EACd,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE;QAElE,oBAAC,cAAc,IACb,UAAU,EACR,6BAAK,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,aAAa,KAAK,SAAS;gBACzF,oBAAC,qBAAqB,OAAG,CACrB,KAEJ,KAAK,GACT,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,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 React, { useEffect } from \"react\";\nimport { useSortable } from \"@dnd-kit/sortable\";\nimport type { HorizontalTileProps } from \"./HorizontalTile\";\nimport { HorizontalTile } from \"./HorizontalTile\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { SvgDragHandleVertical } from \"@itwin/itwinui-icons-react\";\n\ninterface SortableHorizontalTileProps extends HorizontalTileProps {\n  id: string;\n}\n\nconst SortableHorizontalTile = ({ id, ...props }: SortableHorizontalTileProps) => {\n  const {\n    attributes,\n    listeners,\n    isDragging,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  useEffect(() => {\n    if (!isDragging) {\n      return;\n    }\n    document.body.style.cursor = \"grabbing\";\n    return () => {\n      document.body.style.cursor = \"\";\n    };\n  }, [isDragging]);\n\n  return (\n    <div\n      ref={setNodeRef}\n      {...attributes}\n      style={{ ...style, visibility: isDragging ? \"hidden\" : \"visible\" }}\n    >\n      <HorizontalTile\n        dragHandle={\n          <div className=\"gmw-drag-icon\" style={{ cursor: \"grab\" }} title=\"Drag & Drop\" {...listeners}>\n            <SvgDragHandleVertical />\n          </div>\n        }\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport default SortableHorizontalTile;\n"]}

package/lib/esm/widget/components/context/GroupingMappingCustomUIContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { GroupingMappingCustomUI } from "../customUI/GroupingMappingCustomUI";
+export declare const createGroupingMappingCustomUI: (customUIs: GroupingMappingCustomUI[] | undefined) => GroupingMappingCustomUI[];
+export declare const GroupingMappingCustomUIContext: import("react").Context<GroupingMappingCustomUI[]>;
+export declare const useGroupingMappingCustomUI: () => GroupingMappingCustomUI[];
+//# sourceMappingURL=GroupingMappingCustomUIContext.d.ts.map

package/lib/esm/widget/components/context/GroupingMappingCustomUIContext.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { createContext, useContext } from "react";
+export const createGroupingMappingCustomUI = (customUIs) => {
+    if (undefined === customUIs) {
+        return [];
+    }
+    return customUIs;
+};
+export const GroupingMappingCustomUIContext = createContext([]);
+export const useGroupingMappingCustomUI = () => {
+    const context = useContext(GroupingMappingCustomUIContext);
+    if (!context) {
+        throw new Error("useGroupingMappingCustomUI should be used within a GroupingMappingCustomUIContext provider");
+    }
+    return context;
+};
+//# sourceMappingURL=GroupingMappingCustomUIContext.js.map

package/lib/esm/widget/components/context/GroupingMappingCustomUIContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMappingCustomUIContext.js","sourceRoot":"","sources":["../../../../../src/widget/components/context/GroupingMappingCustomUIContext.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,SAAgD,EACrB,EAAE;IAC7B,IAAI,SAAS,KAAK,SAAS,EAAE;QAC3B,OAAO,EAAE,CAAC;KACX;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,aAAa,CAA4B,EAAE,CAAC,CAAC;AAE3F,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;IAC3D,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,4FAA4F,CAC7F,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,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 { createContext, useContext } from \"react\";\nimport type { GroupingMappingCustomUI } from \"../customUI/GroupingMappingCustomUI\";\n\nexport const createGroupingMappingCustomUI = (\n  customUIs: GroupingMappingCustomUI[] | undefined,\n): GroupingMappingCustomUI[] => {\n  if (undefined === customUIs) {\n    return [];\n  }\n  return customUIs;\n};\n\nexport const GroupingMappingCustomUIContext = createContext<GroupingMappingCustomUI[]>([]);\n\nexport const useGroupingMappingCustomUI = () => {\n  const context = useContext(GroupingMappingCustomUIContext);\n  if (!context) {\n    throw new Error(\n      \"useGroupingMappingCustomUI should be used within a GroupingMappingCustomUIContext provider\",\n    );\n  }\n  return context;\n};\n"]}

package/lib/esm/widget/components/customUI/GroupingMappingCustomUI.d.ts

@@ -0,0 +1,91 @@
+import type { ReactElement } from "react";
+export declare enum GroupingMappingCustomUIType {
+    Grouping = 0,
+    Context = 1
+}
+export declare type GroupingMappingCustomUI = GroupingCustomUI | ContextCustomUI;
+/** Custom UI Definitions. */
+export interface IGroupingMappingCustomUI {
+    /**
+     * See GroupingMappingCustomUIType.
+     */
+    type: GroupingMappingCustomUIType;
+    /**
+     * Unique identifier of the custom UI.
+     */
+    name: string;
+    /**
+     * Display label in the widget.
+     */
+    displayLabel: string;
+    /**
+     * Optional icon, will be shown before display label in widget.
+     */
+    icon?: ReactElement;
+}
+/**
+ * Context custom UI type definition.
+ */
+export interface ContextCustomUI extends IGroupingMappingCustomUI {
+    /**
+     * See GroupingMappingCustomUIType.
+     */
+    type: GroupingMappingCustomUIType.Context;
+    /**
+     * User defined component for UI interaction with grouping mapping widget.
+     */
+    uiComponent?: (props: ContextCustomUIProps) => JSX.Element;
+    /**
+     * Callback function for context custom UI menu item click event.
+     */
+    onClick?: (groupId: string, mappingId: string, iModelId: string) => void;
+}
+/**
+ * Group custom UI type definition.
+ */
+export interface GroupingCustomUI extends IGroupingMappingCustomUI {
+    /**
+     * See GroupingMappingCustomUIType.
+     */
+    type: GroupingMappingCustomUIType.Grouping;
+    /**
+     * Custom UI Component to build query interactively. Refer to SearchGroupingCustomUI/ManualGroupingCustomUI.
+     */
+    uiComponent: (props: GroupingCustomUIProps) => JSX.Element;
+}
+/** Custom UI Component props definitions. */
+/**
+ * Context custom UI component arguments definition.
+ */
+export interface ContextCustomUIProps {
+    /**
+     * IModel Id.
+     */
+    iModelId: string;
+    /**
+     * Mapping Id.
+     */
+    mappingId: string;
+    /**
+     * Group Id.
+     */
+    groupId: string;
+}
+/**
+ * Group custom UI component arguments definition.
+ */
+export interface GroupingCustomUIProps {
+    /**
+     * To validate and update current query.
+     */
+    updateQuery: (query: string) => void;
+    /**
+     * To get the query loading status.
+     */
+    isUpdating?: boolean;
+    /**
+     * To reset the viewer.
+     */
+    resetView?: () => Promise<void>;
+}
+//# sourceMappingURL=GroupingMappingCustomUI.d.ts.map

package/lib/esm/widget/components/customUI/GroupingMappingCustomUI.js

@@ -0,0 +1,6 @@
+export var GroupingMappingCustomUIType;
+(function (GroupingMappingCustomUIType) {
+    GroupingMappingCustomUIType[GroupingMappingCustomUIType["Grouping"] = 0] = "Grouping";
+    GroupingMappingCustomUIType[GroupingMappingCustomUIType["Context"] = 1] = "Context";
+})(GroupingMappingCustomUIType || (GroupingMappingCustomUIType = {}));
+//# sourceMappingURL=GroupingMappingCustomUI.js.map

package/lib/esm/widget/components/customUI/GroupingMappingCustomUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMappingCustomUI.js","sourceRoot":"","sources":["../../../../../src/widget/components/customUI/GroupingMappingCustomUI.ts"],"names":[],"mappings":"AAMA,MAAM,CAAN,IAAY,2BAGX;AAHD,WAAY,2BAA2B;IACrC,qFAAQ,CAAA;IACR,mFAAO,CAAA;AACT,CAAC,EAHW,2BAA2B,KAA3B,2BAA2B,QAGtC","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 { ReactElement } from \"react\";\n\nexport enum GroupingMappingCustomUIType {\n  Grouping,\n  Context,\n}\n\nexport type GroupingMappingCustomUI = GroupingCustomUI | ContextCustomUI;\n\n/** Custom UI Definitions. */\n\nexport interface IGroupingMappingCustomUI {\n  /**\n   * See GroupingMappingCustomUIType.\n   */\n  type: GroupingMappingCustomUIType;\n  /**\n   * Unique identifier of the custom UI.\n   */\n  name: string;\n  /**\n   * Display label in the widget.\n   */\n  displayLabel: string;\n  /**\n   * Optional icon, will be shown before display label in widget.\n   */\n  icon?: ReactElement;\n}\n\n/**\n * Context custom UI type definition.\n */\nexport interface ContextCustomUI extends IGroupingMappingCustomUI {\n  /**\n   * See GroupingMappingCustomUIType.\n   */\n  type: GroupingMappingCustomUIType.Context;\n  /**\n   * User defined component for UI interaction with grouping mapping widget.\n   */\n  uiComponent?: (props: ContextCustomUIProps) => JSX.Element;\n  /**\n   * Callback function for context custom UI menu item click event.\n   */\n  onClick?: (groupId: string, mappingId: string, iModelId: string) => void;\n}\n\n/**\n * Group custom UI type definition.\n */\nexport interface GroupingCustomUI extends IGroupingMappingCustomUI {\n  /**\n   * See GroupingMappingCustomUIType.\n   */\n  type: GroupingMappingCustomUIType.Grouping;\n  /**\n   * Custom UI Component to build query interactively. Refer to SearchGroupingCustomUI/ManualGroupingCustomUI.\n   */\n  uiComponent: (props: GroupingCustomUIProps) => JSX.Element;\n}\n\n/** Custom UI Component props definitions. */\n\n/**\n * Context custom UI component arguments definition.\n */\nexport interface ContextCustomUIProps {\n  /**\n   * IModel Id.\n   */\n  iModelId: string;\n  /**\n   * Mapping Id.\n   */\n  mappingId: string;\n  /**\n   * Group Id.\n   */\n  groupId: string;\n}\n\n/**\n * Group custom UI component arguments definition.\n */\nexport interface GroupingCustomUIProps {\n  /**\n   * To validate and update current query.\n   */\n  updateQuery: (query: string) => void;\n  /**\n   * To get the query loading status.\n   */\n  isUpdating?: boolean;\n  /**\n   * To reset the viewer.\n   */\n  resetView?: () => Promise<void>;\n}\n"]}

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import "./ManualGroupingCustomUI.scss";
+import type { GroupingCustomUIProps } from "./GroupingMappingCustomUI";
+declare const ManualGroupingCustomUI: ({ updateQuery, isUpdating, resetView, }: GroupingCustomUIProps) => JSX.Element;
+export default ManualGroupingCustomUI;
+//# sourceMappingURL=ManualGroupingCustomUI.d.ts.map

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { Button, LabeledTextarea, Text } from "@itwin/itwinui-react";
+import { LoadingSpinner } from "../utils";
+import "./ManualGroupingCustomUI.scss";
+const ManualGroupingCustomUI = ({ updateQuery, isUpdating, resetView, }) => {
+    const [manualInput, setManualInput] = React.useState("");
+    return (React.createElement("div", { className: 'gmw-manual-form' },
+        React.createElement(Text, null, "Generate group using an ECSQL query. Please select ECInstanceId and ECClassId columns in the query."),
+        React.createElement(LabeledTextarea, { label: 'Query', required: true, value: manualInput, onChange: (event) => setManualInput(event.target.value), disabled: isUpdating, placeholder: `E.g. "SELECT ECInstanceId, ECClassId FROM BisCore:PhysicalElement"` }),
+        React.createElement("div", { className: 'gmw-manual-actions' },
+            isUpdating && React.createElement(LoadingSpinner, null),
+            React.createElement(Button, { disabled: isUpdating, onClick: () => updateQuery(manualInput) }, "Apply"),
+            React.createElement(Button, { disabled: isUpdating, onClick: async () => {
+                    updateQuery("");
+                    setManualInput("");
+                    if (resetView) {
+                        await resetView();
+                    }
+                } }, "Clear"))));
+};
+export default ManualGroupingCustomUI;
+//# sourceMappingURL=ManualGroupingCustomUI.js.map

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualGroupingCustomUI.js","sourceRoot":"","sources":["../../../../../src/widget/components/customUI/ManualGroupingCustomUI.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,+BAA+B,CAAC;AAGvC,MAAM,sBAAsB,GAAG,CAAC,EAC9B,WAAW,EACX,UAAU,EACV,SAAS,GACa,EAAE,EAAE;IAC1B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzD,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,oBAAC,IAAI,8GAEE;QACP,oBAAC,eAAe,IACd,KAAK,EAAC,OAAO,EACb,QAAQ,QACR,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACvD,QAAQ,EAAE,UAAU,EACpB,WAAW,EAAE,oEAAoE,GACjF;QACF,6BAAK,SAAS,EAAC,oBAAoB;YAChC,UAAU,IAAI,oBAAC,cAAc,OAAG;YACjC,oBAAC,MAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,YAE5D;YACT,oBAAC,MAAM,IACL,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,KAAK,IAAI,EAAE;oBAClB,WAAW,CAAC,EAAE,CAAC,CAAC;oBAChB,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,IAAI,SAAS,EAAE;wBACb,MAAM,SAAS,EAAE,CAAC;qBACnB;gBACH,CAAC,YAGM,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,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 React from \"react\";\nimport { Button, LabeledTextarea, Text } from \"@itwin/itwinui-react\";\nimport { LoadingSpinner } from \"../utils\";\nimport \"./ManualGroupingCustomUI.scss\";\nimport type { GroupingCustomUIProps } from \"./GroupingMappingCustomUI\";\n\nconst ManualGroupingCustomUI = ({\n  updateQuery,\n  isUpdating,\n  resetView,\n}: GroupingCustomUIProps) => {\n  const [manualInput, setManualInput] = React.useState(\"\");\n\n  return (\n    <div className='gmw-manual-form'>\n      <Text>\n        Generate group using an ECSQL query. Please select ECInstanceId and ECClassId columns in the query.\n      </Text>\n      <LabeledTextarea\n        label='Query'\n        required\n        value={manualInput}\n        onChange={(event) => setManualInput(event.target.value)}\n        disabled={isUpdating}\n        placeholder={`E.g. \"SELECT ECInstanceId, ECClassId FROM BisCore:PhysicalElement\"`}\n      />\n      <div className='gmw-manual-actions'>\n        {isUpdating && <LoadingSpinner />}\n        <Button disabled={isUpdating} onClick={() => updateQuery(manualInput)}>\n          Apply\n        </Button>\n        <Button\n          disabled={isUpdating}\n          onClick={async () => {\n            updateQuery(\"\");\n            setManualInput(\"\");\n            if (resetView) {\n              await resetView();\n            }\n          }}\n        >\n          Clear\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default ManualGroupingCustomUI;\n"]}

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* 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-manual-form {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+  margin-top: $iui-baseline;
+  > .gmw-manual-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $iui-s;
+  }
+}

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { GroupingCustomUIProps } from "./GroupingMappingCustomUI";
+import "./SearchGroupingCustomUI.scss";
+declare const SearchGroupingCustomUI: ({ updateQuery, isUpdating, resetView, }: GroupingCustomUIProps) => JSX.Element;
+export default SearchGroupingCustomUI;
+//# sourceMappingURL=SearchGroupingCustomUI.d.ts.map

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.js

@@ -0,0 +1,92 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { Button, LabeledTextarea, Text } from "@itwin/itwinui-react";
+import { LoadingSpinner } from "../utils";
+import "./SearchGroupingCustomUI.scss";
+const SearchGroupingCustomUI = ({ updateQuery, isUpdating, resetView, }) => {
+    const [searchInput, setSearchInput] = React.useState("");
+    const isWrappedInQuotes = (text) => {
+        return text.startsWith(`"`) && text.endsWith(`"`);
+    };
+    const needsAndOperator = (token, index, searchQuery) => isWrappedInQuotes(token) ||
+        (index === 1 && isWrappedInQuotes(searchQuery[0]));
+    const generateSearchQuery = (searchQuery) => {
+        if (searchQuery.length === 0) {
+            updateQuery("");
+            return;
+        }
+        let generatedSearchQuery = `SELECT be.ECInstanceId, be.ECClassId FROM bis.geometricelement3d be `;
+        generatedSearchQuery += `LEFT JOIN bis.SpatialCategory cat ON be.Category.Id = cat.ECInstanceID LEFT JOIN ecdbmeta.ECClassDef ecc ON be.ECClassId = ecc.ECInstanceId `;
+        generatedSearchQuery += `LEFT JOIN bis.PhysicalType pt ON be.TypeDefinition.Id = pt.ECInstanceID`;
+        generatedSearchQuery += ` WHERE `;
+        generatedSearchQuery += `((${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} be.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")}) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} be.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})) OR ((${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} cat.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")}) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} cat.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} ecc.name LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})`;
+        // Physical Types
+        generatedSearchQuery += ` OR ((${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} pt.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")}) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} pt.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})) `;
+        updateQuery(generatedSearchQuery);
+    };
+    return (React.createElement("div", { className: 'gmw-search-form' },
+        React.createElement(Text, null, "Generate a query by keywords. Keywords wrapped in double quotes will be considered a required criteria."),
+        React.createElement(LabeledTextarea, { label: 'Query Keywords', required: true, value: searchInput, onChange: (event) => setSearchInput(event.target.value), disabled: isUpdating, placeholder: `E.g. "red" chair` }),
+        React.createElement("div", { className: 'gmw-search-actions' },
+            isUpdating && React.createElement(LoadingSpinner, null),
+            React.createElement(Button, { disabled: isUpdating, onClick: () => generateSearchQuery(searchInput
+                    ? searchInput
+                        .replace(/(\r\n|\n|\r)/gm, "")
+                        .trim()
+                        .split(" ")
+                    : []) }, "Apply"),
+            React.createElement(Button, { disabled: isUpdating, onClick: async () => {
+                    updateQuery("");
+                    setSearchInput("");
+                    if (resetView) {
+                        await resetView();
+                    }
+                } }, "Clear"))));
+};
+export default SearchGroupingCustomUI;
+//# sourceMappingURL=SearchGroupingCustomUI.js.map

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchGroupingCustomUI.js","sourceRoot":"","sources":["../../../../../src/widget/components/customUI/SearchGroupingCustomUI.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 React from \"react\";\nimport { Button, LabeledTextarea, Text } from \"@itwin/itwinui-react\";\nimport type { GroupingCustomUIProps } from \"./GroupingMappingCustomUI\";\nimport { LoadingSpinner } from \"../utils\";\nimport \"./SearchGroupingCustomUI.scss\";\n\nconst SearchGroupingCustomUI = ({\n  updateQuery,\n  isUpdating,\n  resetView,\n}: GroupingCustomUIProps) => {\n  const [searchInput, setSearchInput] = React.useState(\"\");\n  const isWrappedInQuotes = (text: string) => {\n    return text.startsWith(`\"`) && text.endsWith(`\"`);\n  };\n\n  const needsAndOperator = (\n    token: string,\n    index: number,\n    searchQuery: string[],\n  ) =>\n    isWrappedInQuotes(token) ||\n    (index === 1 && isWrappedInQuotes(searchQuery[0]));\n\n  const generateSearchQuery = (searchQuery: string[]) => {\n    if (searchQuery.length === 0) {\n      updateQuery(\"\");\n      return;\n    }\n\n    let generatedSearchQuery = `SELECT be.ECInstanceId, be.ECClassId FROM bis.geometricelement3d be `;\n    generatedSearchQuery += `LEFT JOIN bis.SpatialCategory cat ON be.Category.Id = cat.ECInstanceID LEFT JOIN ecdbmeta.ECClassDef ecc ON be.ECClassId = ecc.ECInstanceId `;\n    generatedSearchQuery += `LEFT JOIN bis.PhysicalType pt ON be.TypeDefinition.Id = pt.ECInstanceID`;\n    generatedSearchQuery += ` WHERE `;\n    generatedSearchQuery += `((${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } be.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")}) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } be.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})) OR ((${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } cat.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")}) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } cat.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } ecc.name LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})`;\n    // Physical Types\n    generatedSearchQuery += ` OR ((${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } pt.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")}) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } pt.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})) `;\n\n    updateQuery(generatedSearchQuery);\n  };\n\n  return (\n    <div className='gmw-search-form'>\n      <Text>\n        Generate a query by keywords. Keywords wrapped in double quotes will be\n        considered a required criteria.\n      </Text>\n      <LabeledTextarea\n        label='Query Keywords'\n        required\n        value={searchInput}\n        onChange={(event) => setSearchInput(event.target.value)}\n        disabled={isUpdating}\n        placeholder={`E.g. \"red\" chair`}\n      />\n      <div className='gmw-search-actions'>\n        {isUpdating && <LoadingSpinner />}\n        <Button\n          disabled={isUpdating}\n          onClick={() =>\n            generateSearchQuery(\n              searchInput\n                ? searchInput\n                  .replace(/(\\r\\n|\\n|\\r)/gm, \"\")\n                  .trim()\n                  .split(\" \")\n                : [],\n            )\n          }\n        >\n          Apply\n        </Button>\n        <Button\n          disabled={isUpdating}\n          onClick={async () => {\n            updateQuery(\"\");\n            setSearchInput(\"\");\n            if (resetView) {\n              await resetView();\n            }\n          }}\n        >\n          Clear\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default SearchGroupingCustomUI;\n"]}

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* 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-search-form {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+  margin-top: $iui-baseline;
+  > .gmw-search-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $iui-s;
+  }
+}