@radix-ui/react-roving-focus - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6-rc.1

dist/index.d.ts

@@ -15,3 +15,2 @@ import * as React from "react";
      * The direction of navigation between items.
-     * @defaultValue ltr
      */
@@ -18,0 +17,0 @@ dir?: Direction;

dist/index.js

@@ -1,2 +0,2 @@
-var e,r,o,t=require("@radix-ui/react-use-controllable-state").useControllableState,n=require("@radix-ui/react-use-callback-ref").useCallbackRef,u=require("@radix-ui/react-primitive").Primitive,c=require("@radix-ui/react-id").useId,i=require("@radix-ui/react-context").createContextScope,a=require("@radix-ui/react-compose-refs").useComposedRefs,s=require("@radix-ui/react-collection").createCollection,l=require("@radix-ui/primitive").composeEventHandlers,f=(e={},r=require("react"),Object.keys(r).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return r[o]}})})),e),p=(o=require("@babel/runtime/helpers/extends"))&&o.__esModule?o.default:o;const d={bubbles:!1,cancelable:!0},[v,m,g]=s("RovingFocusGroup"),[b,w]=i("RovingFocusGroup",[g]);exports.createRovingFocusGroupScope=w;const[F,R]=b("RovingFocusGroup"),x=/*#__PURE__*/f.forwardRef(((e,r)=>/*#__PURE__*/f.createElement(v.Provider,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/f.createElement(v.Slot,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/f.createElement(E,p({},e,{ref:r}))))));exports.RovingFocusGroup=x;const E=/*#__PURE__*/f.forwardRef(((e,r)=>{const{__scopeRovingFocusGroup:o,orientation:c,dir:i="ltr",loop:s=!1,currentTabStopId:v,defaultCurrentTabStopId:g,onCurrentTabStopIdChange:b,onEntryFocus:w,...R}=e,x=f.useRef(null),E=a(r,x),[I=null,h]=t({prop:v,defaultProp:g,onChange:b}),[y,S]=f.useState(!1),T=n(w),A=m(o),_=f.useRef(!1);return f.useEffect((()=>{const e=x.current;if(e)return e.addEventListener("rovingFocusGroup.onEntryFocus",T),()=>e.removeEventListener("rovingFocusGroup.onEntryFocus",T)}),[T]),/*#__PURE__*/f.createElement(F,{scope:o,orientation:c,dir:i,loop:s,currentTabStopId:I,onItemFocus:f.useCallback((e=>h(e)),[h]),onItemShiftTab:f.useCallback((()=>S(!0)),[])},/*#__PURE__*/f.createElement(u.div,p({tabIndex:y?-1:0,"data-orientation":c},R,{ref:E,style:{outline:"none",...e.style},onMouseDown:l(e.onMouseDown,(()=>{_.current=!0})),onFocus:l(e.onFocus,(e=>{const r=!_.current;if(e.target===e.currentTarget&&r&&!y){const r=new Event("rovingFocusGroup.onEntryFocus",d);if(e.currentTarget.dispatchEvent(r),!r.defaultPrevented){const e=A().filter((e=>e.focusable));G([e.find((e=>e.active)),e.find((e=>e.id===I)),...e].filter(Boolean).map((e=>e.ref.current)))}}_.current=!1})),onBlur:l(e.onBlur,(()=>S(!1)))})))})),I=/*#__PURE__*/f.forwardRef(((e,r)=>{const{__scopeRovingFocusGroup:o,focusable:t=!0,active:n=!1,...i}=e,a=c(),s=R("RovingFocusGroupItem",o),d=s.currentTabStopId===a,g=m(o);/*#__PURE__*/return f.createElement(v.ItemSlot,{scope:o,id:a,focusable:t,active:n},/*#__PURE__*/f.createElement(u.span,p({tabIndex:d?0:-1,"data-orientation":s.orientation},i,{ref:r,onMouseDown:l(e.onMouseDown,(e=>{t?s.onItemFocus(a):e.preventDefault()})),onFocus:l(e.onFocus,(()=>s.onItemFocus(a))),onKeyDown:l(e.onKeyDown,(e=>{if("Tab"===e.key&&e.shiftKey)return void s.onItemShiftTab();if(e.target!==e.currentTarget)return;const r=function(e,r,o){const t=function(e,r){return"rtl"!==r?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,o);return"vertical"===r&&["ArrowLeft","ArrowRight"].includes(t)||"horizontal"===r&&["ArrowUp","ArrowDown"].includes(t)?void 0:h[t]}(e,s.orientation,s.dir);if(void 0!==r){e.preventDefault();let n=g().filter((e=>e.focusable)).map((e=>e.ref.current));if("last"===r)n.reverse();else if("prev"===r||"next"===r){"prev"===r&&n.reverse();const u=n.indexOf(e.currentTarget);n=s.loop?(t=u+1,(o=n).map(((e,r)=>o[(t+r)%o.length]))):n.slice(u+1)}setTimeout((()=>G(n)))}var o,t}))})))}));exports.RovingFocusGroupItem=I;const h={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function G(e){const r=document.activeElement;for(const o of e){if(o===r)return;if(o.focus(),document.activeElement!==r)return}}const y=x;exports.Root=y;const S=I;exports.Item=S;
+var e,r,o,t=require("@radix-ui/react-direction").useDirection,n=require("@radix-ui/react-use-controllable-state").useControllableState,u=require("@radix-ui/react-use-callback-ref").useCallbackRef,i=require("@radix-ui/react-primitive").Primitive,c=require("@radix-ui/react-id").useId,a=require("@radix-ui/react-context").createContextScope,s=require("@radix-ui/react-compose-refs").useComposedRefs,l=require("@radix-ui/react-collection").createCollection,f=require("@radix-ui/primitive").composeEventHandlers,p=(e={},r=require("react"),Object.keys(r).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return r[o]}})})),e),d=(o=require("@babel/runtime/helpers/extends"))&&o.__esModule?o.default:o;const v={bubbles:!1,cancelable:!0},[m,g,b]=l("RovingFocusGroup"),[w,F]=a("RovingFocusGroup",[b]);exports.createRovingFocusGroupScope=F;const[x,R]=w("RovingFocusGroup"),E=/*#__PURE__*/p.forwardRef(((e,r)=>/*#__PURE__*/p.createElement(m.Provider,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/p.createElement(m.Slot,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/p.createElement(I,d({},e,{ref:r}))))));exports.RovingFocusGroup=E;const I=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeRovingFocusGroup:o,orientation:c,loop:a=!1,dir:l,currentTabStopId:m,defaultCurrentTabStopId:b,onCurrentTabStopIdChange:w,onEntryFocus:F,...R}=e,E=p.useRef(null),I=s(r,E),h=t(l),[G=null,S]=n({prop:m,defaultProp:b,onChange:w}),[T,A]=p.useState(!1),D=u(F),_=g(o),q=p.useRef(!1);return p.useEffect((()=>{const e=E.current;if(e)return e.addEventListener("rovingFocusGroup.onEntryFocus",D),()=>e.removeEventListener("rovingFocusGroup.onEntryFocus",D)}),[D]),/*#__PURE__*/p.createElement(x,{scope:o,orientation:c,dir:h,loop:a,currentTabStopId:G,onItemFocus:p.useCallback((e=>S(e)),[S]),onItemShiftTab:p.useCallback((()=>A(!0)),[])},/*#__PURE__*/p.createElement(i.div,d({tabIndex:T?-1:0,"data-orientation":c},R,{ref:I,style:{outline:"none",...e.style},onMouseDown:f(e.onMouseDown,(()=>{q.current=!0})),onFocus:f(e.onFocus,(e=>{const r=!q.current;if(e.target===e.currentTarget&&r&&!T){const r=new Event("rovingFocusGroup.onEntryFocus",v);if(e.currentTarget.dispatchEvent(r),!r.defaultPrevented){const e=_().filter((e=>e.focusable));y([e.find((e=>e.active)),e.find((e=>e.id===G)),...e].filter(Boolean).map((e=>e.ref.current)))}}q.current=!1})),onBlur:f(e.onBlur,(()=>A(!1)))})))})),h=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeRovingFocusGroup:o,focusable:t=!0,active:n=!1,...u}=e,a=c(),s=R("RovingFocusGroupItem",o),l=s.currentTabStopId===a,v=g(o);/*#__PURE__*/return p.createElement(m.ItemSlot,{scope:o,id:a,focusable:t,active:n},/*#__PURE__*/p.createElement(i.span,d({tabIndex:l?0:-1,"data-orientation":s.orientation},u,{ref:r,onMouseDown:f(e.onMouseDown,(e=>{t?s.onItemFocus(a):e.preventDefault()})),onFocus:f(e.onFocus,(()=>s.onItemFocus(a))),onKeyDown:f(e.onKeyDown,(e=>{if("Tab"===e.key&&e.shiftKey)return void s.onItemShiftTab();if(e.target!==e.currentTarget)return;const r=function(e,r,o){const t=function(e,r){return"rtl"!==r?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,o);return"vertical"===r&&["ArrowLeft","ArrowRight"].includes(t)||"horizontal"===r&&["ArrowUp","ArrowDown"].includes(t)?void 0:G[t]}(e,s.orientation,s.dir);if(void 0!==r){e.preventDefault();let n=v().filter((e=>e.focusable)).map((e=>e.ref.current));if("last"===r)n.reverse();else if("prev"===r||"next"===r){"prev"===r&&n.reverse();const u=n.indexOf(e.currentTarget);n=s.loop?(t=u+1,(o=n).map(((e,r)=>o[(t+r)%o.length]))):n.slice(u+1)}setTimeout((()=>y(n)))}var o,t}))})))}));exports.RovingFocusGroupItem=h;const G={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function y(e){const r=document.activeElement;for(const o of e){if(o===r)return;if(o.focus(),document.activeElement!==r)return}}const S=E;exports.Root=S;const T=h;exports.Item=T;
 //# sourceMappingURL=index.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import{useControllableState as e}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as o}from"@radix-ui/react-use-callback-ref";import{Primitive as r}from"@radix-ui/react-primitive";import{useId as t}from"@radix-ui/react-id";import{createContextScope as n}from"@radix-ui/react-context";import{useComposedRefs as i}from"@radix-ui/react-compose-refs";import{createCollection as c}from"@radix-ui/react-collection";import{composeEventHandlers as u}from"@radix-ui/primitive";import*as s from"react";import a from"@babel/runtime/helpers/esm/extends";const f={bubbles:!1,cancelable:!0},[p,l,m]=c("RovingFocusGroup"),[d,v]=n("RovingFocusGroup",[m]);export{v as createRovingFocusGroupScope};const[g,F]=d("RovingFocusGroup");export const RovingFocusGroup=/*#__PURE__*/s.forwardRef(((e,o)=>/*#__PURE__*/s.createElement(p.Provider,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/s.createElement(p.Slot,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/s.createElement(w,a({},e,{ref:o}))))));/*#__PURE__*/const w=/*#__PURE__*/s.forwardRef(((t,n)=>{const{__scopeRovingFocusGroup:c,orientation:p,dir:m="ltr",loop:d=!1,currentTabStopId:v,defaultCurrentTabStopId:F,onCurrentTabStopIdChange:w,onEntryFocus:b,...x}=t,E=s.useRef(null),I=i(n,E),[G=null,h]=e({prop:v,defaultProp:F,onChange:w}),[T,A]=s.useState(!1),y=o(b),D=l(c),S=s.useRef(!1);return s.useEffect((()=>{const e=E.current;if(e)return e.addEventListener("rovingFocusGroup.onEntryFocus",y),()=>e.removeEventListener("rovingFocusGroup.onEntryFocus",y)}),[y]),/*#__PURE__*/s.createElement(g,{scope:c,orientation:p,dir:m,loop:d,currentTabStopId:G,onItemFocus:s.useCallback((e=>h(e)),[h]),onItemShiftTab:s.useCallback((()=>A(!0)),[])},/*#__PURE__*/s.createElement(r.div,a({tabIndex:T?-1:0,"data-orientation":p},x,{ref:I,style:{outline:"none",...t.style},onMouseDown:u(t.onMouseDown,(()=>{S.current=!0})),onFocus:u(t.onFocus,(e=>{const o=!S.current;if(e.target===e.currentTarget&&o&&!T){const o=new Event("rovingFocusGroup.onEntryFocus",f);if(e.currentTarget.dispatchEvent(o),!o.defaultPrevented){const e=D().filter((e=>e.focusable));R([e.find((e=>e.active)),e.find((e=>e.id===G)),...e].filter(Boolean).map((e=>e.ref.current)))}}S.current=!1})),onBlur:u(t.onBlur,(()=>A(!1)))})))}));export const RovingFocusGroupItem=/*#__PURE__*/s.forwardRef(((e,o)=>{const{__scopeRovingFocusGroup:n,focusable:i=!0,active:c=!1,...f}=e,m=t(),d=F("RovingFocusGroupItem",n),v=d.currentTabStopId===m,g=l(n);/*#__PURE__*/return s.createElement(p.ItemSlot,{scope:n,id:m,focusable:i,active:c},/*#__PURE__*/s.createElement(r.span,a({tabIndex:v?0:-1,"data-orientation":d.orientation},f,{ref:o,onMouseDown:u(e.onMouseDown,(e=>{i?d.onItemFocus(m):e.preventDefault()})),onFocus:u(e.onFocus,(()=>d.onItemFocus(m))),onKeyDown:u(e.onKeyDown,(e=>{if("Tab"===e.key&&e.shiftKey)return void d.onItemShiftTab();if(e.target!==e.currentTarget)return;const o=function(e,o,r){const t=function(e,o){return"rtl"!==o?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,r);return"vertical"===o&&["ArrowLeft","ArrowRight"].includes(t)||"horizontal"===o&&["ArrowUp","ArrowDown"].includes(t)?void 0:b[t]}(e,d.orientation,d.dir);if(void 0!==o){e.preventDefault();let n=g().filter((e=>e.focusable)).map((e=>e.ref.current));if("last"===o)n.reverse();else if("prev"===o||"next"===o){"prev"===o&&n.reverse();const i=n.indexOf(e.currentTarget);n=d.loop?(t=i+1,(r=n).map(((e,o)=>r[(t+o)%r.length]))):n.slice(i+1)}setTimeout((()=>R(n)))}var r,t}))})))}));/*#__PURE__*/const b={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function R(e){const o=document.activeElement;for(const r of e){if(r===o)return;if(r.focus(),document.activeElement!==o)return}}export const Root=RovingFocusGroup;export const Item=RovingFocusGroupItem;
+import{useDirection as e}from"@radix-ui/react-direction";import{useControllableState as o}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as r}from"@radix-ui/react-use-callback-ref";import{Primitive as t}from"@radix-ui/react-primitive";import{useId as n}from"@radix-ui/react-id";import{createContextScope as i}from"@radix-ui/react-context";import{useComposedRefs as c}from"@radix-ui/react-compose-refs";import{createCollection as u}from"@radix-ui/react-collection";import{composeEventHandlers as a}from"@radix-ui/primitive";import*as s from"react";import f from"@babel/runtime/helpers/esm/extends";const p={bubbles:!1,cancelable:!0},[l,m,d]=u("RovingFocusGroup"),[v,g]=i("RovingFocusGroup",[d]);export{g as createRovingFocusGroupScope};const[F,w]=v("RovingFocusGroup");export const RovingFocusGroup=/*#__PURE__*/s.forwardRef(((e,o)=>/*#__PURE__*/s.createElement(l.Provider,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/s.createElement(l.Slot,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/s.createElement(b,f({},e,{ref:o}))))));/*#__PURE__*/const b=/*#__PURE__*/s.forwardRef(((n,i)=>{const{__scopeRovingFocusGroup:u,orientation:l,loop:d=!1,dir:v,currentTabStopId:g,defaultCurrentTabStopId:w,onCurrentTabStopIdChange:b,onEntryFocus:x,...E}=n,I=s.useRef(null),G=c(i,I),h=e(v),[T=null,A]=o({prop:g,defaultProp:w,onChange:b}),[y,D]=s.useState(!1),S=r(x),_=m(u),C=s.useRef(!1);return s.useEffect((()=>{const e=I.current;if(e)return e.addEventListener("rovingFocusGroup.onEntryFocus",S),()=>e.removeEventListener("rovingFocusGroup.onEntryFocus",S)}),[S]),/*#__PURE__*/s.createElement(F,{scope:u,orientation:l,dir:h,loop:d,currentTabStopId:T,onItemFocus:s.useCallback((e=>A(e)),[A]),onItemShiftTab:s.useCallback((()=>D(!0)),[])},/*#__PURE__*/s.createElement(t.div,f({tabIndex:y?-1:0,"data-orientation":l},E,{ref:G,style:{outline:"none",...n.style},onMouseDown:a(n.onMouseDown,(()=>{C.current=!0})),onFocus:a(n.onFocus,(e=>{const o=!C.current;if(e.target===e.currentTarget&&o&&!y){const o=new Event("rovingFocusGroup.onEntryFocus",p);if(e.currentTarget.dispatchEvent(o),!o.defaultPrevented){const e=_().filter((e=>e.focusable));R([e.find((e=>e.active)),e.find((e=>e.id===T)),...e].filter(Boolean).map((e=>e.ref.current)))}}C.current=!1})),onBlur:a(n.onBlur,(()=>D(!1)))})))}));export const RovingFocusGroupItem=/*#__PURE__*/s.forwardRef(((e,o)=>{const{__scopeRovingFocusGroup:r,focusable:i=!0,active:c=!1,...u}=e,p=n(),d=w("RovingFocusGroupItem",r),v=d.currentTabStopId===p,g=m(r);/*#__PURE__*/return s.createElement(l.ItemSlot,{scope:r,id:p,focusable:i,active:c},/*#__PURE__*/s.createElement(t.span,f({tabIndex:v?0:-1,"data-orientation":d.orientation},u,{ref:o,onMouseDown:a(e.onMouseDown,(e=>{i?d.onItemFocus(p):e.preventDefault()})),onFocus:a(e.onFocus,(()=>d.onItemFocus(p))),onKeyDown:a(e.onKeyDown,(e=>{if("Tab"===e.key&&e.shiftKey)return void d.onItemShiftTab();if(e.target!==e.currentTarget)return;const o=function(e,o,r){const t=function(e,o){return"rtl"!==o?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,r);return"vertical"===o&&["ArrowLeft","ArrowRight"].includes(t)||"horizontal"===o&&["ArrowUp","ArrowDown"].includes(t)?void 0:x[t]}(e,d.orientation,d.dir);if(void 0!==o){e.preventDefault();let n=g().filter((e=>e.focusable)).map((e=>e.ref.current));if("last"===o)n.reverse();else if("prev"===o||"next"===o){"prev"===o&&n.reverse();const i=n.indexOf(e.currentTarget);n=d.loop?(t=i+1,(r=n).map(((e,o)=>r[(t+o)%r.length]))):n.slice(i+1)}setTimeout((()=>R(n)))}var r,t}))})))}));/*#__PURE__*/const x={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function R(e){const o=document.activeElement;for(const r of e){if(r===o)return;if(r.focus(),document.activeElement!==o)return}}export const Root=RovingFocusGroup;export const Item=RovingFocusGroupItem;
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "@radix-ui/react-roving-focus",
-  "version": "0.1.5",
+  "version": "0.1.6-rc.1",
   "license": "MIT",
@@ -24,2 +24,3 @@ "source": "src/index.ts",
     "@radix-ui/react-context": "0.1.1",
+    "@radix-ui/react-direction": "0.1.0-rc.1",
     "@radix-ui/react-id": "0.1.5",
@@ -40,3 +41,4 @@ "@radix-ui/react-primitive": "0.1.4",
     "url": "https://github.com/radix-ui/primitives/issues"
-  }
+  },
+  "stableVersion": "0.1.5"
 }

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

Improved metrics

Total package byte prevSize

49572

increased by0.81%

Worsened metrics

Dependency count

11

increased by10%

Lines of code

74

decreased by-1.33%

Dependency changes

• + Added@radix-ui/react-direction@0.1.0-rc.1

• + Added@radix-ui/react-direction@0.1.0-rc.1(transitive)