@dxos/lit-ui 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-ui",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "Web Components for DXOS using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,13 +38,14 @@
     "dist"
   ],
   "dependencies": {
-    "@lit/react": "^1.0.5",
-    "lit": "^3.2.0",
-    "@dxos/react-hooks": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "@lit/react": "^1.0.8",
+    "lit": "^3.3.1",
+    "@dxos/react-hooks": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-types": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
-    "@dxos/test-utils": "0.8.4-main.dedc0f3"
+    "@dxos/test-utils": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/dx-anchor/dx-anchor.ts

@@ -5,22 +5,10 @@
 // TODO(thure): Find a way to instruct ESLint & Prettier to treat any whitespace between tags rendered in the `html` template function as significant.
 /* eslint-disable */
 
-import { html, LitElement } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { makeId } from '@dxos/react-hooks';
-
-export class DxAnchorActivate extends Event {
-  public readonly refId: string;
-  public readonly label: string;
-  public readonly trigger: DxAnchor;
-  constructor(props: { refId: string; label: string; trigger: DxAnchor }) {
-    super('dx-anchor-activate');
-    this.refId = props.refId;
-    this.label = props.label;
-    this.trigger = props.trigger;
-  }
-}
+import { DxAnchorActivate } from '@dxos/react-ui-types';
 
 @customElement('dx-anchor')
 export class DxAnchor extends LitElement {
@@ -30,7 +18,7 @@ export class DxAnchor extends LitElement {
   //   should be unnecessary, and it isn’t an issue for `DxAvatar` or `DxGrid`. What’s going on?
 
   @property({ type: String })
-  refid: string = makeId('dx-anchor');
+  refid: string = '';
 
   @property({ type: String })
   rootclassname: string | undefined = undefined;
@@ -38,7 +26,7 @@ export class DxAnchor extends LitElement {
   override connectedCallback (): void {
     super.connectedCallback();
     this.tabIndex = 0;
-    this.classList.add('dx-focus-ring');
+    this.classList.add(this.getAttribute('data-visible-focus')==='false' ? 'outline-none' : 'dx-focus-ring');
     if(this.rootclassname){
       this.classList.add(this.rootclassname);
     }

package/src/dx-avatar/dx-avatar.lit-stories.ts

@@ -3,17 +3,19 @@
 //
 
 import '@dxos-theme';
-
 import './dx-avatar.pcss';
+
 import { html } from 'lit';
 
 import { type DxAvatarProps } from './dx-avatar';
 
 export default {
   title: 'dx-avatar',
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'centered',
+  },
 };
 
-export const Basic = (props: DxAvatarProps) => {
+export const Basic = (_props: DxAvatarProps) => {
   return html`<dx-avatar hue="teal" fallback="Composer user" icon="/icons.svg#ph--basketball--regular"></dx-avatar>`;
 };

package/src/dx-avatar/dx-avatar.ts

@@ -7,7 +7,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { makeId } from '@dxos/react-hooks';
-import { getFirstTwoRenderableChars } from '@dxos/util';
 
 import { type Size } from '../defs';
 
@@ -37,6 +36,7 @@ export type DxAvatarProps = Partial<
   >
 >;
 
+// TODO(burdon): Needs popover.
 @customElement('dx-avatar')
 export class DxAvatar extends LitElement {
   private maskId: string;
@@ -120,6 +120,7 @@ export class DxAvatar extends LitElement {
       : 'var(--surface-bg)';
     const fg =
       this.hue && this.hueVariant === 'surface' ? `var(--dx-${this.hue}SurfaceText)` : 'var(--dx-accentSurfaceText)';
+
     return html`<span
       role="none"
       class=${`dx-avatar${this.rootClassName ? ` ${this.rootClassName}` : ''}`}
@@ -139,59 +140,67 @@ export class DxAvatar extends LitElement {
             ${
               this.variant === 'circle'
                 ? svg`<circle fill="white" cx="50%" cy="50%" r=${r} />`
-                : svg`<rect
-                  fill="white"
-                  width=${2 * r}
-                  height=${2 * r}
-                  x=${ringGap + ringWidth}
-                  y=${ringGap + ringWidth}
-                  rx=${rx}
-                />`
+                : svg`
+                  <rect
+                    fill="white"
+                    width=${2 * r}
+                    height=${2 * r}
+                    x=${ringGap + ringWidth}
+                    y=${ringGap + ringWidth}
+                    rx=${rx}
+                  />`
             }
           </mask>
         </defs>
         ${
           this.variant === 'circle'
-            ? svg` <circle
-              cx="50%"
-              cy="50%"
-              r=${r}
-              fill=${bg}
-            />`
-            : svg` <rect
-              fill=${bg}
-              x=${ringGap + ringWidth}
-              y=${ringGap + ringWidth}
-              width=${2 * r}
-              height=${2 * r}
-              rx=${rx}
-            />`
+            ? svg`
+              <circle
+                cx="50%"
+                cy="50%"
+                r=${r}
+                fill=${bg}
+              />`
+            : svg`
+              <rect
+                fill=${bg}
+                x=${ringGap + ringWidth}
+                y=${ringGap + ringWidth}
+                width=${2 * r}
+                height=${2 * r}
+                rx=${rx}
+              />`
         }
         ${
           this.icon
-            ? svg`<use
+            ? svg`
+              <use
                 class="dx-avatar__icon"
                 href=${this.icon}
                 x=${sizePx / 5}
                 y=${sizePx / 5}
                 width=${(3 * sizePx) / 5}
                 height=${(3 * sizePx) / 5} />`
-            : svg`<text
+            : // NOTE: Firefox currently doesn't fully support alignment-baseline.
+              svg`
+              <text
                 x="50%"
                 y="50%"
                 class="dx-avatar__fallback-text"
                 fill=${fg}
                 text-anchor="middle"
                 alignment-baseline="central"
+                dominant-baseline="middle"
                 font-size=${this.size === 'px' ? '200%' : this.size * fontScale}
                 mask=${`url(#${this.maskId})`}
               >
-                ${getFirstTwoRenderableChars(this.fallback)}
+                ${/\p{Emoji_Presentation}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
               </text>`
         }
         ${
           this.imgSrc &&
-          svg`<image
+          svg`
+            <image
               width="100%"
               height="100%"
               preserveAspectRatio="xMidYMid slice"
@@ -211,3 +220,17 @@ export class DxAvatar extends LitElement {
     return this;
   }
 }
+
+/**
+ * Returns the first two renderable characters from a string that are separated by non-word characters.
+ * Handles Unicode characters correctly.
+ */
+const getInitials = (label = ''): string[] => {
+  return label
+    .trim()
+    .split(/\s+/)
+    .map((str) => str.replace(/[^\p{L}\p{N}\s]/gu, ''))
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0].toUpperCase());
+};

package/src/index.ts

@@ -4,5 +4,5 @@
 
 export * from './dx-anchor';
 export * from './dx-avatar';
-export * from './dx-tag-picker';
 export * from './dx-icon';
+export * from './dx-tag-picker';

package/src/react.ts

@@ -5,8 +5,9 @@
 import { type EventName, createComponent } from '@lit/react';
 import React, { type ComponentPropsWithRef } from 'react';
 
+import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/react-ui-types';
+
 import {
-  type DxAnchorActivate,
   type DxTagPickerItemClick,
   DxAnchor as NaturalDxAnchor,
   DxAvatar as NaturalDxAvatar,
@@ -19,7 +20,7 @@ export const DxAnchor = createComponent({
   elementClass: NaturalDxAnchor,
   react: React,
   events: {
-    onActivate: 'dx-anchor-activate' as EventName<DxAnchorActivate>,
+    onActivate: DX_ANCHOR_ACTIVATE as EventName<DxAnchorActivate>,
   },
 });