@spectrum-web-components/overlay - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5-alpha.60

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.6.4",
+    "version": "0.6.5-alpha.60+a478c2c4",
     "description": "",
@@ -64,8 +64,8 @@ "main": "src/index.js",
         "@popperjs/core": "^2.2.2",
-        "@spectrum-web-components/base": "^0.1.3",
-        "@spectrum-web-components/theme": "^0.6.3",
+        "@spectrum-web-components/base": "^0.1.4-alpha.60+a478c2c4",
+        "@spectrum-web-components/theme": "^0.6.4-alpha.60+a478c2c4",
         "popper-max-size-modifier": "^0.2.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "d57ea3ab83d9c16738fdd95d326e3082b1f997e2"
+    "gitHead": "a478c2c484b45e88c5d8b5cc64a255e31d0a3829"
 }

README.md

@@ -55,3 +55,3 @@ ## Description
     <sp-button variant="primary" slot="trigger">
-        Bottopopover
+        Button popover
     </sp-button>
@@ -75,1 +75,5 @@ <sp-popover dialog slot="click-content" direction="bottom" tip open>
 ```
+
+## Accessibility
+
+When using an `<overlay-trigger>` element, it is important to be sure the that content you project into `slot="trigger"` is "interactive". This means that an element within that branch of DOM will be able to receive focus and said element will appropriately convert keyboard interactions to `click` events similar to what you find with `<a href="#">Anchors</a>`, `<button>Buttons</button>`, etc. You can find further reading on the subject of accessible keyboard interactions at [https://www.w3.org/WAI/WCAG21/Understanding/keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard).

src/OverlayTrigger.js

@@ -43,2 +43,4 @@ /*
     render() {
+        // Keyboard event availability documented in README.md
+        /* eslint-disable lit-a11y/click-events-have-key-events */
         return html `
@@ -67,2 +69,3 @@ <div
         `;
+        /* eslint-enable lit-a11y/click-events-have-key-events */
     }
@@ -69,0 +72,0 @@ updated(changes) {

src/OverlayTrigger.ts

@@ -71,2 +71,4 @@ /*
     protected render(): TemplateResult {
+        // Keyboard event availability documented in README.md
+        /* eslint-disable lit-a11y/click-events-have-key-events */
         return html`
@@ -95,2 +97,3 @@ <div
         `;
+        /* eslint-enable lit-a11y/click-events-have-key-events */
     }
@@ -97,0 +100,0 @@

src/popper-arrow-rotate.js

@@ -18,3 +18,4 @@ /*
         return;
-    let rotation;
+    let scaleType;
+    let scale;
     switch (ref.state.placement) {
@@ -24,3 +25,4 @@ case 'bottom':
         case 'bottom-end':
-            rotation = 180;
+            scaleType = 'scaleY';
+            scale = -1;
             break;
@@ -30,7 +32,6 @@ case 'top':
         case 'top-end':
-            return;
+            break;
         case 'left':
         case 'left-start':
         case 'left-end':
-            rotation = 270;
             break;
@@ -40,4 +41,7 @@ case 'right':
         case 'right-end':
-            rotation = 90;
+            scaleType = 'scaleX';
+            scale = -1;
             break;
+        // Should never go to default as all possible placement values are listed above.
+        // Don't alter the arrow in the case that it ever did as we don't know what changes to apply.
         /* c8 ignore next 2 */
@@ -47,3 +51,5 @@ default:
     }
-    ref.state.styles.arrow.transform += ` rotate(${rotation}deg)`;
+    if (!!scaleType && !!scale) {
+        ref.state.styles.arrow.transform += ` ${scaleType}(${scale})`;
+    }
     // Manage Spectrum CSS usage of negative left margin for centering.
@@ -50,0 +56,0 @@ ref.state.styles.arrow.marginLeft = '0';

src/popper-arrow-rotate.ts

@@ -24,3 +24,4 @@ /*
 
-    let rotation: number;
+    let scaleType!: string;
+    let scale!: number;
     switch (ref.state.placement) {
@@ -30,3 +31,4 @@ case 'bottom':
         case 'bottom-end':
-            rotation = 180;
+            scaleType = 'scaleY';
+            scale = -1;
             break;
@@ -36,7 +38,6 @@ case 'top':
         case 'top-end':
-            return;
+            break;
         case 'left':
         case 'left-start':
         case 'left-end':
-            rotation = 270;
             break;
@@ -46,4 +47,7 @@ case 'right':
         case 'right-end':
-            rotation = 90;
+            scaleType = 'scaleX';
+            scale = -1;
             break;
+        // Should never go to default as all possible placement values are listed above.
+        // Don't alter the arrow in the case that it ever did as we don't know what changes to apply.
         /* c8 ignore next 2 */
@@ -54,3 +58,5 @@ default:
 
-    ref.state.styles.arrow.transform += ` rotate(${rotation}deg)`;
+    if (!!scaleType && !!scale) {
+        ref.state.styles.arrow.transform += ` ${scaleType}(${scale})`;
+    }
     // Manage Spectrum CSS usage of negative left margin for centering.
@@ -57,0 +63,0 @@ ref.state.styles.arrow.marginLeft = '0';

src/popper.d.ts

@@ -1,6 +0,8 @@
-import { Instance } from '@popperjs/core/lib/types';
-import { Placement } from '@popperjs/core/lib/enums';
+/// <reference path="../local.d.ts" />
+import type { Instance } from '@popperjs/core/dist/esm/types.js';
+import type { Placement } from '@popperjs/core/dist/esm/enums.js';
 import maxSize from 'popper-max-size-modifier';
 import { applyMaxSize } from './apply-max-size.js';
-export declare const createPopper: <TModifier extends Partial<import("@popperjs/core/lib/types").Modifier<any, any>>>(reference: Element | import("@popperjs/core/lib/types").VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core/lib/types").OptionsGeneric<TModifier>> | undefined) => Instance;
-export { Instance, Placement, maxSize, applyMaxSize };
+export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | import("@popperjs/core").VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
+export type { Instance, Placement };
+export { maxSize, applyMaxSize };

src/popper.js

@@ -14,7 +14,9 @@ /*
 // See: https://popper.js.org/docs#popper-lite-tree-shaking
-import { popperGenerator, defaultModifiers, } from '@popperjs/core/lib/popper-lite';
-import flip from '@popperjs/core/lib/modifiers/flip.js';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js';
-import arrow from '@popperjs/core/lib/modifiers/arrow.js';
-import offset from '@popperjs/core/lib/modifiers/offset.js';
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../local.d.ts" />
+import { popperGenerator, defaultModifiers, } from '@popperjs/core/dist/esm/popper-lite.js';
+import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
+import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
+import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
+import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
 import { computeArrowRotateStyles } from './popper-arrow-rotate.js';
@@ -21,0 +23,0 @@ import maxSize from 'popper-max-size-modifier';

src/popper.ts

@@ -16,13 +16,15 @@ /*
 
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../local.d.ts" />
 import {
     popperGenerator,
     defaultModifiers,
-} from '@popperjs/core/lib/popper-lite';
-import { Instance } from '@popperjs/core/lib/types';
-import { Placement } from '@popperjs/core/lib/enums';
+} from '@popperjs/core/dist/esm/popper-lite.js';
+import type { Instance } from '@popperjs/core/dist/esm/types.js';
+import type { Placement } from '@popperjs/core/dist/esm/enums.js';
 
-import flip from '@popperjs/core/lib/modifiers/flip.js';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js';
-import arrow from '@popperjs/core/lib/modifiers/arrow.js';
-import offset from '@popperjs/core/lib/modifiers/offset.js';
+import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
+import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
+import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
+import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
 import { computeArrowRotateStyles } from './popper-arrow-rotate.js';
@@ -43,2 +45,3 @@ import maxSize from 'popper-max-size-modifier';
 
-export { Instance, Placement, maxSize, applyMaxSize };
+export type { Instance, Placement };
+export { maxSize, applyMaxSize };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

244472

increased by1.94%

Number of package files

71

increased by2.9%

Lines of code

3346

increased by2.01%

Number of lines in readme file

78

increased by5.41%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/base@0.1.4-alpha.178(transitive)

• + Added@spectrum-web-components/styles@0.6.2-alpha.263(transitive)

• + Added@spectrum-web-components/theme@0.6.4-alpha.178(transitive)

• - Removed@spectrum-web-components/base@0.1.3(transitive)

• - Removed@spectrum-web-components/styles@0.6.1(transitive)

• - Removed@spectrum-web-components/theme@0.6.3(transitive)

• Updated@spectrum-web-components/base@^0.1.4-alpha.60+a478c2c4

• Updated@spectrum-web-components/theme@^0.6.4-alpha.60+a478c2c4