@itwin/saved-views-react 0.5.0 → 0.7.0

package/README.md

@@ -2,10 +2,45 @@
 
 ## About
 
-A collection of React components for building applications that deal with [Saved Views](https://developer.bentley.com/apis/savedviews/overview/).
+A collection of utilities and React components for building iTwin applications that deal with [Saved Views](https://developer.bentley.com/apis/savedviews/overview/).
 
 ## Documentation
 
+### [captureSavedViewData](./src/captureSavedViewData.ts)
+
+Capture current viewport state into serializable format. You can use this data later to restore the view.
+
+```ts
+const { viewData, extensions } = await captureSavedViewData({ viewport });
+console.log({ viewData, extensions }); /*
+{
+  viewData: { itwin3dView: {...} },
+  extensions: {
+    { extensionName: "EmphasizeElements", data: "{...}" },
+  }
+} */
+```
+
+### [captureSavedViewThumbnail](./src/captureSavedViewThumbnail.ts)
+
+Generate Saved View thumbnail based on what is currently displayed on the viewport.
+
+```ts
+const thumbnail = captureSavedViewThumbnail(viewport);
+console.log(thumbnail); // "data:image/png;base64,iVBORw0KGoAAAANSUhEUg..."
+```
+
+### [applySavedView](./src/applySavedView.ts)
+
+Update viewport state to match captured Saved View.
+
+```ts
+// Capture viewport state
+const savedViewData = await captureSavedViewData({ viewport });
+// Restore viewport state
+await applySavedView(iModel, viewport, savedViewData);
+```
+
 ### React components
 
 * [SavedViewTile](./src/SavedViewTile/SavedViewTile.tsx)
@@ -42,7 +77,7 @@ export function SavedViewsWidget(props) {
 }
 ```
 
-### useSavedViews
+### [useSavedViews](./src/useSavedViews.tsx)
 
 [useSavedViews](./src/useSavedViews.tsx) React hook provides basic functionality to jump-start your Saved Views widget. It accepts [`ITwinSavedViewsClient`](./src/SavedViewsClient/ITwinSavedViewsClient.ts) which is used to pull Saved View data and synchronize it back to the [Saved Views service](https://developer.bentley.com/apis/savedviews/overview/).
 
@@ -50,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,26 +1,56 @@
-import type { ReactNode } from "react";
+import type { ViewITwin3d, ViewITwinDrawing, ViewITwinSheet } from "@itwin/saved-views-client";
 export interface SavedView {
-    id: string;
+    savedViewId: string;
     displayName: string;
     groupId?: string | undefined;
     creatorId?: string | undefined;
     tagIds?: string[] | undefined;
     shared?: boolean | undefined;
-    thumbnail?: ReactNode | string | undefined;
-    /** `extensionName` and `data` pairs. */
-    extensions?: Map<string, string> | undefined;
-    /** Time the saved view was created as an ISO8601 string, `"YYYY-MM-DDTHH:mm:ss.sssZ"` */
-    creationTime?: string;
-    /** Time the saved view was last modified as an ISO8601 string, `"YYYY-MM-DDTHH:mm:ss.sssZ"` */
-    lastModified?: string;
+    creationTime?: Date | undefined;
+    lastModified?: Date | undefined;
+}
+export interface SavedViewData {
+    viewData: ViewData;
+    extensions?: SavedViewExtension[] | 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`. */
+    extensionName: string;
+    /**
+     * Serialized extension data.
+     *
+     * @example
+     * const extension = {
+     *   // Unique identifier makes extension data format portable between applications because it avoids collision
+     *   // with different implementations
+     *   extensionName: "CustomHighlight_$5be36494-ae03-4400-bb80-24ffd9db2a87",
+     *   data: JSON.stringify({
+     *     description: "For illustrative purposes only. We do not provide implementation for this extensionName."
+     *     highlightColor: "#f05599",
+     *     models: ["0x20000000006"],
+     *   }),
+     * };
+     */
+    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 = 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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { SvgEdit, SvgImageFrame, SvgMore, SvgShare, SvgTag } from "@itwin/itwinui-icons-react";
+import { SvgEdit, SvgMore, SvgSavedView, SvgShare, SvgTag } from "@itwin/itwinui-icons-react";
 import { Button, IconButton, Input, Text, Tile } from "@itwin/itwinui-react";
 import { useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { LayeredDropdownMenu } from "../LayeredDropdownMenu/LayeredDropdownMenu.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(SvgImageFrame, {}) }), _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 SavedViewRepresentation } from "@itwin/saved-views-client";
-import type { SavedView, SavedViewGroup, SavedViewTag } from "../SavedView.js";
-import type { CreateGroupParams, CreateSavedViewParams, CreateTagParams, DeleteGroupParams, DeleteSavedViewParams, DeleteTagParams, GetSavedViewInfoParams, GetSingularSavedViewParams, GetThumbnailUrlParams, SavedViewInfo, 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 {
-    /** @default "https://api.bentley.com/savedviews"  */
+    /** Authorization token that grants access to iTwin Platform API. */
     getAccessToken: () => Promise<string>;
-    /**
-     * Authorization token that grants access to iTwin Saved Views API. The token should be valid for `savedviews:read`
-     * and `savedviews:modify` OIDC scopes.
-     */
+    /** @default "https://api.bentley.com/savedviews" */
     baseUrl?: string | undefined;
 }
-/**  */
 export declare class ITwinSavedViewsClient implements SavedViewsClient {
-    private client;
+    #private;
     constructor(args: ITwinSavedViewsClientParams);
-    getSavedViewInfo(args: GetSavedViewInfoParams): Promise<SavedViewInfo>;
-    getSingularSavedView(args: GetSingularSavedViewParams): Promise<SavedViewRepresentation>;
-    getThumbnailUrl(args: GetThumbnailUrlParams): Promise<string | undefined>;
-    uploadThumbnail(args: UploadThumbnailParams): Promise<void>;
-    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,34 +2,41 @@
 * 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;
+    #client;
     constructor(args) {
-        this.client = new Client(args);
-    }
-    async getSavedViewInfo(args) {
-        const [{ savedViews }, { groups }, { tags }] = await Promise.all([
-            this.client.getAllSavedViewsMinimal(args),
-            this.client.getAllGroups(args),
-            this.client.getAllTags(args),
-        ]);
-        return {
-            savedViews: savedViews.map(savedViewResponseToSavedView),
-            groups: groups.map(groupResponseToSavedViewGroup),
-            tags: tags.map(tagResponseToSavedViewTag),
-        };
+        this.#client = new Client(args);
     }
-    async getSingularSavedView(args) {
-        const response = await this.client.getSavedViewRepresentation({
-            savedViewId: args.savedViewId,
+    async *getSavedViews(args) {
+        const iterable = this.#client.getAllSavedViewsMinimal({
+            iTwinId: args.iTwinId,
+            iModelId: args.iModelId,
+            groupId: args.groupId,
             signal: args.signal,
         });
-        return response.savedView;
+        for await (const page of iterable) {
+            yield page.savedViews.map(savedViewResponseToSavedView);
+        }
+    }
+    async getGroups(args) {
+        const response = await this.#client.getAllGroups({
+            iTwinId: args.iTwinId,
+            iModelId: args.iModelId,
+            signal: args.signal,
+        });
+        return response.groups.map(groupResponseToSavedViewGroup);
+    }
+    async getTags(args) {
+        const response = await this.#client.getAllTags({
+            iTwinId: args.iTwinId,
+            iModelId: args.iModelId,
+            signal: args.signal,
+        });
+        return response.tags.map(tagResponseToSavedViewTag);
     }
     async getThumbnailUrl(args) {
-        const response = await this.client.getImage({
+        const response = await this.#client.getImage({
             savedViewId: args.savedViewId,
             size: "thumbnail",
             signal: args.signal,
@@ -37,66 +44,93 @@ export class ITwinSavedViewsClient {
         return response.href;
     }
     async uploadThumbnail(args) {
-        await this.client.updateImage({
+        await this.#client.updateImage({
             savedViewId: args.savedViewId,
             image: args.image,
             signal: args.signal,
         });
     }
+    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 { savedView } = await this.client.createSavedView({
+        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.savedViewData,
+            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 { 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.savedViewData,
-            extensions: args.extensions,
+        const savedViewData = args.savedViewData && toApiSavedViewData(args.savedViewData.viewData);
+        const { savedView } = await this.#client.updateSavedView({
+            savedViewId: args.savedViewId,
+            displayName: args.displayName,
+            tagIds: args.tagIds,
+            groupId: args.groupId,
+            shared: args.shared,
+            savedViewData,
             signal: args.signal,
         });
+        await Promise.all((args.savedViewData?.extensions ?? []).map(({ extensionName, data }) => {
+            this.#client.createExtension({
+                savedViewId: args.savedViewId,
+                extensionName,
+                data,
+            });
+        }));
         return savedViewResponseToSavedView(savedView);
     }
     async deleteSavedView(args) {
-        await this.client.deleteSavedView({ savedViewId: args.savedViewId, signal: args.signal });
+        await this.#client.deleteSavedView({ savedViewId: args.savedViewId, signal: args.signal });
     }
     async createGroup(args) {
-        const { group } = await this.client.createGroup({
+        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,
+        const { group } = await this.#client.updateGroup({
+            groupId: args.groupId,
+            displayName: args.displayName,
+            shared: args.shared,
             signal: args.signal,
         });
         return groupResponseToSavedViewGroup(group);
     }
     async deleteGroup(args) {
-        const savedViews = await this.client.getAllSavedViewsMinimal({ groupId: args.groupId, signal: args.signal });
-        await Promise.all(savedViews.savedViews.map(({ id }) => this.client.deleteSavedView({ savedViewId: id, signal: args.signal })));
-        await this.client.deleteGroup({ groupId: args.groupId, signal: args.signal });
+        const savedViewPages = this.#client.getAllSavedViewsMinimal({ groupId: args.groupId, 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 });
     }
     async createTag(args) {
-        const { tag } = await this.client.createTag({
+        const { tag } = await this.#client.createTag({
             iTwinId: args.iTwinId,
             iModelId: args.iModelId,
             displayName: args.displayName,
@@ -105,33 +139,32 @@ export class ITwinSavedViewsClient {
         return tagResponseToSavedViewTag(tag);
     }
     async updateTag(args) {
-        const { tag } = await this.client.updateTag({
-            tagId: args.tag.id,
-            displayName: args.tag.displayName,
+        const { tag } = await this.#client.updateTag({
+            tagId: args.tagId,
+            displayName: args.displayName,
             signal: args.signal,
         });
         return tagResponseToSavedViewTag(tag);
     }
     async deleteTag(args) {
-        await this.client.deleteTag({ tagId: args.tagId, signal: args.signal });
+        await this.#client.deleteTag({ tagId: args.tagId, signal: args.signal });
     }
 }
 function savedViewResponseToSavedView(response) {
     return {
-        id: response.id,
+        savedViewId: response.id,
         displayName: response.displayName,
         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,
-        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,
@@ -139,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 };
+}