Socket
Socket
Sign inDemoInstall

@radix-ui/react-roving-focus

Package Overview
Dependencies
Maintainers
8
Versions
192
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.1.1 to 0.1.2-rc.1

2

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,i=require("@radix-ui/react-id").useId,c=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]=c("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:i,dir:c="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:i,dir:c,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,"aria-orientation":i,"data-orientation":i},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,...c}=e,a=i(),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},c,{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-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;
//# sourceMappingURL=index.js.map

@@ -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 a from"react";import s 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__*/a.forwardRef(((e,o)=>/*#__PURE__*/a.createElement(p.Provider,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/a.createElement(p.Slot,{scope:e.__scopeRovingFocusGroup},/*#__PURE__*/a.createElement(w,s({},e,{ref:o}))))));/*#__PURE__*/const w=/*#__PURE__*/a.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=a.useRef(null),I=i(n,E),[G=null,h]=e({prop:v,defaultProp:F,onChange:w}),[T,A]=a.useState(!1),y=o(b),D=l(c),S=a.useRef(!1);return a.useEffect((()=>{const e=E.current;if(e)return e.addEventListener("rovingFocusGroup.onEntryFocus",y),()=>e.removeEventListener("rovingFocusGroup.onEntryFocus",y)}),[y]),/*#__PURE__*/a.createElement(g,{scope:c,orientation:p,dir:m,loop:d,currentTabStopId:G,onItemFocus:a.useCallback((e=>h(e)),[h]),onItemShiftTab:a.useCallback((()=>A(!0)),[])},/*#__PURE__*/a.createElement(r.div,s({tabIndex:T?-1:0,"aria-orientation":p,"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__*/a.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 a.createElement(p.ItemSlot,{scope:n,id:m,focusable:i,active:c},/*#__PURE__*/a.createElement(r.span,s({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{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;
//# sourceMappingURL=index.module.js.map
{
"name": "@radix-ui/react-roving-focus",
"version": "0.1.1",
"version": "0.1.2-rc.1",
"license": "MIT",

@@ -39,3 +39,4 @@ "source": "src/index.ts",

"url": "https://github.com/radix-ui/primitives/issues"
}
},
"stableVersion": "0.1.1"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc