@squiz/generic-browser-lib 1.67.0 → 1.67.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squiz/generic-browser-lib
 
+## 1.67.2
+
+### Patch Changes
+
+- ebcb0d2: Changed id attribute to data-id for component buttons in component browser
+
+## 1.67.1
+
+### Patch Changes
+
+- e60bb77: Added ID attribute to component buttons
+
 ## 1.67.0
 
 ### Minor Changes

package/lib/ResourceItem/ResourceItem.d.ts

@@ -16,6 +16,7 @@ interface ResourceItem<T> {
     componentIcon?: ReactElement | undefined;
     iconSource?: ResourceSources;
     showChevron?: boolean;
+    id?: string;
 }
-declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource, showChevron, }: ResourceItem<T>) => React.JSX.Element;
+declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource, showChevron, id, }: ResourceItem<T>) => React.JSX.Element;
 export { ResourceItem };

package/lib/ResourceItem/ResourceItem.js

@@ -9,14 +9,14 @@ const react_aria_1 = require("react-aria");
 const ModalOpeningButton_1 = require("../Modal/ModalOpeningButton");
 const Icon_1 = require("../Icons/Icon");
 const utils_1 = require("../Utils/utils");
-const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource = 'matrix', showChevron = false, }) => {
+const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, componentIcon, iconSource = 'matrix', showChevron = false, id, }) => {
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
     const isDisabled = allowedTypes !== undefined && !allowedTypes.includes((0, utils_1.transformSnakeCase)(type));
     const title = isDisabled ? "You can't select this item" : label;
     return (react_1.default.createElement("li", { className: `squiz-gb-scope flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`, key: (0, utils_1.uuid)() },
         react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), "aria-label": childCount === undefined ? `Drill down to ${label} children` : '', className: `
           relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount !== undefined && childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
-        `, title: title },
+        `, title: title, "data-id": id },
             react_1.default.createElement(Icon_1.Icon, { icon: type, resourceSource: iconSource, "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}`, componentIcon: componentIcon }),
             react_1.default.createElement("span", { className: `relative  flex items-center ${selected ? 'mr-8' : ''}` },
                 react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word" }, label),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.67.0",
+  "version": "1.67.2",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/ResourceItem/ResourceItem.tsx

@@ -21,6 +21,7 @@ interface ResourceItem<T> {
   componentIcon?: ReactElement | undefined;
   iconSource?: ResourceSources;
   showChevron?: boolean;
+  id?: string;
 }
 
 const ResourceItem = <T,>({
@@ -37,6 +38,7 @@ const ResourceItem = <T,>({
   componentIcon,
   iconSource = 'matrix',
   showChevron = false,
+  id,
 }: ResourceItem<T>) => {
   const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
   const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(transformSnakeCase(type));
@@ -59,6 +61,7 @@ const ResourceItem = <T,>({
         } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `}
         title={title}
+        data-id={id}
       >
         <Icon
           icon={type as IconOptions}