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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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/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,6 +4841,9 @@
 .squiz-rb-scope .right-5:not(.squiz-rb-plugin *) {
   right: 1.25rem;
 }
+.squiz-rb-scope .top-0:not(.squiz-rb-plugin *) {
+  top: 0px;
+}
 .squiz-rb-scope .top-2:not(.squiz-rb-plugin *) {
   top: 0.5rem;
 }
@@ -5127,6 +5133,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 +5201,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 +5274,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 +5287,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;
@@ -5292,6 +5310,9 @@
 .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.0",
     "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.7",
         "@squiz/sds": "^1.3.1",
         "clsx": "^2.1.0",
         "expiry-map": "^2.0.0",
@@ -89,5 +89,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "b1ca30987b9284691e8d455792e65f13a32fdceb"
+    "gitHead": "827a766f573da634daf63817dde6ef62314e66fa"
 }

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 && (