@api-client/ui 0.2.10 → 0.2.11

package/src/md/list/internals/ListItem.ts

@@ -6,6 +6,8 @@ import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionCon
 import UiRipple from '../../ripple/internals/ripple.js'
 import { setDisabled } from '../../../lib/disabled.js'
 import { ripple } from '../../effects/rippleDirective.js'
+
+import '@material/web/focus/md-focus-ring.js'
 import '../../ripple/ui-ripple.js'
 
 export enum ListItemLines {
@@ -60,6 +62,8 @@ export default class UiListItem extends UiElement {
    */
   @property({ type: Boolean, reflect: true }) accessor static = false
 
+  @property({ type: Number, reflect: true }) override accessor tabIndex = -1
+
   constructor() {
     super()
 
@@ -71,11 +75,17 @@ export default class UiListItem extends UiElement {
     this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
     this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
-    this.addEventListener('focus', this.handleFocus.bind(this))
-    this.addEventListener('blur', this.handleBlur.bind(this))
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>): void {
+    super.updated(changedProperties)
+    if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {
+      this.ripple?.endPress()
+    }
   }
 
   override connectedCallback(): void {
@@ -98,8 +108,7 @@ export default class UiListItem extends UiElement {
       return
     }
     if (e.key !== ' ' && e.key !== 'Enter') return
-
-    e.preventDefault()
+    // do not prevent default, so that parent elements can handle the key event
     this.beginPress({ positionEvent: e })
   }
 
@@ -111,7 +120,7 @@ export default class UiListItem extends UiElement {
     }
     if (e.key !== ' ' && e.key !== 'Enter') return
 
-    e.preventDefault()
+    // do not prevent default, so that parent elements can handle the key event
     this.endPress({ cancelled: false, actionData: { item: this } })
   }
 
@@ -131,7 +140,7 @@ export default class UiListItem extends UiElement {
     this.ripple.endPress()
   }
 
-  protected handlePointerEnter(e: PointerEvent): void {
+  override handlePointerEnter(e: PointerEvent): void {
     if (this.disabled || this.static) {
       e.stopPropagation()
       e.preventDefault()
@@ -151,20 +160,6 @@ export default class UiListItem extends UiElement {
     this.ripple.endHover()
   }
 
-  protected handleFocus(): void {
-    if (this.disabled || this.static) {
-      return
-    }
-    this.ripple.beginFocus()
-  }
-
-  protected handleBlur(): void {
-    if (this.disabled || this.static) {
-      return
-    }
-    this.ripple.endFocus()
-  }
-
   /**
    * Focuses list item and makes list item focusable via keyboard.
    */
@@ -174,7 +169,6 @@ export default class UiListItem extends UiElement {
     }
     this.setAttribute('tabindex', '0')
     this.focus()
-    this.ripple.beginFocus()
   }
 
   /**
@@ -209,6 +203,7 @@ export default class UiListItem extends UiElement {
     })
 
     return html`
+      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}" inward></md-focus-ring>
       <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
         <div class="container"></div>
         <div class="state"></div>

package/src/md/ripple/internals/ripple.ts

@@ -7,10 +7,10 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
-import { createAnimationSignal, Easing } from '../../motion/animation.js'
+import { Easing } from '../../motion/animation.js'
 
 const PRESS_GROW_MS = 450
-const MINIMUM_PRESS_MS = 225
+const MINIMUM_PRESS_MS = 80
 const INITIAL_ORIGIN_SCALE = 0.2
 const PADDING = 10
 const SOFT_EDGE_MINIMUM_SIZE = 75
@@ -52,7 +52,9 @@ export default class UiRipple extends LitElement {
 
   protected initialSize = 0
 
-  protected pressAnimationSignal = createAnimationSignal()
+  private rippleStartEvent?: Event | null
+
+  // protected pressAnimationSignal = createAnimationSignal()
 
   protected growAnimation: Animation | null = null
 
@@ -147,13 +149,14 @@ export default class UiRipple extends LitElement {
     if (!mdRoot) {
       return
     }
-
+    this.pressed = true
+    this.growAnimation?.cancel()
     this.determineRippleSize()
     const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent)
     const translateStart = `${startPoint.x}px, ${startPoint.y}px`
     const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
 
-    const signal = this.pressAnimationSignal.start()
+    // const signal = this.pressAnimationSignal.start()
 
     const growAnimation = mdRoot.animate(
       {
@@ -171,19 +174,48 @@ export default class UiRipple extends LitElement {
       }
     )
 
-    growAnimation.addEventListener('finish', () => {
-      this.pressAnimationSignal.finish()
-      this.growAnimation = null
-    })
+    // growAnimation.addEventListener('finish', () => {
+    //   this.pressAnimationSignal.finish()
+    //   this.growAnimation = null
+    // })
 
-    signal.addEventListener('abort', () => {
-      growAnimation.cancel()
-      this.growAnimation = null
-    })
+    // signal.addEventListener('abort', () => {
+    //   growAnimation.cancel()
+    //   this.growAnimation = null
+    // })
 
     this.growAnimation = growAnimation
   }
 
+  private async endPressAnimation() {
+    this.rippleStartEvent = undefined
+    // this.state = State.INACTIVE
+    const animation = this.growAnimation
+    let pressAnimationPlayState = Infinity
+    if (typeof animation?.currentTime === 'number') {
+      pressAnimationPlayState = animation.currentTime
+    } else if (animation?.currentTime) {
+      pressAnimationPlayState = animation.currentTime.to('ms').value
+    }
+
+    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+      this.pressed = false
+      return
+    }
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
+    })
+
+    if (this.growAnimation !== animation) {
+      // A new press animation was started. The old animation was canceled and
+      // should not finish the pressed state.
+      return
+    }
+
+    this.pressed = false
+  }
+
   beginHover(hoverEvent?: Event): void {
     if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {
       this.hovered = true
@@ -204,6 +236,7 @@ export default class UiRipple extends LitElement {
 
   beginPress(positionEvent?: Event | null): void {
     this.pressed = true
+    this.rippleStartEvent = positionEvent
     if (this.delayedEndPressHandle !== null) {
       clearTimeout(this.delayedEndPressHandle)
       this.delayedEndPressHandle = null
@@ -221,5 +254,6 @@ export default class UiRipple extends LitElement {
         this.delayedEndPressHandle = null
       }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number
     }
+    this.endPressAnimation()
   }
 }

package/src/md/segmented-button/internals/SegmentedButton.ts

@@ -42,7 +42,6 @@ export default class SegmentedButton extends UiElement {
 
   constructor() {
     super()
-    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.actionController.cancelKeyboardEvents = true
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
@@ -50,6 +49,7 @@ export default class SegmentedButton extends UiElement {
     this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
     this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
     this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
   }
@@ -78,7 +78,7 @@ export default class SegmentedButton extends UiElement {
     }
   }
 
-  protected handlePointerEnter(e: PointerEvent): void {
+  override handlePointerEnter(e: PointerEvent): void {
     this.ripple.beginHover(e)
   }
 

package/test/ui/button/UiIconButton.test.ts

@@ -1,6 +1,6 @@
 import { assert, fixture, html, nextFrame, oneEvent } from '@open-wc/testing'
 import sinon from 'sinon'
-import UiIconButton, { IconButtonType } from '../../../src/md/icon-button/internals/IconButton.js'
+import UiIconButton from '../../../src/md/icon-button/internals/IconButton.js'
 import { UiMock } from '../../helpers/UiMock.js'
 import { IconType } from '../../../src/md/icons/Icons.js'
 
@@ -37,13 +37,6 @@ describe('md', () => {
       )
     }
 
-    describe('defaults', () => {
-      it('sets the default type', async () => {
-        const button = await basicFixture('add')
-        assert.equal(button.type, IconButtonType.standard)
-      })
-    })
-
     describe('toggle button', () => {
       it('sets button active when pressing the button with space', async () => {
         const button = await toggleFixture('add')

package/build/src/md/icon-button/internals/IconButton.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/icon-button/internals/IconButton.styles.ts"],"names":[],"mappings":";AAEA,wBAmmBC"}