@squiz/resource-browser 1.32.1-alpha.28 → 1.32.1-alpha.30

package/lib/Modal/ModalTrigger.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-declare function ModalTrigger({ label, showLabel, icon, children, ...props }: {
+declare function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }: {
     label: string;
     showLabel?: boolean;
     icon?: React.ReactNode;
+    isDisabled?: boolean;
     children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
 }): JSX.Element;
 export default ModalTrigger;

package/lib/Modal/ModalTrigger.js

@@ -8,7 +8,8 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const Modal_1 = __importDefault(require("./Modal"));
 const ModalOpeningButton_1 = __importDefault(require("./ModalOpeningButton"));
-function ModalTrigger({ label, showLabel, icon, children, ...props }) {
+const clsx_1 = __importDefault(require("clsx"));
+function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }) {
     const state = (0, react_stately_1.useOverlayTriggerState)(props);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, state);
     let ariaAttr = {};
@@ -16,9 +17,9 @@ function ModalTrigger({ label, showLabel, icon, children, ...props }) {
         ariaAttr = { ...ariaAttr, 'aria-label': label };
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, ...ariaAttr },
-            showLabel && label,
-            icon),
+        react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, ...ariaAttr, isDisabled: isDisabled, className: (0, clsx_1.default)('flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none', isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600') },
+            icon,
+            showLabel && react_1.default.createElement("span", { className: "ml-1 text-sm leading-4" }, label)),
         state.isOpen && (react_1.default.createElement(Modal_1.default, { isDismissable: true, state: state, overlayProps: overlayProps }, (titleProps) => children(state.close, titleProps)))));
 }
 exports.default = ModalTrigger;

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Resource } from '../types';

package/lib/PreviewPanel/details/MatrixResource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Resource } from '../../types';
 type MatrixResourceProps = {
     resource: Resource;

package/lib/PreviewPanel/details/MatrixResource.js

@@ -5,23 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const Icon_1 = __importDefault(require("../../Icons/Icon"));
-const statusColour = {
-    // Duplicated from the Matrix repository.
-    // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
-    // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
-    unknown: '#ff0000',
-    archived: '#c98a67',
-    under_construction: '#94d1f9',
-    pending_approval: '#d0bbf0',
-    approved_to_go_live: '#f7eaa2',
-    live: '#bfe60a',
-    up_for_review: '#72cd32',
-    safe_editing: '#ff97b0',
-    safe_editing_pending_approval: '#d688db',
-    safe_edit_approved_to_go_live: '#ffb34a',
-};
+const StatusIndicator_1 = __importDefault(require("../../StatusIndicator/StatusIndicator"));
 const MatrixResource = ({ resource: { id, type, name, status } }) => {
-    const color = statusColour[status.code] || statusColour.unknown;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300" },
             react_1.default.createElement(Icon_1.default, { icon: type.code, resourceSource: "matrix", className: "w-14 h-14" }),
@@ -39,7 +24,7 @@ const MatrixResource = ({ resource: { id, type, name, status } }) => {
                 react_1.default.createElement("div", { className: "flex mb-2" },
                     react_1.default.createElement("dt", { className: "w-[60px] mr-4 text-gray-600" }, "Status"),
                     react_1.default.createElement("dd", { className: "flex items-center font-semibold" },
-                        react_1.default.createElement("span", { style: { backgroundColor: color }, className: "block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20" }),
+                        react_1.default.createElement(StatusIndicator_1.default, { status: status }),
                         status.name))))));
 };
 exports.default = MatrixResource;

package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Hierarchy } from '../types';
 export interface ResourceBreadcrumbProps<T> {
     hierarchy: Hierarchy<T>;

package/lib/ResourceError/ResourceError.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ResourceError {
     errorMessage: string;
     handleReload: () => void;

package/lib/ResourceItem/ResourceItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { OverlayTriggerState } from 'react-stately';
 interface ResourceItem<T> {

package/lib/ResourceItem/ResourceItem.js

@@ -11,16 +11,17 @@ const ResourceItem = ({ item, selected, label, type, childCount, previewModalSta
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
     const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
     const title = isDisabled ? "You can't select this item" : label;
-    return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border border-grey-200 ${className}` },
+    return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border border-grey-200 min-h-[64px] ${className}` },
         react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), className: `
-          relative grow flex items-center p-4 rounded ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-100 focus:bg-gray-100'}
+          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `, title: title },
             react_1.default.createElement(Icon_1.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
-            react_1.default.createElement("span", { className: "text-left break-all" }, label),
-            childCount <= 0 && react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "absolute right-5" })),
-        childCount > 0 && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-100 focus:bg-gray-100` },
+            react_1.default.createElement("span", { className: `relative  flex items-center ${selected ? 'mr-8' : ''}` },
+                react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word" }, label),
+                selected && react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" }))),
+        childCount > 0 && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50` },
             react_1.default.createElement("span", { className: "ml-auto flex items-center" },
-                react_1.default.createElement("span", { className: "truncate w-10 text-right", title: String(childCount) }, childCount),
+                react_1.default.createElement("span", { className: "truncate w-14 text-right", title: String(childCount) }, childCount),
                 react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "ml-1" }))))));
 };
 exports.default = ResourceItem;

package/lib/ResourceList/ResourceList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Resource } from '../types';

package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, Resource, HydratedResourceReference } from '../types';
 interface ResourcePickerContainerProps {

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -67,15 +67,15 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
     (0, react_1.useEffect)(() => {
         setSelectedResource(null);
     }, [hierarchy]);
-    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full" },
-        react_1.default.createElement("div", { className: "flex items-center p-6" },
+    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800 antialiased" },
+        react_1.default.createElement("div", { className: "flex items-center p-4.5" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
-            react_1.default.createElement("div", { className: "px-3 border-l border-grey-300 w-300px" },
+            react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
                 react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot })),
             react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
                 react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
-        react_1.default.createElement("div", { className: "flex border-t border-grey-300 h-[calc(100%-92px)]" },
+        react_1.default.createElement("div", { className: "flex border-t border-gray-300 h-[calc(100%-72px)]" },
             react_1.default.createElement("div", { className: "overflow-y-scroll flex-1 grow-[3] border-r border-gray-300" },
                 react_1.default.createElement("h3", { className: "sr-only" }, "Resource List"),
                 hierarchy.length > 0 && (react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: popUntil, onReturnToRoot: handleReturnToRoot })),

package/lib/Skeleton/List/SkeletonList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SkeletonListProps = {
     itemCount: number;
     className?: string;

package/lib/Skeleton/ListItem/SkeletonListItem.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SkeletonListItem: () => JSX.Element;

package/lib/Skeleton/ListItem/SkeletonListItem.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonListItem = void 0;
 const react_1 = __importDefault(require("react"));
 const SkeletonListItem = () => (react_1.default.createElement("li", { className: "flex items-center p-1 first:mt-0 bg-white border border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b" },
-    react_1.default.createElement("div", { className: "grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded" },
+    react_1.default.createElement("div", { className: "animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded" },
         react_1.default.createElement("span", { className: "w-6 h-6 bg-gray-200 rounded-full" }),
         react_1.default.createElement("div", { className: "w-full d-flex flex-col mx-4" },
             react_1.default.createElement("div", { className: "mb-1 w-3/4 h-2 bg-gray-200 rounded" }),

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Source, ScopedSource } from '../types';
 export default function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSourceSelect, }: {
     sources: Source[];

package/lib/SourceDropdown/SourceDropdown.js

@@ -63,14 +63,14 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
         onRootSelect();
     };
     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" },
+        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-1.5 w-full" },
             selectedSource && (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: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5" }),
+                react_1.default.createElement(Icon_1.default, { icon: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
                 react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, selectedSource.resource?.name || selectedSource.source.name))),
             !selectedSource && (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" }),
+                react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
                 "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' : ''}` },
@@ -79,7 +79,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                     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" }))),
+                react_1.default.createElement(Spinner_1.default, { size: "sm", label: "Loading sources", className: "m-3" }))),
             !isLoading &&
                 categorisedSources.map(({ key, label, sources }, index) => {
                     return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
@@ -88,7 +88,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                         sources?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col mt-2" }, sources.map(({ source, resource }) => {
                             const isSelectedSource = source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
                             return (react_1.default.createElement("li", { key: `${source.id}-${resource?.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({ source, resource }), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${isSelectedSource ? 'bg-blue-100 text-blue-400' : ''}` },
+                                react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick({ source, resource }), 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: resource?.type.code, resourceSource: "matrix", "aria-label": resource?.type.name, className: "shrink-0 mr-2.5" }),
                                     react_1.default.createElement("span", { className: "text-left mr-7" }, resource?.name || source.name),
                                     isSelectedSource && (react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));

package/lib/SourceList/SourceList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverlayTriggerState } from 'react-stately';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Source, ScopedSource } from '../types';

package/lib/Spinner/Spinner.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 export type SpinnerProps = {
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md';
     className?: string;
     label?: string;
 };

package/lib/Spinner/Spinner.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (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' }) => {
+const Spinner = ({ size = 'sm', 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" })));
 };

package/lib/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,6 @@
+import { Status } from '../types';
+export type StatusIndicatorProps = {
+    status: Status;
+};
+declare const StatusIndicator: ({ status }: StatusIndicatorProps) => JSX.Element;
+export default StatusIndicator;

package/lib/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,26 @@
+"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 statusColour = {
+    // Duplicated from the Matrix repository.
+    // src/Api/AssetManagementApi/Constants/AssetStatuses.php - contains a list of possible statuses.
+    // frontend/src/styles/common/status-colors.scss - contains the colours used for those statuses in Matrix.
+    unknown: '#ff0000',
+    archived: '#c98a67',
+    under_construction: '#94d1f9',
+    pending_approval: '#d0bbf0',
+    approved_to_go_live: '#f7eaa2',
+    live: '#bfe60a',
+    up_for_review: '#72cd32',
+    safe_editing: '#ff97b0',
+    safe_editing_pending_approval: '#d688db',
+    safe_edit_approved_to_go_live: '#ffb34a',
+};
+const StatusIndicator = ({ status }) => {
+    const color = statusColour[status.code] || statusColour.unknown;
+    return (react_1.default.createElement("span", { style: { backgroundColor: color }, className: "block rounded-full w-3 h-3 border border-solid border-black border-opacity-20" }));
+};
+exports.default = StatusIndicator;