@radix-ui/react-roving-focus
Advanced tools
Comparing version 0.0.5 to 0.0.6
@@ -9,6 +9,7 @@ export function RovingFocusGroup(props: RovingFocusGroupProps): JSX.Element; | ||
onMouseDown: (event: React.MouseEvent) => void; | ||
"data-radix-roving-focus-group-id"?: undefined; | ||
onFocus?: undefined; | ||
onKeyDown?: undefined; | ||
} | { | ||
[x: string]: string | number | ((event: React.KeyboardEvent) => void); | ||
"data-radix-roving-focus-group-id": string; | ||
tabIndex: number; | ||
@@ -15,0 +16,0 @@ onFocus: () => void; |
@@ -1,2 +0,2 @@ | ||
var e,r,t=require("@radix-ui/react-utils"),n=t.createContext,o=t.useControlledState,a=t.useId,u=require("@radix-ui/utils"),i=u.getSelector,c=u.wrap,l=u.clamp,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);function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],n=!0,o=!1,a=void 0;try{for(var u,i=e[Symbol.iterator]();!(n=(u=i.next()).done)&&(t.push(u.value),!r||t.length!==r);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==i.return||i.return()}finally{if(o)throw a}}return t}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return p(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return p(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var v=d(n("RovingFocusGroupContext","RovingFocusGroup"),2),b=v[0],g=v[1];function y(e){var r=e.children,t=e.orientation,n=e.loop,u=e.dir,i=d(o({prop:e.reachable,defaultProp:e.defaultReachable,onChange:e.onReachableChange}),2),c=i[0],l=void 0===c||c,s=i[1],p=d(f.useState(null),2),v=p[0],g=p[1],y=String(a()),h=f.useMemo((function(){return{groupId:y,tabStopId:v,setTabStopId:g,reachable:l,setReachable:s,orientation:t,dir:u,loop:n}}),[y,v,g,l,s,t,u,n]);return f.createElement(b.Provider,{value:h},r)}exports.RovingFocusGroup=y,y.displayName="RovingFocusGroup";exports.useRovingFocus=function(e){var r,t=e.disabled,n=e.active,o=String(a()),u=g("RovingFocusItem"),i=o===u.tabStopId,d=u.reachable,p=u.setTabStopId;return f.useEffect((function(){p((function(e){return d?n||!e?o:e:null}))}),[n,o,d,p]),t?{tabIndex:-1,onMouseDown:function(e){return e.preventDefault()}}:(s(r={},w(u.groupId),""),s(r,"tabIndex",i?0:-1),s(r,"onFocus",(function(){u.setReachable(!0),u.setTabStopId(o)})),s(r,"onKeyDown",(function(e){var r,t=function(e,r,t){var n=function(e,r){return"rtl"!==r?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,t);return"vertical"===r&&["ArrowLeft","ArrowRight"].includes(n)||"horizontal"===r&&["ArrowUp","ArrowDown"].includes(n)?void 0:h[n]}(e,u.orientation,u.dir);if(m.includes(e.key)&&e.stopPropagation(),void 0!==t){e.preventDefault();var n=(r=u.groupId,Array.from(document.querySelectorAll("[".concat(w(r),"]")))),o=n.length,a=document.activeElement,i=a?n.indexOf(a):-1,f={first:0,last:o-1,prev:i-1,next:i+1}[t],s=n[f=u.loop?c(f,o):l(f,[0,o-1])];s&&setTimeout((function(){return s.focus()}))}})),r)};var h={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"},m=Object.keys(h);var w=function(e){return"data-".concat(i("RovingFocusGroup"),"-").concat(e,"-item")};var A=y;exports.Root=A; | ||
var e,r,t=require("@radix-ui/react-id").useId,n=require("@radix-ui/react-use-controllable-state").useControllableState,o=require("@radix-ui/react-context").createContext,a=require("@radix-ui/number"),i=a.wrap,u=a.clamp,c=(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);function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function f(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(t.push(i.value),!r||t.length!==r);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return t}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return d(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return d(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var s=f(o("RovingFocusGroup"),2),p=s[0],b=s[1];function v(e){var r=e.children,o=e.orientation,a=e.loop,i=e.dir,u=f(n({prop:e.reachable,defaultProp:e.defaultReachable,onChange:e.onReachableChange}),2),l=u[0],d=void 0===l||l,s=u[1],b=f(c.useState(null),2),v=b[0],g=b[1],h=c.useCallback((function(e,r){g((function(t){return d?r||!t?e:t:null}))}),[d]);return c.createElement(p,{groupId:t(),orientation:o,dir:i,loop:a,tabStopId:v,onTabStopIdChange:h,reachable:d,onReachableChange:s},r)}exports.RovingFocusGroup=v,v.displayName="RovingFocusGroup";exports.useRovingFocus=function(e){var r,n=e.disabled,o=e.active,a=t(),f=b("RovingFocusItem"),d=a===f.tabStopId,s=f.onTabStopIdChange;return c.useEffect((function(){s(a,o)}),[o,a,s]),n?{tabIndex:-1,onMouseDown:function(e){return e.preventDefault()}}:(l(r={},y,f.groupId),l(r,"tabIndex",d?0:-1),l(r,"onFocus",(function(){f.onReachableChange(!0),f.onTabStopIdChange(a)})),l(r,"onKeyDown",(function(e){var r,t=function(e,r,t){var n=function(e,r){return"rtl"!==r?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,t);return"vertical"===r&&["ArrowLeft","ArrowRight"].includes(n)||"horizontal"===r&&["ArrowUp","ArrowDown"].includes(n)?void 0:g[n]}(e,f.orientation,f.dir);if(h.includes(e.key)&&e.stopPropagation(),void 0!==t){e.preventDefault();var n=(r=f.groupId,Array.from(document.querySelectorAll("[".concat(y,'="').concat(r,'"]')))),o=n.length,a=document.activeElement,c=a?n.indexOf(a):-1,l={first:0,last:o-1,prev:c-1,next:c+1}[t],d=n[l=f.loop?i(l,o):u(l,[0,o-1])];d&&setTimeout((function(){return d.focus()}))}})),r)};var g={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"},h=Object.keys(g);var y="data-radix-roving-focus-group-id";var m=v;exports.Root=m; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
import{createContext as o,useControlledState as t,useId as e}from"@radix-ui/react-utils";import{getSelector as r,wrap as n,clamp as a}from"@radix-ui/utils";import*as i from"react";const[c,u]=o("RovingFocusGroupContext","RovingFocusGroup");export function RovingFocusGroup(o){const{children:r,orientation:n,loop:a,dir:u}=o,[s=!0,l]=t({prop:o.reachable,defaultProp:o.defaultReachable,onChange:o.onReachableChange}),[p,d]=i.useState(null),f=String(e()),g=i.useMemo((()=>({groupId:f,tabStopId:p,setTabStopId:d,reachable:s,setReachable:l,orientation:n,dir:u,loop:a})),[f,p,d,s,l,n,u,a]);return i.createElement(c.Provider,{value:g},r)}RovingFocusGroup.displayName="RovingFocusGroup";export function useRovingFocus({disabled:o,active:t}){const r=String(e()),c=u("RovingFocusItem"),d=r===c.tabStopId,{reachable:f,setTabStopId:g}=c;return i.useEffect((()=>{g((o=>f?t||!o?r:o:null))}),[t,r,f,g]),o?{tabIndex:-1,onMouseDown:o=>o.preventDefault()}:{[p(c.groupId)]:"",tabIndex:d?0:-1,onFocus:()=>{c.setReachable(!0),c.setTabStopId(r)},onKeyDown:o=>{const t=function(o,t,e){const r=function(o,t){return"rtl"!==t?o:"ArrowLeft"===o?"ArrowRight":"ArrowRight"===o?"ArrowLeft":o}(o.key,e);return"vertical"===t&&["ArrowLeft","ArrowRight"].includes(r)||"horizontal"===t&&["ArrowUp","ArrowDown"].includes(r)?void 0:s[r]}(o,c.orientation,c.dir);if(l.includes(o.key)&&o.stopPropagation(),void 0!==t){o.preventDefault();const r=(e=c.groupId,Array.from(document.querySelectorAll("[".concat(p(e),"]")))),i=r.length,u=document.activeElement,s=u?r.indexOf(u):-1;let l={first:0,last:i-1,prev:s-1,next:s+1}[t];l=c.loop?n(l,i):a(l,[0,i-1]);const d=r[l];d&&setTimeout((()=>d.focus()))}var e}}}const s={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"},l=Object.keys(s);const p=o=>"data-".concat(r("RovingFocusGroup"),"-").concat(o,"-item");export const Root=RovingFocusGroup; | ||
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,[s=!0,l]=e({prop:t.reachable,defaultProp:t.defaultReachable,onChange:t.onReachableChange}),[p,d]=a.useState(null),f=a.useCallback(((o,e)=>{d((t=>s?e||!t?o:t:null))}),[s]);return a.createElement(i,{groupId:o(),orientation:n,dir:u,loop:c,tabStopId:p,onTabStopIdChange:f,reachable:s,onReachableChange:l},r)}RovingFocusGroup.displayName="RovingFocusGroup";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()}:{[l]: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(s.includes(o.key)&&o.stopPropagation(),void 0!==e){o.preventDefault();const a=(t=p.groupId,Array.from(document.querySelectorAll("[".concat(l,'="').concat(t,'"]')))),i=a.length,c=document.activeElement,u=c?a.indexOf(c):-1;let s={first:0,last:i-1,prev:u-1,next:u+1}[e];s=p.loop?r(s,i):n(s,[0,i-1]);const d=a[s];d&&setTimeout((()=>d.focus()))}var t}}}const u={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"},s=Object.keys(u);const l="data-radix-roving-focus-group-id";export const Root=RovingFocusGroup; | ||
//# sourceMappingURL=index.module.js.map |
{ | ||
"name": "@radix-ui/react-roving-focus", | ||
"version": "0.0.5", | ||
"version": "0.0.6", | ||
"license": "MIT", | ||
@@ -19,4 +19,6 @@ "source": "src/index.ts", | ||
"dependencies": { | ||
"@radix-ui/react-utils": "0.0.5", | ||
"@radix-ui/utils": "0.0.3" | ||
"@radix-ui/number": "0.0.1", | ||
"@radix-ui/react-context": "0.0.1", | ||
"@radix-ui/react-id": "0.0.1", | ||
"@radix-ui/react-use-controllable-state": "0.0.1" | ||
}, | ||
@@ -23,0 +25,0 @@ "peerDependencies": { |
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
44
27889
5
+ Added@radix-ui/number@0.0.1
+ Added@radix-ui/react-id@0.0.1
+ Added@radix-ui/number@0.0.1(transitive)
+ Added@radix-ui/react-context@0.0.1(transitive)
+ Added@radix-ui/react-id@0.0.1(transitive)
+ Added@radix-ui/react-use-callback-ref@0.0.1(transitive)
+ Added@radix-ui/react-use-controllable-state@0.0.1(transitive)
- Removed@radix-ui/react-utils@0.0.5
- Removed@radix-ui/utils@0.0.3
- Removed@radix-ui/react-polymorphic@0.0.5(transitive)
- Removed@radix-ui/react-utils@0.0.5(transitive)
- Removed@radix-ui/utils@0.0.3(transitive)