@warp-ds/core - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/attention/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./utils/helpers.js";
+export * from './utils/helpers.js';

dist/attention/index.js

@@ -1,1 +0,1 @@
-export * from "./utils/helpers.js";
+export * from './utils/helpers.js';

dist/attention/utils/helpers.d.ts

@@ -22,3 +22,3 @@ import { ReferenceElement } from '@floating-ui/dom';
 export declare const arrowDirectionClassname: (dir: Directions) => Directions;
-export declare function useRecompute(state: AttentionState): Promise<void | AttentionState>;
+export declare function useRecompute(state: AttentionState): Promise<AttentionState | undefined>;
 export declare const autoUpdatePosition: (state: AttentionState) => (() => void) | undefined;

dist/attention/utils/helpers.js

@@ -1,2 +0,2 @@
-import { computePosition, flip, offset, arrow, autoUpdate, hide, } from '@floating-ui/dom';
+import { computePosition, flip, offset, arrow, autoUpdate, hide } from '@floating-ui/dom';
 const TOP_START = 'top-start';
@@ -26,3 +26,3 @@ const TOP = 'top';
     LEFT,
-    LEFT_END
+    LEFT_END,
 ];
@@ -57,4 +57,2 @@ export const opposites = {
 };
-const middlePosition = 'calc(50% - 7px)';
-const isDirectionVertical = (name) => [TOP_START, TOP, TOP_END, BOTTOM_START, BOTTOM, BOTTOM_END].includes(name);
 export const arrowDirectionClassname = (dir) => {
@@ -69,3 +67,3 @@ let direction;
     else {
-        direction = dir.charAt(0).toUpperCase() + dir.slice(1);
+        direction = (dir.charAt(0).toUpperCase() + dir.slice(1));
     }
@@ -87,13 +85,2 @@ return direction;
 };
-function computeCalloutArrow({ actualDirection, directionName = BOTTOM, arrowEl, }) {
-    if (!arrowEl)
-        return;
-    actualDirection = directionName;
-    const directionIsVertical = isDirectionVertical(directionName);
-    Object.assign(arrowEl?.style || {}, {
-        left: directionIsVertical ? middlePosition : '',
-        top: !directionIsVertical ? middlePosition : '',
-    });
-    applyArrowStyles(arrowEl, arrowRotation(actualDirection), actualDirection);
-}
 export async function useRecompute(state) {
@@ -105,8 +92,6 @@ if (!state?.isShowing)
     }
-    if (state?.isCallout)
-        return computeCalloutArrow(state);
     if (!state?.targetEl || !state?.attentionEl)
         return;
-    const targetEl = state?.targetEl;
-    const attentionEl = state?.attentionEl;
+    let targetEl = state?.targetEl;
+    const attentionEl = state.attentionEl;
     computePosition(targetEl, attentionEl, {
@@ -116,26 +101,32 @@ placement: state?.directionName ?? BOTTOM,
             offset({ mainAxis: state?.distance ?? 8, crossAxis: state?.skidding ?? 0 }),
-            state?.flip && flip({
-                crossAxis: state?.crossAxis,
-                fallbackPlacements: state?.fallbackPlacements,
-            }),
+            state?.flip &&
+                flip({
+                    // when flip is set to true it will move the attentionEl's placement to its opposite side or to the preferred placements if fallbackPlacements has a value
+                    crossAxis: state?.crossAxis,
+                    fallbackPlacements: state?.fallbackPlacements,
+                }),
             !state?.noArrow && state?.arrowEl && arrow({ element: state?.arrowEl }),
-            hide(), //will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
+            hide(), // will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
         ],
     }).then(({ x, y, middlewareData, placement }) => {
         state.actualDirection = placement;
-        Object.assign(attentionEl?.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-        });
+        // We only want floating-ui to calculate the callout's arrow position and not the attention element's position, since the targetEl can be undefined if isCallout is true.
+        // Therefore, we only add this style to the attentionEl when isCallout is false.
+        if (!state?.isCallout) {
+            Object.assign(attentionEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        }
         if (middlewareData?.hide && !state?.isCallout) {
-            const { referenceHidden } = middlewareData?.hide;
-            Object.assign(attentionEl?.style, {
+            const { referenceHidden } = middlewareData.hide;
+            Object.assign(attentionEl.style, {
                 visibility: referenceHidden ? 'hidden' : '',
             });
         }
-        const isRtl = window.getComputedStyle(attentionEl).direction === 'rtl'; //checks whether the text direction of the attentionEl is right-to-left. Helps to calculate the position of the arrowEl and ensure proper alignment 
+        const isRtl = window.getComputedStyle(attentionEl).direction === 'rtl'; // checks whether the text direction of the attentionEl is right-to-left. Helps to calculate the position of the arrowEl and ensure proper alignment
         const arrowPlacement = arrowDirection(placement).split('-')[1];
         if (middlewareData?.arrow && state?.arrowEl) {
             const arrowEl = state?.arrowEl;
-            const { x, y } = middlewareData?.arrow;
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
             let top = '';
@@ -147,9 +138,4 @@ let right = '';
             if (arrowPlacement === 'start') {
-                const value = typeof x === 'number'
-                    ? `calc(33px - ${arrowEl?.offsetWidth / 2}px)`
-                    : '';
-                top =
-                    typeof y === 'number'
-                        ? `calc(33px -  ${arrowEl?.offsetWidth / 2}px)`
-                        : '';
+                const value = typeof arrowX === 'number' ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : '';
+                top = typeof arrowY === 'number' ? `calc(24px -  ${arrowEl.offsetWidth / 2}px)` : '';
                 right = isRtl ? value : '';
@@ -159,17 +145,12 @@ left = isRtl ? '' : value;
             else if (arrowPlacement === 'end') {
-                const value = typeof x === 'number'
-                    ? `calc(33px - ${arrowEl?.offsetWidth / 2}px)`
-                    : '';
+                const value = typeof arrowX === 'number' ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : '';
                 right = isRtl ? '' : value;
                 left = isRtl ? value : '';
-                bottom =
-                    typeof y === 'number'
-                        ? `calc(33px - ${arrowEl?.offsetWidth / 2}px)`
-                        : '';
+                bottom = typeof arrowY === 'number' ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : '';
             }
             else {
-                left = typeof x === 'number' ? `${x}px` : '';
-                top = typeof y === 'number' ? `${y}px` : '';
+                left = typeof arrowX === 'number' ? `${arrowX}px` : '';
+                top = typeof arrowY === 'number' ? `${arrowY}px` : '';
             }
-            Object.assign(arrowEl?.style || {}, {
+            Object.assign(arrowEl.style, {
                 top,
@@ -187,5 +168,5 @@ right,
     // computePosition is only run once, so we need to wrap autoUpdate() around useRecompute() in order to recompute the attentionEl's position
-    // autoUpdate adds event listeners that are triggered on resize and on scroll and will keep calling the useRecompute(). 
+    // autoUpdate adds event listeners that are triggered on resize and on scroll and will keep calling the useRecompute().
     // autoUpdate returns a cleanup() function that removes the event listeners.
-    if (!state?.targetEl || !state?.attentionEl)
+    if (!state?.targetEl || !state?.attentionEl || state?.isCallout)
         return;
@@ -192,0 +173,0 @@ return autoUpdate(state?.targetEl, state?.attentionEl, () => {

dist/slider/index.d.ts

@@ -1,2 +0,2 @@
-export * from "./utils/helpers.js";
-export * from "./utils/handlers.js";
+export * from './utils/helpers.js';
+export * from './utils/handlers.js';

dist/slider/index.js

@@ -1,2 +0,2 @@
-export * from "./utils/helpers.js";
-export * from "./utils/handlers.js";
+export * from './utils/helpers.js';
+export * from './utils/handlers.js';

dist/slider/utils/handlers.js

@@ -1,2 +0,2 @@
-import { validKeyCodes, validKeys, eventOptions, clamp, roundDecimals, } from './helpers.js';
+import { validKeyCodes, validKeys, eventOptions, clamp, roundDecimals } from './helpers.js';
 export function createHandlers({ props, sliderState }) {
@@ -19,3 +19,3 @@ const clampedChange = (n) => clamp(n, { max: props.max, min: props.min });
         counter: 0,
-        repeatsBeforeAcceleration: 3
+        repeatsBeforeAcceleration: 3,
     };
@@ -32,3 +32,3 @@ function handleKeyDown(e) {
             case validKeys.down: {
-                const direction = (key === validKeys.right || key === validKeys.up) ? 1 : -1;
+                const direction = key === validKeys.right || key === validKeys.up ? 1 : -1;
                 let stepsToMove = sliderState.step;
@@ -38,3 +38,3 @@ if (!props.preventAcceleration) {
                         keydownRepeat.counter++;
-                        const acceleratedStepPercentage = Math.min((keydownRepeat.counter - keydownRepeat.repeatsBeforeAcceleration) / 100, .2);
+                        const acceleratedStepPercentage = Math.min((keydownRepeat.counter - keydownRepeat.repeatsBeforeAcceleration) / 100, 0.2);
                         stepsToMove = Math.max(sliderState.step, Math.ceil((direction > 0 ? props.max - sliderState.val : sliderState.val - props.min) * acceleratedStepPercentage));
@@ -41,0 +41,0 @@ }

dist/slider/utils/helpers.d.ts

@@ -1,2 +0,2 @@
-import { Dimensions } from "./handlers.js";
+import { Dimensions } from './handlers.js';
 type UpdateDimensions = ({ left, width }: Dimensions) => void;
@@ -3,0 +3,0 @@ export type ElementType<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ElementType> ? ElementType : never;

dist/slider/utils/helpers.js

@@ -19,10 +19,10 @@ export const useDimensions = () => {
 export const validKeys = Object.freeze({
-    up: "ArrowUp",
-    down: "ArrowDown",
-    left: "ArrowLeft",
-    right: "ArrowRight",
-    end: "End",
-    home: "Home",
-    pageup: "PageUp",
-    pagedown: "PageDown",
+    up: 'ArrowUp',
+    down: 'ArrowDown',
+    left: 'ArrowLeft',
+    right: 'ArrowRight',
+    end: 'End',
+    home: 'Home',
+    pageup: 'PageUp',
+    pagedown: 'PageDown',
 });
@@ -36,2 +36,2 @@ export const validKeyCodes = Object.values(validKeys);
 const isNumber = (e) => Number.isFinite(parseFloat(e));
-export const clamp = (v, { min, max }) => (isNumber(v) ? Math.min(Math.max(Number(v), min), max) : min);
+export const clamp = (v, { min, max }) => isNumber(v) ? Math.min(Math.max(Number(v), min), max) : min;

package.json

@@ -5,3 +5,3 @@ {
   "description": "Shared business logic for JS implementations of Warp Design System",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
@@ -13,2 +13,5 @@ "exports": {
     "*": {
+      "attention": [
+        "./dist/attention/index.d.ts"
+      ],
       "breadcrumbs": [
@@ -19,5 +22,2 @@ "./dist/breadcrumbs/index.d.ts"
         "./dist/slider/index.d.ts"
-      ],
-      "attention": [
-        "./dist/attention/index.d.ts"
       ]
@@ -33,4 +33,6 @@ }
   "scripts": {
+    "build": "tsc",
     "commit": "cz",
-    "build": "tsc",
+    "lint:check": "eslint . --ext ts --ignore-path .gitignore",
+    "lint": "eslint . --fix --ext ts --ignore-path .gitignore",
     "test": "echo \"no tests\""
@@ -42,7 +44,12 @@ },
   "devDependencies": {
-    "typescript": "^4.7.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@warp-ds/eslint-config": "1.0.5",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "8.57.0",
+    "prettier": "3.2.5",
     "semantic-release": "^22.0.7",
-    "cz-conventional-changelog": "^3.3.0"
+    "typescript": "^4.7.4"
   },
@@ -49,0 +56,0 @@ "publishConfig": {

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

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

Worsened metrics

Total package byte prevSize

30612

decreased by-0.03%

Dev dependency count

10

increased by100%

Lines of code

418

decreased by-4.35%

No dependency changes