🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@radix-ui/react-roving-focus

Package Overview
Dependencies
Maintainers
6
Versions
254
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

to
0.0.12

61

dist/index.d.ts

@@ -1,22 +0,45 @@

export function RovingFocusGroup(props: RovingFocusGroupProps): JSX.Element;
type UseRovingFocusItemOptions = {
disabled?: boolean;
import * as React from "react";
import { Primitive } from "@radix-ui/react-primitive";
import * as Polymorphic from "@radix-ui/react-polymorphic";
declare const GROUP_DEFAULT_TAG = "span";
type Orientation = React.AriaAttributes['aria-orientation'];
type Direction = 'ltr' | 'rtl';
type RovingFocusGroupOptions = {
/**
* The orientation of the group.
* Mainly so arrow navigation is done accordingly (left & right vs. up & down)
*/
orientation?: Orientation;
/**
* The direction of navigation between items.
* @defaultValue ltr
*/
dir?: Direction;
/**
* Whether keyboard navigation should loop around
* @defaultValue false
*/
loop?: boolean;
};
type RovingFocusGroupOwnProps = Polymorphic.OwnProps<typeof RovingFocusGroupImpl>;
type RovingFocusGroupPrimitive = Polymorphic.ForwardRefComponent<Polymorphic.IntrinsicElement<typeof RovingFocusGroupImpl>, RovingFocusGroupOwnProps>;
export const RovingFocusGroup: RovingFocusGroupPrimitive;
type RovingFocusGroupImplOwnProps = Polymorphic.Merge<Polymorphic.OwnProps<typeof Primitive>, RovingFocusGroupOptions & {
currentTabStopId?: string | null;
defaultCurrentTabStopId?: string;
onCurrentTabStopIdChange?: (tabStopId: string | null) => void;
onEntryFocus?: (event: Event) => void;
}>;
type RovingFocusGroupImplPrimitive = Polymorphic.ForwardRefComponent<typeof GROUP_DEFAULT_TAG, RovingFocusGroupImplOwnProps>;
declare const RovingFocusGroupImpl: RovingFocusGroupImplPrimitive;
declare const ITEM_DEFAULT_TAG = "span";
type RovingFocusItemOwnProps = Polymorphic.Merge<Polymorphic.OwnProps<typeof Primitive>, {
focusable?: boolean;
active?: boolean;
};
export function useRovingFocus({ disabled, active }: UseRovingFocusItemOptions): {
tabIndex: number;
onMouseDown: (event: React.MouseEvent) => void;
"data-radix-roving-focus-group-id"?: undefined;
onFocus?: undefined;
onKeyDown?: undefined;
} | {
"data-radix-roving-focus-group-id": string;
tabIndex: number;
onFocus: () => void;
onKeyDown: (event: React.KeyboardEvent) => void;
onMouseDown?: undefined;
};
export const Root: typeof RovingFocusGroup;
export { RovingFocusGroup };
}>;
type RovingFocusItemPrimitive = Polymorphic.ForwardRefComponent<typeof ITEM_DEFAULT_TAG, RovingFocusItemOwnProps>;
export const RovingFocusItem: RovingFocusItemPrimitive;
export const Root: RovingFocusGroupPrimitive;
export const Item: RovingFocusItemPrimitive;
//# sourceMappingURL=index.d.ts.map

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

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

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

import{useId as o}from"@radix-ui/react-id";import{useControllableState as e}from"@radix-ui/react-use-controllable-state";import{createContext as t}from"@radix-ui/react-context";import{wrap as r,clamp as n}from"@radix-ui/number";import*as a from"react";const[i,c]=t("RovingFocusGroup");export function RovingFocusGroup(t){const{children:r,orientation:n,loop:c,dir:u}=t,[l=!0,s]=e({prop:t.reachable,defaultProp:t.defaultReachable,onChange:t.onReachableChange}),[p,d]=a.useState(null),f=a.useCallback(((o,e)=>{d((t=>l?e||!t?o:t:null))}),[l]);/*#__PURE__*/return a.createElement(i,{groupId:o(),orientation:n,dir:u,loop:c,tabStopId:p,onTabStopIdChange:f,reachable:l,onReachableChange:s},r)}/*#__PURE__*/export function useRovingFocus({disabled:e,active:t}){const i=o(),p=c("RovingFocusItem"),d=i===p.tabStopId,{onTabStopIdChange:f}=p;return a.useEffect((()=>{f(i,t)}),[t,i,f]),e?{tabIndex:-1,onMouseDown:o=>o.preventDefault()}:{[s]:p.groupId,tabIndex:d?0:-1,onFocus:()=>{p.onReachableChange(!0),p.onTabStopIdChange(i)},onKeyDown:o=>{const e=function(o,e,t){const r=function(o,e){return"rtl"!==e?o:"ArrowLeft"===o?"ArrowRight":"ArrowRight"===o?"ArrowLeft":o}(o.key,t);return"vertical"===e&&["ArrowLeft","ArrowRight"].includes(r)||"horizontal"===e&&["ArrowUp","ArrowDown"].includes(r)?void 0:u[r]}(o,p.orientation,p.dir);if(l.includes(o.key)&&o.stopPropagation(),void 0!==e){o.preventDefault();const a=(t=p.groupId,Array.from(document.querySelectorAll(`[${s}="${t}"]`))),i=a.length,c=document.activeElement,u=c?a.indexOf(c):-1;let l={first:0,last:i-1,prev:u-1,next:u+1}[e];l=p.loop?r(l,i):n(l,[0,i-1]);const d=a[l];d&&setTimeout((()=>d.focus()))}var t}}}const u={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"},l=Object.keys(u);const s="data-radix-roving-focus-group-id";export const Root=RovingFocusGroup;
import{useControllableState as e}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as t}from"@radix-ui/react-use-callback-ref";import{Primitive as r}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]=a(),d="span",[v,g]=n("RovingFocusGroup");export const RovingFocusGroup=/*#__PURE__*/u.forwardRef(((e,t)=>/*#__PURE__*/u.createElement(l,null,/*#__PURE__*/u.createElement(b,s({},e,{ref:t})))));/*#__PURE__*/const b=/*#__PURE__*/u.forwardRef(((o,n)=>{const{as:a=d,orientation:l,dir:m="ltr",loop:g=!1,currentTabStopId:b,defaultCurrentTabStopId:w,onCurrentTabStopIdChange:x,onEntryFocus:E,...I}=o,R=u.useRef(null),h=i(n,R),[T=null,A]=e({prop:b,defaultProp:w,onChange:x}),[y,D]=u.useState(!1),S=t(E),{getItems:C}=p();return u.useEffect((()=>{const e=R.current;if(e)return e.addEventListener("rovingFocusGroup.onEntryFocus",S),()=>e.removeEventListener("rovingFocusGroup.onEntryFocus",S)}),[S]),/*#__PURE__*/u.createElement(v,{orientation:l,dir:m,loop:g,currentTabStopId:T,onItemFocus:u.useCallback((e=>A(e)),[A]),onItemShiftTab:u.useCallback((()=>D(!0)),[])},/*#__PURE__*/u.createElement(r,s({tabIndex:y?-1:0,"aria-orientation":l,"data-orientation":l},I,{as:a,ref:h,onFocus:c(o.onFocus,(e=>{if(e.target===e.currentTarget&&!y){const t=new Event("rovingFocusGroup.onEntryFocus",f);if(e.currentTarget.dispatchEvent(t),!t.defaultPrevented){const e=C().filter((e=>e.focusable));F([e.find((e=>e.active)),e.find((e=>e.id===T)),...e].filter(Boolean).map((e=>e.ref.current)))}}})),onBlur:c(o.onBlur,(()=>D(!1)))})))})),w="span";export const RovingFocusItem=/*#__PURE__*/u.forwardRef(((e,t)=>{const{as:n=w,focusable:i=!0,active:a=!1,...f}=e,l=o(),d=g("RovingFocusItem"),v=d.currentTabStopId===l,{getItems:b}=p();/*#__PURE__*/return u.createElement(m,{id:l,focusable:i,active:a},/*#__PURE__*/u.createElement(r,s({tabIndex:v?0:-1,"data-orientation":d.orientation},f,{as:n,ref:t,onMouseDown:c(e.onMouseDown,(e=>{i||e.preventDefault()})),onFocus:c(e.onFocus,(()=>d.onItemFocus(l))),onKeyDown:c(e.onKeyDown,(e=>{if("Tab"===e.key&&e.shiftKey)return void d.onItemShiftTab();if(e.target!==e.currentTarget)return;const t=function(e,t,r){const o=function(e,t){return"rtl"!==t?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,r);return"vertical"===t&&["ArrowLeft","ArrowRight"].includes(o)||"horizontal"===t&&["ArrowUp","ArrowDown"].includes(o)?void 0:x[o]}(e,d.orientation,d.dir);if(void 0!==t){e.preventDefault();let n=b().filter((e=>e.focusable)).map((e=>e.ref.current));if("last"===t)n.reverse();else if("prev"===t||"next"===t){"prev"===t&&n.reverse();const i=n.indexOf(e.currentTarget);n=d.loop?(o=i+1,(r=n).map(((e,t)=>r[(o+t)%r.length]))):n.slice(i+1)}setTimeout((()=>F(n)))}var r,o}))})))}));/*#__PURE__*/const x={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function F(e){const t=document.activeElement;for(const r of e){if(r===t)return;if(r.focus(),document.activeElement!==t)return}}export const Root=RovingFocusGroup;export const Item=RovingFocusItem;
//# sourceMappingURL=index.module.js.map
{
"name": "@radix-ui/react-roving-focus",
"version": "0.0.11",
"version": "0.0.12",
"license": "MIT",

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

"@babel/runtime": "^7.13.10",
"@radix-ui/number": "0.0.5",
"@radix-ui/primitive": "0.0.5",
"@radix-ui/react-collection": "0.0.12",
"@radix-ui/react-compose-refs": "0.0.5",
"@radix-ui/react-context": "0.0.5",
"@radix-ui/react-id": "0.0.5",
"@radix-ui/react-id": "0.0.6",
"@radix-ui/react-polymorphic": "0.0.11",
"@radix-ui/react-primitive": "0.0.12",
"@radix-ui/react-use-callback-ref": "0.0.5",
"@radix-ui/react-use-controllable-state": "0.0.6"

@@ -26,0 +31,0 @@ },

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