@squiz/resource-browser 3.0.1-rc.7 → 3.1.0-rc.1

package/CHANGELOG.md

@@ -1,8 +1,23 @@
 # Change Log
 
+## 3.1.0-rc.1
+
+### Patch Changes
+
+-   Updated modal to use sds button, removed scroll bar from search panel
+-   ce9ae92: Version control via changesets added
+-   Updated dependencies [ce9ae92]
+    -   @squiz/resource-browser-ui-lib@1.0.0-rc.8
+
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.7...@squiz/resource-browser@3.1.0-rc.0) (2024-12-16)
+
+### Features
+
+-   **prodam-489:** close modal hover and mobile input with fix ([135c695](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/commit/135c695bdcc1c5d6cbbd26d850e402d3cc208a8a))
+
 ## [3.0.1-rc.7](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@3.0.1-rc.6...@squiz/resource-browser@3.0.1-rc.7) (2024-12-13)
 
 **Note:** Version bump only for package @squiz/resource-browser

package/lib/MainContainer/MainContainer.js

@@ -52,9 +52,11 @@ function MainContainer({ title, titleAriaProps, allowedTypes, sources, selectedS
                 !plugin.createHeaderPortal && sources.length > 1 && (react_1.default.createElement(SourceDropdownContainer_1.default, { isCollapsed: false, onExpand: () => { } },
                     react_1.default.createElement("div", { className: `border-l border-blue-200 pl-1 w-[204px]` },
                         react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: selectedSource, onSourceSelect: onSourceSelect })))))),
-            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 gap-3 p-3 absolute right-0 top-0" },
+                react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "border-0 bg-transparent cursor-pointer p-0 relative" },
+                    react_1.default.createElement("svg", { height: "24px", viewBox: "0 0 24 24", width: "24px", xmlns: "http://www.w3.org/2000/svg", className: "text-gray-600 hover:text-gray-800 fill-current" },
+                        react_1.default.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                        react_1.default.createElement("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" }))))),
         react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
             plugin && selectedSource && (react_1.default.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}` },
                 pluginToRender === types_1.PluginLaunchModeType.Browse && SourceBrowser && (react_1.default.createElement(SourceBrowser, { source: selectedSource, sources: sources, onSourceSelect: onSourceSelect, allowedTypes: allowedTypes, headerPortal: plugin.createHeaderPortal && headerPortal ? headerPortal : undefined, searchEnabled: searchEnabled, preselectedResource: preselectedResource || undefined, browseTo: pluginMode?.args?.browseTo, onSelected: (resource) => {

package/lib/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.js

@@ -11,9 +11,9 @@ const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetry, isLo
     return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800" },
         react_1.default.createElement("div", { className: "flex items-center py-3 pl-6 pr-10 min-h-[68px]" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
-            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("button", { className: "sds-dialog__close", "aria-label": `Close ${title} dialog`, onClick: onClose, tabIndex: 0 },
+                react_1.default.createElement("span", { className: "sr-only" }, `Close ${title} dialog`),
+                react_1.default.createElement(sds_1.SdsIcon, { svg: sds_1.ICON_CLOSE }))),
         react_1.default.createElement("div", { className: "border-t border-gray-300 overflow-y-hidden" },
             react_1.default.createElement("div", { className: "w-screen max-w-[400px] min-h-[320px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4 flex justify-center items-center text-gray-500" },
                 isLoading && react_1.default.createElement(sds_1.Spinner, { type: "lg" }),

package/lib/ResourceLauncher/ResourceLauncher.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../types");
 function ResourceLauncher({ sources, onSourceSelect }) {
-    return (react_1.default.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
+    return (react_1.default.createElement("div", { className: "overflow-y-auto w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
         react_1.default.createElement("ul", { tabIndex: -1, "aria-label": `sources list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
             const SourceLauncher = source.plugin.renderResourceLauncher();
             return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },

package/lib/index.css

@@ -4826,6 +4826,9 @@
 .squiz-rb-scope .left-1:not(.squiz-rb-plugin *) {
   left: 0.25rem;
 }
+.squiz-rb-scope .right-0:not(.squiz-rb-plugin *) {
+  right: 0px;
+}
 .squiz-rb-scope .right-2:not(.squiz-rb-plugin *) {
   right: 0.5rem;
 }
@@ -4838,8 +4841,8 @@
 .squiz-rb-scope .right-5:not(.squiz-rb-plugin *) {
   right: 1.25rem;
 }
-.squiz-rb-scope .top-2:not(.squiz-rb-plugin *) {
-  top: 0.5rem;
+.squiz-rb-scope .top-0:not(.squiz-rb-plugin *) {
+  top: 0px;
 }
 .squiz-rb-scope .top-3:not(.squiz-rb-plugin *) {
   top: 0.75rem;
@@ -5127,6 +5130,9 @@
 .squiz-rb-scope .cursor-not-allowed:not(.squiz-rb-plugin *) {
   cursor: not-allowed;
 }
+.squiz-rb-scope .cursor-pointer:not(.squiz-rb-plugin *) {
+  cursor: pointer;
+}
 .squiz-rb-scope .grid-cols-\[24px_1fr_45px\]:not(.squiz-rb-plugin *) {
   grid-template-columns: 24px 1fr 45px;
 }
@@ -5192,6 +5198,9 @@
 .squiz-rb-scope .rounded-lg:not(.squiz-rb-plugin *) {
   border-radius: 0.5rem;
 }
+.squiz-rb-scope .border-0:not(.squiz-rb-plugin *) {
+  border-width: 0px;
+}
 .squiz-rb-scope .border-1:not(.squiz-rb-plugin *) {
   border-width: 1px;
 }
@@ -5262,6 +5271,9 @@
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .bg-transparent:not(.squiz-rb-plugin *) {
+  background-color: transparent;
+}
 .squiz-rb-scope .bg-white:not(.squiz-rb-plugin *) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -5272,6 +5284,9 @@
 .squiz-rb-scope .fill-blue-300:not(.squiz-rb-plugin *) {
   fill: #0774d2;
 }
+.squiz-rb-scope .fill-current:not(.squiz-rb-plugin *) {
+  fill: currentColor;
+}
 .squiz-rb-scope .object-cover:not(.squiz-rb-plugin *) {
   -o-object-fit: cover;
   object-fit: cover;
@@ -5289,8 +5304,8 @@
 .squiz-rb-scope .p-2:not(.squiz-rb-plugin *) {
   padding: 0.5rem;
 }
-.squiz-rb-scope .p-2\.5:not(.squiz-rb-plugin *) {
-  padding: 0.625rem;
+.squiz-rb-scope .p-3:not(.squiz-rb-plugin *) {
+  padding: 0.75rem;
 }
 .squiz-rb-scope .p-4:not(.squiz-rb-plugin *) {
   padding: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "3.0.1-rc.7",
+    "version": "3.1.0-rc.1",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -28,7 +28,7 @@
         "@react-types/shared": "^3.23.1",
         "@squiz/dx-json-schema-lib": "^1.67.0",
         "@squiz/generic-browser-lib": "1.67.2",
-        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.6",
+        "@squiz/resource-browser-ui-lib": "^1.0.0-rc.8",
         "@squiz/sds": "^1.3.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
@@ -88,6 +88,5 @@
     },
     "volta": {
         "node": "18.18.0"
-    },
-    "gitHead": "b1ca30987b9284691e8d455792e65f13a32fdceb"
+    }
 }

package/src/MainContainer/MainContainer.tsx

@@ -83,19 +83,25 @@ function MainContainer({
                     </>
                 )}
 
-                <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"
-                >
-                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <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"
-                        />
-                    </svg>
-                </button>
+                <div className="flex gap-3 p-3 absolute right-0 top-0">
+                    <button
+                        type="button"
+                        aria-label={`Close ${title} dialog`}
+                        onClick={onClose}
+                        className="border-0 bg-transparent cursor-pointer p-0 relative"
+                    >
+                        <svg
+                            height="24px"
+                            viewBox="0 0 24 24"
+                            width="24px"
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="text-gray-600 hover:text-gray-800 fill-current"
+                        >
+                            <path d="M0 0h24v24H0V0z" fill="none"></path>
+                            <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path>
+                        </svg>
+                    </button>
+                </div>
             </div>
             <div className="border-t border-gray-300 overflow-y-hidden">
                 {plugin && selectedSource && (

package/src/ResourceBrowserInlineButton/InlineLoadingErrorState/InlineLoadingErrorState.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 import { Error } from '@squiz/resource-browser-ui-lib';
-import { Spinner } from '@squiz/sds';
+import { Spinner, SdsIcon, ICON_CLOSE } from '@squiz/sds';
 
 export type InlineLoadingErrorStateProps = {
     title: string;
@@ -20,18 +20,9 @@ export const InlineLoadingErrorState = ({ title, titleAriaProps, onClose, onRetr
                 <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
                     {title}
                 </h2>
-                <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"
-                >
-                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <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"
-                        />
-                    </svg>
+                <button className="sds-dialog__close" aria-label={`Close ${title} dialog`} onClick={onClose} tabIndex={0}>
+                    <span className="sr-only">{`Close ${title} dialog`}</span>
+                    <SdsIcon svg={ICON_CLOSE} />
                 </button>
             </div>
             <div className="border-t border-gray-300 overflow-y-hidden">

package/src/ResourceLauncher/ResourceLauncher.tsx

@@ -8,7 +8,7 @@ interface ResourceLauncherProps {
 
 function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
     return (
-        <div className="overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4">
+        <div className="overflow-y-auto w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4">
             <ul tabIndex={-1} aria-label={`sources list`} className="flex flex-col bg-gray-100 min-h-full focus-visible:outline-0">
                 {sources.map((source, index) => {
                     const SourceLauncher = source.plugin.renderResourceLauncher();

package/LICENSE.md

@@ -1,15 +0,0 @@
-This software is copyright Squiz and may only be used with the explicit
-permission of the copyright holder.
-
-1. Squiz shall make the Services available to You pursuant to your Agreement and these terms.
-2. Squiz shall provide the Services only in accordance with applicable laws and government regulations and where applicable your Agreement.
-3. You shall:
-   (a) be responsible for Your compliance with these terms and the Agreement;
-   (b) prevent unauthorised access to or use of the Services, and notify Squiz promptly of any such unauthorised access or use, and
-   (c) use the Services only in accordance with the Documentation and applicable laws and government regulations.
-4. You shall not:
-   (a) sell, resell, rent or lease the Services;
-   (b) use the Services to store or transmit Malicious Code;
-   (c) interfere with or disrupt the integrity or performance of the Services or third-party data contained therein, or
-   (d) attempt to gain unauthorised access to the Services or their related systems or networks.
-5. You acknowledge that Squiz retains ownership of the Software, the Documentation and the source code and all proprietary rights relating thereto and You agree all Intellectual Property Rights in the Software and Documentation are and shall remain the exclusive property of Squiz and its third party suppliers, as applicable. Unless expressly permitted in this Subscription Agreement, You must not use any of Squiz's or its third party suppliers' intellectual property without Squiz or its third party suppliers' prior written consent. Nothing in these terms should be construed as transferring any aspects of such rights mentioned in this clause to You or any Third Party. Squiz reserves any and all rights not expressly granted herein.