@neurodyn/react-room-viewer 0.0.20 → 0.0.21

package/dist/index.js

@@ -1088,6 +1088,13 @@ var __webpack_modules__ = {
     overflow: hidden;
   }
 
+  .line-clamp-3 {
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .block {
     display: block;
   }
@@ -2957,6 +2964,10 @@ var __webpack_modules__ = {
     overflow-wrap: break-word;
   }
 
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
+
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -3428,6 +3439,10 @@ var __webpack_modules__ = {
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
+    .group-hover\\:border-icons-normal:is(:where(.group):hover *) {
+      border-color: var(--v-icons-normal);
+    }
+
     .group-hover\\:opacity-100:is(:where(.group):hover *) {
       opacity: 1;
     }
@@ -3772,10 +3787,6 @@ var __webpack_modules__ = {
       }
     }
 
-    .hover\\:border-icons-normal:hover {
-      border-color: var(--v-icons-normal);
-    }
-
     .hover\\:bg-accent:hover {
       background-color: var(--accent);
     }
@@ -8857,6 +8868,10 @@ const RESOURCE_IDENTITY_ANSWERS = {
 function resolveResourceIdentityAnswers(type) {
     return RESOURCE_IDENTITY_ANSWERS[resolveResourceProfile(type).identity];
 }
+function getResourceProductName(type, object, material, fallback = '') {
+    const { namesProduct } = resolveMaterialRoleAnswers(type);
+    return namesProduct ? material?.name ?? object?.name ?? object?.kit?.name ?? fallback : object?.kit?.name ?? object?.name ?? material?.name ?? fallback;
+}
 function getMaterialId(material) {
     return material.hid ?? '';
 }
@@ -8939,7 +8954,7 @@ function useRoomViewerWallResourceMaterialOptions() {
 }
 function useRoomViewerMaterialCatalog({ includeEmbeddedObject = false } = {}) {
     const { material, tinuuid, embeddedObject, selectedObject, setMaterial, setTinuuid, apiKey, baseURL, source, widgetSession, setAccessError, setLoadError } = useRoomViewerResource();
-    const { type } = useRoomViewerMetadata();
+    const { type, name } = useRoomViewerMetadata();
     const ownerUuid = embeddedObject?.owner?.uuid;
     const { data, error, isFetchingNextPage, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
         queryKey: roomViewerOwnerObjectsQueryKey(ownerUuid, {
@@ -9031,6 +9046,7 @@ function useRoomViewerMaterialCatalog({ includeEmbeddedObject = false } = {}) {
                 return {
                     materialId,
                     name: ('material-name' === catalogLabel ? material.name : object.kit?.name ?? object.name) ?? material.name ?? '',
+                    productName: getResourceProductName(type, object, material, name),
                     material,
                     tinuuid: object.tinuuid
                 };
@@ -9039,7 +9055,9 @@ function useRoomViewerMaterialCatalog({ includeEmbeddedObject = false } = {}) {
         catalogsEveryMaterial,
         catalogLabel,
         composition,
-        objects
+        objects,
+        type,
+        name
     ]);
     const selectedCollection = 'color-design' === composition && selectedObject?.tinuuid === tinuuid && selectedObject?.kit?.uuid ? objects.find((object)=>getCollapseKey(object) === getCollapseKey(selectedObject)) : void 0;
     const selectedMaterialId = selectedCollection?.tinuuid !== tinuuid && selectedCollection ? getMaterialId(selectedCollection.materials?.[0] ?? {}) : material ? getMaterialId(material) : '';
@@ -18602,14 +18620,14 @@ function MaterialSelectionContent({ className, gridClassName, titleClassName, on
                     className: "grid min-h-max grid-cols-3 gap-x-2 gap-y-2",
                     "data-testid": "material-selection-grid-items",
                     children: [
-                        materialItems.map(({ materialId, material, tinuuid, name })=>{
+                        materialItems.map(({ materialId, material, tinuuid, productName })=>{
                             const isSelected = materialId === selectedMaterialId;
                             const previewUrl = getMaterialPreviewUrl(material);
                             return /*#__PURE__*/ jsxs("button", {
                                 type: "button",
                                 "data-selected": isSelected,
                                 "aria-pressed": isSelected,
-                                className: utils_cn('group relative grid aspect-square min-w-0 place-items-center overflow-hidden rounded-lg border border-border bg-background-containers p-1 text-left transition hover:border-icons-normal focus-visible:ring-2 focus-visible:ring-icons-normal focus-visible:outline-hidden'),
+                                className: "group flex min-w-0 flex-col gap-1 rounded-lg bg-background-containers text-left focus-visible:ring-2 focus-visible:ring-icons-normal focus-visible:outline-hidden",
                                 onClick: ()=>handleSelectMaterial(materialId),
                                 onKeyDown: (event)=>{
                                     if ('Enter' === event.key || ' ' === event.key) {
@@ -18618,23 +18636,28 @@ function MaterialSelectionContent({ className, gridClassName, titleClassName, on
                                     }
                                 },
                                 children: [
-                                    previewUrl ? /*#__PURE__*/ jsx_runtime_jsx("img", {
-                                        src: previewUrl,
-                                        alt: "",
-                                        className: "size-full rounded-md object-cover"
-                                    }) : /*#__PURE__*/ jsx_runtime_jsx(image_Image, {
-                                        className: "size-6 text-icons-normal"
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "relative grid aspect-square w-full shrink-0 place-items-center overflow-hidden rounded-lg border border-border p-1 transition group-hover:border-icons-normal",
+                                        children: [
+                                            previewUrl ? /*#__PURE__*/ jsx_runtime_jsx("img", {
+                                                src: previewUrl,
+                                                alt: "",
+                                                className: "size-full rounded-md object-cover"
+                                            }) : /*#__PURE__*/ jsx_runtime_jsx(image_Image, {
+                                                className: "size-6 text-icons-normal"
+                                            }),
+                                            isSelected && /*#__PURE__*/ jsx_runtime_jsx("span", {
+                                                className: "absolute top-1 right-1 grid size-6 place-items-center rounded-full bg-icons-blue text-icons-white",
+                                                "data-testid": "material-selection-selected-check",
+                                                children: /*#__PURE__*/ jsx_runtime_jsx(CheckDone, {
+                                                    className: "size-4"
+                                                })
+                                            })
+                                        ]
                                     }),
                                     /*#__PURE__*/ jsx_runtime_jsx("span", {
-                                        className: "sr-only",
-                                        children: name
-                                    }),
-                                    isSelected && /*#__PURE__*/ jsx_runtime_jsx("span", {
-                                        className: "absolute top-1 right-1 grid size-6 place-items-center rounded-full bg-icons-blue text-icons-white",
-                                        "data-testid": "material-selection-selected-check",
-                                        children: /*#__PURE__*/ jsx_runtime_jsx(CheckDone, {
-                                            className: "size-4"
-                                        })
+                                        className: "typo-base-12 line-clamp-3 w-full wrap-anywhere text-text-base",
+                                        children: productName
                                     })
                                 ]
                             }, `${tinuuid}-${materialId}`);
@@ -19220,7 +19243,6 @@ function ProductCardSlot_getMaterialPreviewUrl(material) {
 function ProductCardSlot({ actions, band, slot, presentation }) {
     const { t } = useTranslation();
     const { displayUnit, name, type } = useRoomViewerMetadata();
-    const { namesProduct } = resolveMaterialRoleAnswers(type);
     const { containerRef } = useRoomViewerSceneState();
     const { material, selectedObject, tinuuid } = useRoomViewerResource();
     const { variantItems, selectedTinuuid, selectVariant } = useRoomViewerVariantCatalog();
@@ -19228,7 +19250,7 @@ function ProductCardSlot({ actions, band, slot, presentation }) {
     const unitLabel = t(`units.${displayUnit}`);
     const isOpen = actions.isMaterialSelectionOpen;
     const actionLabel = isOpen ? t('floor.scene.hideCatalog') : t(`resourceType.${type}.${presentation.actionLabelResourceTypeKey}`);
-    const materialName = namesProduct ? material?.name ?? selectedObject?.name ?? selectedObject?.kit?.name ?? name : selectedObject?.kit?.name ?? selectedObject?.name ?? material?.name ?? name;
+    const materialName = getResourceProductName(type, selectedObject, material, name);
     const previewUrl = ProductCardSlot_getMaterialPreviewUrl(material) ?? selectedObject?.preview?.subRes?.small ?? selectedObject?.preview?.url ?? selectedObject?.mainPreview;
     const selectedVariant = variantItems.find((item)=>item.tinuuid === selectedTinuuid);
     const isVariantSelectionCurrent = Boolean(selectedVariant);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-room-viewer",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "publishConfig": {
     "access": "public"
   },