Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@reach/dropdown

Package Overview
Dependencies
Maintainers
4
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/dropdown - npm Package Compare versions

Comparing version 0.15.3 to 0.16.0

116

dist/reach-dropdown.cjs.dev.js

@@ -15,2 +15,3 @@ 'use strict';

var makeId = require('@reach/utils/make-id');
var useStatefulRefValue = require('@reach/utils/use-stateful-ref-value');
var composeRefs = require('@reach/utils/compose-refs');

@@ -123,7 +124,12 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');

// we decide the control is only ready to make a selection if the pointer
// moves first, otherwise the user is just registering the initial button
// click rather than selecting an item. This is similar to a native select on
// most platforms, and our dropdown popover works similarly.
// moves a certain distance OR if the mouse button is pressed for a certain
// length of time, otherwise the user is just registering the initial button
// click rather than selecting an item.
// For context on some implementation details, see https://github.com/reach/reach-ui/issues/563
var readyToSelect = React.useRef(false); // Trying a new approach for splitting up contexts by stable/unstable
var readyToSelect = React.useRef(false);
var mouseDownStartPosRef = React.useRef({
x: 0,
y: 0
}); // Trying a new approach for splitting up contexts by stable/unstable
// references. We'll see how it goes!

@@ -135,2 +141,3 @@

dropdownRef: dropdownRef,
mouseDownStartPosRef: mouseDownStartPosRef,
popoverRef: popoverRef,

@@ -186,6 +193,7 @@ readyToSelect: readyToSelect,

var _useDropdownContext = useDropdownContext(),
triggerRef = _useDropdownContext.triggerRef,
triggerClickedRef = _useDropdownContext.triggerClickedRef,
dispatch = _useDropdownContext.dispatch,
dropdownId = _useDropdownContext.dropdownId,
mouseDownStartPosRef = _useDropdownContext.mouseDownStartPosRef,
triggerClickedRef = _useDropdownContext.triggerClickedRef,
triggerRef = _useDropdownContext.triggerRef,
_useDropdownContext$s = _useDropdownContext.state,

@@ -242,2 +250,7 @@ triggerId = _useDropdownContext$s.triggerId,

mouseDownStartPosRef.current = {
x: event.clientX,
y: event.clientY
};
if (!isExpanded) {

@@ -312,7 +325,8 @@ triggerClickedRef.current = true;

var _useDropdownContext2 = useDropdownContext(),
triggerRef = _useDropdownContext2.triggerRef,
dispatch = _useDropdownContext2.dispatch,
dropdownRef = _useDropdownContext2.dropdownRef,
dispatch = _useDropdownContext2.dispatch,
mouseDownStartPosRef = _useDropdownContext2.mouseDownStartPosRef,
readyToSelect = _useDropdownContext2.readyToSelect,
selectCallbacks = _useDropdownContext2.selectCallbacks,
triggerRef = _useDropdownContext2.triggerRef,
_useDropdownContext2$ = _useDropdownContext2.state,

@@ -335,12 +349,20 @@ selectionIndex = _useDropdownContext2$.selectionIndex,

}, [valueTextProp]);
var ref = composeRefs.useComposedRefs(forwardedRef, ownRef, setValueTextFromDOM);
var mouseEventStarted = React.useRef(false);
var index = descendants.useDescendant({
element: ownRef.current,
key: valueText,
disabled: disabled,
isLink: isLink
}, DropdownDescendantContext, indexProp);
var isSelected = index === selectionIndex && !disabled; // Update the callback ref array on every render
var _useStatefulRefValue = useStatefulRefValue.useStatefulRefValue(ownRef, null),
element = _useStatefulRefValue[0],
handleRefSet = _useStatefulRefValue[1];
var descendant = React.useMemo(function () {
return {
element: element,
key: valueText,
disabled: disabled,
isLink: isLink
};
}, [disabled, element, isLink, valueText]);
var index = descendants.useDescendant(descendant, DropdownDescendantContext, indexProp);
var isSelected = index === selectionIndex && !disabled;
var ref = composeRefs.useComposedRefs(forwardedRef, handleRefSet, setValueTextFromDOM); // Update the callback ref array on every render
selectCallbacks.current[index] = onSelect;

@@ -394,4 +416,6 @@

function handleMouseEnter(event) {
var doc = ownerDocument.getOwnerDocument(dropdownRef.current);
if (!isSelected && index != null && !disabled) {
if (dropdownRef != null && dropdownRef.current && dropdownRef.current !== document.activeElement && ownRef.current !== document.activeElement) {
if (dropdownRef != null && dropdownRef.current && dropdownRef.current !== doc.activeElement && ownRef.current !== doc.activeElement) {
dropdownRef.current.focus();

@@ -416,5 +440,13 @@ }

function handleMouseMove() {
readyToSelect.current = true;
function handleMouseMove(event) {
if (!readyToSelect.current) {
var threshold = 8;
var deltaX = Math.abs(event.clientX - mouseDownStartPosRef.current.x);
var deltaY = Math.abs(event.clientY - mouseDownStartPosRef.current.y);
if (deltaX > threshold || deltaY > threshold) {
readyToSelect.current = true;
}
}
if (!isSelected && index != null && !disabled) {

@@ -468,7 +500,18 @@ dispatch({

}
} // When the dropdown closes, reset readyToSelect for the next interaction.
}
React.useEffect(function () {
if (!isExpanded) {
if (isExpanded) {
// When the dropdown opens, wait for about half a second before enabling
// selection. This is designed to mirror dropdown menus on macOS, where
// opening a menu on top of a trigger would otherwise result in an
// immediate accidental selection once the click trigger is released.
var id = window.setTimeout(function () {
readyToSelect.current = true;
}, 400);
return function () {
window.clearTimeout(id);
};
} else {
// When the dropdown closes, reset readyToSelect for the next interaction.
readyToSelect.current = false;

@@ -608,3 +651,3 @@ }

index: items.findIndex(function (i) {
return i.key === prevSelected.key;
return i.key === (prevSelected == null ? void 0 : prevSelected.key);
}),

@@ -901,16 +944,25 @@ dropdownRef: dropdownRef

case SELECT_ITEM_AT_INDEX:
if (action.payload.index >= 0 && action.payload.index !== state.selectionIndex) {
var _action$payload$dropd;
{
var _action$payload$dropd = action.payload.dropdownRef,
dropdownRef = _action$payload$dropd === void 0 ? {
current: null
} : _action$payload$dropd;
if ((_action$payload$dropd = action.payload.dropdownRef) != null && _action$payload$dropd.current && action.payload.dropdownRef.current !== document.activeElement) {
action.payload.dropdownRef.current.focus();
if (action.payload.index >= 0 && action.payload.index !== state.selectionIndex) {
if (dropdownRef.current) {
var doc = ownerDocument.getOwnerDocument(dropdownRef.current);
if (dropdownRef.current !== (doc == null ? void 0 : doc.activeElement)) {
dropdownRef.current.focus();
}
}
return _extends({}, state, {
selectionIndex: action.payload.max != null ? Math.min(Math.max(action.payload.index, 0), action.payload.max) : Math.max(action.payload.index, 0)
});
}
return _extends({}, state, {
selectionIndex: action.payload.max != null ? Math.min(Math.max(action.payload.index, 0), action.payload.max) : Math.max(action.payload.index, 0)
});
return state;
}
return state;
case CLEAR_SELECTION_INDEX:

@@ -917,0 +969,0 @@ return _extends({}, state, {

@@ -15,2 +15,3 @@ 'use strict';

var makeId = require('@reach/utils/make-id');
var useStatefulRefValue = require('@reach/utils/use-stateful-ref-value');
var composeRefs = require('@reach/utils/compose-refs');

@@ -123,7 +124,12 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');

// we decide the control is only ready to make a selection if the pointer
// moves first, otherwise the user is just registering the initial button
// click rather than selecting an item. This is similar to a native select on
// most platforms, and our dropdown popover works similarly.
// moves a certain distance OR if the mouse button is pressed for a certain
// length of time, otherwise the user is just registering the initial button
// click rather than selecting an item.
// For context on some implementation details, see https://github.com/reach/reach-ui/issues/563
var readyToSelect = React.useRef(false); // Trying a new approach for splitting up contexts by stable/unstable
var readyToSelect = React.useRef(false);
var mouseDownStartPosRef = React.useRef({
x: 0,
y: 0
}); // Trying a new approach for splitting up contexts by stable/unstable
// references. We'll see how it goes!

@@ -135,2 +141,3 @@

dropdownRef: dropdownRef,
mouseDownStartPosRef: mouseDownStartPosRef,
popoverRef: popoverRef,

@@ -182,6 +189,7 @@ readyToSelect: readyToSelect,

var _useDropdownContext = useDropdownContext(),
triggerRef = _useDropdownContext.triggerRef,
triggerClickedRef = _useDropdownContext.triggerClickedRef,
dispatch = _useDropdownContext.dispatch,
dropdownId = _useDropdownContext.dropdownId,
mouseDownStartPosRef = _useDropdownContext.mouseDownStartPosRef,
triggerClickedRef = _useDropdownContext.triggerClickedRef,
triggerRef = _useDropdownContext.triggerRef,
_useDropdownContext$s = _useDropdownContext.state,

@@ -238,2 +246,7 @@ triggerId = _useDropdownContext$s.triggerId,

mouseDownStartPosRef.current = {
x: event.clientX,
y: event.clientY
};
if (!isExpanded) {

@@ -304,7 +317,8 @@ triggerClickedRef.current = true;

var _useDropdownContext2 = useDropdownContext(),
triggerRef = _useDropdownContext2.triggerRef,
dispatch = _useDropdownContext2.dispatch,
dropdownRef = _useDropdownContext2.dropdownRef,
dispatch = _useDropdownContext2.dispatch,
mouseDownStartPosRef = _useDropdownContext2.mouseDownStartPosRef,
readyToSelect = _useDropdownContext2.readyToSelect,
selectCallbacks = _useDropdownContext2.selectCallbacks,
triggerRef = _useDropdownContext2.triggerRef,
_useDropdownContext2$ = _useDropdownContext2.state,

@@ -327,12 +341,20 @@ selectionIndex = _useDropdownContext2$.selectionIndex,

}, [valueTextProp]);
var ref = composeRefs.useComposedRefs(forwardedRef, ownRef, setValueTextFromDOM);
var mouseEventStarted = React.useRef(false);
var index = descendants.useDescendant({
element: ownRef.current,
key: valueText,
disabled: disabled,
isLink: isLink
}, DropdownDescendantContext, indexProp);
var isSelected = index === selectionIndex && !disabled; // Update the callback ref array on every render
var _useStatefulRefValue = useStatefulRefValue.useStatefulRefValue(ownRef, null),
element = _useStatefulRefValue[0],
handleRefSet = _useStatefulRefValue[1];
var descendant = React.useMemo(function () {
return {
element: element,
key: valueText,
disabled: disabled,
isLink: isLink
};
}, [disabled, element, isLink, valueText]);
var index = descendants.useDescendant(descendant, DropdownDescendantContext, indexProp);
var isSelected = index === selectionIndex && !disabled;
var ref = composeRefs.useComposedRefs(forwardedRef, handleRefSet, setValueTextFromDOM); // Update the callback ref array on every render
selectCallbacks.current[index] = onSelect;

@@ -386,4 +408,6 @@

function handleMouseEnter(event) {
var doc = ownerDocument.getOwnerDocument(dropdownRef.current);
if (!isSelected && index != null && !disabled) {
if (dropdownRef != null && dropdownRef.current && dropdownRef.current !== document.activeElement && ownRef.current !== document.activeElement) {
if (dropdownRef != null && dropdownRef.current && dropdownRef.current !== doc.activeElement && ownRef.current !== doc.activeElement) {
dropdownRef.current.focus();

@@ -408,5 +432,13 @@ }

function handleMouseMove() {
readyToSelect.current = true;
function handleMouseMove(event) {
if (!readyToSelect.current) {
var threshold = 8;
var deltaX = Math.abs(event.clientX - mouseDownStartPosRef.current.x);
var deltaY = Math.abs(event.clientY - mouseDownStartPosRef.current.y);
if (deltaX > threshold || deltaY > threshold) {
readyToSelect.current = true;
}
}
if (!isSelected && index != null && !disabled) {

@@ -460,7 +492,18 @@ dispatch({

}
} // When the dropdown closes, reset readyToSelect for the next interaction.
}
React.useEffect(function () {
if (!isExpanded) {
if (isExpanded) {
// When the dropdown opens, wait for about half a second before enabling
// selection. This is designed to mirror dropdown menus on macOS, where
// opening a menu on top of a trigger would otherwise result in an
// immediate accidental selection once the click trigger is released.
var id = window.setTimeout(function () {
readyToSelect.current = true;
}, 400);
return function () {
window.clearTimeout(id);
};
} else {
// When the dropdown closes, reset readyToSelect for the next interaction.
readyToSelect.current = false;

@@ -596,3 +639,3 @@ }

index: items.findIndex(function (i) {
return i.key === prevSelected.key;
return i.key === (prevSelected == null ? void 0 : prevSelected.key);
}),

@@ -881,16 +924,25 @@ dropdownRef: dropdownRef

case SELECT_ITEM_AT_INDEX:
if (action.payload.index >= 0 && action.payload.index !== state.selectionIndex) {
var _action$payload$dropd;
{
var _action$payload$dropd = action.payload.dropdownRef,
dropdownRef = _action$payload$dropd === void 0 ? {
current: null
} : _action$payload$dropd;
if ((_action$payload$dropd = action.payload.dropdownRef) != null && _action$payload$dropd.current && action.payload.dropdownRef.current !== document.activeElement) {
action.payload.dropdownRef.current.focus();
if (action.payload.index >= 0 && action.payload.index !== state.selectionIndex) {
if (dropdownRef.current) {
var doc = ownerDocument.getOwnerDocument(dropdownRef.current);
if (dropdownRef.current !== (doc == null ? void 0 : doc.activeElement)) {
dropdownRef.current.focus();
}
}
return _extends({}, state, {
selectionIndex: action.payload.max != null ? Math.min(Math.max(action.payload.index, 0), action.payload.max) : Math.max(action.payload.index, 0)
});
}
return _extends({}, state, {
selectionIndex: action.payload.max != null ? Math.min(Math.max(action.payload.index, 0), action.payload.max) : Math.max(action.payload.index, 0)
});
return state;
}
return state;
case CLEAR_SELECTION_INDEX:

@@ -897,0 +949,0 @@ return _extends({}, state, {

@@ -11,2 +11,3 @@ import { useRef, useReducer, useEffect, createElement, useContext, useMemo, forwardRef, useState, useCallback } from 'react';

import { makeId } from '@reach/utils/make-id';
import { useStatefulRefValue } from '@reach/utils/use-stateful-ref-value';
import { useComposedRefs } from '@reach/utils/compose-refs';

@@ -119,7 +120,12 @@ import { composeEventHandlers } from '@reach/utils/compose-event-handlers';

// we decide the control is only ready to make a selection if the pointer
// moves first, otherwise the user is just registering the initial button
// click rather than selecting an item. This is similar to a native select on
// most platforms, and our dropdown popover works similarly.
// moves a certain distance OR if the mouse button is pressed for a certain
// length of time, otherwise the user is just registering the initial button
// click rather than selecting an item.
// For context on some implementation details, see https://github.com/reach/reach-ui/issues/563
var readyToSelect = useRef(false); // Trying a new approach for splitting up contexts by stable/unstable
var readyToSelect = useRef(false);
var mouseDownStartPosRef = useRef({
x: 0,
y: 0
}); // Trying a new approach for splitting up contexts by stable/unstable
// references. We'll see how it goes!

@@ -131,2 +137,3 @@

dropdownRef: dropdownRef,
mouseDownStartPosRef: mouseDownStartPosRef,
popoverRef: popoverRef,

@@ -182,6 +189,7 @@ readyToSelect: readyToSelect,

var _useDropdownContext = useDropdownContext(),
triggerRef = _useDropdownContext.triggerRef,
triggerClickedRef = _useDropdownContext.triggerClickedRef,
dispatch = _useDropdownContext.dispatch,
dropdownId = _useDropdownContext.dropdownId,
mouseDownStartPosRef = _useDropdownContext.mouseDownStartPosRef,
triggerClickedRef = _useDropdownContext.triggerClickedRef,
triggerRef = _useDropdownContext.triggerRef,
_useDropdownContext$s = _useDropdownContext.state,

@@ -238,2 +246,7 @@ triggerId = _useDropdownContext$s.triggerId,

mouseDownStartPosRef.current = {
x: event.clientX,
y: event.clientY
};
if (!isExpanded) {

@@ -308,7 +321,8 @@ triggerClickedRef.current = true;

var _useDropdownContext2 = useDropdownContext(),
triggerRef = _useDropdownContext2.triggerRef,
dispatch = _useDropdownContext2.dispatch,
dropdownRef = _useDropdownContext2.dropdownRef,
dispatch = _useDropdownContext2.dispatch,
mouseDownStartPosRef = _useDropdownContext2.mouseDownStartPosRef,
readyToSelect = _useDropdownContext2.readyToSelect,
selectCallbacks = _useDropdownContext2.selectCallbacks,
triggerRef = _useDropdownContext2.triggerRef,
_useDropdownContext2$ = _useDropdownContext2.state,

@@ -331,12 +345,20 @@ selectionIndex = _useDropdownContext2$.selectionIndex,

}, [valueTextProp]);
var ref = useComposedRefs(forwardedRef, ownRef, setValueTextFromDOM);
var mouseEventStarted = useRef(false);
var index = useDescendant({
element: ownRef.current,
key: valueText,
disabled: disabled,
isLink: isLink
}, DropdownDescendantContext, indexProp);
var isSelected = index === selectionIndex && !disabled; // Update the callback ref array on every render
var _useStatefulRefValue = useStatefulRefValue(ownRef, null),
element = _useStatefulRefValue[0],
handleRefSet = _useStatefulRefValue[1];
var descendant = useMemo(function () {
return {
element: element,
key: valueText,
disabled: disabled,
isLink: isLink
};
}, [disabled, element, isLink, valueText]);
var index = useDescendant(descendant, DropdownDescendantContext, indexProp);
var isSelected = index === selectionIndex && !disabled;
var ref = useComposedRefs(forwardedRef, handleRefSet, setValueTextFromDOM); // Update the callback ref array on every render
selectCallbacks.current[index] = onSelect;

@@ -390,4 +412,6 @@

function handleMouseEnter(event) {
var doc = getOwnerDocument(dropdownRef.current);
if (!isSelected && index != null && !disabled) {
if (dropdownRef != null && dropdownRef.current && dropdownRef.current !== document.activeElement && ownRef.current !== document.activeElement) {
if (dropdownRef != null && dropdownRef.current && dropdownRef.current !== doc.activeElement && ownRef.current !== doc.activeElement) {
dropdownRef.current.focus();

@@ -412,5 +436,13 @@ }

function handleMouseMove() {
readyToSelect.current = true;
function handleMouseMove(event) {
if (!readyToSelect.current) {
var threshold = 8;
var deltaX = Math.abs(event.clientX - mouseDownStartPosRef.current.x);
var deltaY = Math.abs(event.clientY - mouseDownStartPosRef.current.y);
if (deltaX > threshold || deltaY > threshold) {
readyToSelect.current = true;
}
}
if (!isSelected && index != null && !disabled) {

@@ -464,7 +496,18 @@ dispatch({

}
} // When the dropdown closes, reset readyToSelect for the next interaction.
}
useEffect(function () {
if (!isExpanded) {
if (isExpanded) {
// When the dropdown opens, wait for about half a second before enabling
// selection. This is designed to mirror dropdown menus on macOS, where
// opening a menu on top of a trigger would otherwise result in an
// immediate accidental selection once the click trigger is released.
var id = window.setTimeout(function () {
readyToSelect.current = true;
}, 400);
return function () {
window.clearTimeout(id);
};
} else {
// When the dropdown closes, reset readyToSelect for the next interaction.
readyToSelect.current = false;

@@ -604,3 +647,3 @@ }

index: items.findIndex(function (i) {
return i.key === prevSelected.key;
return i.key === (prevSelected == null ? void 0 : prevSelected.key);
}),

@@ -897,16 +940,25 @@ dropdownRef: dropdownRef

case SELECT_ITEM_AT_INDEX:
if (action.payload.index >= 0 && action.payload.index !== state.selectionIndex) {
var _action$payload$dropd;
{
var _action$payload$dropd = action.payload.dropdownRef,
dropdownRef = _action$payload$dropd === void 0 ? {
current: null
} : _action$payload$dropd;
if ((_action$payload$dropd = action.payload.dropdownRef) != null && _action$payload$dropd.current && action.payload.dropdownRef.current !== document.activeElement) {
action.payload.dropdownRef.current.focus();
if (action.payload.index >= 0 && action.payload.index !== state.selectionIndex) {
if (dropdownRef.current) {
var doc = getOwnerDocument(dropdownRef.current);
if (dropdownRef.current !== (doc == null ? void 0 : doc.activeElement)) {
dropdownRef.current.focus();
}
}
return _extends({}, state, {
selectionIndex: action.payload.max != null ? Math.min(Math.max(action.payload.index, 0), action.payload.max) : Math.max(action.payload.index, 0)
});
}
return _extends({}, state, {
selectionIndex: action.payload.max != null ? Math.min(Math.max(action.payload.index, 0), action.payload.max) : Math.max(action.payload.index, 0)
});
return state;
}
return state;
case CLEAR_SELECTION_INDEX:

@@ -913,0 +965,0 @@ return _extends({}, state, {

{
"name": "@reach/dropdown",
"version": "0.15.3",
"version": "0.16.0",
"description": "React dropdown menu.",

@@ -16,6 +16,6 @@ "author": "React Training <hello@reacttraining.com>",

"dependencies": {
"@reach/auto-id": "0.15.3",
"@reach/descendants": "0.15.3",
"@reach/popover": "0.15.3",
"@reach/utils": "0.15.3",
"@reach/auto-id": "0.16.0",
"@reach/descendants": "0.16.0",
"@reach/popover": "0.16.0",
"@reach/utils": "0.16.0",
"tslib": "^2.3.0"

@@ -43,3 +43,3 @@ },

],
"gitHead": "aac3d3e1902ec32656476bcdccd7b56207384fcd"
"gitHead": "e4c6093db14e3cc24c26794a002dbd8c866c0387"
}

Sorry, the diff of this file is too big to display

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