@itwin/saved-views-react 0.1.0

package/lib/SavedViewsWidget/SavedViewGroupTile/SavedViewGroupTile.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, 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 { SvgFolder } from "@itwin/itwinui-icons-react";
+import { Text, Tile } from "@itwin/itwinui-react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { EditableTileName } from "../../SavedViewTile/SavedViewTile.js";
+import { SavedViewGroupTileContextProvider } from "./SavedViewGroupTileContext.js";
+export function SavedViewGroupTile(props) {
+    const divRef = useRef(null);
+    const [editingName, setEditingName] = useState(false);
+    useLayoutEffect(() => {
+        if (props.focused && divRef.current) {
+            const scrollContainer = divRef.current.closest(".svr-saved-views-widget");
+            if (scrollContainer) {
+                scrollContainer.scrollTop = props.initialScrollTop;
+            }
+            divRef.current.querySelector("button")?.focus();
+            divRef.current.scrollIntoView({ block: "nearest" });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const dispatchOpenGroup = () => props.onOpen(props.group.id);
+    const savedViewGroupTileContext = useMemo(() => ({ group: props.group, setEditingName }), [props.group]);
+    return (_jsx(SavedViewGroupTileContextProvider, { value: savedViewGroupTileContext, children: _jsx("div", { ref: divRef, children: _jsx(Tile, { className: "svr-folder", variant: "folder", name: _jsx(EditableTileName, { displayName: props.group.displayName, editable: props.editable || editingName, editing: editingName, actions: {
+                        onStartEditing: () => setEditingName(true),
+                        onEndEditing: (newName) => {
+                            setEditingName(false);
+                            if (newName !== props.group.displayName) {
+                                props.onRename?.(props.group.id, newName);
+                            }
+                        },
+                    } }), thumbnail: _jsxs("div", { className: "svr-folder-edit", onClick: dispatchOpenGroup, children: [_jsx("div", { style: { position: "absolute" } }), _jsx(SvgFolder, { className: "iui-thumbnail-icon" })] }), isActionable: !props.editable && !editingName, moreOptions: (props.options && props.options.length > 0) ? props.options : undefined, onClick: dispatchOpenGroup, children: _jsxs(Text, { isMuted: true, children: [props.numItems, " items"] }) }) }) }));
+}

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

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

package/lib/SavedViewsWidget/SavedViewGroupTile/SavedViewGroupTileContext.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 savedViewGroupTileContext = createContext(undefined);
+savedViewGroupTileContext.displayName = "SavedViewGroupTileContext";
+/** @internal */
+export const SavedViewGroupTileContextProvider = savedViewGroupTileContext.Provider;
+/**
+ * Context that's accessable within `<SavedViewGroupTile />` component. You can use this to make custom actions for
+ * `SavedViewGroupTile`.
+ */
+export function useSavedViewGroupTileContext() {
+    const contextValue = useContext(savedViewGroupTileContext);
+    return contextValue ?? {
+        group: { id: "SavedViewGroupTileContext_NoContext", displayName: "" },
+        setEditingName: () => { },
+    };
+}

package/lib/SavedViewsWidget/SavedViewsExpandableBlockWidget.css

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@layer itwin-svr {
+  .svr-saved-views-widget {
+    --itwin-svr-tile-width: calc(8 * var(--iui-size-xl));
+    --itwin-svr-thumbnail-height: calc(4 * var(--iui-size-xl));
+
+    overflow: auto;
+  }
+
+  .svr-group-grid {
+    --itwin-svr-tile-width: calc(3 * var(--iui-size-3xl));
+  }
+
+  .svr-folder .iui-tile-thumbnail {
+    position: relative;
+  }
+
+  .svr-folder-edit.svr-folder-edit {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+  }
+
+  .svr-folder-edit.svr-folder-edit > div {
+    height: 100%;
+    width: 100%;
+    visibility: hidden;
+    display: grid;
+    place-items: center;
+    background: var(--iui-color-background-transparent-hover);
+  }
+
+  .svr-folder .svr-folder-edit.svr-folder-edit:hover > div {
+    visibility: visible;
+  }
+
+  .svr-borderless-expandable-block-title {
+    display: flex;
+    gap: var(--iui-size-xs);
+    align-items: center;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TYXZlZFZpZXdzV2lkZ2V0L1NhdmVkVmlld3NFeHBhbmRhYmxlQmxvY2tXaWRnZXQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IlNhdmVkVmlld3NFeHBhbmRhYmxlQmxvY2tXaWRnZXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cblxuQGxheWVyIGl0d2luLXN2ciB7XG4gIC5zdnItc2F2ZWQtdmlld3Mtd2lkZ2V0IHtcbiAgICAtLWl0d2luLXN2ci10aWxlLXdpZHRoOiBjYWxjKDggKiB2YXIoLS1pdWktc2l6ZS14bCkpO1xuICAgIC0taXR3aW4tc3ZyLXRodW1ibmFpbC1oZWlnaHQ6IGNhbGMoNCAqIHZhcigtLWl1aS1zaXplLXhsKSk7XG5cbiAgICBvdmVyZmxvdzogYXV0bztcbiAgfVxuXG4gIC5zdnItZ3JvdXAtZ3JpZCB7XG4gICAgLS1pdHdpbi1zdnItdGlsZS13aWR0aDogY2FsYygzICogdmFyKC0taXVpLXNpemUtM3hsKSk7XG4gIH1cblxuICAuc3ZyLWZvbGRlciAuaXVpLXRpbGUtdGh1bWJuYWlsIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cblxuICAuc3ZyLWZvbGRlci1lZGl0LnN2ci1mb2xkZXItZWRpdCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgcGxhY2UtaXRlbXM6IGNlbnRlcjtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cblxuICAuc3ZyLWZvbGRlci1lZGl0LnN2ci1mb2xkZXItZWRpdCA+IGRpdiB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIHBsYWNlLWl0ZW1zOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZDogdmFyKC0taXVpLWNvbG9yLWJhY2tncm91bmQtdHJhbnNwYXJlbnQtaG92ZXIpO1xuICB9XG5cbiAgLnN2ci1mb2xkZXIgLnN2ci1mb2xkZXItZWRpdC5zdnItZm9sZGVyLWVkaXQ6aG92ZXIgPiBkaXYge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cblxuICAuc3ZyLWJvcmRlcmxlc3MtZXhwYW5kYWJsZS1ibG9jay10aXRsZSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLWl1aS1zaXplLXhzKTtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB9XG59XG4iXX0= */

package/lib/SavedViewsWidget/SavedViewsExpandableBlockWidget.d.ts

@@ -0,0 +1,36 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { SavedView, SavedViewGroup, SavedViewTag } from "../SavedView.js";
+import type { SavedViewActions } from "../useSavedViews.js";
+import "./SavedViewsExpandableBlockWidget.css";
+interface SavedViewsExpandableBlockWidgetProps {
+    savedViews: Map<string, SavedView>;
+    groups: Map<string, SavedViewGroup>;
+    tags: Map<string, SavedViewTag>;
+    actions?: Partial<SavedViewActions> | undefined;
+    editable?: boolean | undefined;
+    options?: ((savedView: SavedView) => (((close: () => void) => ReactElement[]) | ReactElement[])) | undefined;
+}
+export declare function SavedViewsExpandableBlockWidget(props: SavedViewsExpandableBlockWidgetProps): ReactElement;
+interface SavedViewsGroupProps {
+    group: SavedViewGroup | undefined;
+    savedViews: Map<string, SavedView>;
+    groups: Map<string, SavedViewGroup>;
+    tags: Map<string, SavedViewTag>;
+    expanded?: boolean | undefined;
+    actions?: Partial<SavedViewActions> | undefined;
+    editable?: boolean | undefined;
+    options?: ((savedView: SavedView) => (((close: () => void) => ReactElement[]) | ReactElement[])) | undefined;
+}
+export declare function SavedViewsGroup(props: SavedViewsGroupProps): ReactElement;
+interface BorderlessExpandableBlockProps {
+    displayName: string;
+    numItems: number;
+    expanded?: boolean | undefined;
+    shared?: boolean | undefined;
+    editable?: boolean | undefined;
+    onExpandToggle?: (expanded: boolean) => void;
+    className?: string | undefined;
+    children: ReactNode;
+}
+export declare function BorderlessExpandableBlock(props: BorderlessExpandableBlockProps): ReactElement;
+export {};

package/lib/SavedViewsWidget/SavedViewsExpandableBlockWidget.js

@@ -0,0 +1,36 @@
+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 { SvgBlank, SvgEdit, SvgMore, SvgShare } from "@itwin/itwinui-icons-react";
+import { DropdownMenu, IconButton, MenuItem, Text } from "@itwin/itwinui-react";
+import { useState } from "react";
+import { SavedViewTile } from "../SavedViewTile/SavedViewTile.js";
+import { StickyExpandableBlock } from "../StickyExpandableBlock/StickyExpandableBlock.js";
+import { TileGrid } from "../TileGrid/TileGrid.js";
+import "./SavedViewsExpandableBlockWidget.css";
+export function SavedViewsExpandableBlockWidget(props) {
+    return (_jsxs("div", { className: "svr-saved-views-widget", children: [_jsx(SavedViewsGroup, { group: undefined, savedViews: props.savedViews, actions: props.actions, groups: props.groups, tags: props.tags, editable: props.editable, options: props.options, expanded: true }), [...props.groups.values()].map((group) => _jsx(SavedViewsGroup, { group: group, savedViews: props.savedViews, groups: props.groups, tags: props.tags, actions: props.actions, editable: props.editable, options: props.options }, group.id))] }));
+}
+export function SavedViewsGroup(props) {
+    const savedViews = [...props.savedViews.values()].filter(({ groupId }) => groupId === props.group?.id);
+    return (_jsx(BorderlessExpandableBlock, { displayName: props.group?.displayName ?? "Ungrouped", numItems: savedViews.length, expanded: props.expanded, shared: props.group?.shared, editable: props.editable, children: _jsx(TileGrid, { gridItems: savedViews, children: (savedView) => (_jsx(SavedViewTile, { savedView: savedView, tags: props.tags, editable: props.editable, onRename: props.actions?.renameSavedView, options: props.options?.(savedView) }, savedView.id)) }) }));
+}
+export function BorderlessExpandableBlock(props) {
+    const handleEditGroupClick = (closeDropdown) => {
+        closeDropdown();
+    };
+    const [expanded, setExpanded] = useState(props.expanded ?? false);
+    const handleExpandToggle = (expanded) => {
+        setExpanded(expanded);
+        props.onExpandToggle?.(expanded);
+    };
+    return (_jsx(StickyExpandableBlock, { titleClassName: "svr-borderless-expandable-block-title", title: _jsxs(_Fragment, { children: [props.shared && _jsx(SvgShare, {}), _jsx(Text, { children: props.displayName }), _jsxs(Text, { isMuted: true, children: ["(", props.numItems, ")"] })] }), endIcon: props.editable &&
+            _jsx(DropdownMenu, { menuItems: (close) => [
+                    _jsx(MenuItem, { startIcon: _jsx(SvgEdit, {}), onClick: () => handleEditGroupClick(close), children: "Edit" }, "edit"),
+                    props.shared
+                        ? _jsx(MenuItem, { startIcon: _jsx(SvgBlank, {}), children: "Unshare" }, "unshare")
+                        : _jsx(MenuItem, { startIcon: _jsx(SvgBlank, {}), children: "Share" }, "share"),
+                ], children: _jsx(IconButton, { styleType: "borderless", size: "small", children: _jsx(SvgMore, {}) }) }), isExpanded: expanded, onToggle: handleExpandToggle, children: expanded && props.children }));
+}

package/lib/SavedViewsWidget/SavedViewsFolderWidget.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import type { SavedView, SavedViewGroup, SavedViewTag } from "../SavedView.js";
+import type { SavedViewActions } from "../useSavedViews.js";
+interface SavedViewsFolderWidgetProps {
+    savedViews: Map<string, SavedView>;
+    groups: Map<string, SavedViewGroup>;
+    tags: Map<string, SavedViewTag>;
+    actions?: Partial<SavedViewActions> | undefined;
+    editable?: boolean | undefined;
+    options?: ((savedView: SavedView) => (((close: () => void) => ReactElement[]) | ReactElement[])) | undefined;
+    onTileClick?: ((selectedViewId: string) => void) | undefined;
+}
+export declare function SavedViewsFolderWidget(props: SavedViewsFolderWidgetProps): ReactElement;
+export {};

package/lib/SavedViewsWidget/SavedViewsFolderWidget.js

@@ -0,0 +1,60 @@
+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 { SvgChevronLeft, SvgHome } from "@itwin/itwinui-icons-react";
+import { Breadcrumbs, Button, DropdownButton, IconButton, MenuItem } from "@itwin/itwinui-react";
+import { useCallback, useMemo, useState } from "react";
+import { SavedViewTile } from "../SavedViewTile/SavedViewTile.js";
+import { TileGrid } from "../TileGrid/TileGrid.js";
+import { SavedViewGroupOptions } from "./SavedViewGroupTile/SavedViewGroupOptions.js";
+import { SavedViewGroupTile } from "./SavedViewGroupTile/SavedViewGroupTile.js";
+import { BorderlessExpandableBlock } from "./SavedViewsExpandableBlockWidget.js";
+export function SavedViewsFolderWidget(props) {
+    const groupedSavedViews = useMemo(() => {
+        const ungrouped = [];
+        const groups = new Map([[undefined, ungrouped]]);
+        for (const groupId of props.groups.keys()) {
+            groups.set(groupId, []);
+        }
+        for (const savedView of props.savedViews.values()) {
+            const group = groups.get(savedView.groupId) ?? ungrouped;
+            group.push(savedView);
+        }
+        return groups;
+    }, [props.savedViews, props.groups]);
+    const [state, setState] = useState({ activeGroupId: undefined, focusedGroupId: undefined });
+    const [storedScrollOffset, setStoredScrollOffset] = useState(0);
+    const handleGroupOpen = useCallback((activeGroupId) => setState({ activeGroupId, focusedGroupId: undefined }), []);
+    const activeGroup = state.activeGroupId !== undefined && props.groups.get(state.activeGroupId);
+    if (!activeGroup) {
+        return (_jsx(SavedViewsHomeScreen, { groupedSavedViews: groupedSavedViews, groups: props.groups, tags: props.tags, focusedGroupId: state.focusedGroupId, clearFocusedGroup: () => setState(({ activeGroupId }) => ({ activeGroupId, focusedGroupId: undefined })), onGroupOpen: handleGroupOpen, initialScrollTop: storedScrollOffset, storeScrollOffset: setStoredScrollOffset, actions: props.actions, editable: props.editable, savedViewOptions: props.options, onTileClick: props.onTileClick }));
+    }
+    return (_jsx(SavedViewsGroupScreen, { activeGroup: activeGroup, groups: props.groups, tags: props.tags, savedViews: groupedSavedViews.get(activeGroup.id) ?? [], setActiveGroup: (activeGroupId) => setState({ activeGroupId, focusedGroupId: state.activeGroupId }), actions: props.actions, editable: props.editable, options: props.options, onTileClick: props.onTileClick }, activeGroup.id));
+}
+function SavedViewsHomeScreen(props) {
+    const ungroupedSavedViews = props.groupedSavedViews.get(undefined) ?? [];
+    const groupTiles = useMemo(() => [...props.groups.values()].map((group) => _jsx(SavedViewGroupTile, { group: group, numItems: props.groupedSavedViews.get(group.id)?.length ?? 0, onOpen: props.onGroupOpen, focused: group.id === props.focusedGroupId, initialScrollTop: props.initialScrollTop, editable: props.editable, options: [
+            _jsx(SavedViewGroupOptions.Rename, {}, "rename"),
+            _jsx(MenuItem, { onClick: () => props.actions?.deleteGroup?.(group.id), children: "Delete" }, "delete"),
+        ], onRename: props.actions?.renameGroup }, group.id)), [
+        props.groups,
+        props.groupedSavedViews,
+        props.onGroupOpen,
+        props.focusedGroupId,
+        props.initialScrollTop,
+        props.editable,
+        props.actions,
+    ]);
+    return (_jsxs("div", { className: "svr-saved-views-widget", style: { overflow: "auto" }, onScroll: (event) => props.storeScrollOffset(event.target.scrollTop), children: [_jsx(BorderlessExpandableBlock, { displayName: "Saved views", numItems: ungroupedSavedViews.length, expanded: true, children: _jsx(TileGrid, { gridItems: ungroupedSavedViews, children: (savedView) => _jsx(SavedViewTile, { savedView: savedView, tags: props.tags, editable: props.editable, onRename: props.actions?.renameSavedView, options: props.savedViewOptions?.(savedView), onClick: props.onTileClick }, savedView.id) }) }), _jsx(BorderlessExpandableBlock, { className: "svr-group-grid", displayName: "Groups", numItems: props.groups.size, expanded: true, onExpandToggle: (expanded) => !expanded && props.clearFocusedGroup?.(), editable: props.editable, children: _jsx("div", { className: "svr-tile-grid", children: groupTiles }) })] }));
+}
+function SavedViewsGroupScreen(props) {
+    const groups = useMemo(() => [...props.groups.values()], [props.groups]);
+    return (_jsxs("div", { className: "svr-saved-views-widget", style: { display: "grid", grid: "auto 1fr / 1fr" }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    gap: "var(--iui-size-s)",
+                    background: "var(--iui-color-background)",
+                    padding: "var(--iui-size-s)",
+                }, children: [_jsx(Button, { startIcon: _jsx(SvgChevronLeft, {}), onClick: () => props.setActiveGroup(undefined), children: "Back" }), _jsxs(Breadcrumbs, { children: [_jsx(IconButton, { onClick: () => props.setActiveGroup(undefined), children: _jsx(SvgHome, {}) }), _jsx(DropdownButton, { menuItems: (close) => groups.map((group) => _jsx(MenuItem, { onClick: () => { close(); props.setActiveGroup(group.id); }, children: group.displayName }, group.id)), children: props.activeGroup.displayName })] })] }), _jsx("div", { style: { overflow: "auto" }, children: _jsx(TileGrid, { gridItems: props.savedViews, children: (savedView) => (_jsx(SavedViewTile, { savedView: savedView, tags: props.tags, editable: props.editable, options: props.options?.(savedView), onClick: props.onTileClick }, savedView.id)) }) })] }));
+}

package/lib/StickyExpandableBlock/StickyExpandableBlock.css

@@ -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.
+*--------------------------------------------------------------------------------------------*/
+
+.svr-expandable-block-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.svr-expandable-block-header[data-stuck=true] {
+  box-shadow: var(--iui-shadow-1);
+}
+
+.svr-expandable-block-header:not(:hover) {
+  background: var(--iui-color-background);
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9TdGlja3lFeHBhbmRhYmxlQmxvY2svU3RpY2t5RXhwYW5kYWJsZUJsb2NrLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJTdGlja3lFeHBhbmRhYmxlQmxvY2suY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cblxuLnN2ci1leHBhbmRhYmxlLWJsb2NrLWhlYWRlciB7XG4gIHBvc2l0aW9uOiBzdGlja3k7XG4gIHRvcDogMDtcbiAgei1pbmRleDogMTtcbn1cblxuLnN2ci1leHBhbmRhYmxlLWJsb2NrLWhlYWRlcltkYXRhLXN0dWNrPXRydWVdIHtcbiAgYm94LXNoYWRvdzogdmFyKC0taXVpLXNoYWRvdy0xKTtcbn1cblxuLnN2ci1leHBhbmRhYmxlLWJsb2NrLWhlYWRlcjpub3QoOmhvdmVyKSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWl1aS1jb2xvci1iYWNrZ3JvdW5kKTtcbn1cbiJdfQ== */

package/lib/StickyExpandableBlock/StickyExpandableBlock.d.ts

@@ -0,0 +1,29 @@
+import { type ReactElement, type ReactNode } from "react";
+import "./StickyExpandableBlock.css";
+interface StickyExpandableBlockProps {
+    /** Expandable block title. */
+    title: ReactNode;
+    /** Icon that goes after the expandable block title. */
+    endIcon?: ReactNode | undefined;
+    /** Forwarded to iTwinUI `<ExpandableBlock />`. */
+    isExpanded?: boolean | undefined;
+    /** Forwarded to iTwinUI `<ExpandableBlock />`. */
+    onToggle?: ((expanded: boolean) => void) | undefined;
+    /** `className` of the wrapping container. */
+    className?: string | undefined;
+    /** `className` of the title container. */
+    titleClassName?: string | undefined;
+    /** Expandable block content. */
+    children?: ReactNode | undefined;
+}
+/**
+ * Alternative to <ExpandableBlock /> component from iTwinUI. Its label sticks to the top of scroll container when user
+ * scrolls down.
+ *
+ * @example
+ * <StickyExpandableBlock title="Block">
+ *   Content
+ * </StickyExpandableBlock>
+ */
+export declare function StickyExpandableBlock(props: StickyExpandableBlockProps): ReactElement;
+export {};

package/lib/StickyExpandableBlock/StickyExpandableBlock.js

@@ -0,0 +1,63 @@
+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 { ExpandableBlock } from "@itwin/itwinui-react";
+import { useLayoutEffect, useRef, useState, } from "react";
+import "./StickyExpandableBlock.css";
+/**
+ * Alternative to <ExpandableBlock /> component from iTwinUI. Its label sticks to the top of scroll container when user
+ * scrolls down.
+ *
+ * @example
+ * <StickyExpandableBlock title="Block">
+ *   Content
+ * </StickyExpandableBlock>
+ */
+export function StickyExpandableBlock(props) {
+    // Prevent clicks on the end icon toggling expansion state
+    const handleGroupMenuClick = (event) => {
+        event.stopPropagation();
+    };
+    // When clicking the label while it's stuck at the top, we want the label to remain visible after the expandable block
+    // collapses
+    const scrollbackRef = useRef(null);
+    const handleExpandToggle = (expanded) => {
+        props.onToggle?.(expanded);
+        if (!expanded) {
+            scrollbackRef.current?.scrollIntoView({ block: "nearest" });
+        }
+    };
+    const stickyRef = useRef(null);
+    const stuck = useSticky(stickyRef);
+    return (_jsxs(ExpandableBlock.Wrapper, { className: props.className, styleType: "borderless", isExpanded: props.isExpanded, onToggle: handleExpandToggle, children: [_jsx("div", { ref: scrollbackRef }), _jsxs(ExpandableBlock.Trigger, { ref: stickyRef, as: "div", className: "svr-expandable-block-header", "data-stuck": stuck, role: "button", children: [_jsx(ExpandableBlock.ExpandIcon, {}), _jsx(ExpandableBlock.LabelArea, { children: _jsx(ExpandableBlock.Title, { className: props.titleClassName, children: props.title }) }), props.endIcon &&
+                        _jsx(ExpandableBlock.EndIcon, { onClick: handleGroupMenuClick, children: props.endIcon })] }), _jsx(ExpandableBlock.Content, { children: props.children })] }));
+}
+function useSticky(ref) {
+    const [stuck, setStuck] = useState(false);
+    useLayoutEffect(() => {
+        const stuckElement = ref.current;
+        if (!stuckElement) {
+            return;
+        }
+        const scrollableParent = findScrollableParent(stuckElement.parentElement);
+        const handleScroll = () => {
+            const parentOffset = stuckElement.parentElement?.offsetTop ?? stuckElement.offsetTop;
+            setStuck(parentOffset < stuckElement.offsetTop);
+        };
+        scrollableParent?.addEventListener("scroll", handleScroll);
+        return () => scrollableParent?.removeEventListener("scroll", handleScroll);
+    }, [ref]);
+    return stuck;
+}
+function findScrollableParent(element) {
+    if (!element) {
+        return undefined;
+    }
+    const style = getComputedStyle(element);
+    if (style.overflowY !== "visible" && style.overflowY !== "hidden") {
+        return element;
+    }
+    return findScrollableParent(element.parentElement);
+}

package/lib/TileGrid/TileGrid.css

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@layer itwin-svr {
+  .svr-tile-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, var(--itwin-svr-tile-width));
+    place-content: start space-around;
+    place-items: center;
+    gap: var(--iui-size-m);
+    margin: var(--iui-size-xs) var(--iui-size-s);
+    margin-bottom: var(--iui-size-l);
+  }
+
+  .svr-tile-grid--more-items-tile {
+    padding: var(--iui-size-m);
+    display: grid;
+    gap: var(--iui-size-s);
+    justify-items: center;
+    width: calc(0.8 * var(--itwin-svr-tile-width));
+    text-align: center;
+    min-width: min-content;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UaWxlR3JpZC9UaWxlR3JpZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiVGlsZUdyaWQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiogQ29weXJpZ2h0IChjKSBCZW50bGV5IFN5c3RlbXMsIEluY29ycG9yYXRlZC4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiogU2VlIExJQ0VOU0UubWQgaW4gdGhlIHByb2plY3Qgcm9vdCBmb3IgbGljZW5zZSB0ZXJtcyBhbmQgZnVsbCBjb3B5cmlnaHQgbm90aWNlLlxuKi0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cblxuQGxheWVyIGl0d2luLXN2ciB7XG4gIC5zdnItdGlsZS1ncmlkIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZmlsbCwgdmFyKC0taXR3aW4tc3ZyLXRpbGUtd2lkdGgpKTtcbiAgICBwbGFjZS1jb250ZW50OiBzdGFydCBzcGFjZS1hcm91bmQ7XG4gICAgcGxhY2UtaXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLWl1aS1zaXplLW0pO1xuICAgIG1hcmdpbjogdmFyKC0taXVpLXNpemUteHMpIHZhcigtLWl1aS1zaXplLXMpO1xuICAgIG1hcmdpbi1ib3R0b206IHZhcigtLWl1aS1zaXplLWwpO1xuICB9XG5cbiAgLnN2ci10aWxlLWdyaWQtLW1vcmUtaXRlbXMtdGlsZSB7XG4gICAgcGFkZGluZzogdmFyKC0taXVpLXNpemUtbSk7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBnYXA6IHZhcigtLWl1aS1zaXplLXMpO1xuICAgIGp1c3RpZnktaXRlbXM6IGNlbnRlcjtcbiAgICB3aWR0aDogY2FsYygwLjggKiB2YXIoLS1pdHdpbi1zdnItdGlsZS13aWR0aCkpO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBtaW4td2lkdGg6IG1pbi1jb250ZW50O1xuICB9XG59XG4iXX0= */

package/lib/TileGrid/TileGrid.d.ts

@@ -0,0 +1,48 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from "react";
+import "./TileGrid.css";
+interface TileGridProps<T> {
+    /** Items to be displayed in the grid. */
+    gridItems: T[];
+    /**
+     * Amount of items to reveal with each "Show more" trigger. You can disable pagination by specifying a large number,
+     * e.g. `Number.MAX_VALUE`.
+     *
+     * @default 12
+     */
+    pageSize?: number | undefined;
+    /**
+     * Overrides the default "Show more" tile.
+     *
+     * @param moreAvailable Number of unrevealed items
+     * @param revealMore When invoked, increases the amount of revealed items
+     * @returns Content to be placed after all revealed items
+     */
+    moreItemsTile?: ((numMoreAvailable: number, revealMore: () => void) => ReactNode) | undefined;
+    /** `className` of the wrapping element. */
+    className?: string | undefined;
+    /**
+     * `style` of the wrapping element. You can control the column width by setting `--itwin-svr-tile-width` CSS variable.
+     *
+     * @example
+     * <TileGrid gridItems={items} style={{ "--itwin-svr-tile-width": "200px" }}>
+     *   {renderItem}
+     * </TileGrid>
+     */
+    style?: (CSSProperties & CustomCSSVariables) | undefined;
+    /** Invoked with items that are currently revealed. */
+    children: (gridItem: T) => ReactNode;
+}
+interface CustomCSSVariables {
+    /** Width of grid columns. */
+    "--itwin-svr-tile-width"?: string | undefined;
+}
+/**
+ * Grid layout for Saved View tiles. Limits the amount of visible tiles and gives option to the user to reveal more.
+ *
+ * @example
+ * <TileGrid gridItems={savedViews}>
+ *   {(savedView) => <SavedViewTile key={savedView.id} savedView={savedView} />}
+ * </TileGrid>
+ */
+export declare function TileGrid<T>(props: TileGridProps<T>): ReactElement;
+export {};

package/lib/TileGrid/TileGrid.js

@@ -0,0 +1,32 @@
+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 { Button, Surface, Text } from "@itwin/itwinui-react";
+import { useState } from "react";
+import { useSavedViewsContext } from "../SavedViewsContext.js";
+import "./TileGrid.css";
+/**
+ * Grid layout for Saved View tiles. Limits the amount of visible tiles and gives option to the user to reveal more.
+ *
+ * @example
+ * <TileGrid gridItems={savedViews}>
+ *   {(savedView) => <SavedViewTile key={savedView.id} savedView={savedView} />}
+ * </TileGrid>
+ */
+export function TileGrid(props) {
+    const pageSize = props.pageSize ?? 12;
+    const [softLimit, setSoftLimit] = useState(pageSize - 1);
+    const tiles = props.gridItems
+        .slice(0, props.gridItems.length > softLimit + pageSize ? softLimit : undefined)
+        .map((gridItem) => props.children(gridItem));
+    const numMoreAvailable = props.gridItems.length - tiles.length;
+    const moreItemsTile = props.moreItemsTile ?? ((numMoreAvailable, revealMore) => (_jsx(MoreItemsTile, { numMoreAvailable: numMoreAvailable, revealMore: revealMore })));
+    return (_jsxs("div", { className: `svr-tile-grid ${props.className ?? ""}`, style: props.style, children: [tiles, numMoreAvailable > 0 &&
+                moreItemsTile(numMoreAvailable, () => setSoftLimit((prev) => prev + pageSize))] }));
+}
+function MoreItemsTile(props) {
+    const { localization } = useSavedViewsContext();
+    return (_jsxs(Surface, { className: "svr-tile-grid--more-items-tile", elevation: 0, children: [_jsx(Text, { variant: "headline", children: props.numMoreAvailable }), _jsx(Text, { variant: "leading", children: localization.tileGrid.moreAvailable }), _jsx(Button, { onClick: props.revealMore, children: localization.tileGrid.showMore })] }));
+}

package/lib/api/clients/IModelQueryClient.d.ts

@@ -0,0 +1,10 @@
+import type { Id64Array } from "@itwin/core-bentley";
+import type { IModelConnection } from "@itwin/core-frontend";
+export declare const IModelQueryClient: {
+    getAllModels: (iModel: IModelConnection) => Promise<Id64Array>;
+    getAllCategories: (iModel: IModelConnection) => Promise<Id64Array>;
+    getAllModelsAndCategories: (iModel: IModelConnection) => Promise<{
+        models: Id64Array;
+        categories: Id64Array;
+    }>;
+};

package/lib/api/clients/IModelQueryClient.js

@@ -0,0 +1,45 @@
+import { QueryRowFormat } from "@itwin/core-common";
+/**
+ * Helper function to execute ECSql queries.
+ */
+const executeQuery = async (iModel, query) => {
+    const rows = [];
+    const sqlReader = iModel.createQueryReader(query, undefined, {
+        rowFormat: QueryRowFormat.UseJsPropertyNames,
+    });
+    const result = await sqlReader.toArray();
+    for (const row of result) {
+        rows.push(row.id);
+    }
+    return rows;
+};
+export const IModelQueryClient = {
+    getAllModels: async (iModel) => {
+        // Note: IsNotSpatiallyLocated was introduced in a later version of the BisCore ECSchema.
+        // If the iModel has an earlier version, the statement will throw because the property does not exist.
+        // If the iModel was created from an earlier version and later upgraded to a newer version, the property may be NULL for models created prior to the upgrade.
+        let query = "SELECT ECInstanceId FROM Bis.GeometricModel3D WHERE IsPrivate = false AND IsTemplate = false AND (IsNotSpatiallyLocated IS NULL OR IsNotSpatiallyLocated = false)";
+        let models = [];
+        try {
+            models = await executeQuery(iModel, query);
+        }
+        catch {
+            query =
+                "SELECT ECInstanceId FROM Bis.GeometricModel3D WHERE IsPrivate = false AND IsTemplate = false";
+            models = await executeQuery(iModel, query);
+        }
+        return models;
+    },
+    getAllCategories: async (iModel) => {
+        // Only use categories with elements in them
+        const query = "SELECT DISTINCT Category.Id AS id FROM BisCore.GeometricElement3d WHERE Category.Id IN (SELECT ECInstanceId FROM BisCore.SpatialCategory)";
+        const categories = await executeQuery(iModel, query);
+        return categories;
+    },
+    getAllModelsAndCategories: async (iModel) => {
+        return {
+            models: await IModelQueryClient.getAllModels(iModel),
+            categories: await IModelQueryClient.getAllCategories(iModel),
+        };
+    },
+};

package/lib/api/clients/ISavedViewsClient.d.ts

@@ -0,0 +1,9 @@
+import type { LegacySavedView, LegacySavedViewBase } from "../utilities/SavedViewTypes.js";
+/** Is a 3d saved view */
+export declare function isSavedView3d(view: LegacySavedViewBase): view is LegacySavedView;
+/** Is a 3d spatial saved view */
+export declare function isSpatialSavedView(view: LegacySavedViewBase): boolean;
+/** Is a 2d drawing saved view */
+export declare function isDrawingSavedView(view: LegacySavedViewBase): boolean;
+/** Is a 2d sheet saved view */
+export declare function isSheetSavedView(view: LegacySavedViewBase): boolean;

package/lib/api/clients/ISavedViewsClient.js

@@ -0,0 +1,16 @@
+/** Is a 3d saved view */
+export function isSavedView3d(view) {
+    return !view.is2d;
+}
+/** Is a 3d spatial saved view */
+export function isSpatialSavedView(view) {
+    return ((view.is2d === undefined || !view.is2d) && "modelSelectorProps" in view);
+}
+/** Is a 2d drawing saved view */
+export function isDrawingSavedView(view) {
+    return view.is2d !== undefined && view.is2d && !("sheetProps" in view);
+}
+/** Is a 2d sheet saved view */
+export function isSheetSavedView(view) {
+    return view.is2d !== undefined && view.is2d && "sheetProps" in view;
+}