Socket
Socket
Sign inDemoInstall

@radix-ui/react-roving-focus

Package Overview
Dependencies
Maintainers
8
Versions
192
Alerts
File Explorer

Advanced tools

License
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-rc.16 to 0.1.1-rc.17

3

dist/index.d.ts
import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
export const createRovingFocusGroupScope: import("@radix-ui/react-context").CreateScope;
type Orientation = React.AriaAttributes['aria-orientation'];

@@ -38,3 +39,3 @@ type Direction = 'ltr' | 'rtl';

}
export const RovingFocusItem: React.ForwardRefExoticComponent<RovingFocusItemProps & React.RefAttributes<HTMLSpanElement>>;
export const RovingFocusGroupItem: React.ForwardRefExoticComponent<RovingFocusItemProps & React.RefAttributes<HTMLSpanElement>>;
export const Root: React.ForwardRefExoticComponent<RovingFocusGroupProps & React.RefAttributes<HTMLDivElement>>;

@@ -41,0 +42,0 @@ export const Item: React.ForwardRefExoticComponent<RovingFocusItemProps & React.RefAttributes<HTMLSpanElement>>;

2

dist/index.js

@@ -1,2 +0,2 @@

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

2

dist/index.module.js

@@ -1,2 +0,2 @@

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

10

package.json
{
"name": "@radix-ui/react-roving-focus",
"version": "0.1.1-rc.16",
"version": "0.1.1-rc.17",
"license": "MIT",

@@ -21,7 +21,7 @@ "source": "src/index.ts",

"@radix-ui/primitive": "0.1.0",
"@radix-ui/react-collection": "0.1.1-rc.16",
"@radix-ui/react-collection": "0.1.1-rc.17",
"@radix-ui/react-compose-refs": "0.1.0",
"@radix-ui/react-context": "0.1.0",
"@radix-ui/react-id": "0.1.0",
"@radix-ui/react-primitive": "0.1.1-rc.16",
"@radix-ui/react-context": "0.1.1-rc.1",
"@radix-ui/react-id": "0.1.1-rc.1",
"@radix-ui/react-primitive": "0.1.1-rc.17",
"@radix-ui/react-use-callback-ref": "0.1.0",

@@ -28,0 +28,0 @@ "@radix-ui/react-use-controllable-state": "0.1.0"

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc