@itwin/saved-views-react 0.1.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+# MIT License
+
+Copyright © 2024 Bentley Systems, Incorporated. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# @itwin/saved-views-react
+
+## About
+
+A collection of React components for building applications that deal with [Saved Views](https://developer.bentley.com/apis/savedviews/overview/).
+
+## Documentation
+
+### React components
+
+* [SavedViewTile](./src/SavedViewTile/SavedViewTile.tsx)
+  * [SavedViewOptions](./src/SavedViewTile/SavedViewOptions.tsx)
+  * [LayeredDropdownMenu](./src/LayeredDropdownMenu/LayeredDropdownMenu.tsx)
+* [TileGrid](./src/TileGrid/TileGrid.tsx)
+* [StickyExpandableBlock](./src/StickyExpandableBlock/StickyExpandableBlock.tsx)
+
+You can use these components however you see fit, however, below is the suggested component arrangement.
+
+```tsx
+import { LayeredMenuItem, SavedViewTile, StickyExpandableBlock, TileGrid } from "@itwin/saved-views-react";
+
+export function SavedViewsWidget(props) {
+  return (
+    <StickyExpandableBlock title="Saved Views">
+      <TileGrid gridItems={props.savedViews}>
+        {
+          (savedView) => (
+            <SavedViewTile
+              savedView={savedView}
+              options={[
+                <SavedViewOptions.Delete key="delete" deleteSavedView={props.deleteSavedView} />,
+                <LayeredMenuItem key="menu-item" content={<MyMenuItemContent />}>
+                  Custom menu item
+                </LayeredMenuItem>,
+              ]}
+            />
+          )
+        }
+      </TileGrid>
+    </StickyExpandableBlock>
+  );
+}
+```
+
+### useSavedViews
+
+[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/).
+
+```tsx
+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",
+});
+
+export function SavedViewsWidget(props) {
+  const savedViews = useSavedViews({ iTwinId: props.iTwinId, iModelId: props.iModelId, client });
+  if (savedViews === undefined) {
+    return "loading";
+  }
+
+  return (
+    <MyWidgetContent
+      savedViews={savedViews.savedViews}
+      groups={savedViews.groups}
+      tags={savedViews.tags}
+      actions={savedViews.actions}
+    />
+  );
+}
+```
+
+### Localization
+
+In order to localize text across various provided components, mount [`<SavedViewsContextProvider />`](./src/SavedViewsContext.tsx) and supply `localization` object containing string replacements.
+
+```tsx
+import { SavedViewsContextProvider, type LocalizationStrings } from "@itwin/saved-views-react";
+
+const localization: LocalizationStrings = { delete: "🗑️" };
+
+export function SavedViewsWidget() {
+  return (
+    <SavedViewsContextProvider localization={localization}>
+      <MyWidgetContent />
+    </SavedViewsContextProvider>
+  );
+}
+
+```
+
+### Custom tile options
+
+[`<SavedViewTile />`](./src/SavedViewTile/SavedViewTile.tsx) accepts an array of options to display in its context menu. This package exposes a number of ready-to-use options to use with your tiles, accessible through [`SavedViewOptions`](./src/SavedViewTile//SavedViewOptions.tsx) export, and you are free to create your own ones.
+
+```tsx
+import { MenuDivider, MenuItem } from "@itwin/itwinui-react";
+import { SavedViewOptions, SavedViewTile, useSavedViewTileContext } from "@itwin/saved-views-react";
+
+export function SavedViewsWidget(props) {
+  return (
+    <SavedViewTile
+      savedView={props.savedView}
+      options={(close) => [
+        <SavedViewOptions.Rename key="rename" onClick={close} />,
+        <MenuDivider key="divider" />,
+        <OpenSavedView key="custom" onClick={props.openSavedView} />,
+      ]}
+    />
+  );
+}
+
+function OpenSavedView(props) {
+  const { savedView } = useSavedViewTileContext();
+
+  return (
+    <MenuItem onClick={() => props.onClick(savedView)}>
+      Open {savedView.displayName}
+    </MenuItem>
+  );
+}
+```
+
+## Contributing
+
+We welcome contributions to make this package better. You can submit feature requests or report bugs by creating an [issue](https://github.com/iTwin/saved-views/issues).
+
+---
+
+Copyright © Bentley Systems, Incorporated. All rights reserved. See [LICENSE.md](./LICENSE.md) for license terms and full copyright notice.

package/lib/LayeredDropdownMenu/LayeredDropdownMenu.css

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.svr-layered-dropdown--back {
+  display: flex;
+  gap: var(--iui-size-s);
+  align-items: center;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXllcmVkRHJvcGRvd25NZW51L0xheWVyZWREcm9wZG93bk1lbnUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IkxheWVyZWREcm9wZG93bk1lbnUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cbi5zdnItbGF5ZXJlZC1kcm9wZG93bi0tYmFjayB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogdmFyKC0taXVpLXNpemUtcyk7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4iXX0= */

package/lib/LayeredDropdownMenu/LayeredDropdownMenu.d.ts

@@ -0,0 +1,39 @@
+import { type ReactElement, type ReactNode } from "react";
+import "./LayeredDropdownMenu.css";
+interface LayeredDropdownMenuProps {
+    /**
+     * Items to pass to iTwinUI `<DropdownMenu />` component. It is preferable for items to include at least one
+     * `<LayeredMenuItem />`. Otherwise, it is more efficient to use plain `<DropdownMenu />`.
+     */
+    menuItems: ReactElement[] | ((close: () => void) => ReactElement[]);
+    /** Dropdown menu trigger to pass to iTwinUI `<DropdownMenu />` component. */
+    children: ReactNode;
+}
+/**
+ * An extended version of iTwinUI `<DropdownMenu />` component with support for layered dropdown menu items.
+ *
+ * @example
+ * <LayeredDropdownMenu
+ *   menuItems={[
+ *     <LayeredMenuItem key="layered" content={<MyLayeredMenu />}>
+ *       Layered menu
+ *     </LayeredMenuItem>,
+ *     <MenuDivider key="divider" />,
+ *     <MenuItem ley="regural">Regular menu item</MenuItem>,
+ *   ]}
+ * >
+ *   <Button>Open dropdown menu</Button>
+ * </LayeredDropdownMenu>
+ */
+export declare function LayeredDropdownMenu(props: LayeredDropdownMenuProps): ReactElement;
+interface LayeredDropdownMenuItemProps {
+    /** Content of the nested menu. */
+    content: ReactNode;
+    /** Menu item icon. */
+    icon?: ReactNode | undefined;
+    /** Menu item label. */
+    children: ReactNode;
+}
+/** Behaves much like iTwinUI `<MenuItem />` but upon activation advances menu to a nested layer. */
+export declare function LayeredMenuItem(props: LayeredDropdownMenuItemProps): ReactElement;
+export {};

package/lib/LayeredDropdownMenu/LayeredDropdownMenu.js

@@ -0,0 +1,53 @@
+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 { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
+import { DropdownMenu, IconButton, ListItem, MenuDivider, MenuExtraContent } from "@itwin/itwinui-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import "./LayeredDropdownMenu.css";
+/**
+ * An extended version of iTwinUI `<DropdownMenu />` component with support for layered dropdown menu items.
+ *
+ * @example
+ * <LayeredDropdownMenu
+ *   menuItems={[
+ *     <LayeredMenuItem key="layered" content={<MyLayeredMenu />}>
+ *       Layered menu
+ *     </LayeredMenuItem>,
+ *     <MenuDivider key="divider" />,
+ *     <MenuItem ley="regural">Regular menu item</MenuItem>,
+ *   ]}
+ * >
+ *   <Button>Open dropdown menu</Button>
+ * </LayeredDropdownMenu>
+ */
+export function LayeredDropdownMenu(props) {
+    const [activeMenuItem, setActiveMenuItem] = useState(undefined);
+    const menuItems = useMemo(() => {
+        const menuItemsCallback = activeMenuItem === undefined
+            ? (menuItems) => menuItems.map((item, i) => (_jsx(layeredMenuItemIdentifierContext.Provider, { value: i, children: item }, item.key ?? i)))
+            : (menuItems) => [
+                _jsx(layeredMenuItemIdentifierContext.Provider, { value: activeMenuItem, children: menuItems[activeMenuItem] }, menuItems[activeMenuItem].key ?? activeMenuItem),
+            ];
+        return getMenuItems(props.menuItems, menuItemsCallback);
+    }, [activeMenuItem, props.menuItems]);
+    return (_jsx(layeredDropdownMenuContext.Provider, { value: { activeMenuItem, setActiveMenuItem }, children: _jsx(DropdownMenu, { menuItems: menuItems, onVisibleChange: (visible) => !visible && setActiveMenuItem(undefined), children: props.children }) }));
+}
+function getMenuItems(menuItems, callback) {
+    return (close) => callback(typeof menuItems === "function" ? menuItems(close) : menuItems);
+}
+/** Behaves much like iTwinUI `<MenuItem />` but upon activation advances menu to a nested layer. */
+export function LayeredMenuItem(props) {
+    const itemIdentifier = useContext(layeredMenuItemIdentifierContext);
+    const { activeMenuItem, setActiveMenuItem } = useContext(layeredDropdownMenuContext);
+    if (itemIdentifier === activeMenuItem) {
+        return (_jsxs(_Fragment, { children: [_jsx(MenuExtraContent, { children: _jsx("div", { children: _jsx("div", { onClick: () => setActiveMenuItem(undefined), children: _jsxs(IconButton, { styleType: "borderless", iconProps: { className: "svr-layered-dropdown--back" }, children: [_jsx(SvgChevronLeft, {}), props.children] }) }) }) }, "header"), _jsx(MenuDivider, {}, "separator"), _jsx(MenuExtraContent, { children: props.content }, "content")] }));
+    }
+    return (_jsxs(ListItem, { tabIndex: -1, onClick: () => setActiveMenuItem(itemIdentifier), actionable: true, children: [props.icon && _jsx(ListItem.Icon, { children: props.icon }), _jsx(ListItem.Content, { children: props.children }), _jsx(ListItem.Icon, { children: _jsx(SvgChevronRight, {}) })] }));
+}
+const layeredDropdownMenuContext = createContext({ activeMenuItem: undefined, setActiveMenuItem: () => { } });
+layeredDropdownMenuContext.displayName = "LayeredDropdownMenuContext";
+const layeredMenuItemIdentifierContext = createContext(undefined);
+layeredMenuItemIdentifierContext.displayName = "LayeredDropdownMenuIdentifier";

package/lib/SavedView.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface SavedView {
+    id: string;
+    displayName: string;
+    groupId?: string | undefined;
+    tagIds?: string[] | undefined;
+    shared?: boolean | undefined;
+    thumbnail?: ReactNode | string | undefined;
+}
+export interface SavedViewTag {
+    id: string;
+    displayName: string;
+}
+export interface SavedViewGroup {
+    id: string;
+    displayName: string;
+    shared?: boolean | undefined;
+}

package/lib/SavedView.js

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

package/lib/SavedViewTile/SavedViewOptions.css

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.svr-searchable-submenu {
+  display: grid;
+  grid: auto minmax(0, 1fr) / 1fr;
+  gap: var(--iui-size-xs);
+  height: calc(var(--iui-menu-max-height) - 2 * var(--iui-component-height) - 1px);
+  user-select: none;
+}
+
+.svr-searchable-submenu > div {
+  overflow: auto;
+}
+
+.svr-searchable-submenu-item {
+  width: calc(10 * var(--iui-size-l));
+}
+
+.svr-semibold {
+  font-weight: var(--iui-font-weight-semibold);
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TYXZlZFZpZXdUaWxlL1NhdmVkVmlld09wdGlvbnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IlNhdmVkVmlld09wdGlvbnMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cblxuLnN2ci1zZWFyY2hhYmxlLXN1Ym1lbnUge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkOiBhdXRvIG1pbm1heCgwLCAxZnIpIC8gMWZyO1xuICBnYXA6IHZhcigtLWl1aS1zaXplLXhzKTtcbiAgaGVpZ2h0OiBjYWxjKHZhcigtLWl1aS1tZW51LW1heC1oZWlnaHQpIC0gMiAqIHZhcigtLWl1aS1jb21wb25lbnQtaGVpZ2h0KSAtIDFweCk7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG4uc3ZyLXNlYXJjaGFibGUtc3VibWVudSA+IGRpdiB7XG4gIG92ZXJmbG93OiBhdXRvO1xufVxuXG4uc3ZyLXNlYXJjaGFibGUtc3VibWVudS1pdGVtIHtcbiAgd2lkdGg6IGNhbGMoMTAgKiB2YXIoLS1pdWktc2l6ZS1sKSk7XG59XG5cbi5zdnItc2VtaWJvbGQge1xuICBmb250LXdlaWdodDogdmFyKC0taXVpLWZvbnQtd2VpZ2h0LXNlbWlib2xkKTtcbn1cbiJdfQ== */

package/lib/SavedViewTile/SavedViewOptions.d.ts

@@ -0,0 +1,139 @@
+import { type ComponentProps, type ReactElement } from "react";
+import type { SavedViewGroup, SavedViewTag } from "../SavedView.js";
+import "./SavedViewOptions.css";
+/**
+ * A collection of useful menu items for {@linkcode SavedViewTile}.
+ *
+ * @example
+ * <SavedViewTile
+ *   savedView={savedView}
+ *   options={(close) => [<SavedViewOptions.Rename key="rename" icon={<SvgBlank />} onClick={close} />]}
+ *   onRename={handleRename}
+ * />
+ */
+export declare const SavedViewOptions: {
+    /**
+     * When activated, makes Saved View title enter editable state. Has no effect if the {@linkcode SavedViewTile} does
+     * not receive `onRename` prop.
+     *
+     * @example
+     * <SavedViewTile
+     *   savedView={savedView}
+     *   options={(close) => [<SavedViewOptions.Rename key="rename" icon={<SvgBlank />} onClick={close} />]}
+     *   onRename={handleRename}
+     * />
+     */
+    Rename: typeof Rename;
+    /**
+     * Displays a control for moving Saved View to a group.
+     *
+     * @example
+     * <SavedViewOptions.MoveToGroup
+     *   groups={groups}
+     *   moveToGroup={handleMoveToGroup}
+     *   moveToNewGroup={handleMoveTo}
+     *   icon={<SvgBlank />}
+     * />
+     */
+    MoveToGroup: typeof MoveToGroup;
+    /**
+     * Displays a control for managing Saved View tags.
+     *
+     * @example
+     * <SavedViewOptions.ManageTags
+     *   tags={tags}
+     *   addTag={handleAddTag}
+     *   addNewTag={handleAddNewTag}
+     *   removeTag={handleRemoveTag}
+     *   icon={<SvgBlank />}
+     * />
+     */
+    ManageTags: typeof ManageTags;
+    /**
+     * Displays option for Saved View deletion.
+     *
+     * @example
+     * <SavedViewOptions.Delete
+     *  icon={<SvgBlank />}
+     *  deleteSavedView={handleDeleteSavedView}
+     * />
+     */
+    Delete: typeof Delete;
+};
+export interface CreateSavedViewOptionsParams {
+    /** When `true`, the returned options contain a `Rename` entry. */
+    renameSavedView?: boolean | undefined;
+    /** When set, the returned options contain a `Move to group` entry. */
+    groupActions?: OmitCommonOptionProps<ComponentProps<typeof SavedViewOptions.MoveToGroup>>;
+    /** When set, the returned options contain a `Tags` entry. */
+    tagActions?: OmitCommonOptionProps<ComponentProps<typeof SavedViewOptions.ManageTags>>;
+    /** When set, the returned options contain a `Delete` entry. */
+    deleteSavedView?: ComponentProps<typeof SavedViewOptions.Delete>["deleteSavedView"];
+}
+type OmitCommonOptionProps<T> = Omit<T, "icon">;
+/**
+ * Convenience function that returns an array populated with options to be used on {@linkcode SavedViewTile}. Available
+ * options are determined by what data is present in the {@linkcode args} argument.
+ *
+ * @example
+ * <SavedViewTile
+ *   savedView={savedView}
+ *   options={createSavedViewOptions({ tagActions, groupActions })}
+ *   editable
+ * />
+ */
+export declare function createSavedViewOptions(args: CreateSavedViewOptionsParams): (close: () => void) => ReactElement[];
+interface RenameProps extends CommonOptionProps {
+    /** Invoked after triggering the rename action. Often used to close the tile dropdown menu. */
+    onClick?: (() => void) | undefined;
+}
+declare function Rename(props: RenameProps): ReactElement;
+interface MoveToGroupProps extends CommonOptionProps {
+    /** Available Saved View groups to choose from. */
+    groups: SavedViewGroup[];
+    /**
+     * Invoked when user selects a group from the supplied {@linkcode groups} list.
+     * @param savedViewId Id of the associated Saved View.
+     * @param groupId Id of the user-selected group.
+     */
+    moveToGroup: (savedViewId: string, groupId: string) => void;
+    /**
+     * When set, allows creation of new Saved View groups. Invoked when user submits a name for the new group.
+     * @param savedViewId Id of the associated Saved View.
+     * @param groupName User-submitted string for the new Saved View group.
+     */
+    moveToNewGroup?: ((savedViewId: string, groupName: string) => void) | undefined;
+}
+declare function MoveToGroup(props: MoveToGroupProps): ReactElement;
+interface ManageTagsProps extends CommonOptionProps {
+    /** Available Saved View tags to choose from. */
+    tags: SavedViewTag[];
+    /**
+     * Invoked when user selects a tag from the supplied {@linkcode tags} list.
+     * @param savedViewId Id of the associated Saved View.
+     * @param tagId Id of the user-selected tag.
+     */
+    addTag: (savedViewId: string, tagId: string) => void;
+    /**
+     * When set, allows creation of new Saved View tags. Invoked when user submits a name for the new tag.
+     * @param savedViewId Id of the associated Saved View.
+     * @param tagName User-submitted string for the new Saved View tag.
+     */
+    addNewTag?: ((savedViewId: string, tagName: string) => void) | undefined;
+    /**
+     * Invoked when user selects a tag from the supplied {@linkcode tags} list.
+     * @param savedViewId Id of the associated Saved View.
+     * @param tagId Id of the user-selected tag.
+     */
+    removeTag: (savedViewId: string, tagId: string) => void;
+}
+declare function ManageTags(props: ManageTagsProps): ReactElement;
+interface DeleteProps extends CommonOptionProps {
+    deleteSavedView: (savedViewId: string) => void;
+}
+declare function Delete(props: DeleteProps): ReactElement;
+interface CommonOptionProps {
+    /** Icon to the left of this menu item. */
+    icon?: ReactElement | undefined;
+}
+export {};

package/lib/SavedViewTile/SavedViewOptions.js

@@ -0,0 +1,173 @@
+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 { SvgAdd, SvgBlank, SvgCheckmarkSmall, SvgRename, SvgShare } from "@itwin/itwinui-icons-react";
+import { Input, MenuItem, Text } from "@itwin/itwinui-react";
+import Fuse from "fuse.js";
+import { useMemo, useState } from "react";
+import { LayeredMenuItem } from "../LayeredDropdownMenu/LayeredDropdownMenu.js";
+import { useSavedViewsContext } from "../SavedViewsContext.js";
+import { trimInputString } from "../utils.js";
+import { useSavedViewTileContext } from "./SavedViewTileContext.js";
+import "./SavedViewOptions.css";
+/**
+ * A collection of useful menu items for {@linkcode SavedViewTile}.
+ *
+ * @example
+ * <SavedViewTile
+ *   savedView={savedView}
+ *   options={(close) => [<SavedViewOptions.Rename key="rename" icon={<SvgBlank />} onClick={close} />]}
+ *   onRename={handleRename}
+ * />
+ */
+export const SavedViewOptions = {
+    /**
+     * When activated, makes Saved View title enter editable state. Has no effect if the {@linkcode SavedViewTile} does
+     * not receive `onRename` prop.
+     *
+     * @example
+     * <SavedViewTile
+     *   savedView={savedView}
+     *   options={(close) => [<SavedViewOptions.Rename key="rename" icon={<SvgBlank />} onClick={close} />]}
+     *   onRename={handleRename}
+     * />
+     */
+    Rename,
+    /**
+     * Displays a control for moving Saved View to a group.
+     *
+     * @example
+     * <SavedViewOptions.MoveToGroup
+     *   groups={groups}
+     *   moveToGroup={handleMoveToGroup}
+     *   moveToNewGroup={handleMoveTo}
+     *   icon={<SvgBlank />}
+     * />
+     */
+    MoveToGroup,
+    /**
+     * Displays a control for managing Saved View tags.
+     *
+     * @example
+     * <SavedViewOptions.ManageTags
+     *   tags={tags}
+     *   addTag={handleAddTag}
+     *   addNewTag={handleAddNewTag}
+     *   removeTag={handleRemoveTag}
+     *   icon={<SvgBlank />}
+     * />
+     */
+    ManageTags,
+    /**
+     * Displays option for Saved View deletion.
+     *
+     * @example
+     * <SavedViewOptions.Delete
+     *  icon={<SvgBlank />}
+     *  deleteSavedView={handleDeleteSavedView}
+     * />
+     */
+    Delete,
+};
+/**
+ * Convenience function that returns an array populated with options to be used on {@linkcode SavedViewTile}. Available
+ * options are determined by what data is present in the {@linkcode args} argument.
+ *
+ * @example
+ * <SavedViewTile
+ *   savedView={savedView}
+ *   options={createSavedViewOptions({ tagActions, groupActions })}
+ *   editable
+ * />
+ */
+export function createSavedViewOptions(args) {
+    return (close) => {
+        const options = [];
+        if (args.renameSavedView) {
+            options.push(_jsx(SavedViewOptions.Rename, { icon: _jsx(SvgRename, {}), onClick: close }, "rename"));
+        }
+        if (args.groupActions && args.groupActions) {
+            options.push(_jsx(SavedViewOptions.MoveToGroup, { groups: args.groupActions.groups, moveToGroup: args.groupActions.moveToGroup, moveToNewGroup: args.groupActions.moveToNewGroup, icon: _jsx(SvgBlank, {}) }, "move"));
+        }
+        if (args.tagActions && args.tagActions) {
+            options.push(_jsx(SavedViewOptions.ManageTags, { tags: args.tagActions.tags, addTag: args.tagActions.addTag, addNewTag: args.tagActions.addNewTag, removeTag: args.tagActions.removeTag, icon: _jsx(SvgBlank, {}) }, "tags"));
+        }
+        if (args.deleteSavedView) {
+            options.push(_jsx(SavedViewOptions.Delete, { icon: _jsx(SvgBlank, {}), deleteSavedView: args.deleteSavedView }, "delete"));
+        }
+        return options;
+    };
+}
+function Rename(props) {
+    const { setEditingName } = useSavedViewTileContext();
+    const { localization } = useSavedViewsContext();
+    const handleClick = () => {
+        setEditingName(true);
+        props.onClick?.();
+    };
+    return (_jsx(MenuItem, { startIcon: props.icon, onClick: handleClick, children: localization.rename }));
+}
+function MoveToGroup(props) {
+    const { savedView } = useSavedViewTileContext();
+    const { localization } = useSavedViewsContext();
+    return (_jsx(LayeredMenuItem, { icon: _jsx(SvgBlank, {}), content: _jsx(MoveToGroupSubmenu, { savedView: savedView, groups: props.groups, moveToGroup: props.moveToGroup, moveToNewGroup: props.moveToNewGroup }, "move"), children: localization.moveToGroupMenu.moveToGroup }));
+}
+function MoveToGroupSubmenu(props) {
+    const { localization: { moveToGroupMenu } } = useSavedViewsContext();
+    const handleMoveToGroup = (groupId) => {
+        props.moveToGroup(props.savedView.id, groupId);
+    };
+    const { moveToNewGroup } = props;
+    const handleCreate = moveToNewGroup && ((groupName) => {
+        moveToNewGroup(props.savedView.id, 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))) }));
+}
+function ManageTags(props) {
+    const { savedView } = useSavedViewTileContext();
+    const { localization } = useSavedViewsContext();
+    return (_jsx(LayeredMenuItem, { icon: props.icon, content: _jsx(ManageTagsSubmenu, { savedView: savedView, tags: props.tags, addTag: props.addTag, addNewTag: props.addNewTag, removeTag: props.removeTag }, "tags"), children: localization.tagsMenu.tags }));
+}
+function ManageTagsSubmenu(props) {
+    const { localization } = useSavedViewsContext();
+    const handleTagClick = (tagId) => {
+        if (props.savedView.tagIds?.includes(tagId)) {
+            props.removeTag(props.savedView.id, tagId);
+        }
+        else {
+            props.addTag(props.savedView.id, tagId);
+        }
+    };
+    const { addNewTag } = props;
+    const handleCreate = addNewTag && ((tagName) => {
+        addNewTag(props.savedView.id, 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))) }));
+}
+function SearchableSubmenu(props) {
+    const { localization } = useSavedViewsContext();
+    const fuse = useMemo(() => new Fuse(props.collection, { keys: ["displayName"], threshold: 0.5 }), [props.collection]);
+    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) => {
+        setInputValue(event.target.value);
+    };
+    const { onCreate } = props;
+    const trimmedValue = trimInputString(inputValue);
+    const offerCreate = onCreate && trimmedValue && !searchResults.find((result) => result.displayName === trimmedValue);
+    const handleCreate = onCreate && (() => {
+        setInputValue("");
+        onCreate(trimmedValue);
+    });
+    return (_jsxs("div", { className: "svr-searchable-submenu", children: [_jsx(Input, { className: "svr-searchable-submenu-item", placeholder: props.placeholder, value: inputValue, onChange: handleSearchChange }), _jsxs("div", { children: [offerCreate &&
+                        _jsxs(MenuItem, { className: "svr-searchable-submenu-item", startIcon: _jsx(SvgAdd, {}), onClick: handleCreate, children: [props.creationLabel, "\u00A0", _jsx(Text, { className: "svr-semibold", as: "span", children: trimmedValue })] }), props.children(searchResults), searchResults.length === 0 &&
+                        _jsx(MenuItem, { sublabel: localization.searchableMenu.noSearchResults, size: "default", disabled: true })] })] }));
+}
+function Delete(props) {
+    const { savedView } = useSavedViewTileContext();
+    const { localization } = useSavedViewsContext();
+    return (_jsx(MenuItem, { startIcon: props.icon, onClick: () => props.deleteSavedView(savedView.id), children: localization.delete }));
+}