@contentful/f36-utils - npm Package Compare versions

Comparing version 4.0.1-next-v4-9287.2420 to 4.0.1-next-v4-9320.2421

dist/main.js

@@ -1,2 +0,2 @@
-var e=require("react"),r=d(e),{useRef:t,useEffect:n,useState:o,useCallback:c}=e,{createPortal:u}=require("react-dom"),a=d(require("@babel/runtime/helpers/extends")),{cx:i,css:l}=require("emotion");function s(e,r,t,n){Object.defineProperty(e,r,{get:t,set:n,enumerable:!0,configurable:!0})}function d(e){return e&&e.__esModule?e.default:e}var f={};function p({children:e,container:r}){const o=t(r),c=t(document.createElement("div"));return n((()=>{o.current||(o.current=document.body);const e=c.current;return e.setAttribute("data-cf-ui-portal",""),o.current.appendChild(e),()=>{o.current&&o.current.removeChild(e)}}),[]),c.current?u(e,c.current):null}function y({className:e,children:t,...n}){return r.createElement("span",a({tabIndex:-1,className:i(l({name:"t8ljbi",styles:"display:inherit;outline:0;"}),e)},n),t)}s(f,"Portal",(()=>p)),s(f,"TabFocusTrap",(()=>y)),s(f,"useArrowKeyNavigation",(()=>b)),s(f,"useKeyboard",(()=>v));const m={vertical:{prev:"ArrowUp",next:"ArrowDown"},horizontal:{prev:"ArrowLeft",next:"ArrowRight"}},b=({itemsContainerRef:e,itemsSelector:r,keyType:t="vertical",initialFocusedIndex:n=0})=>{const[u,a]=o(n),i=c((n=>{const o=e.current;if(!o)return;const c=o.querySelectorAll(r);if(0===c.length)return;const i=c.length-1,l={[m[t].next]:()=>{a(u===i?0:u+1)},[m[t].prev]:()=>{a(0===u?i:u-1)}}[n.key];l&&(n.preventDefault(),l())}),[u,r,e,t]);return{focusedIndex:u,handleArrowsKeyDown:i}},v=e=>{const{ref:r,keys:t,event:o="keydown"}=e;let u=document;const a=c((e=>{Object.prototype.hasOwnProperty.call(t,e.key)&&t[e.key](e)}),[t]);n((()=>(r&&r.current&&(u=r.current),u.addEventListener(o,a),()=>{u.removeEventListener(o,a)})),[o,a])};var h,w;h=module.exports,w=f,Object.keys(w).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(h,e,{enumerable:!0,get:function(){return w[e]}})}));
+var e=require("react"),r=d(e),{useRef:t,useEffect:n,useCallback:o,useState:c}=e,{createPortal:u}=require("react-dom"),a=d(require("@babel/runtime/helpers/extends")),{cx:s,css:l}=require("emotion");function i(e,r,t,n){Object.defineProperty(e,r,{get:t,set:n,enumerable:!0,configurable:!0})}function d(e){return e&&e.__esModule?e.default:e}var f={};function p({children:e,container:r}){const o=t(r),c=t(document.createElement("div"));return n((()=>{o.current||(o.current=document.body);const e=c.current;return e.setAttribute("data-cf-ui-portal",""),o.current.appendChild(e),()=>{o.current&&o.current.removeChild(e)}}),[]),c.current?u(e,c.current):null}function y({className:e,children:t,...n}){return r.createElement("span",a({tabIndex:-1,className:s(l({name:"t8ljbi",styles:"display:inherit;outline:0;"}),e)},n),t)}i(f,"Portal",(()=>p)),i(f,"TabFocusTrap",(()=>y)),i(f,"useArrowKeyNavigation",(()=>b)),i(f,"useKeyboard",(()=>v));const m={vertical:{prev:"ArrowUp",next:"ArrowDown"},horizontal:{prev:"ArrowLeft",next:"ArrowRight"}},b=({itemsContainerRef:e,itemsSelector:r,keyType:t="vertical"})=>{const[n,u]=c(0),a=o((o=>{const c=e.current;if(!c)return;const a=c.querySelectorAll(r);if(0===a.length)return;const s=a.length-1,l={[m[t].next]:()=>{u(n===s?0:n+1)},[m[t].prev]:()=>{u(0===n?s:n-1)}}[o.key];l&&(o.preventDefault(),l())}),[n,r,e,t]);return{focusedIndex:n,handleArrowsKeyDown:a,setFocusedIndex:u}},v=e=>{const{ref:r,keys:t,event:c="keydown"}=e;let u=document;const a=o((e=>{Object.prototype.hasOwnProperty.call(t,e.key)&&t[e.key](e)}),[t]);n((()=>(r&&r.current&&(u=r.current),u.addEventListener(c,a),()=>{u.removeEventListener(c,a)})),[c,a])};var h,w;h=module.exports,w=f,Object.keys(w).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(h,e,{enumerable:!0,get:function(){return w[e]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import e,{useEffect as r,useRef as t,useCallback as n,useState as o}from"react";import{createPortal as a}from"react-dom";import s from"@babel/runtime/helpers/esm/extends";import{css as c,cx as u}from"emotion";function i(e,r,t,n){Object.defineProperty(e,r,{get:t,set:n,enumerable:!0,configurable:!0})}var l={};function d({children:e,container:n}){const o=t(n),s=t(document.createElement("div"));return r((()=>{o.current||(o.current=document.body);const e=s.current;return e.setAttribute("data-cf-ui-portal",""),o.current.appendChild(e),()=>{o.current&&o.current.removeChild(e)}}),[]),s.current?a(e,s.current):null}function m({className:r,children:t,...n}){return e.createElement("span",s({tabIndex:-1,className:u(c({name:"t8ljbi",styles:"display:inherit;outline:0;"}),r)},n),t)}i(l,"Portal",(()=>d)),i(l,"TabFocusTrap",(()=>m)),i(l,"useArrowKeyNavigation",(()=>f)),i(l,"useKeyboard",(()=>y));const p={vertical:{prev:"ArrowUp",next:"ArrowDown"},horizontal:{prev:"ArrowLeft",next:"ArrowRight"}},f=({itemsContainerRef:e,itemsSelector:r,keyType:t="vertical",initialFocusedIndex:a=0})=>{const[s,c]=o(a),u=n((n=>{const o=e.current;if(!o)return;const a=o.querySelectorAll(r);if(0===a.length)return;const u=a.length-1,i={[p[t].next]:()=>{c(s===u?0:s+1)},[p[t].prev]:()=>{c(0===s?u:s-1)}}[n.key];i&&(n.preventDefault(),i())}),[s,r,e,t]);return{focusedIndex:s,handleArrowsKeyDown:u}},y=e=>{const{ref:t,keys:o,event:a="keydown"}=e;let s=document;const c=n((e=>{Object.prototype.hasOwnProperty.call(o,e.key)&&o[e.key](e)}),[o]);r((()=>(t&&t.current&&(s=t.current),s.addEventListener(a,c),()=>{s.removeEventListener(a,c)})),[a,c])};export{d as Portal,m as TabFocusTrap,f as useArrowKeyNavigation,y as useKeyboard};
+import e,{useEffect as r,useRef as t,useCallback as n,useState as o}from"react";import{createPortal as a}from"react-dom";import s from"@babel/runtime/helpers/esm/extends";import{cx as c,css as u}from"emotion";function i(e,r,t,n){Object.defineProperty(e,r,{get:t,set:n,enumerable:!0,configurable:!0})}var l={};function d({children:e,container:n}){const o=t(n),s=t(document.createElement("div"));return r((()=>{o.current||(o.current=document.body);const e=s.current;return e.setAttribute("data-cf-ui-portal",""),o.current.appendChild(e),()=>{o.current&&o.current.removeChild(e)}}),[]),s.current?a(e,s.current):null}function m({className:r,children:t,...n}){return e.createElement("span",s({tabIndex:-1,className:c(u({name:"t8ljbi",styles:"display:inherit;outline:0;"}),r)},n),t)}i(l,"Portal",(()=>d)),i(l,"TabFocusTrap",(()=>m)),i(l,"useArrowKeyNavigation",(()=>f)),i(l,"useKeyboard",(()=>y));const p={vertical:{prev:"ArrowUp",next:"ArrowDown"},horizontal:{prev:"ArrowLeft",next:"ArrowRight"}},f=({itemsContainerRef:e,itemsSelector:r,keyType:t="vertical"})=>{const[a,s]=o(0),c=n((n=>{const o=e.current;if(!o)return;const c=o.querySelectorAll(r);if(0===c.length)return;const u=c.length-1,i={[p[t].next]:()=>{s(a===u?0:a+1)},[p[t].prev]:()=>{s(0===a?u:a-1)}}[n.key];i&&(n.preventDefault(),i())}),[a,r,e,t]);return{focusedIndex:a,handleArrowsKeyDown:c,setFocusedIndex:s}},y=e=>{const{ref:t,keys:o,event:a="keydown"}=e;let s=document;const c=n((e=>{Object.prototype.hasOwnProperty.call(o,e.key)&&o[e.key](e)}),[o]);r((()=>(t&&t.current&&(s=t.current),s.addEventListener(a,c),()=>{s.removeEventListener(a,c)})),[a,c])};export{d as Portal,m as TabFocusTrap,f as useArrowKeyNavigation,y as useKeyboard};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -18,5 +18,6 @@ import React, { MutableRefObject } from "react";
 }
-export const useArrowKeyNavigation: ({ itemsContainerRef, itemsSelector, keyType, initialFocusedIndex, }: UseArrowKeyNavigationProps) => {
+export const useArrowKeyNavigation: ({ itemsContainerRef, itemsSelector, keyType, }: UseArrowKeyNavigationProps) => {
     focusedIndex: number;
     handleArrowsKeyDown: (event: React.KeyboardEvent) => void;
+    setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
 };
@@ -23,0 +24,0 @@ export interface UseKeyboardProps {

package.json

 {
   "name": "@contentful/f36-utils",
-  "version": "4.0.1-next-v4-9287.2420+30ea0235",
+  "version": "4.0.1-next-v4-9320.2421+96dfad4f",
   "description": "Forma 36: utils React Component",
@@ -34,3 +34,3 @@ "license": "MIT",
   },
-  "gitHead": "30ea0235e3f48cf75cf3577df0ba09e91db487a5"
+  "gitHead": "96dfad4f76e42d3e8711f0b706b6060996a46fa1"
 }

src/ArrowKeyNavigation/useArrowKeyNavigation.ts

@@ -25,5 +25,4 @@ import { useState, useCallback } from 'react';
   keyType = 'vertical',
-  initialFocusedIndex = 0,
 }: UseArrowKeyNavigationProps) => {
-  const [focusedIndex, setFocusedIndex] = useState<number>(initialFocusedIndex);
+  const [focusedIndex, setFocusedIndex] = useState<number>(0);
 
@@ -71,3 +70,3 @@ const handleArrowsKeyDown = useCallback(
 
-  return { focusedIndex, handleArrowsKeyDown };
+  return { focusedIndex, handleArrowsKeyDown, setFocusedIndex };
 };

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

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

Worsened metrics

Total package byte prevSize

38794

decreased by-0.3%

No dependency changes