@squiz/resource-browser 1.32.1-alpha.12

package/lib/SourceDropdown/SourceDropdown.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const interactions_1 = require("@react-aria/interactions");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const Icon_1 = __importDefault(require("../Icons/Icon"));
+const uuid_1 = __importDefault(require("../uuid"));
+function SourceDropdown({ sources, currentSource, isLoading, onRootSelect, onSourceSelect, }) {
+    const [uniqueId] = (0, react_1.useState)((0, uuid_1.default)());
+    const buttonRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    // Watch the focus and blur on the menu and close if focus leaves the control
+    const { focusWithinProps } = (0, interactions_1.useFocusWithin)({
+        onBlurWithin: () => {
+            setIsOpen(false);
+        },
+    });
+    // Listen for Esc key within this element
+    const { keyboardProps } = (0, interactions_1.useKeyboard)({
+        onKeyDown: (e) => {
+            if (isOpen && e.key === 'Escape') {
+                setIsOpen(false);
+                buttonRef.current?.focus(); // Restore focus to the element which opened the menu
+            }
+        },
+    });
+    const handleSourceClick = (id) => {
+        setIsOpen(false);
+        buttonRef.current?.focus();
+        onSourceSelect(id, true);
+    };
+    const handleRootSelect = () => {
+        setIsOpen(false);
+        buttonRef.current?.focus();
+        onRootSelect();
+    };
+    let currentResource = undefined;
+    for (let i = 0; i < sources.length; i++) {
+        const source = sources[i];
+        if (currentSource?.source === source.id) {
+            currentResource = source.nodes.find((node) => {
+                if (node.id.id === currentSource?.id) {
+                    return node;
+                }
+            });
+        }
+    }
+    return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border border-2 rounded border-gray-300" },
+        react_1.default.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center text-sm font-semibold p-2 w-full" },
+            currentResource && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "sr-only" }, "current source "),
+                react_1.default.createElement(Icon_1.default, { icon: currentResource.type, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5" }),
+                react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, currentResource.label))),
+            !currentResource && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "sr-only" }, "view "),
+                react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
+                "All available sources")),
+            react_1.default.createElement(Icon_1.default, { icon: 'arrow-down', "aria-hidden": true, className: "absolute right-3" })),
+        react_1.default.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border border-2 rounded border-gray-300 p-2 ${!isOpen ? 'hidden' : ''}` },
+            react_1.default.createElement("li", { key: "return-root", className: "flex items-center text-sm font-semibold mb-2 bg-white border rounded border-grey-200" },
+                react_1.default.createElement("button", { type: "button", onClick: handleRootSelect, className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
+                    react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
+                    "All available sources")),
+            isLoading && (react_1.default.createElement("li", { className: "mt-6" },
+                react_1.default.createElement(Spinner_1.default, { size: "lg", label: "Loading sources" }))),
+            !isLoading &&
+                sources.map(({ id: sourceId, name, nodes }, index) => {
+                    return (react_1.default.createElement("li", { key: sourceId, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
+                        react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
+                            react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, name)),
+                        nodes?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${name} nodes`, className: "flex flex-col mt-2" }, nodes.map(({ type, id: nodeId, selected, label }) => {
+                            return (react_1.default.createElement("li", { key: `${sourceId}-${nodeId.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
+                                react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick(nodeId), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${selected ? 'bg-blue-100 text-blue-400' : ''}` },
+                                    react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: "shrink-0 mr-2.5" }),
+                                    react_1.default.createElement("span", { className: "text-left mr-7" }, label),
+                                    nodeId === currentResource?.id && (react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+                        })))));
+                }))));
+}
+exports.default = SourceDropdown;

package/lib/SourceList/SourceList.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { NodeIdentifier, Source } from '../index';
+export interface SourceListProps {
+    sources: Array<Source>;
+    previewModalState: OverlayTriggerState;
+    isLoading: boolean;
+    onSourceSelect: (node: NodeIdentifier, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onSourceDrillDown: (node: NodeIdentifier) => void;
+    allowedTypes?: string[] | undefined;
+}
+declare const SourceList: ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, }: SourceListProps) => JSX.Element;
+export default SourceList;

package/lib/SourceList/SourceList.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ResourceItem_1 = __importDefault(require("../ResourceItem/ResourceItem"));
+const SkeletonList_1 = require("../Skeleton/List/SkeletonList");
+const clsx_1 = __importDefault(require("clsx"));
+const SourceList = function ({ sources, previewModalState, isLoading, onSourceSelect, onSourceDrillDown, allowedTypes, }) {
+    const listRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (listRef.current) {
+            listRef.current?.focus({
+                preventScroll: true,
+            });
+        }
+    }, []);
+    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `${isLoading ? 'loading' : ''} Source list`, className: (0, clsx_1.default)('flex flex-col bg-gray-100 min-h-full', !isLoading && 'px-7 py-4') },
+        isLoading && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("li", null,
+                react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })),
+            react_1.default.createElement("li", null,
+                react_1.default.createElement(SkeletonList_1.SkeletonList, { itemCount: 3 })))),
+        !isLoading &&
+            sources.map(({ id: sourceId, name, nodes }, index) => {
+                return (react_1.default.createElement("li", { key: sourceId, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
+                    react_1.default.createElement("div", { className: "relative flex justify-center before:w-full before:h-px before:bg-gray-300 before:absolute before:top-2/4 before:z-0" },
+                        react_1.default.createElement("span", { className: "z-10 bg-gray-100 px-2.5" }, name)),
+                    nodes?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${name} nodes`, className: "flex flex-col" }, nodes.map(({ type, id: nodeId, selected, label, childCount }) => {
+                        return (react_1.default.createElement(ResourceItem_1.default, { key: `${sourceId}-${nodeId.id}`, id: nodeId, selected: selected, label: label, type: type, childCount: childCount, previewModalState: previewModalState, onSelect: onSourceSelect, onDrillDown: onSourceDrillDown, className: "mt-3 rounded-lg", allowedTypes: allowedTypes }));
+                    })))));
+            })));
+};
+exports.default = SourceList;

package/lib/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export type SpinnerProps = {
+    size?: 'md' | 'lg';
+    className?: string;
+    label?: string;
+};
+declare const Spinner: ({ size, className, label }: SpinnerProps) => ReactElement;
+export default Spinner;

package/lib/Spinner/Spinner.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const Spinner = ({ size = 'md', className, label = 'Loading' }) => {
+    return (react_1.default.createElement("div", { className: "spinner__wrapper", "aria-label": label },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)(`spinner`, size && `spinner--${size}`, className), role: "status" })));
+};
+exports.default = Spinner;