Merge branch 'main' into chore/biome

# Conflicts: # abstract/ActivityBlock.js # abstract/Block.js # blocks/CloudImageEditor/src/CropFrame.js # blocks/CloudImageEditor/src/EditorScroller.js # blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js # blocks/Color/Color.js # blocks/ConfirmationDialog/ConfirmationDialog.js # blocks/EditableCanvas/CanMan.js # blocks/EditableCanvas/EditableCanvas.js # blocks/EditableCanvas/EditableCanvasToolbar.js # blocks/EditableCanvas/buttons.js # blocks/ExternalSource/ExternalSource.js # blocks/ExternalSource/buildStyles.js # blocks/FileItem/FileItem.js # blocks/FilePreview/FilePreview.js # blocks/LiveHtml/LiveHtml.js # blocks/Tabs/Tabs.js # blocks/Video/Video.js # types/jsx.d.ts
uploadcare · Jun 24, 2024 · 1c0bf19 · 1c0bf19
2 parents 1503dcd + 4fdf9a0
commit 1c0bf19
Show file tree

Hide file tree

Showing 153 changed files with 1,624 additions and 3,356 deletions.
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -40,11 +40,6 @@ module.exports = {
       files: ['blocks/**/*.css', 'solutions/**/*.css'],
       ignoreFiles: ['**/test/**/*.css'],
       plugins: ['./stylelint-force-app-name-prefix.cjs'],
-      rules: {
-        'plugin/stylelint-force-app-name-prefix': {
-          appName: 'lr',
-        },
-      },
     },
   ],
 };
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,34 @@
+# [0.46.0](https://github.com/uploadcare/blocks/compare/v0.45.0...v0.46.0) (2024-06-24)
+
+### Features
+
+- Significant improvements to accessibility and keyboard navigation, enhancing user experience and inclusivity ([#671](https://github.com/uploadcare/blocks/issues/671)) ([4acb8a0](https://github.com/uploadcare/blocks/commit/4acb8a0b7ea9c7a95be415627f7d4e1eb748fcf2))
+
+# [0.45.0](https://github.com/uploadcare/blocks/compare/v0.44.0...v0.45.0) (2024-06-23)
+
+### BEAKING CHANGES
+
+- The previously deprecated API method `setUploadMetadata` has been removed. Use `metadata` instance property on `lr-config` block instead. See [metadata](https://uploadcare.com/docs/file-uploader/options/#metadata) for more details.
+- The previously deprecated API method `addFiles` has been removed. Use `addFileFromObject`, `addFileFromUrl` or `addFileFromUuid` instead. See [File Uploader API](https://uploadcare.com/docs/file-uploader/api/#add-file-from-object) for more details.
+
+See the [migration guide](https://uploadcare.com/docs/file-uploader/migration-to-0.45.0/) for details.
+
+# [0.44.0](https://github.com/uploadcare/blocks/compare/v0.43.0...v0.44.0) (2024-06-21)
+
+### BEAKING CHANGES
+
+- All theme variables of the previous version are deprecated and won't affect the look anymore.
+- The default button that opens the uploader dialog (SimpleBtn) component now uses independent variables.
+- By default, the theme now uses OKLCH color space. You can still override it using other color spaces, but we recommend converting your colors to OKLCH.
+
+See the [migration guide](https://uploadcare.com/docs/file-uploader/migration-to-0.44.0/) for details.
+
+Full styling docs are available [here](https://uploadcare.com/docs/file-uploader/styling/).
+
+### Features
+
+- updated theming mechanics with oklch colors and reworked css properties ([#662](https://github.com/uploadcare/blocks/issues/662)) ([ee90e66](https://github.com/uploadcare/blocks/commit/ee90e66c076e21e1ee92b2f4c60f8eb955a7d5bc))
+
 # [0.43.0](https://github.com/uploadcare/blocks/compare/v0.42.1...v0.43.0) (2024-06-14)
 
 ### Features

diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ and [even more](<(https://uploadcare.com/features/?ref=github-readme)>).
 
 See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
 
-<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/8035cdc7-f0b9-4ea9-8c15-05816f315481/">
+<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
 
 ## Core features
 

diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
@@ -1,6 +1,6 @@
-import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 // @ts-check
 import { debounce } from '../blocks/utils/debounce.js';
+import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { Block } from './Block.js';
 import { activityBlockCtx } from './CTX.js';
 
@@ -15,15 +15,15 @@ export class ActivityBlock extends Block {
 
   /** @private */
   _deactivate() {
-    const actDesc = ActivityBlock._activityCallbacks.get(this);
+    let actDesc = ActivityBlock._activityCallbacks.get(this);
     this[ACTIVE_PROP] = false;
     this.removeAttribute(ACTIVE_ATTR);
     actDesc?.deactivateCallback?.();
   }
 
   /** @private */
   _activate() {
-    const actDesc = ActivityBlock._activityCallbacks.get(this);
+    let actDesc = ActivityBlock._activityCallbacks.get(this);
     this.$['*historyBack'] = this.historyBack.bind(this);
     /** @private */
     this[ACTIVE_PROP] = true;
@@ -138,9 +138,7 @@ export class ActivityBlock extends Block {
     /** @type {string | null} */
     const currentActivity = this.$['*currentActivity'];
 
-    /** @type {Set<import('./Block').Block>} */
-    const blocksRegistry = this.$['*blocksRegistry'];
-    const hasCurrentActivityInCtx = !![...blocksRegistry].find(
+    const hasCurrentActivityInCtx = !![...this.blocksRegistry].find(
       (block) => block instanceof ActivityBlock && block.activityType === currentActivity,
     );
 
@@ -169,18 +167,16 @@ export class ActivityBlock extends Block {
 
   historyBack() {
     /** @type {String[]} */
-    const history = this.$['*history'];
+    let history = this.$['*history'];
     if (history) {
       let nextActivity = history.pop();
       while (nextActivity === this.activityType) {
         nextActivity = history.pop();
       }
       let couldOpenActivity = !!nextActivity;
       if (nextActivity) {
-        /** @type {Set<ActivityBlock>} */
-        const blocksRegistry = this.$['*blocksRegistry'];
-        const nextActivityBlock = [...blocksRegistry].find((block) => block.activityType === nextActivity);
-        couldOpenActivity = nextActivityBlock?.couldOpenActivity ?? false;
+        const nextActivityBlock = [...this.blocksRegistry].find((block) => block.activityType === nextActivity);
+        couldOpenActivity = /** @type {ActivityBlock} */ (nextActivityBlock)?.couldOpenActivity ?? false;
       }
       nextActivity = couldOpenActivity ? nextActivity : undefined;
       this.$['*currentActivity'] = nextActivity;
@@ -198,7 +194,6 @@ ActivityBlock.activities = Object.freeze({
   DRAW: 'draw',
   UPLOAD_LIST: 'upload-list',
   URL: 'url',
-  CONFIRMATION: 'confirmation',
   CLOUD_IMG_EDIT: 'cloud-image-edit',
   EXTERNAL: 'external',
   DETAILS: 'details',

diff --git a/abstract/Block.js b/abstract/Block.js
@@ -3,7 +3,7 @@ import { BaseComponent, Data } from '@symbiotejs/symbiote';
 import { initialConfig } from '../blocks/Config/initialConfig.js';
 import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { WindowHeightTracker } from '../utils/WindowHeightTracker.js';
-import { extractCdnUrlModifiers, extractFilename, extractUuid } from '../utils/cdn-utils.js';
+import { extractFilename, extractCdnUrlModifiers, extractUuid } from '../utils/cdn-utils.js';
 import { getLocaleDirection } from '../utils/getLocaleDirection.js';
 import { getPluralForm } from '../utils/getPluralForm.js';
 import { applyTemplateData, getPluralObjects } from '../utils/template-utils.js';
@@ -12,14 +12,17 @@ import { blockCtx } from './CTX.js';
 import { LocaleManager, localeStateKey } from './LocaleManager.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
+import { A11y } from './a11y.js';
 
 const TAG_PREFIX = 'lr-';
 
 // @ts-ignore TODO: fix this
 export class Block extends BaseComponent {
   /** @type {string | null} */
   static StateConsumerScope = null;
-  static className = '';
+
+  /** @type {string[]} */
+  static styleAttrs = [];
   requireCtxName = false;
   allowCustomTemplate = true;
   /** @type {import('./ActivityBlock.js').ActivityType} */
@@ -36,15 +39,15 @@ export class Block extends BaseComponent {
     if (!str) {
       return '';
     }
-    const template = this.$[localeStateKey(str)] || str;
-    const pluralObjects = getPluralObjects(template);
-    for (const pluralObject of pluralObjects) {
+    let template = this.$[localeStateKey(str)] || str;
+    let pluralObjects = getPluralObjects(template);
+    for (let pluralObject of pluralObjects) {
       variables[pluralObject.variable] = this.pluralize(
         pluralObject.pluralKey,
         Number(variables[pluralObject.countVariable]),
       );
     }
-    const result = applyTemplateData(template, variables);
+    let result = applyTemplateData(template, variables);
     return result;
   }
 
@@ -94,10 +97,7 @@ export class Block extends BaseComponent {
    * @returns {Boolean}
    */
   hasBlockInCtx(callback) {
-    // @ts-ignore TODO: fix this
-    /** @type {Set} */
-    const blocksRegistry = this.$['*blocksRegistry'];
-    for (const block of blocksRegistry) {
+    for (let block of this.blocksRegistry) {
       if (callback(block)) {
         return true;
       }
@@ -128,14 +128,14 @@ export class Block extends BaseComponent {
   }
 
   connectedCallback() {
-    const className = /** @type {typeof Block} */ (this.constructor).className;
-    if (className) {
-      this.classList.toggle(`${TAG_PREFIX}${className}`, true);
-    }
+    const styleAttrs = /** @type {typeof Block} */ (this.constructor).styleAttrs;
+    styleAttrs.forEach((attr) => {
+      this.setAttribute(attr, '');
+    });
 
     if (this.hasAttribute('retpl')) {
       // @ts-ignore TODO: fix this
-      this.constructor.template = null;
+      this.constructor['template'] = null;
       this.processInnerHtml = true;
     }
     if (this.requireCtxName) {
@@ -168,7 +168,7 @@ export class Block extends BaseComponent {
       this.add('*blocksRegistry', new Set());
     }
 
-    const blocksRegistry = this.$['*blocksRegistry'];
+    let blocksRegistry = this.$['*blocksRegistry'];
     blocksRegistry.add(this);
 
     if (!this.has('*eventEmitter')) {
@@ -178,8 +178,13 @@ export class Block extends BaseComponent {
       this.add('*localeManager', new LocaleManager(this));
     }
 
+    if (!this.has('*a11y')) {
+      this.add('*a11y', new A11y());
+    }
+
     this.sub(localeStateKey('locale-id'), (localeId) => {
-      this.style.direction = getLocaleDirection(localeId);
+      const direction = getLocaleDirection(localeId);
+      this.style.direction = direction === 'ltr' ? '' : direction;
     });
   }
 
@@ -188,9 +193,18 @@ export class Block extends BaseComponent {
     return this.has('*localeManager') ? this.$['*localeManager'] : null;
   }
 
+  /** @returns {A11y | null} */
+  get a11y() {
+    return this.has('*a11y') ? this.$['*a11y'] : null;
+  }
+
+  /** @type {Set<Block>} */
+  get blocksRegistry() {
+    return this.$['*blocksRegistry'];
+  }
+
   destroyCallback() {
-    /** @type {Set<Block>} */
-    const blocksRegistry = this.$['*blocksRegistry'];
+    let blocksRegistry = this.blocksRegistry;
     blocksRegistry.delete(this);
 
     this.localeManager?.destroyL10nBindings(this);
@@ -217,25 +231,26 @@ export class Block extends BaseComponent {
     Data.deleteCtx(this.ctxName);
 
     this.localeManager?.destroy();
+    this.a11y?.destroy();
   }
 
   /**
    * @param {Number} bytes
    * @param {Number} [decimals]
    */
   fileSizeFmt(bytes, decimals = 2) {
-    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let units = ['B', 'KB', 'MB', 'GB', 'TB'];
     /**
      * @param {String} str
      * @returns {String}
      */
     if (bytes === 0) {
       return `0 ${units[0]}`;
     }
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${units[i]}`;
+    let k = 1024;
+    let dm = decimals < 0 ? 0 : decimals;
+    let i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + units[i];
   }
 
   /**
@@ -268,7 +283,7 @@ export class Block extends BaseComponent {
   /** @returns {import('../types').ConfigType} } */
   get cfg() {
     if (!this.__cfgProxy) {
-      const o = Object.create(null);
+      let o = Object.create(null);
       /** @private */
       this.__cfgProxy = new Proxy(o, {
         set: (obj, key, value) => {
@@ -327,10 +342,10 @@ export class Block extends BaseComponent {
   /** @param {String} [name] */
   static reg(name) {
     if (!name) {
-      Block.reg();
+      super.reg();
       return;
     }
-    Block.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
+    super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
   }
 }
 

diff --git a/abstract/CTX.js b/abstract/CTX.js
@@ -24,7 +24,6 @@ export const uploaderBlockCtx = (fnCtx) => ({
   '*commonProgress': 0,
   '*uploadList': [],
   '*focusedEntry': null,
-  '*uploadMetadata': null,
   '*uploadQueue': new Queue(1),
   '*uploadCollection': null,
   /** @type {ReturnType<import('../types').OutputErrorCollection>[]} */

diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js
@@ -3,10 +3,16 @@ import { Block } from './Block.js';
 import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends Block {
+  static styleAttrs = ['lr-wgt-common'];
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;
 
+  initCallback() {
+    super.initCallback();
+    this.a11y?.registerBlock(this);
+  }
+
   static set template(value) {
     SolutionBlock._template = `${svgIconsSprite + value}<slot></slot>`;
   }