@getflip/swirl-components 0.120.1 → 0.120.2

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-10T11:34:57",
+  "timestamp": "2024-01-11T13:30:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",

package/dist/cjs/swirl-app-layout_6.cjs.entry.js

@@ -479,6 +479,12 @@ const SwirlResourceListItem = class {
       this.checked = !this.checked;
       this.valueChange.emit(this.checked);
     };
+    this.onBlur = () => {
+      this.makeControlUnfocusable();
+    };
+    this.onFocus = () => {
+      this.makeControlFocusable();
+    };
     this.onMenuTriggerClick = (event) => {
       if (this.disabled && !Boolean(this.href)) {
         event.stopPropagation();
@@ -518,6 +524,7 @@ const SwirlResourceListItem = class {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    this.makeControlUnfocusable();
     if (Boolean(this.menuTriggerId)) {
       console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
     }
@@ -539,6 +546,23 @@ const SwirlResourceListItem = class {
       this.hasMedia = hasMedia;
     }
   }
+  getControl() {
+    return this.el.querySelector('[slot="control"] button');
+  }
+  makeControlFocusable() {
+    const control = this.getControl();
+    if (!Boolean(control)) {
+      return;
+    }
+    control.tabIndex = 0;
+  }
+  makeControlUnfocusable() {
+    const control = this.getControl();
+    if (!Boolean(control)) {
+      return;
+    }
+    control.tabIndex = -1;
+  }
   render() {
     const Tag = !this.interactive && !this.selectable
       ? "div"
@@ -567,7 +591,7 @@ const SwirlResourceListItem = class {
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
     });
-    return (index.h(index.Host, { role: "row" }, index.h("div", { class: className, role: "gridcell" }, index.h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { class: "resource-list-item__media" }, index.h("slot", { name: "media" }))), index.h("span", { class: "resource-list-item__label-container" }, index.h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (index.h("span", { class: "resource-list-item__description" }, this.description))), showMeta && (index.h("span", { class: "resource-list-item__meta" }, index.h("span", { class: "resource-list-item__meta-text" }, this.meta), index.h("span", { class: "resource-list-item__badges" }, index.h("slot", { name: "badges" }))))), this.selectable && (index.h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", null))))), index.h("span", { class: "resource-list-item__control" }, index.h("slot", { name: "control" })), showMenu && (index.h("swirl-popover-trigger", { popover: this.menuTriggerId }, index.h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (index.h(index.Host, { role: "row" }, index.h("div", { class: className, role: "gridcell" }, index.h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { class: "resource-list-item__media" }, index.h("slot", { name: "media" }))), index.h("span", { class: "resource-list-item__label-container" }, index.h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (index.h("span", { class: "resource-list-item__description" }, this.description))), showMeta && (index.h("span", { class: "resource-list-item__meta" }, index.h("span", { class: "resource-list-item__meta-text" }, this.meta), index.h("span", { class: "resource-list-item__badges" }, index.h("slot", { name: "badges" }))))), this.selectable && (index.h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", null))))), index.h("span", { class: "resource-list-item__control" }, index.h("slot", { name: "control" })), showMenu && (index.h("swirl-popover-trigger", { popover: this.menuTriggerId }, index.h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   get el() { return index.getElement(this); }
 };