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

package/lib/index.css

@@ -378,6 +378,9 @@
 .squiz-rb-scope .-left-0\.5 {
   left: -0.125rem;
 }
+.squiz-rb-scope .-right-8 {
+  right: -2rem;
+}
 .squiz-rb-scope .bottom-0 {
   bottom: 0px;
 }
@@ -390,9 +393,6 @@
 .squiz-rb-scope .right-4 {
   right: 1rem;
 }
-.squiz-rb-scope .right-5 {
-  right: 1.25rem;
-}
 .squiz-rb-scope .top-2 {
   top: 0.5rem;
 }
@@ -414,6 +414,18 @@
 .squiz-rb-scope .z-\[9999\] {
   z-index: 9999;
 }
+.squiz-rb-scope .col-start-2 {
+  grid-column-start: 2;
+}
+.squiz-rb-scope .col-end-2 {
+  grid-column-end: 2;
+}
+.squiz-rb-scope .m-2 {
+  margin: 0.5rem;
+}
+.squiz-rb-scope .m-3 {
+  margin: 0.75rem;
+}
 .squiz-rb-scope .m-5 {
   margin: 1.25rem;
 }
@@ -454,12 +466,12 @@
 .squiz-rb-scope .ml-1 {
   margin-left: 0.25rem;
 }
+.squiz-rb-scope .ml-4 {
+  margin-left: 1rem;
+}
 .squiz-rb-scope .ml-auto {
   margin-left: auto;
 }
-.squiz-rb-scope .mr-1 {
-  margin-right: 0.25rem;
-}
 .squiz-rb-scope .mr-2 {
   margin-right: 0.5rem;
 }
@@ -478,6 +490,12 @@
 .squiz-rb-scope .mr-7 {
   margin-right: 1.75rem;
 }
+.squiz-rb-scope .mr-8 {
+  margin-right: 2rem;
+}
+.squiz-rb-scope .mr-auto {
+  margin-right: auto;
+}
 .squiz-rb-scope .mt-2 {
   margin-top: 0.5rem;
 }
@@ -496,6 +514,12 @@
 .squiz-rb-scope .mt-7 {
   margin-top: 1.75rem;
 }
+.squiz-rb-scope .line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .squiz-rb-scope .block {
   display: block;
 }
@@ -511,6 +535,9 @@
 .squiz-rb-scope .hidden {
   display: none;
 }
+.squiz-rb-scope .\!h-4 {
+  height: 1rem !important;
+}
 .squiz-rb-scope .h-14 {
   height: 3.5rem;
 }
@@ -532,11 +559,14 @@
 .squiz-rb-scope .h-9 {
   height: 2.25rem;
 }
+.squiz-rb-scope .h-\[20px\] {
+  height: 20px;
+}
 .squiz-rb-scope .h-\[50vh\] {
   height: 50vh;
 }
-.squiz-rb-scope .h-\[calc\(100\%-92px\)\] {
-  height: calc(100% - 92px);
+.squiz-rb-scope .h-\[calc\(100\%-72px\)\] {
+  height: calc(100% - 72px);
 }
 .squiz-rb-scope .h-full {
   height: 100%;
@@ -544,15 +574,18 @@
 .squiz-rb-scope .h-screen {
   height: 100vh;
 }
+.squiz-rb-scope .min-h-\[64px\] {
+  min-height: 64px;
+}
 .squiz-rb-scope .min-h-full {
   min-height: 100%;
 }
+.squiz-rb-scope .\!w-4 {
+  width: 1rem !important;
+}
 .squiz-rb-scope .w-1\/2 {
   width: 50%;
 }
-.squiz-rb-scope .w-10 {
-  width: 2.5rem;
-}
 .squiz-rb-scope .w-12 {
   width: 3rem;
 }
@@ -580,6 +613,12 @@
 .squiz-rb-scope .w-\[119px\] {
   width: 119px;
 }
+.squiz-rb-scope .w-\[20px\] {
+  width: 20px;
+}
+.squiz-rb-scope .w-\[400px\] {
+  width: 400px;
+}
 .squiz-rb-scope .w-\[60px\] {
   width: 60px;
 }
@@ -640,9 +679,18 @@
 .squiz-rb-scope .justify-center {
   justify-content: center;
 }
+.squiz-rb-scope .gap-1 {
+  gap: 0.25rem;
+}
 .squiz-rb-scope .gap-3 {
   gap: 0.75rem;
 }
+.squiz-rb-scope .self-center {
+  align-self: center;
+}
+.squiz-rb-scope .justify-self-start {
+  justify-self: start;
+}
 .squiz-rb-scope .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -651,9 +699,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.squiz-rb-scope .break-all {
-  word-break: break-all;
-}
 .squiz-rb-scope .rounded {
   border-radius: 4px;
 }
@@ -721,6 +766,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -731,6 +780,9 @@
 .squiz-rb-scope .p-1 {
   padding: 0.25rem;
 }
+.squiz-rb-scope .p-1\.5 {
+  padding: 0.375rem;
+}
 .squiz-rb-scope .p-2 {
   padding: 0.5rem;
 }
@@ -740,8 +792,13 @@
 .squiz-rb-scope .p-4 {
   padding: 1rem;
 }
-.squiz-rb-scope .p-6 {
-  padding: 1.5rem;
+.squiz-rb-scope .px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.squiz-rb-scope .px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
 }
 .squiz-rb-scope .px-2 {
   padding-left: 0.5rem;
@@ -755,6 +812,10 @@
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.squiz-rb-scope .px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .squiz-rb-scope .px-7 {
   padding-left: 1.75rem;
   padding-right: 1.75rem;
@@ -805,6 +866,9 @@
 .squiz-rb-scope .font-semibold {
   font-weight: 600;
 }
+.squiz-rb-scope .leading-4 {
+  line-height: 1rem;
+}
 .squiz-rb-scope .leading-5 {
   line-height: 1.25rem;
 }
@@ -819,6 +883,10 @@
   --tw-text-opacity: 1;
   color: rgb(4 73 133 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(148 148 148 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
@@ -831,23 +899,32 @@
   --tw-text-opacity: 1;
   color: rgb(61 61 61 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(215 35 33 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .text-white {
   --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;
 }
+.squiz-rb-scope .outline-0 {
+  outline-width: 0px;
+}
 .squiz-rb-scope .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 .squiz-rb-scope .spinner {
   display: inline-block;
-  height: 2rem;
-  width: 2rem;
   border-radius: 9999px;
-  border-width: 4px;
+  border-width: 2px;
   border-style: solid;
   border-color: currentColor;
   border-right-color: transparent;
@@ -868,17 +945,34 @@
     animation: spin 1.5s linear infinite;
   }
 }
+.squiz-rb-scope .spinner {
+  height: 20px;
+  width: 20px;
+}
 .squiz-rb-scope .spinner__wrapper {
-  margin: 0.75rem;
   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--lg {
-  height: 3rem;
-  width: 3rem;
+.squiz-rb-scope .spinner--md {
+  height: 32px;
+  width: 32px;
+}
+.squiz-rb-scope .animate-skeleton-pulse {
+  animation: pulse 2s linear infinite;
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
   max-width: 250px;
@@ -918,6 +1012,46 @@
 .squiz-rb-scope .resource-breadcrumb--expanded .resource-breadcrumb__item:last-child {
   display: flex;
 }
+.squiz-rb-scope .resource-picker {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 0.5rem;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+  border-radius: 4px;
+  padding: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(148 148 148 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .resource-picker-info {
+  width: 100%;
+  border-radius: 6px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(43 43 43 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .resource-picker-info__layout {
+  display: grid;
+  grid-template-columns: 24px 1fr 24px;
+  gap: 0.5rem;
+  justify-items: center;
+}
+.squiz-rb-scope *,
+.squiz-rb-scope button {
+  letter-spacing: -0.02em;
+}
+.squiz-rb-scope svg {
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .p-4\.5 {
+  padding: 18px;
+}
 .squiz-rb-scope .before\:fixed::before {
   content: var(--tw-content);
   position: fixed;
@@ -1027,6 +1161,17 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
+.squiz-rb-scope .hover\:bg-transparent:hover {
+  background-color: transparent;
+}
+.squiz-rb-scope .hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity));
+}
 .squiz-rb-scope .focus\:bg-blue-100:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
@@ -1035,6 +1180,25 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .focus\:bg-gray-50:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
+.squiz-rb-scope .focus\:text-gray-800:focus {
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.squiz-rb-scope .disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+.squiz-rb-scope .disabled\:text-gray-500:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(148 148 148 / var(--tw-text-opacity));
+}
 @media not all and (min-width: 768px) {
   .squiz-rb-scope .max-md\:hidden {
     display: none;

package/lib/index.d.ts

@@ -1,14 +1,11 @@
-import React from 'react';
 import { HydratedResourceReference, Resource, ResourceReference, Source } from './types';
 export type { HydratedResourceReference, Resource, ResourceReference, Source };
-export default function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, }: {
-    showButtonLabel?: boolean;
-    buttonLabel: string;
-    buttonIcon: React.ReactNode;
+export default function ComponentEditorContentBrowser({ modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, isDisabled, }: {
     modalTitle: string;
     allowedTypes: string[] | undefined;
     onRequestSources: () => Promise<Source[]>;
     onRequestChildren(source: Source, resource: Resource | null): Promise<Resource[]>;
     onRequestResource(reference: ResourceReference): Promise<Resource | null>;
     onChange(resource: HydratedResourceReference | null): void;
+    isDisabled?: boolean;
 }): JSX.Element;

package/lib/index.js

@@ -6,9 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ModalTrigger_1 = __importDefault(require("./Modal/ModalTrigger"));
 const ResourcePickerContainer_1 = __importDefault(require("./ResourcePickerContainer/ResourcePickerContainer"));
-function ComponentEditorContentBrowser({ showButtonLabel, buttonLabel, buttonIcon, modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, }) {
-    const showLabel = showButtonLabel || false;
+const AdsClickRounded_1 = __importDefault(require("@mui/icons-material/AdsClickRounded"));
+const AddCircleOutlineRounded_1 = __importDefault(require("@mui/icons-material/AddCircleOutlineRounded"));
+const PhotoLibraryRounded_1 = __importDefault(require("@mui/icons-material/PhotoLibraryRounded"));
+const clsx_1 = __importDefault(require("clsx"));
+function ComponentEditorContentBrowser({ modalTitle, allowedTypes, onRequestSources, onRequestChildren, onChange, isDisabled, }) {
+    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
     return (react_1.default.createElement("div", { className: "squiz-rb-scope" },
-        react_1.default.createElement(ModalTrigger_1.default, { showLabel: showLabel, label: buttonLabel, icon: buttonIcon }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange })))));
+        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" })),
+            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 }, (onClose, titleProps) => (react_1.default.createElement(ResourcePickerContainer_1.default, { title: modalTitle, titleAriaProps: titleProps, allowedTypes: allowedTypes, onClose: onClose, onRequestSources: onRequestSources, onRequestChildren: onRequestChildren, onChange: onChange }))))));
 }
 exports.default = ComponentEditorContentBrowser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.28",
+  "version": "1.32.1-alpha.30",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -14,7 +14,9 @@
     "clean": "rimraf ./lib"
   },
   "dependencies": {
-    "@squiz/dx-json-schema-lib": "1.32.1-alpha.28",
+    "@mui/icons-material": "5.11.16",
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.30",
+    "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
     "react-stately": "3.21.0"
@@ -71,5 +73,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "affbfe3733cbad5b594b3e298329cc1c62727f36"
+  "gitHead": "d7dd20646acc571cdcf3b95629c004fa8892f8b6"
 }

package/src/Icons/Icon.stories.tsx

@@ -10,6 +10,11 @@ export default {
 
 const Template: StoryFn<typeof Icon> = (props) => <Icon {...props} />;
 
+export const Error = Template.bind({});
+Error.args = {
+  icon: 'error',
+};
+
 export const ArrowRight = Template.bind({});
 ArrowRight.args = {
   icon: 'arrow-right',

package/src/Modal/Modal.spec.tsx

@@ -142,6 +142,31 @@ describe('Modal', () => {
     });
   });
 
+  it('Modal does not open if modal trigger button is disabled', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel isDisabled={true}>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).not.toBeTruthy();
+    });
+  });
+
   it('Focus is trapped within modal', async () => {
     render(
       <div>

package/src/Modal/ModalTrigger.tsx

@@ -6,17 +6,20 @@ import { DOMAttributes, FocusableElement } from '@react-types/shared';
 
 import Modal from './Modal';
 import ModalOpeningButton from './ModalOpeningButton';
+import clsx from 'clsx';
 
 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; // Child needs to be a functions which generates the 'content' so we can pass the onClose function and title aria props
 }) {
   const state = useOverlayTriggerState(props);
@@ -29,9 +32,18 @@ function ModalTrigger({
 
   return (
     <>
-      <ModalOpeningButton type="button" {...triggerProps} {...ariaAttr}>
-        {showLabel && label}
+      <ModalOpeningButton
+        type="button"
+        {...triggerProps}
+        {...ariaAttr}
+        isDisabled={isDisabled}
+        className={clsx(
+          '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 && <span className="ml-1 text-sm leading-4">{label}</span>}
       </ModalOpeningButton>
       {state.isOpen && (
         <Modal isDismissable state={state} overlayProps={overlayProps}>

package/src/PreviewPanel/details/MatrixResource.tsx

@@ -2,30 +2,13 @@ import React from 'react';
 
 import { Resource } from '../../types';
 import Icon, { IconOptions } from '../../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',
-};
+import StatusIndicator from '../../StatusIndicator/StatusIndicator';
 
 type MatrixResourceProps = {
   resource: Resource;
 };
 
 const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResourceProps) => {
-  const color = statusColour[status.code as keyof typeof statusColour] || statusColour.unknown;
-
   return (
     <div>
       <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
@@ -47,10 +30,7 @@ const MatrixResource = ({ resource: { id, type, name, status } }: MatrixResource
           <div className="flex mb-2">
             <dt className="w-[60px] mr-4 text-gray-600">Status</dt>
             <dd className="flex items-center font-semibold">
-              <span
-                style={{ backgroundColor: color }}
-                className="block rounded-full w-3 h-3 mr-1 border border-solid border-black border-opacity-20"
-              ></span>
+              <StatusIndicator status={status} />
               {status.name}
             </dd>
           </div>

package/src/ResourceError/ResourceError.spec.tsx

@@ -8,10 +8,6 @@ const defaultProps: any = {
 };
 
 describe('ResourceError', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render the component with the correct error message', () => {
     const { getByText } = render(<ResourceError {...defaultProps} />);
     const errorMessage = getByText(defaultProps.errorMessage);

package/src/ResourceItem/ResourceItem.spec.tsx

@@ -19,10 +19,6 @@ const defaultProps: any = {
 };
 
 describe('ResourceItem', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render the component with the correct label', () => {
     const { getByText } = render(<ResourceItem {...defaultProps} />);
     const labelElement = getByText('My Resource');

package/src/ResourceItem/ResourceItem.tsx

@@ -36,16 +36,16 @@ const ResourceItem = <T,>({
   const title = isDisabled ? "You can't select this item" : label;
 
   return (
-    <li className={`flex items-stretch p-1 bg-white border border-grey-200 ${className}`}>
+    <li className={`flex items-stretch p-1 bg-white border border-grey-200 min-h-[64px] ${className}`}>
       <ModalOpeningButton
         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' : ''} ${
+          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-100 focus:bg-gray-100'}
+        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `}
         title={title}
       >
@@ -55,18 +55,20 @@ const ResourceItem = <T,>({
           aria-label={type}
           className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
         />
-        <span className="text-left break-all">{label}</span>
-        {childCount <= 0 && <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />}
+        <span className={`relative  flex items-center ${selected ? 'mr-8' : ''}`}>
+          <span className="line-clamp-2 text-left break-word">{label}</span>
+          {selected && <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute -right-8" />}
+        </span>
       </ModalOpeningButton>
       {childCount > 0 && (
         <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`}
+          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`}
         >
           <span className="ml-auto flex items-center">
-            <span className="truncate w-10 text-right" title={String(childCount)}>
+            <span className="truncate w-14 text-right" title={String(childCount)}>
               {childCount}
             </span>
             <Icon icon={'arrow-right' as IconOptions} className="ml-1" />

package/src/ResourcePicker/ResetButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export const ResetButton = ({ isDisabled }: { isDisabled: boolean }) => (
+  <button
+    type="button"
+    aria-label={`Remove selection`}
+    title={`Remove selection`}
+    className="text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed"
+    disabled={isDisabled}
+  >
+    <CloseRoundedIcon />
+  </button>
+);