superdesk-ui-framework 6.1.4 → 6.1.6

package/.github/workflows/publish-to-npm.yml

@@ -24,6 +24,8 @@ jobs:
             - uses: actions/checkout@v6
               with:
                   fetch-depth: 0
+                  ssh-key: ${{ secrets.PUBLISH_KEY }}
+                  persist-credentials: true
             - uses: actions/setup-node@v6
               with:
                   node-version: '22'
@@ -52,6 +54,14 @@ jobs:
             - run: npm run lint
             - run: npm run build
 
+            # Push the bump commit and tag BEFORE publishing, so a push failure
+            # aborts the run before the irreversible npm publish.
+            - name: Push version bump and tag
+              if: inputs.bump != 'none'
+              run: |
+                  git push origin "HEAD:${{ github.ref_name }}"
+                  git push origin "v${{ steps.package-version.outputs.version }}"
+
             - name: Upgrade npm for OIDC trusted publishing
               run: npm install -g npm@11
 
@@ -60,12 +70,6 @@ jobs:
               with:
                   provenance: true
 
-            - name: Push version bump and tag
-              if: inputs.bump != 'none'
-              run: |
-                  git push origin "HEAD:${{ github.ref_name }}"
-                  git push origin "v${{ steps.package-version.outputs.version }}"
-
             - name: Create GitHub Release
               uses: softprops/action-gh-release@v3
               with:

package/app/styles/_avatar.scss

@@ -4,6 +4,8 @@
 .sd-avatar {
     display: block;
     position: relative; // required for absolutely positioned indicators
+    flex-shrink: 0;
+    flex-grow: 0;
 
     &.sd-avatar--indicator-status--offline {
         .sd-avatar-content {

package/app/styles/_buttons.scss

@@ -7,7 +7,7 @@ $button-opacity-disabled: 0.60 !default;
 $icn-button-opacity-disabled: 0.40 !default;
 
 // /// transitions for buttons.
-$button-transition: all 0.2s ease-out, color 0.1s ease-out !default;
+$button-transition: all 0.2s ease, color 0.1s ease !default;
 $button-focus-box-shadow: 0 0 0 3px colors.$sd-colour--focus-shadow;
 $icn-button-focus-box-shadow: 0 0 0 2px colors.$sd-colour--focus-shadow;
 
@@ -59,9 +59,11 @@ $icn-button-focus-box-shadow: 0 0 0 2px colors.$sd-colour--focus-shadow;
         box-shadow: var(--new-button-active-shadow);
     }
 
-    &:focus-visible {
-        outline: $button-focus-box-shadow;
-        outline-offset: 1px;
+    &:not(:disabled) {
+        &:focus-visible {
+            outline: 2px solid var(--color-interactive-highlight);
+            outline-offset: 1px;
+        }
     }
 
     [class^="icon-"], [class*=" icon-"] {

package/app/styles/_sd-tag-input.scss

@@ -697,7 +697,6 @@ tags-input,
 
     .tags-input__placeholder {
         color: var(--color-text-subdued);
-        font-weight: 300;
     }
 }
 

package/app/styles/components/_list-item.scss

@@ -85,16 +85,21 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     }
 }
 
-.sd-list-item--active, .sd-list-item.active {
+.sd-list-item--active,
+.sd-list-item.active {
     background-color: $sd-ListItem-background-activated;
 }
 
-.sd-list-item--selected, .sd-list-item--selected:hover, .sd-list-item.selected, .sd-list-item.selected:hover  {
+.sd-list-item--selected,
+.sd-list-item--selected:hover,
+.sd-list-item.selected,
+.sd-list-item.selected:hover  {
     background-color: $sd-ListItem-background-selected;
     outline: 1px solid var(--sd-colour-interactive--alpha-50);
 }
 
-.sd-list-item--activated, .sd-list-item--activated:hover {
+.sd-list-item--activated,
+.sd-list-item--activated:hover {
     background-color: $sd-ListItem-background-activated;
 }
 
@@ -108,6 +113,11 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         cursor: default;
     }
 }
+.sd-list-item--focusable {
+    &:focus-within {
+        outline: 1px solid var(--color-interactive-highlight);
+    }
+}
 
 .sd-list-item--inactive {
     background-color: transparent;
@@ -136,11 +146,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     background: transparent;
 }
 
-.sd-list-item__border--locked, .sd-list-item__border--error {
+.sd-list-item__border--locked,
+.sd-list-item__border--error {
     background: colors.$red;
 }
 
-.sd-list-item__border--success, .sd-list-item__border--active {
+.sd-list-item__border--success,
+.sd-list-item__border--active {
     background: colors.$green;
 }
 

package/app/styles/form-elements/_inputs.scss

@@ -34,7 +34,8 @@
         background-color: var(--color-input-bg--hover);
     }
 
-    &:focus {
+    &:focus,
+    &:focus-within {
         box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
         border-color: var(--sd-colour-interactive);
         background-color: var(--sd-colour-interactive--alpha-20);

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -192,6 +192,19 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                     element.focus();
                 }
             }
+        } else if (
+            e.key === 'Delete' &&
+            !this.state.openDropdown &&
+            !this.props.readOnly &&
+            !this.props.disabled &&
+            this.props.clearable !== false &&
+            this.treeSelectRef.current?.contains(document.activeElement) === true
+        ) {
+            if (e.ctrlKey) {
+                this.setState({value: []});
+            } else if (this.state.value.length > 0) {
+                this.setState({value: this.state.value.slice(0, -1)});
+            }
         }
     };