@itwin/saved-views-react 0.1.0

package/lib/SavedViewTile/SavedViewTile.css

@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.svr-tile {
+  width: var(--itwin-svr-tile-width, calc(8 * var(--iui-size-xl)));
+}
+
+.svr-tile .svr-tile-thumbnail {
+  height: var(--itwin-svr-thumbnail-height, calc(4 * var(--iui-size-xl)));
+}
+
+.svr-tile .svr-tile-name {
+  height: calc(var(--iui-size-l) + 2px);
+  user-select: unset;
+}
+
+.svr-tile--metadata {
+  display: grid;
+  grid: 1fr / auto minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.svr-tile--metadata > svg {
+  margin-right: var(--iui-size-xs);
+}
+
+.svr-tile--tag-container {
+  display: flex;
+  gap: var(--iui-size-s);
+}
+
+.svr-tile--tag {
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.svr-tile--tag-overflow {
+  margin-left: var(--iui-size-s);
+}
+
+.svr-tile--more-options {
+  z-index: 2;
+  grid-area: 1 / 1 / -1 / -1;
+  place-self: end;
+  margin: 0;
+  margin-inline-end: calc(-1*var(--iui-size-2xs));
+  display: grid;
+  position: absolute;
+}
+
+.svr-tile:not(:hover, :focus-within) .svr-tile--more-options:where(:not(.svr-visible)) {
+  visibility: hidden;
+}
+
+.svr-tile--icon-container {
+  display: flex;
+  margin-top: calc(0.5 * var(--iui-size-s));
+  margin-inline: var(--iui-size-xs);
+  gap: var(--iui-size-2xs);
+  z-index: 1;
+}
+
+.svr-tile--icon {
+  border-radius: 50%;
+  background: rgb(0, 0, 0, var(--iui-opacity-3));
+  min-width: var(--iui-component-height-small);
+  min-height: var(--iui-component-height-small);
+  display: flex;
+  place-items: center;
+  padding-inline: var(--iui-size-2xs);
+  border: 1px solid transparent;
+}
+
+.svr-tile--icon svg {
+  fill: var(--iui-color-white);
+}
+
+.svr-tile--editable-title > span {
+  display: flex;
+  align-items: center;
+  gap: var(--iui-size-s);
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TYXZlZFZpZXdUaWxlL1NhdmVkVmlld1RpbGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IlNhdmVkVmlld1RpbGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cblxuLnN2ci10aWxlIHtcbiAgd2lkdGg6IHZhcigtLWl0d2luLXN2ci10aWxlLXdpZHRoLCBjYWxjKDggKiB2YXIoLS1pdWktc2l6ZS14bCkpKTtcbn1cblxuLnN2ci10aWxlIC5zdnItdGlsZS10aHVtYm5haWwge1xuICBoZWlnaHQ6IHZhcigtLWl0d2luLXN2ci10aHVtYm5haWwtaGVpZ2h0LCBjYWxjKDQgKiB2YXIoLS1pdWktc2l6ZS14bCkpKTtcbn1cblxuLnN2ci10aWxlIC5zdnItdGlsZS1uYW1lIHtcbiAgaGVpZ2h0OiBjYWxjKHZhcigtLWl1aS1zaXplLWwpICsgMnB4KTtcbiAgdXNlci1zZWxlY3Q6IHVuc2V0O1xufVxuXG4uc3ZyLXRpbGUtLW1ldGFkYXRhIHtcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZDogMWZyIC8gYXV0byBtaW5tYXgoMCwgMWZyKSBhdXRvO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4uc3ZyLXRpbGUtLW1ldGFkYXRhID4gc3ZnIHtcbiAgbWFyZ2luLXJpZ2h0OiB2YXIoLS1pdWktc2l6ZS14cyk7XG59XG5cbi5zdnItdGlsZS0tdGFnLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogdmFyKC0taXVpLXNpemUtcyk7XG59XG5cbi5zdnItdGlsZS0tdGFnIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLnN2ci10aWxlLS10YWctb3ZlcmZsb3cge1xuICBtYXJnaW4tbGVmdDogdmFyKC0taXVpLXNpemUtcyk7XG59XG5cbi5zdnItdGlsZS0tbW9yZS1vcHRpb25zIHtcbiAgei1pbmRleDogMjtcbiAgZ3JpZC1hcmVhOiAxIC8gMSAvIC0xIC8gLTE7XG4gIHBsYWNlLXNlbGY6IGVuZDtcbiAgbWFyZ2luOiAwO1xuICBtYXJnaW4taW5saW5lLWVuZDogY2FsYygtMSp2YXIoLS1pdWktc2l6ZS0yeHMpKTtcbiAgZGlzcGxheTogZ3JpZDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xufVxuXG4uc3ZyLXRpbGU6bm90KDpob3ZlciwgOmZvY3VzLXdpdGhpbikgLnN2ci10aWxlLS1tb3JlLW9wdGlvbnM6d2hlcmUoOm5vdCguc3ZyLXZpc2libGUpKSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnN2ci10aWxlLS1pY29uLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIG1hcmdpbi10b3A6IGNhbGMoMC41ICogdmFyKC0taXVpLXNpemUtcykpO1xuICBtYXJnaW4taW5saW5lOiB2YXIoLS1pdWktc2l6ZS14cyk7XG4gIGdhcDogdmFyKC0taXVpLXNpemUtMnhzKTtcbiAgei1pbmRleDogMTtcbn1cblxuLnN2ci10aWxlLS1pY29uIHtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBiYWNrZ3JvdW5kOiByZ2IoMCwgMCwgMCwgdmFyKC0taXVpLW9wYWNpdHktMykpO1xuICBtaW4td2lkdGg6IHZhcigtLWl1aS1jb21wb25lbnQtaGVpZ2h0LXNtYWxsKTtcbiAgbWluLWhlaWdodDogdmFyKC0taXVpLWNvbXBvbmVudC1oZWlnaHQtc21hbGwpO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwbGFjZS1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nLWlubGluZTogdmFyKC0taXVpLXNpemUtMnhzKTtcbiAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG59XG5cbi5zdnItdGlsZS0taWNvbiBzdmcge1xuICBmaWxsOiB2YXIoLS1pdWktY29sb3Itd2hpdGUpO1xufVxuXG4uc3ZyLXRpbGUtLWVkaXRhYmxlLXRpdGxlID4gc3BhbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogdmFyKC0taXVpLXNpemUtcyk7XG59XG4iXX0= */

package/lib/SavedViewTile/SavedViewTile.d.ts

@@ -0,0 +1,55 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { SavedView, SavedViewTag } from "../SavedView.js";
+import "./SavedViewTile.css";
+interface SavedViewTileProps {
+    /** A Saved View that is being represented by the tile. */
+    savedView: SavedView;
+    /** 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. */
+    editable?: boolean | undefined;
+    /** Overrides icons that are displayed on the top-left of the Saved View thumbnail. */
+    leftIcons?: ReactNode[] | undefined;
+    /** Overrides icons that are displayed on the top-right of the Saved View thumbnail. */
+    rightIcons?: ReactNode[] | undefined;
+    /** Items to be added to the tile options menu. */
+    options?: ((close: () => void) => ReactElement[]) | ReactElement[] | undefined;
+    /**
+     * 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.
+     *
+     * @example
+     * <SavedViewTile savedView={savedView} onRename={handleRename} editable />
+     */
+    onRename?: ((savedViewId: string, newName: string) => void) | undefined;
+    /**
+     * Click handler meant for triggering the render of iModel onto the screen with the saved view applied
+     */
+    onClick?: ((selectedViewId: string) => void) | undefined;
+    /** Sets `className` of the top-level tile element. */
+    className?: string | undefined;
+}
+/**
+ * Displays Saved View information within a tile component.
+ *
+ * @example
+ * <SavedViewTile
+ *   savedView={savedView}
+ *   tags={savedViewTags}
+ *   options={[<SavedViewOptions.Rename key="rename" icon={<SvgBlank />} />]}
+ *   onRename={handleRename}
+ * />
+ */
+export declare function SavedViewTile(props: SavedViewTileProps): ReactElement;
+interface EditableTileNameProps {
+    displayName: string;
+    actions: {
+        onStartEditing: () => void;
+        onEndEditing: (newName: string) => void;
+    };
+    editing?: boolean | undefined;
+    editable?: boolean | undefined;
+}
+export declare function EditableTileName(props: EditableTileNameProps): ReactElement;
+export {};

package/lib/SavedViewTile/SavedViewTile.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Button, IconButton, Input, Text, Tile } from "@itwin/itwinui-react";
+import { useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { LayeredDropdownMenu } from "../LayeredDropdownMenu/LayeredDropdownMenu.js";
+import { useSavedViewsContext } from "../SavedViewsContext.js";
+import { trimInputString } from "../utils.js";
+import { SavedViewTileContextProvider } from "./SavedViewTileContext.js";
+import "./SavedViewTile.css";
+/**
+ * Displays Saved View information within a tile component.
+ *
+ * @example
+ * <SavedViewTile
+ *   savedView={savedView}
+ *   tags={savedViewTags}
+ *   options={[<SavedViewOptions.Rename key="rename" icon={<SvgBlank />} />]}
+ *   onRename={handleRename}
+ * />
+ */
+export function SavedViewTile(props) {
+    const { localization } = useSavedViewsContext();
+    const [editingName, setEditingName] = useState(false);
+    const savedViewTags = useMemo(() => {
+        const tags = props.tags;
+        if (!tags || !props.savedView.tagIds) {
+            return [];
+        }
+        return props.savedView.tagIds.map((id) => tags.get(id)).filter(tag => tag);
+    }, [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 &&
+                _jsx(Text, { className: "svr-tile--tag-overflow", variant: "small", children: `+${savedViewTags.length - numShownTags} ${localization.tile.moreTags}` })] }));
+    useLayoutEffect(() => { setNumShownTags(savedViewTags.length); }, [savedViewTags]);
+    useLayoutEffect(() => {
+        const metadataDiv = metadataRef.current;
+        if (!metadataDiv || numShownTags <= 1) {
+            return;
+        }
+        // The following check is a workaround for false positive overflow detection in Firefox
+        if (!isOverflowing(metadataDiv) && !isOverflowing(metadataDiv.lastChild)) {
+            return;
+        }
+        const metadataRightEdge = metadataDiv.getBoundingClientRect().right;
+        for (let i = 1; i < numShownTags; ++i) {
+            const child = metadataDiv.children[i];
+            if (isOverflowing(child) || child.getBoundingClientRect().right > metadataRightEdge) {
+                setNumShownTags(i);
+                return;
+            }
+        }
+    }, [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: {
+                            onStartEditing: () => setEditingName(true),
+                            onEndEditing: (newName) => {
+                                setEditingName(false);
+                                if (newName !== props.savedView.displayName) {
+                                    props.onRename?.(props.savedView.id, 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 }), 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) {
+    return element.offsetWidth < element.scrollWidth;
+}
+export function EditableTileName(props) {
+    const { actions } = props;
+    if (!props.editable) {
+        return _jsx(_Fragment, { children: props.displayName });
+    }
+    if (props.editing) {
+        const handleFocus = (ev) => {
+            ev.target.select();
+        };
+        const handleBlur = (ev) => {
+            actions.onEndEditing(trimInputString(ev.target.value));
+        };
+        const handleEndEditing = (inputValue) => {
+            actions.onEndEditing(inputValue.length === 0 ? props.displayName : trimInputString(inputValue));
+        };
+        const handleKeyDown = (ev) => {
+            if (ev.key === "Enter") {
+                const value = ev.target.value;
+                handleEndEditing(value);
+                return;
+            }
+            if (ev.key === "Escape") {
+                actions.onEndEditing(props.displayName);
+                return;
+            }
+        };
+        return (_jsx(Input, { size: "small", onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, defaultValue: props.displayName, placeholder: props.displayName, autoFocus: true }));
+    }
+    return (_jsxs(Button, { className: "svr-tile--editable-title", styleType: "borderless", size: "small", onClick: () => actions.onStartEditing(), children: [props.displayName, _jsx(SvgEdit, {})] }));
+}
+function TileIconContainer(props) {
+    return (_jsx("div", { className: "svr-tile--icon-container", style: props.style, children: props.icons?.map((icon) => (_jsx("div", { className: "svr-tile--icon", children: icon }, icon?.key))) }));
+}

package/lib/SavedViewTile/SavedViewTileContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { SavedView } from "../SavedView.js";
+/** Context that's accessable within `<SavedViewTile />` component. */
+export interface SavedViewTileContext {
+    savedView: SavedView;
+    setEditingName: (value: boolean) => void;
+}
+/** @internal */
+export declare const SavedViewTileContextProvider: import("react").Provider<SavedViewTileContext | undefined>;
+/**
+ * Context that's accessable within `<SavedViewTile />` component. You can use this to make custom actions for
+ * `SavedViewTile`.
+ */
+export declare function useSavedViewTileContext(): SavedViewTileContext;

package/lib/SavedViewTile/SavedViewTileContext.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { createContext, useContext } from "react";
+const savedViewTileContext = createContext(undefined);
+savedViewTileContext.displayName = "SavedViewTileContext";
+/** @internal */
+export const SavedViewTileContextProvider = savedViewTileContext.Provider;
+/**
+ * Context that's accessable within `<SavedViewTile />` component. You can use this to make custom actions for
+ * `SavedViewTile`.
+ */
+export function useSavedViewTileContext() {
+    const contextValue = useContext(savedViewTileContext);
+    return contextValue ?? {
+        savedView: { id: "SavedViewTileContext_NoContext", displayName: "" },
+        setEditingName: () => { },
+    };
+}

package/lib/SavedViewsClient/ITwinSavedViewsClient.d.ts

@@ -0,0 +1,30 @@
+import { type SavedViewWithDataRepresentation } 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 } from "./SavedViewsClient.js";
+interface ITwinSavedViewsClientParams {
+    /** @default "https://api.bentley.com/savedviews"  */
+    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.
+     */
+    baseUrl?: string | undefined;
+}
+/**  */
+export declare class ITwinSavedViewsClient implements SavedViewsClient {
+    private client;
+    constructor(args: ITwinSavedViewsClientParams);
+    getSavedViewInfo(args: GetSavedViewInfoParams): Promise<SavedViewInfo>;
+    getSingularSavedView(args: GetSingularSavedViewParams): Promise<SavedViewWithDataRepresentation>;
+    getThumbnailUrl(args: GetThumbnailUrlParams): Promise<string | undefined>;
+    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>;
+}
+export {};

package/lib/SavedViewsClient/ITwinSavedViewsClient.js

@@ -0,0 +1,132 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+/**  */
+export class ITwinSavedViewsClient {
+    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,
+            tags,
+        };
+    }
+    async getSingularSavedView(args) {
+        const response = await this.client.getSavedViewRepresentation({
+            savedViewId: args.savedViewId,
+            signal: args.signal,
+        });
+        return response.savedView;
+    }
+    async getThumbnailUrl(args) {
+        const response = await this.client.getImage({
+            savedViewId: args.savedViewId,
+            size: "thumbnail",
+            signal: args.signal,
+        });
+        return response.href;
+    }
+    async createSavedView(args) {
+        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,
+            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,
+            signal: args.signal,
+        });
+        return savedViewResponseToSavedView(savedView);
+    }
+    async deleteSavedView(args) {
+        await this.client.deleteSavedView({ savedViewId: args.savedViewId, signal: args.signal });
+    }
+    async createGroup(args) {
+        const { group } = await this.client.createGroup({
+            iTwinId: args.iTwinId,
+            iModelId: args.iModelId,
+            displayName: args.group.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,
+            signal: args.signal,
+        });
+        return groupResponseToSavedViewGroup(group);
+    }
+    async deleteGroup(args) {
+        await this.client.deleteGroup({ groupId: args.groupId, signal: args.signal });
+    }
+    async createTag(args) {
+        const { tag } = await this.client.createTag({
+            iTwinId: args.iTwinId,
+            iModelId: args.iModelId,
+            displayName: args.displayName,
+            signal: args.signal,
+        });
+        return tagResponseToSavedViewTag(tag);
+    }
+    async updateTag(args) {
+        const { tag } = await this.client.updateTag({
+            tagId: args.tag.id,
+            displayName: args.tag.displayName,
+            signal: args.signal,
+        });
+        return tagResponseToSavedViewTag(tag);
+    }
+    async deleteTag(args) {
+        await this.client.deleteTag({ tagId: args.tagId, signal: args.signal });
+    }
+}
+function savedViewResponseToSavedView(response) {
+    return {
+        id: response.id,
+        displayName: response.displayName,
+        tagIds: response.tags?.map((tag) => tag.id),
+        groupId: response._links.group?.href.split("/").at(-1),
+        shared: response.shared,
+        thumbnail: undefined,
+    };
+}
+function groupResponseToSavedViewGroup(response) {
+    return {
+        id: response.id,
+        displayName: response.displayName,
+        shared: response.shared,
+    };
+}
+function tagResponseToSavedViewTag(response) {
+    return {
+        id: response.id,
+        displayName: response.displayName,
+    };
+}

package/lib/SavedViewsClient/SavedViewsClient.d.ts

@@ -0,0 +1,72 @@
+import type { ExtensionMin, ExtensionSavedViewCreate, SavedViewWithDataRepresentation, ViewData } from "@itwin/saved-views-client";
+import type { SavedView, SavedViewGroup, SavedViewTag } from "../SavedView.js";
+export interface SavedViewInfo {
+    savedViews: SavedView[];
+    groups: SavedViewGroup[];
+    tags: SavedViewTag[];
+}
+export interface SavedViewsClient {
+    getSavedViewInfo: (args: GetSavedViewInfoParams) => Promise<SavedViewInfo>;
+    getSingularSavedView: (args: GetSingularSavedViewParams) => Promise<SavedViewWithDataRepresentation>;
+    getThumbnailUrl: (args: GetThumbnailUrlParams) => Promise<string | undefined>;
+    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>;
+}
+export interface GetSavedViewInfoParams extends CommonParams {
+    iTwinId: string;
+    iModelId?: string | undefined;
+}
+export interface GetSingularSavedViewParams extends CommonParams {
+    savedViewId: string;
+}
+export interface GetThumbnailUrlParams extends CommonParams {
+    savedViewId: string;
+}
+export interface CreateSavedViewParams extends CommonParams {
+    iTwinId: string;
+    iModelId?: string | undefined;
+    savedView: Pick<SavedView, "displayName" | "tagIds" | "groupId" | "shared">;
+    savedViewData: ViewData;
+    extensions?: ExtensionSavedViewCreate[] | undefined;
+}
+export interface UpdateSavedViewParams extends CommonParams {
+    savedView: Pick<SavedView, "id"> & Partial<SavedView>;
+    savedViewData?: ViewData | undefined;
+    extensions?: ExtensionMin[] | undefined;
+}
+export interface DeleteSavedViewParams extends CommonParams {
+    savedViewId: string;
+}
+export interface CreateGroupParams extends CommonParams {
+    iTwinId: string;
+    iModelId?: string | undefined;
+    group: Pick<SavedViewGroup, "displayName" | "shared">;
+}
+export interface UpdateGroupParams extends CommonParams {
+    group: Pick<SavedViewGroup, "id"> & Partial<SavedViewGroup>;
+}
+export interface DeleteGroupParams extends CommonParams {
+    groupId: string;
+}
+export interface CreateTagParams extends CommonParams {
+    iTwinId: string;
+    iModelId?: string;
+    displayName: string;
+}
+export interface UpdateTagParams extends CommonParams {
+    tag: Pick<SavedViewTag, "id"> & Partial<SavedViewTag>;
+}
+export interface DeleteTagParams extends CommonParams {
+    tagId: string;
+}
+interface CommonParams {
+    signal?: AbortSignal | undefined;
+}
+export {};

package/lib/SavedViewsClient/SavedViewsClient.js

@@ -0,0 +1 @@
+export {};

package/lib/SavedViewsContext.d.ts

@@ -0,0 +1,13 @@
+import { type PropsWithChildren, type ReactElement } from "react";
+import { defaultLocalization, type LocalizationStrings } from "./localization.js";
+export interface SavedViewsContext {
+    localization: typeof defaultLocalization;
+}
+interface SavedViewsContextProviderProps {
+    /** Custom strings to be used within `@itwin/saved-views-react` React components. */
+    localization?: LocalizationStrings | undefined;
+}
+/** React context for `@itwin/saved-views-react` components. Optional. */
+export declare function SavedViewsContextProvider(props: PropsWithChildren<SavedViewsContextProviderProps>): ReactElement;
+export declare function useSavedViewsContext(): SavedViewsContext;
+export {};

package/lib/SavedViewsContext.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } 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 { createContext, useContext, useMemo } from "react";
+import { defaultLocalization } from "./localization.js";
+const savedViewsContext = createContext({ localization: defaultLocalization });
+savedViewsContext.displayName = "SavedViewsContext";
+/** React context for `@itwin/saved-views-react` components. Optional. */
+export function SavedViewsContextProvider(props) {
+    const localization = useMemo(() => {
+        if (!props.localization) {
+            return defaultLocalization;
+        }
+        const localization = { ...defaultLocalization };
+        replaceStringsRecursively(props.localization, localization);
+        return localization;
+    }, [props.localization]);
+    const contextValue = useMemo(() => ({ localization }), [localization]);
+    return (_jsx(savedViewsContext.Provider, { value: contextValue, children: props.children }));
+}
+export function useSavedViewsContext() {
+    return useContext(savedViewsContext);
+}
+function replaceStringsRecursively(source, destination) {
+    for (const key in source) {
+        if (!Object.hasOwnProperty.call(destination, key)) {
+            return;
+        }
+        if (typeof source[key] === "string") {
+            destination[key] = source[key];
+        }
+        else {
+            replaceStringsRecursively(source[key], destination[key]);
+        }
+    }
+}

package/lib/SavedViewsWidget/SavedViewGroupTile/SavedViewGroupOptions.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from "react";
+export declare const SavedViewGroupOptions: {
+    Rename: typeof Rename;
+};
+interface RenameProps {
+    icon?: ReactElement | undefined;
+}
+declare function Rename(props: RenameProps): ReactElement;
+export {};

package/lib/SavedViewsWidget/SavedViewGroupTile/SavedViewGroupOptions.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } 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 { MenuItem } from "@itwin/itwinui-react";
+import { useSavedViewGroupTileContext } from "./SavedViewGroupTileContext.js";
+export const SavedViewGroupOptions = {
+    Rename,
+};
+function Rename(props) {
+    const { setEditingName } = useSavedViewGroupTileContext();
+    return _jsx(MenuItem, { startIcon: props.icon, onClick: () => setEditingName(true), children: "Rename" });
+}

package/lib/SavedViewsWidget/SavedViewGroupTile/SavedViewGroupTile.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { SavedViewGroup } from "../../SavedView.js";
+interface SavedViewGroupTileProps {
+    group: SavedViewGroup;
+    numItems: number;
+    onOpen: (groupId: string) => void;
+    focused?: boolean | undefined;
+    initialScrollTop: number;
+    editable?: boolean | undefined;
+    options?: ReactNode[] | undefined;
+    onRename?: ((groupId: string, newName: string) => void) | undefined;
+}
+export declare function SavedViewGroupTile(props: SavedViewGroupTileProps): ReactElement;
+export {};