@squiz/resource-browser 1.32.1-alpha.35 → 1.32.1-alpha.37

package/lib/Modal/ModalTrigger.js

@@ -19,7 +19,7 @@ function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         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)),
+            showLabel && react_1.default.createElement("span", { className: "ml-1 text-sm font-semibold 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/ResourceList/ResourceList.js

@@ -40,7 +40,7 @@ const ResourceList = function ({ resources, selectedResource, previewModalState,
             });
         }
     }, [resources]);
-    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `${isLoading ? 'loading' : ''} Resource list`, className: "flex flex-col text-sm font-semibold px-7 my-4" },
+    return (react_1.default.createElement("ul", { ref: listRef, tabIndex: -1, "aria-label": `${isLoading ? 'loading' : ''} Resource list`, className: "flex flex-col text-sm font-semibold px-7 my-4 focus-visible:outline-0" },
         isLoading && (react_1.default.createElement(react_1.default.Fragment, null, [...Array(8)].map((_item, index) => {
             return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: index });
         }))),

package/lib/ResourcePicker/ResourcePicker.js

@@ -17,7 +17,7 @@ const ResourcePicker = ({ resource, allowedTypes, error, isLoading, isDisabled,
     const isEmpty = resource === null && !isLoading && !error;
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'bg-gray-300') },
         isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
-        isEmpty ? (react_1.default.createElement(ModalTrigger_1.default, { showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: "!w-4 !h-4" }), isDisabled: isDisabled }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
+        isEmpty ? (react_1.default.createElement(ModalTrigger_1.default, { showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
             react_1.default.createElement("div", { className: "resource-picker-info__layout" },
                 isLoading && react_1.default.createElement(Loading_1.LoadingState, null),
                 error && react_1.default.createElement(Error_1.ErrorState, { error: error, onClear: onClear }),

package/lib/ResourcePicker/States/Loading.js

@@ -7,5 +7,5 @@ exports.LoadingState = void 0;
 const react_1 = __importDefault(require("react"));
 const Spinner_1 = __importDefault(require("../../Spinner/Spinner"));
 const LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
-    react_1.default.createElement(Spinner_1.default, { label: "Loading selection", className: "text-gray-600 m-2" })));
+    react_1.default.createElement(Spinner_1.default, { label: "Loading selection", className: "m-2" })));
 exports.LoadingState = LoadingState;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -67,7 +67,7 @@ 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 text-gray-800 antialiased" },
+    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 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-gray-300 w-300px" },

package/lib/SourceDropdown/SourceDropdown.js

@@ -78,7 +78,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                 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" },
+            isLoading && (react_1.default.createElement("li", { className: "mt-2" },
                 react_1.default.createElement(Spinner_1.default, { size: "sm", label: "Loading sources", className: "m-3" }))),
             !isLoading &&
                 categorisedSources.map(({ key, label, sources }, index) => {

package/lib/SourceList/SourceList.js

@@ -42,7 +42,7 @@ const SourceList = function ({ sources, previewModalState, isLoading, onSourceSe
             });
         }
     }, []);
-    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') },
+    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 focus-visible:outline-0', !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 })),

package/lib/Spinner/Spinner.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 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" })));
+    return (react_1.default.createElement("div", { className: "spinner__wrapper text-gray-600", "aria-label": label },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)('spinner', size && `spinner--${size}`, className), role: "status" })));
 };
 exports.default = Spinner;

package/lib/index.css

@@ -514,9 +514,6 @@
 .squiz-rb-scope .mt-4 {
   margin-top: 1rem;
 }
-.squiz-rb-scope .mt-6 {
-  margin-top: 1.5rem;
-}
 .squiz-rb-scope .mt-7 {
   margin-top: 1.75rem;
 }
@@ -913,10 +910,6 @@
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.squiz-rb-scope .antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 .squiz-rb-scope .opacity-40 {
   opacity: 0.4;
 }
@@ -959,8 +952,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  --tw-text-opacity: 1;
-  color: rgb(224 224 224 / var(--tw-text-opacity));
 }
 .squiz-rb-scope .spinner--md {
   height: 32px;
@@ -1049,6 +1040,8 @@
 }
 .squiz-rb-scope *,
 .squiz-rb-scope button {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   letter-spacing: -0.02em;
 }
 .squiz-rb-scope svg {
@@ -1198,6 +1191,9 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.squiz-rb-scope .focus-visible\:outline-0:focus-visible {
+  outline-width: 0px;
+}
 .squiz-rb-scope .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.35",
+  "version": "1.32.1-alpha.37",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.32.1-alpha.35",
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.37",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -73,5 +73,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "97839c928c7b60a55020aedbf8ae28b02ddb9c6f"
+  "gitHead": "6e4ee93a747ad55fa408403fadbf5b7319152a91"
 }

package/src/Modal/ModalTrigger.tsx

@@ -43,7 +43,7 @@ function ModalTrigger({
         )}
       >
         {icon}
-        {showLabel && <span className="ml-1 text-sm leading-4">{label}</span>}
+        {showLabel && <span className="ml-1 text-sm font-semibold leading-4">{label}</span>}
       </ModalOpeningButton>
       {state.isOpen && (
         <Modal isDismissable state={state} overlayProps={overlayProps}>

package/src/ResourceList/ResourceList.tsx

@@ -48,7 +48,7 @@ const ResourceList = function ({
       ref={listRef}
       tabIndex={-1}
       aria-label={`${isLoading ? 'loading' : ''} Resource list`}
-      className="flex flex-col text-sm font-semibold px-7 my-4"
+      className="flex flex-col text-sm font-semibold px-7 my-4 focus-visible:outline-0"
     >
       {isLoading && (
         <>

package/src/ResourcePicker/ResourcePicker.tsx

@@ -43,7 +43,12 @@ const ResourcePicker = ({
         <ModalTrigger
           showLabel={true}
           label={isImagePicker ? `Choose image` : `Choose asset`}
-          icon={<AddCircleOutlineRoundedIcon aria-hidden className="!w-4 !h-4" />}
+          icon={
+            <AddCircleOutlineRoundedIcon
+              aria-hidden
+              className={`!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}`}
+            />
+          }
           isDisabled={isDisabled}
         >
           {children}

package/src/ResourcePicker/States/Loading.tsx

@@ -4,6 +4,6 @@ import Spinner from '../../Spinner/Spinner';
 
 export const LoadingState = () => (
   <div className="col-start-2 col-end-2">
-    <Spinner label="Loading selection" className="text-gray-600 m-2" />
+    <Spinner label="Loading selection" className="m-2" />
   </div>
 );

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -92,7 +92,7 @@ function ResourcePickerContainer({
   }, [hierarchy]);
 
   return (
-    <div className="relative flex flex-col h-full text-gray-800 antialiased">
+    <div className="relative flex flex-col h-full text-gray-800">
       <div className="flex items-center p-4.5">
         <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
           {title}

package/src/SourceDropdown/SourceDropdown.tsx

@@ -110,7 +110,7 @@ export default function SourceDropdown({
           </button>
         </li>
         {isLoading && (
-          <li className="mt-6">
+          <li className="mt-2">
             <Spinner size="sm" label="Loading sources" className="m-3" />
           </li>
         )}

package/src/SourceList/SourceList.tsx

@@ -42,7 +42,7 @@ const SourceList = function ({
       ref={listRef}
       tabIndex={-1}
       aria-label={`${isLoading ? 'loading' : ''} Source list`}
-      className={clsx('flex flex-col bg-gray-100 min-h-full', !isLoading && 'px-7 py-4')}
+      className={clsx('flex flex-col bg-gray-100 min-h-full focus-visible:outline-0', !isLoading && 'px-7 py-4')}
     >
       {isLoading && (
         <>

package/src/Spinner/Spinner.tsx

@@ -9,8 +9,8 @@ export type SpinnerProps = {
 
 const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
   return (
-    <div className="spinner__wrapper" aria-label={label}>
-      <div className={clsx(`spinner`, size && `spinner--${size}`, className)} role="status" />
+    <div className="spinner__wrapper text-gray-600" aria-label={label}>
+      <div className={clsx('spinner', size && `spinner--${size}`, className)} role="status" />
     </div>
   );
 };

package/src/Spinner/_spinner.scss

@@ -5,7 +5,7 @@
   height: 20px;
   width: 20px;
   &__wrapper {
-    @apply flex items-center justify-center text-gray-300;
+    @apply flex items-center justify-center;
   }
   &--md {
     height: 32px;

package/src/index.scss

@@ -11,6 +11,7 @@
 
 *,
 button {
+  @apply antialiased;
   letter-spacing: -0.02em;
 }