npm - @itwin/grouping-mapping-widget - Versions diffs - 0.7.0 → 0.8.0 - Mend

@itwin/grouping-mapping-widget 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/lib/esm/widget/components/HorizontalTile.d.ts CHANGED Viewed

@@ -1,13 +1,15 @@
 import type { ReactNode } from "react";
 import "./HorizontalTile.scss";
-interface HorizontalTileProps {
+export interface HorizontalTileProps {
     title: string;
     actionGroup: ReactNode;
     subText?: string;
+    onClick?: () => void;
     onClickTitle?: () => void;
     titleTooltip?: string;
     subtextToolTip?: string;
+    selected?: boolean;
+    dragHandle?: ReactNode;
 }
-export declare const HorizontalTile: ({ title, subText, onClickTitle, titleTooltip, subtextToolTip, actionGroup }: HorizontalTileProps) => JSX.Element;
-export {};
+export declare const HorizontalTile: (props: HorizontalTileProps) => JSX.Element;
 //# sourceMappingURL=HorizontalTile.d.ts.map

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;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 CHANGED Viewed

@@ -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/SelectProject.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/grouping-mapping-widget",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "An iTwin.js 3D Viewer Widget that interfaces with the iTwin Reporting Platform.",
   "keywords": [
     "Bentley",
@@ -36,13 +36,18 @@
     }
   },
   "dependencies": {
-    "@itwin/imodel-browser-react": "^0.12.1",
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/sortable": "7.0.1",
+    "@dnd-kit/utilities": "3.2.0",
+    "@itwin/imodel-browser-react": "^0.12.3",
     "@itwin/insights-client": "^0.3.0",
-    "@itwin/itwinui-icons-react": "^1.7.0",
+    "@itwin/itwinui-icons-react": "^1.15.1",
     "@itwin/itwinui-react": "~1.42.0",
     "classnames": "^2.3.1",
     "cross-fetch": "^3.1.4",
+    "fast-equals": "^4.0.2",
     "immer": "^9.0.7",
+    "react-split": "2.0.14",
     "simple-react-validator": "^1.6.1"
   },
   "devDependencies": {