@itwin/saved-views-react 0.6.0 → 0.7.0

package/README.md

@@ -8,24 +8,22 @@ A collection of utilities and React components for building iTwin applications t
 
 ### [captureSavedViewData](./src/captureSavedViewData.ts)
 
-Captures current viewport state into serializable format. The returned data can later be used to restore viewport's view.
+Capture current viewport state into serializable format. You can use this data later to restore the view.
 
 ```ts
-const { viewData, extensions = [] } = await captureSavedViewData({ viewport });
-extensions.push(myCustomExtension(viewport));
+const { viewData, extensions } = await captureSavedViewData({ viewport });
 console.log({ viewData, extensions }); /*
 {
   viewData: { itwin3dView: {...} },
   extensions: {
     { extensionName: "EmphasizeElements", data: "{...}" },
-    { extensionName: "MyCustomExtension", data: "my_custom_extension_data" },
   }
 } */
 ```
 
 ### [captureSavedViewThumbnail](./src/captureSavedViewThumbnail.ts)
 
-Generates Saved View thumbnail based on what is currently displayed on the viewport.
+Generate Saved View thumbnail based on what is currently displayed on the viewport.
 
 ```ts
 const thumbnail = captureSavedViewThumbnail(viewport);
@@ -34,7 +32,7 @@ console.log(thumbnail); // "data:image/png;base64,iVBORw0KGoAAAANSUhEUg..."
 
 ### [applySavedView](./src/applySavedView.ts)
 
-Updates viewport state to match captured Saved View.
+Update viewport state to match captured Saved View.
 
 ```ts
 // Capture viewport state
@@ -43,18 +41,6 @@ const savedViewData = await captureSavedViewData({ viewport });
 await applySavedView(iModel, viewport, savedViewData);
 ```
 
-### [createViewState](./src/createViewState.ts)
-
-Creates ViewState object out of Saved View data. It provides a lower-level access to view data for advanced use.
-
-```ts
-const viewState = await createViewState(iModel, savedViewData.viewData);
-await applySavedView(iModel, viewport, savedViewData, { viewState });
-
-// The two lines above are equivalent to
-await applySavedView(iModel, viewport, savedViewData);
-```
-
 ### React components
 
 * [SavedViewTile](./src/SavedViewTile/SavedViewTile.tsx)
@@ -99,8 +85,7 @@ export function SavedViewsWidget(props) {
 import { useSavedViews, ITwinSavedViewsClient } from "@itwin/saved-views-react";
 
 const client = new ITwinSavedViewsClient({
-  // auth_token should have access to savedviews:read and savedviews:modify OIDC scopes
-  getAccessToken: async () => "auth_token",
+  getAccessToken: async () => "itwin_platform_auth_token",
 });
 
 export function SavedViewsWidget(props) {

package/lib/SavedView.d.ts

@@ -1,19 +1,27 @@
-import type { ViewData } from "@itwin/saved-views-client";
-import type { ReactNode } from "react";
+import type { ViewITwin3d, ViewITwinDrawing, ViewITwinSheet } from "@itwin/saved-views-client";
 export interface SavedView {
-    id: string;
+    savedViewId: string;
     displayName: string;
-    viewData?: ViewData | undefined;
     groupId?: string | undefined;
     creatorId?: string | undefined;
     tagIds?: string[] | undefined;
     shared?: boolean | undefined;
-    thumbnail?: ReactNode | string | undefined;
+    creationTime?: Date | undefined;
+    lastModified?: Date | undefined;
+}
+export interface SavedViewData {
+    viewData: ViewData;
     extensions?: SavedViewExtension[] | undefined;
-    /** Time the saved view was created as an ISO8601 string, `"YYYY-MM-DDTHH:mm:ss.sssZ"` */
-    creationTime?: string | undefined;
-    /** Time the saved view was last modified as an ISO8601 string, `"YYYY-MM-DDTHH:mm:ss.sssZ"` */
-    lastModified?: string | undefined;
+}
+export type ViewData = ITwin3dViewData | ITwinDrawingdata | ITwinSheetData;
+export interface ITwin3dViewData extends ViewITwin3d {
+    type: "iTwin3d";
+}
+export interface ITwinDrawingdata extends ViewITwinDrawing {
+    type: "iTwinDrawing";
+}
+export interface ITwinSheetData extends ViewITwinSheet {
+    type: "iTwinSheet";
 }
 export interface SavedViewExtension {
     /** Extension identifier. Saved View cannot contain multiple extensions that share the same `extensionName`. */
@@ -36,13 +44,13 @@ export interface SavedViewExtension {
     data: string;
 }
 export interface SavedViewTag {
-    id: string;
+    tagId: string;
     displayName: string;
 }
 export interface SavedViewGroup {
-    id: string;
+    groupId: string;
     displayName: string;
     creatorId?: string | undefined;
     shared?: boolean | undefined;
 }
-export type WriteableSavedViewProperties = Omit<SavedView, "id" | "creatorId" | "creationTime" | "lastModified">;
+export type WriteableSavedViewProperties = Pick<SavedView, "displayName" | "groupId" | "tagIds" | "shared">;

package/lib/SavedViewTile/SavedViewOptions.js

@@ -117,14 +117,14 @@ function MoveToGroup(props) {
 function MoveToGroupSubmenu(props) {
     const { localization: { moveToGroupMenu } } = useSavedViewsContext();
     const handleMoveToGroup = (groupId) => {
-        props.moveToGroup(props.savedView.id, groupId);
+        props.moveToGroup(props.savedView.savedViewId, groupId);
     };
     const { moveToNewGroup } = props;
     const handleCreate = moveToNewGroup && ((groupName) => {
-        moveToNewGroup(props.savedView.id, groupName);
+        moveToNewGroup(props.savedView.savedViewId, groupName);
     });
-    return (_jsx(SearchableSubmenu, { collection: props.groups, placeholder: props.moveToNewGroup ? moveToGroupMenu.findOrCreateGroup : moveToGroupMenu.findGroup, creationLabel: moveToGroupMenu.createGroup, onCreate: handleCreate, children: (searchResults) => searchResults.map((group) => (_jsxs(MenuItem, { className: "svr-searchable-submenu-item", startIcon: group.shared ? _jsx(SvgShare, {}) : _jsx(SvgBlank, {}), onClick: () => handleMoveToGroup(group.id), disabled: group.id === props.savedView.groupId, children: [group.displayName, group.id === props.savedView.groupId &&
-                    _jsx(Text, { style: { marginLeft: "var(--iui-size-xs)" }, as: "span", children: moveToGroupMenu.current })] }, group.id))) }));
+    return (_jsx(SearchableSubmenu, { collection: props.groups, indexer: "groupId", placeholder: props.moveToNewGroup ? moveToGroupMenu.findOrCreateGroup : moveToGroupMenu.findGroup, creationLabel: moveToGroupMenu.createGroup, onCreate: handleCreate, children: (searchResults) => searchResults.map((group) => (_jsxs(MenuItem, { className: "svr-searchable-submenu-item", startIcon: group.shared ? _jsx(SvgShare, {}) : _jsx(SvgBlank, {}), onClick: () => handleMoveToGroup(group.groupId), disabled: group.groupId === props.savedView.groupId, children: [group.displayName, group.groupId === props.savedView.groupId &&
+                    _jsx(Text, { style: { marginLeft: "var(--iui-size-xs)" }, as: "span", children: moveToGroupMenu.current })] }, group.groupId))) }));
 }
 function ManageTags(props) {
     const { savedView } = useSavedViewTileContext();
@@ -135,21 +135,21 @@ function ManageTagsSubmenu(props) {
     const { localization } = useSavedViewsContext();
     const handleTagClick = (tagId) => {
         if (props.savedView.tagIds?.includes(tagId)) {
-            props.removeTag(props.savedView.id, tagId);
+            props.removeTag(props.savedView.savedViewId, tagId);
         }
         else {
-            props.addTag(props.savedView.id, tagId);
+            props.addTag(props.savedView.savedViewId, tagId);
         }
     };
     const { addNewTag } = props;
     const handleCreate = addNewTag && ((tagName) => {
-        addNewTag(props.savedView.id, tagName);
+        addNewTag(props.savedView.savedViewId, tagName);
     });
-    return (_jsx(SearchableSubmenu, { collection: props.tags, placeholder: props.addNewTag ? localization.tagsMenu.findOrCreateTag : localization.tagsMenu.findTag, creationLabel: localization.tagsMenu.createTag, onCreate: handleCreate, children: (searchResults) => searchResults.map((tag) => (_jsx(MenuItem, { className: "svr-searchable-submenu-item", startIcon: props.savedView.tagIds?.includes(tag.id) ? _jsx(SvgCheckmarkSmall, {}) : _jsx(SvgBlank, {}), onClick: () => handleTagClick(tag.id), children: tag.displayName }, tag.id))) }));
+    return (_jsx(SearchableSubmenu, { collection: props.tags, indexer: "tagId", placeholder: props.addNewTag ? localization.tagsMenu.findOrCreateTag : localization.tagsMenu.findTag, creationLabel: localization.tagsMenu.createTag, onCreate: handleCreate, children: (searchResults) => searchResults.map((tag) => (_jsx(MenuItem, { className: "svr-searchable-submenu-item", startIcon: props.savedView.tagIds?.includes(tag.tagId) ? _jsx(SvgCheckmarkSmall, {}) : _jsx(SvgBlank, {}), onClick: () => handleTagClick(tag.tagId), children: tag.displayName }, tag.tagId))) }));
 }
 function SearchableSubmenu(props) {
     const { localization } = useSavedViewsContext();
-    const fuse = useMemo(() => new Fuse(props.collection, { keys: ["displayName"], threshold: 0.5 }), [props.collection]);
+    const fuse = useMemo(() => new Fuse(props.collection, { keys: [props.indexer], threshold: 0.5 }), [props.collection, props.indexer]);
     const [inputValue, setInputValue] = useState("");
     const searchResults = useMemo(() => inputValue.length === 0 ? props.collection : fuse.search(inputValue, { limit: 6 }).map(({ item }) => item), [inputValue, props.collection, fuse]);
     const handleSearchChange = (event) => {
@@ -169,5 +169,5 @@ function SearchableSubmenu(props) {
 function Delete(props) {
     const { savedView } = useSavedViewTileContext();
     const { localization } = useSavedViewsContext();
-    return (_jsx(MenuItem, { className: props.className, startIcon: props.icon, onClick: () => props.deleteSavedView(savedView.id), children: localization.delete }));
+    return (_jsx(MenuItem, { className: props.className, startIcon: props.icon, onClick: () => props.deleteSavedView(savedView.savedViewId), children: localization.delete }));
 }

package/lib/SavedViewTile/SavedViewTile.css

@@ -11,6 +11,13 @@
 
   .svr-tile .svr-tile-thumbnail {
     height: var(--itwin-svr-thumbnail-height, calc(4 * var(--iui-size-xl)));
+
+    > img {
+      object-fit: cover;
+      width: 100%;
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
 
   .svr-tile .svr-tile-name {
@@ -96,4 +103,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TYXZlZFZpZXdUaWxlL1NhdmVkVmlld1RpbGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IlNhdmVkVmlld1RpbGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cbkBsYXllciBpdHdpbnVpO1xuXG5AbGF5ZXIgaXR3aW4tc3ZyIHtcbiAgLnN2ci10aWxlIHtcbiAgICB3aWR0aDogdmFyKC0taXR3aW4tc3ZyLXRpbGUtd2lkdGgsIGNhbGMoOCAqIHZhcigtLWl1aS1zaXplLXhsKSkpO1xuICB9XG5cbiAgLnN2ci10aWxlIC5zdnItdGlsZS10aHVtYm5haWwge1xuICAgIGhlaWdodDogdmFyKC0taXR3aW4tc3ZyLXRodW1ibmFpbC1oZWlnaHQsIGNhbGMoNCAqIHZhcigtLWl1aS1zaXplLXhsKSkpO1xuICB9XG5cbiAgLnN2ci10aWxlIC5zdnItdGlsZS1uYW1lIHtcbiAgICBoZWlnaHQ6IGNhbGModmFyKC0taXVpLXNpemUtbCkgKyAycHgpO1xuICAgIHVzZXItc2VsZWN0OiB1bnNldDtcbiAgICBtaW4td2lkdGg6IDA7XG4gICAgdGV4dC13cmFwOiBub3dyYXA7XG5cbiAgICA+IGRpdiB7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgfVxuICB9XG5cbiAgLnN2ci10aWxlLS1tZXRhZGF0YSB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkOiAxZnIgLyBhdXRvIG1pbm1heCgwLCAxZnIpIGF1dG87XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxuXG4gIC5zdnItdGlsZS0tbWV0YWRhdGEgPiBzdmcge1xuICAgIG1hcmdpbi1yaWdodDogdmFyKC0taXVpLXNpemUteHMpO1xuICB9XG5cbiAgLnN2ci10aWxlLS10YWctY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0taXVpLXNpemUtcyk7XG4gIH1cblxuICAuc3ZyLXRpbGUtLXRhZyB7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgbWluLXdpZHRoOiAwO1xuICB9XG5cbiAgLnN2ci10aWxlLS10YWctb3ZlcmZsb3cge1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoLS1pdWktc2l6ZS1zKTtcbiAgfVxuXG4gIC5zdnItdGlsZS0tbW9yZS1vcHRpb25zIHtcbiAgICB6LWluZGV4OiAyO1xuICAgIGdyaWQtYXJlYTogMSAvIDEgLyAtMSAvIC0xO1xuICAgIHBsYWNlLXNlbGY6IGVuZDtcbiAgICBtYXJnaW46IDA7XG4gICAgbWFyZ2luLWlubGluZS1lbmQ6IGNhbGMoLTEqdmFyKC0taXVpLXNpemUtMnhzKSk7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIH1cblxuICAuc3ZyLXRpbGU6bm90KDpob3ZlciwgOmZvY3VzLXdpdGhpbikgLnN2ci10aWxlLS1tb3JlLW9wdGlvbnM6d2hlcmUoOm5vdCguc3ZyLXZpc2libGUpKSB7XG4gICAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICB9XG5cbiAgLnN2ci10aWxlLS1pY29uLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tdG9wOiBjYWxjKDAuNSAqIHZhcigtLWl1aS1zaXplLXMpKTtcbiAgICBtYXJnaW4taW5saW5lOiB2YXIoLS1pdWktc2l6ZS14cyk7XG4gICAgZ2FwOiB2YXIoLS1pdWktc2l6ZS0yeHMpO1xuICAgIHotaW5kZXg6IDE7XG4gIH1cblxuICAuc3ZyLXRpbGUtLWljb24ge1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBiYWNrZ3JvdW5kOiByZ2IoMCwgMCwgMCwgdmFyKC0taXVpLW9wYWNpdHktMykpO1xuICAgIG1pbi13aWR0aDogdmFyKC0taXVpLWNvbXBvbmVudC1oZWlnaHQtc21hbGwpO1xuICAgIG1pbi1oZWlnaHQ6IHZhcigtLWl1aS1jb21wb25lbnQtaGVpZ2h0LXNtYWxsKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBsYWNlLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWl1aS1zaXplLTJ4cyk7XG4gICAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gIH1cblxuICAuc3ZyLXRpbGUtLWljb24gc3ZnIHtcbiAgICBmaWxsOiB2YXIoLS1pdWktY29sb3Itd2hpdGUpO1xuICB9XG5cbiAgLnN2ci10aWxlLS1lZGl0YWJsZS10aXRsZSA+IHNwYW4ge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLWl1aS1zaXplLXMpO1xuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TYXZlZFZpZXdUaWxlL1NhdmVkVmlld1RpbGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IlNhdmVkVmlld1RpbGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cbkBsYXllciBpdHdpbnVpO1xuXG5AbGF5ZXIgaXR3aW4tc3ZyIHtcbiAgLnN2ci10aWxlIHtcbiAgICB3aWR0aDogdmFyKC0taXR3aW4tc3ZyLXRpbGUtd2lkdGgsIGNhbGMoOCAqIHZhcigtLWl1aS1zaXplLXhsKSkpO1xuICB9XG5cbiAgLnN2ci10aWxlIC5zdnItdGlsZS10aHVtYm5haWwge1xuICAgIGhlaWdodDogdmFyKC0taXR3aW4tc3ZyLXRodW1ibmFpbC1oZWlnaHQsIGNhbGMoNCAqIHZhcigtLWl1aS1zaXplLXhsKSkpO1xuXG4gICAgPiBpbWcge1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICAgIG1heC1oZWlnaHQ6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLnN2ci10aWxlIC5zdnItdGlsZS1uYW1lIHtcbiAgICBoZWlnaHQ6IGNhbGModmFyKC0taXVpLXNpemUtbCkgKyAycHgpO1xuICAgIHVzZXItc2VsZWN0OiB1bnNldDtcbiAgICBtaW4td2lkdGg6IDA7XG4gICAgdGV4dC13cmFwOiBub3dyYXA7XG5cbiAgICA+IGRpdiB7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgfVxuICB9XG5cbiAgLnN2ci10aWxlLS1tZXRhZGF0YSB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkOiAxZnIgLyBhdXRvIG1pbm1heCgwLCAxZnIpIGF1dG87XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxuXG4gIC5zdnItdGlsZS0tbWV0YWRhdGEgPiBzdmcge1xuICAgIG1hcmdpbi1yaWdodDogdmFyKC0taXVpLXNpemUteHMpO1xuICB9XG5cbiAgLnN2ci10aWxlLS10YWctY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0taXVpLXNpemUtcyk7XG4gIH1cblxuICAuc3ZyLXRpbGUtLXRhZyB7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgbWluLXdpZHRoOiAwO1xuICB9XG5cbiAgLnN2ci10aWxlLS10YWctb3ZlcmZsb3cge1xuICAgIG1hcmdpbi1sZWZ0OiB2YXIoLS1pdWktc2l6ZS1zKTtcbiAgfVxuXG4gIC5zdnItdGlsZS0tbW9yZS1vcHRpb25zIHtcbiAgICB6LWluZGV4OiAyO1xuICAgIGdyaWQtYXJlYTogMSAvIDEgLyAtMSAvIC0xO1xuICAgIHBsYWNlLXNlbGY6IGVuZDtcbiAgICBtYXJnaW46IDA7XG4gICAgbWFyZ2luLWlubGluZS1lbmQ6IGNhbGMoLTEqdmFyKC0taXVpLXNpemUtMnhzKSk7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIH1cblxuICAuc3ZyLXRpbGU6bm90KDpob3ZlciwgOmZvY3VzLXdpdGhpbikgLnN2ci10aWxlLS1tb3JlLW9wdGlvbnM6d2hlcmUoOm5vdCguc3ZyLXZpc2libGUpKSB7XG4gICAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICB9XG5cbiAgLnN2ci10aWxlLS1pY29uLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tdG9wOiBjYWxjKDAuNSAqIHZhcigtLWl1aS1zaXplLXMpKTtcbiAgICBtYXJnaW4taW5saW5lOiB2YXIoLS1pdWktc2l6ZS14cyk7XG4gICAgZ2FwOiB2YXIoLS1pdWktc2l6ZS0yeHMpO1xuICAgIHotaW5kZXg6IDE7XG4gIH1cblxuICAuc3ZyLXRpbGUtLWljb24ge1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBiYWNrZ3JvdW5kOiByZ2IoMCwgMCwgMCwgdmFyKC0taXVpLW9wYWNpdHktMykpO1xuICAgIG1pbi13aWR0aDogdmFyKC0taXVpLWNvbXBvbmVudC1oZWlnaHQtc21hbGwpO1xuICAgIG1pbi1oZWlnaHQ6IHZhcigtLWl1aS1jb21wb25lbnQtaGVpZ2h0LXNtYWxsKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBsYWNlLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWl1aS1zaXplLTJ4cyk7XG4gICAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gIH1cblxuICAuc3ZyLXRpbGUtLWljb24gc3ZnIHtcbiAgICBmaWxsOiB2YXIoLS1pdWktY29sb3Itd2hpdGUpO1xuICB9XG5cbiAgLnN2ci10aWxlLS1lZGl0YWJsZS10aXRsZSA+IHNwYW4ge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLWl1aS1zaXplLXMpO1xuICB9XG59XG4iXX0= */

package/lib/SavedViewTile/SavedViewTile.d.ts

@@ -4,6 +4,8 @@ import "./SavedViewTile.css";
 interface SavedViewTileProps {
     /** A Saved View that is being represented by the tile. */
     savedView: SavedView;
+    /** Image to be displayed on the tile. */
+    thumbnail?: ReactNode | undefined;
     /** A collection of available Saved View tags. Used for displaying tags on the tile. */
     tags?: Map<string, SavedViewTag> | undefined;
     /** When `true`, the tile becomes non-interactive and tile editing controls are shown. */
@@ -17,13 +19,12 @@ interface SavedViewTileProps {
     /**
      * Invoked when user submits a new name for the Saved View.
      * @param savedViewId Id of the associated Saved View
-     * @param newName User-submitted string for the Saved View title. This value is `undefined` when user cancels rename
-     *                operaton.
+     * @param newName User-submitted string for the Saved View title
      *
      * @example
      * <SavedViewTile savedView={savedView} onRename={handleRename} editable />
      */
-    onRename?: ((savedViewId: string, newName: string | undefined) => void) | undefined;
+    onRename?: ((savedViewId: string, newName: string) => void) | undefined;
     /**
      * Click handler meant for triggering the render of iModel onto the screen with the saved view applied
      */

package/lib/SavedViewTile/SavedViewTile.js

@@ -34,7 +34,7 @@ export function SavedViewTile(props) {
     }, [props.savedView.tagIds, props.tags]);
     const [numShownTags, setNumShownTags] = useState(savedViewTags.length);
     const metadataRef = useRef(null);
-    const metadata = (_jsxs("div", { className: "svr-tile--metadata", children: [savedViewTags.length > 0 && _jsx(SvgTag, {}), _jsx("div", { ref: metadataRef, className: "svr-tile--tag-container", children: savedViewTags.slice(0, numShownTags).map((tag, i) => (_jsx("div", { className: "svr-tile--tag", style: { flexShrink: i === numShownTags - 1 ? "unset" : 0 }, children: tag.displayName }, tag.id))) }), numShownTags < savedViewTags.length &&
+    const metadata = (_jsxs("div", { className: "svr-tile--metadata", children: [savedViewTags.length > 0 && _jsx(SvgTag, {}), _jsx("div", { ref: metadataRef, className: "svr-tile--tag-container", children: savedViewTags.slice(0, numShownTags).map((tag, i) => (_jsx("div", { className: "svr-tile--tag", style: { flexShrink: i === numShownTags - 1 ? "unset" : 0 }, children: tag.displayName }, tag.tagId))) }), numShownTags < savedViewTags.length &&
                 _jsx(Text, { className: "svr-tile--tag-overflow", variant: "small", children: `+${savedViewTags.length - numShownTags} ${localization.tile.moreTags}` })] }));
     useLayoutEffect(() => { setNumShownTags(savedViewTags.length); }, [savedViewTags]);
     useLayoutEffect(() => {
@@ -57,17 +57,13 @@ export function SavedViewTile(props) {
     }, [numShownTags]);
     const rightIcons = props.rightIcons ?? (props.savedView.shared ? [_jsx(SvgShare, {}, "share")] : []);
     const savedViewTileContext = useMemo(() => ({ savedView: props.savedView, setEditingName }), [props.savedView]);
-    return (_jsx(SavedViewTileContextProvider, { value: savedViewTileContext, children: _jsxs(Tile.Wrapper, { className: `svr-tile ${props.className || ""}`, onClick: () => props.onClick?.(props.savedView.id), children: [!props.editable && _jsx(Tile.Action, {}), _jsx(Tile.Name, { className: "svr-tile-name", children: _jsx(EditableTileName, { displayName: props.savedView.displayName, editing: editingName, actions: {
+    return (_jsx(SavedViewTileContextProvider, { value: savedViewTileContext, children: _jsxs(Tile.Wrapper, { className: `svr-tile ${props.className || ""}`, onClick: () => props.onClick?.(props.savedView.savedViewId), children: [!props.editable && _jsx(Tile.Action, {}), _jsx(Tile.Name, { className: "svr-tile-name", children: _jsx(EditableTileName, { displayName: props.savedView.displayName, editing: editingName, actions: {
                             onStartEditing: () => setEditingName(true),
                             onEndEditing: (newName, commit) => {
                                 setEditingName(false);
-                                props.onRename?.(props.savedView.id, commit ? newName : undefined);
+                                commit && props.onRename?.(props.savedView.savedViewId, newName);
                             },
-                        }, editable: props.editable || editingName }) }), _jsxs(Tile.ThumbnailArea, { className: "svr-tile-thumbnail", children: [typeof props.savedView.thumbnail === "string"
-                            ? _jsx(Tile.ThumbnailPicture, { url: props.savedView.thumbnail })
-                            : props.savedView.thumbnail
-                                ? props.savedView.thumbnail
-                                : _jsx(Tile.ThumbnailPicture, { children: _jsx(SvgSavedView, {}) }), _jsx(TileIconContainer, { style: { placeSelf: "start" }, icons: props.leftIcons }), _jsx(TileIconContainer, { style: { placeSelf: "start end" }, icons: rightIcons })] }), _jsxs(Tile.ContentArea, { children: [_jsx(Tile.Metadata, { children: metadata }), (typeof props.options === "function" || (props.options && props.options.length > 0)) &&
+                        }, editable: props.editable || editingName }) }), _jsxs(Tile.ThumbnailArea, { className: "svr-tile-thumbnail", children: [props.thumbnail ?? _jsx(Tile.ThumbnailPicture, { children: _jsx(SvgSavedView, {}) }), _jsx(TileIconContainer, { style: { placeSelf: "start" }, icons: props.leftIcons }), _jsx(TileIconContainer, { style: { placeSelf: "start end" }, icons: rightIcons })] }), _jsxs(Tile.ContentArea, { children: [_jsx(Tile.Metadata, { children: metadata }), (typeof props.options === "function" || (props.options && props.options.length > 0)) &&
                             _jsx("div", { className: "svr-tile--more-options", onClick: (ev) => ev.stopPropagation(), children: _jsx(LayeredDropdownMenu, { menuItems: props.options, children: _jsx(IconButton, { size: "small", styleType: "borderless", children: _jsx(SvgMore, {}) }) }) })] })] }) }));
 }
 function isOverflowing(element) {

package/lib/SavedViewTile/SavedViewTileContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SavedView } from "../SavedView.js";
 /** Context that's accessable within `<SavedViewTile />` component. */
 export interface SavedViewTileContext {

package/lib/SavedViewTile/SavedViewTileContext.js

@@ -14,7 +14,7 @@ export const SavedViewTileContextProvider = savedViewTileContext.Provider;
 export function useSavedViewTileContext() {
     const contextValue = useContext(savedViewTileContext);
     return contextValue ?? {
-        savedView: { id: "SavedViewTileContext_NoContext", displayName: "" },
+        savedView: { savedViewId: "SavedViewTileContext_NoContext", displayName: "" },
         setEditingName: () => { },
     };
 }

package/lib/SavedViewsClient/ITwinSavedViewsClient.d.ts

@@ -1,31 +1,29 @@
-import type { SavedView, SavedViewGroup, SavedViewTag } from "../SavedView.js";
-import type { CreateGroupParams, CreateSavedViewParams, CreateTagParams, DeleteGroupParams, DeleteSavedViewParams, DeleteTagParams, GetAllGroupsParams, GetAllSavedViewsParams, GetAllTagsParams, GetSavedViewParams, GetThumbnailUrlParams, SavedViewsClient, UpdateGroupParams, UpdateSavedViewParams, UpdateTagParams, UploadThumbnailParams } from "./SavedViewsClient.js";
+import type { SavedView, SavedViewData, SavedViewGroup, SavedViewTag } from "../SavedView.js";
+import type { CreateGroupArgs, CreateSavedViewArgs, CreateTagArgs, DeleteGroupArgs, DeleteSavedViewArgs, DeleteTagArgs, GetGroupsArgs, GetSavedViewByIdArgs, GetSavedViewDataByIdArgs, GetSavedViewsArgs, GetTagsArgs, GetThumbnailUrlArgs, SavedViewsClient, UpdateGroupArgs, UpdateSavedViewArgs, UpdateTagArgs, UploadThumbnailArgs } from "./SavedViewsClient.js";
 interface ITwinSavedViewsClientParams {
-    /**
-     * Authorization token that grants access to iTwin Saved Views API. The token should be valid for `savedviews:read`
-     * and `savedviews:modify` OIDC scopes.
-    */
+    /** Authorization token that grants access to iTwin Platform API. */
     getAccessToken: () => Promise<string>;
-    /** @default "https://api.bentley.com/savedviews"  */
+    /** @default "https://api.bentley.com/savedviews" */
     baseUrl?: string | undefined;
 }
 export declare class ITwinSavedViewsClient implements SavedViewsClient {
     #private;
     constructor(args: ITwinSavedViewsClientParams);
-    getAllSavedViews(args: GetAllSavedViewsParams): AsyncIterableIterator<SavedView[]>;
-    getAllGroups(args: GetAllGroupsParams): Promise<SavedViewGroup[]>;
-    getAllTags(args: GetAllTagsParams): Promise<SavedViewTag[]>;
-    getThumbnailUrl(args: GetThumbnailUrlParams): Promise<string | undefined>;
-    uploadThumbnail(args: UploadThumbnailParams): Promise<void>;
-    getSavedView(args: GetSavedViewParams): Promise<SavedView>;
-    createSavedView(args: CreateSavedViewParams): Promise<SavedView>;
-    updateSavedView(args: UpdateSavedViewParams): Promise<SavedView>;
-    deleteSavedView(args: DeleteSavedViewParams): Promise<void>;
-    createGroup(args: CreateGroupParams): Promise<SavedViewGroup>;
-    updateGroup(args: UpdateGroupParams): Promise<SavedViewGroup>;
-    deleteGroup(args: DeleteGroupParams): Promise<void>;
-    createTag(args: CreateTagParams): Promise<SavedViewTag>;
-    updateTag(args: UpdateTagParams): Promise<SavedViewTag>;
-    deleteTag(args: DeleteTagParams): Promise<void>;
+    getSavedViews(args: GetSavedViewsArgs): AsyncIterableIterator<SavedView[]>;
+    getGroups(args: GetGroupsArgs): Promise<SavedViewGroup[]>;
+    getTags(args: GetTagsArgs): Promise<SavedViewTag[]>;
+    getThumbnailUrl(args: GetThumbnailUrlArgs): Promise<string | undefined>;
+    uploadThumbnail(args: UploadThumbnailArgs): Promise<void>;
+    getSavedViewById(args: GetSavedViewByIdArgs): Promise<SavedView>;
+    getSavedViewDataById(args: GetSavedViewDataByIdArgs): Promise<SavedViewData>;
+    createSavedView(args: CreateSavedViewArgs): Promise<SavedView>;
+    updateSavedView(args: UpdateSavedViewArgs): Promise<SavedView>;
+    deleteSavedView(args: DeleteSavedViewArgs): Promise<void>;
+    createGroup(args: CreateGroupArgs): Promise<SavedViewGroup>;
+    updateGroup(args: UpdateGroupArgs): Promise<SavedViewGroup>;
+    deleteGroup(args: DeleteGroupArgs): Promise<void>;
+    createTag(args: CreateTagArgs): Promise<SavedViewTag>;
+    updateTag(args: UpdateTagArgs): Promise<SavedViewTag>;
+    deleteTag(args: DeleteTagArgs): Promise<void>;
 }
 export {};

package/lib/SavedViewsClient/ITwinSavedViewsClient.js

@@ -2,23 +2,24 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { ITwinSavedViewsClient as Client, } from "@itwin/saved-views-client";
+import { ITwinSavedViewsClient as Client, isViewDataITwin3d, isViewDataITwinDrawing, } from "@itwin/saved-views-client";
 export class ITwinSavedViewsClient {
     #client;
     constructor(args) {
         this.#client = new Client(args);
     }
-    async *getAllSavedViews(args) {
-        const iterable = this.#client.getAllSavedViewsRepresentation({
+    async *getSavedViews(args) {
+        const iterable = this.#client.getAllSavedViewsMinimal({
             iTwinId: args.iTwinId,
             iModelId: args.iModelId,
+            groupId: args.groupId,
             signal: args.signal,
         });
         for await (const page of iterable) {
             yield page.savedViews.map(savedViewResponseToSavedView);
         }
     }
-    async getAllGroups(args) {
+    async getGroups(args) {
         const response = await this.#client.getAllGroups({
             iTwinId: args.iTwinId,
             iModelId: args.iModelId,
@@ -26,7 +27,7 @@ export class ITwinSavedViewsClient {
         });
         return response.groups.map(groupResponseToSavedViewGroup);
     }
-    async getAllTags(args) {
+    async getTags(args) {
         const response = await this.#client.getAllTags({
             iTwinId: args.iTwinId,
             iModelId: args.iModelId,
@@ -49,42 +50,55 @@ export class ITwinSavedViewsClient {
             signal: args.signal,
         });
     }
-    async getSavedView(args) {
-        const response = await this.#client.getSavedViewRepresentation({
+    async getSavedViewById(args) {
+        const response = await this.#client.getSavedViewMinimal({
             savedViewId: args.savedViewId,
             signal: args.signal,
         });
         return savedViewResponseToSavedView(response.savedView);
     }
+    async getSavedViewDataById(args) {
+        const response = await this.#client.getSavedViewRepresentation({
+            savedViewId: args.savedViewId, signal: args.signal,
+        });
+        return {
+            viewData: getViewData(response.savedView),
+            extensions: response.savedView.extensions,
+        };
+    }
     async createSavedView(args) {
+        const savedViewData = toApiSavedViewData(args.savedViewData.viewData);
         const { savedView } = await this.#client.createSavedView({
             iTwinId: args.iTwinId,
             iModelId: args.iModelId,
-            displayName: args.savedView.displayName,
-            tagIds: args.savedView.tagIds,
-            groupId: args.savedView.groupId,
-            shared: args.savedView.shared,
-            savedViewData: args.savedView.viewData,
-            extensions: args.savedView.extensions,
+            displayName: args.displayName,
+            groupId: args.groupId,
+            tagIds: args.tagIds,
+            shared: args.shared,
+            savedViewData,
+            extensions: args.savedViewData.extensions,
             signal: args.signal,
         });
         return savedViewResponseToSavedView(savedView);
     }
     async updateSavedView(args) {
+        const savedViewData = args.savedViewData && toApiSavedViewData(args.savedViewData.viewData);
         const { savedView } = await this.#client.updateSavedView({
-            savedViewId: args.savedView.id,
-            displayName: args.savedView.displayName,
-            tagIds: args.savedView.tagIds,
-            groupId: args.savedView.groupId,
-            shared: args.savedView.shared,
-            savedViewData: args.savedView.viewData,
+            savedViewId: args.savedViewId,
+            displayName: args.displayName,
+            tagIds: args.tagIds,
+            groupId: args.groupId,
+            shared: args.shared,
+            savedViewData,
             signal: args.signal,
         });
-        await Promise.all((args.savedView.extensions ?? []).map(({ extensionName, data }) => this.#client.createExtension({
-            savedViewId: args.savedView.id,
-            extensionName,
-            data,
-        })));
+        await Promise.all((args.savedViewData?.extensions ?? []).map(({ extensionName, data }) => {
+            this.#client.createExtension({
+                savedViewId: args.savedViewId,
+                extensionName,
+                data,
+            });
+        }));
         return savedViewResponseToSavedView(savedView);
     }
     async deleteSavedView(args) {
@@ -94,24 +108,24 @@ export class ITwinSavedViewsClient {
         const { group } = await this.#client.createGroup({
             iTwinId: args.iTwinId,
             iModelId: args.iModelId,
-            displayName: args.group.displayName,
+            displayName: args.displayName,
             signal: args.signal,
         });
         return groupResponseToSavedViewGroup(group);
     }
     async updateGroup(args) {
         const { group } = await this.#client.updateGroup({
-            groupId: args.group.id,
-            displayName: args.group.displayName,
-            shared: args.group.shared,
+            groupId: args.groupId,
+            displayName: args.displayName,
+            shared: args.shared,
             signal: args.signal,
         });
         return groupResponseToSavedViewGroup(group);
     }
     async deleteGroup(args) {
         const savedViewPages = this.#client.getAllSavedViewsMinimal({ groupId: args.groupId, signal: args.signal });
-        for await (const savedViews of savedViewPages) {
-            await Promise.all(savedViews.savedViews.map(({ id }) => this.#client.deleteSavedView({ savedViewId: id, signal: args.signal })));
+        for await (const { savedViews } of savedViewPages) {
+            await Promise.all(savedViews.map(({ id }) => this.#client.deleteSavedView({ savedViewId: id, signal: args.signal })));
         }
         await this.#client.deleteGroup({ groupId: args.groupId, signal: args.signal });
     }
@@ -126,8 +140,8 @@ export class ITwinSavedViewsClient {
     }
     async updateTag(args) {
         const { tag } = await this.#client.updateTag({
-            tagId: args.tag.id,
-            displayName: args.tag.displayName,
+            tagId: args.tagId,
+            displayName: args.displayName,
             signal: args.signal,
         });
         return tagResponseToSavedViewTag(tag);
@@ -138,22 +152,19 @@ export class ITwinSavedViewsClient {
 }
 function savedViewResponseToSavedView(response) {
     return {
-        id: response.id,
+        savedViewId: response.id,
         displayName: response.displayName,
-        viewData: response.savedViewData,
         tagIds: response.tags?.map((tag) => tag.id),
         groupId: response._links.group?.href.split("/").at(-1),
         creatorId: response._links.creator?.href.split("/").at(-1),
         shared: response.shared,
-        thumbnail: undefined,
-        extensions: response.extensions,
-        creationTime: response.creationTime,
-        lastModified: response.lastModified,
+        creationTime: new Date(response.creationTime),
+        lastModified: new Date(response.lastModified),
     };
 }
 function groupResponseToSavedViewGroup(response) {
     return {
-        id: response.id,
+        groupId: response.id,
         displayName: response.displayName,
         creatorId: response._links.creator?.href.split("/").at(-1),
         shared: response.shared,
@@ -161,7 +172,37 @@ function groupResponseToSavedViewGroup(response) {
 }
 function tagResponseToSavedViewTag(response) {
     return {
-        id: response.id,
+        tagId: response.id,
         displayName: response.displayName,
     };
 }
+function getViewData(savedView) {
+    if (isViewDataITwin3d(savedView.savedViewData)) {
+        return {
+            type: "iTwin3d",
+            ...savedView.savedViewData.itwin3dView,
+        };
+    }
+    if (isViewDataITwinDrawing(savedView.savedViewData)) {
+        return {
+            type: "iTwinDrawing",
+            ...savedView.savedViewData.itwinDrawingView,
+        };
+    }
+    return {
+        type: "iTwinSheet",
+        ...savedView.savedViewData.itwinSheetView,
+    };
+}
+function toApiSavedViewData(viewData) {
+    if (viewData.type === "iTwin3d") {
+        const { type, ...rest } = viewData;
+        return { itwin3dView: rest };
+    }
+    if (viewData.type === "iTwinDrawing") {
+        const { type, ...rest } = viewData;
+        return { itwinDrawingView: rest };
+    }
+    const { type, ...rest } = viewData;
+    return { itwinSheetView: rest };
+}